/* =============================================================
   Storvly Design System — v1 (tokens, primitives, utilities)
   Loaded globally on dashboard. Existing inline styles override
   these where needed; new components should consume tokens.
   ============================================================= */

:root{
  /* --- Color: brand --- */
  --ds-brand: #181159;
  --ds-brand-dim: #100069;
  --ds-brand-soft: #EAE7F8;
  --ds-brand-soft-2: #F5F3FB;

  /* --- Color: accent (cyan from new logo) --- */
  --ds-accent: #21D3F4;
  --ds-accent-dim: #0BB5D6;
  --ds-accent-soft: #E0F8FD;

  /* --- Color: ink scale (text) --- */
  --ds-ink-1: #0E1023;   /* primary text */
  --ds-ink-2: #474650;   /* secondary text */
  --ds-ink-3: #787681;   /* muted text */
  --ds-ink-4: #B0ADB8;   /* placeholder / disabled */

  /* --- Color: surface --- */
  --ds-bg: #FAFAFB;        /* page background (off-white) */
  --ds-surface: #FFFFFF;   /* card surface */
  --ds-surface-2: #F8F9FB; /* subtle inset / hover */
  --ds-line: #E7E5EE;      /* border */
  --ds-line-strong: #C8C5D2;

  /* --- Color: status (text / solid / tint) --- */
  --ds-success: #1D9E75; --ds-success-solid: #16855F; --ds-success-tint: #E1F5EE;
  --ds-warn:    #C9922F; --ds-warn-solid:    #A77719; --ds-warn-tint:    #FBF1DE;
  --ds-danger:  #BA1A1A; --ds-danger-solid:  #93131A; --ds-danger-tint:  #FBE5E5;
  --ds-info:    #2563EB; --ds-info-solid:    #1D4FBF; --ds-info-tint:    #E5EEFC;

  /* --- Radius --- */
  --ds-r-sm: 8px;
  --ds-r-md: 12px;
  --ds-r-lg: 16px;
  --ds-r-pill: 999px;

  /* --- Spacing (4px scale) --- */
  --ds-s-1: 4px;
  --ds-s-2: 8px;
  --ds-s-3: 12px;
  --ds-s-4: 16px;
  --ds-s-5: 20px;
  --ds-s-6: 24px;
  --ds-s-8: 32px;
  --ds-s-10: 40px;

  /* --- Elevation --- */
  --ds-shadow-sm: 0 1px 2px rgba(14, 16, 35, .04), 0 1px 1px rgba(14, 16, 35, .03);
  --ds-shadow-md: 0 4px 12px rgba(24, 17, 89, .06), 0 1px 2px rgba(24, 17, 89, .04);
  --ds-shadow-lg: 0 12px 32px rgba(24, 17, 89, .08), 0 2px 6px rgba(24, 17, 89, .04);

  /* --- Typography scale --- */
  --ds-fs-xs: 12px;
  --ds-fs-sm: 13px;
  --ds-fs-base: 14px;
  --ds-fs-md: 16px;
  --ds-fs-lg: 18px;
  --ds-fs-xl: 22px;
  --ds-fs-2xl: 28px;
  --ds-fs-display: 36px;

  /* --- Motion --- */
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);
  --ds-dur-fast: 120ms;
  --ds-dur: 180ms;
  --ds-dur-slow: 280ms;
}

/* ============== Focus ring (accessibility + brand) ============== */
:focus-visible{
  outline: 2px solid var(--ds-accent) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

/* ============== Material Symbols — unified weight ============== */
.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ============== Typography utilities ============== */
.ds-t-display { font-family: 'Manrope', sans-serif; font-size: var(--ds-fs-display); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ds-ink-1); }
.ds-t-2xl     { font-family: 'Manrope', sans-serif; font-size: var(--ds-fs-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--ds-ink-1); }
.ds-t-xl      { font-family: 'Manrope', sans-serif; font-size: var(--ds-fs-xl); font-weight: 700; line-height: 1.2; color: var(--ds-ink-1); }
.ds-t-lg      { font-family: 'Manrope', sans-serif; font-size: var(--ds-fs-lg); font-weight: 700; line-height: 1.25; color: var(--ds-ink-1); }
.ds-t-md      { font-size: var(--ds-fs-md); font-weight: 600; color: var(--ds-ink-1); }
.ds-t-body    { font-size: var(--ds-fs-base); color: var(--ds-ink-2); line-height: 1.5; }
.ds-t-sm      { font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-t-xs      { font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
.ds-t-label   { font-size: var(--ds-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-3); }
.ds-num       { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ============== Button system — 3 variants × 3 sizes ============== */
.ds-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-weight: 600;
  border-radius: var(--ds-r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ds-dur) var(--ds-ease),
              color var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease);
  white-space: nowrap;
  user-select: none;
}
.ds-btn:active{ transform: translateY(1px); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"]{ opacity:.5; cursor: not-allowed; }
.ds-btn .material-symbols-outlined{ font-size: 18px; }

/* sizes */
.ds-btn--sm { height: 30px; padding: 0 12px; font-size: var(--ds-fs-xs); }
.ds-btn--md { height: 38px; padding: 0 16px; font-size: var(--ds-fs-sm); }
.ds-btn--lg { height: 46px; padding: 0 22px; font-size: var(--ds-fs-base); }

/* variants */
.ds-btn--primary { background: var(--ds-brand); color: #fff; }
.ds-btn--primary:hover { background: var(--ds-brand-dim); }
.ds-btn--secondary { background: #fff; color: var(--ds-brand); border-color: var(--ds-line-strong); }
.ds-btn--secondary:hover { border-color: var(--ds-brand); background: var(--ds-brand-soft-2); }
.ds-btn--ghost { background: transparent; color: var(--ds-ink-2); }
.ds-btn--ghost:hover { background: var(--ds-surface-2); color: var(--ds-brand); }
.ds-btn--danger { background: var(--ds-danger); color: #fff; }
.ds-btn--danger:hover { background: var(--ds-danger-solid); }

/* mobile: enforce 44px min touch target on primary CTAs */
@media (max-width: 768px) {
  .ds-btn--sm { min-height: 36px; }
  .ds-btn--md, .ds-btn--lg { min-height: 44px; }
}

/* ============== Card primitive ============== */
.ds-card{
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-s-5);
  box-shadow: var(--ds-shadow-sm);
}
.ds-card--md { padding: var(--ds-s-6); }
.ds-card--flat { box-shadow: none; }
.ds-card--accent { border-color: var(--ds-brand); box-shadow: var(--ds-shadow-md); }

/* ============== Status pills ============== */
.ds-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--ds-r-pill);
  font-size: var(--ds-fs-xs); font-weight: 700; line-height: 1.2;
}
.ds-pill--success { background: var(--ds-success-tint); color: var(--ds-success-solid); }
.ds-pill--warn    { background: var(--ds-warn-tint);    color: var(--ds-warn-solid); }
.ds-pill--danger  { background: var(--ds-danger-tint);  color: var(--ds-danger-solid); }
.ds-pill--info    { background: var(--ds-info-tint);    color: var(--ds-info-solid); }
.ds-pill--neutral { background: var(--ds-surface-2);    color: var(--ds-ink-2); }

/* ============== Stat card (number-first hierarchy) ============== */
.ds-stat{ display: flex; flex-direction: column; gap: 4px; }
.ds-stat__label { font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.ds-stat__value { font-family: 'Manrope', sans-serif; font-size: var(--ds-fs-2xl); font-weight: 800; color: var(--ds-ink-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-stat__delta { font-size: var(--ds-fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.ds-stat__delta--up   { color: var(--ds-success-solid); }
.ds-stat__delta--down { color: var(--ds-danger-solid); }

/* ============== Sidebar polish — active state with left bar ============== */
.sidebar .nav-item.active,
.sidebar .nav-item-active,
.sidebar .nav-item-split.active {
  background: var(--ds-brand-soft) !important;
  color: var(--ds-brand) !important;
  position: relative;
}
.sidebar .nav-item.active::before,
.sidebar .nav-item-active::before,
.sidebar .nav-item-split.active::before {
  content: "";
  position: absolute;
  left: -8px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: var(--ds-brand);
}
.sidebar .nav-item-split.active .nav-item-split-body { color: var(--ds-brand) !important; }
.sidebar .nav-item-split.active .nav-item-split-body .material-symbols-outlined { color: var(--ds-brand) !important; }

/* Section labels: more breathing room */
.sidebar .sidebar-section,
.sidebar .nav-section-label {
  margin-top: 16px;
  padding: 4px 14px 6px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ds-ink-3);
}

/* ============== Page background tweak ============== */
html, body { background: var(--ds-bg); }

/* ============== Tables (when adopted) ============== */
.ds-table{ width: 100%; border-collapse: separate; border-spacing: 0; }
.ds-table th{
  position: sticky; top: 0; z-index: 1;
  background: var(--ds-surface-2);
  text-align: left;
  font-size: var(--ds-fs-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ds-ink-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-line);
}
.ds-table td{
  padding: 14px 16px; height: 52px; vertical-align: middle;
  font-size: var(--ds-fs-sm); color: var(--ds-ink-1);
  border-bottom: 1px solid var(--ds-line);
}
.ds-table tr:hover td{ background: var(--ds-surface-2); }
.ds-table td.num, .ds-table th.num{ text-align: right; font-variant-numeric: tabular-nums; }

/* ============== Form primitives ============== */
.ds-field{ display: flex; flex-direction: column; gap: 6px; }
.ds-field__label{
  font-size: var(--ds-fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-field__input,
.ds-field input[type="text"],
.ds-field input[type="email"],
.ds-field input[type="tel"],
.ds-field input[type="password"],
.ds-field input[type="number"],
.ds-field input[type="url"],
.ds-field select,
.ds-field textarea {
  height: 38px; padding: 0 12px;
  font-size: var(--ds-fs-sm); color: var(--ds-ink-1);
  background: var(--ds-surface);
  border: 1.5px solid var(--ds-line-strong);
  border-radius: var(--ds-r-sm);
  transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-field textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; }
.ds-field__input:focus,
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus {
  outline: none; border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}
.ds-field__hint { font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
.ds-field__error{ font-size: var(--ds-fs-xs); color: var(--ds-danger-solid); }

/* ============== Link accent ============== */
a.ds-link, .ds-prose a { color: var(--ds-brand); text-decoration: underline; text-decoration-color: var(--ds-accent); text-underline-offset: 3px; }
a.ds-link:hover, .ds-prose a:hover { color: var(--ds-brand-dim); text-decoration-color: var(--ds-brand-dim); }

/* ============== Motion helpers ============== */
.ds-fade-in { animation: ds-fade-in var(--ds-dur) var(--ds-ease) both; }
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ============== Empty state ============== */
.ds-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 56px 24px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  gap: 14px;
}
.ds-empty__icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
}
.ds-empty__icon .material-symbols-outlined { font-size: 32px; }
.ds-empty__title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--ds-ink-1);
  letter-spacing: -.01em;
  margin: 0;
}
.ds-empty__sub {
  font-size: 13px; color: var(--ds-ink-3); max-width: 380px; margin: 0; line-height: 1.5;
}
.ds-empty__actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
  .ds-empty { padding: 36px 16px; }
  .ds-empty__icon { width: 56px; height: 56px; }
  .ds-empty__icon .material-symbols-outlined { font-size: 28px; }
}

/* ============== List-page tables (scoped to .panel) ==============
   Many existing list pages use inline-styled <table> inside .panel.
   These rules harmonize them with ds-table without rewriting markup. */
.panel > table,
.panel .table-wrap > table {
  width: 100%; border-collapse: separate; border-spacing: 0;
}
.panel > table thead tr,
.panel .table-wrap > table thead tr {
  background: var(--ds-surface-2);
}
.panel > table thead th,
.panel .table-wrap > table thead th {
  font-family: 'Manrope', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ds-ink-3) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  background: var(--ds-surface-2) !important;
}
.panel > table tbody td,
.panel .table-wrap > table tbody td {
  padding: 14px !important;
  height: 52px;
  font-size: 13.5px !important;
  border-bottom: 1px solid var(--ds-line) !important;
  vertical-align: middle;
}
.panel > table tbody tr:hover td,
.panel .table-wrap > table tbody tr:hover td {
  background: var(--ds-surface-2);
}
.panel > table tbody tr:last-child td,
.panel .table-wrap > table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ============== Legacy button shims ==============
   Map .btn-primary / .btn-secondary / .btn-ghost (used widely) onto
   the ds-btn aesthetic so the dashboard adopts the new look without
   per-template edits. Page-specific overrides still win via specificity. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700;
  background: var(--ds-brand) !important; color: #fff !important;
  border: 1px solid var(--ds-brand) !important;
  border-radius: var(--ds-r-sm);
  cursor: pointer; text-decoration: none;
  transition: background var(--ds-dur) var(--ds-ease), transform .1s, box-shadow var(--ds-dur);
}
.btn-primary:hover { background: var(--ds-brand-dim) !important; border-color: var(--ds-brand-dim) !important; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary .material-symbols-outlined { font-size: 18px; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700;
  background: var(--ds-surface) !important; color: var(--ds-ink-1) !important;
  border: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-r-sm);
  cursor: pointer; text-decoration: none;
  transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur);
}
.btn-secondary:hover { background: var(--ds-surface-2) !important; border-color: var(--ds-brand) !important; color: var(--ds-brand) !important; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 12px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700;
  background: transparent !important; color: var(--ds-brand) !important;
  border: none !important;
  border-radius: var(--ds-r-sm);
  cursor: pointer; text-decoration: none;
  transition: background var(--ds-dur);
}
.btn-ghost:hover { background: var(--ds-brand-soft) !important; }

/* Disabled state for all */
.btn-primary[disabled], .btn-primary:disabled,
.btn-secondary[disabled], .btn-secondary:disabled,
.btn-ghost[disabled], .btn-ghost:disabled {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}