/* ============================================================
   OKAMI ERP — Design System
   Palette: deep indigo shell, warm amber accent (energy/motion),
   near-white workspace. Utilitarian, reception-first, fast to scan.
   ============================================================ */

:root {
    /* ---- Surfaces & ink ---- */
    --ok-bg: #f2f3f7;
    --ok-surface: #ffffff;
    --ok-surface-2: #fafbfc;      /* nested panels, table heads, empty states */
    --ok-ink: #1a1d29;
    --ok-ink-soft: #5b6472;
    --ok-ink-faint: #8b93a1;      /* captions, placeholder, disabled */
    --ok-line: #e9ebf0;
    --ok-line-strong: #cfd4dc;    /* dividers that must read as structure */
    --ok-sidebar: #191c2b;
    --ok-sidebar-ink: #aab2c5;
    --ok-sidebar-active: #262b40;

    /* ---- Brand ---- */
    --ok-accent: #f59e0b;
    --ok-accent-ink: #7c4a03;
    --ok-primary: #4f46e5;
    --ok-primary-hover: #4338ca;
    --ok-primary-soft: rgba(79,70,229,.10);
    --ok-success: #16a34a;
    --ok-success-bg: #ecfdf3;
    --ok-success-ink: #027a48;
    --ok-danger: #dc2626;
    --ok-danger-bg: #fef3f2;
    --ok-danger-ink: #b42318;
    --ok-warn: #d97706;
    --ok-warn-bg: #fffaeb;
    --ok-warn-ink: #b54708;

    /* ---- Space scale ----
       One ladder for the whole app. Every gap, pad and margin should come
       from here; that is what stops a screen built today from sitting a few
       pixels off one built last month. */
    --ok-s1: 4px;
    --ok-s2: 8px;
    --ok-s3: 12px;
    --ok-s4: 16px;
    --ok-s5: 20px;
    --ok-s6: 28px;
    --ok-s7: 40px;

    /* ---- Type scale ---- */
    --ok-fs-xs: 11.5px;    /* table heads, eyebrows */
    --ok-fs-sm: 12.5px;    /* labels, captions, help text */
    --ok-fs-base: 14px;
    --ok-fs-md: 15px;
    --ok-fs-lg: 18px;
    --ok-fs-xl: 22px;      /* page titles */
    --ok-fs-2xl: 28px;     /* KPI figures */
    --ok-fw-medium: 560;
    --ok-fw-semi: 640;
    --ok-fw-bold: 700;

    /* ---- Shape ---- */
    --ok-radius: 14px;
    --ok-radius-sm: 10px;
    --ok-radius-pill: 999px;

    /* ---- Elevation: flat → raised → floating ---- */
    --ok-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -6px rgba(16,24,40,.10);
    --ok-shadow-lg: 0 12px 40px -8px rgba(16,24,40,.18);
    --ok-shadow-up: 0 -6px 20px rgba(16,24,40,.08);

    /* ---- Interaction ---- */
    --ok-focus: 0 0 0 3px var(--ok-primary-soft);
    --ok-tap: 44px;               /* minimum touch target */
    --ok-speed: .16s;

    /* ---- Type faces ----
       System stack: it renders instantly on a cheap Android at the counter,
       which matters more here than a distinctive webfont would. */
    --ok-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ok-font-num: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, monospace;
}

[data-theme="dark"] {
    --ok-bg: #0f111a;
    --ok-surface: #191c2b;
    --ok-ink: #e8eaf0;
    --ok-ink-soft: #9aa3b5;
    --ok-line: #2a2f45;
    --ok-sidebar: #12141f;
    --ok-sidebar-ink: #8890a5;
    --ok-sidebar-active: #232842;
    --ok-accent-ink: #ffd898;
    --ok-primary: #6366f1;
    --ok-primary-hover: #818cf8;
    --ok-success: #22c55e;
    --ok-danger: #f87171;
    --ok-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.35);
    --ok-surface-2: #1f2334;
    --ok-ink-faint: #737d92;
    --ok-line-strong: #3a4159;
    --ok-primary-soft: rgba(99,102,241,.22);
    --ok-success-bg: #0d3320;
    --ok-success-ink: #4ade80;
    --ok-danger-bg: #3a1414;
    --ok-danger-ink: #fca5a5;
    --ok-warn: #fbbf24;
    --ok-warn-bg: #3a2a0a;
    --ok-warn-ink: #fbbf24;
    --ok-shadow-lg: 0 8px 28px rgba(0,0,0,.5);
    --ok-shadow-up: 0 -6px 20px rgba(0,0,0,.45);
}

/* Pastel badges/alerts are light-mode colours by design — darkened so text
   stays readable instead of pale-on-pale. */
[data-theme="dark"] .okami-badge-active,
[data-theme="dark"] .okami-badge-inv-paid       { background: #0d3320; color: #4ade80; }
[data-theme="dark"] .okami-badge-inactive,
[data-theme="dark"] .okami-badge-inv-draft      { background: #262b3d; color: #b0b8c9; }
[data-theme="dark"] .okami-badge-inv-cancelled  { background: #262b3d; color: #6b7280; }
[data-theme="dark"] .okami-badge-frozen         { background: #0f2a4a; color: #7dbcfa; }
[data-theme="dark"] .okami-badge-expired,
[data-theme="dark"] .okami-badge-inv-unpaid     { background: #3a1414; color: #fca5a5; }
[data-theme="dark"] .okami-badge-inv-partial,
[data-theme="dark"] .okami-badge-warn           { background: #3a2a0a; color: #fbbf24; }
[data-theme="dark"] .okami-alert-success        { background: #0d3320; color: #4ade80; border-color: #16532f; }
[data-theme="dark"] .okami-alert-error          { background: #3a1414; color: #fca5a5; border-color: #5c1f1f; }
[data-theme="dark"] .okami-state-preview,
[data-theme="dark"] .okami-paychoice-opt.selected { background: #23283a; }
[data-theme="dark"] .okami-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
[data-theme="dark"] .okami-danger-btn { color: #fff; }

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--ok-font);
    background: var(--ok-bg);
    color: var(--ok-ink);
    font-size: 14px;
    line-height: 1.5;
}
a { color: var(--ok-primary); text-decoration: none; }

/* ---------- Shell ---------- */
.okami-shell { display: flex; min-height: 100vh; }

.okami-sidebar {
    width: 240px;
    background: var(--ok-sidebar);
    color: var(--ok-sidebar-ink);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
}
.okami-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.okami-mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--ok-accent); color: #1a1206;
    display: grid; place-items: center;
    font-weight: 800; font-size: 17px;
}
.okami-brand-text { color: #fff; font-weight: 650; letter-spacing: .2px; }

.okami-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.okami-nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 20px;
    color: var(--ok-sidebar-ink);
    font-size: 13.5px;
    border-left: 2px solid transparent;
}
.okami-nav a i { width: 18px; font-size: 15px; }
.okami-nav a:hover { background: var(--ok-sidebar-active); color: #fff; }
.okami-nav a.active {
    background: var(--ok-sidebar-active);
    color: #fff;
    border-left-color: var(--ok-accent);
}
.okami-nav-group {
    padding: 16px 20px 6px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
    color: #5c6480;
}
.okami-sidebar-foot {
    padding: 14px 20px; font-size: 11px; color: #5c6480;
    border-top: 1px solid rgba(255,255,255,.06);
}

.okami-main { flex: 1; margin-left: 240px; display: flex; flex-direction: column; }

.okami-topbar {
    height: 58px;
    background: var(--ok-surface);
    border-bottom: 1px solid var(--ok-line);
    display: flex; align-items: center;
    padding: 0 22px;
    position: sticky; top: 0; z-index: 50;
}
.okami-topbar-spacer { flex: 1; }
.okami-burger { display: none; background: none; border: none; font-size: 20px; color: var(--ok-ink); }
.okami-user { display: flex; align-items: center; gap: 9px; color: var(--ok-ink-soft); }
.okami-user span { font-weight: 550; color: var(--ok-ink); }
.okami-logout { background: none; border: none; color: var(--ok-ink-soft); cursor: pointer; font-size: 16px; padding: 4px; }
.okami-logout:hover { color: var(--ok-danger); }

.okami-content { padding: 26px; max-width: 1300px; width: 100%; }

/* ---------- Cards ---------- */
.okami-card {
    background: var(--ok-surface);
    border: 1px solid var(--ok-line);
    border-radius: var(--ok-radius);
    box-shadow: var(--ok-shadow);
    padding: var(--ok-s6);
}
.okami-card + .okami-card { margin-top: var(--ok-s4); }

h1,h2,h3,h4 { color: var(--ok-ink); font-weight: 680; }
.okami-page-title { font-size: var(--ok-fs-xl); margin: 0 0 var(--ok-s5); }

/* ---------- Buttons ----------
   One button, four variants, three sizes. Anything that looks like a button
   anywhere in the ERP should be this element, so behaviour (focus, disabled,
   touch size) is identical everywhere. */
.okami-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px var(--ok-s5); border-radius: var(--ok-radius-sm);
    border: 1px solid var(--ok-line); font-size: 13.5px; font-weight: var(--ok-fw-medium);
    cursor: pointer; background: var(--ok-surface); color: var(--ok-ink);
    font-family: inherit; line-height: 1.4;
    transition: background var(--ok-speed), border-color var(--ok-speed), box-shadow var(--ok-speed);
    text-decoration: none;
}
.okami-btn:hover { background: var(--ok-bg); }
.okami-btn:active { transform: translateY(1px); }
.okami-btn:focus-visible { outline: none; box-shadow: var(--ok-focus); border-color: var(--ok-primary); }
.okami-btn:disabled, .okami-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.okami-btn-primary { background: var(--ok-primary); color: #fff; border-color: var(--ok-primary); }
.okami-btn-primary:hover { background: var(--ok-primary-hover); }
.okami-btn-accent { background: var(--ok-accent); color: var(--ok-accent-ink); border-color: var(--ok-accent); }
.okami-btn-ghost { background: transparent; border-color: transparent; color: var(--ok-ink-soft); }
.okami-btn-ghost:hover { background: var(--ok-bg); color: var(--ok-ink); }
.okami-btn-sm { padding: 5px 10px; font-size: var(--ok-fs-sm); }
.okami-btn-lg { padding: 12px var(--ok-s5); font-size: var(--ok-fs-md); }
.okami-btn-block { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */
.okami-field { margin-bottom: var(--ok-s4); }
.okami-label { display: block; font-size: var(--ok-fs-sm); font-weight: var(--ok-fw-medium); color: var(--ok-ink-soft); margin-bottom: 6px; }
.okami-input, .okami-select {
    width: 100%; padding: 11px var(--ok-s4);
    border: 1px solid var(--ok-line); border-radius: var(--ok-radius-sm);
    background: var(--ok-surface); color: var(--ok-ink); font-size: var(--ok-fs-base);
    font-family: inherit;
    transition: border-color var(--ok-speed), box-shadow var(--ok-speed);
}
.okami-input::placeholder { color: var(--ok-ink-faint); }
.okami-input:focus, .okami-select:focus {
    outline: none; border-color: var(--ok-primary);
    box-shadow: var(--ok-focus);
}
.okami-input:disabled, .okami-select:disabled { background: var(--ok-surface-2); color: var(--ok-ink-faint); cursor: not-allowed; }
/* A number field is money or a count — never let it read as prose */
.okami-input[type="number"] { font-variant-numeric: tabular-nums; }
/* Help text under a field */
.okami-hint { font-size: var(--ok-fs-sm); color: var(--ok-ink-soft); margin: var(--ok-s1) 0 0; line-height: 1.5; }

/* Keyboard focus must be visible on every interactive thing, not just buttons */
a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: none; box-shadow: var(--ok-focus); border-radius: var(--ok-radius-sm);
}

/* ---------- Alerts ---------- */
.okami-alert { padding: 11px var(--ok-s4); border-radius: var(--ok-radius-sm); margin-bottom: var(--ok-s4); font-size: 13.5px; }
.okami-alert-success { background: var(--ok-success-bg); color: var(--ok-success-ink); border: 1px solid #a6f4c5; }
.okami-alert-error { background: var(--ok-danger-bg); color: var(--ok-danger-ink); border: 1px solid #fecdca; }
.okami-alert-warn { background: var(--ok-warn-bg); color: var(--ok-warn-ink); border: 1px solid #fedf89; }

/* ---------- Tables ----------
   THE SIGNATURE OF THIS KIT: every figure is set in tabular numerals, so a
   column of rupee amounts lines up digit under digit and can be scanned and
   compared without reading it. In an ERP that is mostly columns of money,
   that is worth more than any decorative flourish. */
.okami-table { width: 100%; border-collapse: collapse; }
.okami-table th, .okami-table td { padding: 14px var(--ok-s4); text-align: left; border-bottom: 1px solid var(--ok-line); }
.okami-table th {
    font-size: var(--ok-fs-xs); text-transform: uppercase; letter-spacing: .04em;
    color: var(--ok-ink-soft); font-weight: var(--ok-fw-semi); white-space: nowrap;
}
.okami-table tbody tr:hover { background: var(--ok-bg); }
.okami-table tbody tr:last-child td { border-bottom: none; }
.okami-table td[style*="text-align:right"],
.okami-table td[style*="text-align: right"],
.okami-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Plain (login/install) ---------- */
.okami-plain { background: var(--ok-sidebar); min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.okami-plain-wrap { width: 100%; max-width: 420px; }
.okami-plain-foot { text-align: center; color: #5c6480; font-size: 11.5px; margin-top: 18px; }
.okami-auth-card {
    background: var(--ok-surface); border-radius: 14px; padding: 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.okami-auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.okami-auth-brand .okami-mark { width: 38px; height: 38px; font-size: 21px; }
.okami-auth-title { font-size: 19px; font-weight: 700; }

/* ---------- KPI ---------- */
.okami-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--ok-s4); margin-bottom: var(--ok-s6); }
.okami-kpi { background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: var(--ok-radius); padding: var(--ok-s5); box-shadow: var(--ok-shadow); }
.okami-kpi-label { font-size: 12px; color: var(--ok-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
/* The figure is the point of a KPI card — tabular so a row of them aligns */
.okami-kpi-value {
    font-size: var(--ok-fs-2xl); font-weight: 720; margin-top: 6px;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.15;
}

/* ---------- Install checks ---------- */
.okami-check { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--ok-line); }
.okami-check .ok { color: var(--ok-success); font-weight: 600; }
.okami-check .no { color: var(--ok-danger); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .okami-sidebar { transform: translateX(-100%); transition: transform .2s; }
    .okami-sidebar.open { transform: translateX(0); }
    .okami-main { margin-left: 0; }
    .okami-burger { display: block; }
}

/* ---------- Member engine additions ---------- */
.okami-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.okami-page-head .okami-page-title { margin: 0; }

.okami-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.okami-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .okami-form-grid { grid-template-columns: 1fr; } }

.okami-two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .okami-two-col { grid-template-columns: 1fr; } }

.okami-detail { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ok-line); font-size: 13.5px; }
.okami-detail span { color: var(--ok-ink-soft); }

.okami-badge { display: inline-block; padding: 3px 10px; border-radius: var(--ok-radius-pill); font-size: var(--ok-fs-xs); font-weight: var(--ok-fw-semi); white-space: nowrap; }
.okami-badge-active   { background: #ecfdf3; color: #027a48; }
.okami-badge-inactive { background: #f2f4f7; color: #475467; }
.okami-badge-frozen   { background: #eff8ff; color: #175cd3; }
.okami-badge-expired  { background: #fef3f2; color: #b42318; }

.okami-note { padding: 10px 0; border-bottom: 1px solid var(--ok-line); font-size: 13.5px; }
.okami-note-meta { color: var(--ok-ink-soft); font-size: 11.5px; margin-top: 3px; }

.okami-pagination { display: flex; gap: 6px; margin-top: 16px; }
.okami-page { padding: 6px 12px; border: 1px solid var(--ok-line); border-radius: 6px; color: var(--ok-ink); }
.okami-page.active { background: var(--ok-primary); color: #fff; border-color: var(--ok-primary); }

/* ---------- Billing engine additions ---------- */
.text-end { text-align: right; }
.text-center { text-align: center; }

.okami-badge-inv-draft     { background: #f2f4f7; color: #475467; }
.okami-badge-inv-unpaid    { background: #fef3f2; color: #b42318; }
.okami-badge-inv-partial   { background: #fffaeb; color: #b54708; }
.okami-badge-inv-paid      { background: #ecfdf3; color: #027a48; }
.okami-badge-inv-cancelled { background: #f2f4f7; color: #98a2b3; text-decoration: line-through; }

.okami-member-row {
    display: flex; flex-direction: column; align-items: flex-start;
    width: 100%; text-align: left; padding: 10px 12px;
    border: 1px solid var(--ok-line); border-radius: 8px; margin-bottom: 6px;
    background: var(--ok-surface); cursor: pointer;
}
.okami-member-row:hover { background: var(--ok-bg); }
.okami-member-row.active { border-color: var(--ok-primary); background: #eef2ff; }
.okami-member-row span { font-size: 12px; color: var(--ok-ink-soft); }

/* Modal */
.okami-modal-backdrop {
    position: fixed; inset: 0; background: rgba(16,24,40,.5);
    display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.okami-modal {
    background: var(--ok-surface); border-radius: 12px; padding: 22px;
    width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.okami-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.okami-modal-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ok-ink-soft); }

/* ---------- Attendance engine ---------- */
.okami-scan-msg { padding: 16px; border-radius: var(--ok-radius); border-left: 4px solid var(--ok-line); }
.okami-scan-in  { background: #ecfdf3; border-left-color: var(--ok-success); }
.okami-scan-out { background: #eff8ff; border-left-color: #175cd3; }
.okami-scan-err { background: #fef3f2; border-left-color: var(--ok-danger); }

.okami-feed-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ok-line); }
.okami-feed-row:last-child { border-bottom: none; }

.okami-manual-list { margin-top: 8px; max-height: 220px; overflow-y: auto; }
.okami-manual-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--ok-line); border-radius: 6px; background: var(--ok-surface); margin-bottom: 6px; cursor: pointer; font-size: 13.5px; }
.okami-manual-item:hover { background: var(--ok-bg); }

/* Kiosk full-screen */
.okami-kiosk { min-height: 100vh; background: var(--ok-sidebar); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; }
.okami-kiosk-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 650; margin-bottom: 30px; }
.okami-kiosk-title { font-size: 34px; color: #fff; margin: 0 0 24px; }
.okami-kiosk-input { width: 100%; max-width: 440px; padding: 18px; font-size: 20px; text-align: center; border-radius: 12px; border: none; }
.okami-kiosk form { width: 100%; max-width: 440px; }
.okami-kiosk-result { margin-top: 26px; min-height: 60px; text-align: center; opacity: 0; transition: opacity .2s; width: 100%; max-width: 440px; padding: 20px; border-radius: 12px; }
.okami-kiosk-result.show { opacity: 1; }
.okami-kiosk-result.in  { background: #16a34a; }
.okami-kiosk-result.out { background: #175cd3; }
.okami-kiosk-result.err { background: #dc2626; }
.okami-kiosk-result .n { font-size: 24px; font-weight: 700; }
.okami-kiosk-result .m { font-size: 16px; margin-top: 4px; }

/* ---------- Reports: member intelligence grid ---------- */
.okami-intel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.okami-intel-card { display: block; background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: var(--ok-radius); padding: 18px; text-align: center; text-decoration: none; color: var(--ok-ink); transition: transform .1s, box-shadow .1s; border-left: 4px solid var(--ok-ink-soft); }
.okami-intel-card:hover { transform: translateY(-2px); box-shadow: var(--ok-shadow); }
.okami-intel-card.warn { border-left-color: var(--ok-warn); }
.okami-intel-card.danger { border-left-color: var(--ok-danger); }
.okami-intel-num { font-size: 30px; font-weight: 700; line-height: 1; }
.okami-intel-label { font-size: 13px; color: var(--ok-ink-soft); margin-top: 6px; }

/* ---------- Notifications ---------- */
.okami-notif-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ok-line); }
.okami-notif-row:last-child { border-bottom: none; }

/* ---------- Member Portal (mobile-first) ---------- */
.okami-portal { background: var(--ok-bg); min-height: 100vh; padding-bottom: 70px; }
.okami-portal-head { background: var(--ok-sidebar); color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; }
.okami-portal-brand { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 16px; }
.okami-portal-logout { color: #fff; font-size: 20px; text-decoration: none; }
.okami-portal-main { max-width: 480px; margin: 0 auto; padding: 16px; }
.okami-portal-card { background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: var(--ok-radius); padding: 18px; margin-bottom: 14px; }
.okami-portal-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ok-line); }
.okami-portal-row:last-child { border-bottom: none; }
.okami-portal-status { text-align: center; padding: 12px; border-radius: 8px; background: var(--ok-bg); font-size: 15px; }
.okami-portal-status.ok { background: #ecfdf3; color: #067647; }
.okami-portal-status.bad { background: #fef3f2; color: #b42318; }
.okami-portal-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ok-surface); border-top: 1px solid var(--ok-line); display: flex; justify-content: space-around; max-width: 480px; margin: 0 auto; }
.okami-portal-nav a { flex: 1; text-align: center; padding: 10px 0; color: var(--ok-ink-soft); text-decoration: none; font-size: 11px; display: flex; flex-direction: column; gap: 3px; }
.okami-portal-nav a i { font-size: 19px; }
.okami-portal-nav a:hover { color: var(--ok-accent); }

/* ---------- Global Search (topbar) ---------- */
.okami-topbar-search { position: relative; flex: 1; max-width: 460px; margin: 0 16px; }
.okami-topbar-search > .bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ok-ink-soft); font-size: 14px; }
.okami-topbar-search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--ok-line); border-radius: 8px; background: var(--ok-bg); font-size: 13.5px; outline: none; }
.okami-topbar-search input:focus { border-color: var(--ok-accent); background: var(--ok-surface); }
.okami-search-dropdown { position: absolute; top: 44px; left: 0; right: 0; background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); max-height: 420px; overflow-y: auto; display: none; z-index: 50; }
.okami-search-dropdown.open { display: block; }
.okami-search-group { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ok-ink-soft); }
.okami-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-decoration: none; color: var(--ok-ink); font-size: 13px; }
.okami-search-item:hover { background: var(--ok-bg); }
.okami-search-item i { color: var(--ok-ink-soft); }
.okami-search-empty { padding: 18px; text-align: center; color: var(--ok-ink-soft); font-size: 13px; }
.okami-search-all { display: block; padding: 10px 14px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ok-accent); text-decoration: none; border-top: 1px solid var(--ok-line); }
.okami-search-all:hover { background: var(--ok-bg); }

/* ---------- Single-page Invoice ---------- */
.okami-inv-memberbar { position: relative; }
.okami-inv-search { position: relative; }
.okami-inv-search > .bi-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ok-ink-soft); }
.okami-inv-search input { width: 100%; padding: 12px 14px 12px 38px; border: 1px solid var(--ok-line); border-radius: 8px; font-size: 15px; outline: none; }
.okami-inv-search input:focus { border-color: var(--ok-accent); }
.okami-inv-chosen { display: flex; align-items: center; gap: 14px; }
.okami-inv-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--ok-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.okami-inv-fees { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.okami-inv-fee { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--ok-bg); color: var(--ok-ink-soft); }
.okami-inv-fee.ok { background: #ecfdf3; color: #067647; }
.okami-inv-fee.bad { background: #fef3f2; color: #b42318; }
.okami-inv-out { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: #fef3f2; color: #b42318; font-weight: 600; }
.okami-inv-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.okami-inv-chip { background: var(--ok-accent); color: #fff; border: none; padding: 5px 12px; border-radius: 20px; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.okami-inv-chip:hover { opacity: .9; }

.okami-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.okami-quick-btn { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--ok-line); border-radius: 8px; background: var(--ok-surface); cursor: pointer; font-size: 13.5px; font-weight: 500; text-align: left; }
.okami-quick-btn:hover { border-color: var(--ok-accent); background: var(--ok-bg); }
.okami-quick-btn i { color: var(--ok-accent); font-size: 16px; }
.okami-quick-repeat { border-style: dashed; }

.okami-inv-items input { padding: 6px 8px; font-size: 13px; }
.okami-inv-items .okami-i-amt { font-weight: 600; text-align: right; }
.okami-inv-period { font-size: 11.5px; color: var(--ok-ink-soft); white-space: nowrap; }
.okami-i-del { background: none; border: none; color: var(--ok-danger); font-size: 20px; cursor: pointer; line-height: 1; }

.okami-inv-summary { position: sticky; top: 76px; }
.okami-inv-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
.okami-inv-total { font-size: 18px; font-weight: 700; border-top: 1px solid var(--ok-line); margin-top: 6px; padding-top: 10px; }

/* ---------- Expense upgrade ---------- */
.okami-pill { background: var(--ok-warn); color: #fff; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; margin-left: 4px; }
.okami-bar-track { height: 7px; background: var(--ok-bg); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.okami-bar-fill { height: 100%; background: var(--ok-accent); border-radius: 4px; }
.okami-badge-warn { background: #fef7e6; color: #b25e09; }
.okami-inline-pay summary { list-style: none; cursor: pointer; display: inline-block; }
.okami-inline-pay summary::-webkit-details-marker { display: none; }
.okami-pay-pop { position: absolute; right: 20px; z-index: 20; background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: 10px; padding: 14px; width: 240px; box-shadow: 0 8px 28px rgba(0,0,0,.14); text-align: left; margin-top: 6px; }

/* ---------- Fee Forecast ---------- */
.okami-forecast-table tbody tr:hover { background: var(--ok-bg); }
.okami-row-risk { background: #fef3f2; }
.okami-row-risk:hover { background: #fee4e2 !important; }

/* ---------- Sidebar submenu ---------- */
.okami-subnav { display: none; padding-left: 14px; margin-bottom: 4px; }
.okami-subnav.open { display: block; }
.okami-subnav a { font-size: 13px; padding: 7px 12px 7px 20px; opacity: .82; }
.okami-subnav a i { font-size: 13px; }
.okami-subnav a:hover, .okami-subnav a.active { opacity: 1; }

/* ---------- Invoice index actions ---------- */
.okami-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.okami-row-actions .okami-btn { padding: 4px 9px; font-size: 13px; }
.okami-index-search { display: flex; gap: 8px; margin-bottom: 14px; }
.okami-index-search .okami-input { flex: 1; padding: 11px 14px; font-size: 14.5px; }

/* ---------- Invoice form v2: sections ---------- */
.okami-sec-head { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.okami-sec-num { width: 23px; height: 23px; border-radius: 50%; background: var(--ok-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.okami-empty-hint { color: var(--ok-ink-soft); text-align: center; padding: 22px; margin: 0; font-size: 13.5px; }

/* Quick charge — roomier padding */
.okami-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.okami-quick-btn { padding: 14px 16px; }

/* New member inline */
.okami-newmember-toggle { margin-top: 10px; font-size: 13px; }
.okami-newmember-box { margin-top: 12px; padding: 16px; background: var(--ok-bg); border: 1px dashed var(--ok-line); border-radius: 10px; }
.okami-newmember-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.okami-newmember-grid .okami-field { margin: 0; }

/* Item cards */
.okami-item-card { border: 1px solid var(--ok-line); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--ok-surface); }
.okami-item-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.okami-item-top .okami-i-desc { flex: 1; font-weight: 600; }
.okami-item-grid { display: grid; grid-template-columns: 78px 1fr 1.3fr 1fr; gap: 10px; align-items: end; margin-bottom: 10px; }
.okami-item-grid input, .okami-item-grid select { padding: 7px 9px; font-size: 13px; }
.okami-mini-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ok-ink-soft); font-weight: 600; margin-bottom: 3px; }
.okami-i-amt { font-weight: 700; font-size: 15px; padding-top: 2px; }
.okami-i-was { font-size: 11px; font-weight: 400; color: var(--ok-ink-soft); text-decoration: line-through; }
.okami-i-notes { font-size: 13px; padding: 7px 9px; }
.okami-i-del { background: none; border: none; color: var(--ok-danger); font-size: 21px; cursor: pointer; line-height: 1; padding: 0 4px; }

/* Item period (auto / manual) */
.okami-item-period { background: var(--ok-bg); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.okami-period-head { display: flex; justify-content: space-between; align-items: center; }
.okami-switch { font-size: 12px; color: var(--ok-ink-soft); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.okami-period-auto { font-size: 13.5px; font-weight: 600; margin-top: 3px; }
.okami-auto-tag { font-size: 10px; background: var(--ok-accent); color: #fff; padding: 1px 6px; border-radius: 10px; font-weight: 700; margin-left: 4px; }
.okami-period-inputs { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.okami-period-inputs input { padding: 6px 8px; font-size: 13px; }

/* Summary history + validity */
.okami-history-box { background: var(--ok-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.okami-hist-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.okami-hist-row span { color: var(--ok-ink-soft); }
.okami-validity { display: flex; gap: 9px; align-items: flex-start; background: #ecfdf3; color: #067647; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.okami-validity i { font-size: 15px; margin-top: 1px; }
.okami-validity-line { padding: 1px 0; }

/* ---------- Invoice form: no-gate helpers ---------- */
.okami-hist-empty { font-size: 12.5px; color: var(--ok-ink-soft); display: flex; gap: 7px; align-items: center; }
.okami-inline-hint { margin-top: 10px; padding: 9px 12px; background: #fef7e6; color: #b25e09; border-radius: 8px; font-size: 13px; display: flex; gap: 7px; align-items: center; }

/* ---------- Invoice form: consistent section spacing ---------- */
#builder { margin-top: 18px; }
.okami-inv-memberbar { padding-bottom: 18px; }
.okami-two-col > div > .okami-card:first-child { margin-top: 0; }
.okami-inv-summary { padding: 20px; }
.okami-inv-summary .okami-sec-head:not(:first-child) { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ok-line); }

/* ---------- Gym settings + users ---------- */
.okami-logo-preview { background: var(--ok-bg); border-radius: 8px; padding: 14px; text-align: center; margin-bottom: 12px; }
.okami-logo-preview img { max-width: 100%; max-height: 110px; }
.okami-role-pick { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ok-line); cursor: pointer; }
.okami-role-pick:last-child { border-bottom: none; }
.okami-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.okami-perm-grid .okami-card { margin-top: 0; }
.okami-perm-row { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; font-size: 13px; cursor: pointer; }
.okami-perm-row input { margin-top: 3px; }

/* ---------- Ledgers ---------- */
.okami-ledger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.okami-ledger-card { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: var(--ok-radius); text-decoration: none; color: var(--ok-ink); }
.okami-ledger-card:hover { border-color: var(--ok-accent); }
.okami-ledger-card i { font-size: 24px; color: var(--ok-accent); }
.okami-ledger-card strong { display: block; margin-bottom: 3px; }
.okami-ledger-card span { font-size: 12.5px; color: var(--ok-ink-soft); }

/* ---------- Profile ---------- */
.okami-profile-head { display: flex; gap: 16px; align-items: center; }
.okami-profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; flex-shrink: 0; }
.okami-user-link { display: flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.okami-user-link:hover { color: var(--ok-accent); }

/* ---------- Settings sub-nav ---------- */
.okami-settings-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ok-line); }
.okami-settings-nav a { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--ok-ink-soft); font-size: 13.5px; font-weight: 500; }
.okami-settings-nav a:hover { background: var(--ok-bg); color: var(--ok-ink); }
.okami-settings-nav a.active { background: var(--ok-sidebar); color: #fff; }
.okami-i-zero { font-size: 11px; font-weight: 700; color: var(--ok-danger); }

/* ---------- Admin tree ---------- */
.okami-nav-parent { display: flex; align-items: center; gap: 10px; }
.okami-nav-parent.active { color: #fff; }
.okami-method-wrap { position: relative; }
.okami-method-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ok-accent); pointer-events: none; font-size: 15px; }
.okami-method-wrap select { padding-left: 34px; }

/* ---------- Invoice: state preview + print action ---------- */

/* ---------- Send (email / whatsapp) popover ---------- */
.okami-send-box { position: relative; display: inline-block; }
.okami-send-box summary { list-style: none; cursor: pointer; }
.okami-send-box summary::-webkit-details-marker { display: none; }
.okami-send-pop { position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 30; width: 260px; background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: 10px; padding: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.14); text-align: left; }

/* ============================================================
   Invoice proforma — spacing and overlap corrections
   ============================================================ */
.okami-inv-summary { padding: 20px; }
.okami-inv-summary .okami-field { margin-bottom: 10px; }
.okami-inv-chosen { flex-wrap: wrap; row-gap: 10px; }
.okami-inv-chosen > div:first-of-type { min-width: 0; }          /* let long names wrap instead of pushing */
.okami-inv-chosen > div[style*="flex:1"] { min-width: 200px; }
.okami-inv-fees { row-gap: 6px; }
.okami-inv-chips { row-gap: 6px; }

/* Item cards: keep the four columns from crushing each other */
.okami-item-grid { column-gap: 12px; row-gap: 12px; }
.okami-item-card { padding: 16px; }
.okami-item-card + .okami-item-card { margin-top: 14px; }
.okami-item-top .okami-i-desc { min-width: 0; }
.okami-i-amt { white-space: nowrap; }

/* The search dropdown must sit above the cards below it */
.okami-inv-memberbar { position: relative; z-index: 20; }
.okami-search-dropdown { z-index: 60; }
.okami-inv-search input { padding-right: 14px; }

/* Summary rows wrap rather than overlap when the numbers get long */
.okami-inv-line { gap: 12px; flex-wrap: wrap; }
.okami-inv-line > strong { white-space: nowrap; }


/* ============================================================
   Selects — the browser's own control looked out of place next
   to the inputs, so it gets the same treatment plus our chevron
   ============================================================ */
.okami-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px;
    cursor: pointer;
}
.okami-select:focus { border-color: var(--ok-accent); }
.okami-select::-ms-expand { display: none; }

/* ---------- Invoice: actions must not follow you down the page ---------- */
.okami-inv-summary { position: static !important; }
.okami-action-hint { font-size: 12px; color: var(--ok-ink-soft); margin: 8px 0 0; line-height: 1.5; }
.okami-days-pill { background: #067647; color: #fff; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; margin-left: 4px; }

/* "No member found" is now the Add button itself */
.okami-search-add {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 14px; border: none; background: none; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--ok-accent); text-align: left;
}
.okami-search-add:hover { background: var(--ok-bg); }

/* ---------- Day Close spacing ---------- */
.okami-dayclose-form .okami-field { margin-bottom: 14px; }
.okami-dayclose-form .okami-inv-line { padding: 10px 0; }
.okami-help { color: var(--ok-ink-soft); font-size: 12px; cursor: help; }
.okami-coa-advanced summary { cursor: pointer; font-weight: 650; font-size: 15px; list-style: none; }
.okami-coa-advanced summary::-webkit-details-marker { display: none; }
.okami-coa-advanced summary i { color: var(--ok-accent); margin-right: 6px; }
.okami-intel-list { margin-top: 16px; }

/* ---------- Danger zone ---------- */
.okami-danger-intro { border-left: 4px solid var(--ok-danger); }
.okami-danger-intro h3 i { color: var(--ok-danger); }
.okami-danger-row { display: flex; gap: 11px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--ok-line); cursor: pointer; }
.okami-danger-row:last-child { border-bottom: none; }
.okami-danger-row input { margin-top: 3px; }
.okami-danger-count { float: right; font-size: 12px; color: var(--ok-ink-soft); }
.okami-danger-btn { background: var(--ok-danger); color: #fff; border-color: var(--ok-danger); font-weight: 700; }
.okami-danger-btn:hover { opacity: .9; }


/* ============================================================
   MOBILE
   The desk runs on a laptop, but owners check figures on a phone
   and reception sometimes works off a tablet. Everything below
   assumes a thumb, not a mouse.
   ============================================================ */

/* Tap targets never smaller than a fingertip */
@media (hover: none) {
    .okami-btn { min-height: 40px; }
    .okami-input, .okami-select { min-height: 42px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
}

@media (max-width: 900px) {
    .okami-content { padding: 14px; }
    .okami-main { margin-left: 0; }

    /* Sidebar becomes a drawer over the page, with something to tap to dismiss */
    .okami-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; }
    .okami-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .okami-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; }
    .okami-burger { display: inline-flex; }

    .okami-page-head { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
    .okami-page-title { font-size: 20px; }

    /* Wide tables scroll sideways rather than crushing every column */
    .okami-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .okami-table th, .okami-table td { white-space: nowrap; }

    .okami-two-col { grid-template-columns: 1fr; }
    .okami-kpis { grid-template-columns: repeat(2, 1fr) !important; }
    .okami-quick-grid { grid-template-columns: repeat(2, 1fr); }
    .okami-perm-grid, .okami-newmember-grid { grid-template-columns: 1fr; }

    /* Popovers become panels — off-screen popovers are unusable on a phone */
    .okami-send-pop, .okami-pay-pop { position: static; width: 100%; box-shadow: none; margin-top: 10px; }

    .okami-inv-summary { position: static; }
    .okami-topbar-search { display: none; }        /* the Search page does this better on a phone */
    .okami-search-dropdown { position: fixed; left: 8px; right: 8px; width: auto; }
}

@media (max-width: 640px) {
    .okami-content { padding: 11px; }
    .okami-card { padding: 15px; }
    .okami-card + .okami-card { margin-top: 12px; }

    .okami-kpis { grid-template-columns: 1fr !important; }
    .okami-quick-grid { grid-template-columns: 1fr; }

    /* Page actions go full width instead of crowding the title */
    .okami-page-head > div { width: 100%; display: flex; gap: 8px; }
    .okami-page-head .okami-btn { flex: 1; justify-content: center; }

    /* Invoice items: label above field, nothing squeezed into a column */
    .okami-item-grid { grid-template-columns: 1fr 1fr; }
    .okami-item-grid > div:nth-child(3),
    .okami-item-grid > div:nth-child(4) { grid-column: 1 / -1; text-align: left !important; }
    .okami-item-top { flex-wrap: wrap; row-gap: 8px; }

    /* Member bar stacks so a long name never pushes the button away */
    .okami-inv-chosen { flex-direction: column; align-items: stretch; }
    .okami-inv-chosen .okami-btn { width: 100%; }
    .okami-inv-fees, .okami-inv-chips { flex-wrap: wrap; }
    .okami-inv-chip { flex: 1 1 46%; justify-content: center; }

    /* Cash buttons in a row of thumb-sized targets */

    /* Filter bars stack two-up instead of shrinking to nothing */
    .okami-filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
    .okami-filters > div:last-child { grid-column: 1 / -1; }
    .okami-index-search { flex-wrap: wrap; }
    .okami-index-search .okami-input { flex: 1 1 100%; }
    .okami-index-search .okami-select, .okami-index-search .okami-btn { flex: 1; }

    /* Staff attendance + day close: forms inside table cells need room */
    .okami-table select, .okami-table input { min-width: 110px; }

    .okami-subnav { padding-left: 8px; }
    .okami-row-actions { flex-wrap: wrap; gap: 4px; }
    .okami-danger-count { float: none; display: block; margin-top: 3px; }
    .okami-coa-advanced summary { font-size: 14px; }
    }

/* Very small phones: stop two-column grids from producing slivers */
@media (max-width: 400px) {
    .okami-item-grid, .okami-filters { grid-template-columns: 1fr !important; }
    .okami-inv-chip { flex: 1 1 100%; }
}
.okami-blast { border-left: 4px solid #25d366; }
.okami-blast h3 i { color: #25d366; }

/* ---------- Brand credit + support ---------- */
.okami-brand-credit { text-align: center; padding: 14px 0 4px; font-size: 12px; color: var(--ok-ink-soft); }
.okami-brand-credit a, .okami-brand-credit span { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.okami-brand-credit a:hover { color: var(--ok-accent); }
.okami-support-link { color: var(--ok-ink-soft); font-size: 17px; margin-right: 14px; display: inline-flex; }
.okami-support-link:hover { color: var(--ok-accent); }
.okami-brand-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: #fff; flex-shrink: 0; }

/* ============================================================
   Invoice — floating action bar (Section: Actions)
   All four buttons live here, always reachable without scrolling
   past a long item list. Purely actions — no inputs, no summary.
   ============================================================ */
.okami-inv-divider { border-top: 1px solid var(--ok-line); margin: 14px 0; }

.okami-inv-change { margin-top: 8px; padding: 10px 12px; background: #ecfdf3; border-radius: var(--ok-radius-sm); }
.okami-inv-change span { color: #027a48; font-weight: 600; }
.okami-inv-change strong { color: #027a48; font-size: 16px; }
[data-theme="dark"] .okami-inv-change { background: #0d3320; }
[data-theme="dark"] .okami-inv-change span, [data-theme="dark"] .okami-inv-change strong { color: #4ade80; }

.okami-inv-actionbar {
    position: fixed; left: 240px; right: 0; bottom: 0; z-index: 40;
    background: var(--ok-surface); border-top: 1px solid var(--ok-line);
    box-shadow: 0 -6px 20px rgba(16,24,40,.08);
}
.okami-inv-actionbar-inner {
    max-width: 1180px; margin: 0 auto; padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.okami-inv-actionbar-group { display: flex; gap: 8px; flex-wrap: wrap; }
.okami-inv-actionbar-group .okami-btn { padding: 9px 16px; }
.okami-inv-actionbar-group .okami-btn span { margin-left: 2px; }
.okami-inv-post { min-width: 180px; padding: 12px 28px !important; font-size: 15px; box-shadow: 0 2px 8px rgba(79,70,229,.3); }
.okami-inv-actionbar-spacer { height: 84px; }

@media (max-width: 900px) {
    .okami-inv-actionbar { left: 0; }
}
@media (max-width: 640px) {
    .okami-inv-actionbar-inner { flex-direction: column; align-items: stretch; padding: 10px 14px; }
    .okami-inv-actionbar-group { justify-content: stretch; }
    .okami-inv-actionbar-group .okami-btn { flex: 1; }
    .okami-inv-actionbar-group .okami-btn span { display: none; }  /* icon only — three buttons in a row fits a phone */
    .okami-inv-post { width: 100%; }
    .okami-inv-actionbar-spacer { height: 126px; }
}

/* ---------- Admin tree: small group labels between clusters ---------- */
.okami-subnav-group {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ok-sidebar-ink); opacity: .55;
    padding: 12px 12px 4px 20px;
}
.okami-subnav-group:first-child { padding-top: 8px; }

/* ============================================================
   Global mobile safety net (V5.2.0 recovery — reapplying the
   V5.5.0 responsive-hardening pass lost in the sandbox reset)
   ============================================================ */

/* THE KEY TRICK: max-width and width are different properties, so this
   quietly caps any inline style="width:340px" etc. to the viewport WITHOUT
   !important and WITHOUT editing a single view — one rule protects every
   page including ones added later. */
img, svg, table, pre,
input, select, textarea,
.okami-card, .okami-filters > * {
    max-width: 100%;
}

/* Long member names, emails, or URLs must never push the page sideways */
.okami-card, .okami-table td, .okami-detail, .okami-inv-line, .okami-page-title {
    overflow-wrap: break-word;
}

@media (hover: none) and (pointer: coarse) {
    /* Real touch-target sizing, not just "no hover" (a trackpad-only laptop
       also matches hover:none, but its fingers aren't 44px wide) */
    .okami-btn, .okami-nav a, .okami-subnav a, a.okami-search-item { min-height: 44px; }
    .okami-i-qty, .okami-i-price, .okami-i-dval { min-height: 40px; }
}

@media (max-width: 500px) and (max-height: 420px) and (orientation: landscape) {
    /* A phone rotated sideways — the sidebar drawer and floating action bar
       both eat too much of a very short viewport otherwise */
    .okami-inv-actionbar-spacer { height: 70px; }
    .okami-sidebar { width: 78vw; }
}

/* ============================================================
   UI KIT — shared primitives
   Pieces every screen kept re-inventing with inline styles. Having them
   named here is what makes the ERP feel like one product instead of
   twenty pages that were each styled on the day they were written.
   ============================================================ */

/* Money and counts, anywhere in prose or a card, not just a table cell */
.okami-money, .okami-figure {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.okami-figure-lg { font-size: var(--ok-fs-xl); font-weight: var(--ok-fw-bold); letter-spacing: -.01em; }
.okami-pos { color: var(--ok-success-ink); }
.okami-neg { color: var(--ok-danger-ink); }

/* Toolbar — the row of filters/actions that sits above a table */
.okami-toolbar {
    display: flex; align-items: center; gap: var(--ok-s2);
    flex-wrap: wrap; margin-bottom: var(--ok-s4);
}
.okami-toolbar-grow { flex: 1 1 220px; min-width: 0; }
.okami-toolbar-end { margin-left: auto; display: flex; gap: var(--ok-s2); }

/* Section header inside a card — a labelled band, not just bold text */
.okami-section {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--ok-s3); margin: 0 0 var(--ok-s3);
    padding-bottom: var(--ok-s2); border-bottom: 1px solid var(--ok-line);
}
.okami-section h3 { margin: 0; font-size: var(--ok-fs-md); font-weight: var(--ok-fw-semi); }
.okami-section-note { font-size: var(--ok-fs-sm); color: var(--ok-ink-soft); }

/* Empty state — an empty screen should tell you what to do next */
.okami-empty {
    text-align: center; padding: var(--ok-s7) var(--ok-s5);
    color: var(--ok-ink-soft); background: var(--ok-surface-2);
    border-radius: var(--ok-radius);
}
.okami-empty i { font-size: 30px; color: var(--ok-ink-faint); display: block; margin-bottom: var(--ok-s3); }
.okami-empty strong { display: block; color: var(--ok-ink); font-size: var(--ok-fs-md); margin-bottom: var(--ok-s1); }
.okami-empty p { margin: 0 0 var(--ok-s4); font-size: 13.5px; }

/* Key/value rows — used on every detail screen */
.okami-kv { display: flex; justify-content: space-between; gap: var(--ok-s3); padding: 9px 0; border-bottom: 1px solid var(--ok-line); font-size: 13.5px; }
.okami-kv:last-child { border-bottom: none; }
.okami-kv > span:first-child { color: var(--ok-ink-soft); }
.okami-kv > :last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Segmented control — a small either/or that shouldn't be a dropdown */
.okami-segment { display: inline-flex; background: var(--ok-surface-2); border: 1px solid var(--ok-line); border-radius: var(--ok-radius-sm); padding: 2px; gap: 2px; }
.okami-segment button {
    border: none; background: none; cursor: pointer; font-family: inherit;
    padding: 6px var(--ok-s3); border-radius: 5px; font-size: 13px;
    color: var(--ok-ink-soft); font-weight: var(--ok-fw-medium);
}
.okami-segment button.is-on { background: var(--ok-surface); color: var(--ok-ink); box-shadow: var(--ok-shadow); }

/* Loading placeholder — better than a blank card while a fetch runs */
.okami-skeleton {
    background: linear-gradient(90deg, var(--ok-surface-2) 25%, var(--ok-line) 37%, var(--ok-surface-2) 63%);
    background-size: 400% 100%; border-radius: var(--ok-radius-sm);
    animation: okami-shimmer 1.2s ease-in-out infinite; height: 14px;
}
@keyframes okami-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Someone using a screen reader still needs the label */
.okami-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;
}

/* People who set "reduce motion" mean it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print: the shell is screen furniture, the content is the document */
@media print {
    .okami-sidebar, .okami-topbar, .okami-inv-actionbar,
    .okami-inv-actionbar-spacer, .okami-scrim, .okami-btn { display: none !important; }
    .okami-main { margin-left: 0 !important; }
    .okami-card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
}

/* ============================================================
   Kit gap-fill — classes several screens were already using with
   no rule behind them at all, so they rendered as bare markup.
   Found by diffing every class in the views against this file.
   ============================================================ */

/* Toggle/choice rows: a checkbox or radio, a bold label, an explanation */
.okami-setting-row {
    display: flex; gap: var(--ok-s3); align-items: flex-start;
    padding: 13px 0; border-bottom: 1px solid var(--ok-line); cursor: pointer;
}
.okami-setting-row:last-child { border-bottom: none; }
.okami-setting-row input { margin-top: 3px; flex-shrink: 0; }
.okami-setting-row strong { display: block; font-size: var(--ok-fs-base); }
.okami-setting-row em {
    display: block; font-style: normal; font-size: var(--ok-fs-sm);
    color: var(--ok-ink-soft); margin-top: 2px; line-height: 1.5;
}

/* Big either/or picker (light vs dark, cash vs card) */
.okami-paychoice { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--ok-s3); }
.okami-paychoice-opt {
    display: flex; gap: var(--ok-s3); align-items: flex-start; cursor: pointer;
    border: 1px solid var(--ok-line); border-radius: var(--ok-radius-sm);
    padding: var(--ok-s3) var(--ok-s4); background: var(--ok-surface);
    transition: border-color var(--ok-speed), background var(--ok-speed);
}
.okami-paychoice-opt:hover { border-color: var(--ok-line-strong); }
.okami-paychoice-opt.selected { border-color: var(--ok-primary); background: var(--ok-surface-2); }
.okami-paychoice-opt input { margin-top: 3px; flex-shrink: 0; }
.okami-paychoice-opt strong { display: block; font-size: var(--ok-fs-base); }
.okami-paychoice-opt em { display: block; font-style: normal; font-size: var(--ok-fs-sm); color: var(--ok-ink-soft); margin-top: 2px; }

/* Tabs */
.okami-tabs { display: flex; gap: var(--ok-s1); border-bottom: 1px solid var(--ok-line); margin-bottom: var(--ok-s4); overflow-x: auto; }
.okami-tabs a {
    padding: var(--ok-s2) var(--ok-s4); font-size: 13.5px; font-weight: var(--ok-fw-medium);
    color: var(--ok-ink-soft); border-bottom: 2px solid transparent;
    margin-bottom: -1px; white-space: nowrap;
}
.okami-tabs a:hover { color: var(--ok-ink); }
.okami-tabs a.active { color: var(--ok-primary); border-bottom-color: var(--ok-primary); }

/* Refund box — money leaving the business should look like it */
.okami-refund-box {
    border: 1px solid var(--ok-danger); border-radius: var(--ok-radius-sm);
    background: var(--ok-danger-bg); padding: var(--ok-s4); margin-top: var(--ok-s3);
}

/* A note explaining a concept the owner may not know (e.g. owner's draw) */
.okami-owner-draw-explain {
    background: var(--ok-surface-2); border-left: 3px solid var(--ok-accent);
    border-radius: var(--ok-radius-sm); padding: var(--ok-s3) var(--ok-s4);
    font-size: 13px; color: var(--ok-ink-soft); line-height: 1.6; margin-bottom: var(--ok-s4);
}

/* Attendance mark in the staff register */
.okami-att-status { font-size: var(--ok-fs-sm); color: var(--ok-ink-soft); font-variant-numeric: tabular-nums; }

/* Recipient address in the outbox list */
.okami-notif-email { font-size: var(--ok-fs-sm); color: var(--ok-ink-soft); word-break: break-all; }

/* Print sheet furniture */
.okami-print-logo { max-height: 60px; max-width: 180px; object-fit: contain; }
.okami-print-qr { width: 90px; height: 90px; }


/* ============ bulk invoice row builder ============ */
.okami-bulkrows { display: flex; flex-direction: column; gap: var(--ok-s3); }
.okami-brow {
    border: 1px solid var(--ok-line); border-radius: var(--ok-radius);
    background: var(--ok-surface); transition: border-color var(--ok-speed), background var(--ok-speed);
}
.okami-brow.is-approved { border-color: var(--ok-success); background: var(--ok-success-bg); }
.okami-brow.is-empty { border-style: dashed; }
/* a row whose member already appears above — same bill, not a clash */
.okami-brow.is-grouped { border-left: 3px solid var(--ok-primary); }

.okami-brow-top { display: grid; grid-template-columns: 26px 1.6fr 1.1fr 96px auto; gap: var(--ok-s3); align-items: center; padding: var(--ok-s3); }
.okami-brow-n { font-size: var(--ok-fs-sm); color: var(--ok-ink-faint); font-variant-numeric: tabular-nums; text-align: center; }
.okami-brow-price { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--ok-fw-semi); }
.okami-brow-acts { display: flex; gap: 6px; justify-content: flex-end; }
.okami-brow-detail {
    display: none; gap: var(--ok-s3); flex-wrap: wrap; align-items: flex-end;
    padding: var(--ok-s3) var(--ok-s3) var(--ok-s3) calc(26px + var(--ok-s3) * 2);
    border-top: 1px dashed var(--ok-line);
}
.okami-brow.is-open .okami-brow-detail { display: flex; }
.okami-brow-detail .f { flex: 1 1 130px; min-width: 0; }
.okami-brow-detail label { display: block; font-size: var(--ok-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ok-ink-soft); margin-bottom: 4px; font-weight: var(--ok-fw-semi); }
.okami-brow-detail input, .okami-brow-detail select { padding: 7px 9px; font-size: 13px; }
.okami-brow-note { flex: 1 1 100%; font-size: var(--ok-fs-sm); color: var(--ok-ink-soft); margin: 0; }
.okami-brow-groupnote { font-size: 11.5px; color: var(--ok-primary); font-weight: var(--ok-fw-medium); }

.okami-bsearch { position: relative; }
.okami-bsearch input { width: 100%; }
.okami-bsearch-drop {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 80;
    background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: var(--ok-radius);
    box-shadow: var(--ok-shadow-lg); max-height: 230px; overflow-y: auto; display: none;
}
.okami-bsearch-drop.open { display: block; }
.okami-bsearch-drop button { display: flex; width: 100%; gap: 10px; align-items: center; text-align: left; background: none; border: none; border-bottom: 1px solid var(--ok-line); padding: 9px 11px; cursor: pointer; font: inherit; color: var(--ok-ink); }
.okami-bsearch-drop button:hover { background: var(--ok-bg); }
.okami-bsearch-drop button:last-child { border-bottom: none; }
.okami-bsearch-drop .m { flex: 1; min-width: 0; }
.okami-bsearch-drop .m strong { display: block; font-size: 13px; }
.okami-bsearch-drop .m span { font-size: 11.5px; color: var(--ok-ink-soft); }
.okami-bsearch-drop .fee { font-size: 12px; color: var(--ok-ink-soft); font-variant-numeric: tabular-nums; }
.okami-bchosen { display: flex; align-items: center; gap: 8px; min-width: 0; }
.okami-bchosen .m { min-width: 0; }
.okami-bchosen strong { display: block; font-size: 13.5px; }
.okami-bchosen span { font-size: 11.5px; color: var(--ok-ink-soft); }

.okami-bulkfoot {
    position: sticky; bottom: 0; margin-top: var(--ok-s4);
    background: var(--ok-surface); border: 1px solid var(--ok-line); border-radius: var(--ok-radius);
    box-shadow: var(--ok-shadow-up); padding: var(--ok-s3) var(--ok-s4);
    display: flex; align-items: center; gap: var(--ok-s4); flex-wrap: wrap;
}
.okami-bulkfoot .grow { flex: 1; min-width: 140px; }
.okami-bulkfoot .tot { font-size: var(--ok-fs-xl); font-weight: var(--ok-fw-bold); font-variant-numeric: tabular-nums; }

/* ---- confirm sheet ---- */
.okami-sheet-bg { position: fixed; inset: 0; background: rgba(16,24,40,.55); z-index: 900; display: none; }
.okami-sheet-bg.open { display: block; }
.okami-sheet {
    position: fixed; z-index: 901; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: min(680px, calc(100vw - 32px)); max-height: 86vh; overflow-y: auto;
    background: var(--ok-surface); border-radius: var(--ok-radius); box-shadow: var(--ok-shadow-lg);
    display: none; padding: var(--ok-s5);
}
.okami-sheet.open { display: block; }
.okami-sheet h3 { margin: 0 0 var(--ok-s2); font-size: var(--ok-fs-lg); }
.okami-groupbox { border: 1px solid var(--ok-line); border-radius: var(--ok-radius-sm); margin-bottom: var(--ok-s3); overflow: hidden; }
.okami-groupbox-head { background: var(--ok-surface-2); padding: 9px var(--ok-s3); display: flex; justify-content: space-between; gap: var(--ok-s3); font-size: 13.5px; border-bottom: 1px solid var(--ok-line); }
.okami-groupbox-head strong { font-weight: var(--ok-fw-semi); }
.okami-groupbox-line { display: flex; justify-content: space-between; gap: var(--ok-s3); padding: 7px var(--ok-s3); font-size: 13px; border-bottom: 1px solid var(--ok-line); }
.okami-groupbox-line:last-child { border-bottom: none; }
.okami-groupbox-line span:last-child { font-variant-numeric: tabular-nums; }
.okami-invno { font-variant-numeric: tabular-nums; font-weight: var(--ok-fw-semi); color: var(--ok-primary); }

@media (max-width: 760px) {
    .okami-brow-top { grid-template-columns: 1fr auto; grid-template-areas: "n acts" "mem mem" "chg chg" "price price"; }
    .okami-brow-n { grid-area: n; text-align: left; }
    .okami-brow-acts { grid-area: acts; }
    .okami-brow-mem { grid-area: mem; }
    .okami-brow-chg { grid-area: chg; }
    .okami-brow-price { grid-area: price; text-align: left; }
    .okami-brow-detail { padding-left: var(--ok-s3); }
}

/* ---------- Member photo ---------- */
.okami-member-photo {
    width: 104px; height: 104px; border-radius: var(--ok-radius);
    object-fit: cover; border: 1px solid var(--ok-line); background: var(--ok-surface-2);
    flex-shrink: 0;
}
.okami-member-photo-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: var(--ok-ink-faint);
}
.okami-member-photo-sm { width: 40px; height: 40px; border-radius: 50%; }

/* A KPI that leads somewhere should look like it does */
a.okami-kpi-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--ok-speed), transform var(--ok-speed); }
a.okami-kpi-link:hover { border-color: var(--ok-primary); transform: translateY(-1px); }

/* ---------- Bulk add members: a row of fields per person ---------- */
.okami-mrow { display: flex; gap: var(--ok-s3); align-items: flex-end; padding: var(--ok-s3); flex-wrap: wrap; }
.okami-mrow .f { flex: 1 1 150px; min-width: 0; }
.okami-mrow label { display: block; font-size: var(--ok-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ok-ink-soft); margin-bottom: 4px; font-weight: var(--ok-fw-semi); }
.okami-mrow input, .okami-mrow select { padding: 8px 10px; font-size: 13.5px; }
.okami-mrow .okami-brow-n { padding-bottom: 9px; }
.okami-brow.is-warn { border-color: var(--ok-warn); background: var(--ok-warn-bg); }
.okami-mrow-warn { margin: 0; padding: 0 var(--ok-s3) var(--ok-s3) calc(26px + var(--ok-s3) * 2); font-size: var(--ok-fs-sm); color: var(--ok-warn-ink); }
@media (max-width: 760px) {
    .okami-mrow .f { flex: 1 1 100%; }
    .okami-mrow-warn { padding-left: var(--ok-s3); }
}

/* ============================================================
   Calmer, roomier pass — fewer lines, more air.
   The principle: separate things with SPACE and a change of
   surface, not with a border round everything.
   ============================================================ */

.okami-content { padding: var(--ok-s6) var(--ok-s6) var(--ok-s7); }
.okami-page-head { margin-bottom: var(--ok-s6); }
.okami-page-title { letter-spacing: -.02em; }

/* Section heads read as a quiet label, not a ruled line */
.okami-section { border-bottom: none; padding-bottom: 0; margin-bottom: var(--ok-s4); }
.okami-section h3 { letter-spacing: -.01em; }

/* Key/value rows: hairline separators only between items */
.okami-kv { padding: 12px 0; border-bottom: 1px solid var(--ok-line); }

/* Grouped-list feel: the first and last row of a card shouldn't
   have a separator hugging the card's own edge */
.okami-card > .okami-kv:first-child,
.okami-card > .okami-detail:first-child { padding-top: 0; }

/* Setting rows get real breathing room and a tap-friendly target */
.okami-setting-row { padding: var(--ok-s4) 0; gap: var(--ok-s4); }

/* Sidebar: softer, rounder, less dense */
.okami-nav a { border-radius: var(--ok-radius-sm); margin: 1px var(--ok-s2); padding: 10px 12px; }
.okami-nav-group { padding: var(--ok-s5) var(--ok-s4) 6px; opacity: .5; letter-spacing: .07em; }
.okami-subnav { padding-left: var(--ok-s4); }
.okami-subnav a { padding: 8px 12px; }

/* Alerts: tinted, not outlined */
.okami-alert { border-radius: var(--ok-radius-sm); padding: var(--ok-s3) var(--ok-s4); border-width: 0; }
.okami-alert-success { border-left: 3px solid var(--ok-success); }
.okami-alert-error   { border-left: 3px solid var(--ok-danger); }
.okami-alert-warn    { border-left: 3px solid var(--ok-warn); }

/* Hub tiles — the Bulk Import & Export landing */
.okami-hubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ok-s4); }
.okami-hubtile {
    display: block; padding: var(--ok-s5); border-radius: var(--ok-radius);
    background: var(--ok-surface); border: 1px solid var(--ok-line);
    box-shadow: var(--ok-shadow); color: inherit; text-decoration: none;
    transition: transform var(--ok-speed), border-color var(--ok-speed), box-shadow var(--ok-speed);
}
.okami-hubtile:hover { transform: translateY(-2px); border-color: var(--ok-primary); box-shadow: var(--ok-shadow-lg); }
.okami-hubtile i { font-size: 22px; color: var(--ok-primary); display: block; margin-bottom: var(--ok-s3); }
.okami-hubtile strong { display: block; font-size: var(--ok-fs-md); margin-bottom: 4px; letter-spacing: -.01em; }
.okami-hubtile span { display: block; font-size: 13px; color: var(--ok-ink-soft); line-height: 1.55; }

@media (max-width: 640px) {
    .okami-content { padding: var(--ok-s4) var(--ok-s4) var(--ok-s7); }
    .okami-card { padding: var(--ok-s4); }
    .okami-table th, .okami-table td { padding: 12px var(--ok-s3); }
}

/* ============================================================
   BOOTSTRAP 5 ALIGNMENT — the JIC ERP kit
   ------------------------------------------------------------
   Bootstrap now loads BEFORE this file, so the whole panel sits
   on its reboot, its type scale and its form/table proportions —
   the same foundation JIC ERP is built on.

   Rather than renaming ~200 views' okami-* classes to .btn/.card
   /.form-control (which would touch every file and could not be
   verified without a browser), the token layer below is repointed
   at Bootstrap's own values. Same visual system, no rewrite, and
   Bootstrap's grid and utility classes are now available for any
   new screen.
   ============================================================ */

:root {
    /* Palette — Bootstrap's, so PRIMAL and JIC read as one family */
    --ok-primary:       #0d6efd;
    --ok-primary-hover: #0b5ed7;
    --ok-primary-soft:  rgba(13,110,253,.25);
    --ok-success:       #198754;
    --ok-success-bg:    #d1e7dd;
    --ok-success-ink:   #0a3622;
    --ok-danger:        #dc3545;
    --ok-danger-bg:     #f8d7da;
    --ok-danger-ink:    #58151c;
    --ok-warn:          #ffc107;
    --ok-warn-bg:       #fff3cd;
    --ok-warn-ink:      #664d03;
    --ok-accent:        #fd7e14;
    --ok-accent-ink:    #813d05;

    /* Surfaces and ink */
    --ok-bg:            #f8f9fa;
    --ok-surface:       #ffffff;
    --ok-surface-2:     #f8f9fa;
    --ok-ink:           #212529;
    --ok-ink-soft:      #6c757d;
    --ok-ink-faint:     #adb5bd;
    --ok-line:          #dee2e6;
    --ok-line-strong:   #ced4da;

    /* Shape — Bootstrap's radii, not the softer iOS ones */
    --ok-radius:        .5rem;
    --ok-radius-sm:     .375rem;

    /* Elevation — Bootstrap's box-shadow scale */
    --ok-shadow:        0 .125rem .25rem rgba(0,0,0,.075);
    --ok-shadow-lg:     0 1rem 3rem rgba(0,0,0,.175);
    --ok-shadow-up:     0 -.5rem 1rem rgba(0,0,0,.1);

    /* Bootstrap's focus ring */
    --ok-focus:         0 0 0 .25rem rgba(13,110,253,.25);

    --ok-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", "Liberation Sans", Arial, sans-serif;

    /* Sidebar stays dark — an admin shell reads better with a dark rail,
       and it's what distinguishes the chrome from the working area */
    --ok-sidebar:        #212529;
    --ok-sidebar-ink:    #adb5bd;
    --ok-sidebar-active: #2c3237;
}

/* Component proportions matched to Bootstrap's own */
.okami-btn   { padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; font-weight: 400; }
.okami-btn-sm{ padding: .25rem .5rem;  font-size: .875rem; }
.okami-btn-lg{ padding: .5rem 1rem;    font-size: 1.25rem; }
.okami-input, .okami-select { padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-color: var(--ok-line-strong); }
.okami-label { font-size: 1rem; font-weight: 400; color: var(--ok-ink); margin-bottom: .5rem; }
.okami-hint  { font-size: .875em; color: var(--ok-ink-soft); }

/* Cards read as Bootstrap cards */
.okami-card { padding: 1rem; box-shadow: none; }
.okami-card + .okami-card { margin-top: 1rem; }

/* Tables read as .table — compact, hairline rules, striped hover */
.okami-table th, .okami-table td { padding: .5rem .5rem; border-bottom: 1px solid var(--ok-line); vertical-align: top; }
.okami-table th { font-size: .875rem; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ok-ink); }
.okami-table tbody tr:hover { background: rgba(0,0,0,.03); }

/* Badges read as Bootstrap badges */
.okami-badge { padding: .35em .65em; font-size: .75em; font-weight: 700; border-radius: .375rem; }

/* Alerts read as Bootstrap alerts */
.okami-alert { padding: 1rem; border: 1px solid transparent; border-left-width: 1px; border-radius: var(--ok-radius-sm); }
.okami-alert-success { background: var(--ok-success-bg); color: var(--ok-success-ink); border-color: #a3cfbb; }
.okami-alert-error   { background: var(--ok-danger-bg);  color: var(--ok-danger-ink);  border-color: #f1aeb5; }
.okami-alert-warn    { background: var(--ok-warn-bg);    color: var(--ok-warn-ink);    border-color: #ffe69c; }

/* Section heads: plain, with a rule, like a card header */
.okami-section { border-bottom: 1px solid var(--ok-line); padding-bottom: .5rem; margin-bottom: 1rem; }
.okami-section h3 { font-size: 1rem; font-weight: 600; }

.okami-content { padding: 1.5rem; }
.okami-page-title { font-size: 1.5rem; font-weight: 500; letter-spacing: normal; }
.okami-kpi { padding: 1rem; box-shadow: none; }
.okami-kpi-value { font-size: 1.75rem; font-weight: 600; }
.okami-setting-row { padding: .75rem 0; }
.okami-hubtile { padding: 1rem; box-shadow: none; }
.okami-hubtile:hover { transform: none; box-shadow: var(--ok-shadow); }

/* Bootstrap's reboot leaves bare links its own blue; keep ours consistent
   and make sure nothing in the dark rail inherits it */
a { color: var(--ok-primary); }
.okami-nav a, .okami-subnav a, .okami-brand, .okami-sidebar-foot { color: var(--ok-sidebar-ink); }
.okami-nav a.active { color: #fff; }

/* Dark mode: keep Bootstrap's dark palette rather than inventing one */
[data-theme="dark"] {
    --ok-bg: #212529;
    --ok-surface: #2b3035;
    --ok-surface-2: #343a40;
    --ok-ink: #dee2e6;
    --ok-ink-soft: #adb5bd;
    --ok-ink-faint: #6c757d;
    --ok-line: #495057;
    --ok-line-strong: #6c757d;
    --ok-sidebar: #16191c;
    --ok-sidebar-active: #2b3035;
    --ok-primary: #6ea8fe;
    --ok-primary-hover: #8bb9fe;
}

/* ============================================================
   ADMIN THEME — matched to the reference dashboard
   ------------------------------------------------------------
   What actually makes that design read as "clean", in order of
   how much each one contributes:
     1. a WHITE side rail instead of a dark one
     2. cards with NO border — a soft shadow lifts them off a
        light grey page instead
     3. real space between things
     4. one violet accent, used sparingly
   Everything below serves those four. Class names unchanged.
   ============================================================ */

:root {
    --ok-primary:       #5b5fef;
    --ok-primary-hover: #4a4ee0;
    --ok-primary-soft:  rgba(91,95,239,.12);
    --ok-accent:        #5b5fef;
    --ok-accent-ink:    #ffffff;

    --ok-bg:            #f4f5f7;   /* page — cards float on this */
    --ok-surface:       #ffffff;
    --ok-surface-2:     #f9fafb;
    --ok-ink:           #1f2333;
    --ok-ink-soft:      #6b7280;
    --ok-ink-faint:     #9ca3af;
    --ok-line:          #eef0f4;   /* only where a rule is unavoidable */
    --ok-line-strong:   #e2e5ec;

    /* The white rail */
    --ok-sidebar:        #ffffff;
    --ok-sidebar-ink:    #6b7280;
    --ok-sidebar-active: #eef0fe;

    --ok-radius:        14px;
    --ok-radius-sm:     9px;

    /* Barely-there lift, not a drawn edge */
    --ok-shadow:        0 1px 2px rgba(20,25,50,.04), 0 4px 14px -6px rgba(20,25,50,.10);
    --ok-shadow-lg:     0 12px 40px -10px rgba(20,25,50,.20);
    --ok-focus:         0 0 0 3px var(--ok-primary-soft);
}

/* ---- The rail ---- */
.okami-sidebar { background: var(--ok-sidebar); border-right: 1px solid var(--ok-line); }
.okami-brand { border-bottom: 1px solid var(--ok-line); padding: 18px 20px; }
.okami-brand-text { color: var(--ok-ink); font-weight: 650; }
.okami-mark { background: var(--ok-primary); color: #fff; border-radius: 9px; }
.okami-nav a, .okami-subnav a { color: var(--ok-sidebar-ink); font-weight: 500; }
.okami-nav a:hover, .okami-subnav a:hover { background: var(--ok-surface-2); color: var(--ok-ink); }
.okami-nav a.active, .okami-subnav a.active {
    background: var(--ok-sidebar-active); color: var(--ok-primary); font-weight: 600;
}
.okami-nav a.active i { color: var(--ok-primary); }
.okami-nav-group, .okami-subnav-group { color: var(--ok-ink-faint); opacity: 1; font-weight: 700; }
.okami-sidebar-foot { color: var(--ok-ink-faint); border-top: 1px solid var(--ok-line); }
.okami-sidebar-foot strong { color: var(--ok-ink-soft); }

/* ---- Top bar: white, with a pill search ---- */
.okami-topbar { background: var(--ok-surface); border-bottom: 1px solid var(--ok-line); height: 64px; }
.okami-topbar-search input {
    border-radius: 999px; background: var(--ok-surface-2);
    border: 1px solid transparent; padding: 10px 16px 10px 38px;
}
.okami-topbar-search input:focus { background: var(--ok-surface); border-color: var(--ok-line-strong); box-shadow: var(--ok-focus); }
.okami-topbar-search > .bi-search { left: 15px; }

/* ---- Cards: no border, soft lift, more room ---- */
.okami-card, .okami-kpi, .okami-hubtile {
    border: none;
    border-radius: var(--ok-radius);
    box-shadow: var(--ok-shadow);
    padding: 22px;
}
.okami-card + .okami-card { margin-top: 20px; }
.okami-kpis { gap: 20px; }
.okami-hubtile:hover { box-shadow: var(--ok-shadow-lg); transform: translateY(-2px); }

/* ---- Page furniture ---- */
.okami-content { padding: 26px 28px 44px; }
.okami-page-head { margin-bottom: 22px; }
.okami-page-title { font-size: 24px; font-weight: 650; letter-spacing: -.01em; }

/* ---- Buttons: rounded, solid accent, quiet secondary ---- */
.okami-btn {
    border-radius: var(--ok-radius-sm); font-weight: 550; font-size: 14px;
    padding: 9px 16px; border-color: var(--ok-line-strong);
}
.okami-btn:hover { background: var(--ok-surface-2); }
.okami-btn-primary { border-color: var(--ok-primary); box-shadow: 0 2px 8px -2px rgba(91,95,239,.5); }
.okami-btn-primary:hover { background: var(--ok-primary-hover); }
.okami-btn-lg { padding: 12px 22px; font-size: 15px; }
.okami-btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---- Inputs ---- */
.okami-input, .okami-select {
    border-radius: var(--ok-radius-sm); border-color: var(--ok-line-strong);
    padding: 10px 14px; font-size: 14px;
}
.okami-label { font-size: 13px; font-weight: 600; color: var(--ok-ink); margin-bottom: 7px; }

/* ---- Tables: no boxed-in feel; the card is the boundary ---- */
.okami-table th {
    background: var(--ok-surface-2); color: var(--ok-ink-soft);
    font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
    padding: 12px 14px; border-bottom: none; white-space: nowrap;
}
.okami-table th:first-child { border-radius: 8px 0 0 8px; }
.okami-table th:last-child  { border-radius: 0 8px 8px 0; }
.okami-table td { padding: 14px; border-bottom: 1px solid var(--ok-line); font-size: 14px; }
.okami-table tbody tr:last-child td { border-bottom: none; }
.okami-table tbody tr:hover { background: var(--ok-surface-2); }

/* ---- Badges: soft tint, not solid ---- */
.okami-badge { border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 600; }

/* ---- Alerts: tinted, borderless ---- */
.okami-alert { border: none; border-radius: var(--ok-radius-sm); padding: 14px 18px; }

/* ---- Section heads: a quiet label, no rule ---- */
.okami-section { border-bottom: none; padding-bottom: 0; margin-bottom: 16px; }
.okami-section h3 { font-size: 16px; font-weight: 620; }

/* ---- Segmented control (the "Sort by" pill in the reference) ---- */
.okami-segment { background: var(--ok-surface-2); border: none; border-radius: 999px; padding: 4px; }
.okami-segment button { border-radius: 999px; padding: 7px 16px; }
.okami-segment button.is-on { background: var(--ok-surface); color: var(--ok-primary); font-weight: 600; box-shadow: var(--ok-shadow); }

/* ---- Row builders inherit the same softness ---- */
.okami-brow { border-radius: var(--ok-radius-sm); border-color: var(--ok-line); }
.okami-bulkfoot { border: none; border-radius: var(--ok-radius); box-shadow: 0 -4px 20px -8px rgba(20,25,50,.18); }

/* ---- Dark mode keeps the same shapes, inverted ---- */
[data-theme="dark"] {
    --ok-bg: #14161f;
    --ok-surface: #1c1f2b;
    --ok-surface-2: #232733;
    --ok-ink: #e7e9ef;
    --ok-ink-soft: #9aa1b1;
    --ok-ink-faint: #6b7280;
    --ok-line: #2a2f3d;
    --ok-line-strong: #363c4d;
    --ok-sidebar: #1c1f2b;
    --ok-sidebar-ink: #9aa1b1;
    --ok-sidebar-active: #2a2f4d;
    --ok-primary: #7c80ff;
    --ok-primary-hover: #9296ff;
    --ok-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.5);
}
[data-theme="dark"] .okami-mark { color: #fff; }

@media (max-width: 640px) {
    .okami-content { padding: 16px 14px 40px; }
    .okami-card, .okami-kpi, .okami-hubtile { padding: 16px; }
    .okami-kpis { gap: 12px; }
}

/* ============================================================
   MOBILE + FORM UNIFORMITY
   ------------------------------------------------------------
   Three decisions, applied everywhere:
     1. Forms are ALWAYS one field per row. A single column is
        already the mobile layout, so no form needs a second one.
     2. On a phone the bottom third of the screen belongs to the
        thumb: quick search, then the tab bar; and on any screen
        with a job to finish, a sticky action bar above them.
     3. KPIs are one card read as a list — identical on both.
   ============================================================ */

/* ---- 1. Forms: one column, always ---- */
.okami-form-grid { display: block; }
.okami-field { margin-bottom: 18px; }
.okami-form-group {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ok-ink-faint); margin: 26px 0 12px;
}
.okami-form-group:first-child { margin-top: 0; }
/* A form is a reading column, not a full-bleed sheet */
.okami-form-col { max-width: 560px; }

/* ---- 2. KPI list ---- */
.okami-kpilist { padding: 0; overflow: hidden; }
.okami-kpirow {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; border-bottom: 1px solid var(--ok-line);
    text-decoration: none; color: inherit;
}
.okami-kpirow:last-child { border-bottom: none; }
.okami-kpirow:hover { background: var(--ok-surface-2); }
.okami-kpi-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; }
.okami-kpi-txt { flex: 1; min-width: 0; }
.okami-kpi-txt strong { display: block; font-size: 14px; font-weight: 600; }
.okami-kpi-txt span { font-size: 12px; color: var(--ok-ink-faint); }
.okami-kpi-fig { text-align: right; font-size: 19px; font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }
.okami-kpi-fig .d { display: block; font-size: 11.5px; font-weight: 600; }
.okami-kpirow > .bi-chevron-right { color: var(--ok-ink-faint); font-size: 13px; }

/* ---- 3. The phone bottom stack ---- */
.okami-botstack { display: none; }        /* desktop: nothing */
.okami-tabbar, .okami-qsearch, .okami-actbar { display: none; }

@media (max-width: 900px) {
    .okami-botstack {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    }
    .okami-qsearch {
        display: flex; gap: 8px; padding: 8px 12px;
        background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--ok-line);
    }
    .okami-qsearch .w { position: relative; flex: 1; min-width: 0; }
    .okami-qsearch .w i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ok-ink-faint); }
    .okami-qsearch input {
        width: 100%; border: 1px solid var(--ok-line-strong); border-radius: 999px;
        padding: 10px 16px 10px 38px; font-size: 16px;   /* 16px stops iOS zooming on focus */
        background: var(--ok-surface-2); color: var(--ok-ink);
    }
    .okami-qsearch input:focus { outline: none; background: var(--ok-surface); box-shadow: var(--ok-focus); }
    .okami-qsearch a.scan {
        border: none; background: var(--ok-primary); color: #fff; border-radius: 999px;
        width: 44px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0;
    }

    .okami-tabbar {
        display: flex; background: rgba(255,255,255,.94);
        backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--ok-line);
        padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    }
    .okami-tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; padding: 5px 2px; min-height: 46px;
        font-size: 10.5px; font-weight: 500; color: var(--ok-ink-faint); text-decoration: none;
    }
    .okami-tabbar a i { font-size: 18px; }
    .okami-tabbar a.active { color: var(--ok-primary); }

    /* A screen with something to finish gets its actions pinned above the bar */
    .okami-actbar {
        display: flex; gap: 8px; padding: 10px 12px;
        background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--ok-line);
    }
    .okami-actbar .okami-btn { flex: 0 0 auto; }
    .okami-actbar .okami-btn-primary { flex: 1; justify-content: center; }

    /* Nothing may hide behind the stack */
    .okami-content { padding: 14px 14px 150px; }
    .okami-main { margin-left: 0; }

    /* The invoice already has its own floating Save/Post bar — on a phone it
       simply stacks directly above the quick search and tab bar rather than
       being duplicated. Measured, not guessed: quick search is 8+8 padding
       around a ~40px input (56), the tab bar is 5+5 around a 46px target (56),
       so the invoice bar starts at 112px. */
    .okami-inv-actionbar { left: 0; bottom: 112px; box-shadow: none; border-top: 1px solid var(--ok-line); }
    .okami-inv-actionbar-inner { padding: 8px 12px; }
    /* The spacer already sits at the end of that page, so it — not a :has()
       selector — is what clears the stack. :has() is unsupported on the older
       Android browsers a gym's phone may well be running. */
    .okami-inv-actionbar-spacer { height: 190px; }

    [data-theme="dark"] .okami-qsearch,
    [data-theme="dark"] .okami-tabbar,
    [data-theme="dark"] .okami-actbar { background: rgba(28,31,43,.94); }
}

/* ---- 4. Everything else that must survive a 360px screen ---- */
@media (max-width: 640px) {
    .okami-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .okami-page-head > div { display: flex; gap: 8px; }
    .okami-page-head > div > * { flex: 1; justify-content: center; }
    .okami-page-title { font-size: 20px; }

    .okami-kpis { grid-template-columns: 1fr; gap: 12px; }
    .okami-kpirow { padding: 13px 14px; gap: 11px; }
    .okami-kpi-fig { font-size: 17px; }

    .okami-two-col { display: block; }
    .okami-two-col > * + * { margin-top: 14px; }

    .okami-form-col { max-width: none; }
    .okami-toolbar { flex-direction: column; align-items: stretch; }
    .okami-toolbar-end { margin-left: 0; }
    .okami-toolbar-end > * { flex: 1; justify-content: center; }

    /* Any input a thumb touches: 16px, or iOS zooms the page on focus */
    .okami-input, .okami-select, .okami-xsheet input, .okami-xsheet select,
    .okami-mrow input, .okami-mrow select,
    .okami-brow-detail input, .okami-brow-detail select { font-size: 16px; }

    .okami-hubgrid { grid-template-columns: 1fr; }
    .okami-sheet { width: calc(100vw - 20px); padding: 18px; max-height: 88vh; }
    .okami-bulkfoot { flex-direction: column; align-items: stretch; }
    .okami-bulkfoot .okami-btn { width: 100%; justify-content: center; }
}


/* ============================================================
   EXPENSE REGISTER — lifted verbatim from the approved mockup so
   the shipped screen is what was signed off. The colour on a
   reversed or corrected row is permanent by design.
   ============================================================ */
.reg{width:100%;border-collapse:separate;border-spacing:0;}
.reg th{background:var(--ok-surface-2);color:var(--ok-ink-soft);font-size:12px;font-weight:600;padding:10px 12px;text-align:left;white-space:nowrap;}
.reg th:first-child{border-radius:8px 0 0 8px;} .reg th:last-child{border-radius:0 8px 8px 0;}
.reg td{padding:5px 6px;border-bottom:1px solid var(--ok-line);vertical-align:middle;}
.reg tbody tr:last-child td{border-bottom:none;}
.reg .n{width:38px;text-align:center;color:var(--ok-ink-faint);font-size:12.5px;font-variant-numeric:tabular-nums;}
.reg input,.reg select{width:100%;padding:8px 10px;font-size:13.5px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ok-ink);font-family:inherit;}
.reg input:hover,.reg select:hover{background:var(--ok-surface-2);}
.reg input:focus,.reg select:focus{outline:none;background:var(--ok-surface);border-color:var(--ok-primary);box-shadow:var(--ok-focus);}
.reg .amt input{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;}
.reg tfoot td{padding:14px 12px;font-weight:700;border-top:2px solid var(--ok-line);}
.reg tfoot .tot{text-align:right;font-size:18px;font-variant-numeric:tabular-nums;}

/* ---- PERMANENT colours. A row that has ever been part of a revision
       keeps its colour for good — a left edge that never washes out. ---- */
tr.r-posted td{background:#fbfcfd;}
tr.r-posted input,tr.r-posted select{pointer-events:none;color:var(--ok-ink-soft);}

tr.r-reversed td{background:#fff5f5;}
tr.r-reversed td:first-child{box-shadow:inset 4px 0 0 #dc2626;}
tr.r-reversed input,tr.r-reversed select{pointer-events:none;color:#b42318;text-decoration:line-through;}

tr.r-correction td{background:#f3faf6;}
tr.r-correction td:first-child{box-shadow:inset 4px 0 0 #16a34a;}
tr.r-correction input,tr.r-correction select{pointer-events:none;color:var(--ok-ink-soft);}

/* a correction that was itself later revised keeps BOTH marks */
tr.r-correction.was-revised td{background:#fff5f5;}
tr.r-correction.was-revised td:first-child{box-shadow:inset 4px 0 0 #dc2626;}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;}
.c-draft{background:#eef0f4;color:#6b7280;} .c-saving{background:#fff8e6;color:#a16207;}
.c-saved{background:#e9f7ef;color:#0a7f45;} .c-posted{background:#eef0fe;color:#4338ca;}
.c-rev{background:#fdeaea;color:#b42318;} .c-corr{background:#e9f7ef;color:#0a7f45;}
.c-count{background:#fdeaea;color:#b42318;border:1px solid #f5b5b5;}

.rowact{display:flex;gap:4px;justify-content:flex-end;}
.rowact button{border:none;background:none;cursor:pointer;color:var(--ok-ink-faint);padding:6px 7px;border-radius:7px;font-size:13px;}
.rowact button:hover{background:var(--ok-surface-2);color:var(--ok-ink);}
.rowact button.danger:hover{background:var(--ok-danger-bg);color:var(--ok-danger);}
.rowact button.hist:hover{background:#fdeaea;color:#b42318;}
.linknote{font-size:11px;color:var(--ok-ink-faint);padding:2px 0 0 12px;}
.linknote.rev{color:#b42318;}

/* panels */
.rvbg{position:fixed;inset:0;background:rgba(20,25,50,.5);z-index:900;display:none;}
.rvbg.on{display:block;}
.pnl{position:fixed;z-index:901;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 28px));
  max-height:88vh;overflow:auto;background:var(--ok-surface);border-radius:14px;box-shadow:var(--ok-shadow-lg);padding:24px;display:none;}
.pnl.on{display:block;}
.pnl h3{margin:0 0 4px;font-size:17px;} .pnl .sub{font-size:13px;color:var(--ok-ink-soft);margin:0 0 18px;}
.rvgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.rvcol{border:1px solid var(--ok-line);border-radius:10px;padding:14px;}
.rvcol h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ok-ink-faint);}
.rvcol.old{background:#fff5f5;} .rvcol.new{background:#f3faf6;}
.rvrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;}
.rvrow span:first-child{color:var(--ok-ink-soft);}
.rvcol input,.rvcol select{width:100%;padding:7px 9px;font-size:13.5px;border:1px solid var(--ok-line-strong);border-radius:7px;font-family:inherit;background:var(--ok-surface);}
.jrnl{background:var(--ok-surface-2);border-radius:9px;padding:12px 14px;margin-top:16px;font-size:12.5px;}
.jrnl b{display:block;margin-bottom:7px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ok-ink-faint);}
.jline{display:flex;justify-content:space-between;padding:2px 0;font-variant-numeric:tabular-nums;}

/* revision history timeline */
.tl{position:relative;padding-left:28px;}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--ok-line);}
.tlitem{position:relative;padding:0 0 20px;}
.tlitem::before{content:'';position:absolute;left:-24px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ok-primary);border:2px solid var(--ok-surface);}
.tlitem.rev::before{background:#dc2626;} .tlitem.corr::before{background:#16a34a;}
.tlitem h5{margin:0 0 3px;font-size:13.5px;font-weight:650;}
.tlitem .when{font-size:11.5px;color:var(--ok-ink-faint);}
.tlitem .why{font-size:12.5px;color:var(--ok-ink-soft);background:var(--ok-surface-2);border-radius:7px;padding:8px 10px;margin-top:7px;}
.tlitem .amt{font-variant-numeric:tabular-nums;font-weight:600;}

.heads{display:flex;flex-wrap:wrap;gap:8px;}
.head-chip{display:inline-flex;align-items:center;gap:7px;background:var(--ok-surface-2);border:1px solid var(--ok-line);border-radius:99px;padding:6px 8px 6px 14px;font-size:13px;}
.head-chip button{border:none;background:none;cursor:pointer;color:var(--ok-ink-faint);padding:3px;border-radius:99px;}
.head-chip button:hover{background:var(--ok-danger-bg);color:var(--ok-danger);}

.toast{position:fixed;right:18px;bottom:18px;z-index:950;background:#1f2333;color:#fff;padding:11px 16px;border-radius:10px;font:13px var(--ok-font);opacity:0;transform:translateY(8px);transition:.2s;}
.toast.on{opacity:1;transform:none;}
@media (max-width:760px){.rvgrid{grid-template-columns:1fr;}.reg{display:block;overflow-x:auto;white-space:nowrap;}}

/* A deleted expense stays on the register, struck through, with its note. */
tr.r-deleted td { background:#fafafa; }
tr.r-deleted td:first-child { box-shadow: inset 4px 0 0 #9ca3af; }
tr.r-deleted input, tr.r-deleted select { pointer-events:none; color:#9ca3af; text-decoration:line-through; }

/* ============================================================
   EXPENSE REGISTER — one row per correction chain (V6.9.0)
   A correction reverses its original and writes a new linked row.
   Listing every row showed one expense as three, so the register now
   draws only the live row and folds its history in underneath it.
   Deleted expenses leave the table and collect in the log at the foot.
   ============================================================ */
/* ---- Expense register: one row per expense chain ---- */
.reg tr.chain > td{border-bottom:1px solid var(--ok-line)}
.reg tr.chain.open > td{border-bottom:none;background:var(--ok-surface-2)}
.revtoggle{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:99px;border:1px solid var(--ok-line);background:var(--ok-surface);
  color:var(--ok-ink-soft);cursor:pointer;font-family:inherit;white-space:nowrap}
.revtoggle:hover{border-color:var(--ok-primary);color:var(--ok-primary)}
.revtoggle .bi{font-size:10px;transition:transform .15s}
.chain.open .revtoggle .bi-chevron-down{transform:rotate(180deg)}
.reg tr.histrow > td{padding:0;border-bottom:1px solid var(--ok-line);background:var(--ok-surface-2)}

.tl{padding:4px 14px 16px 14px}
.tl-item{position:relative;padding:0 0 14px 26px;border-left:2px solid var(--ok-line);margin-left:6px}
.tl-item:last-child{border-left-color:transparent;padding-bottom:2px}
.tl-dot{position:absolute;left:-8px;top:1px;width:14px;height:14px;border-radius:50%;
  background:var(--ok-surface);border:2px solid var(--ok-line);display:grid;place-items:center;
  font-size:7px;color:var(--ok-ink-faint)}
.tl-item.is-create .tl-dot{border-color:#12b76a;color:#12b76a}
.tl-item.is-post   .tl-dot{border-color:#2563eb;color:#2563eb}
.tl-item.is-revise .tl-dot{border-color:#f79009;color:#f79009}
.tl-item.is-delete .tl-dot{border-color:#d92d20;color:#d92d20}
.tl-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;font-weight:700}
.tl-when{font-weight:500;color:var(--ok-ink-faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.tl-who{font-weight:500;color:var(--ok-ink-soft);font-size:11.5px}
.tl-body{font-size:12.5px;color:var(--ok-ink-soft);margin-top:3px;line-height:1.55}
.tl-diff{display:inline-flex;align-items:center;gap:7px;margin-top:5px;font-size:12.5px;
  font-variant-numeric:tabular-nums;background:var(--ok-surface);border:1px solid var(--ok-line);
  border-radius:7px;padding:4px 10px}
.tl-diff .was{text-decoration:line-through;color:var(--ok-ink-faint)}
.tl-diff .now{font-weight:700}
.tl-reason{margin-top:5px;font-size:12.5px;padding:6px 10px;border-radius:7px;
  background:var(--ok-surface);border-left:3px solid var(--ok-warn);color:var(--ok-ink)}
.tl-foot{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}

/* ---- Deleted entries log at the bottom of the register ---- */
.delbox{margin-top:22px;border:1px solid var(--ok-line);border-radius:var(--ok-radius,12px);
  background:var(--ok-surface);overflow:hidden}
.delbox-head{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;
  background:var(--ok-surface-2);border-bottom:1px solid transparent}
.delbox.open .delbox-head{border-bottom-color:var(--ok-line)}
.delbox-head h3{margin:0;font-size:14px;font-weight:700}
.delbox-head .cnt{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;
  background:#fee4e2;color:#b42318}
[data-theme=dark] .delbox-head .cnt{background:#4a1512;color:#fda29b}
.delbox-head .sp{flex:1}
.delbox-body{display:none;padding:6px 0 4px}
.delbox.open .delbox-body{display:block}
.delrow{display:grid;grid-template-columns:120px 1fr 130px 1fr auto;gap:12px;align-items:center;
  padding:11px 16px;border-bottom:1px solid var(--ok-line);font-size:12.5px}
.delrow:last-child{border-bottom:none}
.delrow .no{font-weight:700;font-variant-numeric:tabular-nums}
.delrow .desc{text-decoration:line-through;color:var(--ok-ink-faint)}
.delrow .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ok-ink-faint)}
.delrow .why{color:var(--ok-ink);border-left:3px solid var(--ok-danger);padding-left:9px}
.delrow .meta{font-size:11px;color:var(--ok-ink-faint);margin-top:2px}
@media(max-width:820px){.delrow{grid-template-columns:1fr 1fr;gap:6px}.delrow .amt{text-align:left}}

/* ---- Delete-with-reason panel (replaces the browser prompt) ---- */
.dlwarn{background:#fef3f2;border:1px solid #fecdca;border-radius:9px;padding:11px 13px;
  font-size:12.5px;color:#b42318;line-height:1.55;margin-bottom:14px}
[data-theme=dark] .dlwarn{background:#2b1614;border-color:#5c1f1a;color:#fda29b}

/* ============================================================
   SYSTEM TOOLS (V6.9.0) — deploy, logs, debug, housekeeping
   ============================================================ */
/* ============================================================
   SYSTEM TOOLS
   ============================================================ */
.systabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--ok-line);padding-bottom:0}
.systab{background:none;border:none;border-bottom:2px solid transparent;padding:9px 13px;
  font-size:13px;font-weight:600;color:var(--ok-ink-soft);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px}
.systab:hover{color:var(--ok-ink)}
.systab.on{color:var(--ok-primary);border-bottom-color:var(--ok-primary)}
.syspane{display:none} .syspane.on{display:block}

/* ---- Deploy dropzone ---- */
.dz{border:2px dashed var(--ok-line);border-radius:14px;padding:34px 20px;text-align:center;
  background:var(--ok-surface-2);transition:border-color .15s,background .15s}
.dz.hot{border-color:var(--ok-primary);background:color-mix(in srgb,var(--ok-primary) 6%,transparent)}
.dz .bi-box-seam{font-size:38px;color:var(--ok-ink-faint);display:block;margin-bottom:10px}
.dz h3{margin:0 0 5px;font-size:16px}
.dz p{margin:0 0 16px;font-size:13px;color:var(--ok-ink-soft)}

/* ---- Package inspection checklist ---- */
.chk{list-style:none;margin:0;padding:0}
.chk li{display:flex;gap:11px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--ok-line);font-size:13px}
.chk li:last-child{border-bottom:none}
.chk .ic{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10px;flex:0 0 19px;margin-top:1px}
.chk .ic.ok{background:#d1fadf;color:#027a48} .chk .ic.bad{background:#fee4e2;color:#b42318}
.chk .ic.warn{background:#fef0c7;color:#b54708} .chk .ic.run{background:var(--ok-surface-2);color:var(--ok-ink-faint)}
[data-theme=dark] .chk .ic.ok{background:#053321;color:#6ce9a6}
[data-theme=dark] .chk .ic.bad{background:#4a1512;color:#fda29b}
[data-theme=dark] .chk .ic.warn{background:#4a2f0a;color:#fec84b}
.chk .tx{flex:1} .chk .tx b{display:block;font-weight:600}
.chk .tx span{font-size:12px;color:var(--ok-ink-soft)}

.verdict{display:flex;gap:13px;align-items:center;border-radius:11px;padding:14px 16px;margin:16px 0}
.verdict.good{background:#ecfdf3;border:1px solid #a6f4c5;color:#027a48}
.verdict.bad{background:#fef3f2;border:1px solid #fecdca;color:#b42318}
[data-theme=dark] .verdict.good{background:#053321;border-color:#075e3c;color:#6ce9a6}
[data-theme=dark] .verdict.bad{background:#2b1614;border-color:#5c1f1a;color:#fda29b}
.verdict .bi{font-size:24px} .verdict b{display:block;font-size:14px} .verdict span{font-size:12.5px}

.vercmp{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px;
  background:var(--ok-surface-2);border-radius:11px;margin-bottom:16px}
.vercmp .v{text-align:center} .vercmp .v small{display:block;font-size:11px;color:var(--ok-ink-faint);margin-bottom:3px}
.vercmp .v b{font-size:19px;font-variant-numeric:tabular-nums}
.vercmp .arw{font-size:19px;color:var(--ok-ink-faint)}
.vercmp .v.to b{color:#027a48}

/* ---- Live progress ---- */
.prog{margin:16px 0}
.prog-bar{height:7px;border-radius:99px;background:var(--ok-surface-2);overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--ok-primary);width:0;transition:width .35s;border-radius:99px}
.steps{list-style:none;margin:14px 0 0;padding:0}
.steps li{display:flex;gap:10px;align-items:center;padding:7px 2px;font-size:13px;color:var(--ok-ink-faint)}
.steps li.done{color:var(--ok-ink)} .steps li.now{color:var(--ok-primary);font-weight:600}
.steps .bi{font-size:14px;width:16px}

/* ---- Log console (error log / update log) ---- */
.logtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.logtools .grow{flex:1;min-width:180px}
.ent{border:1px solid var(--ok-line);border-radius:10px;margin-bottom:9px;overflow:hidden;background:var(--ok-surface)}
.ent-head{display:flex;gap:10px;align-items:center;padding:10px 13px;cursor:pointer}
.ent-head .lvl{font-size:10px;font-weight:800;letter-spacing:.5px;padding:3px 7px;border-radius:5px;flex:0 0 auto}
.lvl.fatal{background:#fee4e2;color:#b42318} .lvl.warn{background:#fef0c7;color:#b54708}
.lvl.notice{background:#eff8ff;color:#175cd3} .lvl.ok{background:#d1fadf;color:#027a48}
[data-theme=dark] .lvl.fatal{background:#4a1512;color:#fda29b}
[data-theme=dark] .lvl.warn{background:#4a2f0a;color:#fec84b}
[data-theme=dark] .lvl.notice{background:#102a4c;color:#84caff}
[data-theme=dark] .lvl.ok{background:#053321;color:#6ce9a6}
.ent-head .msg{flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-head .ts{font-size:11.5px;color:var(--ok-ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.ent-head .cnt2{font-size:10.5px;font-weight:700;background:var(--ok-surface-2);color:var(--ok-ink-soft);
  padding:2px 7px;border-radius:99px}
.ent-body{display:none;border-top:1px solid var(--ok-line);background:var(--ok-surface-2)}
.ent.open .ent-body{display:block}
.ent pre{margin:0;padding:13px;font-family:ui-monospace,"JetBrains Mono",Menlo,monospace;
  font-size:11.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;color:var(--ok-ink)}
.ent-acts{display:flex;gap:7px;padding:0 13px 12px;flex-wrap:wrap}
.copybtn{position:relative}
.copybtn.copied::after{content:"Copied";position:absolute;inset:0;display:grid;place-items:center;
  background:#12b76a;color:#fff;border-radius:inherit;font-size:12px;font-weight:600}

/* ---- Housekeeping cards ---- */
.hkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:13px}
.hk{border:1px solid var(--ok-line);border-radius:12px;padding:15px;background:var(--ok-surface);
  display:flex;flex-direction:column;gap:9px}
.hk h4{margin:0;font-size:13.5px;display:flex;align-items:center;gap:8px}
.hk h4 .bi{color:var(--ok-primary)}
.hk p{margin:0;font-size:12.5px;color:var(--ok-ink-soft);line-height:1.55;flex:1}
.hk .sz{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ok-ink-faint)}
.hk.danger h4 .bi{color:var(--ok-danger)}

.bars{margin-top:6px}
.bars .b{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:6px 0}
.bars .b .nm{flex:0 0 128px;color:var(--ok-ink-soft)}
.bars .b .tr{flex:1;height:8px;background:var(--ok-surface-2);border-radius:99px;overflow:hidden}
.bars .b .tr i{display:block;height:100%;background:var(--ok-primary);border-radius:99px}
.bars .b .vl{flex:0 0 74px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ---- Debug ---- */
.kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 22px}
.kvrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--ok-line);font-size:12.5px}
.kvrow span{color:var(--ok-ink-soft)} .kvrow b{font-variant-numeric:tabular-nums;text-align:right}
.kvrow b.good{color:#027a48} .kvrow b.bad{color:#b42318}
.dbgtoggle{display:flex;gap:13px;align-items:center;padding:14px 16px;border-radius:11px;
  background:#fffbeb;border:1px solid #fde68a;margin-bottom:16px}
[data-theme=dark] .dbgtoggle{background:#2a2313;border-color:#5c4a17}
.dbgtoggle .tx{flex:1;font-size:12.5px;line-height:1.55;color:#78350f}
[data-theme=dark] .dbgtoggle .tx{color:#fcd34d}
.dbgtoggle .tx b{display:block;font-size:13.5px;margin-bottom:2px}
.sw{width:46px;height:26px;border-radius:99px;background:var(--ok-line);position:relative;cursor:pointer;flex:0 0 46px;border:none}
.sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .16s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw.on{background:#12b76a} .sw.on i{left:23px}

/* ============================================================
   MOBILE-FIRST REFINEMENT LAYER (V6.10.0)
   The design system already existed — the screens were not using it.
   1,261 inline styles, 22 spacing values against a 7-step ladder,
   12 font sizes against a 7-step scale, 36 of 40 table screens with
   no phone handling. This layer gives those a single correct home.

   RULE: this block only ADDS modifiers and utilities. It never
   redefines an existing base class, so no screen changes until it
   opts in. Every media query is min-width — the phone is the base.
   ============================================================ */
/* --- R1. Table that survives a phone. Markup unchanged except data-th. --- */
.okami-table.is-stacked thead{display:none}
.okami-table.is-stacked tr{display:block;background:var(--ok-surface);border:1px solid var(--ok-line);
  border-radius:10px;padding:10px 12px;margin-bottom:10px}
.okami-table.is-stacked td{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid var(--ok-line);font-size:var(--ok-fs-sm)}
.okami-table.is-stacked td:last-child{border-bottom:none}
.okami-table.is-stacked td::before{content:attr(data-th);font-weight:600;color:var(--ok-ink-soft)}
@media (min-width:760px){
  .okami-table.is-stacked thead{display:table-header-group}
  .okami-table.is-stacked tr{display:table-row;background:none;border:none;border-radius:0;padding:0;margin:0}
  .okami-table.is-stacked td{display:table-cell;padding:11px 12px;border-bottom:1px solid var(--ok-line)}
  .okami-table.is-stacked td::before{content:none}
}

/* --- R2. Utilities that replace the 1,261 inline styles --- */
.ok-stack{display:flex;flex-direction:column}
.ok-row{display:flex;align-items:center;flex-wrap:wrap}
.ok-row.tight{gap:var(--ok-s2)} .ok-row.gap{gap:var(--ok-s3)} .ok-row.wide{gap:var(--ok-s4)}
.ok-push{margin-left:auto}
.ok-mt1{margin-top:var(--ok-s1)} .ok-mt2{margin-top:var(--ok-s2)}
.ok-mt3{margin-top:var(--ok-s3)} .ok-mt4{margin-top:var(--ok-s4)}
.ok-mt5{margin-top:var(--ok-s5)} .ok-mt6{margin-top:var(--ok-s6)}
.ok-muted{color:var(--ok-ink-soft)} .ok-faint{color:var(--ok-ink-faint)}
.ok-pos{color:var(--ok-success-ink)} .ok-neg{color:var(--ok-danger-ink)} .ok-warnink{color:var(--ok-warn-ink)}
.ok-xs{font-size:var(--ok-fs-xs)} .ok-sm{font-size:var(--ok-fs-sm)} .ok-md{font-size:var(--ok-fs-md)}
.ok-right{text-align:right} .ok-center{text-align:center}
.ok-num{font-variant-numeric:tabular-nums;font-weight:600}
.ok-nowrap{white-space:nowrap}
.ok-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* --- R3. Consistent money colouring, one rule instead of 346 inline colours --- */
/* .okami-money already exists above (tabular-nums + tnum). Only the
   direction modifiers are added here — redefining the base would have
   dropped its font-feature-settings on every screen already using it. */
.okami-money.in{color:var(--ok-success-ink)}
.okami-money.out{color:var(--ok-danger-ink)}
.okami-money.due{color:var(--ok-warn-ink)}

/* --- R4. Page header that behaves on a phone --- */
.okami-page-head.is-tidy{display:flex;flex-wrap:wrap;gap:var(--ok-s3);align-items:center;
  margin-bottom:var(--ok-s5)}
.okami-page-head.is-tidy .okami-page-title{margin:0;flex:1 1 auto;min-width:0}
.okami-page-head.is-tidy .acts{display:flex;gap:var(--ok-s2);flex-wrap:wrap;width:100%}
.okami-page-head.is-tidy .acts .okami-btn{flex:1 1 auto;min-height:44px}
@media (min-width:700px){
  .okami-page-head.is-tidy .acts{width:auto}
  .okami-page-head.is-tidy .acts .okami-btn{flex:0 0 auto;min-height:0}
}

/* --- R5. Filter bar: stacks, never squeezes --- */
.okami-filterbar{display:grid;grid-template-columns:1fr;gap:var(--ok-s3);margin-bottom:var(--ok-s4)}
@media (min-width:620px){.okami-filterbar{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.okami-filterbar{grid-template-columns:repeat(4,1fr)}
  .okami-filterbar .span2{grid-column:span 2}}

/* --- R6. Touch targets, applied once, globally --- */
@media (pointer:coarse){
  .okami-btn,.okami-input,.okami-select{min-height:44px}
  .okami-table.is-stacked td{padding:9px 0}
}

/* ============================================================
   DASHBOARD MONEY PANELS (V6.11.0)
   Phone first: one column, then three across from 780px. The
   dashboard previously carried no expense or profit figure at all.
   ============================================================ */
.okami-moneyband{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:16px}
@media (min-width:780px){.okami-moneyband{grid-template-columns:repeat(3,1fr);gap:14px}}
.okami-mcard{background:var(--ok-surface);border:1px solid var(--ok-line);
  border-radius:var(--ok-radius);padding:16px;display:flex;flex-direction:column;gap:5px;
  text-decoration:none;color:var(--ok-ink);border-top:3px solid var(--ok-line);
  transition:transform .1s,box-shadow .1s}
a.okami-mcard:hover{transform:translateY(-2px);box-shadow:var(--ok-shadow)}
.okami-mcard.in{border-top-color:var(--ok-success)}
.okami-mcard.out{border-top-color:var(--ok-danger)}
.okami-mcard.profit{border-top-color:var(--ok-primary)}
.okami-mcard .hd{display:flex;align-items:center;gap:8px;font-size:var(--ok-fs-sm);
  color:var(--ok-ink-soft);font-weight:600}
.okami-mcard.in .hd .bi{color:var(--ok-success)}
.okami-mcard.out .hd .bi{color:var(--ok-danger)}
.okami-mcard.profit .hd .bi{color:var(--ok-primary)}
.okami-mcard .fig{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.okami-mcard .fig.neg{color:var(--ok-danger)}
.okami-mcard .sub{font-size:var(--ok-fs-sm);color:var(--ok-ink-faint)}

.okami-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:99px;font-variant-numeric:tabular-nums}
.okami-delta.up{background:var(--ok-success-bg);color:var(--ok-success-ink)}
.okami-delta.down{background:var(--ok-danger-bg);color:var(--ok-danger-ink)}
.okami-delta.flat{background:var(--ok-surface-2);color:var(--ok-ink-faint)}

.okami-cashstrip{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--ok-line);
  border-radius:var(--ok-radius);background:var(--ok-surface);overflow:hidden;margin-bottom:18px}
@media (min-width:780px){.okami-cashstrip{grid-template-columns:repeat(5,1fr)}}
.okami-cashcell{padding:13px 15px;border-right:1px solid var(--ok-line);border-bottom:1px solid var(--ok-line)}
.okami-cashcell small{display:block;font-size:var(--ok-fs-xs);color:var(--ok-ink-faint);margin-bottom:3px}
.okami-cashcell b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.okami-cashcell b.warn{color:var(--ok-warn-ink)}
.okami-cashcell b.neg{color:var(--ok-danger-ink)}

.okami-expbar{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:9px 0;
  border-bottom:1px solid var(--ok-line)}
.okami-expbar:last-of-type{border-bottom:none}
.okami-expbar .nm{font-size:var(--ok-fs-base)}
.okami-expbar .vl{font-size:var(--ok-fs-base);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.okami-expbar .tr{grid-column:1/-1;height:6px;border-radius:99px;background:var(--ok-surface-2);overflow:hidden}
.okami-expbar .tr i{display:block;height:100%;border-radius:99px;background:var(--ok-danger);opacity:.7}

/* ============================================================
   EXPENSE REGISTER — totals strip (V6.13.0)
   Figures describe exactly the rows on screen, so a filtered view
   can never show a total belonging to some other set of rows.
   ============================================================ */
.okami-sumbar{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--ok-line);
  border-radius:var(--ok-radius);overflow:hidden;margin-bottom:16px;background:var(--ok-surface)}
@media (min-width:900px){.okami-sumbar{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.okami-sumbar .s{padding:11px 14px;border-right:1px solid var(--ok-line);border-bottom:1px solid var(--ok-line)}
.okami-sumbar .s small{display:block;font-size:var(--ok-fs-xs);color:var(--ok-ink-faint);margin-bottom:2px}
.okami-sumbar .s b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;display:block}
.okami-sumbar .s b.warn{color:var(--ok-warn-ink)}
.okami-sumbar .s b.mut{color:var(--ok-ink-faint)}
.okami-sumbar .s span{font-size:var(--ok-fs-xs);color:var(--ok-ink-faint)}

/* A row still being typed is visibly not an expense yet. */
.reg tr.chain.r-draft > td{background:var(--ok-surface-2)}
.reg tr.chain.r-draft input,.reg tr.chain.r-draft select{opacity:.75}


/* ============================================================
   EXPENSES SCREEN PALETTE (V6.15.0)
   Deliberately SCOPED to .pri, not :root. This is the first screen
   in the calmer palette; scoping means the other 94 views keep the
   look they already have until each is moved over on purpose.
   One accent. Red and amber appear only where something is late.
   ============================================================ */
.pri{
  --bg:#f6f7f9; --surface:#fff; --surface-2:#fafbfc;
  --ink:#101828; --ink-2:#475467; --ink-3:#98a2b3;
  --line:#eaecf0; --line-2:#d0d5dd;
  --accent:#4338ca; --accent-soft:#eef2ff;
  --pos:#067647; --neg:#b42318; --warn:#b54708;
  --r:12px;
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
[data-theme=dark] .pri{
  --bg:#0c111d; --surface:#161b26; --surface-2:#1a2030;
  --ink:#f5f6f7; --ink-2:#94a3b8; --ink-3:#697586;
  --line:#242c3b; --line-2:#333d4d;
  --accent:#8098f9; --accent-soft:#1e2536;
  --pos:#75e0a7; --neg:#fda29b; --warn:#fec84b;
}
.pri{font-size:14px;line-height:1.5;color:var(--ink)}
.pri *{box-sizing:border-box}
.pri .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}



/* ---------- header ---------- */
.pri .head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.pri .head h1{margin:0;font-size:26px;font-weight:650;letter-spacing:-.02em}
.pri .head .sub{font-size:13px;color:var(--ink-2);margin-top:3px}
.pri .head .sp{flex:1}

.pri .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;
  padding:0 15px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  text-decoration:none;transition:background .12s,border-color .12s}
.pri .btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.pri .btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pri .btn.pri:hover{filter:brightness(1.08)}
.pri .btn.sm{min-height:34px;padding:0 11px;font-size:12.5px}
.pri .btn.icon{width:36px;padding:0}

/* ---------- month switch ---------- */
.pri .months{display:inline-flex;background:var(--surface);border:1px solid var(--line-2);
  border-radius:9px;overflow:hidden}
.pri .months button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:500;
  color:var(--ink-2);padding:0 14px;min-height:40px;cursor:pointer;border-right:1px solid var(--line)}
.pri .months button:last-child{border-right:none}
.pri .months button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}

/* ---------- stats: quiet, no colour rails ---------- */
.pri .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:26px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.pri .stat{background:var(--surface);padding:16px 18px}
.pri .stat .k{font-size:12px;color:var(--ink-2);margin-bottom:6px}
.pri .stat .v{font-size:23px;font-weight:650;letter-spacing:-.02em}
.pri .stat .d{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.pri .stat .d b{font-weight:600}
.pri .stat .d b.up{color:var(--neg)} .stat .d b.dn{color:var(--pos)}

/* ---------- section ---------- */
.pri .sec{margin-bottom:30px}
.pri .sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pri .sec-h h2{margin:0;font-size:15px;font-weight:620;letter-spacing:-.01em}
.pri .sec-h .c{font-size:12px;color:var(--ink-3)}
.pri .sec-h .sp{flex:1}

.pri .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}

/* ---------- recurring bill row ---------- */
.pri .bill{display:grid;grid-template-columns:1fr;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);
  align-items:center}
.pri .bill:last-child{border-bottom:none}
@media(min-width:820px){.bill{grid-template-columns:1fr 150px 190px;gap:18px}}
.pri .bill:hover{background:var(--surface-2)}
.pri .bill .who{min-width:0}
.pri .bill .nm{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pri .bill .meta{font-size:12px;color:var(--ink-3);margin-top:3px}

.pri .kind{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;border:1px solid var(--line-2);color:var(--ink-3)}
.pri .kind.var{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.pri .when{font-size:13px;color:var(--ink-2)}
.pri .when b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.pri .when.late b{color:var(--neg)}
.pri .when.soon b{color:var(--warn)}

.pri .amt{text-align:left}
@media(min-width:820px){.amt{text-align:right}}
.pri .amt .v{font-size:16px;font-weight:650}
.pri .amt .unknown{font-size:13.5px;color:var(--ink-3);font-style:italic}
.pri .amt .hist{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.pri .amt .act{margin-top:8px;display:flex;gap:7px}
@media(min-width:820px){.amt .act{justify-content:flex-end}}

/* inline amount entry for a variable bill */
.pri .enter{display:none;gap:8px;margin-top:8px}
.pri .enter.on{display:flex}
@media(min-width:820px){.enter{justify-content:flex-end}}
.pri .enter input{width:120px;min-height:36px;padding:8px 11px;font-family:inherit;font-size:14px;
  font-weight:600;text-align:right;border:1px solid var(--accent);border-radius:8px;
  background:var(--surface);color:var(--ink)}
.pri .enter input:focus{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- expense list ---------- */
.pri .day{display:flex;align-items:baseline;gap:10px;padding:11px 18px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2);font-weight:600}
.pri .day .t{margin-left:auto;font-weight:650;color:var(--ink)}
.pri .ex{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:13px 18px;
  border-bottom:1px solid var(--line);align-items:center}
.pri .ex:last-child{border-bottom:none}
.pri .ex:hover{background:var(--surface-2)}
.pri .ex .d{font-size:14px;font-weight:550}
.pri .ex .m{grid-column:1;font-size:12px;color:var(--ink-3)}
.pri .ex .r{grid-row:1/3;grid-column:2;display:flex;align-items:center;gap:14px}
.pri .ex .a{font-size:15px;font-weight:650;white-space:nowrap}
.pri .ex .tools{display:flex;gap:4px;opacity:0;transition:opacity .12s}
.pri .ex:hover .tools,.pri .ex:focus-within .tools{opacity:1}
@media(pointer:coarse){.ex .tools{opacity:1}}
.pri .ex .tools button{width:32px;height:32px;border:1px solid transparent;background:none;border-radius:7px;
  color:var(--ink-3);cursor:pointer;display:grid;place-items:center;font-size:13px}
.pri .ex .tools button:hover{border-color:var(--line-2);background:var(--surface);color:var(--ink)}

.pri .pill{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.pri .pill.warn{color:var(--warn);border-color:var(--warn)}

.pri .empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------- toast ---------- */
.pri .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:200;
  background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;font-size:13.5px;
  font-weight:500;transition:transform .22s cubic-bezier(.2,.9,.3,1);box-shadow:0 8px 24px rgba(16,24,40,.18)}
.pri .toast.on{transform:translate(-50%,0)}

.pri .note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:13px 16px;font-size:12.5px;color:var(--ink-2);line-height:1.65;margin-bottom:22px}
.pri .note b{color:var(--ink)}


/* ============================================================
   QUICK EXPENSE — one thumb (V6.21.0)
   Mobile first in the real sense: this is the phone layout, and
   the wider screen only widens it. Scoped under .qx inside .pri.
   ============================================================ */
.pri.qx{max-width:520px;margin:0 auto}
.qx-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.qx-sc{min-height:66px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);
  font-family:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:3px;padding:10px 12px;text-align:left}
.qx-sc:hover{border-color:var(--accent);background:var(--accent-soft)}
.qx-sc b{font-size:13.5px;font-weight:600;line-height:1.25}
.qx-sc small{font-size:11.5px;color:var(--ink-3)}

.qx-amt{margin-bottom:12px}
.qx-amt label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.qx-amt .f{position:relative}
.qx-amt .rs{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;
  font-weight:600;color:var(--ink-3)}
.qx-amt input{width:100%;min-height:72px;padding:12px 16px 12px 52px;font-family:inherit;font-size:32px;
  font-weight:700;font-variant-numeric:tabular-nums;text-align:right;border:1px solid var(--line-2);
  border-radius:14px;background:var(--surface);color:var(--ink)}

.qx-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:18px}
.qx-keys button{min-height:56px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  font-family:inherit;font-size:20px;font-weight:600;color:var(--ink);cursor:pointer}
.qx-keys button:active{background:var(--accent-soft);border-color:var(--accent)}

.qx-fields{display:grid;grid-template-columns:1fr;gap:13px;margin-bottom:14px}
@media (min-width:520px){.qx-fields{grid-template-columns:1fr 1fr}}

.qx-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
#qxStatus.qx-choice{grid-template-columns:1fr 1fr}
.qx-choice button{min-height:50px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);
  font-family:inherit;font-size:13px;font-weight:550;color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px}
.qx-choice button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:650}

.qx-save{position:sticky;bottom:0;padding:12px 0 16px;background:var(--bg)}
.qx-save button{width:100%;min-height:60px;flex-direction:column;gap:1px;font-size:16px}
.qx-save button small{font-weight:500;opacity:.85;font-size:11.5px}

.qx-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-bottom:7px;font-size:13.5px}
.qx-row small{color:var(--ink-3);font-size:11.5px}
.qx-row b{font-variant-numeric:tabular-nums;font-size:15px}

/* ============================================================
   COUNTER — take payment on a phone (V6.22.0)
   ============================================================ */
.pri.ct{max-width:460px;margin:0 auto}
.ct-step{display:none}.ct-step.on{display:block}

.ct-search{position:relative;margin-bottom:13px}
.ct-search input{width:100%;min-height:54px;padding:14px 15px 14px 46px;font-family:inherit;font-size:16px;
  border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink)}
.ct-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ct-search .i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:16px}

.ct-hit{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:12px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;
  cursor:pointer;text-align:left;font-family:inherit;color:var(--ink)}
.ct-hit:hover{border-color:var(--accent);background:var(--accent-soft)}
.ct-hit .av,.ct-who .av{width:40px;height:40px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink-2);flex:0 0 40px}
.ct-hit .w{flex:1;min-width:0}
.ct-hit .w b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-hit .w span{font-size:12px;color:var(--ink-3)}
.ct-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.ct-tag.due{background:var(--neg-bg);color:var(--neg)}
.ct-tag.exp{background:var(--warn-bg);color:var(--warn)}
.ct-tag.ok{background:var(--pos-bg);color:var(--pos)}

.ct-who{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface-2);margin-bottom:15px}
.ct-who b{display:block;font-size:15px}
.ct-who span span{font-size:12px;color:var(--ink-3)}
.ct-who .ch{margin-left:auto;min-height:40px;font-size:12.5px;color:var(--accent);background:none;
  border:none;font-family:inherit;cursor:pointer;font-weight:600}

.ct-charge{width:100%;display:flex;align-items:center;gap:12px;min-height:70px;padding:14px;
  border:1px solid var(--line-2);border-radius:12px;background:var(--surface);margin-bottom:9px;
  cursor:pointer;font-family:inherit;text-align:left;color:var(--ink)}
.ct-charge:hover,.ct-charge.on{border-color:var(--accent);background:var(--accent-soft)}
.ct-charge .ic{width:38px;height:38px;border-radius:10px;background:var(--surface-2);display:grid;
  place-items:center;color:var(--accent);font-size:17px;flex:0 0 38px}
.ct-charge.on .ic{background:var(--accent);color:#fff}
.ct-charge .w{flex:1}
.ct-charge .w b{display:block;font-size:14.5px}
.ct-charge .w span{font-size:12px;color:var(--ink-3)}
.ct-charge .amt{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.ct-charge.owed{border-color:var(--neg)}
.ct-charge.owed .ic{color:var(--neg)}
.ct-charge.owed.on{background:var(--neg-bg);border-color:var(--neg)}
.ct-charge.owed.on .ic{background:var(--neg);color:#fff}

.ct-amt{margin:16px 0 14px}
.ct-amt label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.ct-amt .f{position:relative}
.ct-amt .rs{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;
  font-weight:600;color:var(--ink-3)}
.ct-amt input{width:100%;min-height:64px;padding:13px 16px 13px 48px;font-family:inherit;font-size:26px;
  font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--line-2);border-radius:12px;
  background:var(--surface);color:var(--ink)}
.ct-amt input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.ct-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ct-choice button{min-height:52px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);
  font-family:inherit;font-size:12.5px;font-weight:550;color:var(--ink-2);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.ct-choice button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:650}

.ct-foot{position:sticky;bottom:0;padding:12px 0 16px;background:var(--bg)}
.ct-foot .btn{width:100%;min-height:58px;flex-direction:column;gap:1px;font-size:15.5px}
.ct-foot .btn small{font-weight:500;opacity:.85;font-size:11.5px}
.ct-link{width:100%;min-height:46px;border:none;background:none;font-family:inherit;font-size:13.5px;
  color:var(--ink-2);cursor:pointer;margin-top:6px}

.ct-ok{width:66px;height:66px;border-radius:50%;background:var(--pos-bg);color:var(--pos);
  display:grid;place-items:center;font-size:31px;margin:22px auto 15px}
#ctDone h2{text-align:center;margin:0 0 4px;font-size:20px}
#ctDone p{text-align:center;font-size:13px}
.ct-rcpt{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface-2);
  margin:18px 0;font-size:13px}
.ct-rcpt .r{display:flex;justify-content:space-between;gap:14px;padding:5px 0}
.ct-rcpt .r b{font-variant-numeric:tabular-nums;text-align:right}
.ct-again .btn{width:100%;min-height:52px}