@import "tailwindcss";

/* Scan Rails app + config files for utility classes */
@source "../../../app/views";
@source "../../../app/helpers";
@source "../../../app/javascript";
@source "../../../app/components";
@source "../../../config/locales";

/* ── Custom variants ─────────────────────────────────────────────── */
@custom-variant dark (&:where(.sw-dark, .sw-dark *));

/* ── Design tokens (light theme defaults) ────────────────────────── */
@theme {
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", ui-monospace, monospace;

  /* Surface colors */
  --color-bg:           #FAFAFA;
  --color-card:         #FFFFFF;
  --color-muted:        #F4F4F5;
  --color-overlay:      rgb(10 10 11 / 0.5);

  /* Foreground (text) colors */
  --color-fg:           #18181B;
  --color-fg-muted:     #52525B;
  --color-fg-subtle:    #71717A;
  --color-fg-inverse:   #FFFFFF;

  /* Borders */
  --color-border:       #E4E4E7;
  --color-border-strong:#A1A1AA;

  /* Accent (indigo) */
  --color-accent-50:    #EEF2FF;
  --color-accent-100:   #E0E7FF;
  --color-accent-300:   #A5B4FC;
  --color-accent-500:   #6366F1;
  --color-accent-600:   #4F46E5;
  --color-accent:       #4338CA;
  --color-accent-800:   #312E81;
  --color-accent-900:   #1E1B4B;

  /* Semantic */
  --color-success:      #15803D;
  --color-warning:      #B45309;
  --color-danger:       #B91C1C;

  /* Chart palette (7 categories) */
  --color-chart-0:      #4338CA;
  --color-chart-1:      #B45309;
  --color-chart-2:      #0F766E;
  --color-chart-3:      #BE185D;
  --color-chart-4:      #15803D;
  --color-chart-5:      #0369A1;
  --color-chart-6:      #A16207;

  /* Radius scale */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-2xl:         20px;

  /* Shadow scale (subtle for light) */
  --shadow-xs:          0 1px 2px rgb(24 24 27 / 0.04), 0 1px 1px rgb(24 24 27 / 0.03);
  --shadow-sm:          0 4px 12px rgb(24 24 27 / 0.06), 0 1px 2px rgb(24 24 27 / 0.04);
  --shadow-md:          0 12px 32px rgb(24 24 27 / 0.08), 0 2px 4px rgb(24 24 27 / 0.04);
}

/* ── Dark theme token overrides ───────────────────────────────────── */
@layer base {
  .sw-dark {
    --color-bg:           #0A0A0B;
    --color-card:         #16171A;
    --color-muted:        #1F2024;
    --color-overlay:      rgb(0 0 0 / 0.6);

    --color-fg:           #FAFAFA;
    --color-fg-muted:     #A1A1AA;
    --color-fg-subtle:    #71717A;
    --color-fg-inverse:   #0A0A0B;

    --color-border:       #27272A;
    --color-border-strong:#52525B;

    --color-accent-50:    #1E1B4B;
    --color-accent-100:   #312E81;
    --color-accent-300:   #C7D2FE;
    --color-accent-500:   #A5B4FC;
    --color-accent-600:   #818CF8;
    --color-accent:       #6366F1;

    --color-success:      #4ADE80;
    --color-warning:      #FBBF24;
    --color-danger:       #F87171;

    --color-chart-0:      #818CF8;
    --color-chart-1:      #FB923C;
    --color-chart-2:      #14B8A6;
    --color-chart-3:      #F472B6;
    --color-chart-4:      #4ADE80;
    --color-chart-5:      #38BDF8;
    --color-chart-6:      #FACC15;

    --shadow-xs:          0 1px 2px rgb(0 0 0 / 0.4), 0 1px 1px rgb(0 0 0 / 0.3);
    --shadow-sm:          0 4px 12px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md:          0 12px 32px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
  }
}

/* ── Layout-only CSS variables (not utility tokens) ──────────────── */
:root {
  --sw-sidebar-w:  248px;
  --sw-sidebar-w0: 72px;
  --sw-topbar-h:   60px;
}

/* ── Base layer ──────────────────────────────────────────────────── */
@layer base {
  html, body { @apply h-full m-0; }
  body {
    @apply bg-bg text-fg font-sans antialiased;
  }
  *, *::before, *::after { box-sizing: border-box; }
  a { color: inherit; }
  button { font-family: inherit; }
}

/* ── Component layer ─────────────────────────────────────────────── */
@layer components {
  /* Tabular / mono numerals */
  .sw-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .sw-tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* Pulse */
  @keyframes sw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  .sw-pulse { animation: sw-pulse 1.6s ease-in-out infinite; }

  /* Card */
  .sw-card {
    @apply rounded-xl border border-border bg-card shadow-xs;
  }

  /* Buttons */
  .sw-btn-primary {
    @apply inline-flex items-center gap-1.5 rounded-md bg-accent px-3.5 py-2
           text-[13px] font-semibold text-white whitespace-nowrap shadow-xs
           transition-colors cursor-pointer
           hover:bg-accent-600;
  }
  .sw-btn-ghost {
    @apply inline-flex items-center gap-1.5 rounded-md border border-border bg-transparent
           px-3.5 py-2 text-[13.5px] font-medium text-fg-muted whitespace-nowrap
           transition-colors cursor-pointer no-underline
           hover:bg-muted hover:text-fg;
  }
  .sw-btn-icon {
    @apply inline-flex items-center justify-center rounded-md bg-transparent p-2
           text-fg-muted cursor-pointer transition-colors
           hover:bg-muted hover:text-fg;
  }
  .sw-btn-danger {
    @apply text-danger border-danger/25;
  }
  .sw-btn-danger:hover {
    @apply bg-danger/5 text-danger;
  }

  /* Form inputs */
  .sw-input {
    @apply w-full rounded-md border border-border bg-muted px-3 py-2.5
           text-sm text-fg placeholder:text-fg-subtle outline-none transition-colors
           focus:border-accent focus:bg-card;
  }
  textarea.sw-input { @apply resize-y; }

  .sw-select {
    @apply rounded-md border border-border bg-muted py-2 ps-3 pe-8
           text-sm text-fg outline-none cursor-pointer transition-colors appearance-none
           focus:border-accent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  [dir="rtl"] .sw-select { background-position: left 10px center; }

  .sw-label {
    @apply mb-1.5 block text-[13px] font-medium text-fg;
  }

  /* Field label "tag" style (uppercase small) */
  .sw-tag-label {
    @apply text-[11px] font-semibold uppercase tracking-wider text-fg-subtle;
  }

  /* Section heading above a card */
  .sw-section-label {
    @apply mb-2.5 flex items-center gap-2 text-[11.5px] font-semibold uppercase tracking-wide text-fg-subtle;
  }

  /* Page wrapper + header */
  .sw-page-wrap   { @apply px-6 pt-7 pb-12; }
  .sw-page-header { @apply mb-6 flex items-start justify-between gap-4; }
  .sw-page-title  { @apply text-[22px] font-bold tracking-tight text-fg; }
  .sw-page-sub    { @apply mt-0.5 text-[13.5px] text-fg-subtle; }

  .sw-back-link {
    @apply inline-flex items-center gap-1 text-[13px] font-medium text-fg-muted no-underline hover:text-fg;
  }

  /* Sidebar nav item */
  .sw-nav-item {
    @apply flex items-center gap-3 rounded-md px-2.5 py-2
           text-[13.5px] font-medium text-fg-muted whitespace-nowrap cursor-pointer
           transition-colors
           hover:bg-muted hover:text-fg;
  }
  .sw-nav-item.active {
    @apply bg-accent-50 font-semibold text-accent;
  }

  /* Period switcher pill group */
  .sw-period-switcher {
    @apply inline-flex gap-0.5 rounded-full bg-muted p-[3px];
  }
  .sw-period-btn {
    @apply rounded-full bg-transparent px-3.5 py-1.5
           text-[12.5px] font-medium text-fg-muted cursor-pointer transition-all;
  }
  .sw-period-btn.active {
    @apply bg-card font-semibold text-fg shadow-xs;
  }

  /* Filter chip */
  .sw-chip {
    @apply rounded-full border border-border bg-card px-2.5 py-1
           text-xs font-semibold text-fg-muted cursor-pointer transition-colors
           hover:bg-muted;
  }
  .sw-chip.active {
    @apply border-accent bg-accent text-white hover:bg-accent;
  }

  /* Delta pills */
  .sw-delta-up   { @apply inline-flex items-center gap-1 rounded-full bg-warning/10 px-2.5 py-1 text-xs font-semibold text-warning; }
  .sw-delta-down { @apply inline-flex items-center gap-1 rounded-full bg-success/10 px-2.5 py-1 text-xs font-semibold text-success; }

  /* Banner (insight / info card) */
  .sw-banner {
    @apply flex items-center gap-3 rounded-xl border border-accent-100 bg-accent-50 p-3 text-[13.5px];
  }

  /* Search wrap (faux input) */
  .sw-search-wrap {
    @apply flex items-center gap-2 rounded-md bg-muted px-3 py-2
           text-[13px] text-fg-subtle cursor-text;
    min-width: 220px;
    max-width: 320px;
  }

  /* Auth */
  .sw-auth-body { @apply min-h-screen flex items-center justify-center bg-bg p-6; }
  .sw-auth-card { @apply w-full max-w-md rounded-2xl border border-border bg-card p-10 shadow-sm; }

  /* Shell layout */
  .sw-shell { @apply flex h-screen overflow-hidden bg-bg; }

  .sw-sidebar {
    width: var(--sw-sidebar-w);
    min-width: var(--sw-sidebar-w);
    @apply h-full bg-card border-e border-border flex flex-col py-5 px-4 shrink-0 overflow-hidden z-50;
    transition: width 220ms cubic-bezier(.32,.72,0,1),
                min-width 220ms cubic-bezier(.32,.72,0,1),
                padding 220ms cubic-bezier(.32,.72,0,1);
  }
  .sw-sidebar.collapsed {
    width: var(--sw-sidebar-w0);
    min-width: var(--sw-sidebar-w0);
    @apply px-3;
  }
  .sw-sidebar.collapsed :is(.sw-nav-label, .sw-nav-dot, .sw-logo-text, .sw-user-info, .sw-collapse-btn) {
    display: none;
  }
  .sw-sidebar.collapsed .sw-expand-btn { display: flex !important; }
  .sw-sidebar.collapsed .sw-nav-item { @apply justify-center !p-2.5; }
  .sw-sidebar.collapsed .sw-logo-row { @apply justify-center; }

  .sw-main { @apply flex-1 min-w-0 flex flex-col; }

  .sw-topbar {
    height: var(--sw-topbar-h);
    @apply px-6 bg-card border-b border-border flex items-center gap-4 shrink-0;
  }

  .sw-content {
    @apply flex-1 overflow-y-auto;
  }
  .sw-content::-webkit-scrollbar { width: 10px; }
  .sw-content::-webkit-scrollbar-track { background: transparent; }
  .sw-content::-webkit-scrollbar-thumb {
    background: rgb(120 120 128 / 0.25);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  .sw-content::-webkit-scrollbar-thumb:hover {
    background: rgb(120 120 128 / 0.5);
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .sw-backdrop { @apply fixed inset-0 bg-overlay z-40 hidden; }
  .sw-backdrop.visible { @apply block; }

  /* Transaction rows */
  .sw-tx-day-header {
    @apply px-4 pt-2 pb-1 text-[11.5px] font-semibold uppercase tracking-wide
           text-fg-subtle border-b border-border;
  }
  .sw-tx-row {
    @apply flex items-center gap-3 px-4 py-3 border-b border-border
           no-underline transition-colors hover:bg-muted/60;
  }
  .sw-tx-row:last-child { @apply border-b-0; }
  .sw-tx-name { @apply text-sm font-medium text-fg; }
  .sw-tx-meta {
    @apply mt-0.5 flex items-center gap-1.5 text-xs text-fg-subtle;
  }
  .sw-tx-amount {
    @apply ms-auto whitespace-nowrap text-sm font-semibold text-fg font-mono;
    font-variant-numeric: tabular-nums;
  }
  .sw-tx-credit { @apply text-success; }

  /* Merchant / category circular icon */
  .sw-merchant-avatar {
    @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-lg;
  }

  /* Badge variants */
  .sw-badge {
    @apply inline-flex items-center rounded-full border border-transparent px-1.5 py-0.5 text-[10.5px] font-semibold;
  }
  .sw-badge-pending    { @apply bg-warning/10 text-warning border-warning/20; }
  .sw-badge-recurring  { @apply bg-accent/10 text-accent border-accent/20; }
  .sw-badge-active     { @apply bg-success/10 text-success border-success/20; }
  .sw-badge-paused     { @apply bg-fg-subtle/10 text-fg-subtle border-fg-subtle/20; }
  .sw-badge-cancelled  { @apply bg-danger/10 text-danger border-danger/20; }
  .sw-badge-ended      { @apply bg-fg-subtle/10 text-fg-subtle border-fg-subtle/20; }
  .sw-badge-completed  { @apply bg-success/10 text-success border-success/20; }
  .sw-badge-failed     { @apply bg-danger/10 text-danger border-danger/20; }
  .sw-badge-archived   { @apply bg-fg-subtle/10 text-fg-subtle border-fg-subtle/20; }

  .sw-count-badge {
    @apply rounded-full bg-muted px-1.5 py-0.5 text-[11px] font-semibold text-fg-muted;
  }

  /* Detail list (key/value table) */
  .sw-detail-list { @apply m-0 list-none p-0; }
  .sw-detail-row {
    @apply flex items-baseline justify-between gap-3 px-5 py-3 border-b border-border;
  }
  .sw-detail-row:last-child { @apply border-b-0; }
  .sw-detail-row dt { @apply text-[13px] text-fg-subtle; }
  .sw-detail-row dd { @apply m-0 text-end text-[13.5px] font-medium text-fg; }

  /* Empty state */
  .sw-empty-state {
    @apply flex flex-col items-center justify-center px-6 py-16 text-center;
  }

  /* Pagination */
  .sw-pagination { @apply mt-5 flex justify-center gap-1 text-[13px]; }
  .sw-pagination a, .sw-pagination span {
    @apply rounded border border-border px-2.5 py-1.5 text-fg-muted no-underline;
  }
  .sw-pagination a:hover { @apply bg-muted text-fg; }
  .sw-pagination .current { @apply bg-accent text-white border-accent; }

  /* Locale switcher pills (topbar) */
  .sw-locale-btn {
    @apply rounded-md px-2 py-0.5 text-xs font-semibold text-fg-muted no-underline transition-colors hover:text-fg;
  }
  .sw-locale-btn.active { @apply bg-muted text-fg; }
}

/* ── Responsive: collapse sidebar at md, hide at sm ──────────────── */
@media (max-width: 1023px) {
  .sw-sidebar:not(.mobile-open) {
    width: var(--sw-sidebar-w0) !important;
    min-width: var(--sw-sidebar-w0) !important;
    padding-inline: 0.75rem !important;
  }
  .sw-sidebar:not(.mobile-open) :is(.sw-nav-label, .sw-nav-dot, .sw-logo-text, .sw-user-info, .sw-collapse-btn) {
    display: none !important;
  }
  .sw-sidebar:not(.mobile-open) .sw-expand-btn { display: flex !important; }
  .sw-sidebar:not(.mobile-open) .sw-nav-item { justify-content: center !important; padding: 0.625rem !important; }
  .sw-sidebar:not(.mobile-open) .sw-logo-row { justify-content: center !important; }
}

@media (max-width: 719px) {
  .sw-sidebar:not(.mobile-open) { display: none !important; }
  .sw-sidebar.mobile-open {
    position: fixed; top: 0; inset-inline-start: 0; height: 100%;
    box-shadow: var(--shadow-md);
    width: var(--sw-sidebar-w) !important;
    min-width: var(--sw-sidebar-w) !important;
    padding: 1.25rem 1rem !important;
  }
  .sw-search-wrap { display: none !important; }
  .sw-content { padding: 1.25rem 1rem 5rem !important; }
}