/* ============================================================
   Sunmi MDM Console
   Token layer below is the ONLY place colours are defined — see
   design_handoff_mdm_redesign/tokens.css. Do not add a hex value
   anywhere else in this file.
   ============================================================ */

/* ============================================================
   MDM — token sloj. Kopirati na vrh webui/wwwroot/app.css.
   Jedini izvor istine za boje. Nijedan hex izvan ovog fajla.
   ============================================================ */

:root {
  /* podloge */
  --bg:      #12141f;
  --bg2:     #171a29;
  --surf:    #1e2233;
  --surf2:   #262b3e;
  --line:    #2e3446;
  --line2:   #3a4157;

  /* tekst */
  --tx:      #e9e9ed;
  --tx2:     #9397ab;
  --tx3:     #6f7488;

  /* brend zelena — primarni akcent */
  --ac:      #7AC143;
  --ac2:     #8bd152;
  --ac3:     #4d8a29;
  --acs:     rgba(122,193,67,.14);
  --acink:   #0d1a07;

  /* blurple — sekundarni akcent (DPC, CPU/RAM, sistemske app) */
  --bl:      #9184d9;
  --bls:     rgba(145,132,217,.16);

  /* stanja */
  --warn:    #f7b955;
  --warns:   rgba(247,185,85,.14);
  --dan:     #ff6b6b;
  --dans:    rgba(255,107,107,.13);

  /* istorija baterije — trake grafika. Plava i roze uz zelenu liniju prolaze u
     dataviz validatoru CVD razdvajanje, razliku za normalan vid i kontrast, u obe
     teme. U tamnoj temi validator pada na „lightness band" — ali za postojeću
     brend zelenu `--ac`, koja ovde nije menjana. */
  --bat-charge:       #3987e5;
  --bat-charge-wash:  rgba(57,135,229,.16);
  --bat-charge-wash2: rgba(57,135,229,.45);
  --bat-screen:       #d55181;
  --bat-gap-wash:     rgba(147,151,171,.10);
  --bat-gap-wash2:    rgba(147,151,171,.35);

  /* 3D / elevacija */
  --hi:      rgba(255,255,255,.07);
  --hi2:     rgba(255,255,255,.14);
  --sh:      0 1px 2px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.22);
  --shc:     0 0 0 1px var(--line), 0 8px 24px rgba(0,0,0,.34);
  --shm:     0 0 0 1px var(--line2), 0 24px 64px rgba(0,0,0,.55);
  --glow:    0 0 0 1px rgba(122,193,67,.4), 0 0 18px rgba(122,193,67,.18);

  /* radius */
  --r-sm:    7px;
  --r:       9px;
  --r-card:  12px;
  --r-modal: 14px;

  /* tipografija */
  --font:      "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="light"] {
  --bg:      #eef0f4;
  --bg2:     #f7f8fa;
  --surf:    #ffffff;
  --surf2:   #f4f6f9;
  --line:    #e0e3ea;
  --line2:   #cfd3de;

  --tx:      #1b1d29;
  --tx2:     #5f6474;
  --tx3:     #8b90a0;

  --ac:      #5f9c30;   /* zatamnjena za kontrast na svetlom */
  --ac2:     #8bd152;
  --ac3:     #4d8a29;
  --acs:     rgba(122,193,67,.18);
  --acink:   #132406;

  --bl:      #6d5fc0;
  --bls:     rgba(109,95,192,.13);

  --warn:    #a86f13;
  --warns:   rgba(247,185,85,.2);
  --dan:     #cf3f39;
  --dans:    rgba(207,63,57,.11);

  --bat-charge:       #2a78d6;
  --bat-charge-wash:  rgba(42,120,214,.12);
  --bat-charge-wash2: rgba(42,120,214,.40);
  --bat-screen:       #e87ba4;   /* ispod 3:1 na beloj — vrednosti su zato i u tabeli */
  --bat-gap-wash:     rgba(95,100,116,.08);
  --bat-gap-wash2:    rgba(95,100,116,.30);

  --hi:      rgba(255,255,255,.95);
  --hi2:     rgba(255,255,255,1);
  --sh:      0 1px 1px rgba(20,22,34,.1), 0 2px 4px rgba(20,22,34,.07);
  --shc:     0 0 0 1px var(--line), 0 6px 18px rgba(20,22,34,.07);
  --shm:     0 0 0 1px var(--line2), 0 24px 60px rgba(20,22,34,.22);
  --glow:    0 0 0 1px rgba(95,156,48,.45), 0 0 16px rgba(95,156,48,.16);
}

/* baza */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--tx);
  font-family: var(--font); font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ac); text-decoration: none; }
a:hover { color: var(--ac2); }
::selection { background: var(--acs); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
input, button, select, textarea { font-family: inherit; }

.mono   { font-family: var(--font-mono); }
.muted  { color: var(--tx2); }
.faint  { color: var(--tx3); }
.label  { font-size: 10px; font-weight: 700; letter-spacing: .1em;
          text-transform: uppercase; color: var(--tx3); }

/* animacije */
@keyframes pgIn   { from { opacity:0; transform: translateY(10px) scale(.995) } to { opacity:1; transform:none } }
@keyframes rise   { from { opacity:0; transform: translateY(8px) }  to { opacity:1; transform:none } }
@keyframes spin   { to { transform: rotate(360deg) } }
@keyframes shim   { 0% { background-position:-320px 0 } 100% { background-position:320px 0 } }
@keyframes pulse  { 0%,100% { opacity:1 } 50% { opacity:.75 } }
@keyframes toastIn{ from { opacity:0; transform: translateX(24px) scale(.96) } to { opacity:1; transform:none } }
@keyframes modalIn{ from { opacity:0; transform: translateY(14px) scale(.97) } to { opacity:1; transform:none } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes grow   { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes sweep  { 0% { transform: translateY(-100%) } 100% { transform: translateY(2400%) } }

/* The page-enter animation lives on .page, NOT on the .content container.
   pgIn animates transform, and an element applying a transform becomes the
   containing block for its position:fixed descendants. Modals and the
   remote-desktop overlay are rendered after </div> of .page but still inside
   .content — so animating .content anchored them to the scrolled document
   instead of the viewport: dialogs opened far down the page and the remote
   screen was drawn at the height of the whole document. Reported 20.08.2026.
   On .page they are siblings of the animated element, so the fill is harmless. */
.page-enter,
.page { animation: pgIn .36s cubic-bezier(.16,1,.3,1) both; }

.skeleton {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--surf) 8%, var(--surf2) 22%, var(--surf) 36%);
  background-size: 640px 100%;
  animation: shim 1.3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   MDM — tasteri sa suptilnim 3D efektom.
   Ide posle tokens.css u webui/wwwroot/app.css.
   Imena klasa su ista kao postojeća, pa Razor markup ostaje.
   ============================================================ */

button { font-family: inherit; cursor: pointer; }

.primary, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 15px;
  border-radius: var(--r);
  font-size: 13px;
  transition: transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .12s,
              filter .16s, border-color .16s, color .16s;
}

/* ── Primarni: zeleni gradijent, unutrašnji highlight, senka ── */
.primary {
  border: 1px solid var(--ac3);
  background: linear-gradient(180deg, var(--ac2), var(--ac));
  color: var(--acink);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--hi2), var(--sh);
}
.primary:hover:not(:disabled)  { filter: brightness(1.06); }
.primary:active:not(:disabled) { transform: translateY(1px);
                                 box-shadow: inset 0 2px 4px rgba(0,0,0,.28); }

/* ── Sekundarni (ghost) ── */
.ghost {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surf2), var(--surf));
  color: var(--tx);
  font-weight: 500;
  box-shadow: inset 0 1px 0 var(--hi), var(--sh);
}
/* Kompaktno dugme unutar reda tabele — puna visina bi razvukla red. */
.ghost.sm, .primary.sm {
  padding: 5px 10px;
  font-size: 12px;
  gap: 5px;
}
.ghost:hover:not(:disabled)  { border-color: var(--line2); }
.ghost:active:not(:disabled) { transform: translateY(1px);
                               box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }

/* ── Destruktivni ── */
.danger {
  color: var(--dan);
  border-color: var(--line2);
}
.danger:hover:not(:disabled) { background: var(--dans); }

/* ── Onemogućen: bez reljefa i bez pritiska ── */
.primary:disabled, .ghost:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* ── Ikonični ── */
.btn-icon {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surf2), var(--surf));
  color: var(--tx2);
  box-shadow: inset 0 1px 0 var(--hi), var(--sh);
  transition: transform .12s, color .16s;
}
.btn-icon:hover  { color: var(--tx); }
.btn-icon:active { transform: translateY(1px); }

/* ── Kompaktna varijanta ── */
.small { padding: 6px 11px; font-size: 12px; }

/* ── Blok ── */
.btn-block { width: 100%; min-height: 48px; border-radius: 11px; font-size: 14.5px; }

/* ── Spinner unutar tastera ── */
.btn-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25);
  border-top-color: var(--acink);
  animation: spin .7s linear infinite;
}
.ghost .btn-spin { border-color: var(--line2); border-top-color: var(--tx); }

/* ── Polja ── */
.input, .field input, .field textarea, .search,
input[type="date"], input[type="number"], input[type="password"],
input[type="email"], input[type="text"], textarea, select {
  padding: 10px 13px;
  border-radius: var(--r);
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
  transition: border-color .16s, box-shadow .16s;
}
.input:focus, .field input:focus, .field textarea:focus, .search:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ac);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 0 0 3px var(--acs);
}

/* ── Badge statusa komande ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.badge-queued     { background: var(--line);  color: var(--tx2); }
.badge-dispatched,
.badge-running    { background: var(--warns); color: var(--warn); }
.badge-dispatched::before,
.badge-running::before { animation: pulse 1.2s ease-in-out infinite; }
.badge-succeeded  { background: var(--acs);   color: var(--ac); }
.badge-failed     { background: var(--dans);  color: var(--dan); }
.badge-cancelled,
.badge-expired    { background: var(--line);  color: var(--tx3); }

/* Uloga konzolnog naloga. Zasebne klase, a ne pozajmljene od statusa komandi:
   uloga nije stanje koje se menja samo od sebe, i „administrator" obojen kao
   „u toku" bi se čitao pogrešno. Admin je istaknut jer je to jedina uloga koja
   sme da briše i da pravi naloge. */
.badge-admin      { background: var(--acs);   color: var(--ac); }
.badge-operator   { background: var(--line);  color: var(--tx2); }

/* ── Online tačka ── */
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--tx3); }
.dot.on { background: var(--ac); box-shadow: var(--glow); animation: pulse 2.4s ease-in-out infinite; }

/* ── Kartica / panel ── */
.card, .panel {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shc);
  overflow: hidden;
}
.card-raised {
  background: linear-gradient(180deg, var(--surf2), var(--surf));
  box-shadow: inset 0 1px 0 var(--hi), var(--sh);
}


/* --------- App shell --------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.main-col { display: flex; flex-direction: column; min-width: 0; }

.sidebar {
    background: var(--bg2);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    padding: 20px 0 14px;
    position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 0 20px 22px; }
.brand-mark { height: 19px; width: auto; }
.brand-pill {
    font-size: 10px; font-weight: 600; letter-spacing: .14em;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 3px 7px; color: var(--tx3);
}
.sidebar nav { display: flex; flex-direction: column; padding: 0 10px; gap: 2px; }
.nav-section {
    font-size: 10px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tx3);
    padding: 16px 10px 6px;
}
.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: var(--r);
    font-size: 13.5px; font-weight: 500;
    color: var(--tx2); transition: background .15s, color .15s, box-shadow .15s;
}
.nav-item .ph { font-size: 17px; }
.nav-item:hover  { background: var(--surf2); color: var(--tx); }
.nav-item.active {
    background: var(--acs); color: var(--ac);
    box-shadow: inset 0 0 0 1px var(--ac3), inset 0 1px 0 var(--hi);
}

.who {
    margin-top: auto; padding: 14px 16px 0; margin-top: auto;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 10px;
}
.who-avatar {
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    background: var(--acs); border: 1px solid var(--ac3); color: var(--ac);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.who-text { min-width: 0; flex: 1; }
.who-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); }
.who-out:hover { color: var(--dan); }

/* --------- Top bar --------- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 14px 28px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumb-root { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); }
.crumbs .ph { font-size: 10px; color: var(--tx3); }
.page-title { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* --------- Page chrome --------- */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 28px; gap: 24px;
}
.page-head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.page-head p { margin: 0; }
.page-actions { display: flex; gap: 12px; align-items: center; }
.back { font-size: 13px; color: var(--tx2); margin-bottom: 8px; display: inline-block; }
.back:hover { color: var(--ac); }

.search { width: 280px; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
        background: var(--surf); border: 1px solid var(--line);
        border-radius: var(--r); color: var(--tx2); cursor: pointer; }

/* --------- Tables --------- */
.grid {
    width: 100%; border-collapse: collapse;
    background: var(--surf); border-radius: var(--r); overflow: hidden;
    border: 1px solid var(--line);
}
.grid th { text-align: left; padding: 12px 16px; font-size: 11px;
           text-transform: uppercase; letter-spacing: .1em; color: var(--tx3);
           border-bottom: 1px solid var(--line); font-weight: 700; }
.grid td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.grid tr:last-child td { border-bottom: none; }
.grid tr.row { cursor: pointer; transition: background .12s; }
.grid tr.row:hover { background: var(--surf2); }
.grid .arrow { color: var(--tx3); }
.grid tr.row:hover .arrow { color: var(--ac); }


/* --------- Metric cards --------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
         gap: 12px; margin-bottom: 16px; }
.metric-card {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--surf2), var(--surf));
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 14px 16px;
    box-shadow: inset 0 1px 0 var(--hi), var(--sh);
    animation: rise .36s cubic-bezier(.16,1,.3,1) both;
}
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-top .ph, .metric-top .ph-fill { font-size: 14px; color: var(--m); }
.metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
                color: var(--tx3); font-weight: 700; }
.metric-value { font-family: var(--font-mono); font-size: 23px; font-weight: 500;
                letter-spacing: -.02em; margin-top: 10px; }
/* Traka: 3px, prelaz 0.8s da promena na telemetrijski push bude vidljiva a ne skokovita. */
.metric-bar { height: 3px; border-radius: 2px; background: var(--line); margin-top: 10px; overflow: hidden; }
.metric-bar span { display: block; height: 100%; background: var(--m);
                   transition: width .8s cubic-bezier(.4,0,.2,1); }
.metric-sub { font-size: 11.5px; color: var(--tx2); margin-top: 7px; }

/* --------- Panels --------- */
.panel { margin-bottom: 20px; }
.panel-head { padding: 16px 20px; border-bottom: 1px solid var(--line);
              display: flex; justify-content: space-between; align-items: center; }
.panel-head h2 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.panel > .grid { border: none; border-radius: 0; }
.panel > p { padding: 24px; margin: 0; }
.cmd-bar { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------- Modal --------- */
.modal-back { position: fixed; inset: 0; background: rgba(6,7,12,.66); z-index: 999;
              display: flex; align-items: center; justify-content: center; padding: 40px;
              animation: fadeIn .18s both; backdrop-filter: blur(3px); }
.modal { background: var(--surf); border: 1px solid var(--line);
         border-radius: var(--r-modal); width: 95%; max-width: 560px;
         display: flex; flex-direction: column; box-shadow: var(--shm);
         animation: modalIn .28s cubic-bezier(.16,1,.3,1) both; }
/* Širine po ekranu: dijalog koji nosi tabelu uređaja ne može biti isti kao
   onaj sa dva polja, a ni jedan ni drugi ne treba da bude preko celog ekrana. */
.modal.small { max-width: 440px; }
.modal.w520  { max-width: 520px; }
.modal.w620  { max-width: 620px; }
.modal.large { max-width: 1100px; height: 80vh; }
.modal header { padding: 15px 20px; border-bottom: 1px solid var(--line);
                display: flex; justify-content: space-between; align-items: center; }
.modal h3 { margin: 0; font-size: 15px; font-weight: 600; }
.modal .x { background: none; border: none; color: var(--tx2); font-size: 24px; line-height: 1; cursor: pointer; }
.modal iframe { flex: 1; border: none; width: 100%; background: #000; }
/* flex: 1 + min-height: 0 su oba potrebna — bez min-height fleks stavka ne sme da
   se skupi ispod visine sadržaja, pa overflow-y nema šta da skroluje i donji deo
   forme (dozvole, dugme Sačuvaj) ostaje odsečen ispod ivice modala. */
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px;
              flex: 1; min-height: 0; max-height: 66vh; overflow-y: auto; }
.modal.large .modal-body { max-height: none; }

/* --------- Forms --------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
              color: var(--tx3); font-weight: 700; }
.field textarea { resize: vertical; }

/* --------- Empty/loading states --------- */
.loading { padding: 80px 20px; text-align: center; color: var(--tx2); }

/* --------- Dashboard --------- */
/* Bio je drugi `.cards` u fajlu.  Kako je dolazio kasnije, tiho je gazio mrežu
   telemetrijskih kartica — build ne prijavlja duplirani selektor. */
.cards-kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.kpi {
    position: relative; overflow: hidden;
    padding: 16px 18px; border-radius: var(--r-card);
    background: linear-gradient(180deg, var(--surf2), var(--surf));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--hi), var(--sh);
    animation: rise .4s cubic-bezier(.16,1,.3,1) both;
}
/* 2px trak u boji metrike uz levu ivicu */
.kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
               background: var(--kpi); opacity:.7; }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kpi-top .ph, .kpi-top .ph-fill { color: var(--kpi); font-size:16px; }
.kpi-val { font-size:28px; font-weight:500; letter-spacing:-.02em; }
.kpi-sub { font-size:12px; color: var(--tx2); margin-top:4px; }

.dash-row { display:grid; grid-template-columns:1.55fr 1fr; gap:14px; margin-top:14px; }
@media (max-width: 1100px) { .dash-row { grid-template-columns: 1fr; } }

.chart { display:flex; align-items:flex-end; gap:5px; height:170px; padding:16px 18px 0; }
.bar {
    flex:1; border-radius:4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--ac2), var(--ac3));
    transform-origin: bottom; animation: grow .6s cubic-bezier(.16,1,.3,1) both;
    transition: filter .16s;
}
.bar:hover { filter: brightness(1.25); }
.chart-axis { display:flex; justify-content:space-between; padding:8px 18px 16px;
              font-size:11px; color: var(--tx3); }

.attn-list { display:flex; flex-direction:column; }
.attn-row {
    display:flex; align-items:center; gap:12px; cursor:pointer;
    padding:12px 18px; border-bottom:1px solid var(--line);
    transition: background .12s;
}
.attn-row:last-child { border-bottom:none; }
.attn-row:hover { background: var(--surf2); }
.attn-row .arrow { margin-left:auto; color: var(--tx3); }
.attn-title { font-size:13px; font-weight:500; }
.attn-sub   { font-size:11.5px; color: var(--tx2); }
.sev-warn { color: var(--warn); }
.sev-dan  { color: var(--dan); }

.empty-inline { display:flex; align-items:center; gap:12px; padding:20px 18px; }
.empty-inline .ph { font-size:26px; color: var(--ac); }

/* --------- Toasts --------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1200;
          display: flex; flex-direction: column; gap: 10px; }
.toast {
    display: flex; align-items: center; gap: 11px; cursor: pointer;
    min-width: 250px; padding: 12px 15px;
    background: var(--surf); border: 1px solid var(--line2);
    border-radius: 11px; box-shadow: var(--shm);
    font-size: 13px; color: var(--tx);
    animation: toastIn .3s cubic-bezier(.16,1,.3,1) both;
}
.toast .ph-fill { font-size: 18px; }
.tk-ok   { color: var(--ac); }
.tk-sent { color: var(--bl); }
.tk-warn { color: var(--warn); }
.tk-err  { color: var(--dan); }

/* --------- Modal footer --------- */
.modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; background: var(--surf2);
    border-top: 1px solid var(--line);
}

/* --------- Pretraga sa ikonicom --------- */
.search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-wrap .ph { position: absolute; left: 11px; color: var(--tx3); font-size: 15px; pointer-events: none; }
.search-wrap .search { padding-left: 34px; width: 300px; max-width: 340px; }

/* --------- Segmentni filteri --------- */
.segs { display: flex; gap: 8px; margin: 4px 0 16px; }
.seg {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; border-radius: var(--r);
    border: 1px solid var(--line); background: var(--surf);
    color: var(--tx2); font-size: 13px; font-weight: 500;
    transition: color .15s, border-color .15s, background .15s;
}
.seg:hover { color: var(--tx); border-color: var(--line2); }
.seg.on    { background: var(--acs); border-color: var(--ac3); color: var(--ac); }
.seg-n {
    font-family: var(--font-mono); font-size: 11px;
    color: inherit; opacity: .75;
}

/* --------- Grid tabela (klikabilni redovi) --------- */
.grid-x {
    display: grid;
    grid-template-columns: 34px 1.4fr 1.1fr .9fr .6fr .7fr .6fr .9fr 34px;
    gap: 12px; align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}
.grid-x.head {
    background: var(--surf2); border-radius: var(--r-card) var(--r-card) 0 0;
    padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.grid-x.row {
    background: var(--surf); cursor: pointer;
    transition: background .12s;
    animation: rise .34s cubic-bezier(.16,1,.3,1) both;
}
.grid-x.row:hover { background: var(--surf2); }
.grid-x.row:last-of-type { border-radius: 0 0 var(--r-card) var(--r-card); }
.grid-x .arrow { color: var(--tx3); }
.grid-x.row:hover .arrow { color: var(--ac); }
.grid-foot { padding: 12px 16px; font-size: 12px; }

/* Prosirivanje skracenog spiska — puna sirina ispod tabele, da se ne trazi
   dugme od 16 px u dnu petsto piksela sirokog panela. */
.more-row {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px 16px;
    background: none; border: none; border-top: 1px solid var(--line);
    color: var(--tx2); font: inherit; font-size: 12.5px; cursor: pointer;
    transition: background .12s, color .12s;
}
.more-row:hover { background: var(--surf2); color: var(--tx); }

.pill-dpc {
    display: inline-block; padding: 3px 8px; border-radius: 999px;
    background: var(--bls); color: var(--bl);
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
}

/* --------- Prazno stanje --------- */
.empty { text-align: center; padding: 56px 20px; }
.empty .ph { font-size: 40px; color: var(--tx3); display: block; }
.empty h2  { margin: 14px 0 6px; font-size: 15px; font-weight: 600; }
.empty p   { margin: 0 auto; font-size: 13px; color: var(--tx2); max-width: 46ch; }

/* --------- Politike kao kartice --------- */
.cards-policy { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pcard {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 18px; border-radius: var(--r-card);
    background: linear-gradient(180deg, var(--surf2), var(--surf));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--hi), var(--sh);
    transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s;
    animation: rise .4s cubic-bezier(.16,1,.3,1) both;
}
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shc); }
.pcard-top  { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-name { font-size: 15px; font-weight: 600; }
.pcard-top .ph { font-size: 18px; color: var(--ac); }
.pcard-desc { margin: 0; font-size: 12.5px; color: var(--tx2); line-height: 1.5; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    padding: 3px 9px; border-radius: 999px;
    background: var(--bls); color: var(--bl); font-size: 11px; font-weight: 500;
}
.pcard-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-top: 11px; margin-top: auto;
    border-top: 1px solid var(--line); font-size: 11.5px;
}

/* --------- Sesije --------- */
.count-pill {
    display: inline-block; margin-left: 8px; padding: 2px 9px;
    border-radius: 999px; background: var(--acs); color: var(--ac);
    font-size: 11px; font-weight: 700; font-family: var(--font-mono);
}

/* --------- Avatar kvadrat u listi radnika --------- */
.avatar-sq {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-right: 10px; vertical-align: -8px;
    border-radius: 7px; background: var(--surf2); border: 1px solid var(--line);
    color: var(--tx2); font-size: 10.5px; font-weight: 600;
}

/* --------- Prijava (podeljen ekran) --------- */
.auth-split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
@media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; } .auth-right { display: none; } }

.auth-left { display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 40px; }
.auth-form {
    width: 100%; max-width: 360px;
    display: flex; flex-direction: column; gap: 14px;
    animation: rise .5s cubic-bezier(.16,1,.3,1) both;
}
.auth-logo { width: 150px; margin-bottom: 6px; }
.auth-form h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.auth-tag { margin: -6px 0 8px; font-size: 13px; color: var(--tx2); }
.auth-note { margin: 4px 0 0; font-size: 12px; color: var(--tx3); line-height: 1.5; }
.err {
    display: flex; align-items: center; gap: 9px;
    background: var(--dans); color: var(--dan);
    padding: 10px 13px; border-radius: var(--r); font-size: 13px;
}

.auth-right {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #1b1f33, #12141f 60%);
    border-left: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
}
.auth-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 40%, var(--acs), transparent 60%);
}
.auth-tiles {
    position: relative;
    display: grid; grid-template-columns: repeat(4, 54px); gap: 14px;
}
.auth-tile {
    width: 54px; height: 54px; border-radius: 10px;
    background: var(--surf); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--tx3); font-size: 20px;
    animation: fadeIn .5s ease-out both;
}
.auth-tile.lit { color: var(--ac); border-color: var(--ac3); background: var(--acs); }

/* --------- Enrollment kod --------- */
.code-cell {
    font-family: var(--font-mono); font-size: 14px; font-weight: 500;
    letter-spacing: .08em; color: var(--ac);
}
.expired { color: var(--dan); }

/* Veliki prikaz koda posle generisanja — operater ga prepisuje sa ekrana,
   pa je razmak između znakova važniji nego što izgleda. */
.code-show {
    font-family: var(--font-mono); font-size: 30px; letter-spacing: .22em;
    color: var(--ac); text-align: center;
    background: var(--acs); border: 1px solid var(--ac3);
    border-radius: 11px; padding: 20px; margin: 12px 0;
    animation: markIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes markIn { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }

/* Traka komandi: ikonica + labela, gušće nego obični tasteri jer ih je trinaest. */
.cmd-bar .ghost { padding: 8px 12px; font-size: 12.5px; }

/* Upozorenje pred fabrički reset. */
.wipe-warn {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--dans); border: 1px solid var(--dan);
    border-radius: var(--r); padding: 13px 15px; font-size: 13px;
}
.wipe-warn .ph-fill { font-size: 20px; color: var(--dan); flex: none; }

/* --------- Sesija radnika na detalju uređaja --------- */
/* Banner za aktivnu sesiju: ista akcentna porodica kao „primenjeno" stanje,
   jer i jedno i drugo znači „nešto je trenutno na snazi na ovom uređaju". */
.session-bar {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 16px; border-radius: 10px; margin-bottom: 16px;
    font-size: 13px;
}
.session-bar.active {
    background: var(--acs); border: 1px solid var(--ac3); color: var(--tx);
    box-shadow: inset 0 1px 0 var(--hi);
}
.session-bar.active strong { color: var(--ac); }
.session-bar.idle {
    background: var(--surf); border: 1px solid var(--line); color: var(--tx3);
}
.session-bar .ghost { margin-left: auto; }
.session-icon { font-size: 18px; color: var(--ac); }

/* --------- Remote Desktop overlay --------- */
/* Nema tokena za pozadinu: overlay namerno ide tamnije od najtamnije površine
   teme, i u svetloj temi takođe — ekran telefona mora da bude jedina svetla
   stvar na monitoru da bi se video ono što se na njemu dešava. */
.rdp-overlay {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; flex-direction: column;
    background: #07080d;
    animation: fadeIn .24s ease both;
}
.rdp-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 16px;
    background: var(--bg2); border-bottom: 1px solid var(--line);
    font-size: 13px; font-weight: 600;
}
.rdp-toolbar > .rdp-title { display: flex; align-items: center; gap: 9px; }
.rdp-toolbar .rdp-title .ph { font-size: 17px; color: var(--ac); }
.rdp-status {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--acs); color: var(--ac);
    border-radius: 999px; padding: 3px 10px;
    font-size: 11.5px; font-weight: 600;
    margin-right: auto;
}
.rdp-status::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; animation: pulse 1.2s ease-in-out infinite;
}
.rdp-text {
    min-width: 200px; flex: 0 1 260px;
    background: var(--surf); border: 1px solid var(--line); color: var(--tx);
    border-radius: var(--r); padding: 7px 11px; font-size: 12.5px;
}
.rdp-text:focus { outline: none; border-color: var(--ac3); }

/* Stage drži video u sredini i — bitno — ograničava mu visinu.
   Bez `min-height:0` flex stavka odbija da se smanji ispod sopstvenog
   sadržaja, pa se stream renderuje u nativnoj rezoluciji i ispada iz ekrana. */
.rdp-stage {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 18px; position: relative;
}
/* Bez `height: 100%`.  Sa definitivnom visinom aspect-ratio racuna sirinu iz
   nje, a `max-width` posle toga samo secka — visina se ne vraca nazad, pa na
   sirokom a niskom prozoru okvir izleti iz scene.  Ovako su oba ogranicenja
   maksimumi i onaj koji prvi stigne odredjuje velicinu. */
.rdp-frame {
    position: relative; overflow: hidden;
    aspect-ratio: 9 / 19.5;
    max-height: 100%; max-width: 100%;
    border-radius: 20px;
}
.rdp-video {
    width: 100%; height: 100%;
    object-fit: contain; background: #000;
    border-radius: 20px; border: 1px solid #262b3e;
    box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
    cursor: crosshair; touch-action: none;
}
/* Scanline se vrti dok se čeka prvi frame — bez njega je crn pravougaonik
   isti i kad se čeka i kad je veza pukla.  Traka je pravi element koji se
   pomera `transform`-om (keyframe `sweep` iz token sloja); varijanta sa
   `background-position` u procentima racuna se u odnosu na razliku velicina
   kontejnera i slike, pa putanja zavisi od visine okvira.  `top` u procentima
   se racuna u odnosu na visinu okvira, pa putanja uvek ide tacno od vrha do
   dna bez obzira koliko je prozor visok. */
.rdp-frame.waiting::after {
    content: ''; position: absolute; left: 0; right: 0; height: 80px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(122,193,67,.10), transparent);
    animation: rdpScan 3.4s linear infinite;
}
@keyframes rdpScan { from { top: -80px } to { top: 100% } }
.rdp-hint {
    background: var(--acs); border-top: 1px solid var(--ac3);
    color: var(--ac); font-size: 12.5px; padding: 10px 16px; text-align: center;
}

/* --------- Crtanje preko ekrana uredjaja --------- */
/* Platno pravi `webrtc.js` i kaci ga u `.rdp-frame` odmah iza `<video>`.
   Isti polozaj i isti radijus kao video: `.rdp-frame` je `position: relative`,
   pa `inset: 0` znaci tacno preko slike.

   `pointer-events` je ovde jedina stvar koja odlucuje da li operater crta ili
   upravlja uredjajem. Bez `.draw` platno je propusno i mis stize do `<video>`
   elementa, koji ima svoje slusace za tap/swipe — daljinski unos radi tacno kao
   pre. Sa `.draw` platno hvata dogadjaje i do videa ne stize nista, pa se potez
   ne pretvori usput u prevlacenje po tudjem ekranu. */
.rdp-annot {
    position: absolute; inset: 0;
    border-radius: 20px;
    pointer-events: none;
}
.rdp-annot.draw { pointer-events: auto; cursor: crosshair; touch-action: none; }

.rdp-tools { display: inline-flex; align-items: center; gap: 6px; }

/* Kvadratna dugmad, bez teksta: u traci vec stoji sest dugmadi sa natpisima,
   pa alati moraju da se razlikuju oblikom a ne duzinom. */
.rdp-tool {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--tx2); font-size: 15px; cursor: pointer;
}
.rdp-tool:hover  { border-color: var(--line2); color: var(--tx); }
.rdp-tool:active { transform: translateY(1px); }
.rdp-tool.on {
    background: var(--acs); border-color: var(--ac3); color: var(--ac);
}

.rdp-swatches { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }

/* Boja dugmeta se postavlja inline iz Razora — ona nije deo teme nego sadrzaj
   izbora, pa hex ovde namerno ne stoji. */
.rdp-swatch {
    width: 18px; height: 18px; padding: 0;
    border: 1px solid var(--line2); border-radius: 50%;
    cursor: pointer;
}
.rdp-swatch:hover { transform: scale(1.12); }
.rdp-swatch.on    { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--ac); }

/* Dok je alat izabran, dodir NE ide na uredjaj. To se na slici ne vidi — bez
   napomene operater klikne po ekranu telefona i zakljuci da je unos crkao. */
.rdp-annot-note {
    color: var(--warn); background: var(--warns);
    border-radius: 999px; padding: 3px 9px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
}

/* --------- Klase koje su preživele iz starog CSS-a --------- */
/* Ove su ispale pri prelasku na tokene i markup ih i dalje koristi.
   Vraćene su na tokene; pun spec prolaz za te stranice nije rađen. */
.strong { font-weight: 600; color: var(--tx); }
.spin-i { animation: spin .9s linear infinite; }
.row-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.checks { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.policy-form h4 {
    margin: 18px 0 8px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--tx3);
}
.warn-box {
    background: var(--warns); border: 1px solid var(--warn);
    border-radius: var(--r); padding: 13px 15px; font-size: 13px;
}
.warn-box p { margin: 0 0 6px; }
.warn-box p:last-child { margin-bottom: 0; }
.attn-text { min-width: 0; }

/* --------- Sesije: kartice --------- */
.session-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px; padding: 4px 0 12px;
}
.session-card {
    background: linear-gradient(180deg, var(--surf2), var(--surf));
    border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
    box-shadow: inset 0 1px 0 var(--hi), var(--sh);
    animation: rise .36s cubic-bezier(.16,1,.3,1) both;
}
.sc-user   { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.sc-user .ph-fill { color: var(--ac); font-size: 17px; }
.sc-device { font-size: 13px; color: var(--tx2); }
.sc-serial { font-family: var(--font-mono); font-size: 11px; color: var(--tx3); }
.sc-time   { font-size: 11.5px; color: var(--tx3); }

/* --------- Štikliranje prava naloga --------- */
/* Prava se prikazuju grupisana (Uređaji, Flota, Istorija, Licence, Nalozi) jer
   je spisak od osamnaest štiklirana u jednoj koloni nečitljiv — operater traži
   „sme li da briše", a ne pojedinačan ključ. */
.perm-group { margin: 10px 0 4px; }
.perm-group-title {
    font-size: 10px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--tx3); margin-bottom: 6px;
}
.perm-group .chip { margin: 0 6px 6px 0; }

/* Zaglavlje koje sortira je dugme, ali ne sme da izgleda kao dugme — nasleđuje
   font i boju zaglavlja, a menja se samo pod kursorom, da se vidi da reaguje. */
.th-sort {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: inherit;
    letter-spacing: inherit; text-transform: inherit;
}
.th-sort:hover { color: var(--tx); }

/* Ime kupca u spisku uređaja je dugme, ne tekst: odatle se ulazi u njegov nalog.
   Izgleda kao oznaka da ne otima pažnju od imena uređaja, ali reaguje na kursor
   da se vidi da je klikabilno. */
.org-chip {
    background: none; border: 1px solid transparent;
    padding: 2px 7px; border-radius: 999px;
    color: var(--tx); font-size: 12px; cursor: pointer;
    text-align: left;
}
.org-chip:hover { border-color: var(--line2); background: var(--bg2); color: var(--ac); }

/* --------- Ulazak u nalog kupca --------- */
/* Prekidač stoji u top baru, uz živu pilulu: to je jedino mesto koje se ne menja
   sa stranicom, a kupac u kome se radi mora da bude vidljiv stalno — inače se
   komanda pošalje tuđem terminalu u uverenju da je svoj. */
.org-switch {
    max-width: 210px;
    font-size: 12px;
    padding: 7px 30px 7px 11px;
}

/* Kad se radi u tuđem nalogu, to se i vidi preko cele širine — bojom koja nije
   ni uspeh ni greška, nego upozorenje: radnja je stvarna, ali se ne dešava u
   sopstvenoj firmi. */
.onbehalf-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px;
    background: var(--warns);
    color: var(--warn);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}
.onbehalf-bar .ph { font-size: 16px; }
.onbehalf-bar strong { color: var(--warn); }
.onbehalf-bar button { margin-left: auto; }

/* Ugašena firma i isključena licenca ostaju na spisku, ali prigušene: brisanje
   bi odnelo istoriju, a ravnopravan prikaz bi ih izjednačio sa aktivnima. */
.row-muted { opacity: .55; }

/* --------- Polja koja je pregazio pretraživač --------- */
/* select, range i date su do sada bili nativne kontrole: u tamnoj temi bela
   pozadina, u svetloj sistemska siva. Nijedan od njih nije nasleđivao ništa
   iz token sloja. */
select, .field select {
    padding: 10px 32px 10px 13px;
    background: var(--bg2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5L6 8.5L10 4.5' stroke='%236f7488' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 11px center;
    appearance: none; cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.55); cursor: pointer; }

input[type="range"] {
    appearance: none; width: 100%; height: 4px; padding: 0;
    border: none; border-radius: 2px;
    background: linear-gradient(90deg, var(--ac) var(--fill, 50%), var(--line) var(--fill, 50%));
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(180deg, var(--ac2), var(--ac));
    border: 1px solid var(--ac3); box-shadow: var(--sh);
}
input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ac3);
    background: var(--ac);
}

/* --------- Dozvole kao pill toggle-i (Politike) --------- */
/* Checkbox ne pokazuje stanje dok mu ne pročitaš labelu; ovde se uključena
   dozvola vidi po boji, što je važno jer ih ima četiri u nizu. */
.perm-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; border-radius: 999px;
    background: var(--surf2); border: 1px solid var(--line); color: var(--tx3);
    font-size: 12.5px; font-weight: 500; cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.perm-toggle .ph { font-size: 15px; }
.perm-toggle:hover { border-color: var(--line2); }
.perm-toggle.on {
    background: var(--acs); border-color: var(--ac3); color: var(--ac);
}

/* --------- Opseg datuma (Sesije) --------- */
.date-range {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg2); border: 1px solid var(--line);
    border-radius: var(--r); padding: 4px 6px 4px 8px;
}
.date-range input[type="date"] {
    background: none; border: none; padding: 4px 6px; font-size: 12.5px;
    color: var(--tx); font-family: var(--font-mono);
}
.date-range .sep { color: var(--tx3); font-size: 13px; }

/* --------- Istorija baterije (detalj uređaja) --------- */
.bat-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px 4px; }
/* Pri promeni perioda stari prikaz ostaje, samo prigušen — bez skoka rasporeda. */
.bat-body { padding: 10px 18px 18px; transition: opacity .16s; }
.bat-body.is-loading { opacity: .55; }
.bat-cards { margin-bottom: 14px; }
.bat-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 2px 0 6px; font-size: 12px; color: var(--tx2); }
.bat-key { display: inline-flex; align-items: center; gap: 6px; }
.bat-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.bat-sw-charge { background: var(--bat-charge-wash2); }
.bat-sw-screen { background: var(--bat-screen); height: 6px; }
.bat-sw-gap    { background: var(--bat-gap-wash2); }
.bat-chart { position: relative; overflow-x: auto; }
.bat-svg { display: block; width: 100%; min-width: 640px; height: auto; touch-action: pan-y; }
.bat-band-charge { fill: var(--bat-charge-wash); }
.bat-band-gap    { fill: var(--bat-gap-wash); }
.bat-grid { stroke: var(--line); stroke-width: 1; }
.bat-tick { stroke: var(--line2); stroke-width: 1; }
.bat-ylab, .bat-xlab { fill: var(--tx3); font-size: 11px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bat-strip-bg { fill: var(--surf2); }
.bat-strip { fill: var(--bat-screen); }
.bat-line { fill: none; stroke: var(--ac); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bat-cross { stroke: var(--tx3); stroke-width: 1; pointer-events: none; }
.bat-dot { fill: var(--ac); stroke: var(--surf); stroke-width: 2; pointer-events: none; }
.bat-tip {
    position: absolute; top: 4px; z-index: 2; pointer-events: none; white-space: nowrap;
    padding: 7px 10px; border-radius: var(--r-sm); font-size: 12px;
    background: var(--surf2); border: 1px solid var(--line2); box-shadow: var(--sh);
}
.bat-tip-v { font-size: 14px; font-weight: 700; color: var(--tx); }
.bat-tip-l { color: var(--tx2); }
.bat-table-wrap { overflow-x: auto; margin-top: 14px; }
.bat-table td { vertical-align: top; }
.bat-table .nowrap { white-space: nowrap; }
.bat-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.bat-kind .ph { font-size: 15px; }
.bat-kind-charge .ph    { color: var(--bat-charge); }
.bat-kind-discharge .ph { color: var(--ac); }
.bat-kind-gap           { color: var(--tx3); }
.bat-edge { margin-left: 6px; color: var(--tx3); cursor: help; }
.bat-rates { font-size: 12px; color: var(--tx3); }
.bat-notes { font-size: 12.5px; color: var(--tx2); }
.bat-warn { color: var(--dan); }
.bat-warn .ph { margin-right: 4px; }

/* --------- Stagger za redove tabele --------- */
.grid tbody tr { animation: rise .34s cubic-bezier(.16,1,.3,1) both; }

/* --------- Inventar aplikacija --------- */
/* Red aplikacije je dvoredan: naziv gore, paket dole. Celije se zato poravnavaju
   uz VRH — podrazumevano vertikalno centriranje bi verziju i velicinu spustilo
   izmedju dva reda teksta i one vise ne bi stajale uz naziv. */
.grid.apps td { vertical-align: top; }

/* Mesto za ikonicu se rezervise ovde, a ne prisustvom slike: ikonice stizu sa
   uredjaja tek koji minut posle inventara, pa bi red bez fiksne kutije poskocio
   kad prva stigne. Isti okvir vazi i za rezervni znak. */
.app-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: var(--r-sm);
    background: var(--surf2);
    color: var(--tx3); font-size: 17px;
    overflow: hidden;
}
.app-ico img { width: 36px; height: 36px; display: block; object-fit: contain; }

.app-title { font-weight: 600; font-size: 14px; color: var(--tx); }
/* Paket i tip u drugom planu — vidljivi i citljivi, ali ne otimaju paznju od
   naziva. Paket ostaje `mono` jer se prepisuje u komande. */
.app-sub {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-top: 2px;
}
.pkg { font-size: 11.5px; color: var(--tx2); }
.apptype {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.apptype.sys { color: var(--tx3); }
.apptype.usr { color: var(--bl); }

/* --------- Sadržaj i live pill --------- */
/* `.content` je ostao bez ijednog pravila pri prelasku na tokene, pa su
   stranice bile priljubljene uz sidebar i top bar. */
/* max-width je bio i u staroj verziji: bez njega se tabela sa šest kolona
   razvuče preko celog 34" monitora i oko putuje pola metra od naziva uređaja
   do njegovog statusa. */
.content { padding: 26px 28px 44px; min-width: 0; max-width: 1400px; }

.live-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surf); border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 12px;
    font-size: 12px; color: var(--tx2);
}
.live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ac);
    box-shadow: var(--glow); animation: pulse 2.4s ease-in-out infinite;
}

/* Verzija agenta koja zaostaje za najnovijom u floti. Ne crveno: uređaj radi,
   samo nije na istoj verziji — to je stvar za planiranje, ne za uzbunu. */
.ver-stale { color: var(--warn); }

/* Konzola ne prima događaje. Namerno upadljivo: zaleđen prikaz izgleda isto
   kao ispravan, a operater na osnovu njega donosi odluke. */
.live-pill.offline { border-color: var(--warn); color: var(--warn); }
.live-pill.offline .live-dot { background: var(--warn); box-shadow: none; }

/* --------- Veza sa serverom prekinuta --------- */
/* Zauzima mesto sadržaja, ne ceo ekran: sidebar i navigacija ostaju upotrebljivi
   da operater vidi gde je, ali nijedan podatak o uređajima se ne prikazuje. */
.conn-lost {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 72px 24px;
    background: linear-gradient(180deg, var(--surf2), var(--surf));
    border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: inset 0 1px 0 var(--hi), var(--sh);
    animation: rise .36s cubic-bezier(.16,1,.3,1) both;
}
.conn-lost .ph { font-size: 44px; color: var(--warn); margin-bottom: 16px; }
.conn-lost h2  { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.conn-lost p   { margin: 0 0 8px; font-size: 13px; color: var(--tx2); max-width: 52ch; line-height: 1.55; }
.conn-lost .primary { margin-top: 18px; }

/* --------- Komande koje čekaju isporuku --------- */
.pending-note {
    display: flex; align-items: center; gap: 10px;
    margin: 0 20px 16px; padding: 11px 14px;
    background: var(--warns); border: 1px solid var(--warn);
    border-radius: var(--r); color: var(--tx); font-size: 13px;
}
.pending-note .ph { font-size: 18px; color: var(--warn); flex: none; }

/* --------- Stanje uređaja u listi --------- */
.state-pill {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px; padding: 2px 7px; border-radius: 999px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    vertical-align: 1px;
}
.state-pill .ph { font-size: 11px; }
.state-pill.locked { background: var(--dans); color: var(--dan); }
.state-pill.kiosk  { background: var(--bls);  color: var(--bl); }

/* --------- Mapa lokacije --------- */
.map-box {
    height: 320px; margin: 0 20px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surf2);
}
.loc-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 12px 20px 16px; font-size: 12.5px;
}

/* ============================================================
   Uređivanje politike — /policies/{id} (PolicyEdit.razor)
   Bio je modal od 440 px sa tridesetak kontrola u jednoj koloni.
   Ovde je isti sadržaj razdvojen na kartice, a svako podešavanje
   je red sa ispisanim stanjem umesto pilule koja stanje nosi
   samo bojom.
   ============================================================ */

.pedit { padding-bottom: 8px; }

/* --------- Kartice (tabovi) --------- */
.ptabs {
    display: flex; flex-wrap: wrap; gap: 2px;
    border-bottom: 1px solid var(--line);
    margin: 4px 0 22px;
}
.ptab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 15px; border: none; background: none; cursor: pointer;
    color: var(--tx3); font-size: 13.5px; font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .14s, border-color .14s;
}
.ptab .ph { font-size: 16px; }
.ptab:hover { color: var(--tx); }
.ptab.on { color: var(--ac); border-bottom-color: var(--ac); }
/* Brojka uz naziv: koliko je u toj kartici ograničeno ili podešeno — bez nje se
   mora ući u svaku karticu da bi se videlo ima li išta. */
.ptab-n {
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surf2); border: 1px solid var(--line);
    font-size: 11px; font-weight: 700; color: var(--tx2);
}
.ptab.on .ptab-n { background: var(--acs); border-color: var(--ac3); color: var(--ac); }

/* --------- Sadržaj kartice --------- */
/* Gornja granica širine: red podešavanja preko 1400 px razdvaja naziv i prekidač
   toliko da se prestaju čitati kao jedna celina. */
.pedit-pane { max-width: 1060px; }
.psec { display: flex; flex-direction: column; gap: 16px; }
.psec-h { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.psec-lead { margin: -8px 0 0; max-width: 76ch; font-size: 13px; line-height: 1.65; color: var(--tx2); }
.psub { margin: 6px 0 -4px; font-size: 10px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); }

.pgrid { display: grid; gap: 14px; }
.pgrid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pgrid-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.fhint { font-size: 11.5px; color: var(--tx3); font-weight: 400;
         text-transform: none; letter-spacing: 0; }

.slider-row { display: flex; align-items: center; gap: 12px; }
.slider-val { min-width: 44px; text-align: right; font-family: var(--font-mono);
              font-size: 12.5px; color: var(--tx2); }

/* --------- Napomena u toku forme --------- */
.pnote {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--surf2); border: 1px solid var(--line);
    border-radius: var(--r); padding: 12px 14px;
    font-size: 12.5px; line-height: 1.6; color: var(--tx2);
}
.pnote .ph { font-size: 16px; color: var(--tx3); flex: none; margin-top: 1px; }
.pnote-warn { background: var(--warns); border-color: var(--warn); }
.pnote-warn .ph { color: var(--warn); }

/* --------- Red sa prekidačem --------- */
.prows { display: grid; gap: 10px; }
.prows-2 { grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); }

.srow {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 13px;
    background: var(--surf); border: 1px solid var(--line);
    border-radius: var(--r); padding: 13px 15px;
    transition: border-color .14s, background .14s;
}
.srow:hover { border-color: var(--line2); }
/* Zabranjeno se ne boji u crveno: politika sa devet ograničenja bi izgledala kao
   devet grešaka. Nosi ga ispisano stanje, a bojom se javlja samo ono što se
   teško vraća (vidi .srow-warn). */
.srow-off { background: var(--bg2); }
.srow-dim { opacity: .55; }
.srow-ico { font-size: 19px; color: var(--tx3); }
.srow-off .srow-ico { color: var(--tx3); }
.srow:not(.srow-off) .srow-ico { color: var(--ac); }
.srow-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srow-name { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.srow-desc { font-size: 12px; line-height: 1.5; color: var(--tx3); }
.srow-warn {
    display: flex; gap: 7px; align-items: flex-start;
    margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--warn);
}
.srow-warn .ph { font-size: 13px; flex: none; margin-top: 1px; }

/* --------- Sam prekidač --------- */
.swx {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: none; padding: 4px 0; cursor: pointer;
    color: var(--tx3);
}
.swx:disabled { cursor: default; }
.swx-state {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; white-space: nowrap; min-width: 84px;
    text-align: right; transition: color .14s;
}
.swx.on .swx-state { color: var(--ac); }
.swx-track {
    position: relative; width: 42px; height: 24px; border-radius: 999px;
    background: var(--surf2); border: 1px solid var(--line);
    transition: background .16s, border-color .16s;
}
.swx-knob {
    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--tx3);
    box-shadow: var(--sh); transition: transform .16s, background .16s;
}
.swx.on .swx-track { background: var(--acs); border-color: var(--ac3); }
.swx.on .swx-knob  { background: var(--ac); transform: translateX(18px); }
.swx:focus-visible .swx-track { box-shadow: var(--glow); }

/* --------- Donja traka sa akcijama --------- */
/* Obrazac je visok; dugme „Sačuvaj" u zaglavlju bi tražilo povratak na vrh posle
   svake izmene. Stranica skroluje na nivou dokumenta, pa sticky radi bez
   dodatnog kontejnera. */
.pedit-bar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 26px; padding: 13px 18px;
    background: color-mix(in srgb, var(--surf) 92%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--shc);
}
.pbar-state {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--tx2);
}
.pbar-state .ph { font-size: 15px; }
.pbar-state .ph-check-circle { color: var(--ac); }
.pbar-state .ph-circle-dashed { color: var(--warn); }

@media (max-width: 900px) {
    .prows-2 { grid-template-columns: 1fr; }
    .srow { grid-template-columns: auto 1fr; }
    .srow .swx { grid-column: 2; justify-content: flex-start; }
    .swx-state { min-width: 0; text-align: left; }
    .ptab span:not(.ptab-n) { display: none; }
    .ptab { padding: 11px 13px; }
}

/* ═══════════════ Sklopive celine (Section.razor) ═══════════════
   Detalj uređaja je ispisivao sve odjednom — telemetriju, lokaciju, komande,
   istoriju, dvesta aplikacija i dva pregleda fajlova. Sada je svaka celina red
   koji se čita bez otvaranja, pa se otvara ono što se traži. */

.sect {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shc);
  overflow: hidden;
  margin-bottom: 14px;
}

.sect-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 14px;
}

/* Celo zaglavlje je meta za klik, ne samo strelica. */
.sect-head {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 6px 15px 18px;
  background: none;
  border: 0;
  color: var(--tx);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
.sect-head:hover { background: var(--hi); }

.sect-ico   { font-size: 17px; color: var(--tx3); flex: 0 0 auto; }
.sect-open .sect-ico { color: var(--ac); }

.sect-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Napomena uz naziv — vidi se i kad je celina sklopljena, pa se stanje čita
   bez otvaranja. */
.sect-note {
  font-size: 11.5px;
  color: var(--tx3);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.sect-spacer { flex: 1 1 auto; }

.sect-caret {
  font-size: 15px;
  color: var(--tx3);
  flex: 0 0 auto;
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.sect-open .sect-caret { transform: rotate(180deg); color: var(--tx2); }

.sect-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.sect-body {
  border-top: 1px solid var(--line);
  animation: rise .22s cubic-bezier(.16,1,.3,1) both;
}
/* Tabela unutar celine ide do ivica, kao i ranije u panelu. */
.sect-body > .grid { border: none; border-radius: 0; }
.sect-body > p     { padding: 20px; margin: 0; }

/* ═══════════════ Komande: grupe i dugmad ═══════════════
   Šesnaest istovetnih dugmadi u jednom nizu se nije moglo pretražiti pogledom.
   Sada su podeljena po nameni, sa ispisanim nazivom grupe. */

.cmd-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}

.cmd-group { display: flex; flex-direction: column; gap: 8px; }

.cmd-group-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3);
}
.cmd-group-danger .cmd-group-name { color: var(--dan); opacity: .85; }

.cmd-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dugme komande. Širina je ograničena da red ostane čitljiv; duži naziv se
   skraćuje sa tri tačke, a pun tekst stoji u `title`. */
.cmdb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 210px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surf2), var(--surf));
  box-shadow: inset 0 1px 0 var(--hi), var(--sh);
  color: var(--tx);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .14s ease, transform .06s ease, box-shadow .14s ease;
}
.cmdb:hover:not(:disabled) {
  border-color: var(--line2);
  box-shadow: inset 0 1px 0 var(--hi2), var(--sh);
}
/* Pritisak se VIDI: dugme upadne i senka se skupi. Bez toga se na sporoj vezi
   ne zna da li je klik uopšte registrovan. */
.cmdb:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}
.cmdb:disabled { opacity: .45; cursor: default; }

.cmdb-ico   { font-size: 15px; flex: 0 0 auto; color: var(--tx2); }
.cmdb:hover:not(:disabled) .cmdb-ico { color: var(--ac); }

.cmdb-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dok komanda traje, ovo dugme ostaje ISTAKNUTO a ostala posive — vidi se koje
   se izvršava. Instalacija APK-a ume da traje do 180 s. */
.cmdb-busy, .cmdb-busy:disabled {
  opacity: 1;
  border-color: var(--ac3);
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px rgba(122,193,67,.25);
}
.cmdb-busy .cmdb-ico { color: var(--ac); }

.cmdb-danger { border-color: rgba(255,107,107,.35); }
.cmdb-danger .cmdb-ico { color: var(--dan); }
.cmdb-danger:hover:not(:disabled) { border-color: var(--dan); background: var(--dans); }
.cmdb-danger:hover:not(:disabled) .cmdb-ico { color: var(--dan); }

@media (max-width: 720px) {
  .cmdb { max-width: none; flex: 1 1 auto; }
}

/* Datumi instalacije i ažuriranja u redu aplikacije. Drugi red postoji samo
   kad je paket stvarno ažuriran — vidi uslov u DeviceDetail.razor. */
.app-dates      { font-size: 12px; color: var(--tx2); line-height: 1.5; white-space: nowrap; }
.app-upd        { color: var(--tx3); display: flex; align-items: center; gap: 4px; }
.app-upd .ph    { font-size: 12px; color: var(--ac); }

/* ============================================================
   Masovne komande — kartica „Komande“ u Grupama uređaja
   ============================================================ */

.bulk { display: flex; flex-direction: column; }

/* Panel ima svoju ivicu i zaobljenje, ali nema unutrašnju marginu — sadržaj
   koji nije tabela mora sam da je donese. */
.bulk-pad { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }

/* Birač uređaja ne sme da gurne dugme za slanje ispod ivice ekrana: obim
   izbora i dugme moraju da se vide istovremeno sa spiskom. */
.bulk-scroll {
    max-height: 240px; overflow-y: auto;
    padding: 12px; border: 1px solid var(--line);
    border-radius: var(--r); background: var(--bg2);
}

/* Traka sa obimom izbora. Stoji uz samo dugme, jer je broj obuhvaćenih uređaja
   jedini podatak koji operater mora da pročita pre nego što klikne. */
.bulk-sum {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
    padding: 16px 20px; margin-bottom: 20px;
    background: var(--surf); border: 1px solid var(--line2);
    border-radius: var(--r-card); box-shadow: var(--shc);
}
.bulk-sum p { margin: 4px 0 0; }
.bulk-sum-n {
    font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--tx);
    display: flex; align-items: baseline; gap: 8px;
}
.bulk-sum-n span { font-size: 13px; font-weight: 500; color: var(--tx2); letter-spacing: 0; }

/* Brojači ishoda. `dispatched` i `queued` su ravnopravni ishodi, ne uspeh i
   greška — zato zeleno i žuto, a ne zeleno i crveno. */
.bulk-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.bulk-kpi {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 116px; padding: 11px 14px;
    background: var(--surf2); border: 1px solid var(--line);
    border-radius: var(--r);
}
.bulk-kpi-n { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.bulk-ok   { background: var(--acs);   border-color: var(--ac3); }
.bulk-ok   .bulk-kpi-n { color: var(--ac); }
.bulk-wait { background: var(--warns); border-color: var(--warn); }
.bulk-wait .bulk-kpi-n { color: var(--warn); }
.bulk-skip { background: var(--dans);  border-color: var(--dan); }
.bulk-skip .bulk-kpi-n { color: var(--dan); }

/* Podnožje spiska po uređaju: koliko je prikazano od koliko. Sa `.bulk-skip`
   kad je spisak odsečen — tiho odsecanje izgleda kao da je prikazano sve. */
.bulk-foot {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 10px 13px; border-radius: var(--r);
    font-size: 12.5px; line-height: 1.5;
}
.bulk-foot.bulk-skip { color: var(--dan); }
.bulk-foot .ph { font-size: 15px; flex: none; }

/* Kartica sa masovnim komandama ostaje u stranici i kad se gleda spisak grupa —
   izveštaj o poslatom bi inače nestao na prvi klik na „Grupe“. */
.bulk-wrap { display: block; }
.bulk-off  { display: none; }
/* --------- Birac foldera u push dijalogu ---------
   Odvojen od pregleda „Fajlovi na uređaju“ i po stanju i po izgledu: ovde se
   bira odredište (samo folderi, u uskom modalu), tamo se pregleda sadržaj. */
.dir-pick {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px; border: 1px solid var(--line);
    border-radius: var(--r); background: var(--surf2);
}
/* Duboka putanja u modalu od 520px mora da prelomi u novi red — bez ovoga mrvice
   izlaze iz okvira i poslednji nivo se ne vidi. `.crumbs` iz top bara se namerno
   ne dira: tamo je jedan red i tako treba da ostane. */
.dir-crumbs { flex-wrap: wrap; gap: 5px; }
.dir-path { margin: 0; font-size: 12px; word-break: break-all; }
.dir-msg  { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.dir-list {
    display: flex; flex-direction: column;
    max-height: 176px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surf);
}
.dir-row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 12px; text-align: left; cursor: pointer;
    background: none; border: none; border-bottom: 1px solid var(--line);
    color: var(--tx); font-size: 13px;
}
.dir-row:last-child { border-bottom: none; }
.dir-row:hover:not(:disabled) { background: var(--surf2); color: var(--ac); }
.dir-row:disabled { opacity: .55; cursor: default; }
.dir-row .ph { font-size: 15px; color: var(--tx3); flex: none; }

/* ── Obrazac unutar sklopive celine ─────────────────────────────
   Telo `Section`-a ide do ivica jer je unutra najčešće tabela. Kad je unutra
   obrazac, treba mu isti razmak kao u panelu i razmak između polja. Postojalo
   je kao `.bulk-pad`, vezano imenom za grupne komande; ovo je isto pravilo pod
   imenom koje se sme koristiti bilo gde. */
.sect-form { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.sect-form > p { margin: 0; }
.sect-form > button { align-self: flex-start; }