/*
 * nikana-ui-chrome.css — zajednički delovi stranica panela u izgledu Nikana Ticketing-a
 * (19.10.2026): gornja traka, meni (☰), tabovi, kartice, dugmad, prozori.
 *
 * Učitava se POSLE <style> bloka stranice (zato pobeđuje stara pravila iste
 * specifičnosti). Boje su iz nikana-ui.css. Mere su Tailwind klase iz ticketinga
 * (u zagradama). Stranica koja želi drugačije — piše posebnije pravilo kod sebe.
 */

body { font-family: var(--sans); background: var(--bg); color: var(--text); }

/* ── Gornja traka (h-14 border-b bg-white, bez senke) ── */
.topbar {
  height: 56px; padding: 0 12px; gap: 8px;
  background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none;
}
.topbar-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.topbar-back-link { border-radius: var(--radius-sm); font-size: 13px; padding: 6px 12px; }

/* ☰ (h-8 w-8 rounded-lg, bez okvira) i padajući meni (w-52 rounded-xl py-1) */
.burger-btn {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--gray-500);
}
.burger-btn:hover, .burger-btn.open { background: var(--surface3); color: var(--text); }
.burger-btn svg { width: 18px; height: 18px; }
.burger-dropdown {
  top: 44px; min-width: 208px; padding: 4px 0; overflow: hidden;
  border: 1px solid var(--border2); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  background: var(--surface);
}
.dark .burger-dropdown { border-color: var(--gray-700); background: var(--gray-900); }
.burger-link {
  border-radius: 0; padding: 8px 12px; gap: 10px;
  font-size: 14px; font-weight: 400; color: var(--gray-700);
}
.dark .burger-link { color: #c3c8d1; }
.burger-link svg { width: 15px; height: 15px; color: var(--gray-500); }
.burger-link:hover { background: var(--surface3); color: var(--text); }
.burger-link.active { background: transparent; color: var(--text); font-weight: 600; }
.burger-sep { margin: 4px 0; height: 1px; background: var(--border-soft); }

/* ── Tabovi (kao Podešavanja u ticketingu: border-b-2, aktivan indigo) ── */
.tabs { background: var(--surface); border-bottom: 1px solid var(--border); }
.tab { font-size: 14px; font-weight: 400; color: var(--gray-500); padding: 12px 12px 10px; }
.dark .tab { color: #c3c8d1; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 500; }
.dark .tab.active { color: var(--accent-text); border-bottom-color: var(--indigo-400); }

/* ── Kartice (rounded-lg border bg-white; tamno gray-900) ── */
.card { border-radius: var(--radius); border-color: var(--border); background: var(--surface); box-shadow: none; }
.card-header { background: transparent; border-bottom-color: var(--border-soft); }
.card-title { font-size: 14px; font-weight: 600; }

/* ── Dugmad (rounded-md px-3 py-1.5 text-[13px] font-medium) ── */
.btn, .btn-primary, .btn-ghost, .btn-outline, .btn-danger, .btn-plain {
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; box-shadow: none;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost, .btn-outline { background: var(--surface); border: 1px solid var(--border); color: var(--text2); }
.dark .btn-ghost, .dark .btn-outline { background: transparent; border-color: var(--gray-700); }
.btn-ghost:hover, .btn-outline:hover { background: var(--surface2); color: var(--text); }
.btn-danger { background: var(--surface); border: 1px solid var(--danger-border); color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-bg); }

/* ── Prozori (rounded-xl shadow-xl, zatamnjenje iza) ── */
.modal-backdrop, .modal-overlay { background: var(--overlay); }
.modal-card, .modal-box { border-radius: var(--radius-xl); border-color: var(--border); box-shadow: var(--shadow-lg); background: var(--surface); }
.modal-head { border-bottom-color: var(--border-soft); }
.modal-foot { border-top-color: var(--border-soft); }
.modal-title { font-size: 15px; font-weight: 600; }

/* ── Polja (border-gray-200 rounded-lg, fokus indigo prsten) ── */
:is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], input[type="datetime-local"], input[type="date"], input[type="time"], input:not([type]), textarea, select):focus {
  border-color: var(--indigo-400);
  box-shadow: 0 0 0 2px var(--accent-ring);
  outline: none;
}
.dark :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], input:not([type]), textarea, select) {
  background-color: var(--gray-950);
  border-color: var(--gray-700);
  color: #c3c8d1;
}

/* Lucide ikonice umesto emoji-ja u tekstu dugmadi/naslova */
svg.lucide.ni { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -2px; }