/* ============================================================
   Dashboard — shared layout, components, utilities
   Extracted from The Ideal Card HTML Prototype / dashboard.html
   ============================================================ */
*{box-sizing:border-box}

/* Global console SVG icon sizing — override with inline width/height where needed */
.dash svg{width:18px;height:18px;flex-shrink:0}

/* Shell */
.dash{display:flex;min-height:100vh;background:var(--bg-primary)}

/* ---------- Sidebar ---------- */
.dash-side{width:260px;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .3s}
.dash-side-logo{padding:24px 20px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.dash-side-logo img{height:24px}
.dash-side-logo span{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-dim);padding:2px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}

.dash-nav{flex:1;overflow-y:auto;padding:16px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent}
.dash-nav::-webkit-scrollbar{width:4px}
.dash-nav::-webkit-scrollbar-track{background:transparent}
.dash-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}
.dash-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.16)}
.dash-nav-group{margin-bottom:20px}
.dash-nav-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;padding:0 12px;margin-bottom:6px}
.dash-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left;font-family:var(--font);position:relative;text-decoration:none}
.dash-nav-item:hover{background:rgba(255,255,255,0.04);color:var(--text-primary)}
.dash-nav-item.active{background:var(--accent-dim);color:var(--accent-hover);font-weight:600}
.dash-nav-item.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.dash-nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:0.6}
.dash-nav-item.active svg{opacity:1;color:var(--accent)}
.dash-nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

.dash-side-footer{padding:16px;border-top:1px solid var(--border)}
.dash-user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s}
.dash-user:hover{background:rgba(255,255,255,0.04)}
.dash-user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.dash-user-name{font-size:13px;font-weight:600}
.dash-user-role{font-size:11px;color:var(--text-muted);margin-top:1px}
.dash-user-email{font-size:11px;color:var(--text-muted);margin-top:1px}

/* ---------- Main Content ---------- */
/* min-width:0 is load-bearing: without it a wide table makes this flex item grow
   past the viewport (page overflows right) instead of scrolling inside its card. */
.dash-main{flex:1;margin-left:260px;min-height:100vh;min-width:0;max-width:calc(100% - 260px)}
.dash-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--border);background:var(--bg-primary);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dash-topbar-left{display:flex;align-items:center;gap:12px}
.dash-topbar-left h1{font-size:22px;font-weight:800;letter-spacing:-0.02em}
.dash-topbar-left p{font-size:13px;color:var(--text-muted)}
.dash-topbar-right{display:flex;align-items:center;gap:12px}

.dash-search{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);min-width:220px;transition:all .2s;position:relative}
.dash-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.dash-search svg{width:16px;height:16px;color:var(--text-muted);flex-shrink:0}
.dash-search input{border:none;background:none;color:var(--text-primary);font-size:13px;outline:none;width:100%;font-family:var(--font)}
.dash-search input::placeholder{color:var(--text-muted)}

.dash-notif{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all .15s}
.dash-notif:hover{background:var(--bg-card);color:var(--text-primary)}
.dash-notif svg{width:18px;height:18px}
.dash-notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--bg-primary)}

.dash-notif-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:340px;max-height:400px;overflow-y:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(0,0,0,0.4);z-index:200;display:none}
.dash-notif-dropdown.open{display:block}
.dash-notif-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.dash-notif-dropdown-header h4{font-size:14px;font-weight:700}
.dash-notif-dropdown-header a{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600}
.dash-notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);transition:background .15s;cursor:pointer}
.dash-notif-item:last-child{border-bottom:none}
.dash-notif-item:hover{background:rgba(255,255,255,0.03)}
.dash-notif-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.dash-notif-item-dot.tap{background:#A855F7}
.dash-notif-item-dot.contact{background:#22d3ee}
.dash-notif-item-dot.order{background:#10B981}
.dash-notif-item-dot.system{background:#F59E0B}
.dash-notif-item-text{flex:1;font-size:13px;color:var(--text-secondary);line-height:1.4}
.dash-notif-item-time{font-size:11px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.dash-notif-item.read{opacity:.5}
.dash-notif-empty{padding:28px 18px;text-align:center;font-size:13px;color:var(--text-muted)}

.dash-content{padding:32px}

/* Mobile toggle */
.dash-mobile-toggle{display:none;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;align-items:center;justify-content:center}
.dash-mobile-toggle svg{width:18px;height:18px}

/* ---------- Stats Row ---------- */
.ds-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.ds-stat{padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s;cursor:default}
.ds-stat:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.25)}
.ds-stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}
.ds-stat-icon svg{width:20px;height:20px}
.ds-stat-icon.purple{background:rgba(168,85,247,0.12);color:#A855F7}
.ds-stat-icon.cyan{background:rgba(34,211,238,0.12);color:#22d3ee}
.ds-stat-icon.green{background:rgba(16,185,129,0.12);color:#10B981}
.ds-stat-icon.amber{background:rgba(245,158,11,0.12);color:#F59E0B}
.ds-stat-icon.pink{background:rgba(236,72,153,0.12);color:#ec4899}
.ds-stat-icon.red{background:rgba(244,63,94,0.12);color:#f43f5e}
.ds-stat-label{font-size:12px;color:var(--text-muted);font-weight:500;margin-bottom:4px;line-height:1.4}
.ds-stat-val{font-size:24px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1.2}
.ds-stat-change{font-size:12px;color:#10B981;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:4px;line-height:1.4;flex-wrap:wrap}
.ds-stat-change svg{width:14px;height:14px;flex-shrink:0}
.ds-stat-change.neg{color:var(--danger)}

/* ---------- Section Header ---------- */
.ds-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ds-section-header h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px}
.ds-section-header h2 svg{width:20px;height:20px;color:var(--accent)}

/* ---------- Table ---------- */
/* overflow-x:auto (not hidden): a too-wide table scrolls INSIDE the card with a
   visible scrollbar instead of widening .dash-main past the viewport. */
.ds-table-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow-x:auto;overflow-y:hidden;margin-bottom:28px}
.ds-table-wrap::-webkit-scrollbar{height:8px}
.ds-table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
[data-theme="light"] .ds-table-wrap::-webkit-scrollbar-thumb{background:rgba(103,68,218,.22)}
.ds-table{width:100%;border-collapse:collapse;font-size:13px}
.ds-table th{text-align:left;padding:14px 20px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.02)}
.ds-table td{padding:14px 20px;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.ds-table tr:last-child td{border-bottom:none}
.ds-table tr:hover td{background:rgba(255,255,255,0.035)}
.ds-table .name-cell{font-weight:600;color:var(--text-primary)}
.ds-table .email-cell{font-size:12px;color:var(--text-muted)}
.ds-table td.num{font-variant-numeric:tabular-nums;font-weight:600}

/* Status badges */
.status-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;display:inline-block}
.status-badge.active,.status-badge.delivered{background:rgba(16,185,129,0.12);color:#10B981}
.status-badge.pending{background:rgba(245,158,11,0.12);color:#F59E0B}
.status-badge.shipped{background:rgba(34,211,238,0.12);color:#22d3ee}
.status-badge.processing{background:rgba(168,85,247,0.12);color:#A855F7}
.status-badge.cancelled{background:rgba(239,68,68,0.12);color:#ef4444}

/* ---------- Cards Grid ---------- */
.ds-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}
.ds-nfc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .25s;cursor:pointer}
.ds-nfc-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,0.3)}
.ds-nfc-visual{aspect-ratio:1.586;margin:16px;border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.ds-nfc-visual.black{background:linear-gradient(145deg,#1a1a2e,#0a0a14,#16162a);border:1px solid rgba(255,255,255,0.08)}
.ds-nfc-visual.silver{background:linear-gradient(145deg,#c0c0c0,#8a8a9e,#b0b0c0);border:1px solid rgba(255,255,255,0.2)}
.ds-nfc-info{padding:0 16px 16px}
.ds-nfc-name{font-size:16px;font-weight:700;margin-bottom:4px}
.ds-nfc-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ds-nfc-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.ds-nfc-badge.bus{background:rgba(168,85,247,0.12);color:#A855F7}
.ds-nfc-badge.evt{background:rgba(34,211,238,0.12);color:#22d3ee}
.ds-nfc-uid{font-size:11px;font-family:'SF Mono','Fira Code',monospace;color:var(--text-muted);background:rgba(255,255,255,0.04);padding:2px 8px;border-radius:4px}
.ds-nfc-stats{display:flex;gap:16px;font-size:12px;color:var(--text-secondary);border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
.ds-nfc-stats span{display:flex;align-items:center;gap:4px}
.ds-nfc-stats svg{width:14px;height:14px;opacity:0.5}

/* ---------- Add Card Placeholder ---------- */
.ds-add-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;background:rgba(255,255,255,0.02);border:2px dashed rgba(255,255,255,0.08);border-radius:var(--radius-lg);cursor:pointer;transition:all .25s;gap:12px;color:var(--text-muted)}
.ds-add-card:hover{border-color:var(--accent-border);background:rgba(168,85,247,0.04);color:var(--accent)}
.ds-add-card svg{width:24px;height:24px}

/* ---------- Quick Actions ---------- */
.ds-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.ds-quick-action{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:14px}
.ds-quick-action:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.ds-quick-action-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-quick-action-icon svg{width:20px;height:20px}
.ds-quick-action-icon.purple{background:rgba(168,85,247,0.12);color:#A855F7}
.ds-quick-action-icon.cyan{background:rgba(34,211,238,0.12);color:#22d3ee}
.ds-quick-action-icon.green{background:rgba(16,185,129,0.12);color:#10B981}
.ds-quick-action-title{font-size:14px;font-weight:700}
.ds-quick-action-desc{font-size:12px;color:var(--text-muted);margin-top:2px}

/* ---------- Analytics Charts ---------- */
.ds-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.ds-chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.ds-chart-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.ds-chart-card .chart-sub{font-size:12px;color:var(--text-muted);margin-bottom:20px}
.ds-chart-placeholder{height:200px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.02);border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px}

/* ---------- Settings ---------- */
.ds-settings-grid{display:grid;grid-template-columns:200px 1fr;gap:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:28px}
.ds-settings-tabs{border-right:1px solid var(--border);padding:16px 0}
.ds-settings-tab{display:block;width:100%;padding:10px 20px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;border:none;background:none;text-align:left;font-family:var(--font);transition:all .15s}
.ds-settings-tab:hover{background:rgba(255,255,255,0.03);color:var(--text-primary)}
.ds-settings-tab.active{color:var(--accent);background:var(--accent-dim);font-weight:600}
.ds-settings-body{padding:24px 32px}
.ds-settings-body h3{font-size:16px;font-weight:700;margin-bottom:20px}
.ds-setting-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
.ds-setting-row:last-child{border-bottom:none}
.ds-setting-info h4{font-size:14px;font-weight:600;margin-bottom:2px}
.ds-setting-info p{font-size:12px;color:var(--text-muted)}

/* ---------- Empty State ---------- */
.ds-empty-state{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;min-height:400px;border:2px dashed var(--border);border-radius:var(--radius-lg);background:rgba(255,255,255,0.02);margin-bottom:28px}
.ds-empty-state.active{display:flex}
.ds-empty-state h3{font-size:20px;font-weight:800;margin-bottom:8px}
.ds-empty-state p{font-size:14px;color:var(--text-muted);max-width:360px;line-height:1.6;margin-bottom:24px}

/* ---------- Bio Editor ---------- */
.bio-field{margin-bottom:18px}
.bio-field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.bio-field input,.bio-field textarea,.bio-field select{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:13px;font-family:var(--font);transition:all .2s}
.bio-field input:focus,.bio-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

/* ---------- Toggle Switch ---------- */
.toggle{width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,0.1);border:none;cursor:pointer;position:relative;transition:all .2s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text-muted);transition:all .2s}
.toggle.on{background:var(--accent)}
.toggle.on::after{left:23px;background:#fff}

/* ---------- Content Cards ---------- */
.ds-content-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .25s}
.ds-content-card:hover{border-color:var(--border-hover)}

/* ---------- Light Mode Overrides ---------- */
[data-theme="light"] .dash-side{background:rgba(250,248,255,0.98);border-right-color:rgba(103,68,218,0.08)}
[data-theme="light"] .dash-topbar{background:rgba(250,248,255,0.95)}
[data-theme="light"] .ds-stat,[data-theme="light"] .ds-nfc-card,[data-theme="light"] .ds-table-wrap,
[data-theme="light"] .ds-chart-card,[data-theme="light"] .ds-settings-grid,[data-theme="light"] .ds-quick-action{background:rgba(255,255,255,0.8);border-color:rgba(103,68,218,0.08)}
[data-theme="light"] .ds-order-expand-inner{background:rgba(103,68,218,0.02)}
[data-theme="light"] .dash-notif-dropdown{background:rgba(255,255,255,0.98);border-color:rgba(103,68,218,0.08)}
[data-theme="light"] .dash-notif-item:hover{background:rgba(103,68,218,0.04)}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .ds-stats{grid-template-columns:repeat(2,1fr)}
  .ds-cards-grid{grid-template-columns:repeat(2,1fr)}
  .ds-chart-grid{grid-template-columns:1fr}
  .ds-quick-actions{grid-template-columns:repeat(2,1fr)}
  .dash-content{padding:24px}
  .dash-topbar{padding:16px 24px}
  .dash-search{min-width:160px}
}
@media(max-width:768px){
  .dash-side{transform:translateX(-100%)}
  .dash-side.open{transform:translateX(0)}
  .dash-main{margin-left:0;max-width:100%}
  .dash-mobile-toggle{display:flex}
  .ds-stats{grid-template-columns:1fr}
  .ds-cards-grid{grid-template-columns:1fr}
  .ds-settings-grid{grid-template-columns:1fr}
  .ds-settings-tabs{border-right:none;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;padding:0}
  .ds-quick-actions{grid-template-columns:1fr}
  .ds-table-wrap{overflow-x:auto}
  .ds-table{min-width:600px}
  .dash-content{padding:20px 16px}
  .dash-topbar{padding:14px 16px}
  .dash-topbar-left h1{font-size:18px}
  .dash-search{min-width:0;flex:1}
  .dash-notif-dropdown{min-width:280px;right:-40px}
}
@media(max-width:480px){
  .dash-content{padding:16px 12px}
  .dash-topbar{padding:12px;gap:8px}
  .dash-topbar-left h1{font-size:16px}
  .dash-topbar-left p{display:none}
  .dash-topbar-right{gap:8px}
  .dash-search{display:none}
  .ds-stats{gap:10px}
  .ds-stat{padding:14px}
  .ds-stat-val{font-size:20px}
}

/* ============================================================
   Auth Pages
   ============================================================ */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--bg-primary)}
.auth-card{width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px}
.auth-logo{display:block;text-align:center;margin-bottom:32px}

/* Auth form fields */
.auth-field{margin-bottom:18px}
.auth-field label,.auth-label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}

/* Override Breeze Tailwind input styles for dark theme */
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font) !important;
}
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus,
.auth-card input[type="text"]:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-dim) !important;
}
.auth-card input::placeholder {
  color: var(--text-muted) !important;
}

/* Label and error text color fix */
.auth-card label,
.auth-card .auth-label {
  color: var(--text-secondary) !important;
  font-size: 13px;
}
.auth-card a {
  color: var(--accent-hover);
}
.auth-card a:hover {
  color: var(--accent);
}

/* Primary button fix for auth */
.auth-card button[type="submit"],
.auth-card .btn-primary-auth {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .2s;
}
.auth-card button[type="submit"]:hover {
  opacity: .9;
}

/* Remember me checkbox */
.auth-card input[type="checkbox"] {
  accent-color: var(--accent);
}
.auth-card .text-gray-600 {
  color: var(--text-secondary) !important;
}

/* ============================================================
   Extended Status Badges
   ============================================================ */
.status-badge.inactive,.status-badge.draft{background:rgba(255,255,255,0.06);color:var(--text-muted)}
.status-badge.approved,.status-badge.published,.status-badge.qualified{background:rgba(16,185,129,0.12);color:#10B981}
.status-badge.rejected,.status-badge.cancelled,.status-badge.overdue{background:rgba(244,63,94,0.12);color:#f43f5e}
.status-badge.refunded,.status-badge.closed{background:rgba(245,158,11,0.12);color:#F59E0B}
.status-badge.paid{background:rgba(16,185,129,0.15);color:#10B981;font-weight:700}
.status-badge.open,.status-badge.new{background:rgba(103,68,218,0.12);color:#8B6DE8}
.status-badge.contacted,.status-badge.production{background:rgba(168,85,247,0.12);color:#A855F7}
.status-badge.converted{background:rgba(16,185,129,0.2);color:#34d399}
.status-badge.high{background:rgba(244,63,94,0.12);color:#f43f5e}
.status-badge.medium{background:rgba(245,158,11,0.12);color:#F59E0B}
.status-badge.low{background:rgba(34,211,238,0.12);color:#22d3ee}
.status-badge.affiliate{background:rgba(103,68,218,0.12);color:#8B6DE8}
.status-badge.reseller,.status-badge.agency{background:rgba(245,158,11,0.12);color:#F59E0B}
.status-badge.gold{background:rgba(245,158,11,0.15);color:#fbbf24}
.status-badge.silver{background:rgba(148,163,184,0.15);color:#94a3b8}
.status-badge.bronze{background:rgba(180,120,60,0.12);color:#cd7f32}
.status-badge.trialing{background:rgba(103,68,218,0.12);color:#8B6DE8}
.status-badge.past_due{background:rgba(244,63,94,0.12);color:#f43f5e}
.status-badge.active{background:rgba(16,185,129,0.12);color:#10B981}
.status-badge.pending{background:rgba(245,158,11,0.12);color:#F59E0B}
.status-badge.shipped,.status-badge.delivered{background:rgba(34,211,238,0.12);color:#22d3ee}

/* ============================================================
   Form controls used in Livewire filter toolbars
   ============================================================ */
.ds-select{padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:var(--font);outline:none;cursor:pointer;transition:border-color .2s;min-width:130px}
.ds-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.ds-select option{background:var(--bg-tertiary);color:var(--text-primary)}
[data-theme="light"] .ds-select{background:#fff;border-color:rgba(103,68,218,0.15)}
[data-theme="light"] .ds-select option{background:#fff}

input[type="date"].ds-select{color-scheme:dark}
[data-theme="light"] input[type="date"].ds-select{color-scheme:light}

/* ============================================================
   Button size variants
   ============================================================ */
.btn-sm{padding:7px 14px !important;font-size:12px !important;border-radius:var(--radius-sm) !important}
.btn-xs{padding:4px 10px !important;font-size:11px !important;border-radius:6px !important}

/* ============================================================
   Flash / alert messages
   ============================================================ */
.ds-alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.ds-alert-success{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.25);color:#34d399}
.ds-alert-error{background:rgba(244,63,94,0.12);border:1px solid rgba(244,63,94,0.25);color:#fb7185}
.ds-alert-warn{background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.25);color:#fbbf24}
.ds-alert-info{background:rgba(103,68,218,0.12);border:1px solid rgba(103,68,218,0.25);color:#8B6DE8}

/* ============================================================
   Filter toolbar
   ============================================================ */
.ds-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px}
.ds-toolbar-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ============================================================
   Modal
   ============================================================ */
.ds-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.ds-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,0.5)}
.ds-modal.ds-modal-lg{max-width:720px}
.ds-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.ds-modal-header h3{font-size:16px;font-weight:700}
.ds-modal-close{width:32px;height:32px;border-radius:var(--radius-sm);border:none;background:var(--bg-card);color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ds-modal-close:hover{background:rgba(255,255,255,0.08);color:var(--text-primary)}
.ds-modal-body{padding:24px}
.ds-modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border)}

/* Modal form field helpers */
.ds-field{margin-bottom:16px}
.ds-field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ds-field input,.ds-field textarea,.ds-field select{width:100%;padding:9px 13px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:var(--font);transition:border-color .2s;box-sizing:border-box}
.ds-field input:focus,.ds-field textarea:focus,.ds-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.ds-field textarea{resize:vertical;min-height:80px;line-height:1.5}
.ds-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ds-field-error{font-size:11px;color:#f43f5e;margin-top:4px}

/* Checkboxes/radios — brand accent so the checked state is actually visible
   (default rendering showed an all-white box across the admin section). */
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}
.ds-field input[type="checkbox"],.ds-field input[type="radio"]{width:auto;height:16px;flex:none;accent-color:var(--accent)}

/* Inline button spinner for wire:loading feedback. Inherits the button's text
   colour via currentColor, so it works on primary buttons and status badges alike. */
.ds-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:ds-spin .6s linear infinite;vertical-align:-2px}
.ds-spinner-sm{width:12px;height:12px}
@keyframes ds-spin{to{transform:rotate(360deg)}}

[data-theme="light"] .ds-modal{background:#fff}
[data-theme="light"] .ds-field input:not([type="checkbox"]):not([type="radio"]),[data-theme="light"] .ds-field textarea,[data-theme="light"] .ds-field select{background:#f8f7ff;border-color:rgba(103,68,218,0.15);color:#1a1a2e}

/* ============================================================
   Inline loading indicator for Livewire
   ============================================================ */
[wire\:loading]{opacity:.6;pointer-events:none}

/* ============================================================
   Pagination — override default Tailwind pagination to match DS
   ============================================================ */
nav[aria-label="Pagination Navigation"]{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:13px;color:var(--text-muted)}
nav[aria-label="Pagination Navigation"] span[aria-current="page"]>span{background:var(--accent);color:#fff;border-radius:var(--radius-sm);padding:5px 11px;font-weight:700}
nav[aria-label="Pagination Navigation"] span>span,nav[aria-label="Pagination Navigation"] a{padding:5px 11px;border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text-secondary);transition:all .15s;display:inline-block;margin:0 2px}
nav[aria-label="Pagination Navigation"] a:hover{background:var(--bg-card);border-color:var(--accent);color:var(--accent)}

/* ============================================================
   Table action button strip
   ============================================================ */
.ds-row-actions{display:flex;gap:6px;align-items:center}
.ds-row-actions .btn{padding:4px 10px;font-size:11px;border-radius:6px}

/* ============================================================
   Primary / Secondary / Danger Buttons
   ============================================================ */
.ds-btn-primary{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s;text-decoration:none;line-height:1}
.ds-btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(103,68,218,0.35)}
.ds-btn-primary svg{width:14px;height:14px;flex-shrink:0}
.ds-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);border:1px solid var(--border);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s;text-decoration:none;line-height:1}
.ds-btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.ds-btn-secondary svg{width:14px;height:14px;flex-shrink:0}
.ds-btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);background:rgba(244,63,94,0.1);color:#fb7185;border:1px solid rgba(244,63,94,0.2);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .2s;text-decoration:none;line-height:1}
.ds-btn-danger:hover{background:rgba(244,63,94,0.2);border-color:rgba(244,63,94,0.4)}
.ds-btn-danger svg{width:14px;height:14px;flex-shrink:0}

[data-theme="light"] .ds-btn-secondary{border-color:rgba(103,68,218,0.2)}
[data-theme="light"] .ds-btn-secondary:hover{border-color:var(--accent);background:var(--accent-dim)}

/* ============================================================
   Filter Bar & Pills  (dt-filter-*)
   ============================================================ */
.dt-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.dt-filter-pill{padding:6px 16px;border-radius:100px;font-size:13px;font-weight:600;color:var(--text-secondary);border:1px solid var(--border);background:transparent;cursor:pointer;transition:all .2s;font-family:var(--font);line-height:1.4;white-space:nowrap}
.dt-filter-pill:hover{border-color:var(--border-hover);color:var(--text-primary)}
.dt-filter-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.dt-filter-sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0;align-self:center}
.dt-filter-count{font-size:12px;color:var(--text-muted);font-weight:500;white-space:nowrap}

[data-theme="light"] .dt-filter-pill{border-color:rgba(103,68,218,0.15);color:var(--text-secondary)}
[data-theme="light"] .dt-filter-pill:hover{border-color:rgba(103,68,218,0.3)}

/* ============================================================
   Product Table Cells  (pt-*)
   ============================================================ */
.pt-product-cell{display:flex;align-items:center;gap:12px}
.pt-color-swatch{width:36px;height:36px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.08)}
.pt-color-swatch svg{display:none}
.pt-product-name{font-weight:600;color:var(--text-primary);font-size:13px;line-height:1.3}
.pt-product-desc{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.4;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-stock-bar{width:52px;height:5px;border-radius:3px;background:rgba(255,255,255,0.08);overflow:hidden;margin-top:5px;display:block}
.pt-stock-fill{height:100%;border-radius:3px;transition:width .4s ease}
.pt-badge-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pt-actions{display:flex;gap:4px;align-items:center}
.pt-action{width:30px;height:30px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;text-decoration:none;flex-shrink:0}
.pt-action:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.pt-action svg{width:14px;height:14px;flex-shrink:0}

[data-theme="light"] .pt-color-swatch{border-color:rgba(0,0,0,0.1)}
[data-theme="light"] .pt-stock-bar{background:rgba(0,0,0,0.08)}
[data-theme="light"] .pt-action{border-color:rgba(103,68,218,0.15)}
[data-theme="light"] .pt-action:hover{border-color:var(--accent);background:var(--accent-dim)}