/* ==========================================================================
   admin-ui-polish.css  —  v3  (Dobri Dom plava + narančasta, tech izgled)
   - Sidebar NE DIRAMO (ostaje plavi iz admin.css).
   - Nigdje ljubičaste.
   - Oštri, kompaktni tech gumbi.
   ========================================================================== */

:root{
  /* Primarna = Dobri Dom plava (zadržavamo točan ton iz admin.css) */
  --blue:#0B3D91;
  --blue-dark:#072B66;
  --blue-hover:#124BA8;
  --blue-soft:#EAF1FB;
  --blue-soft-2:#D6E4F5;

  /* Narančasta = sekundarna naglasna boja (Dobri Dom ton iz logotipa) */
  --orange:#E87722;
  --orange-dark:#C8610F;
  --orange-hover:#F18A36;
  --orange-soft:#FFF1E2;

  /* Neutralni */
  --bg:#F3F6FA;
  --surface:#FFFFFF;
  --surface-soft:#F7FAFC;
  --border:#D9E2EC;
  --border-strong:#BFCDD9;
  --divider:#ECF1F6;

  --text:#0F2540;
  --text-2:#324760;
  --muted:#5D7082;
  --muted-2:#8597A8;

  /* Semantika */
  --success:#2E9E5B;
  --success-soft:#E8F6ED;
  --success-ink:#1D6E3F;

  --danger:#C93A47;
  --danger-hover:#AC2F3B;
  --danger-soft:#FCE9EC;
  --danger-ink:#7E1C26;

  --warning:#D9822B;
  --warning-soft:#FFF2DD;
  --warning-ink:#8B4B0B;

  --secondary:#475569;
  --secondary-hover:#334155;

  /* Sjene — tvrde i kratke (tech feel) */
  --shadow-xs: 0 1px 0 rgba(11,61,145,.05);
  --shadow-sm: 0 1px 2px rgba(11,61,145,.08);
  --shadow-md: 0 4px 12px rgba(11,61,145,.10);
  --shadow-lg: 0 12px 28px rgba(11,61,145,.18);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  font-feature-settings: "cv02","cv03","cv11";
}

.content{ padding: 20px 24px 36px; }

/* --------------------------------------------------------------------------
   SIDEBAR — NE DIRAMO boju (ostaje iz admin.css)
   Samo sitne polish korekcije bez mijenjanja tona.
   -------------------------------------------------------------------------- */
.nav-link{
  border-radius: 8px;
  transition: background-color .12s ease;
}

.btn-logout{
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   TOPBAR
   -------------------------------------------------------------------------- */
.topbar{
  min-height: 64px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
}

.topbar h1{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.topbar-sub{
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   PANEL / PAGE-BLOCK — NE "lebdi", tvrdo oslonjen na pozadinu
   -------------------------------------------------------------------------- */
.panel,
.page-block{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;        /* tech — manje zaobljeno */
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  position: relative;
}

.panel-mt{ margin-top: 14px; }

.panel-head,
.page-block-head{
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  /* fix za sticky koji se znao pojavljivati preko sredine */
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-title,
.page-block-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}

.panel-sub,
.page-block-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.panel-body,
.page-block-body{
  padding: 14px 16px;
}

/* Narančasti accent bar na vrhu sadržajnih blokova — brend detalj */
.page-block::before{
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--orange) 100%);
}

/* --------------------------------------------------------------------------
   STAT KARTICE
   -------------------------------------------------------------------------- */
.grid{ gap: 12px; }

.stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  padding: 14px 16px 12px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.stat-card:hover{
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.stat-card::before{
  height: 3px;
  border-radius: 0;
}
.stat-card:nth-child(1)::before{ background: var(--blue); }
.stat-card:nth-child(2)::before{ background: var(--success); }
.stat-card:nth-child(3)::before{ background: var(--danger); }
.stat-card:nth-child(4)::before{ background: var(--orange); }

.stat-label{
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-value{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-success{ color: var(--success); }
.stat-danger{  color: var(--danger); }
.stat-warning{ color: var(--orange); }

.stat-note{
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

.dash-layout{
  grid-template-columns: 300px 1fr 320px;
  gap: 14px;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   TABLICE — tech, čisto, kompaktno
   -------------------------------------------------------------------------- */
.table-wrap,
.table-scroll{
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow-x: auto;
  overflow-y: visible;
}

.data-table,
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.data-table thead th,
thead th{
  background: var(--surface-soft);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: static !important;
  top: auto !important;
}

.data-table tbody td,
tbody td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  vertical-align: middle;
  line-height: 1.4;
}

.data-table tbody tr:last-child td,
tbody tr:last-child td{ border-bottom: none; }

.data-table tbody tr,
tbody tr{ transition: background-color .1s ease; }

.data-table tbody tr:hover,
tbody tr:hover{ background: #F8FBFF; }

/* --------------------------------------------------------------------------
   GUMBI U TABLICAMA — tech stil, oštri rubovi, uniformno
   JS omota u: <div style="display:flex; gap:8px; flex-wrap:wrap;">
   -------------------------------------------------------------------------- */

td > div[style*="flex-wrap"]{
  display: flex !important;
  gap: 6px !important;
  row-gap: 6px !important;
  flex-wrap: wrap !important;
  align-items: center;
  max-width: 100%;
}

td .top-btn{
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 5px !important;     /* tech — gotovo oštro */
  line-height: 1 !important;
  white-space: nowrap;
  letter-spacing: -0.005em;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  text-transform: none;
}

/* Plavi = default (Uredi, Detalji, Upravljaj korisnicima, Odobri, Iznimke) */
td .top-btn:not([style*="background"]){
  background: var(--blue) !important;
  color: #fff !important;
}
td .top-btn:not([style*="background"]):hover{
  background: var(--blue-hover) !important;
}

/* Disabled */
td .top-btn[disabled],
.top-btn[disabled]{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* ---- Varijante po inline boji koje JS postavlja ---- */

/* Crvena — Blokiraj / Deaktiviraj / Obriši */
td .top-btn[style*="#B91C1C"],
td .top-btn[style*="#b91c1c"],
td .top-btn[style*="#B42318"],
td .top-btn[style*="#b42318"],
.top-btn[style*="#B91C1C"],
.top-btn[style*="#b91c1c"],
.top-btn[style*="#B42318"],
.top-btn[style*="#b42318"]{
  background: var(--danger) !important;
  color: #fff !important;
}
.top-btn[style*="#B91C1C"]:hover,
.top-btn[style*="#b91c1c"]:hover,
.top-btn[style*="#B42318"]:hover,
.top-btn[style*="#b42318"]:hover{
  background: var(--danger-hover) !important;
}

/* Siva — Lozinka, PIN, Odustani */
td .top-btn[style*="#475569"],
td .top-btn[style*="#64748B"],
td .top-btn[style*="#64748b"],
.top-btn[style*="#475569"],
.top-btn[style*="#64748B"],
.top-btn[style*="#64748b"]{
  background: var(--secondary) !important;
  color: #fff !important;
}
.top-btn[style*="#475569"]:hover,
.top-btn[style*="#64748B"]:hover,
.top-btn[style*="#64748b"]:hover{
  background: var(--secondary-hover) !important;
}

/* NARANČASTA UMJESTO LJUBIČASTE — "Forsiraj PIN" i sve što je bilo #7C3AED / #8B5CF6 */
td .top-btn[style*="#7C3AED"],
td .top-btn[style*="#7c3aed"],
td .top-btn[style*="#8B5CF6"],
td .top-btn[style*="#8b5cf6"],
.top-btn[style*="#7C3AED"],
.top-btn[style*="#7c3aed"],
.top-btn[style*="#8B5CF6"],
.top-btn[style*="#8b5cf6"]{
  background: var(--orange) !important;
  color: #fff !important;
}
.top-btn[style*="#7C3AED"]:hover,
.top-btn[style*="#7c3aed"]:hover,
.top-btn[style*="#8B5CF6"]:hover,
.top-btn[style*="#8b5cf6"]:hover{
  background: var(--orange-hover) !important;
}

/* --------------------------------------------------------------------------
   TOP-BTN izvan tablica  — toolbar ("Osvježi", "+ Novi djelatnik", "+ Dodaj liniju")
   -------------------------------------------------------------------------- */
.top-btn{
  height: 36px;
  border: none;
  border-radius: 6px;               /* tech — manji radius */
  padding: 0 14px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: none;
  transition: background-color .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.top-btn:hover{
  background: var(--blue-hover);
  box-shadow: var(--shadow-sm);
}
.top-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,61,145,.25);
}

/* "+ Novi …" / primarni CTA u headerima → narančasti naglasak
   Pogađamo ih po inline style atributu ako ga nemaju (defaultno plavi je OK)
   ali posebno stiliziramo one s klasom kojoj želimo naglasiti važnost:
   radimo to SAMO na id-jevima koje JS koristi za "dodaj/novo" gumbe. */
#newDjelatnikBtn,
#newKorisnikBtn,
#newLinijaBtn,
#newDomBtn,
#newUredjajBtn,
button[id^="new"][id$="Btn"]{
  background: var(--orange) !important;
  color: #fff !important;
}
#newDjelatnikBtn:hover,
#newKorisnikBtn:hover,
#newLinijaBtn:hover,
#newDomBtn:hover,
#newUredjajBtn:hover,
button[id^="new"][id$="Btn"]:hover{
  background: var(--orange-hover) !important;
}

/* --------------------------------------------------------------------------
   BADGES (status + prehrana)
   -------------------------------------------------------------------------- */
.mini-badge,
.status-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 4px;               /* tech — malo */
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.4;
  min-height: 20px;
  border: 1px solid transparent;
}

/* Default (kad klasa nema nijednu mini-boju) — plavi neutralni okvir */
.mini-badge{
  background: var(--blue-soft);
  color: var(--blue);
  border-color: var(--blue-soft-2);
}

/* JS-ove modifikatorske klase — svaka ima svoju boju.
   VAŽNO: koristi se na statusima linija gore
   (ZAVRŠENO / NIJE KRENULO / U TIJEKU / PROBLEM / UTOVAR POTVRĐEN) */
.mini-badge.mini-green{
  background: var(--success-soft) !important;
  color: var(--success-ink) !important;
  border-color: #BDE4CA !important;
}
.mini-badge.mini-orange{
  background: var(--orange-soft) !important;
  color: var(--orange-dark) !important;
  border-color: #F7D0A8 !important;
}
.mini-badge.mini-red{
  background: var(--danger-soft) !important;
  color: var(--danger-ink) !important;
  border-color: #F3C1C7 !important;
}
.mini-badge.mini-blue{
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
  border-color: var(--blue-soft-2) !important;
}

/* Za veću varijantu (mini-badge-large) naslijedi istu boju ali veći padding */
.mini-badge.mini-badge-large{
  padding: 6px 12px;
  font-size: 12px;
  min-height: 26px;
  border-radius: 6px;
}

/* Status badge base */
.status-badge{
  background: #EEF2F6;
  color: #334155;
  border: 1px solid #DBE2EA;
}

/* Aktivan */
.status-badge.status-active{
  background: var(--success-soft) !important;
  color: var(--success-ink) !important;
  border-color: #C3E9CF !important;
}

/* Warning / pauza */
.status-badge.status-warning{
  background: var(--warning-soft) !important;
  color: var(--warning-ink) !important;
  border-color: #F3D3A6 !important;
}

/* Prekid / danger */
.status-badge.status-danger{
  background: var(--danger-soft) !important;
  color: var(--danger-ink) !important;
  border-color: #F4C9CF !important;
}

/* Stari fallback za tekstualne klase */
.status-badge.neaktivan,
.status-badge.neaktivna,
[class*="neaktiv"]{
  background: #EEF2F6 !important;
  color: #52607A !important;
  border-color: #DBE2EA !important;
}

/* --------------------------------------------------------------------------
   FORME
   -------------------------------------------------------------------------- */
.form-label{
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
}

.form-input,
.form-field input,
.form-field select,
.form-field textarea,
.filter-field input,
.filter-field select{
  height: 36px;
  padding: 0 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;              /* tech */
  font-size: 13px;
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.form-field textarea{
  height: auto;
  min-height: 72px;
  padding: 8px 11px;
  resize: vertical;
}

.form-input:hover,
.form-field input:hover,
.form-field select:hover,
.filter-field input:hover,
.filter-field select:hover{
  border-color: var(--border-strong);
}

.form-input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.filter-field input:focus,
.filter-field select:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,61,145,.12);
}

.form-group{ margin-bottom: 10px; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-field-wide{ grid-column: 1 / -1; }

.filter-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.filter-field{ min-width: 160px; }
.filter-field-wide{ flex: 1; min-width: 220px; }

/* --------------------------------------------------------------------------
   PAGINACIJA
   -------------------------------------------------------------------------- */
.pager-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 4px 2px;
  flex-wrap: wrap;
}

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

.pager-controls{ display: flex; gap: 4px; }

.pager-controls .top-btn,
.pager-row .top-btn{
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 5px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  font-weight: 600 !important;
}
.pager-controls .top-btn:hover,
.pager-row .top-btn:hover{
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-soft) !important;
}
.pager-controls .top-btn[disabled],
.pager-row .top-btn[disabled]{
  opacity: .4 !important;
  background: var(--surface) !important;
  color: var(--muted-2) !important;
  cursor: not-allowed !important;
}

/* --------------------------------------------------------------------------
   MODAL
   -------------------------------------------------------------------------- */
.modal{
  background: rgba(7,20,43,.58);
}

.modal-card{
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-head{
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.modal-title{
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}

.modal-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.modal-close{
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 14px;
}
.modal-close:hover{
  background: #EEF3F8;
  color: var(--text);
}

.modal-body{ padding: 16px 18px; }

.modal-foot{
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

/* --------------------------------------------------------------------------
   ERROR / EMPTY
   -------------------------------------------------------------------------- */
.error-box{
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--danger-soft);
  border: 1px solid #F4C9CF;
  color: var(--danger-ink);
  font-size: 12.5px;
  font-weight: 600;
}

.empty-box{
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   QUICK ACTIONS (dashboard)
   -------------------------------------------------------------------------- */
.quick-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.quick-btn{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.quick-btn:hover{
  border-color: var(--orange);
  background: var(--orange-soft);
}

.quick-icon{ font-size: 18px; margin-bottom: 2px; }
.quick-btn strong{ font-size: 13px; font-weight: 700; color: var(--text); }
.quick-btn span{ font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* --------------------------------------------------------------------------
   SUM BAR / DELIVERY DAYS
   -------------------------------------------------------------------------- */
.sum-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  font-size: 12px;
  color: var(--text-2);
}

.delivery-days-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.day-check{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 600;
  cursor: pointer;
}
.day-check:hover{ border-color: var(--blue); background: var(--blue-soft); }
.day-check input{ accent-color: var(--blue); }

/* --------------------------------------------------------------------------
   LOGIN — ostaje iz admin.css, samo sitno zaoštreno
   -------------------------------------------------------------------------- */
.login-card{
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

.btn-primary{
  background: var(--blue);
  border-radius: 6px;
  height: 40px;
  font-weight: 700;
}
.btn-primary:hover{ background: var(--blue-hover); }

.password-toggle{ border-radius: 5px; }
.password-toggle:hover{ background: rgba(11,61,145,.06); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1200px){
  .dash-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .content{ padding: 14px; }
  .topbar{ padding: 10px 14px; }
  .panel-head, .panel-body,
  .page-block-head, .page-block-body{ padding: 12px 14px; }
  .form-grid{ grid-template-columns: 1fr; }
  thead th, tbody td{ padding: 9px 11px; }
}

@media (max-width: 640px){
  .grid-4{ grid-template-columns: 1fr; }
  .quick-grid{ grid-template-columns: 1fr; }
}