/* ============================================================
   CKS Supplier Portal — Weightless Precision
   Fonts: Instrument Sans (headings) · Karla (body/UI)
   Palette: White · Violet #6E56CF · Near-white · Soft grays
   ============================================================ */

:root {
  /* Layout */
  --sidebar-w: 232px;

  /* Sidebar — pure white */
  --sidebar-bg:         #FFFFFF;
  --sidebar-border:     rgba(0,0,0,0.06);
  --sidebar-text:       #6B7280;
  --sidebar-hover-bg:   #F5F3FF;
  --sidebar-active-bg:  #EDE9FE;
  --sidebar-active-txt: #5B45B0;

  /* Content */
  --body-bg:            #F7F7F8;
  --card-bg:            #FFFFFF;
  --card-border:        rgba(0,0,0,0.07);
  --card-shadow:        0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --card-shadow-hover:  0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.07);

  /* Fonts */
  --font-display: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-body:    'Karla', 'Helvetica Neue', sans-serif;

  /* Violet accent */
  --violet:       #6E56CF;
  --violet-dark:  #5B45B0;
  --violet-light: #7C6BD9;
  --violet-tint:  #F4F2FF;
  --violet-soft:  #EDE9FE;
  --violet-dim:   rgba(110,86,207,0.08);

  /* Semantic */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --border:         rgba(0,0,0,0.07);

  --success:     #15803D;
  --success-bg:  #F0FDF4;
  --success-bdr: rgba(21,128,61,0.18);
  --warning:     #B45309;
  --warning-bg:  #FFFBEB;
  --warning-bdr: rgba(180,83,9,0.18);
  --danger:      #B91C1C;
  --danger-bg:   #FEF2F2;
  --danger-bdr:  rgba(185,28,28,0.18);
  --info:        #1D4ED8;
  --info-bg:     #EFF6FF;
  --info-bdr:    rgba(29,78,216,0.18);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size:   14px;
  background:  var(--body-bg);
  color:       var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar           { width: 4px; height: 4px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: #DDD6FE; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ── Layout ──────────────────────────────────────────────── */
.app-wrapper  { display: flex; min-height: 100vh; }

.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 40px 44px;
  min-height: 100vh;
  animation: fadeUp .45s cubic-bezier(.22,1,.36,1) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--sidebar-border);
}

.brand-logo {
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 99px;
  letter-spacing: .03em;
}

.brand-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -.01em;
}

/* User strip */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}

.user-avatar {
  width: 30px; height: 30px;
  border-radius: 99px;
  background: var(--violet-soft);
  border: 1.5px solid var(--violet-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--violet);
  font-size: 13px;
  flex-shrink: 0;
}

.admin-avatar {
  background: #F3F4F6;
  border-color: #E5E7EB;
  color: var(--text-muted);
}

.user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.user-sub {
  font-size: 11px;
  color: var(--violet);
  letter-spacing: .01em;
  margin-top: 1px;
}

/* Nav */
.sidebar-nav    { flex: 1; padding: 10px 10px; }

.nav-section {
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 8px 5px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 99px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 1px;
  position: relative;
  transition: background .15s, color .15s;
  cursor: pointer;
}

.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--violet);
}

.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-txt);
}

.nav-item i   { font-size: 15px; width: 17px; flex-shrink: 0; }
.nav-item span { flex: 1; }

/* Stagger nav in */
.sidebar-nav > .nav-item:nth-child(1)  { animation: navIn .4s .04s both; }
.sidebar-nav > .nav-item:nth-child(2)  { animation: navIn .4s .08s both; }
.sidebar-nav > .nav-item:nth-child(3)  { animation: navIn .4s .12s both; }
.sidebar-nav > .nav-item:nth-child(4)  { animation: navIn .4s .16s both; }
.sidebar-nav > .nav-item:nth-child(5)  { animation: navIn .4s .20s both; }
.sidebar-nav > .nav-item:nth-child(6)  { animation: navIn .4s .24s both; }

@keyframes navIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Dropdown */
.nav-dropdown-menu      { display: none; padding-left: 6px; margin-top: 1px; }
.nav-dropdown-menu.show { display: block; }

.nav-item.nav-sub {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px 6px 28px;
  color: var(--text-muted);
  border-radius: 99px;
}

.nav-item.nav-sub.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-txt); }
.nav-item.nav-sub:hover  { background: var(--sidebar-hover-bg); color: var(--violet); }

.nav-dropdown-toggle.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-txt); }
.nav-chevron { font-size: 11px; transition: transform .2s; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); }

/* Sidebar footer */
.sidebar-footer {
  padding: 10px 10px 16px;
  border-top: 1px solid var(--sidebar-border);
}

/* ── Page header ─────────────────────────────────────────── */
.page-header         { margin-bottom: 28px; }

.page-header h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.page-header p {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background:    var(--card-bg);
  border:        1px solid var(--card-border);
  border-radius: 12px;
  padding:       22px 24px;
  margin-bottom: 16px;
  box-shadow:    var(--card-shadow);
  transition:    box-shadow .2s;
  animation:     cardIn .4s cubic-bezier(.22,1,.36,1) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card:nth-child(1) { animation-delay: .04s; }
.card:nth-child(2) { animation-delay: .08s; }
.card:nth-child(3) { animation-delay: .12s; }
.card:nth-child(4) { animation-delay: .16s; }
.card:nth-child(5) { animation-delay: .20s; }

.card:hover { box-shadow: var(--card-shadow-hover); }

.card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.stat-card {
  background:    var(--card-bg);
  border:        1px solid var(--card-border);
  border-radius: 12px;
  padding:       18px 20px;
  box-shadow:    var(--card-shadow);
  animation:     cardIn .4s cubic-bezier(.22,1,.36,1) both;
  transition:    transform .2s, box-shadow .2s;
  position:      relative;
  overflow:      hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--violet);
  opacity: 0;
  transition: opacity .2s;
}

.stat-card:hover::before { opacity: 1; }

.stat-card:nth-child(1) { animation-delay: .03s; }
.stat-card:nth-child(2) { animation-delay: .06s; }
.stat-card:nth-child(3) { animation-delay: .09s; }
.stat-card:nth-child(4) { animation-delay: .12s; }

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

.stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}

.stat-value.blue   { color: var(--violet); }
.stat-value.green  { color: var(--success); }
.stat-value.amber  { color: var(--warning); }
.stat-value.red    { color: var(--danger); }

/* ── Form elements ───────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  letter-spacing: -.01em;
}

/* Linear-style: flat bottom border only on focus, full border at rest */
.form-control,
.form-select {
  width:         100%;
  background:    var(--card-bg);
  border:        1px solid var(--border);
  border-radius: 8px;
  font-family:   var(--font-body);
  font-size:     13px;
  color:         var(--text-primary);
  padding:       8px 12px;
  transition:    border-color .15s, box-shadow .15s;
  appearance:    none;
}

.form-control:focus,
.form-select:focus {
  outline:      none;
  border-color: var(--violet);
  box-shadow:   0 0 0 3px rgba(110,86,207,0.12);
}

.form-control[readonly],
.form-control:disabled {
  background: #FAFAFA;
  color: var(--text-muted);
  cursor: default;
}

.form-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Form section divider */
.form-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--violet);
  border-bottom: 1px solid var(--violet-soft);
  padding-bottom: 6px;
  margin: 22px 0 14px;
}

/* ── Input group ─────────────────────────────────────────── */
.input-group-text {
  background:  #FAFAFA;
  border:      1px solid var(--border);
  font-family: var(--font-body);
  font-size:   13px;
  color:       var(--text-muted);
  padding:     8px 12px;
}

/* ── Buttons — all pill shaped ──────────────────────────── */
.btn-primary-cks {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--violet);
  color:         #fff;
  border:        none;
  padding:       9px 20px;
  border-radius: 99px;
  font-family:   var(--font-body);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s, transform .1s, box-shadow .15s;
  box-shadow:    0 1px 2px rgba(110,86,207,0.2), 0 2px 8px rgba(110,86,207,0.15);
}

.btn-primary-cks:hover {
  background:  var(--violet-dark);
  transform:   translateY(-1px);
  box-shadow:  0 2px 4px rgba(110,86,207,0.25), 0 4px 16px rgba(110,86,207,0.2);
}

.btn-primary-cks:active { transform: scale(.98); }

.btn-outline-cks {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    transparent;
  color:         var(--text-secondary);
  border:        1px solid var(--border);
  padding:       8px 18px;
  border-radius: 99px;
  font-family:   var(--font-body);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    all .15s;
}

.btn-outline-cks:hover {
  border-color: var(--violet);
  color:        var(--violet);
  background:   var(--violet-tint);
}

/* Bootstrap button overrides — all pill */
.btn {
  font-family:   var(--font-body);
  font-size:     12px;
  font-weight:   600;
  border-radius: 99px;
  transition:    all .15s;
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
}

.btn:active { transform: scale(.97); }

.btn-primary {
  background:   var(--violet);
  border-color: var(--violet);
  box-shadow:   0 1px 2px rgba(110,86,207,0.2);
}
.btn-primary:hover {
  background:   var(--violet-dark);
  border-color: var(--violet-dark);
}

.btn-success { background: var(--success); border-color: var(--success); }
.btn-danger  { background: var(--danger);  border-color: var(--danger);  }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }

.btn-outline-primary {
  color: var(--violet);
  border-color: var(--violet-soft);
  background: var(--violet-tint);
}
.btn-outline-primary:hover {
  background: var(--violet-soft);
  color: var(--violet-dark);
  border-color: var(--violet-soft);
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: #F3F4F6;
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-outline-warning {
  color: var(--warning);
  border-color: rgba(180,83,9,0.25);
  background: var(--warning-bg);
}

.btn-outline-danger {
  color: var(--danger);
  border-color: rgba(185,28,28,0.25);
  background: var(--danger-bg);
}

.btn-outline-success {
  color: var(--success);
  border-color: rgba(21,128,61,0.25);
  background: var(--success-bg);
}

/* ── Status badges — pill shaped ────────────────────────── */
.status-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       3px 10px;
  border-radius: 99px;
  font-size:     11px;
  font-weight:   600;
  letter-spacing:.02em;
}

.badge-draft {
  background: #F3F4F6;
  color: #6B7280;
}
.badge-pending {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-bdr);
  animation: pendingPulse 3s ease-in-out infinite;
}
.badge-approved {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-bdr);
}
.badge-rejected {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-bdr);
}

@keyframes pendingPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .75; }
}

/* ── Line item tables ────────────────────────────────────── */
.item-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.item-table th {
  background:    #FAFAFA;
  padding:       8px 10px;
  text-align:    left;
  font-size:     10px;
  font-weight:   700;
  letter-spacing:.06em;
  text-transform: uppercase;
  color:         var(--text-muted);
  border:        1px solid var(--border);
}

.item-table td {
  padding:     5px 6px;
  border:      1px solid var(--border);
  background:  var(--card-bg);
  transition:  background .12s;
  vertical-align: middle;
}

.item-table tr:hover td { background: var(--violet-tint); }

.item-table td input,
.item-table td select {
  width:      100%;
  border:     none;
  background: transparent;
  font-family:var(--font-body);
  font-size:  13px;
  padding:    4px;
  outline:    none;
  color:      var(--text-primary);
}

.item-table td input:focus { background: rgba(110,86,207,0.05); border-radius: 4px; }

.item-table .btn-del {
  background: none;
  border: none;
  color: #D1D5DB;
  cursor: pointer;
  font-size: 15px;
  padding: 0 3px;
  transition: color .15s;
}
.item-table .btn-del:hover { color: var(--danger); }

.add-row-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-family:   var(--font-body);
  font-size:     12px;
  font-weight:   600;
  color:         var(--violet);
  background:    var(--violet-tint);
  border:        1px dashed rgba(110,86,207,0.3);
  border-radius: 99px;
  padding:       6px 16px;
  cursor:        pointer;
  margin-top:    10px;
  transition:    all .15s;
}

.add-row-btn:hover {
  background:   var(--violet-soft);
  border-color: var(--violet);
}

/* ── DataTable overrides ─────────────────────────────────── */
.table {
  font-family: var(--font-body);
  font-size:   13px;
}

.table > :not(caption) > * > * {
  padding: 10px 12px;
  border-color: var(--border);
}

.table-light th {
  background:    #FAFAFA !important;
  font-size:     10px;
  font-weight:   700;
  letter-spacing:.06em;
  text-transform: uppercase;
  color:         var(--text-muted) !important;
  border-color:  var(--border) !important;
}

.table-hover > tbody > tr:hover > * {
  background: var(--violet-tint);
}

.table-bordered > :not(caption) > * > * { border-color: var(--border); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  font-family:   var(--font-body);
  font-size:     13px;
  border:        1px solid var(--border);
  border-radius: 99px;
  padding:       6px 14px;
  background:    var(--card-bg);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline:      none;
  border-color: var(--violet);
  box-shadow:   0 0 0 3px rgba(110,86,207,0.10);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: 12px; color: var(--text-muted); }

.page-link {
  font-family:  var(--font-body);
  font-size:    12px;
  color:        var(--violet);
  border-color: var(--border);
  border-radius: 99px !important;
  margin: 0 2px;
}
.page-item.active .page-link {
  background:   var(--violet);
  border-color: var(--violet);
}

/* ── Outlet grid ─────────────────────────────────────────── */
.outlet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.outlet-check {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    #FAFAFA;
  border:        1px solid var(--border);
  border-radius: 99px;
  padding:       5px 10px;
  font-size:     12px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all .15s;
  color:         var(--text-secondary);
}

.outlet-check:hover {
  border-color: var(--violet);
  background: var(--violet-tint);
  color: var(--violet);
}

.outlet-check input { cursor: pointer; accent-color: var(--violet); }

.outlet-check:has(input:checked) {
  background:   var(--violet-soft);
  border-color: var(--violet);
  color:        var(--violet-dark);
}

/* ── Alerts ──────────────────────────────────────────────── */
.alert-flash {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  border-radius: 12px;
  font-size:     13px;
  font-weight:   500;
  margin-bottom: 16px;
  animation:     alertIn .3s cubic-bezier(.22,1,.36,1) both;
}

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alert-success {
  background: var(--success-bg);
  color:      var(--success);
  border:     1px solid var(--success-bdr);
}

.alert-error {
  background: var(--danger-bg);
  color:      var(--danger);
  border:     1px solid var(--danger-bdr);
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-content {
  border:        1px solid var(--card-border);
  border-radius: 16px;
  box-shadow:    0 20px 60px rgba(0,0,0,0.15);
  font-family:   var(--font-body);
  background:    var(--card-bg);
}

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

.modal-title {
  font-family:   var(--font-display);
  font-size:     16px;
  font-weight:   600;
  color:         var(--text-primary);
  letter-spacing: -.02em;
}

.modal-body   { padding: 20px 24px; }
.modal-footer {
  border-top: 1px solid var(--border);
  padding: 14px 24px;
}

/* ── Badge overrides ─────────────────────────────────────── */
.badge {
  font-family:   var(--font-body);
  font-size:     11px;
  font-weight:   600;
  border-radius: 99px;
  padding:       3px 10px;
}

.bg-primary  { background: var(--violet)  !important; }
.bg-success  { background: var(--success) !important; }
.bg-danger   { background: var(--danger)  !important; }
.bg-warning  { background: var(--warning) !important; }

.bg-warning.text-dark { color: #fff !important; }

/* ── Code ────────────────────────────────────────────────── */
code {
  font-size:     12px;
  background:    #F3F4F6;
  color:         var(--violet);
  padding:       1px 6px;
  border-radius: 5px;
  border:        1px solid #E5E7EB;
}

/* ── Login page ──────────────────────────────────────────── */
.login-page-bg {
  min-height:      100vh;
  background:      #F5F3FF;
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  overflow:        hidden;
}

/* Soft violet geometric blobs */
.login-page-bg::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,86,207,0.12) 0%, transparent 70%);
  top: -150px; right: -100px;
  pointer-events: none;
}

.login-page-bg::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,86,207,0.08) 0%, transparent 70%);
  bottom: -80px; left: -60px;
  pointer-events: none;
}

.login-card {
  background:    #FFFFFF;
  border:        1px solid rgba(110,86,207,0.12);
  border-radius: 20px;
  padding:       44px 40px;
  width:         100%;
  max-width:     420px;
  position:      relative;
  z-index:       1;
  box-shadow:    0 4px 6px rgba(110,86,207,0.04), 0 20px 60px rgba(110,86,207,0.10);
  animation:     cardIn .5s cubic-bezier(.22,1,.36,1) both;
}

/* ── Admin-only field ────────────────────────────────────── */
.admin-field-wrapper::before {
  content:       '⚿  Admin only';
  display:       block;
  font-size:     10px;
  font-weight:   600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:         var(--warning);
  margin-bottom: 4px;
}

/* ── select custom arrow ─────────────────────────────────── */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; padding: 20px 16px; }
  .stat-grid    { grid-template-columns: 1fr 1fr; }
  .page-header h1 { font-size: 20px; }
}

/* ── Utilities ───────────────────────────────────────────── */
.text-muted    { color: var(--text-muted)  !important; }
.text-violet   { color: var(--violet)      !important; }
.border-violet { border-color: var(--violet) !important; }