/* =====================================================================
   Admin panel (lista planova, detalji, log pristupa, login).
   Koristi iste promenljive i komponente kao app.css (dizajn klijenta).
   ===================================================================== */

.plan-title{ font-family:var(--font-main); font-size:24px; font-weight:700; color:#FBEEF1; }
.topbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.topbar-user{ font-size:12.5px; opacity:.85; margin-right:4px; }
.topbar-btn{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); color:#FBEEF1; text-decoration:none; }
.topbar-btn:hover{ background:rgba(255,255,255,.24); color:#fff; border-color:rgba(255,255,255,.5); }

/* ---- lista planova ---- */
.row-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.row.inactive .row-title{ color:var(--muted); text-decoration:line-through; }
.chip.warn{ color:#C13B54; background:color-mix(in srgb, #C13B54 12%, var(--surface-2)); }
.chip.ok{ color:var(--good); background:var(--good-bg); }
.chip.accent{ color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }

/* ---- detalj plana ---- */
.detail-title{ font-family:var(--font-main); font-size:22px; font-weight:700; color:var(--ink); flex:1; min-width:140px; line-height:1.25; }
.detail-title small{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:3px; }
.actions-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.actions-row a.btn{ text-decoration:none; }
.section-title{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.section-title a{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--accent); text-decoration:none; font-size:12px; }
.section-title a:hover{ text-decoration:underline; }
.link-box{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.link-box code{ font-family:var(--font-main); font-size:13.5px; color:var(--ink); word-break:break-all; flex:1; min-width:200px; }
.pin-display{ font-family:var(--font-main); font-variant-numeric:tabular-nums; font-size:22px; font-weight:700; letter-spacing:.25em; color:var(--ink); }
.stats-wrap{ display:flex; flex-direction:column; gap:18px; }
.stat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.stat-grid .field-value{ font-size:17px; font-weight:700; }
.stat-grid .field-value small{ font-size:12px; font-weight:500; color:var(--muted); margin-left:4px; }
.stat-grid .field-block.alert .field-value{ color:#C13B54; }

/* ---- tabele (poslednji pristupi, uređaji, log) ---- */
.mini-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.mini-table th{ text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.mini-table td{ padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--ink); }
.mini-table tr:last-child td{ border-bottom:none; }
.mini-table .muted{ color:var(--muted); }
.mini-table .nowrap{ white-space:nowrap; }
.mini-table .mono{ font-variant-numeric:tabular-nums; }
.table-wrap{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; overflow:auto; }
.ev{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; border-radius:999px; padding:2px 9px; white-space:nowrap; background:var(--surface); border:1px solid var(--border); color:var(--ink); }
.ev.view, .ev.pin_ok{ color:var(--good); background:var(--good-bg); border-color:transparent; }
.ev.toggle{ color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color:transparent; }
.ev.pin_fail, .ev.pin_locked, .ev.inactive{ color:#C13B54; background:color-mix(in srgb, #C13B54 12%, var(--surface)); border-color:transparent; }
.ev.open{ color:var(--muted); }
.dev-line{ display:flex; flex-direction:column; gap:1px; }
.dev-line .ua{ font-size:11px; color:var(--muted); max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.revoked{ opacity:.55; }

/* ---- forme (novi plan, PIN, podešavanja) ---- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-grid .full{ grid-column:1 / -1; }
.form-field{ display:block; cursor:text; }
.form-field input, .form-field select{ border:none; background:transparent; font-size:14px; color:var(--ink); font-weight:500; font-family:inherit; padding:2px 0; width:100%; }
.form-field input:focus, .form-field select:focus{ outline:none; }
.form-field:focus-within{ border-color:var(--accent); }
.form-field select{ cursor:pointer; }
.radio-list{ display:flex; flex-direction:column; gap:8px; }
.radio-item{ display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 12px; cursor:pointer; font-size:13.5px; color:var(--ink); }
.radio-item:hover{ border-color:var(--accent); }
.radio-item input{ accent-color:var(--accent); margin-top:3px; }
.radio-item .desc{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.form-error{ display:none; font-size:13px; color:#C13B54; background:color-mix(in srgb, #C13B54 10%, var(--surface)); border:1px solid color-mix(in srgb, #C13B54 30%, transparent); border-radius:10px; padding:8px 12px; }
.form-error.show{ display:block; }
.inline-form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.inline-form .field-block{ flex:1; min-width:120px; }

.danger-zone{ border:1px dashed color-mix(in srgb, #C13B54 40%, transparent); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.danger-zone .lbl{ font-size:12.5px; color:var(--muted); flex:1; min-width:160px; }

/* ---- log stranica ---- */
.log-app{ max-width:1180px; }
.log-pane{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:16px; }
.filter-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.filter-row a{ text-decoration:none; }
.filter-row a.btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; }
.pager a{ text-decoration:none; }
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--ink); color:var(--surface); font-size:13px; padding:9px 16px; border-radius:999px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s; z-index:50; }
.toast.show{ opacity:1; }

@media (max-width: 780px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .topbar-actions{ width:100%; }
}