/* Design tokens and components for the Django-template pages, ported from the validated
   prototype (index.html <style>). Rules added for templates carry their own comment. */

  :root {
    --bg: #F7F7F5;
    --surface: #FFFFFF;
    --surface-2: #FAFAF9;
    --hairline: #ECECE8;
    --hairline-strong: #D9D9D4;
    --text-1: #0B0F1A;
    --text-2: #4A5365;
    --text-3: #8A93A6;
    --brand: #5046E5;
    --brand-hover: #4338CA;
    --brand-soft: #EEF0FF;
    --success: #047857;
    --success-soft: #ECFDF5;
    --warning: #B45309;
    --warning-soft: #FFFBEB;
    --danger:  #B91C1C;
    --danger-soft: #FEF2F2;
    --info:    #0E7490;
    --info-soft: #ECFEFF;
    --accent:  #6D28D9;
    --accent-soft: #F5F3FF;
    --shadow-sm: 0 1px 1px rgba(11,15,26,0.04), 0 1px 2px rgba(11,15,26,0.03);
    --shadow-md: 0 1px 2px rgba(11,15,26,0.04), 0 8px 24px -8px rgba(11,15,26,0.10);
    --shadow-lg: 0 4px 8px rgba(11,15,26,0.04), 0 24px 64px -16px rgba(11,15,26,0.18);
    --shadow-glow: 0 0 0 4px rgba(80,70,229,0.08);
  }
  html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--text-1); font-feature-settings: 'cv11','ss01','ss03'; }
  .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .surface { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-sm); }
  .surface-elevated { background: var(--surface); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--shadow-md); }
  .label-up { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 999px; border: 2px solid var(--bg); }
  * { -webkit-tap-highlight-color: transparent; }
  /* Django's default Textarea widget renders cols="40" with no class (the
     proposal form's `note` field, both hosts) — the browser's intrinsic
     sizing for that ignores its container and overflows the page at
     narrow widths. Every other text control here opts into sizing via
     `.input`; a bare textarea has no such hook, so it gets a global
     default instead. */
  textarea { width: 100%; box-sizing: border-box; }
  button:focus-visible, a:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
  input:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 12px; transition: transform 80ms ease, background-color 120ms ease, box-shadow 160ms ease; cursor: pointer; }
  .btn:active { transform: scale(0.985); }
  .btn:disabled { opacity: 0.4; pointer-events: none; }
  .btn-primary { background: var(--text-1); color: white; }
  .btn-primary:hover { background: #1A2233; }
  .btn-brand { background: var(--brand); color: white; box-shadow: var(--shadow-sm); }
  .btn-brand:hover { background: var(--brand-hover); }
  .btn-secondary { background: var(--surface); color: var(--text-1); border: 1px solid var(--hairline-strong); }
  .btn-secondary:hover { background: var(--surface-2); }
  .btn-ghost { background: transparent; color: var(--text-2); }
  .btn-ghost:hover { background: var(--surface-2); color: var(--text-1); }
  .btn-success { background: var(--success); color: white; }
  .btn-success:hover { filter: brightness(1.05); }
  .btn-danger-ghost { background: transparent; color: var(--danger); border: 1px solid rgba(185,28,28,0.25); }
  .btn-danger-ghost:hover { background: var(--danger-soft); }

  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
  .chip-dot { width: 6px; height: 6px; border-radius: 999px; }
  .chip-neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--hairline); } .chip-neutral .chip-dot { background: var(--text-3); }
  .chip-info    { background: var(--info-soft); color: var(--info); } .chip-info .chip-dot { background: var(--info); }
  .chip-success { background: var(--success-soft); color: var(--success); } .chip-success .chip-dot { background: var(--success); }
  .chip-warning { background: var(--warning-soft); color: var(--warning); } .chip-warning .chip-dot { background: var(--warning); }
  .chip-danger  { background: var(--danger-soft); color: var(--danger); } .chip-danger .chip-dot { background: var(--danger); }
  .chip-accent  { background: var(--accent-soft); color: var(--accent); } .chip-accent .chip-dot { background: var(--accent); }
  .chip-on-dark { background: rgba(255,255,255,0.18) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.20) !important; }
  .chip-on-dark .chip-dot { background: #fff !important; }

  .input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: 12px; background: var(--surface); color: var(--text-1); font-size: 14px; transition: border-color 120ms, box-shadow 120ms; }
  .input:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-glow); }
  .input-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; }
  .input-prefix { display: flex; align-items: center; height: 42px; border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 0 12px; background: var(--surface); transition: border-color 120ms, box-shadow 120ms; }
  .input-prefix:focus-within { outline: none; border-color: var(--brand); box-shadow: var(--shadow-glow); }
  .input-prefix .input { height: 40px; border: 0; box-shadow: none; padding: 0; }
  .input-prefix .input:focus { box-shadow: none; }
  /* Let the box shrink inside a flex row: a bare <input> keeps its ~20-character intrinsic width and overflows narrow phones */
  .input-prefix { min-width: 0; }
  .input-prefix input { min-width: 0; width: 10rem; max-width: 100%; }

  /* VAT line columns — header labels and every line share these widths so they stay aligned */
  .vat-c-net, .vat-c-total { width: 112px; flex: none; }
  .vat-c-vat { width: 76px; flex: none; }
  @media (max-width: 640px) {
    .vat-c-net, .vat-c-total { width: 96px; }
    .vat-c-vat { width: 62px; }
  }

  .avatar { display: grid; place-items: center; border-radius: 999px; font-weight: 700; font-size: 12px; flex-shrink: 0; letter-spacing: -0.02em; }
  .avatar-brand { background: linear-gradient(135deg, var(--text-1), #1F2937); color: white; }

  .check-box { position: relative; display: inline-block; width: 20px; height: 20px; }
  .check-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .check-box .check-mark { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--hairline-strong); background: var(--surface); display: grid; place-items: center; transition: background-color 100ms, border-color 100ms; }
  .check-box input:checked + .check-mark { background: var(--brand); border-color: var(--brand); }
  .check-box .check-mark svg { opacity: 0; color: white; }
  .check-box input:checked + .check-mark svg { opacity: 1; }

  @keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .animate-pop { animation: pop 200ms cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .animate-slide-up { animation: slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .animate-fade-in { animation: fade-in 180ms ease-out; }

  .hero-mesh { background: radial-gradient(at 20% 10%, rgba(255,255,255,0.18) 0px, transparent 50%), radial-gradient(at 80% 90%, rgba(255,255,255,0.10) 0px, transparent 50%); }
  select.bare { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6'/></svg>"); background-position: right 8px center; background-repeat: no-repeat; padding-right: 28px; }
  /* hide default file input */
  .file-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* ==== Ops console additions — ported verbatim from admin.html <style> ==== */
  .btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }

  .avatar-soft { background: var(--brand-soft); color: var(--brand); }

  .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: background-color 100ms, color 100ms; cursor: pointer; width: 100%; border: 0; background: transparent; text-align: left; }
  .nav-item:hover { background: var(--surface-2); color: var(--text-1); }
  .nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
  .nav-item.active .nav-icon { color: var(--brand); }
  .nav-icon { color: var(--text-3); flex-shrink: 0; }

  .kpi { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); }
  table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.tbl thead th { background: var(--surface-2); border-bottom: 1px solid var(--hairline); text-align: left; padding: 10px 16px; }
  table.tbl tbody td { padding: 10px 16px; border-top: 1px solid var(--hairline); }
  table.tbl tbody tr:hover { background: rgba(250,250,249,0.7); }

  .toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .toggle .track { position: absolute; inset: 0; background: var(--hairline-strong); border-radius: 999px; transition: background 140ms; cursor: pointer; }
  .toggle .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 999px; transition: transform 140ms; box-shadow: var(--shadow-sm); }
  .toggle input:checked + .track { background: var(--brand); }
  .toggle input:checked + .track .knob { transform: translateX(18px); }