/* =========================
   BASE
========================= */
* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
}

/* =========================
   THEME VARIABLES (jedan sistem)
========================= */

/* DEFAULT (dark) */
:root{
  --bg: #0b1220;
  --card: #0f172a;
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.7);
  --border: #1e293b;

  --sidebar: #020617;
  --topbar: #020617;

  --inputBg: #0b1220;

  --primary: #38bdf8;
  --primaryHover: #0ea5e9;

  --danger: #7f1d1d;
  --dangerHover: #991b1b;

  --success: #22c55e;
  --warning: #f59e0b;
}

/* LIGHT */
html[data-theme="light"]{
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: rgba(15,23,42,.65);
  --border: #e5e7eb;

  --sidebar: #ffffff;
  --topbar: #ffffff;

  --inputBg: #ffffff;

  --primary: #0ea5e9;
  --primaryHover: #0284c7;

  --danger: #b91c1c;
  --dangerHover: #991b1b;

  --success: #16a34a;
  --warning: #f59e0b;
}

/* =========================
   COMPAT LAYER (da ništa ne pukne)
   (ako neki delovi koda koriste starije varijable)
========================= */
:root{
  --bg-main: var(--bg);
  --bg-card: var(--card);
  --bg-muted: rgba(148,163,184,.10);

  --text-main: var(--text);
  --text-muted: var(--muted);

  --border-main: var(--border);

  --accent: var(--primary);
}

/* =========================
   LAYOUT
========================= */
.app{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:240px;
  background: var(--sidebar);
  padding:20px;
  border-right: 1px solid var(--border);
}

.sidebar h2{
  color: var(--primary);
  margin:0 0 18px 0;
  font-size:20px;
}

.muted,
.sidebar .muted{
  color: var(--muted);
  font-size:12px;
  margin-bottom:18px;
}

.sidebar a{
  display:block;
  color: var(--text);
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:6px;
  border: 1px solid transparent;
}

.sidebar a:hover,
.sidebar a.active{
  background: rgba(148,163,184,.15);
  color: var(--primary);
  border-color: var(--border);
}

.nav-section{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.nav-title{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.75;
  margin:0 0 8px 0;
}

.nav-section a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
}

/* Main */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
}

.topbar{
  background: var(--topbar);
  padding:12px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
}

.content{
  padding:24px;
}

/* da badge uvek stane desno */
.sidebar .nav-body a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
}
.nav-badge.danger{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.18);
}

/* =========================
   UI
========================= */
h1{
  margin:0 0 16px 0;
  font-size:24px;
}

h2{
  margin:0 0 10px 0;
}

h3{
  margin:0 0 10px 0;
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:18px;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

table{
  width:100%;
  border-collapse:collapse;
}

th, td{
  padding:10px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}

th{
  text-align:left;
  color: var(--primary);
  font-weight:700;
}

input, select, textarea{
  width:100%;
  background: var(--inputBg);
  border:1px solid var(--border);
  color: var(--text);
  padding:9px 10px;
  border-radius:10px;
  outline:none;
}

input:focus, select:focus, textarea:focus{
  border-color: var(--primary);
}

button{
  background: var(--primary);
  color: #020617;
  border:none;
  padding:9px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

button:hover{
  background: var(--primaryHover);
}

a.btn{
  display:inline-block;
  background: rgba(148,163,184,.12);
  padding:9px 12px;
  border-radius:10px;
  color: var(--text);
  text-decoration:none;
  border:1px solid var(--border);
}

a.btn:hover{
  background: rgba(148,163,184,.20);
}

.btn-danger{
  background: var(--danger);
  border:1px solid var(--dangerHover);
  color:#fff;
}

.btn-danger:hover{
  background: var(--dangerHover);
}

.alert{
  background: var(--danger);
  border:1px solid var(--dangerHover);
  padding:10px;
  border-radius:10px;
  margin-bottom:15px;
  color:#fff;
}

.small{
  color: var(--muted);
  font-size:12px;
}

/* Theme toggle (radi sa html[data-theme="light|dark"]) */
.theme-toggle {
  position: relative;
  width: 64px;
  height: 32px;
  background: var(--border);
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .2s ease, border-color .2s ease;
}

.theme-toggle .icon {
  font-size: 14px;
  width: 24px;
  text-align: center;
  z-index: 1;
  pointer-events: none;
  opacity: .85;
}

.theme-toggle .sun { color: #f59e0b; }
.theme-toggle .moon { color: #60a5fa; }

.theme-toggle .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: transform .25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

/* Kada je LIGHT, knob ide levo */
html[data-theme="light"] .theme-toggle .knob {
  transform: translateX(0);
}

/* Kada je DARK, knob ide desno */
html[data-theme="dark"] .theme-toggle .knob {
  transform: translateX(32px);
}

/* SIDEBAR COLLAPSE (robust) */
body.sidebar-collapsed .sidebar {
  width: 72px !important;
  min-width: 72px !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .sidebar h2,
body.sidebar-collapsed .sidebar .muted,
body.sidebar-collapsed .sidebar .nav-title {
  display: none !important;
}

/* sakrij tekst linkova ali ostavi klik */
body.sidebar-collapsed .sidebar a {
  font-size: 0 !important;
  padding: 10px 10px !important;
}

/* mali marker umesto teksta */
body.sidebar-collapsed .sidebar a::before {
  content: "•";
  font-size: 16px;
  display: inline-block;
}

/* dugme u sidebar-u (npr. Pregled ugovora) da ne razbije layout */
body.sidebar-collapsed .sidebar .btn {
  font-size: 0 !important;
  padding: 10px 10px !important;
}
body.sidebar-collapsed .sidebar .btn::before {
  content: "•";
  font-size: 16px;
  display: inline-block;
}

/* =========================
   RESPONSIVE / MOBILE PATCH
========================= */

/* Hamburger (na desktopu skriven) */
.mobile-menu-btn{
  display:none;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  line-height:1;
}

/* Overlay za mobile sidebar */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:40;
}

/* Tabele: mobile scroll umesto pucanja layout-a */
.table-wrap,
.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Globalno: na manjim ekranima uvek dozvoli horizontalni scroll na tabelama */
@media (max-width: 980px){
  table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* OFF-CANVAS sidebar + bolji raspored */
@media (max-width: 980px){

  /* Hamburger se pojavljuje */
  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* Sidebar ide kao off-canvas */
  .sidebar{
    position:fixed;
    top:0; left:0;
    height:100vh;
    width:280px;
    max-width:85vw;
    transform:translateX(-105%);
    transition:transform .22s ease;
    z-index:50;
    overflow:auto;
  }

  /* Kad je otvoren */
  body.sidebar-open .sidebar{
    transform:translateX(0);
  }
  body.sidebar-open .sidebar-overlay{
    display:block;
  }

  /* Main zauzima celu širinu */
  .main{
    width:100%;
    margin-left:0 !important;
  }

  /* Topbar: sticky + lep padding */
  .topbar{
    position:sticky;
    top:0;
    z-index:30;
    padding:10px 12px;
  }

  /* Desni blok u topbaru neka se prelama */
  .topbar > div:last-child{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  /* Content padding manji */
  .content{
    padding:12px;
  }

  /* Dugmad malo kompaktnija na telefonu */
  .btn, button{
    padding:8px 10px;
  }

  /* Inputi i selectovi full width na uskim ekranima */
  .row{
    flex-wrap:wrap;
  }
  .input, input, select, textarea{
    max-width:100%;
  }

  /* Dashboard grid (ako koristiš .dash-grid iz dashboard.blade.php) */
  .dash-grid{
    grid-template-columns: 1fr !important;
  }
  .dash-card{
    min-height:unset !important;
  }
}

/* Još uži telefoni */
@media (max-width: 420px){
  .sidebar{ width:260px; }
  .topbar{ gap:10px; }
}

/* Dodatni stilovi za pregled klijenta */
.client-summary-card {
  border-left: 4px solid #0d6efd;
  background: #f8f9fa;
}

.status-badge {
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 10px;
}

/* Hover efekti za tabele */
.table-hover tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

/* Responzivne tabele */
@media (max-width: 768px) {
  .table-responsive {
    font-size: 0.85rem;
  }

  .btn-group {
    flex-wrap: wrap;
    gap: 5px;
  }

  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Sidebar - Finansije podnaslovi i razdvajanje */
.nav-subtitle{
  margin: 10px 0 6px;
  font-size: 12px;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nav-divider{
  height: 1px;
  margin: 10px 0;
  background: rgba(255,255,255,.10);
}

html[data-theme="light"] .nav-divider{
  background: rgba(15,23,42,.10);
}

.nav-badge{
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
}

.nav-badge.danger{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.35);
}

/* =========================
   SIDEBAR: jači glavni naslovi sekcija (SAFE OVERRIDE)
========================= */
.sidebar .nav-title{
  font-size: 13px;
  font-weight: 900;
  opacity: 1;
  color: var(--text);
  padding: 10px 8px;
  margin: 0 0 10px 0;
  border-radius: 10px;
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.12);
}

.sidebar .acc-toggle.nav-title{
  width: 100%;
  text-align: left;
}

.sidebar .acc-caret{
  opacity: .85;
  font-weight: 900;
}

.sidebar .nav-body a{
  padding-left: 14px;
}

.sidebar .nav-subtitle{
  opacity: .85;
  font-weight: 800;
}

/* =========================
   BREADCRUMBS
========================= */
.breadcrumbs{
  margin: 0 0 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(148,163,184,.08);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size: 13px;
}

.breadcrumbs a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 800;
}

.breadcrumbs a:hover{ text-decoration: underline; }
.breadcrumbs span{ opacity: .6; }
.breadcrumbs b{ font-weight: 900; }

/* =========================
   ADMIN UI (common) — SCOPED
   (važi samo unutar .admin-page)
========================= */
.admin-page .admin-wrap{max-width:980px}
.admin-page .admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 14px}
.admin-page .admin-title{margin:0;font-size:22px;line-height:1.15}
.admin-page .admin-muted{opacity:.75;font-size:13px}
.admin-page .admin-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.admin-page .admin-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  margin:12px 0;
  background:var(--card);
}

.admin-page .admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width: 860px){ .admin-page .admin-grid{grid-template-columns:1fr} }

.admin-page .admin-row label{display:block;font-weight:800;margin-bottom:6px}
.admin-page .admin-row input,
.admin-page .admin-row select,
.admin-page .admin-row textarea{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--inputBg, var(--bg));
  color:var(--text);
  outline:none;
}
.admin-page .admin-row input::placeholder,
.admin-page .admin-row textarea::placeholder{color:rgba(229,231,235,.55)}
html[data-theme="light"] .admin-page .admin-row input::placeholder,
html[data-theme="light"] .admin-page .admin-row textarea::placeholder{color:rgba(15,23,42,.45)}

.admin-page .admin-help{font-size:12px;opacity:.75;margin-top:6px}

/* Buttons (samo admin) */
.admin-page .btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  background:transparent;
  cursor:pointer;
  line-height:1;
}
.admin-page .btn:hover{border-color:rgba(148,163,184,.55)}
.admin-page .btn-primary{
  background:var(--primary);
  border-color:transparent;
  color:#001018;
  font-weight:800;
}
.admin-page .btn-primary:hover{background:var(--primaryHover)}

/* Alerts (samo admin) */
.admin-page .alert{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(56,189,248,.08);
  margin:10px 0;
}
.admin-page .alert--ok{background:rgba(34,197,94,.10)}
.admin-page .alert--err{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.28)}

/* Badges / pills (samo admin) */
.admin-page .badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
}
.admin-page .badge-ok{background:rgba(34,197,94,.12)}
.admin-page .badge-no{background:rgba(239,68,68,.10)}
.admin-page .dot{width:8px;height:8px;border-radius:999px;display:inline-block;background:currentColor;opacity:.9}

.admin-page .pill{
  display:inline-block;padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;margin:2px 6px 0 0;
  white-space:nowrap;background:rgba(148,163,184,.08);
}

/* Table (samo admin) */
.admin-page .table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
}
.admin-page .table{width:100%;border-collapse:separate;border-spacing:0;margin:0}
.admin-page .table th,
.admin-page .table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;white-space:nowrap}
.admin-page .table thead th{position:sticky;top:0;background:var(--card);z-index:2;text-align:left;font-weight:800}
.admin-page .table tbody tr:hover td{background:rgba(148,163,184,.08)}
.admin-page .table .num{text-align:right}
.admin-page .table .idcol{opacity:.8}

/* Sticky actions bar (samo admin) */
.admin-page .sticky-actions{
  position:sticky;bottom:10px;z-index:10;
  display:flex;gap:10px;flex-wrap:wrap;
  padding:10px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.85);
  backdrop-filter: blur(6px);
  margin-top:14px;
}
html[data-theme="light"] .admin-page .sticky-actions{background:rgba(255,255,255,.85)}

/* Roles list (admin) */
.admin-page .roles-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width: 860px){
  .admin-page .roles-grid{ grid-template-columns:1fr; }
}

.admin-page .role-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(148,163,184,.06);
}

.admin-page .role-item input[type="checkbox"]{
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin:0;
  accent-color: var(--primary);
}

.admin-page .role-item span{
  line-height:1.1;
}

/* ===== NORMALIZACIJA LINKOVA U TABELAMA (Invoices, Warehouse, itd.) ===== */
.main .content table a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 800;
}

.main .content table a:hover{
  text-decoration: underline;
}

.main .content table a:visited{
  color: var(--primary);
}

/* da <b> unutar linka ne menja boju */
.main .content table a b{
  color: inherit;
}

/* ===== Pagination: strelice i dugmad normalna veličina ===== */

/* Laravel pagination wrapper (Tailwind) */
nav[aria-label="Pagination Navigation"] svg,
nav[role="navigation"][aria-label*="Pagination"] svg,
.pagination svg{
  width: 16px !important;
  height: 16px !important;
  display: inline-block;
  vertical-align: middle;
}

/* da ne bude ogromno čak i ako postoji globalni svg stil */
nav[aria-label="Pagination Navigation"] a,
nav[role="navigation"][aria-label*="Pagination"] a,
.pagination a{
  line-height: 1 !important;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--border);
}
.badge.ok{ }
.badge.warn{ }
.badge.danger{ }

/* Sidebar branding */
.sidebar-brand .ofp-mark{
  width:40px;
  height:40px;
  flex-shrink:0;
}

/* Kad je sidebar collapsed – sakrij tekst */
.sidebar.collapsed .sidebar-brand-text{
  display:none;
}

/* ==========================
   Theme-aware fields (global)
   ========================== */

/* Obavezno: koristi varijable iz teme */
.theme-field,
input.theme-field,
select.theme-field,
textarea.theme-field {
  background: var(--inputBg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Placeholder da bude čitljiv u obe teme */
.theme-field::placeholder {
  color: var(--mutedText, rgba(0,0,0,.55)) !important;
  opacity: 1;
}

/* Fokus state */
.theme-field:focus {
  outline: none !important;
  border-color: var(--focusBorder, var(--border)) !important;
  box-shadow: 0 0 0 3px var(--focusRing, rgba(59,130,246,.25)) !important;
}

/* Ako koristiš bootstrap-like klase */
.form-control,
.form-select {
  background: var(--inputBg);
  color: var(--text);
  border-color: var(--border);
}
.form-control:focus,
.form-select:focus {
  background: var(--inputBg);
  color: var(--text);
  border-color: var(--focusBorder, var(--border));
}

/* Autocomplete / results dropdown */
.svc_results,
.client_results,
.autocomplete-results {
  background: var(--cardBg, var(--inputBg)) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.svc_results .item,
.client_results .item,
.autocomplete-results .item {
  padding: 8px 10px;
  cursor: pointer;
}

.svc_results .item:hover,
.client_results .item:hover,
.autocomplete-results .item:hover {
  background: var(--hoverBg, rgba(0,0,0,.05)) !important;
}

/* Ako ima "active"/selected klasu */
.svc_results .active,
.client_results .active,
.autocomplete-results .active {
  background: var(--activeBg, rgba(59,130,246,.15)) !important;
}

/* Invoice form fields - force theme */
.inv-input,
.inv-select {
  background: var(--inputBg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Placeholder */
.inv-input::placeholder {
  color: var(--mutedText) !important;
  opacity: 1;
}

/* Focus */
.inv-input:focus,
.inv-select:focus {
  outline: none !important;
  border-color: var(--focusBorder, var(--border)) !important;
  box-shadow: 0 0 0 3px var(--focusRing, rgba(59,130,246,.22)) !important;
}
/* FIX: Invoice client search (force theme in light/dark) */
#client_search.form-control{
  background: var(--inputBg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
#client_search.form-control::placeholder{
  color: var(--muted) !important;
  opacity: 1;
}
/* FIX: Client search dropdown */
#client_results{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

#client_results div{
  padding: 8px 10px;
  cursor: pointer;
}

#client_results div:hover{
  background: var(--bg-muted) !important;
}