/* ─────────────────────────────────────────────────────────────────────────
   Wild Bar · Light Brand Theme — style.css
   Fonts:  Barlow Condensed (display/headings), Montserrat (body)
   Colors: wildbar.rs design system
───────────────────────────────────────────────────────────────────────── */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           #F6F4EF;   /* page background — light cream */
  --bg-card:      #FFFFFF;   /* card surface */
  --bg-card2:     #F0EDE6;   /* elevated / secondary surface */
  --bg-hover:     #EAE7DF;   /* hover state */
  --bg-elevated:  #F9F8F4;   /* slightly elevated */

  /* Brand colors */
  --deep:         #0F3D3E;   /* deep teal — darkest brand */
  --teal:         #00858A;   /* primary teal */
  --teal-ink:     #1F6E6F;   /* teal ink (slightly darker for text) */
  --mint:         #E4F3F2;   /* mint — light teal tint */
  --matcha:       #7A9A3A;   /* matcha green — secondary */
  --kakao:        #4B2E24;   /* kakao brown — tertiary */
  --goji:         #E05A3A;   /* goji — accent/danger */

  /* Text */
  --ink:          #231F20;   /* primary text */
  --muted:        #5E5B55;   /* secondary text */
  --text-muted:   #8C897F;   /* muted / placeholders */
  --text:         #231F20;
  --text-secondary: #5E5B55;

  /* Lines */
  --line:         #E6E1D6;   /* borders / dividers */
  --border:       rgba(230,225,214,.8);
  --border-light: rgba(230,225,214,1);

  /* Semantic */
  --accent:       var(--teal);
  --accent2:      var(--matcha);
  --accent3:      var(--kakao);
  --danger:       var(--goji);
  --warning:      #D4930A;   /* amber */
  --success:      var(--matcha);
  --accent-cyan:  #2B9FAB;
  --accent-pink:  #C45C7A;

  /* Layout */
  --sidebar-w:    248px;
  --topbar-h:     54px;

  /* Radius */
  --radius:       10px;
  --radius-lg:    14px;
  --radius-xl:    18px;
  --radius-pill:  999px;

  /* Shadow */
  --shadow-sm:    0 1px 3px rgba(35,31,32,.07), 0 1px 2px rgba(35,31,32,.05);
  --shadow-md:    0 4px 16px rgba(35,31,32,.09), 0 2px 6px rgba(35,31,32,.06);
  --shadow-lg:    0 8px 30px rgba(35,31,32,.12);

  /* Fonts */
  --f-disp:       'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-text:       'Montserrat', system-ui, sans-serif;
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background:   var(--bg);
  color:        var(--ink);
  font-family:  var(--f-text);
  font-size:    14px;
  line-height:  1.5;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: hidden;
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width:      var(--sidebar-w);
  background: var(--deep);
  border-right: none;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow: 2px 0 16px rgba(15,61,62,.18);
}

.sidebar-header {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 9px;
}

.sidebar-logo-wrap {
  padding: 16px 18px;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-logo {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.logo-text {
  font-family:    var(--f-disp);
  font-size:      18px;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          #fff;
}

.logo-icon { font-size: 20px; }

.sidebar-nav {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav .nav-section {
  padding: 14px 16px 4px;
  font-family:    var(--f-disp);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.35);
}

.sidebar-nav .nav-link {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      9px 14px;
  margin:       1px 8px;
  color:        rgba(255,255,255,.65);
  text-decoration: none;
  border-radius: var(--radius);
  font-size:    13.5px;
  font-weight:  500;
  font-family:  var(--f-text);
  transition:   background .12s ease, color .12s ease;
}

.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,.08);
  color:      rgba(255,255,255,.92);
}

.sidebar-nav .nav-link.active {
  background: rgba(228,243,242,.15);
  color:      var(--mint);
  font-weight: 600;
}

.sidebar-nav .nav-link i {
  width:      16px;
  text-align: center;
  font-size:  14px;
  opacity:    .8;
}

.sidebar-nav .nav-link.active i { opacity: 1; }

/* Nav group styling — dark sidebar */
.nav-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  gap: 10px;
  color: rgba(255,255,255,.65);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--f-text);
  letter-spacing: normal;
  text-align: left;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
  margin: 1px 8px;
}
.nav-group-toggle:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.nav-group.open > .nav-group-toggle {
  color: rgba(255,255,255,.9);
}
.nav-group-toggle .ng-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: .8;
}
.nav-section-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: inherit;
  text-transform: none;
}
.nav-group-arrow {
  font-size: 9px;
  color: rgba(255,255,255,.3);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-group.open > .nav-group-toggle .nav-group-arrow {
  transform: rotate(90deg);
}
.nav-group-items {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
}
.nav-group.open > .nav-group-items {
  max-height: 500px;
}
.nav-group-items .nav-link {
  padding-left: 44px !important;
  font-size: 13px !important;
}

.sidebar-footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  color: rgba(255,255,255,.3);
  font-family: var(--f-text);
}

/* Settings / Admin links at bottom */
.sidebar > div[style*="margin-top:auto"] {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  min-height:  100vh;
  transition:  margin-left .22s cubic-bezier(.4,0,.2,1);
}

.topbar {
  position:   sticky;
  top:        0;
  height:     var(--topbar-h);
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  display:    flex;
  align-items: center;
  gap:        12px;
  padding:    0 24px;
  z-index:    50;
  box-shadow: 0 1px 4px rgba(35,31,32,.06);
}

.topbar-title {
  font-family:    var(--f-disp);
  font-size:      20px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--deep);
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-toggle {
  background:    transparent;
  border:        1px solid var(--line);
  color:         var(--muted);
  padding:       5px 10px;
  border-radius: var(--radius);
  transition:    all .12s;
}
.sidebar-toggle:hover {
  color: var(--deep);
  border-color: var(--teal);
  background: var(--mint);
}

.page-content { padding-top: 20px; }

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.wb-card {
  background:    var(--bg-card);
  border:        1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:       20px;
  margin-bottom: 16px;
  box-shadow:    var(--shadow-sm);
}

.wb-card-title {
  font-family:    var(--f-disp);
  font-size:      13px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--muted);
  margin-bottom:  12px;
}

/* ── STAT CARDS ─────────────────────────────────────────────────────────── */
.stat-card {
  background:    var(--bg-card);
  border:        1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:       16px 18px;
  display:       flex;
  align-items:   center;
  gap:           14px;
  box-shadow:    var(--shadow-sm);
  transition:    background .15s, border-color .15s, box-shadow .15s;
}

.stat-card:hover {
  background:    var(--bg-elevated);
  border-color:  var(--teal);
  box-shadow:    var(--shadow-md);
}

/* Left-border color variants */
.stat-card.accent { border-left: 3px solid var(--teal);   }
.stat-card.blue   { border-left: 3px solid var(--matcha); }
.stat-card.orange { border-left: 3px solid var(--warning); }
.stat-card.red    { border-left: 3px solid var(--goji);   }
.stat-card.purple { border-left: 3px solid var(--kakao);  }
.stat-card.cyan   { border-left: 3px solid var(--accent-cyan); }

.stat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.stat-icon.green  { background: var(--mint);              color: var(--teal);       }
.stat-icon.blue   { background: rgba(122,154,58,.12);     color: var(--matcha);     }
.stat-icon.orange { background: rgba(212,147,10,.12);     color: var(--warning);    }
.stat-icon.red    { background: rgba(224,90,58,.12);      color: var(--goji);       }
.stat-icon.purple { background: rgba(75,46,36,.1);        color: var(--kakao);      }
.stat-icon.cyan   { background: rgba(43,159,171,.1);      color: var(--accent-cyan);}
.stat-icon.pink   { background: rgba(196,92,122,.1);      color: var(--accent-pink);}

.stat-value {
  font-family:    var(--f-disp);
  font-size:      24px;
  font-weight:    700;
  line-height:    1.1;
  color:          var(--deep);
  letter-spacing: .01em;
}

.stat-label {
  font-size:   12px;
  font-weight: 500;
  color:       var(--muted);
  margin-top:  2px;
}

.stat-sub {
  font-size:  11px;
  color:      var(--text-muted);
  margin-top: 3px;
}

/* ── KPI CARDS ──────────────────────────────────────────────────────────── */
.kpi-card {
  border-top: 3px solid var(--line);
  padding:    18px 20px;
}
.kpi-card.accent { border-top-color: var(--teal);        }
.kpi-card.blue   { border-top-color: var(--matcha);      }
.kpi-card.orange { border-top-color: var(--warning);     }
.kpi-card.red    { border-top-color: var(--goji);        }
.kpi-card.purple { border-top-color: var(--kakao);       }
.kpi-card.cyan   { border-top-color: var(--accent-cyan); }
.kpi-card.pink   { border-top-color: var(--accent-pink); }

.kpi-label {
  font-family:    var(--f-disp);
  font-size:      12px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--muted);
  margin-bottom:  6px;
}

.kpi-value {
  font-family:    var(--f-disp);
  font-size:      28px;
  font-weight:    700;
  color:          var(--deep);
  letter-spacing: .01em;
  line-height:    1.1;
}

.kpi-sub {
  font-size:   12px;
  color:       var(--text-muted);
  margin-top:  5px;
}

/* ── STATUS BADGES ──────────────────────────────────────────────────────── */
.status-badge {
  display:       inline-block;
  padding:       3px 10px;
  border-radius: var(--radius-pill);
  font-size:     11.5px;
  font-weight:   600;
  letter-spacing: .03em;
  white-space:   nowrap;
  font-family:   var(--f-text);
}
.s-ok  { background: rgba(0,133,138,.1);  color: var(--teal-ink); }
.s-low { background: rgba(212,147,10,.12); color: #8A6000; }
.s-out { background: rgba(224,90,58,.12); color: var(--goji); }
.s-pos { background: rgba(0,133,138,.1);  color: var(--teal-ink); }
.s-neg { background: rgba(224,90,58,.12); color: var(--goji); }
.s-neu { background: rgba(94,91,85,.1);    color: var(--muted); }

/* ── PROGRESS TRACK ─────────────────────────────────────────────────────── */
.prog-track {
  height:        5px;
  background:    var(--line);
  border-radius: 3px;
  overflow:      hidden;
  margin-top:    7px;
}
.prog-fill {
  height:        100%;
  border-radius: 3px;
  background:    var(--teal);
  transition:    width .3s ease;
}
.prog-fill.blue   { background: var(--matcha); }
.prog-fill.orange { background: var(--warning); }
.prog-fill.red    { background: var(--goji); }

/* ── TABLES ─────────────────────────────────────────────────────────────── */
.wb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-family: var(--f-text);
}

.wb-table th {
  background:      var(--bg);
  color:           var(--muted);
  font-family:     var(--f-disp);
  font-size:       11px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .1em;
  padding:         10px 14px;
  text-align:      left;
  border-bottom:   1px solid var(--line);
  white-space:     nowrap;
}

.wb-table td {
  padding:        11px 14px;
  border-bottom:  1px solid var(--line);
  vertical-align: middle;
  color:          var(--ink);
}

.wb-table tr:last-child td { border-bottom: none; }
.wb-table tr:hover td      { background: var(--bg-elevated); }

.wb-table tfoot td {
  background:    var(--bg);
  font-weight:   700;
  font-size:     13px;
  color:         var(--deep);
  border-top:    1px solid var(--line) !important;
  border-bottom: none !important;
}
.wb-table tfoot tr:hover td { background: var(--bg); }

/* Bootstrap table overrides — force light theme */
.table {
  color: var(--ink) !important;
  --bs-table-bg:          transparent !important;
  --bs-table-striped-bg:  transparent !important;
  --bs-table-hover-bg:    var(--bg-elevated) !important;
  --bs-table-border-color: var(--line) !important;
  --bs-table-color:       var(--ink) !important;
}
.table th {
  color:          var(--muted) !important;
  font-family:    var(--f-disp) !important;
  font-size:      11px !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-color:   var(--line) !important;
  padding:        10px 14px !important;
  background:     var(--bg) !important;
  white-space:    nowrap;
}
.table td {
  color:            var(--ink) !important;
  background:       transparent !important;
  border-color:     var(--line) !important;
  padding:          11px 14px !important;
  vertical-align:   middle !important;
  font-size:        13.5px;
}
.table tbody, .table thead, .table tfoot { background: transparent !important; }
.table-hover tbody tr:hover > td { background: var(--bg-elevated) !important; }

/* Overrides for muted text in tables */
.wb-table td.text-muted, .wb-table td .text-muted { color: var(--muted) !important; }
.text-muted { color: var(--text-muted) !important; }

/* ── SORTABLE HEADERS ───────────────────────────────────────────────────── */
.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable:hover { background: var(--bg-hover) !important; color: var(--deep) !important; }
.sortable.asc  .sort-icon::after { content: ' ▲'; color: var(--teal); }
.sortable.desc .sort-icon::after { content: ' ▼'; color: var(--teal); }
.sortable .sort-icon { opacity: .4; font-size: 9px; }
.sortable.asc .sort-icon, .sortable.desc .sort-icon { opacity: 1; }
.sort-ind { font-size: 9px; opacity: .45; margin-left: 3px; }

.wb-table th[style*="cursor"]:hover {
  background: var(--bg-hover) !important;
  color: var(--deep) !important;
}

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background:    #fff !important;
  border:        1px solid var(--line) !important;
  color:         var(--ink) !important;
  border-radius: var(--radius) !important;
  font-size:     13.5px !important;
  font-family:   var(--f-text) !important;
  height:        auto;
  padding:       9px 13px !important;
}

.form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }

.form-control:focus,
.form-select:focus {
  border-color: var(--teal) !important;
  box-shadow:   0 0 0 3px rgba(0,133,138,.15) !important;
  background:   #fff !important;
  outline:      none;
}

.form-label {
  color:         var(--ink);
  font-size:     13px;
  font-weight:   600;
  font-family:   var(--f-text);
  margin-bottom: 5px;
  display: block;
}

.form-text { color: var(--text-muted); font-size: 11.5px; }

.input-group-text {
  background:   var(--bg) !important;
  border:       1px solid var(--line) !important;
  color:        var(--muted) !important;
  font-family:  var(--f-text) !important;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn-wb-primary {
  background:    linear-gradient(135deg, var(--teal) 0%, var(--teal-ink) 100%);
  color:         #fff;
  font-family:   var(--f-disp);
  font-weight:   700;
  font-size:     14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border:        none;
  border-radius: var(--radius-pill);
  padding:       9px 22px;
  transition:    opacity .12s, transform .1s, box-shadow .12s;
  cursor: pointer;
  box-shadow:    0 2px 8px rgba(0,133,138,.25);
}
.btn-wb-primary:hover  {
  opacity: .92;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,133,138,.35);
}
.btn-wb-primary:active { transform: scale(.97); }

.btn-wb-secondary {
  background:    transparent;
  color:         var(--muted);
  border:        1px solid var(--line);
  border-radius: var(--radius-pill);
  padding:       9px 22px;
  font-family:   var(--f-disp);
  font-size:     14px;
  font-weight:   700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .12s;
}
.btn-wb-secondary:hover {
  background:    var(--mint);
  border-color:  var(--teal);
  color:         var(--teal-ink);
}

.btn-wb-danger {
  background:    transparent;
  color:         var(--goji);
  border:        1px solid rgba(224,90,58,.35);
  border-radius: var(--radius-pill);
  padding:       6px 14px;
  font-size:     12.5px;
  font-weight:   600;
  font-family:   var(--f-text);
  cursor: pointer;
  transition: all .12s;
}
.btn-wb-danger:hover {
  background: rgba(224,90,58,.08);
  border-color: var(--goji);
}

/* Bootstrap button overrides */
.btn-outline-secondary {
  color:        var(--muted) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-pill) !important;
  font-family:  var(--f-text) !important;
}
.btn-outline-secondary:hover {
  background:   var(--mint) !important;
  border-color: var(--teal) !important;
  color:        var(--teal-ink) !important;
}
.btn-outline-danger {
  color:        var(--goji) !important;
  border-color: rgba(224,90,58,.4) !important;
  border-radius: var(--radius-pill) !important;
}
.btn-outline-danger:hover {
  background: rgba(224,90,58,.08) !important;
  color:      var(--goji) !important;
}
.btn-warning {
  background:    var(--warning) !important;
  border:        none !important;
  color:         #fff !important;
  font-weight:   700 !important;
  border-radius: var(--radius-pill) !important;
}
.btn-secondary {
  background:    var(--bg) !important;
  border:        1px solid var(--line) !important;
  color:         var(--muted) !important;
  border-radius: var(--radius-pill) !important;
}
.btn-secondary:hover {
  background: var(--bg-hover) !important;
  color:      var(--deep) !important;
}
.btn-primary {
  background:    var(--teal) !important;
  border-color:  var(--teal) !important;
  color:         #fff !important;
  border-radius: var(--radius-pill) !important;
  font-weight:   600 !important;
}
.btn-primary:hover {
  background:    var(--teal-ink) !important;
  border-color:  var(--teal-ink) !important;
}
.btn-danger {
  background:    var(--goji) !important;
  border-color:  var(--goji) !important;
  color:         #fff !important;
  border-radius: var(--radius-pill) !important;
}
.btn-success {
  background:    var(--matcha) !important;
  border-color:  var(--matcha) !important;
  color:         #fff !important;
  border-radius: var(--radius-pill) !important;
}
.btn-sm {
  padding:       5px 14px !important;
  font-size:     12px !important;
  border-radius: var(--radius-pill) !important;
}

/* ── BADGES ─────────────────────────────────────────────────────────────── */
.badge-cat {
  padding:       3px 10px;
  border-radius: var(--radius-pill);
  font-size:     11.5px;
  font-weight:   600;
  letter-spacing: .02em;
  font-family:   var(--f-text);
}

.badge-kafa     { background: rgba(0,133,138,.12);  color: var(--teal-ink); }
.badge-bar      { background: rgba(122,154,58,.12); color: #4A6B1A; }
.badge-dorucak  { background: rgba(212,147,10,.12); color: #7A5500; }
.badge-caj      { background: rgba(0,133,138,.1);   color: var(--teal-ink); }
.badge-sok      { background: rgba(224,90,58,.1);   color: var(--goji); }
.badge-merch    { background: rgba(75,46,36,.1);    color: var(--kakao); }
.badge-flasir   { background: rgba(43,159,171,.1);  color: var(--accent-cyan); }
.badge-shot     { background: rgba(224,90,58,.15);  color: var(--goji); }
.badge-default  { background: rgba(94,91,85,.1);    color: var(--muted); }

/* ── ALERTS ─────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius);
  border:        none;
  font-size:     13.5px;
  padding:       12px 18px;
  border-left:   3px solid;
  font-family:   var(--f-text);
}
.alert-success { background: rgba(0,133,138,.08); color: var(--teal-ink); border-color: var(--teal); }
.alert-danger  { background: rgba(224,90,58,.08); color: #B33A20;         border-color: var(--goji); }
.alert-warning { background: rgba(212,147,10,.08); color: #7A5500;        border-color: var(--warning); }
.alert-info    { background: rgba(0,133,138,.06); color: var(--teal-ink); border-color: var(--teal); }

/* ── MODALS ─────────────────────────────────────────────────────────────── */
.modal-content {
  background:    var(--bg-card);
  border:        1px solid var(--line);
  border-radius: var(--radius-xl);
  color:         var(--ink);
  box-shadow:    var(--shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--line);
  padding: 20px 24px 16px;
}

.modal-footer {
  border-top: 1px solid var(--line);
  padding: 16px 24px;
}

.modal-title {
  font-family:  var(--f-disp);
  font-weight:  700;
  font-size:    18px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:        var(--deep);
}

.modal-body { padding: 20px 24px; color: var(--ink); }

.btn-close {
  filter: none;
  opacity: .5;
}
.btn-close:hover { opacity: .8 !important; }

/* ── TABS ───────────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--line) !important;
  gap: 2px;
}

.nav-tabs .nav-link {
  color:         var(--muted) !important;
  border:        none !important;
  background:    transparent !important;
  padding:       10px 18px !important;
  font-family:   var(--f-disp) !important;
  font-size:     14px !important;
  font-weight:   700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  border-bottom: 2px solid transparent !important;
  transition:    color .12s, border-color .12s;
}

.nav-tabs .nav-link:hover { color: var(--deep) !important; }

.nav-tabs .nav-link.active {
  color:         var(--teal) !important;
  border-bottom: 2px solid var(--teal) !important;
}

/* ── BADGES (Bootstrap) ─────────────────────────────────────────────────── */
.badge {
  font-weight:    600 !important;
  font-size:      11.5px !important;
  letter-spacing: .02em !important;
  border-radius:  var(--radius-pill) !important;
  padding:        3px 9px !important;
  font-family:    var(--f-text) !important;
}
.badge.bg-success { background-color: var(--teal) !important; }
.badge.bg-danger  { background-color: var(--goji) !important; }
.badge.bg-warning { background-color: var(--warning) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--bg-card2) !important; color: var(--muted) !important; }
.badge.bg-info    { background-color: var(--accent-cyan) !important; }
.badge.bg-primary { background-color: var(--teal) !important; }

/* ── PROFIT COLORS ──────────────────────────────────────────────────────── */
.profit-pos { color: var(--teal-ink) !important; font-weight: 700; }
.profit-neg { color: var(--goji) !important;     font-weight: 700; }

/* ── BOOTSTRAP UTILITY OVERRIDES ────────────────────────────────────────── */
.text-danger   { color: var(--goji)    !important; }
.text-warning  { color: var(--warning) !important; }
.text-success  { color: var(--teal)    !important; }
.text-info     { color: var(--accent-cyan) !important; }
.text-primary  { color: var(--teal)    !important; }
.text-secondary { color: var(--muted)  !important; }

/* Bootstrap dropdown styling */
.dropdown-menu {
  background:    var(--bg-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    var(--shadow-md) !important;
  padding:       6px !important;
}
.dropdown-item {
  color:         var(--muted) !important;
  border-radius: var(--radius) !important;
  padding:       8px 14px !important;
  font-size:     13.5px !important;
  font-family:   var(--f-text) !important;
  transition:    background .1s, color .1s;
}
.dropdown-item:hover, .dropdown-item:focus {
  background:    var(--mint) !important;
  color:         var(--deep) !important;
}
.dropdown-item.active {
  background:    var(--mint) !important;
  color:         var(--teal) !important;
}
.dropdown-divider { border-color: var(--line) !important; }

/* User dropdown button */
.btn-wb-secondary.dropdown-toggle {
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
  background: #fff !important;
}
.btn-wb-secondary.dropdown-toggle:hover {
  border-color: var(--teal) !important;
  color: var(--deep) !important;
  background: var(--mint) !important;
}

/* ── FILTER BAR ─────────────────────────────────────────────────────────── */
.filter-bar {
  background:    var(--bg-card);
  border:        1px solid var(--line);
  border-radius: var(--radius);
  padding:       12px 18px;
  margin-bottom: 16px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex-wrap:     wrap;
  box-shadow:    var(--shadow-sm);
}

/* ── SECTION HEADER ─────────────────────────────────────────────────────── */
.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}

.section-title {
  font-family:    var(--f-disp);
  font-size:      20px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--deep);
}

/* ── EMPTY STATE ────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding:    60px 20px;
  color:      var(--text-muted);
}
.empty-state i { font-size: 40px; margin-bottom: 14px; opacity: .2; display: block; color: var(--teal); }
.empty-state p { font-size: 14px; color: var(--muted); }

/* ── PROGRESS BAR ───────────────────────────────────────────────────────── */
.margin-bar  { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.margin-fill { height: 100%; background: var(--teal); border-radius: 3px; transition: width .3s; }

/* ── KASA ───────────────────────────────────────────────────────────────── */
.product-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.product-btn {
  background:    var(--bg-card);
  border:        1px solid var(--line);
  border-radius: var(--radius-lg);
  padding:       16px 12px;
  text-align:    center;
  cursor:        pointer;
  transition:    background .12s, border-color .12s, box-shadow .12s;
  color:         var(--ink);
  user-select:   none;
  position:      relative;
  box-shadow:    var(--shadow-sm);
}

.product-btn:hover {
  border-color: var(--teal);
  background:   var(--mint);
  box-shadow:   var(--shadow-md);
}

.product-btn.selected {
  border-color: var(--teal);
  background:   rgba(0,133,138,.1);
}

.product-btn .prod-name  { font-size: 12px; font-weight: 600; margin-bottom: 6px; line-height: 1.3; color: var(--ink); font-family: var(--f-text); }
.product-btn .prod-price { font-family: var(--f-disp); font-size: 18px; font-weight: 700; color: var(--teal); letter-spacing: .01em; }

.product-btn .prod-qty {
  position:   absolute; top: 6px; right: 8px;
  background: var(--teal); color: #fff;
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.cart-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 0;
  border-bottom:   1px solid var(--line);
}
.cart-item:last-child { border-bottom: none; }
.cart-total { font-family: var(--f-disp); font-size: 24px; font-weight: 700; color: var(--teal); text-align: right; padding-top: 14px; letter-spacing: .01em; }

.qty-control { display: flex; align-items: center; gap: 8px; }

.qty-btn {
  background:    var(--bg);
  border:        1px solid var(--line);
  color:         var(--muted);
  width: 30px; height: 30px;
  border-radius: 50%;
  display:       flex; align-items: center; justify-content: center;
  cursor:        pointer; font-size: 16px; line-height: 1;
  transition:    all .1s;
}
.qty-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--mint); }

/* ── COLLAPSED SIDEBAR ──────────────────────────────────────────────────── */
body.sidebar-collapsed .sidebar       { transform: translateX(-100%); }
body.sidebar-collapsed .main-content  { margin-left: 0; }

/* ── SCROLLBAR ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(94,91,85,.35); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(94,91,85,.6); }

/* ── CHARTS ─────────────────────────────────────────────────────────────── */
.chart-wrap    { position: relative; height: 240px; }
.chart-wrap-lg { position: relative; height: 320px; }

/* ── PERIOD BUTTONS ─────────────────────────────────────────────────────── */
.period-btns .btn { padding: 4px 13px; font-size: 12px; }

/* ── CODE ───────────────────────────────────────────────────────────────── */
code {
  background:    var(--bg-card2);
  border:        1px solid var(--line);
  border-radius: 5px;
  padding:       2px 7px;
  font-size:     12px;
  color:         var(--teal-ink);
  font-family:   "SF Mono", "Fira Code", monospace;
}

/* ── HEADINGS ───────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family:    var(--f-disp);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color:          var(--deep);
}
h4, h5, h6 {
  font-family: var(--f-disp);
  font-weight: 700;
  color: var(--deep);
}

/* ── MISC ───────────────────────────────────────────────────────────────── */
hr {
  border-color: var(--line) !important;
  opacity: 1 !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,61,62,.45);
  z-index: 99;
  cursor: pointer;
}
#sidebarOverlay.show { display: block; }

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 100;
    transition: transform .25s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .wb-card { padding: 14px; }
}

/* ── FLATPICKR LIGHT OVERRIDES ──────────────────────────────────────────── */
.flatpickr-calendar {
  background:    var(--bg-card) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    var(--shadow-md) !important;
  color:         var(--ink) !important;
}
.flatpickr-months {
  background: var(--deep) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.flatpickr-month, .flatpickr-prev-month, .flatpickr-next-month {
  color: #fff !important;
  fill: #fff !important;
}
.flatpickr-current-month { color: #fff !important; }
.flatpickr-day {
  color: var(--ink) !important;
  border-radius: var(--radius) !important;
}
.flatpickr-day:hover {
  background: var(--mint) !important;
  color: var(--deep) !important;
  border-color: var(--teal) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background:  var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
.flatpickr-day.inRange {
  background: var(--mint) !important;
  border-color: var(--mint) !important;
  color: var(--deep) !important;
}
.flatpickr-weekday { color: var(--muted) !important; }

/* ── PRINT ──────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .topbar-right, .alert, .btn, .dropdown,
  .chart-toggle-btn, canvas, #finInsightsCard, .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
  .page-content  { padding: 12px !important; }
  body, .wb-card, .kpi-card, .stat-card { background: #fff !important; color: var(--ink) !important; }
  .kpi-label, .kpi-sub, .stat-sub { color: var(--muted) !important; }
  .kpi-value, .stat-value { color: var(--deep) !important; }
  .wb-table thead th { background: var(--deep) !important; color: #fff !important; -webkit-print-color-adjust: exact; }
  .wb-table tbody tr:nth-child(even) { background: var(--bg) !important; -webkit-print-color-adjust: exact; }
  .wb-table tfoot td { background: var(--mint) !important; -webkit-print-color-adjust: exact; }
  .kpi-card, .stat-card { border: 1px solid var(--line) !important; box-shadow: none !important; break-inside: avoid; }
  .row { break-inside: avoid; }
  a { text-decoration: none !important; color: inherit !important; }
  @page { margin: 1.5cm; size: A4 landscape; }
}

/* ── DARK THEME OVERRIDE ────────────────────────────────────────────────── */
/* Applied via data-theme="dark" on <html> element                          */
[data-theme="dark"] {
  --bg:           #000000;
  --bg-card:      #1c1c1e;
  --bg-card2:     #2c2c2e;
  --bg-hover:     #3a3a3c;
  --bg-elevated:  #3a3a3c;

  --deep:         #e4f3f2;   /* inverted — light text on dark */
  --teal:         #5ac8d8;   /* lighter teal for dark bg */
  --teal-ink:     #64d2e0;
  --mint:         rgba(90,200,216,.12);
  --matcha:       #86d958;
  --kakao:        #e6bba8;
  --goji:         #ff6b52;

  --ink:          rgba(255,255,255,.92);
  --muted:        rgba(235,235,245,.6);
  --text-muted:   rgba(235,235,245,.3);
  --text:         rgba(255,255,255,.92);
  --text-secondary: rgba(235,235,245,.6);

  --line:         rgba(84,84,88,.55);
  --border:       rgba(84,84,88,.55);
  --border-light: rgba(84,84,88,.85);

  --accent:       #5ac8d8;
  --accent2:      #86d958;
  --accent3:      #bf5af2;
  --danger:       #ff6b52;
  --warning:      #ff9f0a;
  --success:      #86d958;
  --accent-cyan:  #64d2ff;
  --accent-pink:  #ff375f;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md:    0 4px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:    0 8px 30px rgba(0,0,0,.55);
}

/* Dark sidebar — deep teal postaje tamno, ne ostaje isti */
[data-theme="dark"] .sidebar {
  background: rgba(28,28,30,.95);
  box-shadow: 2px 0 16px rgba(0,0,0,.5);
}
[data-theme="dark"] .sidebar-logo {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
[data-theme="dark"] .sidebar-nav .nav-link {
  color: rgba(235,235,245,.65);
}
[data-theme="dark"] .sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,.06);
  color: rgba(235,235,245,.95);
}
[data-theme="dark"] .sidebar-nav .nav-link.active {
  background: rgba(90,200,216,.14);
  color: #5ac8d8;
}
[data-theme="dark"] .nav-group-toggle {
  color: rgba(235,235,245,.65);
}
[data-theme="dark"] .nav-group-toggle:hover {
  background: rgba(255,255,255,.06);
  color: rgba(235,235,245,.92);
}
[data-theme="dark"] .nav-group.open > .nav-group-toggle {
  color: rgba(235,235,245,.9);
}
[data-theme="dark"] .sidebar-footer {
  color: rgba(235,235,245,.25);
}

/* Dark topbar */
[data-theme="dark"] .topbar {
  background: rgba(28,28,30,.9);
  border-bottom-color: rgba(84,84,88,.55);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  backdrop-filter: blur(20px);
}
[data-theme="dark"] .topbar-title { color: rgba(255,255,255,.92); }
[data-theme="dark"] .sidebar-toggle {
  border-color: rgba(84,84,88,.55);
  color: rgba(235,235,245,.5);
}
[data-theme="dark"] .sidebar-toggle:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(84,84,88,.85);
  color: rgba(235,235,245,.9);
}

/* Dark form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,.85) !important;
  color: rgba(255,255,255,.92) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: #3a3a3c !important;
  border-color: #5ac8d8 !important;
  box-shadow: 0 0 0 3px rgba(90,200,216,.18) !important;
}
[data-theme="dark"] .input-group-text {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,.85) !important;
  color: rgba(235,235,245,.4) !important;
}

/* Dark buttons */
[data-theme="dark"] .btn-wb-primary {
  background: linear-gradient(135deg, #5ac8d8 0%, #3a9fb0 100%);
  color: #000;
  box-shadow: 0 2px 8px rgba(90,200,216,.25);
}
[data-theme="dark"] .btn-wb-secondary {
  color: rgba(235,235,245,.6);
  border-color: rgba(84,84,88,.85);
}
[data-theme="dark"] .btn-wb-secondary:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(84,84,88,.85);
  color: rgba(235,235,245,.9);
}
[data-theme="dark"] .btn-wb-secondary.dropdown-toggle {
  background: transparent !important;
  border-color: rgba(84,84,88,.85) !important;
  color: rgba(235,235,245,.65) !important;
}
[data-theme="dark"] .btn-secondary {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,.85) !important;
  color: rgba(235,235,245,.6) !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background: #3a3a3c !important;
  color: rgba(235,235,245,.9) !important;
}
[data-theme="dark"] .btn-outline-secondary {
  color: rgba(235,235,245,.6) !important;
  border-color: rgba(84,84,88,.85) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255,255,255,.06) !important;
  color: rgba(235,235,245,.9) !important;
}
[data-theme="dark"] .btn-primary {
  background: #5ac8d8 !important;
  border-color: #5ac8d8 !important;
  color: #000 !important;
}
[data-theme="dark"] .btn-close { filter: invert(1) opacity(.5); }

/* Dark modal */
[data-theme="dark"] .modal-content { background: #1c1c1e; }
[data-theme="dark"] .modal-title { color: rgba(255,255,255,.92); }

/* Dark dropdown */
[data-theme="dark"] .dropdown-menu {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,.85) !important;
}
[data-theme="dark"] .dropdown-item { color: rgba(235,235,245,.6) !important; }
[data-theme="dark"] .dropdown-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: rgba(235,235,245,.9) !important;
}

/* Dark filter bar */
[data-theme="dark"] .filter-bar {
  background: #1c1c1e;
  border-color: rgba(84,84,88,.55);
}

/* Dark alerts */
[data-theme="dark"] .alert-success { background: rgba(90,200,216,.1); color: #5ac8d8; border-color: #5ac8d8; }
[data-theme="dark"] .alert-danger  { background: rgba(255,107,82,.1);  color: #ff6b52; border-color: #ff6b52; }
[data-theme="dark"] .alert-warning { background: rgba(255,159,10,.1);  color: #fde68a; border-color: #ff9f0a; }
[data-theme="dark"] .alert-info    { background: rgba(90,200,216,.1);  color: #5ac8d8; border-color: #5ac8d8; }

/* Dark tabs */
[data-theme="dark"] .nav-tabs { border-bottom-color: rgba(84,84,88,.55) !important; }
[data-theme="dark"] .nav-tabs .nav-link { color: rgba(235,235,245,.5) !important; }
[data-theme="dark"] .nav-tabs .nav-link:hover { color: rgba(235,235,245,.9) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active {
  color: #5ac8d8 !important;
  border-bottom-color: #5ac8d8 !important;
}

/* Dark status badges */
[data-theme="dark"] .s-ok  { background: rgba(90,200,216,.15);  color: #5ac8d8; }
[data-theme="dark"] .s-pos { background: rgba(90,200,216,.15);  color: #5ac8d8; }
[data-theme="dark"] .s-low { background: rgba(255,159,10,.15);  color: #fde68a; }
[data-theme="dark"] .s-out { background: rgba(255,107,82,.15);  color: #ff6b52; }
[data-theme="dark"] .s-neg { background: rgba(255,107,82,.15);  color: #ff6b52; }
[data-theme="dark"] .s-neu { background: rgba(120,120,128,.18); color: #aeaeb2; }

/* Dark profit */
[data-theme="dark"] .profit-pos { color: #5ac8d8 !important; }
[data-theme="dark"] .profit-neg { color: #ff6b52 !important; }

/* Dark scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(84,84,88,.6); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(84,84,88,.9); }

/* Dark text utilities */
[data-theme="dark"] .text-muted { color: rgba(235,235,245,.3) !important; }
[data-theme="dark"] .text-secondary { color: rgba(235,235,245,.6) !important; }

/* Dark product buttons (kasa) */
[data-theme="dark"] .product-btn {
  background: #1c1c1e;
  border-color: rgba(84,84,88,.55);
  color: rgba(255,255,255,.92);
}
[data-theme="dark"] .product-btn:hover {
  background: rgba(90,200,216,.08);
  border-color: #5ac8d8;
}
[data-theme="dark"] .product-btn .prod-name { color: rgba(255,255,255,.92); }
[data-theme="dark"] .product-btn .prod-price { color: #5ac8d8; }
[data-theme="dark"] .qty-btn {
  background: #2c2c2e;
  border-color: rgba(84,84,88,.85);
  color: rgba(235,235,245,.5);
}

/* Dark flatpickr */
[data-theme="dark"] .flatpickr-calendar {
  background: #2c2c2e !important;
  border-color: rgba(84,84,88,.85) !important;
}
[data-theme="dark"] .flatpickr-day { color: rgba(255,255,255,.85) !important; }
[data-theme="dark"] .flatpickr-day:hover {
  background: rgba(90,200,216,.12) !important;
  color: #5ac8d8 !important;
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
  background: #5ac8d8 !important;
  border-color: #5ac8d8 !important;
  color: #000 !important;
}
[data-theme="dark"] .flatpickr-day.inRange {
  background: rgba(90,200,216,.14) !important;
  border-color: rgba(90,200,216,.14) !important;
  color: #5ac8d8 !important;
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────────────────────── */
.theme-toggle {
  background:    transparent;
  border:        1px solid var(--line);
  color:         var(--muted);
  width:         34px;
  height:        34px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  font-size:     15px;
  transition:    all .15s;
  flex-shrink:   0;
}
.theme-toggle:hover {
  border-color: var(--teal);
  color:        var(--teal);
  background:   var(--mint);
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(90,200,216,.1);
}