/* ─────────────────────────────────────────────
   PrimSync Dashboard — Stylesheet
   ───────────────────────────────────────────── */

* { box-sizing: border-box; }

/* ── Utilities ── */
.no-scroll   { overflow: hidden; }
.chevron-open { transform: rotate(180deg); }

/* Logo theme switching */
.logo-light { display: none; }
.logo-dark  { display: block; }
body.light .logo-light { display: block; }
body.light .logo-dark  { display: none; }

body {
  background: #0d1117;
  color: #dde4f0;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #161b27; }
::-webkit-scrollbar-thumb { background: #2a3347; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #374160; }

/* ── Sidebar links ── */
.sidebar-link { transition: all 0.15s; }
.sidebar-link:hover { background: #1c2333; color: #dde4f0; }
.sidebar-link.active {
  background: rgba(79,142,247,0.12);
  color: #4f8ef7;
  border-left: 2px solid #4f8ef7;
}

/* ── Stat cards ── */
.stat-card { transition: transform 0.15s, border-color 0.15s; }
.stat-card:hover { transform: translateY(-2px); border-color: #374160; }

/* ── Badges ── */
.badge-blue   { background: rgba(79,142,247,0.12); color: #4f8ef7;  border: 1px solid rgba(79,142,247,0.25); }
.badge-green  { background: rgba(46,196,160,0.1);  color: #2ec4a0;  border: 1px solid rgba(46,196,160,0.25); }
.badge-amber  { background: rgba(232,131,79,0.1);  color: #e8834f;  border: 1px solid rgba(232,131,79,0.25); }
.badge-purple { background: rgba(155,114,240,0.1); color: #9b72f0;  border: 1px solid rgba(155,114,240,0.25); }
.badge-red    { background: rgba(239,68,68,0.1);   color: #f87171;  border: 1px solid rgba(239,68,68,0.25); }
.badge-muted  { background: rgba(107,122,153,0.12); color: #6b7a99; border: 1px solid rgba(107,122,153,0.2); }
body.light .badge-muted { background: rgba(100,116,139,0.1); color: #64748b; border-color: rgba(100,116,139,0.15); }

/* ── Progress bars ── */
.progress-bar  { height: 3px; border-radius: 99px; background: #2a3347; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; transition: width 1s ease; width: var(--w, 0%); }

/* ── Nav icons ── */
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.4s ease forwards; opacity: 0; }
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.10s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.20s; }
.delay-5 { animation-delay: 0.25s; }
.delay-6 { animation-delay: 0.30s; }

.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Table rows ── */
.table-row { transition: background 0.1s; }
.table-row:hover { background: #1c2333; }

/* ── Mobile sidebar overlay ── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 40; }
.sidebar-overlay.open { display: block; }

/* ── Submenus ── */
#orders-submenu,
#products-submenu,
#integrations-submenu { overflow: hidden; }

.submenu { display: none; }

.submenu.visible {
  display: block !important;
  animation: slideDown 0.2s ease forwards;
}

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

/* ── Responsive ── */
@media (max-width: 768px) {
  aside {
    position: fixed;
    left: -100%;
    top: 0; bottom: 0;
    z-index: 50;
    transition: left 0.25s ease;
    width: 300px !important;
  }
  aside.open { left: 0; }
  .main-wrap { width: 100% !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mid-grid   { grid-template-columns: 1fr !important; }
  .mid-grid .col-span-2 { grid-column: span 1 !important; }
  .footer-wrap  { display: none; }
  .header-title { display: none; }

  /* Sales Activity KPI — smaller on mobile */
  .sales-kpi-row { gap: 12px !important; }
  .sales-kpi-row .kpi-value { font-size: 18px !important; }

  /* Recent Orders — scrollable table */
  .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll-wrap table { white-space: nowrap; min-width: 640px; }

  /* Low Stock + Pending Receptions — full width stack */
  .bottom-grid { grid-template-columns: 1fr !important; }
  .bottom-grid .nowrap-label { white-space: nowrap; }

  /* Orders by Status + Stock Progress — full width stack */
  .charts-grid { grid-template-columns: 1fr !important; }


  /* Search — expandable overlay on mobile */
  .search-field.open {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;
    padding: 10px 12px;
    background: #0d1117;
    border-bottom: 1px solid #2a3347;
  }
  body.light .search-field.open {
    background: #ffffff;
    border-color: #e2e8f0;
  }
  .search-field.open input { width: 100% !important; }

  /* Notifications drawer — ensure it works on mobile */
  .notif-drawer { width: 100vw; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
}

/* ── Chart period select ── */
.chart-period-select { -webkit-appearance: none; }
.chart-period-select option { background: #161b27; color: #dde4f0; }

/* ── Light mode ── */
body.light .chart-period-select { background: #f0f4fa; border-color: #e2e8f0; color: #64748b; }
body.light .chart-period-select option { background: #ffffff; color: #1e2535; }
html { background: #0d1117; }
html.light { background: #f4f6fb; }
body.light { background: #f4f6fb; color: #1e2535; }
body.light aside,
body.light header,
body.light footer { background: #ffffff; border-color: #e2e8f0; }
body.light .bg-bg2  { background: #ffffff !important; }
body.light .bg-bg3  { background: #f0f4fa !important; }
body.light .bg-border { background-color: #e2e8f0 !important; }
body.light .border-border { border-color: #e2e8f0 !important; }
body.light .border-border\/40 { border-color: rgba(226,232,240,0.6) !important; }
body.light .text-ink   { color: #1e2535 !important; }
body.light .text-muted { color: #64748b !important; }
body.light .text-dim   { color: #94a3b8 !important; }
body.light ::-webkit-scrollbar-track { background: #f4f6fb; }
body.light ::-webkit-scrollbar-thumb { background: #e2e8f0; }
body.light .sidebar-link:hover  { background: #f0f4fa; color: #1e2535; }
body.light .sidebar-link.active { background: rgba(0,0,0,0.06); color: #0d1117; border-color: #0d1117; }
body.light .table-row:hover  { background: #f0f4fa; }
body.light .progress-bar     { background: #e2e8f0; }
body.light .stat-card:hover  { border-color: #cbd5e1; }

/* ── User dropdown ── */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: #161b27;
  border: 1px solid #2a3347;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.user-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.user-dropdown-header {
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #2a3347;
}
.user-avatar-lg {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #9b72f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  position: relative;
}
.user-avatar-lg .online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ec4a0;
  border: 2px solid #161b27;
}
.user-dropdown-section {
  padding: 6px 0;
  border-bottom: 1px solid #1c2333;
}
.user-dropdown-section:last-child { border-bottom: none; }
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: #6b7a99;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
}
.user-dropdown-item:hover { background: #1c2333; color: #dde4f0; }
.user-dropdown-item.danger { color: #f87171; }
.user-dropdown-item.danger:hover { background: rgba(239,68,68,0.08); color: #f87171; }
.user-dropdown-item svg { flex-shrink: 0; opacity: 0.7; }
.user-dropdown-item:hover svg { opacity: 1; }
.user-dropdown-item .item-right { margin-left: auto; font-size: 10px; font-family: 'IBM Plex Mono', monospace; }

/* Light mode dropdown */
body.light .user-dropdown { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
body.light .user-dropdown-header { border-color: #e2e8f0; }
body.light .user-dropdown-section { border-color: #f0f4fa; }
body.light .user-dropdown-item { color: #64748b; }
body.light .user-dropdown-item:hover { background: #f0f4fa; color: #1e2535; }
body.light .user-avatar-lg .online-dot { border-color: #ffffff; }

/* ── Notifications drawer ── */
.notif-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 60;
}
.notif-overlay.open { display: block; }

.notif-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  background: #161b27;
  border-left: 1px solid #2a3347;
  box-shadow: -16px 0 48px rgba(0,0,0,0.5);
  z-index: 70;
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
}
.notif-drawer.open { right: 0; }

.notif-drawer-header {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2a3347;
  flex-shrink: 0;
}

.notif-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 16px;
  border-bottom: 1px solid #2a3347;
  flex-shrink: 0;
}
.notif-tab {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: #6b7a99;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.notif-tab:hover { color: #dde4f0; background: #1c2333; }
.notif-tab.active { color: #4f8ef7; background: rgba(79,142,247,0.12); }

.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(42,51,71,0.4);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
.notif-item:hover { background: #1c2333; }
.notif-item:last-child { border-bottom: none; }

.notif-item.unread { background: rgba(79,142,247,0.04); }
.notif-item.unread:hover { background: rgba(79,142,247,0.08); }

.notif-dot {
  position: absolute;
  left: 6px;
  top: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4f8ef7;
}

.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-icon-red    { background: rgba(239,68,68,0.12);   color: #f87171; }
.notif-icon-blue   { background: rgba(79,142,247,0.12);  color: #4f8ef7; }
.notif-icon-green  { background: rgba(46,196,160,0.12);  color: #2ec4a0; }
.notif-icon-amber  { background: rgba(232,131,79,0.12);  color: #e8834f; }
.notif-icon-purple { background: rgba(155,114,240,0.12); color: #9b72f0; }

.notif-content { flex: 1; min-width: 0; }

.notif-title {
  font-size: 12px;
  font-weight: 500;
  color: #dde4f0;
  line-height: 1.3;
}
.notif-desc {
  font-size: 11px;
  color: #6b7a99;
  line-height: 1.4;
  margin-top: 3px;
}
.notif-meta {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: #3a4a68;
  margin-top: 4px;
}

.notif-drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid #2a3347;
  text-align: center;
  flex-shrink: 0;
}

/* ── Light mode: Notifications drawer ── */
body.light .notif-overlay { background: rgba(0,0,0,0.2); }
body.light .notif-drawer { background: #ffffff; border-color: #e2e8f0; box-shadow: -16px 0 48px rgba(0,0,0,0.1); }
body.light .notif-drawer-header { border-color: #e2e8f0; }
body.light .notif-tabs { border-color: #e2e8f0; }
body.light .notif-tab { color: #64748b; }
body.light .notif-tab:hover { color: #1e2535; background: #f0f4fa; }
body.light .notif-tab.active { color: #4f8ef7; background: rgba(79,142,247,0.1); }
body.light .notif-item { border-color: rgba(226,232,240,0.6); }
body.light .notif-item:hover { background: #f0f4fa; }
body.light .notif-item.unread { background: rgba(79,142,247,0.03); }
body.light .notif-item.unread:hover { background: rgba(79,142,247,0.06); }
body.light .notif-title { color: #1e2535; }
body.light .notif-desc { color: #64748b; }
body.light .notif-meta { color: #94a3b8; }
body.light .notif-drawer-footer { border-color: #e2e8f0; }

/* ─────────────────────────────────────────────
   Login Page
   ───────────────────────────────────────────── */

.login-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.login-input::placeholder { color: #3a4a68; }

.login-btn {
  font-family: 'IBM Plex Sans', sans-serif;
  cursor: pointer;
  border: none;
}
.login-btn:active {
  transform: scale(0.985);
}

.social-btn {
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
}
.social-btn:active {
  transform: scale(0.985);
}

.otp-input {
  caret-color: #4f8ef7;
}
.otp-input:focus {
  border-color: #4f8ef7;
}

.login-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid #2a3347;
  border-radius: 3px;
  background: #1c2333;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.login-checkbox:checked {
  background: #4f8ef7;
  border-color: #4f8ef7;
}
.login-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.login-logo-mark { fill: #ffffff; }

/* ── Login dark mode focus ── */
.login-input:focus {
  border-color: #4a5a78 !important;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.12) !important;
}

/* ── Login input error state — must override :focus ── */
.login-input.border-red-500\/50,
.login-input.border-red-500\/50:focus,
.login-input.border-red-500\/50:active {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
  outline: none !important;
}
/* ── Subdomain group error — wraps input + suffix ── */
#subdomain-group.subdomain-error {
  outline: 1px solid rgba(239, 68, 68, 0.5);
  outline-offset: -1px;
}
body.light .login-input.border-red-500\/50,
body.light .login-input.border-red-500\/50:focus,
body.light .login-input.border-red-500\/50:active {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
  outline: none !important;
}

/* ── Login light mode ── */
body.light .login-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.light .login-input {
  background: #fdfdfe !important;
  border-color: #cbd5e1 !important;
  color: #1e2535;
}
body.light .login-input::placeholder { color: #94a3b8; }
body.light .login-input:focus {
  border-color: #64748b;
  ring-color: rgba(100, 116, 139, 0.3);
  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1);
}
body.light .login-checkbox {
  background: #f4f6fb;
  border-color: #cbd5e1;
}
body.light .login-checkbox:checked {
  background: #4f8ef7;
  border-color: #4f8ef7;
}
body.light .otp-input {
  background: #f4f6fb;
  border-color: #e2e8f0;
  color: #1e2535;
}
body.light .otp-input:focus {
  border-color: #4f8ef7;
}
body.light .social-btn {
  background: #f4f6fb;
  border-color: #e2e8f0;
  color: #64748b;
}
body.light .social-btn:hover {
  border-color: #cbd5e1;
  color: #1e2535;
}
body.light .login-logo-mark { fill: #1e2535; }

/* ── Pricing cards ── */
.pricing-card {
  transition: border-color 0.15s, transform 0.15s;
}
.pricing-card:hover {
  border-color: #374160;
  transform: translateY(-2px);
}
.pricing-card-popular {
  box-shadow: 0 0 0 1px rgba(79, 142, 247, 0.1), 0 8px 32px rgba(79, 142, 247, 0.08);
}
.pricing-card-popular:hover {
  border-color: #4f8ef7 !important;
}

body.light .pricing-card { background: #ffffff; border-color: #e2e8f0; }
body.light .pricing-card:hover { border-color: #cbd5e1; }
body.light .pricing-card-popular { border-color: #4f8ef7; box-shadow: 0 0 0 1px rgba(79, 142, 247, 0.08), 0 8px 32px rgba(79, 142, 247, 0.06); }
body.light .pricing-card-popular:hover { border-color: #4f8ef7 !important; }

/* Billing toggle light mode */
body.light .billing-tab { color: #64748b; }
body.light .billing-tab:hover { color: #1e2535; }
body.light .billing-tab.bg-accent { color: #ffffff !important; }
body.light .pricing-card:not(.pricing-card-popular) button { color: #1e2535 !important; border-color: #e2e8f0 !important; }
body.light .pricing-card:not(.pricing-card-popular) button:hover { background: #f0f4fa !important; border-color: #cbd5e1 !important; color: #1e2535 !important; }

/* ─────────────────────────────────────────────
   KTUI Select — Scrollbar overrides
   (Component overrides are in ktui-overrides.css)
   ───────────────────────────────────────────── */
.kt-select-wrapper .kt-select-options {
  scrollbar-width: thin;
  scrollbar-color: #2a3347 #161b27;
}
.kt-select-wrapper .kt-select-options::-webkit-scrollbar { width: 5px; }
.kt-select-wrapper .kt-select-options::-webkit-scrollbar-track { background: #161b27; }
.kt-select-wrapper .kt-select-options::-webkit-scrollbar-thumb { background: #2a3347; border-radius: 4px; }
.kt-select-wrapper .kt-select-options::-webkit-scrollbar-thumb:hover { background: #374160; }
body.light .kt-select-wrapper .kt-select-options { scrollbar-color: #e2e8f0 #ffffff; }
body.light .kt-select-wrapper .kt-select-options::-webkit-scrollbar-track { background: #ffffff; }
body.light .kt-select-wrapper .kt-select-options::-webkit-scrollbar-thumb { background: #e2e8f0; }
body.light .kt-select-wrapper .kt-select-options::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ─────────────────────────────────────────────
   Orders Page
   ───────────────────────────────────────────── */

/* Filter pills */
.filter-pill {
  background: transparent;
  color: #6b7a99;
  border: 1px solid transparent;
  cursor: pointer;
}
.filter-pill:hover {
  color: #dde4f0;
  background: #1c2333;
}
.filter-pill.active {
  background: rgba(79,142,247,0.1);
  color: #4f8ef7;
  border-color: rgba(79,142,247,0.2);
}

body.light .filter-pill { color: #64748b; }
body.light .filter-pill:hover { color: #1e2535; background: #f0f4fa; }
body.light .filter-pill.active { background: rgba(79,142,247,0.08); color: #4f8ef7; border-color: rgba(79,142,247,0.15); }

/* Order checkboxes */
.order-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid #2a3347;
  border-radius: 3px;
  background: #1c2333;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
}
.order-checkbox:checked {
  background: #4f8ef7;
  border-color: #4f8ef7;
}
.order-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
body.light .order-checkbox { background: #f4f6fb; border-color: #cbd5e1; }
body.light .order-checkbox:checked { background: #4f8ef7; border-color: #4f8ef7; }

/* Expanded row */
.order-row.expanded { background: rgba(79,142,247,0.04); }
body.light .order-row.expanded { background: rgba(79,142,247,0.03); }

/* Detail row transition */
.order-detail-row .detail-inner {
  transition: max-height 0.3s ease;
}

/* Expanded row — is-expanded variant */
.order-row.is-expanded { background: rgba(79,142,247,0.04); }
body.light .order-row.is-expanded { background: rgba(79,142,247,0.03); }

/* Order row hover */
.order-row { cursor: default; transition: background 0.1s; }
.order-row:hover { background: #1c2333; }
body.light .order-row:hover { background: #f0f4fa; }

/* Product sub-table row */
.products-row { display: none; }
.products-row.open { display: table-row; }
.products-inner        { max-height: 0;      overflow: hidden; transition: max-height 0.28s ease; }
.products-inner.open   { max-height: 1500px; }

/* Expand / more buttons */
.btn-expand {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  border: 1px solid #2a3347;
  background: transparent;
  color: #6b7a99;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-expand:hover { background: #1c2333; color: #dde4f0; border-color: #374160; }
.btn-expand.active { background: rgba(79,142,247,0.1); color: #4f8ef7; border-color: rgba(79,142,247,0.3); }
.btn-more {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b7a99;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-more:hover { background: #1c2333; color: #dde4f0; border-color: #2a3347; }
body.light .btn-expand { border-color: #e2e8f0; color: #64748b; }
body.light .btn-expand:hover { background: #f0f4fa; color: #1e2535; border-color: #cbd5e1; }
body.light .btn-expand.active { background: rgba(79,142,247,0.08); color: #4f8ef7; border-color: rgba(79,142,247,0.25); }
body.light .btn-more { color: #64748b; }
body.light .btn-more:hover { background: #f0f4fa; color: #1e2535; border-color: #e2e8f0; }

/* Pagination */
body.light .pagination-btn { color: #64748b; }
body.light .pagination-btn:hover { background: #f0f4fa; color: #1e2535; }
body.light .pagination-btn.bg-accent { color: #ffffff; }

/* ── KTUI filter selects — compact variant ── */
.filter-kt .kt-select-wrapper .kt-select.kt-select-display {
  padding: 5px 10px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  border-radius: 6px !important;
  min-width: 100px;
}
.filter-kt .kt-select-wrapper .kt-select-placeholder {
  font-size: 12px !important;
  font-family: 'IBM Plex Mono', monospace !important;
}
.filter-kt .kt-select-wrapper .kt-select-dropdown {
  border-radius: 6px !important;
  min-width: 140px;
}
.filter-kt .kt-select-wrapper .kt-select-option {
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

/* ── Full-width panel selects ── */
.filter-panel .kt-select-wrapper { width: 100% !important; }
.filter-panel .kt-select-wrapper .kt-select.kt-select-display { width: 100% !important; min-width: unset !important; }
.kt-date-range-full { width: 100% !important; }
.kt-date-range-full input { width: 100% !important; }

/* ── KTUI scrollbar fix ── */
.kt-scrollable,
.kt-select-options {
  scrollbar-width: none !important;
}
.kt-scrollable::-webkit-scrollbar,
.kt-select-options::-webkit-scrollbar { width: 5px !important; height: 5px !important; display: block !important; }
.kt-scrollable::-webkit-scrollbar-track,
.kt-select-options::-webkit-scrollbar-track { background: #161b27 !important; }
.kt-scrollable::-webkit-scrollbar-thumb,
.kt-select-options::-webkit-scrollbar-thumb { background: #2a3347 !important; border-radius: 4px !important; }
.kt-scrollable::-webkit-scrollbar-thumb:hover,
.kt-select-options::-webkit-scrollbar-thumb:hover { background: #374160 !important; }
body.light .kt-scrollable::-webkit-scrollbar-track,
body.light .kt-select-options::-webkit-scrollbar-track { background: #ffffff !important; }
body.light .kt-scrollable::-webkit-scrollbar-thumb,
body.light .kt-select-options::-webkit-scrollbar-thumb { background: #e2e8f0 !important; border-radius: 4px !important; }
body.light .kt-scrollable::-webkit-scrollbar-thumb:hover,
body.light .kt-select-options::-webkit-scrollbar-thumb:hover { background: #cbd5e1 !important; }

/* ── Export dropdown ── */
#export-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
body.light #export-dropdown { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
body.light #export-dropdown a { color: #64748b; }
body.light #export-dropdown a:hover { color: #1e2535; background: #f0f4fa; }

/* ── Filter select (native) ── */
.filter-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%236b7a99' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px !important;
  cursor: pointer;
}
body.light .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%2364748b' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
.filter-select option { background: #161b27; color: #dde4f0; }
body.light .filter-select option { background: #ffffff; color: #1e2535; }

/* ── Date range input ── */
.kt-date-range-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px !important;
  border: 1px solid #2a3347 !important;
  border-radius: 6px !important;
  background: #1c2333 !important;
  cursor: pointer;
  min-width: 210px;
}
.kt-date-range-input input {
  background: transparent !important;
  border: none !important;
  color: #dde4f0 !important;
  font-size: 12px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  outline: none !important;
  cursor: pointer;
  width: 100%;
  padding: 0 !important;
}
.kt-date-range-input input::placeholder { color: #5a6d8a !important; }
.kt-date-range-input:hover { border-color: #374160 !important; }
.kt-date-range-input:focus-within {
  border-color: #4a5a78 !important;
  outline: 3px solid rgba(79, 142, 247, 0.12);
  outline-offset: -1px;
}
body.light .kt-date-range-input { border-color: #cbd5e1 !important; background: #fdfdfe !important; }
body.light .kt-date-range-input input { color: #1e2535 !important; }
body.light .kt-date-range-input input::placeholder { color: #94a3b8 !important; }
body.light .kt-date-range-input:hover { border-color: #94a3b8 !important; }
body.light .kt-date-range-input:focus-within { border-color: #cbd5e1 !important; outline: 3px solid rgba(79, 142, 247, 0.12); }

/* ── Flatpickr — compact sizing ── */
.flatpickr-calendar {
  font-size: 12px !important;
  border-radius: 8px !important;
  overflow: hidden;
  margin-top: 4px;
  padding: 0 !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-current-month { font-size: 11px !important; padding-top: 14px !important; }
.flatpickr-current-month .cur-month { font-size: 11px !important; font-weight: 500; letter-spacing: 0.02em; }
.flatpickr-current-month input.cur-year { font-size: 11px !important; font-weight: 400; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-size: 11px !important; }
.flatpickr-dark  .flatpickr-current-month .cur-month { color: #dde4f0; }
.flatpickr-light .flatpickr-current-month .cur-month { color: #1e2535; }
.flatpickr-months { height: 38px !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { padding: 8px 10px !important; top: 0 !important; height: 38px !important; display: flex !important; align-items: center !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 12px !important; height: 12px !important; }
span.flatpickr-weekday { font-size: 9px !important; text-align: left !important; padding-left: 2px !important; }
.flatpickr-day {
  height: 26px !important;
  line-height: 26px !important;
  font-size: 11px !important;
  max-width: 28px !important;
  border-radius: 4px !important;
  margin: 1px !important;
  justify-content: center !important;
  text-align: center !important;
}
.dayContainer {
  min-width: 210px !important;
  max-width: 210px !important;
  padding: 2px 0 !important;
  justify-content: flex-start !important;
}
.flatpickr-day { flex-basis: 28px !important; }
.flatpickr-days { min-width: 420px !important; max-width: 420px !important; }
.flatpickr-innerContainer { max-width: none !important; }
.flatpickr-rContainer { padding: 4px 0 !important; }
.flatpickr-weekdays { padding: 0 !important; width: 420px !important; }
.flatpickr-weekdaycontainer { min-width: 210px !important; max-width: 210px !important; }
.flatpickr-weekwrapper { display: none !important; }
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { box-shadow: none !important; }

/* Month divider */
.dayContainer + .dayContainer { box-shadow: -1px 0 0 #2a3347 !important; }
body.light .dayContainer + .dayContainer { box-shadow: -1px 0 0 #e2e8f0 !important; }

/* Flatpickr footer */
.flatpickr-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 15px 12px;
  border-top: 1px solid;
}
.flatpickr-footer .fp-btn {
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 0px 8px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
}

/* ── Flatpickr — dark theme ── */
.flatpickr-dark.flatpickr-calendar { background: #1c2333; border: 1px solid #2a3347; box-shadow: 0 12px 36px rgba(0,0,0,0.4); }
.flatpickr-dark .flatpickr-months,
.flatpickr-dark .flatpickr-month { background: #1c2333; color: #dde4f0; }
.flatpickr-dark .flatpickr-current-month .flatpickr-monthDropdown-months { background: #1c2333; color: #dde4f0; }
.flatpickr-dark .flatpickr-current-month input.cur-year { color: #dde4f0; }
.flatpickr-dark .flatpickr-months .flatpickr-prev-month,
.flatpickr-dark .flatpickr-months .flatpickr-next-month { color: #6b7a99; fill: #6b7a99; }
.flatpickr-dark .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-dark .flatpickr-months .flatpickr-next-month:hover { color: #dde4f0 !important; fill: #dde4f0 !important; background: transparent !important; }
.flatpickr-dark .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-dark .flatpickr-months .flatpickr-next-month:hover svg { fill: #dde4f0 !important; }
.flatpickr-dark .flatpickr-weekdays { background: #1c2333; }
.flatpickr-dark span.flatpickr-weekday { color: #5a6d8a; background: #1c2333; }
.flatpickr-dark .flatpickr-day { color: #dde4f0; border-color: transparent; }
.flatpickr-dark .flatpickr-day:hover { background: rgba(79,142,247,0.1); border-color: rgba(79,142,247,0.2); color: #dde4f0; }
.flatpickr-dark .flatpickr-day.today { border-color: #4f8ef7; }
.flatpickr-dark .flatpickr-day.selected,
.flatpickr-dark .flatpickr-day.startRange,
.flatpickr-dark .flatpickr-day.endRange { background: #4f8ef7; border-color: #4f8ef7; color: #fff; }
.flatpickr-dark .flatpickr-day.inRange { background: rgba(79,142,247,0.15); border-color: transparent; box-shadow: none; color: #dde4f0; }
.flatpickr-dark .flatpickr-day.today.inRange { background: rgba(79,142,247,0.15); border-color: transparent; color: #dde4f0; }
.flatpickr-dark .flatpickr-day.flatpickr-disabled,
.flatpickr-dark .flatpickr-day.prevMonthDay,
.flatpickr-dark .flatpickr-day.nextMonthDay { color: #3a4a68; }
.flatpickr-dark .flatpickr-innerContainer .flatpickr-rContainer + .flatpickr-rContainer { border-left: 1px solid #2a3347; }
.flatpickr-dark .flatpickr-footer { border-color: #2a3347; }
.flatpickr-dark .fp-btn-reset { background: transparent; border-color: #374160; color: #dde4f0; }
.flatpickr-dark .fp-btn-reset:hover { background: #161b27; color: #fff; border-color: #4a5a78; }
.flatpickr-dark .fp-btn-apply { background: #4f8ef7; border-color: #4f8ef7; color: #fff; }
.flatpickr-dark .fp-btn-apply:hover { background: #3a7ae0; }

/* ── Flatpickr — light theme ── */
.flatpickr-light.flatpickr-calendar { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 12px 36px rgba(0,0,0,0.1); }
.flatpickr-light .flatpickr-months,
.flatpickr-light .flatpickr-month { background: #ffffff; color: #1e2535; }
.flatpickr-light .flatpickr-current-month .flatpickr-monthDropdown-months { background: #ffffff; color: #1e2535; }
.flatpickr-light .flatpickr-current-month input.cur-year { color: #1e2535; }
.flatpickr-light .flatpickr-months .flatpickr-prev-month,
.flatpickr-light .flatpickr-months .flatpickr-next-month { color: #94a3b8; fill: #94a3b8; }
.flatpickr-light .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-light .flatpickr-months .flatpickr-next-month:hover { color: #1e2535 !important; fill: #1e2535 !important; background: transparent !important; }
.flatpickr-light .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-light .flatpickr-months .flatpickr-next-month:hover svg { fill: #1e2535 !important; }
.flatpickr-light .flatpickr-weekdays { background: #ffffff; }
.flatpickr-light span.flatpickr-weekday { color: #94a3b8; background: #ffffff; }
.flatpickr-light .flatpickr-day { color: #1e2535; border-color: transparent; }
.flatpickr-light .flatpickr-day:hover { background: rgba(79,142,247,0.06); border-color: rgba(79,142,247,0.15); color: #1e2535; }
.flatpickr-light .flatpickr-day.today { border-color: #4f8ef7; }
.flatpickr-light .flatpickr-day.selected,
.flatpickr-light .flatpickr-day.startRange,
.flatpickr-light .flatpickr-day.endRange { background: #4f8ef7; border-color: #4f8ef7; color: #fff; }
.flatpickr-light .flatpickr-day.inRange { background: rgba(79,142,247,0.1); border-color: transparent; box-shadow: none; color: #1e2535; }
.flatpickr-light .flatpickr-day.today.inRange { background: rgba(79,142,247,0.1); border-color: transparent; color: #1e2535; }
.flatpickr-light .flatpickr-day.flatpickr-disabled,
.flatpickr-light .flatpickr-day.prevMonthDay,
.flatpickr-light .flatpickr-day.nextMonthDay { color: #cbd5e1; }
.flatpickr-light .flatpickr-innerContainer .flatpickr-rContainer + .flatpickr-rContainer { border-left: 1px solid #e2e8f0; }
.flatpickr-light .flatpickr-footer { border-color: #e2e8f0; }
.flatpickr-light .fp-btn-reset { background: transparent; border-color: #cbd5e1; color: #1e2535; }
.flatpickr-light .fp-btn-reset:hover { background: #f0f4fa; color: #0d1117; border-color: #94a3b8; }
.flatpickr-light .fp-btn-apply { background: #4f8ef7; border-color: #4f8ef7; color: #fff; }
.flatpickr-light .fp-btn-apply:hover { background: #3a7ae0; }

/* ── Flatpickr — mobile single-month ── */
@media (max-width: 640px) {
  .flatpickr-calendar {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
  }
  .flatpickr-month + .flatpickr-month { display: none !important; }
  .flatpickr-weekdaycontainer + .flatpickr-weekdaycontainer { display: none !important; }
  .dayContainer + .dayContainer { display: none !important; }
  .flatpickr-innerContainer, .flatpickr-rContainer { width: 100% !important; }
  .flatpickr-days, .flatpickr-weekdays { min-width: unset !important; max-width: 100% !important; width: 100% !important; }
  .flatpickr-weekdaycontainer, .dayContainer { min-width: unset !important; max-width: 100% !important; width: 100% !important; }
  .flatpickr-day { max-width: unset !important; flex-basis: calc(100% / 7 - 4px) !important; }
}

/* ── Table headers ── */
.tbl-head th {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7a99;
  font-weight: 500;
  padding: 10px 16px;
  background: #1c2333;
  border-bottom: 1px solid #2a3347;
  white-space: nowrap;
}
body.light .tbl-head th { color: #94a3b8; border-color: #e2e8f0; background: #f0f4fa; }

.tbl-body td {
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(42,51,71,0.4);
  vertical-align: middle;
  white-space: nowrap;
}
body.light .tbl-body td { border-color: rgba(226,232,240,0.6); }

/* ── Sub-table ── */
.products-row > td { padding: 0 !important; }

/* sub-tbl border color — dark mode set via Tailwind border-border, light mode override here */
body.light .sub-tbl { border-color: #e2e8f0; }

.sub-tbl th {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7a99;
  font-weight: 500;
  padding: 8px 16px;
  background: #1c2333;
  border-bottom: 1px solid #2a3347;
  white-space: nowrap;
  text-align: left;
}
body.light .sub-tbl th { color: #94a3b8; border-color: #e2e8f0; background: #f0f4fa; }
.sub-tbl th:nth-child(5),
.sub-tbl th:nth-child(6),
.sub-tbl th:nth-child(7) { text-align: right; }
.sub-tbl th:nth-child(5) { width: 80px; }
.sub-tbl th:nth-child(6),
.sub-tbl th:nth-child(7) { width: 110px; }

.sub-tbl td {
  padding: 12px 16px;
  font-size: 13px;
  color: #8a9bbf;
  border-bottom: 1px solid rgba(42,51,71,0.4);
  white-space: nowrap;
  vertical-align: middle;
}
body.light .sub-tbl td { color: #475569; border-color: rgba(226,232,240,0.6); }
.sub-tbl tbody tr:last-child td { border-bottom: none; }
.sub-tbl td:nth-child(5),
.sub-tbl td:nth-child(6),
.sub-tbl td:nth-child(7) { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.sub-tbl td:nth-child(7) { color: #dde4f0; }
body.light .sub-tbl td:nth-child(7) { color: #1e2535; }

/* ── Reusable: thumb — item image/placeholder box ── */
body.light .thumb { border-color: #e2e8f0; background: #f8fafc; color: #c0cce0; }
.thumb img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* ── Reusable: link-dashed — inline link with dashed underline on hover ── */
.link-dashed { border-bottom: 1px dashed transparent; }
.link-dashed:hover { border-bottom-color: currentColor; }

/* Light mode overrides for link-dashed inside detail table */
body.light .detail-tbl td:first-child .link-dashed { color: #475569; }
body.light .detail-tbl td:first-child .link-dashed:hover { color: #4f8ef7; border-bottom-color: #4f8ef7; }

/* ── Table grouped sub-header (e.g. Stock Flow) ── */
.col-group-label {
  text-align: center;
  border-bottom: 1px solid rgba(42,51,71,0.5);
  padding-bottom: 4px !important;
  color: #5a6d8a;
}
body.light .col-group-label { color: #94a3b8; border-bottom-color: rgba(226,232,240,0.5); }

.tbl-sub-head th {
  padding-top: 4px !important;
  padding-bottom: 8px !important;
  text-align: right;
}

/* ── Sortable column headers ── */
.sort {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.15s;
}
.sort.sort-right { justify-content: flex-end; }
.sort:hover { color: #dde4f0; }
body.light .sort:hover { color: #1e2535; }
.sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.sort:hover .sort-icon { opacity: 0.6; }
.sort-icon .arrow-up,
.sort-icon .arrow-down {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  transition: opacity 0.15s;
}
.sort-icon .arrow-up { border-bottom: 4px solid currentColor; }
.sort-icon .arrow-down { border-top: 4px solid currentColor; }
.sort.asc { color: #4f8ef7; }
.sort.asc .sort-icon { opacity: 1; }
.sort.asc .sort-icon .arrow-up { opacity: 1; }
.sort.asc .sort-icon .arrow-down { opacity: 0.2; }
.sort.desc { color: #4f8ef7; }
.sort.desc .sort-icon { opacity: 1; }
.sort.desc .sort-icon .arrow-up { opacity: 0.2; }
.sort.desc .sort-icon .arrow-down { opacity: 1; }
body.light .sort.asc,
body.light .sort.desc { color: #4f8ef7; }

/* ── Filters panel: always hidden on desktop ── */
@media (min-width: 768px) {
  #filters-panel { display: none !important; }
}

/* ─────────────────────────────────────────────
   Toast Notifications (Sonner-style)
   ───────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
  width: 100%;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #161b27;
  border: 1px solid #2a3347;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: all;
  overflow: hidden;
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.light .toast {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.toast-exit {
  animation: toast-out 0.2s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

.toast-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-message {
  font-size: 13px;
  font-weight: 400;
  color: #dde4f0;
  line-height: 1.4;
  margin: 0;
}
body.light .toast-message { color: #1e2535; }

.toast-description {
  font-size: 12px;
  color: #6b7a99;
  line-height: 1.4;
  margin: 3px 0 0;
}
body.light .toast-description { color: #64748b; }

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  color: #5a6d8a;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  margin-top: 0;
}
.toast-close:hover {
  color: #dde4f0;
  background: rgba(255, 255, 255, 0.06);
}
body.light .toast-close { color: #94a3b8; }
body.light .toast-close:hover {
  color: #1e2535;
  background: rgba(0, 0, 0, 0.04);
}

/* ── Progress bar ── */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 0 0 0 10px;
  background: rgba(255, 255, 255, 0.15);
  animation: toast-progress linear forwards;
}
body.light .toast-progress {
  background: rgba(0, 0, 0, 0.1);
}
.toast-success .toast-progress { background: #2ec4a0; }
.toast-error   .toast-progress { background: #f87171; }
.toast-info    .toast-progress { background: #4f8ef7; }
.toast-warning .toast-progress { background: #e8834f; }

.toast:hover .toast-progress {
  animation-play-state: paused;
}

@keyframes toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── Type accents — subtle left border ── */
.toast-success { border-left: 3px solid #2ec4a0; }
.toast-error   { border-left: 3px solid #f87171; }
.toast-info    { border-left: 3px solid #4f8ef7; }
.toast-warning { border-left: 3px solid #e8834f; }

/* ── Mobile ── */
@media (max-width: 480px) {
  .toast-container {
    top: 16px;
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
  }
}