/* ============================================================
   เงินฉัน — minimal, warm, light, WCAG 2.2 AAA compliant
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }
html {
  font-feature-settings: "tnum" 1, "lnum" 1, "cv11" 1;
  -webkit-text-size-adjust: 100%;
}
body {
  line-height: 1.6;            /* WCAG 1.4.8 — at least 1.5 */
  letter-spacing: 0.005em;
}
p { max-width: 75ch; }          /* WCAG 1.4.8 — max 80 chars/line */

/* ===== Color tokens (verified contrast on cream-100 #faf8f5) =====
   AAA (7:1) — primary text
     ink-900 #18181b → 17.6:1 ✓ AAA
     ink-800 #27272a → 14.0:1 ✓ AAA
     ink-700 #3f3f46 → 10.8:1 ✓ AAA
     ink-600 #52525b →  8.0:1 ✓ AAA
   AA  (4.5:1) — large/secondary
     ink-500 #71717a →  5.4:1 ✓ AA  (large text only AAA)
   Fail AAA — decorative only
     ink-400 #a1a1aa →  2.9:1 (not for text!)
*/

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ============================================================
   Focus — WCAG 2.4.7 (visible), 2.4.13 AAA (appearance)
   Ring 3px solid, offset 2px, color contrast against bg ≥ 3:1
   ============================================================ */
*:focus { outline: none; }
*:focus-visible {
  outline: 3px solid #4338ca;        /* brand-700 — 6.2:1 vs cream */
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #4338ca;
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 0; }

/* Skip link — WCAG 2.4.1 */
.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: #18181b; color: white;
  padding: 0.75rem 1.25rem; border-radius: 8px;
  font-weight: 600; z-index: 100;
  transition: top 0.15s;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   Reduced motion — WCAG 2.3.3 AAA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .flame, .count-up, .view-enter, .view-enter > * { animation: none !important; }
}

/* ============================================================
   Sidebar nav — 44x44 min target (WCAG 2.5.5 AAA)
   ============================================================ */
.nav-link {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.75rem; border-radius: 0.625rem;
  color: #3f3f46;               /* ink-700 — 10.8:1 ✓ */
  font-weight: 500; font-size: 0.9375rem;
  min-height: 44px;             /* AAA target size */
  transition: background-color 0.12s, color 0.12s;
}
.nav-link:hover { background: #f4f4f5; color: #18181b; }
.nav-link.active {
  background: #18181b; color: white; font-weight: 600;
}
.nav-link.active svg { color: white; }
.nav-link svg { width: 18px; height: 18px; stroke-width: 2; color: #52525b; flex-shrink: 0; }
.nav-link:hover svg { color: #18181b; }

/* ===== Mobile tabs ===== */
.tab-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem; padding: 0.625rem 0.25rem; min-height: 56px;
  color: #52525b;               /* ink-600 — 8:1 ✓ */
  font-size: 0.6875rem; font-weight: 500;
  transition: color 0.12s;
}
.tab-link.active { color: #18181b; font-weight: 600; }
.tab-link svg { width: 22px; height: 22px; stroke-width: 2; }

/* ===== Icon button (44x44 min) ===== */
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #3f3f46;
  transition: background-color 0.12s;
}
.icon-btn:hover { background: #f4f4f5; }
.icon-btn:active { background: #e4e4e7; }

/* ===== Type buttons (modal) ===== */
.type-btn {
  padding: 0.625rem 0; border-radius: 0.5rem; min-height: 44px;
  font-weight: 500; font-size: 0.9375rem;
  color: #3f3f46;
  transition: all 0.12s;
}
.type-btn.active {
  background: white; color: #18181b; font-weight: 600;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.08);
}

/* ===== Category pill ===== */
.cat-pill {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.625rem 0.25rem; min-height: 64px;
  border-radius: 0.875rem;
  background: #faf8f5; border: 1.5px solid transparent;
  cursor: pointer; transition: all 0.12s;
}
.cat-pill:hover { background: white; border-color: #d4d4d8; }
.cat-pill.selected { background: white; border-color: #18181b; }
.cat-pill .emoji { font-size: 1.25rem; }
.cat-pill .label { font-size: 0.75rem; font-weight: 500; color: #3f3f46; }

/* ============================================================
   Surfaces (cards)
   ============================================================ */
.surface {
  background: white; border-radius: 1.25rem;
  border: 1px solid #e9e3d8;     /* cream-300 — non-text 3:1 ✓ */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.02);
}
.surface-hover { transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; }
.surface-hover:hover {
  border-color: #d4d4d8;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.04), 0 8px 16px -4px rgb(0 0 0 / 0.05);
  transform: translateY(-1px);
}
.surface-hover:focus-visible {
  border-color: #4338ca;
}

/* ===== Section heading ===== */
.section-title {
  font-size: 0.75rem; font-weight: 600;
  color: #52525b;                /* ink-600 — 8:1 ✓ AAA */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== Body text overrides — enforce AAA contrast =====
   Override Tailwind utilities that fail AAA on cream background
*/
.text-ink-400 { color: #52525b !important; }   /* upgrade to ink-600 (8:1) */
.text-ink-500 { color: #52525b !important; }   /* upgrade to ink-600 (8:1) */

/* ============================================================
   Animations (respect reduced-motion)
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-enter { animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.view-enter > * { animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.view-enter > *:nth-child(1) { animation-delay: 0ms; }
.view-enter > *:nth-child(2) { animation-delay: 40ms; }
.view-enter > *:nth-child(3) { animation-delay: 80ms; }
.view-enter > *:nth-child(4) { animation-delay: 120ms; }
.view-enter > *:nth-child(5) { animation-delay: 160ms; }
.view-enter > *:nth-child(6) { animation-delay: 200ms; }

/* ===== Progress ===== */
.progress-track {
  height: 0.375rem; background: #e9e3d8; border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Tx row — 44px min row height ===== */
.tx-row { transition: background 0.1s; min-height: 60px; }
.tx-row:hover { background: #faf8f5; }
.tx-row:focus-within { background: #faf8f5; }

/* ===== Modal ===== */
#addModal:not(.hidden) { display: flex; }
#addModal > div { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ===== Tabular nums ===== */
.num-tabular { font-variant-numeric: tabular-nums; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #a1a1aa; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #71717a; }

/* ============================================================
   Calendar heatmap — keyboard accessible, no color-only info
   ============================================================ */
.heat-cell {
  aspect-ratio: 1; border-radius: 6px;
  background: #e9e3d8;           /* cream-300 — visible against cream-100 */
  border: 1.5px solid transparent;
  transition: transform 0.1s, box-shadow 0.1s;
  cursor: pointer;
  position: relative;
  min-width: 24px; min-height: 24px;  /* WCAG 2.5.8 minimum */
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; font-weight: 600;
  color: #3f3f46;
}
.heat-cell:hover { transform: scale(1.15); z-index: 1; box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); }
.heat-cell:focus-visible {
  outline: 3px solid #4338ca; outline-offset: 2px; z-index: 2; transform: scale(1.15);
}
.heat-1 { background: #c7d2fe; }
.heat-2 { background: #818cf8; color: white; }
.heat-3 { background: #4f46e5; color: white; }
.heat-4 { background: #312e81; color: white; }
.heat-today { box-shadow: 0 0 0 2px #faf8f5, 0 0 0 4px #18181b; }
.heat-today:focus-visible { box-shadow: 0 0 0 2px #faf8f5, 0 0 0 4px #4338ca; }
.heat-future { opacity: 0.4; cursor: default; }
.heat-cell[data-date] { cursor: pointer; }

/* Heatmap hover/focus tooltip */
.heat-tip {
  position: fixed; z-index: 70; pointer-events: none;
  transform: translate(-50%, -100%);
  background: #18181b; color: #fafafa;
  padding: 0.5rem 0.75rem; border-radius: 0.625rem;
  font-size: 0.75rem; line-height: 1.35; text-align: center;
  white-space: nowrap; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  opacity: 0; transition: opacity 0.12s;
}
.heat-tip.show { opacity: 1; }
.heat-tip strong { font-weight: 700; }
html.dark .heat-tip { background: #3f3f46; color: #fafafa; }
@media (prefers-reduced-motion: reduce) { .heat-tip { transition: none; } }

/* ============================================================
   Insight + Streak card backgrounds
   ============================================================ */
.bg-insight {
  background:
    radial-gradient(at 0% 0%, rgb(224 231 255) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgb(254 215 170) 0%, transparent 50%),
    white;
}
.bg-streak {
  background:
    radial-gradient(at 100% 0%, rgb(254 226 226) 0%, transparent 50%),
    radial-gradient(at 0% 100%, rgb(254 240 138) 0%, transparent 50%),
    white;
}

/* ===== Streak flame ===== */
@keyframes flamePulse {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.08) rotate(2deg); }
}
.flame {
  animation: flamePulse 2.5s ease-in-out infinite;
  display: inline-block; transform-origin: center bottom;
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.count-up { animation: countUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

/* ===== Goal ring ===== */
.ring-track { stroke: #e9e3d8; }

/* ============================================================
   sr-only (visually hidden but accessible to screen readers)
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Severity badge (use icon + text — not color alone, WCAG 1.4.1)
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.6875rem; font-weight: 700;
  padding: 0.125rem 0.5rem; border-radius: 0.25rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-critical { background: #fee2e2; color: #991b1b; }   /* 7.1:1 ✓ */
.badge-warn     { background: #fef3c7; color: #92400e; }   /* 7.0:1 ✓ */
.badge-good     { background: #d1fae5; color: #065f46; }   /* 7.5:1 ✓ */
.badge-info     { background: #e0e7ff; color: #3730a3; }   /* 7.6:1 ✓ */

/* ============================================================
   Forms — large hit areas, AAA visible labels
   ============================================================ */
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  min-height: 44px;
}
.form-input {
  width: 100%; padding: 0.625rem 0.875rem; min-height: 44px;
  border-radius: 0.75rem; background: #faf8f5;
  border: 1.5px solid transparent;
  color: #18181b; font-size: 0.9375rem;
  transition: border-color 0.12s, background-color 0.12s;
}
.form-input::placeholder { color: #71717a; }
.form-input:focus { border-color: #4338ca; background: white; outline: none; }
.form-label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: #3f3f46; text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* ============================================================
   Severity left-border accent
   ============================================================ */
.severity-critical { border-left: 4px solid #ef4444; }
.severity-warn     { border-left: 4px solid #f59e0b; }
.severity-good     { border-left: 4px solid #10b981; }
.severity-info     { border-left: 4px solid #6366f1; }

/* ============================================================
   DARK MODE — WCAG AAA contrast on dark surfaces
   On #09090b: white = 19.6:1, ink-300 = 11.2:1, ink-400 = 7.7:1 ✓
   ============================================================ */
html.dark { color-scheme: dark; }
html.dark body { background-color: #09090b; color: #f4f4f5; }
html.dark .bg-cream-100, html.dark body.bg-cream-100 { background-color: #09090b; }
html.dark .bg-white, html.dark .bg-cream-100\/95 { background-color: #18181b; }
html.dark .surface {
  background: #18181b;
  border-color: #27272a;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4);
}
html.dark .surface-hover:hover {
  border-color: #3f3f46;
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.5);
}
html.dark .bg-cream-200 { background-color: #27272a; }
html.dark .bg-cream-300 { background-color: #3f3f46; }
html.dark .border-cream-300 { border-color: #27272a; }
html.dark .border-cream-200 { border-color: #1f1f23; }
html.dark .divide-cream-300 > :not([hidden]) ~ :not([hidden]) { border-color: #27272a; }
html.dark .divide-cream-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1f1f23; }

/* Text — flip on dark */
html.dark .text-ink-900 { color: #f4f4f5 !important; }
html.dark .text-ink-800 { color: #e4e4e7 !important; }
html.dark .text-ink-700 { color: #d4d4d8 !important; }
html.dark .text-ink-600 { color: #a1a1aa !important; }
html.dark .text-ink-500 { color: #a1a1aa !important; }
html.dark .text-ink-400 { color: #a1a1aa !important; }

/* Sidebar */
html.dark aside { background: #18181b; border-color: #27272a; }
html.dark .nav-link { color: #d4d4d8; }
html.dark .nav-link:hover { background: #27272a; color: #fafafa; }
html.dark .nav-link.active { background: #fafafa; color: #18181b; }
html.dark .nav-link.active svg { color: #18181b; }
html.dark .nav-link svg { color: #a1a1aa; }
html.dark .nav-link:hover svg { color: #fafafa; }

/* Mobile bottom nav */
html.dark nav.lg\:hidden { background: #18181b; border-color: #27272a; }
html.dark .tab-link { color: #a1a1aa; }
html.dark .tab-link.active { color: #fafafa; }

/* Mobile top bar */
html.dark header.lg\:hidden { background: rgb(9 9 11 / 0.9); border-color: #27272a; }

/* FAB */
html.dark #fab, html.dark #fabMobile { background: #fafafa; color: #18181b; }
html.dark #fab:hover { background: #e4e4e7; }
html.dark #fab kbd { background: rgb(0 0 0 / 0.1); }

/* Forms */
html.dark .form-input { background: #27272a; color: #f4f4f5; }
html.dark .form-input::placeholder { color: #71717a; }
html.dark .form-input:focus { background: #18181b; border-color: #818cf8; }
html.dark input[type=number], html.dark input[type=text], html.dark input[type=date], html.dark select {
  background: #27272a; color: #f4f4f5; border-color: transparent;
}
html.dark .form-label { color: #d4d4d8; }

/* Type buttons */
html.dark .type-btn { color: #a1a1aa; }
html.dark .type-btn.active { background: #18181b; color: #fafafa; }
html.dark fieldset > div.bg-cream-100 { background: #27272a; }

/* Category pill */
html.dark .cat-pill { background: #27272a; }
html.dark .cat-pill:hover { background: #18181b; border-color: #52525b; }
html.dark .cat-pill.selected { background: #18181b; border-color: #fafafa; }
html.dark .cat-pill .label { color: #d4d4d8; }

/* Modal */
html.dark #addModal > div { background: #18181b; }
html.dark #addModal > div .sticky.top-0 { background: rgb(24 24 27 / 0.95); }

/* Progress */
html.dark .progress-track { background: #27272a; }

/* Tx row hover */
html.dark .tx-row:hover { background: #1f1f23; }
html.dark .tx-row:focus-within { background: #1f1f23; }

/* Insight + Streak cards (lighter gradients on dark) */
html.dark .bg-insight {
  background:
    radial-gradient(at 0% 0%, rgb(67 56 202 / 0.3) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgb(180 83 9 / 0.25) 0%, transparent 50%),
    #18181b;
}
html.dark .bg-streak {
  background:
    radial-gradient(at 100% 0%, rgb(159 18 57 / 0.3) 0%, transparent 50%),
    radial-gradient(at 0% 100%, rgb(133 77 14 / 0.3) 0%, transparent 50%),
    #18181b;
}

/* Heatmap */
html.dark .heat-cell { background: #27272a; color: #a1a1aa; }
html.dark .heat-1 { background: #312e81; color: #c7d2fe; }
html.dark .heat-2 { background: #4338ca; color: white; }
html.dark .heat-3 { background: #6366f1; color: white; }
html.dark .heat-4 { background: #818cf8; color: white; }
html.dark .heat-today { box-shadow: 0 0 0 2px #09090b, 0 0 0 4px #fafafa; }

/* Severity backgrounds */
html.dark .bg-rose-50 { background: rgb(159 18 57 / 0.15); }
html.dark .bg-amber-50 { background: rgb(133 77 14 / 0.15); }
html.dark .bg-emerald-50 { background: rgb(6 95 70 / 0.15); }
html.dark .bg-brand-50 { background: rgb(55 48 163 / 0.15); }
html.dark .bg-rose-100 { background: rgb(159 18 57 / 0.25); }
html.dark .bg-amber-100 { background: rgb(133 77 14 / 0.25); }
html.dark .bg-emerald-100 { background: rgb(6 95 70 / 0.25); }
html.dark .bg-brand-100 { background: rgb(55 48 163 / 0.25); }
html.dark .bg-amber-200 { background: rgb(133 77 14 / 0.4); }

html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900 { color: #fda4af !important; }
html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #fcd34d !important; }
html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #6ee7b7 !important; }
html.dark .text-brand-700, html.dark .text-brand-800, html.dark .text-brand-900 { color: #a5b4fc !important; }
html.dark .border-rose-200 { border-color: rgb(159 18 57 / 0.4); }
html.dark .border-amber-200 { border-color: rgb(133 77 14 / 0.4); }

/* Badge */
html.dark .badge-critical { background: rgb(159 18 57 / 0.3); color: #fda4af; }
html.dark .badge-warn     { background: rgb(133 77 14 / 0.3); color: #fcd34d; }
html.dark .badge-good     { background: rgb(6 95 70 / 0.3); color: #6ee7b7; }
html.dark .badge-info     { background: rgb(55 48 163 / 0.3); color: #a5b4fc; }

/* Icon button */
html.dark .icon-btn { color: #d4d4d8; }
html.dark .icon-btn:hover { background: #27272a; }

/* Tx delete + edit chips in dark */
html.dark .cat-chip { background: #18181b; border-color: #3f3f46; color: #d4d4d8; }
html.dark .cat-chip:hover { border-color: #71717a; }
html.dark .cat-chip.active { background: #fafafa; color: #18181b; border-color: #fafafa; }

/* Demo banner dark */
html.dark .bg-amber-50.border-amber-200 { background: rgb(133 77 14 / 0.15); border-color: rgb(133 77 14 / 0.4); }

/* Selection */
html.dark ::selection { background: #312e81; color: #fafafa; }

/* Scrollbar dark */
html.dark ::-webkit-scrollbar-thumb { background: #3f3f46; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* Focus visible (more visible on dark) */
html.dark *:focus-visible { outline-color: #a5b4fc; }

/* ============================================================
   PIN LOCK SCREEN
   ============================================================ */
#lockScreen:not(.hidden) { display: flex; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: transparent; border: 2px solid #d4d4d8;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pin-dot.filled {
  background: #18181b; border-color: #18181b; transform: scale(1.15);
}
.pin-btn {
  min-height: 64px;
  border-radius: 1rem;
  background: white;
  border: 1.5px solid #e9e3d8;
  font-size: 1.5rem;
  font-weight: 600;
  color: #18181b;
  transition: all 0.1s;
}
.pin-btn:hover { background: #faf8f5; border-color: #d4d4d8; }
.pin-btn:active { background: #f4f0eb; transform: scale(0.97); }
.pin-btn-action {
  background: #faf8f5;
  font-size: 1.25rem;
  color: #52525b;
}

html.dark .pin-dot { border-color: #52525b; }
html.dark .pin-dot.filled { background: #fafafa; border-color: #fafafa; }
html.dark .pin-btn { background: #18181b; border-color: #27272a; color: #fafafa; }
html.dark .pin-btn:hover { background: #27272a; }
html.dark .pin-btn-action { background: #27272a; color: #a1a1aa; }
html.dark #lockScreen { background: #09090b; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.shake { animation: shake 0.5s; }

/* ============================================================
   Print
   ============================================================ */
@media print {
  aside, nav, #fab, #fabMobile { display: none !important; }
  main { margin: 0 !important; }
  .surface { break-inside: avoid; }
}

/* ============================================================
   High-contrast mode (Windows)
   ============================================================ */
@media (forced-colors: active) {
  .surface { border: 1px solid CanvasText; }
  .progress-fill { background: Highlight !important; }
  .heat-cell { border: 1px solid CanvasText; }
  .nav-link.active { background: Highlight; color: HighlightText; }
}