/* ---------------------------------------------------------------------
   Sitni inventar - dizajn sustav
   Reskinira Bootstrap 5.3 kroz CSS varijable (radi bez rebuilda Sass-a)
   plus dodatna pravila za navigaciju, kartice, tablice, forme, popis.
   --------------------------------------------------------------------- */

:root {
  /* paleta */
  --si-primary: #2F4FCB;
  --si-primary-rgb: 47, 79, 203;
  --si-primary-dark: #233CA0;
  --si-secondary: #64748B;
  --si-secondary-rgb: 100, 116, 139;
  --si-success: #15803D;
  --si-success-rgb: 21, 128, 61;
  --si-danger: #C62828;
  --si-danger-rgb: 198, 40, 40;
  --si-warning: #B45309;
  --si-warning-rgb: 180, 83, 9;
  --si-info: #0E7490;
  --si-info-rgb: 14, 116, 144;
  --si-dark: #141A29;
  --si-dark-rgb: 20, 26, 41;

  --si-bg: #F5F7FA;
  --si-surface: #FFFFFF;
  --si-border: #E2E6ED;
  --si-text: #18202F;
  --si-text-secondary: #55607A;
  --si-text-muted: #8791A3;

  /* sidebar */
  --si-side-w: 258px;
  --si-side-bg: #141A29;
  --si-side-bg-soft: #1C2438;
  --si-side-text: #A8B2C6;
  --si-side-text-strong: #FFFFFF;

  /* preuzmi Bootstrap 5.3 varijable teme */
  --bs-primary: var(--si-primary);
  --bs-primary-rgb: var(--si-primary-rgb);
  --bs-secondary: var(--si-secondary);
  --bs-secondary-rgb: var(--si-secondary-rgb);
  --bs-success: var(--si-success);
  --bs-success-rgb: var(--si-success-rgb);
  --bs-danger: var(--si-danger);
  --bs-danger-rgb: var(--si-danger-rgb);
  --bs-warning: var(--si-warning);
  --bs-warning-rgb: var(--si-warning-rgb);
  --bs-info: var(--si-info);
  --bs-info-rgb: var(--si-info-rgb);
  --bs-dark: var(--si-dark);
  --bs-dark-rgb: var(--si-dark-rgb);
  --bs-body-bg: var(--si-bg);
  --bs-body-color: var(--si-text);
  --bs-border-color: var(--si-border);
  --bs-border-radius: .55rem;
  --bs-border-radius-sm: .4rem;
  --bs-border-radius-lg: .8rem;
  --bs-link-color: var(--si-primary);
  --bs-link-hover-color: var(--si-primary-dark);
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: var(--si-bg);
  color: var(--si-text);
  font-size: .925rem;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

h3, h4, h5, h6 { font-weight: 650; letter-spacing: -.015em; color: var(--si-text); }

/* h4 je u svim ekranima naslov stranice - dobiva zračniji razmak i tanku crtu ispod */
.app-content > h4:first-child,
.app-content > p:first-child + h4,
.app-content > h4 {
  font-size: 1.32rem;
  margin-bottom: .35rem;
}
.app-content > h4 + p { color: var(--si-text-secondary); }

h5 { font-size: 1.02rem; margin-top: .25rem; }
h6 { font-size: .9rem; }

/* ---------------------------------------------------------------------
   Layout - sidebar lijevo, sadržaj desno
   --------------------------------------------------------------------- */

.app-shell { display: flex; min-height: 100vh; }

.app-main {
  flex: 1 1 auto;
  min-width: 0;                /* bez ovoga široke tablice razvuku cijeli layout */
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1 1 auto;
  padding: 1.75rem 1.75rem 3rem;
  max-width: 1720px;
  width: 100%;
}

.auth-shell { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

.container-fluid { max-width: 1900px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Tablice koje ne stanu u kolonu/ekran dobiju vodoravni scroll umjesto rezanja stupaca */
.table-responsive { border-radius: .7rem; border: 1px solid var(--si-border); }
.table-responsive > .table.bg-white { border-radius: 0; border: none; }

/* ---------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------- */

/* Sidebar je Bootstrapov responzivni offcanvas (.offcanvas-lg): ispod lg se otvara kao ladica,
   iznad lg je običan stupac. Bootstrap iznad breakpointa postavlja
   `background-color: transparent !important`, a u offcanvas načinu boju pozadine i teksta uzima
   iz svojih --bs-offcanvas-* varijabli - zato ovdje tamnu temu moramo forsirati s !important,
   inače gore lijevo ostane bijeli tekst na svijetloj podlozi. */
.app-sidebar {
  width: var(--si-side-w);
  flex: 0 0 var(--si-side-w);
  background-color: var(--si-side-bg) !important;
  color: var(--si-side-text) !important;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.06);
  --bs-offcanvas-bg: var(--si-side-bg);
  --bs-offcanvas-color: var(--si-side-text);
  --bs-offcanvas-width: var(--si-side-w);
  --bs-offcanvas-border-width: 0;
}

.side-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.15rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.side-brand-link { display: flex; align-items: center; gap: .7rem; color: inherit; }
.side-brand-link:hover { text-decoration: none; }

/* Popis: dodatna polja ispod artikla. */
.popis-item { border-bottom: 1px solid var(--si-border); padding-bottom: .5rem; }
.popis-item .popis-row { border-bottom: 0; }
.popis-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .4rem .8rem; padding: 0 0 .25rem 90px;
}
@media (max-width: 576px) { .popis-fields { padding-left: 0; grid-template-columns: 1fr 1fr; } }

/* Polja ciklusa u retku tablice (ispod naziva artikla). */
.row-fields { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .25rem; font-size: .78rem; }
.row-field { display: flex; align-items: center; gap: .3rem; }
.row-field .form-select, .row-field .form-control { font-size: .78rem; padding-top: .1rem; padding-bottom: .1rem; min-width: 110px; }

/* Koraci čarobnjaka za uvoz - na mobitelu se vide samo brojevi i naziv trenutnog koraka. */
.wizard-steps { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0 0 .6rem; flex-wrap: wrap; }
.wizard-steps li { display: flex; align-items: center; }
.wizard-steps li a, .wizard-steps li > span { display: flex; align-items: center; gap: .4rem; color: var(--si-text-muted); text-decoration: none; }
.wizard-steps .n {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--si-border); font-size: .8rem; font-weight: 600; background: var(--si-surface);
}
.wizard-steps .t { font-size: .85rem; padding-right: .5rem; }
.wizard-steps li.done .n { background: rgba(var(--si-success-rgb), .12); border-color: var(--si-success); color: var(--si-success); }
.wizard-steps li.current .n { background: var(--si-primary); border-color: var(--si-primary); color: #fff; }
.wizard-steps li.current .t { color: var(--si-text); font-weight: 600; }
@media (max-width: 767.98px) { .wizard-steps li:not(.current) .t { display: none; } }

/* Matrica vidljivosti polja po fazi (čarobnjak, polja ciklusa). */
.vis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem .75rem; }
.vis-grid label { font-size: .72rem; color: var(--si-text-secondary); margin-bottom: 0; }

/* Ikonica aplikacije (static/icon.svg) - sama nosi zaobljenje i boje. */
.side-mark {
  width: 32px; height: 32px; flex: 0 0 32px; display: block;
  filter: drop-shadow(0 2px 6px rgba(47,79,203,.45));
}

.side-brand-name {
  display: block; color: var(--si-side-text-strong);
  font-weight: 650; font-size: .95rem; letter-spacing: -.01em; line-height: 1.2;
}
.side-brand-sub { display: block; font-size: .7rem; color: rgba(255,255,255,.42); }

.side-nav { padding: .85rem .7rem 1rem; flex: 1 1 auto; }

.side-group {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: rgba(255,255,255,.34);
  padding: .9rem .6rem .4rem;
}
.side-group:first-child { padding-top: .2rem; }

.side-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .6rem;
  border-radius: .55rem;
  color: var(--si-side-text);
  font-size: .855rem; font-weight: 500;
  margin-bottom: .1rem;
  position: relative;
  transition: background-color .13s ease, color .13s ease;
}
.side-link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }

.side-link.active {
  background: rgba(var(--si-primary-rgb), .9);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--si-primary-rgb), .35);
}
.side-link.active .nav-ico { opacity: 1; }

.nav-ico { width: 17px; height: 17px; flex: 0 0 17px; opacity: .72; }

.side-foot {
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.side-user { display: flex; align-items: center; gap: .6rem; }
.side-avatar {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: .85rem;
}
.side-user-text { min-width: 0; }
.side-user-name {
  display: block; color: #fff; font-size: .83rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-user-role { display: block; font-size: .7rem; color: rgba(255,255,255,.45); }
.side-company {
  font-size: .72rem; color: rgba(255,255,255,.4);
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.06);
}
.side-logout {
  display: inline-block; margin-top: .6rem;
  font-size: .78rem; color: rgba(255,255,255,.55);
}
.side-logout:hover { color: #fff; }

/* Ispod lg sidebar je Bootstrap offcanvas - resetiraj sticky/visinu da ne strši */
@media (max-width: 991.98px) {
  .app-sidebar { position: fixed; height: 100%; }
}

/* ---------------------------------------------------------------------
   Gornja traka
   --------------------------------------------------------------------- */

.app-topbar {
  display: flex; align-items: center;
  gap: .5rem;
  padding: .7rem 1.75rem;
  background: var(--si-surface);
  border-bottom: 1px solid var(--si-border);
  position: sticky; top: 0; z-index: 1020;
}

.topbar-title { font-weight: 650; font-size: .95rem; color: inherit; }
.topbar-title:hover { text-decoration: none; color: inherit; }

.topbar-tasks {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(var(--si-warning-rgb), .1);
  color: var(--si-warning);
  border: 1px solid rgba(var(--si-warning-rgb), .28);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .79rem; font-weight: 600;
}
.topbar-tasks:hover { background: rgba(var(--si-warning-rgb), .16); text-decoration: none; }
.topbar-tasks-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--si-warning);
  box-shadow: 0 0 0 3px rgba(var(--si-warning-rgb), .18);
}
.topbar-clear { font-size: .78rem; color: var(--si-text-muted); }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */

.card {
  border: 1px solid var(--si-border);
  border-radius: .85rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-title { font-weight: 600; font-size: 1rem; margin-bottom: 1rem; }

.card-body { padding: 1.25rem; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */

.table {
  --bs-table-bg: var(--si-surface);
  --bs-table-striped-bg: #FAFBFD;
  --bs-table-hover-bg: #F1F4FC;
  border-color: var(--si-border);
  font-size: .875rem;
}

.table.bg-white { background: var(--si-surface); border: 1px solid var(--si-border); border-radius: .7rem; overflow: hidden; }

.table thead th {
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--si-text-muted);
  background: #F8F9FC;
  border-bottom: 1px solid var(--si-border);
  padding: .65rem .85rem;
  white-space: nowrap;
}

.table tbody td { padding: .6rem .85rem; vertical-align: middle; color: var(--si-text); }
.table tbody tr { transition: background-color .1s ease; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--bs-table-striped-bg); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn { font-weight: 500; font-size: .85rem; letter-spacing: 0; }
.btn-sm { font-size: .78rem; padding: .32rem .7rem; }
.btn-primary { box-shadow: 0 1px 2px rgba(var(--si-primary-rgb), .25); }
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(var(--si-primary-rgb), .18); }

/* ---------------------------------------------------------------------
   Badges - status chips
   --------------------------------------------------------------------- */

.badge {
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .01em;
  padding: .38em .65em;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.form-label {
  font-weight: 600;
  font-size: .78rem;
  color: var(--si-text-secondary);
  margin-bottom: .3rem;
}

.form-control, .form-select {
  border-color: var(--si-border);
  font-size: .875rem;
}

.form-control::placeholder { color: var(--si-text-muted); }

/* ---------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------- */

.alert {
  border: 1px solid transparent;
  border-left-width: 4px;
  font-size: .875rem;
}
.alert-info { border-left-color: var(--si-info); }
.alert-success { border-left-color: var(--si-success); }
.alert-danger { border-left-color: var(--si-danger); }
.alert-secondary { border-left-color: var(--si-secondary); }

/* ---------------------------------------------------------------------
   List group (popis - odabir lokacije)
   --------------------------------------------------------------------- */

.list-group-item-action {
  border: 1px solid var(--si-border) !important;
  border-radius: .7rem !important;
  margin-bottom: .55rem;
  background: var(--si-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.list-group-item-action:hover {
  border-color: rgba(var(--si-primary-rgb), .45) !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .06);
}

/* ---------------------------------------------------------------------
   Blok "Moji zadaci"
   --------------------------------------------------------------------- */

.app-content > .mb-4 > h5 { font-size: .95rem; }

a.card.border-danger  { border-color: rgba(var(--si-danger-rgb), .4) !important; }
a.card.border-warning { border-color: rgba(var(--si-warning-rgb), .45) !important; }
a.card.border-info    { border-color: rgba(var(--si-info-rgb), .35) !important; }

a.card {
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
a.card:hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, .1);
  transform: translateY(-1px);
  text-decoration: none;
}
a.card:hover .fw-semibold { color: var(--si-primary); }

/* ---------------------------------------------------------------------
   Popis - tablet/mobile unos (touch-friendly)
   --------------------------------------------------------------------- */

.popis-row { display:flex; align-items:center; gap:12px; padding:14px 10px; border-bottom:1px solid var(--si-border); }
.popis-row .sifra { font-family: monospace; color: var(--si-text-muted); min-width:90px; }
.popis-row .naziv { flex:1; font-size:1.05rem; }
.popis-row input.qty {
  width: 110px; font-size: 1.4rem; text-align:center; padding:10px;
  border-radius:10px; border:2px solid var(--si-border);
}
.popis-row input.qty:focus { border-color: var(--si-primary); outline:none; }
.popis-row.saved input.qty { border-color: var(--si-success); background:#F1FBF5; }
.mt-select { font-size:1.1rem; padding:10px; }
.search-box { font-size:1.1rem; padding:12px; }
.locked-banner { font-size:1.2rem; }

@media (max-width: 576px) {
  .popis-row .naziv { font-size:0.95rem; }
  .popis-row .sifra { min-width:70px; font-size:0.8rem; }
}