/* Hisaabu Lite — shared design tokens and component classes (Phase 7, D-01/D-02/D-05/D-07)
   Pure CSS, zero server-side coupling: no reference to any backend module or config file. */

:root {
  --navy: #0d2057;
  --sky: #29abe2;
  --accent-strong: #0e7490;
  --line: #e4e7ec;
  --ink: #101828;
  --muted: #667085;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --warn: #b45309; /* same hex the views' .msg.warn rule already uses */
  --warn-bg: #fffbeb; /* NEW — the one genuinely new value this phase introduces */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #f8fafc;
}

/* Tabular numerals for GST/amount figures (D-07, locked verbatim) */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Shared card surface */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Nav */
nav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
nav a {
  flex: 1;
  min-width: 70px;
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: #eef2ff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
nav a.active {
  background: var(--accent-strong);
  color: #fff;
}

/* Button/interaction states — compositor-friendly properties only */
button, .btn {
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
button:active, .btn:active {
  transform: translateY(1px);
}

/* Primary CTA */
.btn-primary {
  background: var(--accent-strong);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  padding: 14px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
}
.btn-primary:disabled {
  opacity: .6;
  cursor: default;
}
.btn-primary:hover {
  box-shadow: 0 2px 8px rgba(14, 116, 144, 0.25);
}

/* Typography scale (4 roles, 2 weights) */
.text-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.text-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.text-heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.text-display {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

/* Dropzone (D-06) — label-wrapped hidden file input */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 96px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--sky);
  background: #f0f9ff;
}
.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone-icon {
  width: 24px;
  height: 24px;
  color: var(--sky);
}
.dropzone-text {
  font-size: 14px;
  color: var(--muted);
}
.dropzone-filename {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

/* Phase 8 — AI receipt scanning (D-02 Scan button, D-03 low-confidence flag) */
.btn-scan {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #fff;
  color: var(--accent-strong);
  border: 1.5px solid var(--accent-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin: var(--space-3) 0;
  transition: background-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.btn-scan.show { display: flex; }
.btn-scan:hover { background: #f0f9ff; }
.btn-scan:disabled { opacity: .6; cursor: default; }

.btn-scan-spinner {
  width: 16px;
  height: 16px;
  animation: btn-scan-spin 900ms linear infinite;
}
@keyframes btn-scan-spin { to { transform: rotate(360deg); } }

.scan-status {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin: -8px 0 var(--space-3);
}

.field-uncertain {
  border-color: var(--warn) !important;
  background: var(--warn-bg);
}
.scan-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
  margin: -8px 0 var(--space-3);
}
@keyframes fill-flash { from { background-color: #f0f9ff; } to { background-color: transparent; } }
.field-autofilled { animation: fill-flash var(--duration-normal) var(--ease-out); }