:root {
  --sidebar-width: 240px;
  /* Suženi sidebar: mora biti dovoljno širok za padding (nav p-2) + ikona (1.25rem) + padding linka (0.5rem×2), inače se pojavi horizontalni scrollbar */
  --sidebar-collapsed-width: 3.25rem;
  --topbar-height: 56px;
}
html {
  background-color: var(--bs-body-bg);
  overflow-x: clip;
}
body {
  min-height: 100vh;
  background-color: var(--bs-body-bg);
  overflow-x: clip;
}

/* Sidebar sticky – align-self: flex-start potreban za sticky u flexboxu */
#sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--sidebar-width);
  height: 100vh;
  flex: 0 0 auto;
  flex-shrink: 0;
  overflow-x: hidden !important;
  transition: width .2s ease, min-width .2s ease;
  z-index: 1000;
}
#sidebar .sidebar-inner {
  min-width: var(--sidebar-width);
  min-height: 0;
  overflow-x: hidden;
  transition: min-width .2s ease;
}
#sidebar .sidebar-nav-list {
  min-width: 0;
  overflow-x: hidden !important;
  overflow-y: auto;
}
/* Sakrivanje horizontalnog scrollbara unutar sidebara */
#sidebar ::-webkit-scrollbar:horizontal { height: 0 !important; display: none !important; }
#sidebar .sidebar-nav-list .nav { min-width: 0; }

/* Skriven (samo ikonice) na desktopu */
@media (min-width: 768px) {
  #sidebar { display: block !important; visibility: visible !important; }
  body.sidebar-hidden #sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    overflow: hidden;
  }
  body.sidebar-hidden #sidebar .sidebar-inner { min-width: var(--sidebar-collapsed-width); }
  body.sidebar-hidden .sidebar-text,
  body.sidebar-hidden .sidebar-section-label,
  body.sidebar-hidden .sidebar-brand {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
  }
  body.sidebar-hidden .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; }
  body.sidebar-hidden .sidebar-nav-list { padding-left: 0.25rem; padding-right: 0.25rem; }
  body.sidebar-hidden .sidebar-nav-list .nav-link { padding-left: 0.375rem; padding-right: 0.375rem; justify-content: center; min-width: 0; }
  body.sidebar-hidden .sidebar-nav-list .nav-link .sidebar-icon { margin: 0; }
  body.sidebar-hidden .sidebar-section { padding-top: 0.25rem; margin-top: 0.25rem; }
  body.sidebar-hidden .sidebar-section .nav-link { min-height: 0; padding: 0; border-top: 1px solid var(--bs-border-color); border-radius: 0; }
  body.sidebar-hidden .sidebar-footer { padding-left: 0.25rem; padding-right: 0.25rem; }
  body.sidebar-hidden .sidebar-footer .nav-link,
  body.sidebar-hidden .sidebar-footer button.nav-link { padding-left: 0.375rem; padding-right: 0.375rem; justify-content: center; min-width: 0; }
}
/* Na mobitelu: sidebar bez sticky (collapse overlay), topbar ostaje sticky */
@media (max-width: 767.98px) {
  #sidebar { position: static; height: auto; min-height: 100vh; }
  #sidebar.collapse { display: none; }
  #sidebar.collapse.show { display: block; width: var(--sidebar-width); }
  /* Sadržaj prilagodi širini: flex child mora moći smanjiti se (tablice/dugi sadržaj) */
  .d-flex > .flex-grow-1 {
    min-width: 0;
    max-width: 100%;
  }
}

.sidebar-nav {
  background-color: var(--bs-tertiary-bg);
}
.sidebar-nav .nav-link { color: var(--bs-body-color); }
.sidebar-nav .nav-link:hover,
.sidebar-nav button.nav-link:hover { background-color: var(--bs-secondary-bg); }
/* Aktivna stavka izbornika */
.sidebar-nav .nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-weight: 500;
}
.sidebar-nav .nav-link.active:hover { background-color: var(--bs-primary-border-subtle); color: var(--bs-primary); }
.sidebar-icon { width: 1.25rem; text-align: center; }
.sidebar-toggle { width: 1.75rem; height: 1.75rem; }
/* Topbar sticky – uvijek vidljiv na vrhu */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color) !important;
}
.navbar-text { color: var(--bs-body-color); }
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .border-end { border-color: var(--bs-border-color) !important; }
/* Cards & tables */
.card { border-radius: 0.5rem; }
.table { --bs-table-striped-bg: rgba(0,0,0,.02); }
[data-bs-theme="dark"] .table { --bs-table-striped-bg: rgba(255,255,255,.03); }
.dropdown-menu { border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }
.btn { border-radius: 0.375rem; }
.form-control, .form-select { border-radius: 0.375rem; }
input[type="email"] { text-transform: lowercase; }
/* Akcija ikone – hover */
.table .btn-link.p-1 { border-radius: 0.375rem; transition: background-color .15s, transform .1s; }
.table .btn-link.p-1:hover { background-color: var(--bs-secondary-bg); transform: scale(1.1); }
.table .btn-link.p-1:focus { box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); }

/* Flatpickr: gumb Očisti u kalendaru, prati temu */
.flatpickr-clear-wrap {
  padding: 8px;
  border-top: 1px solid rgba(0,0,0,.1);
  text-align: center;
}
[data-bs-theme="dark"] .flatpickr-clear-wrap {
  border-top-color: rgba(255,255,255,.15);
}
.flatpickr-clear-btn {
  padding: 4px 12px;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 13px;
  background: transparent;
  border: 1px solid rgba(0,0,0,.2);
  color: #333;
}
.flatpickr-clear-btn:hover {
  background: rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .flatpickr-clear-btn {
  border-color: rgba(255,255,255,.3);
  color: #eee;
}
[data-bs-theme="dark"] .flatpickr-clear-btn:hover {
  background: rgba(255,255,255,.1);
}

/* Lista zapisa: filteri – na mobilu puna širina, od 768px uska polja */
@media (min-width: 768px) {
  .records-filter-form .records-filter-date { max-width: 8.5rem; }
  .records-filter-form .records-filter-oib { max-width: 7.5rem; }
  .records-filter-form .records-filter-partner { max-width: 11rem; }
  .records-filter-form .records-filter-contract { max-width: 11rem; }
  .records-filter-form .records-filter-carrier { max-width: 10rem; }
  .records-filter-form .records-filter-package { max-width: 10rem; }
}

/* Lista zapisa: sticky filter + per_page (samo od 768px, na mobitelu skrola) */
@media (min-width: 768px) {
  .records-sticky-header {
    position: sticky;
    top: var(--topbar-height);
    z-index: 1010;
    background-color: var(--bs-body-bg);
  }
}

/* Lista zapisa: badgeovi paketa – u light modu tamni tekst za preglednost (glavna lista + accordion) */
.badge.records-package-badge { color: #212529 !important; }
html[data-bs-theme="dark"] .badge.records-package-badge,
[data-bs-theme="dark"] .badge.records-package-badge { color: #fff !important; }

/* Lista zapisa: mobilni prikaz – kompaktniji */
@media (max-width: 767.98px) {
  .records-carrier-col,
  .records-carrier-cell {
    min-width: 0;
    max-width: 150px;
  }
  .records-carrier-cell {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}
@media (min-width: 768px) {
  .records-carrier-col,
  .records-carrier-cell { min-width: 280px; }
}

/* Mobilno: datum skraćeno + vrijeme ispod (manja širina) */
.records-datetime-cell .smaller { font-size: 0.8em; opacity: 0.9; }

/* Povjerljivi uređaji: chevron rotira pri otvaranju Detalji */
button[aria-expanded="true"] .device-detail-chevron { transform: rotate(90deg); }
.device-detail-chevron { transition: transform 0.2s ease; }

/* Mobilni prikaz liste zapisa: kartice bez tablice */
.records-mobile-card { border-color: var(--bs-border-color) !important; }
.records-mobile-card:last-child { border-bottom: none !important; }
.records-mobile-row { margin-bottom: 0.5rem; }
.records-mobile-row:last-of-type { margin-bottom: 0; }
/* Mobilno: grupe paketa – badgeovi jedan ispod drugog unutar grupe, grupe jedan ispod drugih */
.records-package-group-mobile { min-width: 0; }

/* Mobilno: aneksi u accordionu – zadnji bez donje linije */
.records-mobile-addendum-item:last-child { border-bottom: none !important; }

/* Lista zapisa: oznaka aneksa (npr. "A" u "12A") u drugoj boji – light/dark tema */
.records-annex-suffix { font-weight: 600; }
[data-bs-theme="light"] .records-annex-suffix,
html[data-bs-theme="light"] .records-annex-suffix { color: #0d6efd; }
[data-bs-theme="dark"] .records-annex-suffix,
html[data-bs-theme="dark"] .records-annex-suffix { color: #6ea8fe; }

/* Accordion: chevron lijevo (kao grupe paketa), rotira 90° pri otvaranju */
.records-id-col { white-space: nowrap; }
.records-accordion-btn { line-height: 1; }
button[aria-expanded="true"] .records-accordion-icon { transform: rotate(90deg); }
.records-accordion-icon { transition: transform 0.2s ease; display: inline-block; }

/* Accordion tablica: poravnanje s osnovnim redom, Kreirao aligned s parent redom (sivi paketi kolona uže) */
.records-accordion-table { table-layout: fixed; width: 100%; }
.records-accordion-col-id { width: 6%; }
.records-accordion-col-date { width: 8%; }
.records-accordion-col-contract { width: 14%; }
.records-accordion-col-carrier { width: 18%; }
.records-accordion-col-oib { width: 9%; }
.records-accordion-col-packages { width: 17%; }
.records-accordion-col-creator { width: 13%; }
.records-accordion-col-actions { width: 5%; }
.records-accordion-cell-id { padding-left: 1.75rem; }

/* Partner: obojeni rub unutar ID ćelije – 4px bez short_name, 12px s short_name */
.records-id-col,
.records-accordion-cell-id { position: relative; padding-left: 0.25rem; }
.records-id-col-has-partner,
.records-accordion-cell-id.records-id-col-has-partner { padding-left: 0; }
.records-id-content,
.records-accordion-id-content { display: inline-flex; align-items: center; flex-wrap: wrap; }
.records-id-col-has-partner .records-id-content { margin-left: 4px; }
.records-id-col-has-partner.records-id-col-partner-label .records-id-content { margin-left: 12px; }
.records-accordion-cell-id.records-id-col-has-partner .records-accordion-id-content { margin-left: 4px; }
.records-accordion-cell-id.records-id-col-has-partner.records-id-col-partner-label .records-accordion-id-content { margin-left: 12px; }

.records-partner-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
.records-partner-bar-minimal { width: 4px; }
.records-partner-bar-with-label { width: 12px; }

.records-partner-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.55rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4rem;
}
[data-bs-theme="dark"] .records-partner-label,
html[data-bs-theme="dark"] .records-partner-label { color: rgba(255, 255, 255, 0.9); }
.records-partner-bar-accordion .records-partner-label { font-size: 0.5rem; max-height: 3rem; }

/* Partner form: oznaka odabrane boje */
.partner-color-swatch:has(input:checked) { border-color: #000 !important; box-shadow: 0 0 0 1px #000; }
[data-bs-theme="dark"] .partner-color-swatch:has(input:checked),
html[data-bs-theme="dark"] .partner-color-swatch:has(input:checked) { border-color: #fff !important; box-shadow: 0 0 0 1px #fff; }

/* Mobil: samo obojeni rub – border-left na karticama i addendum redovima */
.records-mobile-card-partner { padding-left: 0.5rem; }
.records-mobile-addendum-partner { padding-left: 0.5rem; margin-left: 0.25rem; }

/* Glavna tablica: iste proporcije kolona kao accordion da Kreirao poravna */
.records-main-table { table-layout: fixed; width: 100%; }
.records-main-col-id { width: 6%; }
.records-main-col-date { width: 8%; }
.records-main-col-contract { width: 14%; }
.records-main-col-carrier { width: 18%; }
.records-main-col-oib { width: 9%; }
.records-main-col-packages { width: 17%; }
.records-main-col-creator { width: 13%; }
.records-main-col-actions { width: 5%; }