/* =========================================================
   1) ДИЗАЙН-ТОКЕНИ (кольори, тіні, радіуси, шрифти)
   ========================================================= */
:root{
  --bg:#0e2d4f;
  --panel:#163a62; --panel-2:#1d4774; --panel-3:#245384; --card:#1b446f;
  --text:#eef3fb; --muted:#b7c8de; --line:rgba(255,255,255,.1);
  --good:#22a55e; --accent:#2aa5ff; --warning:#ffb020; --danger:#ff5a5f;
  --shadow:0 8px 20px rgba(0,0,0,.25);
  --radius:16px; --radius-sm:12px; --stake: 99px;
  --font-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  --primary-font: 'Geologica', sans-serif;
  --secondary-font: 'Fira Sans Extra Condensed', sans-serif;
  --extra-font: 'Inter', sans-serif;  

  --primary-1: #2AA5FF;             /* градієнт primary */
  --primary-2: #1B7AD6;
	  
  --tank-bg:#183147;                  /* фон резервуара */
  --tank-grad-1:#2aa5ff;              /* колір градієнта заповнення */
  --tank-grad-2:#1b7ad6;
  --tank-grid-color:rgba(255,255,255,.06);	  
	  
  /* Допоміжні */
  --grad-surface: linear-gradient(180deg,var(--panel-2),var(--card));
  --grad-header:  linear-gradient(180deg,var(--panel),var(--panel-2));
}

/* =========================================================
   2) БАЗА/РЕСЕТ
   ========================================================= */
* { box-sizing:border-box }
html, body { height:100% }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 30% -10%,#194a7b55,transparent), var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Приховування елементів через hidden */
[hidden]{ display:none !important; }

/* =========================================================
   3) ГРИД-ЛЕЙАУТ ДОДАТКА
   ========================================================= */
.app{
  display:grid;
  grid-template-columns:210px 1fr;
  grid-template-rows:72px 1fr;
  grid-template-areas:"sidebar header" "sidebar main";
  height:100dvh;
  overflow:hidden;
}

/* =========================================================
   4) ХЕДЕР/APPBAR
   ========================================================= */
header.appbar{
  grid-area:header;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:0 20px;
  background:var(--grad-header);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
  z-index:2;
}
.title{ display:flex; align-items:center; gap:14px; font-weight:700; letter-spacing:.3px }
.title .logo{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,#2aa5ff,#22a55e);
  display:grid; place-items:center;
  color:#05223d; font-weight:800;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);
}
.title h1{ margin:0; font-size:20px }
.meta{ display:flex; gap:16px; align-items:center; color:var(--muted); font-variant-numeric:tabular-nums }
.meta .pill{ padding:6px 10px; border-radius:999px; background:#12365a; color:var(--text); border:1px solid var(--line) }

/* =========================================================
   5) САЙДБАР/НАВІГАЦІЯ
   ========================================================= */
aside.sidebar{
  font-family: var(--primary-font), sans-serif;	  
  grid-area:sidebar;
  background:linear-gradient(180deg,var(--panel),#0f2a46 40%,#0d2741);
  border-right:1px solid var(--line);
  padding:14px 12px;
  display:flex; flex-direction:column; gap:10px;
}
.nav-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#102b4a }
nav{ display:grid; gap:6px; margin-top:6px }
.nav-item{
  font-family: var(--primary-font), sans-serif;	
  display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px; color:var(--text);
  background:transparent; border:1px solid transparent;
  cursor:pointer; transition:.2s ease;
}
.nav-item:is(:hover,.active){ background:#13355a; border-color:var(--line) }
.nav-item svg{ width:20px; height:20px; opacity:.9 }
.nav-item .badge{
  background:#103252; color:var(--muted);
  padding:4px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px;
}

/* =========================================================
   6) ОСНОВНА ОБЛАСТЬ / ТУЛБАР
   ========================================================= */
main{ grid-area:main; padding:18px 22px 28px; overflow:auto }
.toolbar{ display:flex; justify-content:space-between; align-items:center }
.toolbar-left{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px }
.toolbar .filter{ padding:10px 12px; background:#103252; border:1px solid var(--line); border-radius:12px; color:var(--muted) }
.toolbar-right .btn.accent{
  font-family: var(--primary-font), sans-serif;	
  background: var(--accent);
  color:#05223d; font-weight:700;
  border:none; padding:8px 14px; border-radius:10px; cursor:pointer; transition:background .2s ease;
}
.toolbar-right .btn.accent:hover{ background:#3cb975 }

/* =========================================================
   7) КАРТОЧКИ/СІТКА
   ========================================================= */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.tank-card{ grid-column:span 4 }
.card{	  	
  background:var(--grad-surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px; display:grid; gap:12px; position:relative;
}
.card:hover{ outline:1px solid #2aa5ff55; transform:translateY(-1px); transition:transform .15s ease }
.card-header{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.card-title{ font-weight:700; letter-spacing:.3px }
.card-footer{ display:flex; justify-content:flex-end }
.fuel-tag{
  background:var(--good); color:#072b15; font-weight:800;
  padding:6px 10px; border-radius:999px; box-shadow:inset 0 0 0 2px #0e582e33;
}
/* Бейдж статусу (опційно) */
.card .status-badge{
  position:absolute; right:12px; top:12px;
  padding:4px 8px; border-radius:999px; font-size:12px;
  background:#103252; border:1px solid var(--line); color:var(--muted);
}

/* =========================================================
   8) КНОПКИ (базові)
   ========================================================= */
.btn{
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:#103252; color:var(--text);
  cursor:pointer; transition:.2s ease; text-decoration:none;
}
.btn:hover{ background:#134064 }
.btn.back{ background:#0f2f4f }
.btn.save{ background:var(--accent); color:#05223d; font-weight:800; border-color:transparent }

/* =========================================================
   9) «ТАНК» ВІДЖЕТ (progress-пілюля)
   ========================================================= */
.tank{
  position:relative;
  height:100px;                         /* ширина резервуара */
  border-radius: var(--stake);
  background:var(--tank-bg);
  border:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.tank::before{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}

/* Заповнення: росте знизу догори */
.tank-fill{
  position:absolute;
  bottom:0; left:0; right:0;
  height:var(--fill,0%);
  background:linear-gradient(180deg,var(--tank-grad-1),var(--tank-grad-2));
  transition:height .4s ease;
}

/* Сітка: горизонтальні лінії */
.tank-grid{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 20px,
      var(--tank-grid-color) 20px 21px
    );
  pointer-events:none;
}

/* Значення % */
.tank-value{
  position:absolute;
  inset:0;
  display:grid;
  align-items:end; justify-items:center;
  padding-bottom:6px;
  font-size:22px; font-weight:800;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.props{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px }
.prop{ display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted) }
.prop strong{ color:var(--text); font-variant-numeric:tabular-nums }

/* =========================================================
   10) ГОДИННИК
   ========================================================= */
#clock{transition:text-shadow .4s ease, color .4s ease }
#clock.glow{ text-shadow:0 0 12px rgba(255,255,255,.85); color:var(--accent) }

/* =========================================================
   11) ПЕРЕЛИСТУВАННЯ LIST/DETAILS (flip)
   ========================================================= */
.stage{ position:relative; min-height:480px; perspective:1200px }
.view{ transform-style:preserve-3d; backface-visibility:hidden; transform-origin:50% 50%; transition:transform .55s ease, opacity .55s ease }
#list-view{ opacity:1; transform:rotateY(0deg) }
#details-view{ position:absolute; inset:0; opacity:0; transform:rotateY(-180deg); display:flex; flex-direction:column; gap:16px }
.flip-to-details #list-view{ opacity:0; transform:rotateY(180deg) }
.flip-to-details #details-view{ opacity:1; transform:rotateY(0deg) }
.flip-to-list #list-view{ opacity:1; transform:rotateY(0deg) }
.flip-to-list #details-view{ opacity:0; transform:rotateY(-180deg) }

/* =========================================================
   12) ФОРМИ ДЕТАЛЕЙ (паспорт/ввід)
   ========================================================= */
.details-card{ background:var(--grad-surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px }
.details-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.details-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px 16px }
.field{ grid-column:span 6; display:grid; gap:6px }
.field.sm{ grid-column:span 3 } .field.lg{ grid-column:span 12 }
label{ color:var(--muted); font-size:13px }
input[type="text"], input[type="number"], input[type="password"],  select, textarea{
  background:#103252; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font-family:var(--font-ui);
}

/* =========================================================
   13) МОДАЛКИ (бекдроп + вікно)
   ========================================================= */
.backdrop{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(2,12,22,.55); backdrop-filter:blur(2px);
  z-index:1000;
}
.backdrop.show{ display:flex }                 /* вкл/викл модалки */
.backdrop .modal{
  width:min(480px,92vw); max-height:80vh; overflow-y:auto;
  background:var(--grad-surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); color:var(--text);
}
.backdrop .modal header{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--line);
  background:var(--grad-surface);
}
.backdrop .modal header h2{ margin:0; font-size:18px; letter-spacing:.3px }
.backdrop .modal .content{ padding:16px 18px 22px; display:grid; gap:16px }
.backdrop .modal .content .form-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px 16px }
.backdrop .modal .content .field{ grid-column:span 12; display:grid; gap:6px }
.backdrop .modal label{ color:var(--muted); font-size:13px }
.backdrop .modal input,
.backdrop .modal select,
.backdrop .modal textarea{
  background:#103252; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  font-family:var(--font-ui);
}
.backdrop .modal footer{
  position:sticky; bottom:0;
  display:flex; justify-content:flex-end; gap:10px;
  padding:14px 18px; border-top:1px solid var(--line);
  background:var(--grad-surface);
}

/* =========================================================
   14) ТАБЛИЦЯ «ПОКАЗНИКИ»
   ========================================================= */
.rt-wrap{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.rt-toolbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 12px; background:#103252; border-bottom:1px solid var(--line) }
.rt-toolbar small{ color:var(--muted) }
.rt-scroll{ max-height:380px; overflow:auto; background:var(--grad-surface) }
.rt-table{ width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums }
.rt-table thead th{
  position:sticky; top:0; z-index:1;
  background:#12365a; color:var(--text);
  text-align:left; font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line);
}
.rt-table tbody td{ padding:10px 12px; border-bottom:1px solid var(--line); color:var(--text) }
.rt-table tbody tr:hover{ background:#13406455 }
.latest td{ background:linear-gradient(90deg,#1a4a79 0%, transparent 60%) }
/* Чипи/тренди */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; background:#0f2f4f; color:#cfe0f1 }
.chip.green{ background:#0e3f32; color:#b7f2d0; border-color:#1c6b52 }
.chip.blue{  background:#0e3252; color:#cfe7ff; border-color:#1f568a }
.chip.gray{  background:#0e2a40; color:#c6d2df }
.trend{ font-weight:800 }
.trend.up{ color:#4dd08a } .trend.down{ color:#ff8b8f }

/* =========================================================
   15) ІНДИКАТОРИ ДОСТУПУ НА КАРТЦІ
   ========================================================= */
.access-icon{ display:inline-flex; align-items:center; margin-right:6px;border-radius: 15px;padding: 5px;border: 1px solid var(--line);background: #102b4a}
.access-icon svg{ display:block }
.access-icon.open svg{ color:var(--good) }
.access-icon.locked svg{ color:var(--danger) }
.access-icon.unavailable svg{ color:var(--muted) }

/* =========================================================
   16) АДАПТИВ
   ========================================================= */
@media (max-width:1320px){
  .tank-card{ grid-column:span 6 }
}
@media (max-width:860px){
  .tank-card{ grid-column:span 12 }
}
@media (max-width:1180px){
  .app{ grid-template-columns:84px 1fr }
  .nav-item{ grid-template-columns:40px; justify-items:center }
  .nav-item span,.nav-item .badge{ display:none }
  .nav-head strong{ display:none }
}
@media (max-width:640px){
  header.appbar{ grid-template-columns:1fr; gap:10px; height:auto; padding:10px 14px }
  .meta{ justify-content:space-between }
}