/* NUMIO theme (nomio-design skill). Loaded after static/style.css on every
   page (with static/nomio-theme.js); restyles every page by remapping the app's
   existing CSS variables to the nomio-design tokens and overriding the shared
   components (sidebar, forms, buttons, tables, stat cards). Screen only -
   printed invoices/reports are untouched. */

@font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/doc/inter-6ab57b19.woff2") format("woff2"); }
/* Azeret Mono (Google Fonts, OFL): fixed-width digits with a plain 0 - no slash or dot. */
@font-face { font-family: "Azeret Mono"; font-weight: 400 600; font-display: swap; src: url("fonts/azeret-mono.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --color-accent: #2563EB; --color-accent-hover: #1D4ED8; --color-accent-muted: #DBEAFE;
  --color-bg: #F8F9FA; --color-surface: #FFFFFF; --color-surface-raised: #F1F3F5;
  --color-border: #E2E8F0; --color-border-strong: #CBD5E1;
  --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-text-muted: #94A3B8;
  --color-success: #16A34A; --color-success-bg: #DCFCE7; --color-warning: #D97706; --color-warning-bg: #FEF3C7;
  --color-danger: #DC2626; --color-danger-bg: #FEE2E2; --color-info: #0284C7; --color-info-bg: #E0F2FE;
  --color-sidebar-bg: #1E293B; --color-sidebar-text: #CBD5E1; --color-sidebar-text-active: #FFFFFF;
  --color-sidebar-active-bg: #2563EB; --color-sidebar-hover-bg: #334155;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, monospace;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);

  /* the app's own variables, mapped onto the tokens */
  --bg: var(--color-bg); --panel: var(--color-surface); --border: var(--color-border);
  --text: var(--color-text-primary); --muted: var(--color-text-secondary);
  --accent: var(--color-accent); --accent-hover: var(--color-accent-hover);
  --danger: var(--color-danger); --danger-hover: #B91C1C; --success: var(--color-success);
  --warning: var(--color-warning); --warning-bg: var(--color-warning-bg);
  --header-bg: var(--color-surface-raised); --total-bg: var(--color-accent-muted);
  --sidebar-width: 240px;
  color-scheme: light;
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0F172A; --color-surface: #1E293B; --color-surface-raised: #273549;
    --color-border: #334155; --color-border-strong: #475569;
    --color-text-primary: #F1F5F9; --color-text-secondary: #94A3B8; --color-text-muted: #64748B;
    --color-accent-muted: #1E3A5F; --color-sidebar-bg: #0B1222; --color-sidebar-hover-bg: #1E293B;
    --color-success-bg: #14321F; --color-warning-bg: #3A2A0B; --color-danger-bg: #3B1717; --color-info-bg: #0C2A3D;
    --danger-hover: #EF4444; color-scheme: dark;
  }
}
@media screen { :root[data-theme="dark"] {
  --color-bg: #0F172A; --color-surface: #1E293B; --color-surface-raised: #273549;
  --color-border: #334155; --color-border-strong: #475569;
  --color-text-primary: #F1F5F9; --color-text-secondary: #94A3B8; --color-text-muted: #64748B;
  --color-accent-muted: #1E3A5F; --color-sidebar-bg: #0B1222; --color-sidebar-hover-bg: #1E293B;
  --color-success-bg: #14321F; --color-warning-bg: #3A2A0B; --color-danger-bg: #3B1717; --color-info-bg: #0C2A3D;
  --danger-hover: #EF4444; color-scheme: dark;
} }
:root[data-theme="light"] { color-scheme: light; }

@media screen {
  body { font-family: var(--font-sans); font-size: .9375rem; line-height: 1.55; -webkit-font-smoothing: antialiased; background: var(--color-bg); }
  body::after { display: none; } /* NUMIO badge now lives in the sidebar */

  /* ---------- sidebar ---------- */
  .nav { background: var(--color-sidebar-bg); border-right: 0; padding: 0 12px 12px; gap: 1px; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
  .nt-brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 12px 16px; margin: 0 -12px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nt-mark { width: 34px; height: 34px; display: block; flex-shrink: 0; }
  /* The NUMIO logo is transparent and reads on dark backgrounds - no white backing in dark mode
     (a company logo on the desktop sign-in page keeps its backing). */
  img.auth-logo[src$="/logo.png"], img.landing-logo { background: none !important; padding: 0 !important; border-radius: 0 !important; }
  .nt-word { color: #fff; font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; }
  .nt-company { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 0 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); }
  .nt-company .nav-logo { width: 38px; height: 38px; margin: 0; background: #fff; border-radius: var(--radius-sm); padding: 3px; }
  .nt-company span { color: var(--color-sidebar-text); font-size: .75rem; font-weight: 600; line-height: 1.3; }
  .nav-link { display: flex; align-items: center; gap: 10px; color: var(--color-sidebar-text); font-weight: 500; font-size: .875rem; padding: 7px 10px; border-radius: var(--radius-sm); transition: background .15s, color .15s; }
  .nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; }
  .nav-link:hover { background: var(--color-sidebar-hover-bg); color: #fff; }
  .nav-link.active { background: var(--color-sidebar-active-bg); color: #fff; }
  .nav-link.active svg { opacity: 1; }
  .nt-section { color: #64748B; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 14px 10px 4px; }
  .nav-spacer { min-height: 12px; }
  .nt-gap { height: 1px; background: rgba(255,255,255,.08); margin: 10px 4px; }
  .nt-foot { display: flex; align-items: center; gap: 8px; margin: 8px -12px 0; padding: 12px 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
  .nt-avatar { width: 28px; height: 28px; border-radius: 50%; background: #334155; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
  .nav-user { flex: 1; min-width: 0; padding: 0; color: var(--color-sidebar-text); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nt-icon-btn, .nav-logout-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); color: var(--color-sidebar-text); font-size: 0; }
  .nt-icon-btn svg, .nav-logout-btn svg { width: 16px; height: 16px; }
  .nt-icon-btn:hover { background: var(--color-sidebar-hover-bg); color: #fff; }
  .nav-logout-btn:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }

  /* ---------- page header ---------- */
  @media (min-width: 901px) {
    .page { padding-top: 24px; }
    /* On-screen Preview of a printable report sits outside .page - keep it clear of the sidebar */
    body > .print-report { margin-left: calc(var(--sidebar-width) + 32px) !important; margin-right: 24px !important; }
  }
  /* web app, narrow screens: the hamburger that static/mobile-nav.js adds */
  .nav-toggle { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-primary); padding: 0; box-shadow: var(--shadow-sm); }
  .nav-toggle:hover { background: var(--color-surface-raised); }
  @media (max-width: 900px) { .nav:not(.nav-open) { box-shadow: none; } .nt-brand { padding-left: 60px; padding-right: 60px; } }
  .page > header { border-bottom: 1px solid var(--color-border); margin-bottom: 20px; padding-bottom: 14px; }
  .page > header h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 2px; }
  .page > header .subtitle, .subtitle { font-size: .875rem; color: var(--color-text-secondary); margin: 0; }
  .section-heading { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin: 0 0 10px; }
  .section-hint { font-size: .8125rem; color: var(--color-text-secondary); }
  .section-divider { margin: 32px 0 24px; border-top-color: var(--color-border); }

  /* ---------- compact stat cards: two lines ---------- */
  .stats-row { gap: 12px; margin-bottom: 20px; }
  .stat-card { flex: 1 1 160px; padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); box-shadow: var(--shadow-sm); background: var(--color-surface); }
  .stat-card-balance { background: var(--color-accent-muted); }
  .stat-label { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; color: var(--color-text-muted); margin: 0; line-height: 1.4; }
  .stat-value { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
  .stat-value.nt-text { font-family: var(--font-sans); font-weight: 600; }
  .stat-card:has(.stat-positive) { border-left-color: var(--color-success); }
  .stat-card:has(.stat-negative) { border-left-color: var(--color-danger); }

  /* ---------- forms ---------- */
  .expense-form, .data-box, .help-content, .attendance-settings-group { border-radius: var(--radius-md); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
  .expense-form { padding: 16px 18px; gap: 14px; }
  .field label, .sort-toolbar-label { font-size: .8125rem; font-weight: 500; color: var(--color-text-secondary); }
  .field input, .field select, .field textarea, .inline-edit-input, .inline-rename-input, .sort-select, .tax-input-row input,
  .customer-picker select, .attendance-filter select, input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="time"], textarea, select {
    font-family: var(--font-sans); font-size: .875rem; color: var(--color-text-primary); background: var(--color-surface);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s;
  }
  .field input, .field select { padding: 8px 10px; }
  input:focus, select:focus, textarea:focus, .field input:focus, .field select:focus, .sort-select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); }
  input[type="number"], .inline-edit-amount { font-family: var(--font-mono); }
  .form-error { font-size: .8125rem; }

  /* ---------- buttons ---------- */
  button { font-family: var(--font-sans); font-size: .875rem; font-weight: 500; border-radius: var(--radius-sm); padding: 8px 16px; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
  button:disabled { background: var(--color-surface-raised); color: var(--color-text-muted); border-color: var(--color-border); opacity: 1; }
  .secondary-btn, .sort-direction-btn { background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border-strong); padding: 3px 10px; font-size: .75rem; font-weight: 500; margin-right: 4px; }
  .secondary-btn:hover, .sort-direction-btn:hover:not(:disabled) { background: var(--color-surface-raised); color: var(--color-text-primary); border-color: var(--color-border-strong); }
  .delete-btn { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); padding: 3px 10px; font-size: .75rem; }
  .delete-btn:hover { background: var(--color-danger); color: #fff; }
  .nav-logout-btn, .help-topic-btn, .attendance-tab, .detail-toggle-btn, .tpl-switch button { box-shadow: none; }

  /* ---------- tables ---------- */
  .expense-sheet { border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); background: var(--color-surface); }
  .expense-sheet th, .expense-sheet td { padding: 9px 14px; font-size: .875rem; border-bottom-color: var(--color-border); }
  .expense-sheet thead th { background: var(--color-surface); color: var(--color-text-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; border-bottom: 1px solid var(--color-border-strong); }
  .expense-sheet tbody tr:hover { background: var(--color-surface-raised); }
  .col-amount, .col-qty, td.col-amount, td.col-qty, .total-amount, .attendance-strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .col-date { font-family: var(--font-mono); font-size: .8125rem !important; color: var(--color-text-secondary); }
  thead .col-date { font-family: var(--font-sans); }
  .total-amount { background: var(--color-accent-muted); font-weight: 500; }
  .total-label { color: var(--color-text-secondary); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; }
  .empty-state { padding: 28px 16px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-size: .875rem; }
  .job-items-subtable { border-radius: var(--radius-sm); }

  /* ---------- misc pages ---------- */
  .banner { border-radius: var(--radius-md); background: var(--color-info-bg); border-color: color-mix(in srgb, var(--color-info) 30%, transparent); color: var(--color-text-primary); }
  .help-topic-btn { border-radius: var(--radius-sm); font-size: .875rem; }
  .help-topic-btn.active, .tpl-switch button.active { background: var(--color-accent); }
  .attendance-tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: .875rem; }
  .tpl-card { border-radius: var(--radius-md); }
  .user-id-box, .settings-logo-preview { border-radius: var(--radius-md); }
  .page-width-handle { opacity: .5; }

  /* Done rows / archived rows */
  .id-done-row .name-cell { color: var(--color-text-secondary); }

  /* ---------- Manage IDs: status badges added by nomio-theme.js ---------- */
  .nt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 99px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
  .nt-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .nt-badge-info { background: var(--color-info-bg); color: var(--color-info); }
  .nt-badge-neutral { background: var(--color-surface-raised); color: var(--color-text-secondary); }
  .nt-badge-success { background: var(--color-success-bg); color: var(--color-success); }

}