/* ============================================================================
   DealerHUB — RESPONSIVE SLOJ (tablet + telefon)  ·  dev-31, Faza 0+1
   ----------------------------------------------------------------------------
   ⚠ AKTIVIRA SE ISKLJUČIVO ISPOD 1024px. Laptop/desktop (>=1024) je ZAMRZNUT —
   nijedno pravilo ovde ne postoji iznad 1024px, pa je desktop layout bit-identičan.
   Sve je aditivno: novi fajl, ne dira postojeći shell CSS.

   Pokriva OBA Command Center shell-a (module_base + cc_base) jer dele iste
   selektore (#app-sidebar / .sb-collapsed / .topbar / .shell / .sb-body).
   Pilot stranice: Admin Console (cc_base) + Hot Line lista (module_base).
   ============================================================================ */

/* Hamburger + backdrop injektuje responsive_nav.js — na desktopu skriveni. */
.nav-ham { display: none; }
.nav-backdrop { display: none; }

/* „Prioritet + expand" — chevron + detalj vidljivi SAMO na telefonu.
   Deljeno između Hot Line (bespoke) i generičkog mobile-keep engine-a. */
.hl-exp-btn { display: none; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; }
.hl-more { display: none; }

/* ====================== TABLET + TELEFON  (< 1024px) ======================= */
@media (max-width: 1023.98px) {

  /* iOS 100vh je nestabilan (dinamička traka pregledača) → dvh. */
  .shell { height: 100dvh; }

  /* --- Hamburger vidljiv u topbar-u --- */
  .nav-ham {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--fg-muted); cursor: pointer; flex-shrink: 0; margin-right: 4px;
  }
  .nav-ham:hover { color: var(--fg); border-color: var(--accent); }
  .nav-ham svg { width: 20px; height: 20px; }

  /* --- Sidebar → RAIL (samo ikone) kad drawer NIJE otvoren ---
     Forsira collapsed izgled bez oslanjanja na .sb-collapsed klasu.        */
  #app-sidebar:not(.drawer-open) {
    width: 64px !important; min-width: 64px;
    padding-left: 10px; padding-right: 10px;
  }
  #app-sidebar:not(.drawer-open) .sb-wordmark,
  #app-sidebar:not(.drawer-open) .navgrp-title,
  #app-sidebar:not(.drawer-open) .navlink > span,
  #app-sidebar:not(.drawer-open) .navlink .nb,
  #app-sidebar:not(.drawer-open) .navsub,
  #app-sidebar:not(.drawer-open) .navsub-2,
  #app-sidebar:not(.drawer-open) .navsub-3,
  #app-sidebar:not(.drawer-open) .navchev-btn,
  #app-sidebar:not(.drawer-open) .sb-avatar-text,
  #app-sidebar:not(.drawer-open) #avatar-btn > span:last-child { display: none !important; }
  #app-sidebar:not(.drawer-open) .navlink { justify-content: center; padding: 10px 0; }
  #app-sidebar:not(.drawer-open) .sb-logo { justify-content: center; }
  #app-sidebar:not(.drawer-open) #avatar-btn { justify-content: center; padding-left: 0; }
  #app-sidebar:not(.drawer-open) .sb-head { align-items: center; }
  #app-sidebar #sidebar-resize { display: none !important; } /* bez resize na touch */

  /* --- Drawer OTVOREN: pun sidebar preko sadržaja (labele + child stranice).
     responsive_nav.js pri otvaranju skida .sb-collapsed → accordion stanje ostaje. */
  #app-sidebar.drawer-open {
    position: fixed !important; left: 0; top: 0;
    height: 100dvh !important; width: 264px !important; min-width: 264px;
    z-index: 120; padding: 20px 14px; overflow: auto;
    box-shadow: 8px 0 40px -8px rgba(0, 20, 28, .40);
  }

  /* --- Backdrop iza drawer-a --- */
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(0, 20, 28, .42);
    z-index: 110; opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .nav-backdrop.show { display: block; opacity: 1; pointer-events: auto; }

  /* --- Content padding manji na malom ekranu ---
     Generički: pokriva sve stranice sa kanonskim page-wrapper padding-om (34px),
     bez per-stranica klase. .dh-page-pad ostaje kao eksplicitan alias. */
  .dh-page-pad,
  [style*="padding-left:34px;padding-right:34px"] {
    padding-left: 16px !important; padding-right: 16px !important;
    padding-top: 18px !important;
  }

  /* ============ ADMIN CONSOLE reflow ============ */
  .ac-shell-grid { grid-template-columns: 1fr !important; padding: 22px 18px !important; gap: 18px !important; }
  .ac-main-grid  { grid-template-columns: 1fr 1fr !important; }              /* KPI 3 → 2 */
  .ac-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* ============ Liste — DealerHUB filter panel (GENERIČKI) ============
     Svaki panel sa id koji se završava na "-filter-panel" (hotline/dealers/
     users/customer_care/…) → kad se otvori (nije .hidden) postaje off-canvas
     overlay umesto uz listu. Pokriva sve postojeće i buduće DealerHUB filtere. */
  aside[id$="-filter-panel"]:not(.hidden) {
    position: fixed !important; left: 0; top: 0; height: 100dvh;
    width: min(300px, 88vw); z-index: 120; overflow: auto; margin: 0;
    border-radius: 0 12px 12px 0; box-shadow: 8px 0 40px -8px rgba(0, 20, 28, .40);
  }

  /* ============ FAZA 3 — hub kartice (7 hub-ova, GENERIČKI) ============
     16-col snap-grid → 2 kolone; kartica ignoriše sačuvanu poziciju (auto)
     i zadržava svoju min-height. Desktop (>=1024) čuva snap-raspored. */
  .dh-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; max-width: none !important; }
  .dh-cardgrid > .dh-card { grid-column: auto !important; grid-row: auto !important; }

  /* ============ FAZA 3 — Dashboard reflow ============ */
  .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }  /* Assigned 5 → 2 (dev-60) */
  #dash-grid { grid-template-columns: 1fr !important; }                            /* work-queue + side stack */
  #dash-grid > * { grid-column: auto !important; }
}

/* ============================ TELEFON  (< 768px) =========================== */
@media (max-width: 767.98px) {

  /* Rail se potpuno sakriva — navigacija samo kroz hamburger (off-canvas). */
  #app-sidebar:not(.drawer-open) {
    position: fixed !important; left: 0; top: 0; height: 100dvh !important;
    transform: translateX(-100%) !important; z-index: 120; width: 64px;
  }

  /* Admin Console: KPI 2 → 1, brend-pločice 3 → 2. */
  .ac-main-grid  { grid-template-columns: 1fr !important; }
  .ac-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ac-shell-grid { padding: 16px 14px !important; }

  /* ===== HOT LINE — prioritet + expand (D2) =====
     Prioritet: Model + Predmet + Dana. Kolona Diler/Status se sakriva; njen
     sadržaj se otkriva chevronom (.hl-more) unutar postojeće ćelije → čuva
     <table> semantiku (bez ARIA sanacije) i ne dira filter/paginaciju. */
  table[data-page-key="hotline.list"] {
    width: 100% !important; min-width: 0 !important; table-layout: auto !important;
  }
  table[data-page-key="hotline.list"] th[data-col-id="status"],
  table[data-page-key="hotline.list"] td[data-col-id="status"] { display: none !important; }
  table[data-page-key="hotline.list"] th[data-col-id="model"],
  table[data-page-key="hotline.list"] td[data-col-id="model"] { width: auto !important; }
  /* Un-clip fiksnu visinu (68px) da se predmet i .hl-more vide u celosti.
     #hl-tbody (ID) nadjačava hotline.html inline <style> koji dolazi kasnije. */
  #hl-tbody > tr.hl-row,
  #hl-tbody > tr.hl-row > td { height: auto !important; max-height: none !important; overflow: visible !important; }
  #hl-tbody > tr.hl-row > td > * { max-height: none !important; overflow: visible !important; }
  .hl-exp-btn { display: inline-flex; }
  tr.hl-expanded .hl-more { display: block; }
  tr.hl-expanded .hl-exp-chev { transform: rotate(180deg); }

  /* ===== GENERIČKI mobile-keep engine (data-mobile-keep na <table>) =====
     responsive_nav.js: sakrije ne-keep kolone (.dh-mcol-hide) i izgradi expand
     (.dh-genmore) u prvoj keep ćeliji. Čita po data-col-id → nezavisno od
     column-prefs/filtera/paginacije (jedan <tr> po redu). */
  table[data-mobile-keep] { width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
  .dh-mcol-hide { display: none !important; }
  table[data-mobile-keep] tr.hl-expanded,
  table[data-mobile-keep] tr.hl-expanded > td { height: auto !important; max-height: none !important; overflow: visible !important; }
  table[data-mobile-keep] tr.hl-expanded > td > * { max-height: none !important; overflow: visible !important; }
  .dh-genmore { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; color: var(--fg-muted); }
  .dh-genmore .dh-more-item { margin-top: 3px; }
  .dh-genmore .dh-more-k { color: var(--fg-subtle); font-weight: 600; margin-right: 4px; }

  /* ===== DILERI / KORISNICI — column-priority (bez novog expand-a) =====
     Naziv ćelija već ima chevron za poslovne jedinice, pa NE dodajemo drugi.
     Telefon zadržava ključne kolone (Naziv + Status); tap na naziv → puna
     edit/detalj stranica sa svim podacima. */
  table[data-page-key="control_panel.dealers"],
  table[data-page-key="control_panel.users"] {
    width: 100% !important; min-width: 0 !important; table-layout: auto !important;
  }
  table[data-page-key="control_panel.dealers"] [data-col-id="hash"],
  table[data-page-key="control_panel.dealers"] [data-col-id="role"],
  table[data-page-key="control_panel.dealers"] [data-col-id="country"],
  table[data-page-key="control_panel.dealers"] [data-col-id="brands"],
  table[data-page-key="control_panel.users"] [data-col-id="hash"],
  table[data-page-key="control_panel.users"] [data-col-id="business_role"],
  table[data-page-key="control_panel.users"] [data-col-id="dealer"],
  table[data-page-key="control_panel.users"] [data-col-id="unit"],
  table[data-page-key="control_panel.users"] [data-col-id="brands"] { display: none !important; }

  /* ===== FAZA 3 — hub kartice 1 kolona ===== */
  .dh-cardgrid { grid-template-columns: 1fr !important; }

  /* ===== FAZA 3 — Dashboard telefon ===== */
  .dash-kpi-grid { grid-template-columns: 1fr !important; }
  /* Work queue: kompaktne kolone — dot + Predmet + Status (skrij Ref#/Type/Age). */
  .wq-grid { grid-template-columns: 12px 1fr auto !important; gap: 10px !important; }
  .wq-grid > :nth-child(2),
  .wq-grid > :nth-child(4),
  .wq-grid > :nth-child(6) { display: none !important; }
  /* Recently used: dot + Naslov + Tip (skrij Ref#). */
  .ru-grid { grid-template-columns: 12px 1fr auto !important; gap: 10px !important; }
  .ru-grid > :nth-child(2) { display: none !important; }

  /* ===== FAZA 4 — Courtesy Car kalendar (telefon) =====
     Matrica ostaje (horizontalni skrol + zamrznuta kolona vozila = ispravan
     obrazac za comparison-heavy podatke). Suzi kolonu vozila 220→132px da se
     vidi više dana; width:max-content da tabela nema prazninu (table-fixed
     sizuje po zbiru kolona). `:not([colspan])` izuzima kategorijski red. */
  #cal-grid-wrap table { width: max-content !important; }
  #cal-grid-wrap .sticky.left-0:not([colspan]) {
    width: 132px !important; min-width: 132px !important; max-width: 132px !important;
  }
}