/* ============================================================================
 * Splivvy Web Design System
 * Mirrors flutter_apk/lib/constants/app_colors.dart — keep them in sync.
 * Single source of truth for colors, spacing, shadows, and component
 * primitives. Override DaisyUI's primary palette so every <button class="btn-primary">
 * and similar component picks up our teal brand automatically.
 * ========================================================================== */

:root {
  /* PRIMARY (teal) — mirrors AppColors.primary / primaryDark / primaryLight */
  --sp-primary:        #2E9B9B;
  --sp-primary-dark:   #1A7A7D;
  --sp-primary-light:  #4DB8B8;
  --sp-primary-50:     #E6F4F4;
  --sp-primary-100:    #C3E5E5;
  --sp-primary-soft:   rgba(46, 155, 155, 0.10);
  --sp-primary-softer: rgba(46, 155, 155, 0.04);
  --sp-gradient-primary: linear-gradient(135deg, #2E9B9B 0%, #1A7A7D 100%);
  --sp-gradient-header:  linear-gradient(135deg, rgba(46,155,155,0.10), rgba(46,155,155,0.04));

  /* BRAND secondary blue — auth/expense flourishes */
  --sp-brand:          #2563EB;
  --sp-brand-dark:     #1E40AF;
  --sp-brand-soft:     #DBEAFE;

  /* SEMANTIC (status) */
  --sp-success:        #10B981;
  --sp-success-dark:   #059669;
  --sp-warning:        #F59E0B;
  --sp-warning-dark:   #D97706;
  --sp-danger:         #EF4444;
  --sp-danger-dark:    #DC2626;
  --sp-info:           #3B82F6;
  --sp-gradient-income:  linear-gradient(135deg, #10B981 0%, #059669 100%);
  --sp-gradient-expense: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

  /* SURFACES */
  --sp-bg:             #F8FAFC;
  --sp-surface:        #FFFFFF;
  --sp-surface-muted:  #F1F5F9;
  --sp-border:         #E2E8F0;
  --sp-border-strong:  #CBD5E1;
  --sp-divider:        #F1F5F9;

  /* TEXT */
  --sp-text:           #0F172A;
  --sp-text-muted:     #475569;
  --sp-text-subtle:    #64748B;
  --sp-text-inverse:   #FFFFFF;

  /* RADII */
  --sp-radius-sm:  8px;
  --sp-radius:     12px;
  --sp-radius-lg:  16px;
  --sp-radius-xl:  20px;
  --sp-radius-full: 9999px;

  /* SHADOWS */
  --sp-shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --sp-shadow:    0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --sp-shadow-md: 0 4px 12px rgba(15,23,42,0.08);
  --sp-shadow-lg: 0 12px 24px rgba(15,23,42,0.10);
  --sp-shadow-primary: 0 6px 20px rgba(46,155,155,0.25);

  /* MOTION */
  --sp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sp-transition: all 0.2s var(--sp-ease);

  /* LAYOUT */
  --sp-sidebar-w: 264px;
  --sp-header-h:  72px;
}

/* ----------------------------------------------------------------------------
 * DaisyUI primary override → teal. Lets <button class="btn-primary"> etc.
 * pick up the brand without touching every view.
 * -------------------------------------------------------------------------- */
[data-theme="light"], :root {
  --p:  176 55% 39%;   /* #2E9B9B */
  --pf: 178 64% 30%;   /* #1A7A7D */
  --pc: 0   0%  100%;  /* white text on primary */
}

/* ----------------------------------------------------------------------------
 * DARK THEME — applied via <html data-theme="dark">. Tokens recolor to a
 * deep-teal-tinted dark surface so the brand identity carries through
 * (don't go pure-black grey; it loses warmth).
 * -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --sp-bg:            #0B1320;
  --sp-surface:       #111C2E;
  --sp-surface-muted: #1A2740;
  --sp-border:        #233252;
  --sp-border-strong: #2F4470;
  --sp-divider:       #1A2740;

  --sp-text:         #E2E8F0;
  --sp-text-muted:   #94A3B8;
  --sp-text-subtle:  #64748B;
  --sp-text-inverse: #0B1320;

  --sp-primary-soft:   rgba(77, 184, 184, 0.18);
  --sp-primary-softer: rgba(77, 184, 184, 0.08);

  --sp-gradient-header: linear-gradient(135deg, rgba(46,155,155,0.18), rgba(46,155,155,0.06));

  --sp-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --sp-shadow:    0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --sp-shadow-md: 0 6px 16px rgba(0,0,0,0.5);
  --sp-shadow-lg: 0 16px 32px rgba(0,0,0,0.6);

  --p:  178 50% 51%;   /* #4DB8B8 — lighter teal pops on dark */
  --pf: 176 55% 39%;
  --pc: 0   0%  100%;
}
[data-theme="dark"] body { color-scheme: dark; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--sp-border-strong); background-clip: content-box; }

/* ============================================================================
 * BASE
 * ========================================================================== */
html, body { background: var(--sp-bg); color: var(--sp-text); }
body { font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

a { color: var(--sp-primary-dark); }
a:hover { color: var(--sp-primary); }

::selection { background: var(--sp-primary-soft); color: var(--sp-text); }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: var(--sp-radius-full); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sp-border-strong); background-clip: content-box; }

/* ============================================================================
 * LAYOUT — app shell (sidebar + header + content)
 * ========================================================================== */
.sp-shell { display: flex; min-height: 100vh; }

.sp-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sp-sidebar-w);
  background: var(--sp-surface);
  border-right: 1px solid var(--sp-border);
  z-index: 40;
  transform: translateX(-100%);
  transition: transform 0.25s var(--sp-ease);
  display: flex; flex-direction: column;
}
.sp-sidebar.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
  .sp-sidebar { transform: translateX(0); }
}

.sp-sidebar__brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--sp-divider);
}
.sp-sidebar__logo {
  width: 40px; height: 40px;
  background: var(--sp-gradient-primary);
  border-radius: var(--sp-radius);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: var(--sp-shadow-primary);
}
.sp-sidebar__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--sp-text); }

.sp-sidebar__nav {
  flex: 1; padding: 16px 12px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.sp-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--sp-radius);
  color: var(--sp-text-muted);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: var(--sp-transition);
}
.sp-nav-item:hover {
  background: var(--sp-primary-softer);
  color: var(--sp-primary-dark);
}
.sp-nav-item.is-active {
  background: var(--sp-primary-soft);
  color: var(--sp-primary-dark);
  font-weight: 600;
}
.sp-nav-item.is-active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 var(--sp-radius-full) var(--sp-radius-full) 0;
  background: var(--sp-primary);
}
.sp-nav-item__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-surface-muted);
  font-size: 16px;
  transition: var(--sp-transition);
}
.sp-nav-item.is-active .sp-nav-item__icon,
.sp-nav-item:hover .sp-nav-item__icon {
  background: var(--sp-primary);
  color: #fff;
}

.sp-sidebar__footer { padding: 16px; border-top: 1px solid var(--sp-divider); }

.sp-main {
  flex: 1;
  min-width: 0;
  margin-left: 0;
  display: flex; flex-direction: column;
}
@media (min-width: 1024px) {
  .sp-main { margin-left: var(--sp-sidebar-w); }
}

.sp-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--sp-surface);
  border-bottom: 1px solid var(--sp-border);
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.sp-header__title { font-size: 22px; font-weight: 700; color: var(--sp-text); letter-spacing: -0.02em; }
.sp-header__subtitle { font-size: 13px; color: var(--sp-text-subtle); margin-top: 2px; }

.sp-content { padding: 24px; }
@media (min-width: 768px)  { .sp-content { padding: 32px; } }
@media (min-width: 1280px) { .sp-content { padding: 40px; } }

.sp-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.4);
  z-index: 39; opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--sp-ease);
}
.sp-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .sp-backdrop { display: none; } }

/* ============================================================================
 * CARDS / STATS / INSIGHTS
 * ========================================================================== */
.sp-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-sm);
  transition: var(--sp-transition);
}
.sp-card:hover { box-shadow: var(--sp-shadow-md); }

.sp-card__body { padding: 24px; }
.sp-card__header {
  padding: 20px 24px; border-bottom: 1px solid var(--sp-divider);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sp-card__title { font-size: 16px; font-weight: 700; color: var(--sp-text); }

/* Stat card — used for KPIs across dashboard, groups, family pool */
.sp-stat {
  position: relative;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  padding: 20px;
  overflow: hidden;
  box-shadow: var(--sp-shadow-sm);
  transition: var(--sp-transition);
}
.sp-stat:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow-md); }
.sp-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sp-gradient-primary);
}
.sp-stat--income::before  { background: var(--sp-gradient-income); }
.sp-stat--expense::before { background: var(--sp-gradient-expense); }
.sp-stat--warning::before { background: linear-gradient(90deg, var(--sp-warning), var(--sp-warning-dark)); }

.sp-stat__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sp-stat__icon {
  width: 44px; height: 44px;
  border-radius: var(--sp-radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: var(--sp-primary-soft);
  color: var(--sp-primary-dark);
}
.sp-stat__icon--income  { background: rgba(16,185,129,0.10); color: var(--sp-success-dark); }
.sp-stat__icon--expense { background: rgba(239,68,68,0.10);  color: var(--sp-danger-dark);  }
.sp-stat__icon--warning { background: rgba(245,158,11,0.10); color: var(--sp-warning-dark); }

.sp-stat__label { font-size: 13px; color: var(--sp-text-subtle); font-weight: 500; }
.sp-stat__value { font-size: 28px; font-weight: 700; color: var(--sp-text); margin-top: 4px; letter-spacing: -0.02em; }
.sp-stat__hint  { font-size: 12px; color: var(--sp-text-subtle); margin-top: 8px; }
.sp-stat__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--sp-radius-full);
  font-size: 11px; font-weight: 600;
  background: var(--sp-primary-soft); color: var(--sp-primary-dark);
}

/* Hero / welcome block */
.sp-hero {
  position: relative;
  background: var(--sp-gradient-header);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xl);
  padding: 32px;
  overflow: hidden;
}
.sp-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--sp-primary-dark); text-transform: uppercase; }
.sp-hero__title { font-size: 28px; font-weight: 800; color: var(--sp-text); margin-top: 8px; letter-spacing: -0.02em; }
.sp-hero__subtitle { color: var(--sp-text-muted); margin-top: 8px; }

/* ============================================================================
 * BUTTONS / CHIPS / FORMS — light overrides so DaisyUI inherits brand
 * ========================================================================== */
.btn-primary {
  background: var(--sp-gradient-primary);
  border-color: transparent;
  box-shadow: var(--sp-shadow-primary);
}
.btn-primary:hover {
  background: var(--sp-primary-dark);
  border-color: transparent;
  filter: brightness(1.05);
}
.btn-outline-primary {
  background: transparent;
  border: 1px solid var(--sp-primary);
  color: var(--sp-primary-dark);
}
.btn-outline-primary:hover { background: var(--sp-primary-soft); }

.sp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--sp-radius-full);
  font-size: 11px; font-weight: 600;
  background: var(--sp-surface-muted); color: var(--sp-text-muted);
}
.sp-chip--success { background: rgba(16,185,129,0.10); color: var(--sp-success-dark); }
.sp-chip--warning { background: rgba(245,158,11,0.10); color: var(--sp-warning-dark); }
.sp-chip--danger  { background: rgba(239,68,68,0.10);  color: var(--sp-danger-dark);  }
.sp-chip--primary { background: var(--sp-primary-soft); color: var(--sp-primary-dark); }

.sp-input, .sp-select, .sp-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  font-size: 14px;
  color: var(--sp-text);
  transition: var(--sp-transition);
}
.sp-input:focus, .sp-select:focus, .sp-textarea:focus {
  outline: none;
  border-color: var(--sp-primary);
  box-shadow: 0 0 0 3px var(--sp-primary-soft);
}

/* ============================================================================
 * EMPTY / SKELETON / TOAST
 * ========================================================================== */
.sp-empty {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--sp-border-strong);
  border-radius: var(--sp-radius-lg);
  background: var(--sp-surface);
  color: var(--sp-text-subtle);
}
.sp-empty__icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.sp-empty__title { font-size: 15px; font-weight: 600; color: var(--sp-text); margin-bottom: 4px; }
.sp-empty__hint { font-size: 13px; }

.sp-skeleton {
  background: linear-gradient(90deg, var(--sp-surface-muted) 0%, #E8EDF3 50%, var(--sp-surface-muted) 100%);
  background-size: 200% 100%;
  animation: sp-skeleton 1.4s infinite;
  border-radius: var(--sp-radius-sm);
}
@keyframes sp-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.sp-toast-host {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; max-width: 360px;
}
.sp-toast {
  background: var(--sp-text);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow-lg);
  font-size: 14px;
  animation: sp-toast-in 0.25s var(--sp-ease);
}
.sp-toast--success { background: var(--sp-success-dark); }
.sp-toast--danger  { background: var(--sp-danger-dark); }
.sp-toast--warning { background: var(--sp-warning-dark); }
@keyframes sp-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
 * MODAL polish (works with <dialog> + DaisyUI)
 * ========================================================================== */
dialog.sp-modal::backdrop { background: rgba(15,23,42,0.5); backdrop-filter: blur(2px); }
.sp-modal__box {
  background: var(--sp-surface);
  border-radius: var(--sp-radius-xl);
  box-shadow: var(--sp-shadow-lg);
  border: 1px solid var(--sp-border);
}

/* ============================================================================
 * UTIL
 * ========================================================================== */
.sp-fade-in { animation: sp-fade-in 0.4s var(--sp-ease) both; }
@keyframes sp-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
 * BADGES — small numeric pip used on sidebar nav items and header bell
 * ========================================================================== */
.sp-pip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--sp-radius-full);
  background: var(--sp-danger); color: #fff;
  font-size: 10px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--sp-surface);
}
.sp-nav-item .sp-pip { margin-left: auto; }

/* Header avatar */
.sp-header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sp-gradient-primary); color: #fff;
  font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  position: relative;
  cursor: pointer;
}
.sp-header-avatar .sp-pip {
  position: absolute; top: -4px; right: -4px;
}

/* Theme toggle button (header) */
.sp-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--sp-radius);
  background: transparent; border: 1px solid var(--sp-border);
  color: var(--sp-text-muted); cursor: pointer;
  transition: var(--sp-transition);
}
.sp-theme-btn:hover { background: var(--sp-primary-soft); color: var(--sp-primary-dark); border-color: var(--sp-primary); }