BillTracker/client/index.css

/* ============================================================
   Bill Tracker — Material Design theme via shadcn/studio
   :root is the default Material Design light theme.
   ============================================================ */

/* ── Georgia for digits only ─────────────────────────────── */

@font-face {
  font-family: 'GeorgiaDigits';
  src: local('Georgia');
  unicode-range:
    U+0030-U+0039,  /* 0–9 */
    U+002C,         /* , thousands separator */
    U+002E,         /* . decimal point */
    U+002D,         /* - minus / hyphen */
    U+002B,         /* + plus */
    U+0025,         /* % percent */
    U+0024,         /* $ dollar */
    U+00A2,         /* ¢ cent */
    U+00A3,         /* £ pound */
    U+00A5,         /* ¥ yen */
    U+20AC;         /* € euro */
}

/* ── Tailwind base ───────────────────────────────────────── */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0.985 0.006 235;
    --foreground: 0.185 0.018 238;
    --card: 0.998 0.003 238;
    --card-foreground: 0.185 0.018 238;
    --popover: 1.00 0 0;
    --popover-foreground: 0.185 0.018 238;
    --primary: 0.64 0.17 154;
    --primary-foreground: 0.985 0.006 154;
    --secondary: 0.94 0.010 235;
    --secondary-foreground: 0.245 0.018 238;
    --muted: 0.945 0.009 235;
    --muted-foreground: 0.44 0.016 238;
    --accent: 0.925 0.020 184;
    --accent-foreground: 0.205 0.020 190;
    --destructive: 0.58 0.21 22;
    --destructive-foreground: 0.99 0.003 250;
    --border: 0.875 0.010 235;
    --input: 0.875 0.010 235;
    --ring: 0.64 0.15 154;
    --chart-1: 0.62 0.17 154;
    --chart-2: 0.58 0.13 195;
    --chart-3: 0.64 0.16 65;
    --chart-4: 0.62 0.17 335;
    --chart-5: 0.55 0.11 250;
    --sidebar: 0.965 0.008 235;
    --sidebar-foreground: 0.22 0.018 238;
    --sidebar-primary: 0.64 0.17 154;
    --sidebar-primary-foreground: 0.985 0.006 154;
    --sidebar-accent: 0.925 0.020 184;
    --sidebar-accent-foreground: 0.205 0.020 190;
    --sidebar-border: 0.875 0.010 235;
    --sidebar-ring: 0.64 0.15 154;
    --font-sans: 'GeorgiaDigits', Inter, Roboto, ui-sans-serif, system-ui, sans-serif;
    --font-serif: Merriweather, ui-serif, serif;
    --font-mono: 'GeorgiaDigits', "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --radius: 1rem;
  }

  .dark {
    --background: 0.145 0.018 238;
    --foreground: 0.962 0.008 235;
    --card: 0.205 0.020 238;
    --card-foreground: 0.962 0.008 235;
    --popover: 0.235 0.022 238;
    --popover-foreground: 0.962 0.008 235;
    --primary: 0.72 0.15 154;
    --primary-foreground: 0.145 0.020 154;
    --secondary: 0.275 0.020 238;
    --secondary-foreground: 0.94 0.008 235;
    --muted: 0.275 0.018 238;
    /* Secondary text. Raised 0.76 → 0.85 — at 0.76 labels and hints sat too
       close to the card background (L 0.235) and strained the eyes. */
    --muted-foreground: 0.85 0.012 245;
    --accent: 0.33 0.050 184;
    --accent-foreground: 0.965 0.008 235;
    --destructive: 0.66 0.18 26;
    --destructive-foreground: 0.98 0.004 245;
    --border: 0.37 0.020 238;
    --input: 0.37 0.020 238;
    --ring: 0.72 0.14 154;
    --chart-1: 0.72 0.15 154;
    --chart-2: 0.70 0.12 195;
    --chart-3: 0.75 0.15 68;
    --chart-4: 0.70 0.16 340;
    --chart-5: 0.68 0.10 250;
    --sidebar: 0.165 0.018 238;
    --sidebar-foreground: 0.95 0.008 235;
    --sidebar-primary: 0.72 0.15 154;
    --sidebar-primary-foreground: 0.145 0.020 154;
    --sidebar-accent: 0.30 0.045 184;
    --sidebar-accent-foreground: 0.95 0.008 235;
    --sidebar-border: 0.34 0.020 238;
    --sidebar-ring: 0.72 0.14 154;
  }

  * {
    @apply border-border;
  }

  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-background font-sans text-foreground antialiased;
    letter-spacing: 0;
  }

  ::selection {
    color: oklch(var(--primary-foreground));
    background: oklch(var(--primary) / 0.75);
  }

  strong {
    @apply font-semibold text-foreground;
  }
}

/* ── Utilities ───────────────────────────────────────────── */

@layer utilities {

  /* Generic surface */
  .surface {
    @apply rounded-xl border border-border/75 bg-card/95 shadow-sm shadow-black/10;
  }

  /* Elevated surface */
  .surface-elevated {
    @apply surface backdrop-blur-sm;
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.05),
      0 10px 30px rgb(15 23 42 / 0.07);
  }

  .dark .surface-elevated {
    box-shadow:
      0 0 0 1px oklch(var(--border) / 0.70),
      0 14px 34px rgb(0 0 0 / 0.42);
  }

  .surface-premium {
    @apply rounded-xl border border-border/75 bg-card/95 shadow-sm shadow-black/10 backdrop-blur-sm;
  }

  .dark .surface-premium {
    box-shadow:
      0 0 0 1px oklch(var(--border) / 0.55),
      0 12px 30px rgb(0 0 0 / 0.34);
  }

  .metric-card {
    @apply relative min-h-[7.75rem] overflow-hidden rounded-xl border border-border/75 bg-card/95 px-4 py-4 shadow-sm shadow-black/10 sm:px-5;
  }

  .metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: currentColor;
    opacity: 0.24;
  }

  /* Stat cards */
  .stat-card {
    @apply surface-elevated p-6;
  }

  /* Table */
  .table-surface {
    @apply surface-premium overflow-hidden;
  }

  .tracker-number {
    font-family: 'GeorgiaDigits', Inter, Roboto, ui-sans-serif, system-ui, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
  }

  .metric-value {
    @apply tracker-number font-bold tracking-tight text-foreground;
    overflow-wrap: anywhere;
  }


  /* Faded muted-text variants: keep them readable in dark mode — Tailwind's
     raw /40–/70 alphas dissolve into the background. */
  .dark .text-muted-foreground\/40 {
    color: oklch(var(--muted-foreground) / 0.8);
  }

  .dark .text-muted-foreground\/50 {
    color: oklch(var(--muted-foreground) / 0.85);
  }

  .dark .text-muted-foreground\/60 {
    color: oklch(var(--muted-foreground) / 0.9);
  }

  .dark .text-muted-foreground\/70 {
    color: oklch(var(--muted-foreground) / 0.95);
  }

  /* Custom Scrollbar */
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  .scrollbar-thumb-muted {
    scrollbar-color: oklch(var(--muted) / 0.3) transparent;
  }
  .scrollbar-track-transparent {
    scrollbar-color: oklch(var(--muted) / 0.3) transparent;
  }
  .scrollbar-thumb-muted::-webkit-scrollbar-thumb {
    background-color: oklch(var(--muted) / 0.3);
    border-radius: 8px;
  }
  .scrollbar-track-transparent::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .scrollbar-thumb-muted::-webkit-scrollbar-thumb:hover {
    background-color: oklch(var(--muted) / 0.5);
  }
}

@media print {
  body {
    background: white !important;
    color: #111827 !important;
  }

  header,
  .analytics-screen-header,
  .analytics-controls,
  .analytics-actions,
  .summary-screen-header,
  .summary-controls,
  .summary-actions,
  .summary-reorder-controls,
  .summary-edit-actions,
  .summary-income-form,
  .tracker-print-hide {
    display: none !important;
  }

  /* Tracker printout: don't split a bill row across a page boundary. */
  [data-tracker-row] {
    break-inside: avoid;
  }

  main,
  main > div {
    max-width: none !important;
    padding: 0 !important;
  }

  .analytics-page,
  .summary-page {
    color: #111827 !important;
  }

  .analytics-report-meta,
  .analytics-print-footer,
  .summary-print-meta,
  .summary-print-footer {
    display: block !important;
    margin-bottom: 1rem;
  }

  .analytics-report-meta h1,
  .summary-print-meta h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }

  .analytics-report-meta p,
  .analytics-print-footer,
  .summary-print-meta p,
  .summary-print-footer {
    color: #4b5563 !important;
    font-size: 12px;
    margin: 0.125rem 0;
  }

  .analytics-range {
    margin-bottom: 1rem;
  }

  .summary-page input {
    border: 0 !important;
    background: white !important;
    box-shadow: none !important;
    color: #111827 !important;
    padding-left: 0 !important;
  }

  .summary-expense-row {
    grid-template-columns: minmax(0, 1fr) 7.5rem 5.5rem !important;
  }

  .analytics-chart-grid {
    display: block !important;
  }

  .analytics-chart,
  .summary-card,
  .summary-chart-card {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    background: white !important;
  }
}