/* ==========================================================================
   Shared components used across every page of the system
   ========================================================================== */

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 auto;
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg));
  border-inline-start:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:width .28s var(--ease);
  position:sticky; top:0; height:100vh; overflow:hidden;
}
.sidebar.collapsed{ width:var(--sidebar-w-collapsed); }
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 16px; border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
.sidebar-brand .mark{
  width:38px; height:38px; border-radius:10px; flex:0 0 auto;
  background:conic-gradient(from 220deg, var(--cyan), var(--gold), var(--cyan));
  display:grid; place-items:center; font-weight:900; color:#04211f; font-size:.95rem;
  box-shadow:var(--shadow-glow);
}
.sidebar-brand .name{ font-weight:900; font-size:1.02rem; }
.sidebar-brand .sub{ font-size:.72rem; color:var(--text-muted); font-family:var(--font-data); letter-spacing:1px; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:10px; display:grid; gap:4px; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--radius-sm);
  color:var(--text-muted); text-decoration:none; font-weight:700; font-size:.92rem;
  white-space:nowrap; overflow:hidden;
  border:1px solid transparent;
  cursor:pointer;
}
.nav-item .ic{ width:20px; height:20px; flex:0 0 auto; display:grid; place-items:center; }
.nav-item:hover{ background:var(--surface); color:var(--text); }
.nav-item.active{
  background:linear-gradient(90deg, rgba(34,230,214,.14), transparent);
  border-inline-start:2px solid var(--cyan);
  color:var(--text);
}
.nav-item.locked{ opacity:.35; cursor:not-allowed; }
.nav-item.locked:hover{ background:transparent; color:var(--text-muted); }

.sidebar-foot{
  padding:12px; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  background:var(--surface-2); display:grid; place-items:center;
  font-weight:800; color:var(--cyan); border:1px solid var(--border);
}
.who{ overflow:hidden; }
.who .u-name{ font-weight:800; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who .u-role{ font-size:.72rem; color:var(--text-muted); }
.logout-btn{
  margin-inline-start:auto; background:transparent; border:1px solid var(--border);
  color:var(--text-muted); width:32px; height:32px; border-radius:8px; flex:0 0 auto;
  display:grid; place-items:center;
}
.logout-btn:hover{ color:var(--danger); border-color:var(--danger-dim); }

.sidebar-toggle{
  position:absolute; top:16px; inset-inline-end:-14px;
  width:28px; height:28px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  display:none;
}

/* ---------- Topbar ---------- */
.topbar{
  height:var(--topbar-h); flex:0 0 auto;
  display:flex; align-items:center; gap:14px;
  padding:0 22px; border-bottom:1px solid var(--border-soft);
  background:rgba(10,17,20,.7); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
}
.topbar .page-title{ font-size:1.15rem; font-weight:900; }
.topbar .page-sub{ font-size:.82rem; color:var(--text-muted); }
.burger{
  display:none; width:38px; height:38px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
}
.topbar-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; }

/* ---------- Content area ---------- */
.content{ flex:1; min-width:0; display:flex; flex-direction:column; }
.page{ padding:22px; display:grid; gap:20px; max-width:1400px; width:100%; margin:0 auto; }

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, var(--surface), var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px;
}
.card-title{ font-weight:800; font-size:.98rem; margin-bottom:4px; }
.card-sub{ font-size:.8rem; color:var(--text-muted); }

/* ---------- KPI / gauge cards ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.kpi-card{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%, rgba(34,230,214,.08), transparent 55%), var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px;
}
.kpi-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.kpi-label{ font-size:.8rem; color:var(--text-muted); font-weight:700; }
.kpi-icon{ width:34px; height:34px; border-radius:10px; background:var(--surface-2); display:grid; place-items:center; color:var(--cyan); flex:0 0 auto; }
.kpi-value{ font-family:var(--font-data); font-size:1.9rem; font-weight:700; line-height:1; }
.kpi-trend{ font-size:.76rem; font-weight:700; }
.kpi-trend.up{ color:var(--success); }
.kpi-trend.down{ color:var(--danger); }
.kpi-trend.flat{ color:var(--text-muted); }

/* Instrument-cluster gauge, used sparingly on the hero KPI */
.gauge-wrap{ position:absolute; inset-inline-end:-10px; top:-10px; width:96px; height:96px; opacity:.9; }
.gauge-wrap svg{ width:100%; height:100%; }
.gauge-track{ stroke:var(--surface-2); }
.gauge-value{ stroke:var(--cyan); filter:drop-shadow(0 0 6px var(--cyan-glow)); transition:stroke-dashoffset 1s var(--ease); }

/* ---------- Table-ish list rows (branch status / recent movements) ---------- */
.list-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 4px; border-bottom:1px solid var(--border-soft);
  font-size:.88rem;
}
.list-row:last-child{ border-bottom:0; }
.list-row .r-main{ flex:1; min-width:0; }
.list-row .r-title{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-row .r-sub{ color:var(--text-muted); font-size:.78rem; }
.list-row .r-value{ font-family:var(--font-data); font-weight:700; }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:800;
  border:1px solid transparent;
}
.badge.in{ background:var(--success-dim); color:var(--success); border-color:rgba(51,214,159,.25); }
.badge.out{ background:var(--danger-dim); color:var(--danger); border-color:rgba(255,84,112,.25); }
.badge.low{ background:var(--warning-dim); color:var(--warning); border-color:rgba(255,184,77,.25); }
.badge.ok{ background:rgba(34,230,214,.08); color:var(--cyan); border-color:rgba(34,230,214,.25); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:10px; font-weight:800; font-size:.9rem;
  border:1px solid transparent; cursor:pointer; transition:filter .15s, transform .15s;
  background:var(--surface-2); color:var(--text);
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:scale(.98); }
.btn.primary{ background:linear-gradient(135deg, var(--cyan), #12a89c); color:#04211f; box-shadow:var(--shadow-glow); }
.btn.gold{ background:linear-gradient(135deg, var(--gold), #8a6f2e); color:#241c07; }
.btn.ghost{ background:transparent; border-color:var(--border); color:var(--text-muted); }
.btn.danger{ background:var(--danger-dim); color:var(--danger); border-color:rgba(255,84,112,.3); }
.btn.sm{ padding:7px 12px; font-size:.82rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Inputs ---------- */
.field{ display:grid; gap:6px; }
.field label{ font-size:.82rem; font-weight:700; color:var(--text-muted); }
.field-hint{ margin:2px 0 0; font-size:.78rem; color:var(--text-muted); }
.field-hint-warn{ color:var(--danger); font-weight:700; }
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; }
.pager .pager-info{ font-size:.85rem; color:var(--text-muted); min-width:120px; text-align:center; }
.pager button:disabled{ opacity:.4; cursor:not-allowed; }
.pager-load-more{ display:flex; justify-content:center; margin-top:18px; }
.pager-load-more button:disabled{ opacity:.6; cursor:wait; }

/* ---------- Global loading bar (top of viewport, shown during any API call) ---------- */
.global-loader{
  position:fixed; top:0; inset-inline:0; height:3px; z-index:9999;
  background:transparent; pointer-events:none;
}
.global-loader.active{
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  background-size:200% 100%;
  animation:loaderSweep 1.1s linear infinite;
}
@keyframes loaderSweep{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
.input, select.input{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:11px 14px; font-size:.94rem;
}
.input:focus{ border-color:var(--cyan); }
.input::placeholder{ color:var(--text-faint); }

/* ---------- Modal (shared overlay for item detail, add/edit forms, etc.) ---------- */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  padding:16px;
}
.modal.hidden{ display:none; }
.modal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  width:min(560px, 100%); max-height:88vh; overflow-y:auto;
  padding:22px; box-shadow:var(--shadow-elev);
  animation:modalIn .2s var(--ease);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---------- Toast ---------- */
.toast-stack{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2000; display:grid; gap:8px; }
.toast{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:11px 18px; border-radius:12px; font-weight:700; font-size:.88rem;
  box-shadow:var(--shadow-elev);
  animation:toastIn .25s var(--ease);
}
.toast.success{ border-color:rgba(51,214,159,.35); }
.toast.error{ border-color:rgba(255,84,112,.35); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:30px 10px; color:var(--text-muted); }
.empty .big{ font-size:2rem; margin-bottom:6px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .sidebar{
    position:fixed; inset-inline-start:0; top:0; z-index:100;
    width:var(--sidebar-w); transform:translateX(105%);
  }
  html[dir="rtl"] .sidebar{ transform:translateX(105%); }
  html[dir="rtl"] .sidebar.open{ transform:translateX(0); }
  .sidebar.open{ transform:translateX(0); }
  .burger{ display:grid; place-items:center; }
  .sidebar-toggle{ display:none !important; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
  .kpi-grid{ grid-template-columns:1fr; }
  .page{ padding:14px; }
}

.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s;
}
.scrim.show{ opacity:1; pointer-events:auto; }