/* All comments in ENGLISH */

/* ---------- Base & safety ---------- */
*{ box-sizing:border-box }
html,body{ width:100%; max-width:100%; }
html.no-scroll, body.no-scroll{ overflow:hidden; touch-action:none }

/* ---------- Theming variables ---------- */
:root{
  --container-max:1200px;
  --gap:14px;
  --radius-lg:12px;
  --ring:0 0 0 3px rgba(59,130,246,.35);
  --z-header:1100;
  --z-sidebar:1050;
  --z-overlay:1040;
  --tbl-head-bg:#f8f9fa;
  --tbl-head-fg:#212529;
}
[data-theme="dark"], body.dark{
  --tbl-head-bg:#152032;
  --tbl-head-fg:#f5f5f5;
}

/* ---------- Header (sticky) ---------- */
.app-header{
  position:sticky; top:0; z-index:var(--z-header);
  backdrop-filter: blur(10px) saturate(140%);
  background: rgba(10,16,28,.70);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* ---------- Layout ---------- */
.app-layout{
  display:grid; grid-template-columns: 280px 1fr; gap:0;
}
.app-main{ min-height: 100svh; }

/* Desktop sidebar by default */
.app-sidebar{
  position:sticky; top:var(--header-h,64px);
  align-self:start;
  height: calc(100svh - var(--header-h,64px));
  overflow:auto;
  border-right:1px solid rgba(255,255,255,.08);
}

/* ---------- Mobile drawer behavior ---------- */
.sidebar-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  z-index:var(--z-overlay);
  transition:opacity .2s ease;
}

/* Narrow screens: sidebar becomes off-canvas drawer */
@media (max-width: 1024px){
  .app-layout{ grid-template-columns: 1fr }       /* only main column */
  .app-sidebar{
    position:fixed; inset:0 auto 0 0;
    width:min(86vw, 320px);
    height:100svh;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: var(--z-sidebar);
    background: rgba(14,20,35,.98);
  }
  body.sidebar-open .app-sidebar{ transform: translateX(0) }
  body.sidebar-open .sidebar-overlay{ opacity:1; pointer-events:auto }
}

/* ---------- Forms & buttons (touch targets) ---------- */
.form-control{ min-height:44px; border-radius:10px }
.btn{ min-height:44px; border-radius:12px; transition:transform .06s ease }
.btn:active{ transform: translateY(1px) }
.btn:focus-visible{ outline:none; box-shadow: var(--ring) }

/* ---------- Responsive grids ---------- */
.grid-2{ display:grid; gap:var(--gap); grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width: 992px){ .grid-2{ grid-template-columns: 1fr } .tool-toolbar .btn{ width:100% } }

.results-grid{ display:grid; gap:var(--gap); grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width: 992px){ .results-grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 640px){ .results-grid{ grid-template-columns:1fr } }

/* ---------- Tables (scrollable with sticky head) ---------- */
.table-box{ max-height:min(60vh,480px); overflow:auto; border-radius:var(--radius-lg) }
.table{ width:100% }
.table th, .table td{ white-space:nowrap }
.table-box thead th{
  position:sticky; top:0; z-index:1;
  background-color: var(--tbl-head-bg);
  color: var(--tbl-head-fg);
}
@media (max-width:480px){
  .table th:first-child, .table td:first-child{
    position:sticky; left:0; background:inherit;
  }
}

/* ---------- Nav (compact) ---------- */
.navbar-burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.15); place-items:center }
@media (max-width: 1024px){ .navbar-burger{ display:grid } }

/* ---------- Media hygiene ---------- */
img, svg, canvas, video{ max-width:100%; height:auto; display:block }
@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important } }