/* =====================================================================
   Niyamoth Group ERP — styles (no build step needed on Hostinger)
   Breakpoints: phone ≤ 600px · tablet ≤ 1024px · desktop > 1024px
   ===================================================================== */

:root {
    --bg: #f4f6f5;
    --surface: #ffffff;
    --surface-2: #f7f9f8;
    --border: #e1e7e4;
    --border-strong: #c9d3cf;
    --text: #13201c;
    --muted: #63706c;
    --brand: #0f766e;
    --brand-hover: #0b5f58;
    --brand-ink: #ffffff;
    --pos: #15803d;
    --neg: #b91c1c;
    --warn: #b45309;
    --sidebar: #0d1f1b;
    --sidebar-text: #c9d6d2;
    --sidebar-muted: #6f837d;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(16, 32, 28, .05), 0 4px 16px rgba(16, 32, 28, .04);
    --shadow-pop: 0 10px 40px rgba(16, 32, 28, .16);
    --tap: 44px;
    --sidebar-w: 264px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b1311;
        --surface: #121c19;
        --surface-2: #17231f;
        --border: #23322d;
        --border-strong: #33463f;
        --text: #e6eeeb;
        --muted: #8fa29c;
        --brand: #14a394;
        --brand-hover: #18b8a8;
        --sidebar: #070d0b;
        --shadow: none;
        --shadow-pop: 0 10px 40px rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.lang-bn { font-family: "Hind Siliguri", "Inter", system-ui, sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
img, svg { max-width: 100%; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.icon { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------- Sidebar ---------------- */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
    background: var(--sidebar); color: var(--sidebar-text);
    display: flex; flex-direction: column; z-index: 40;
    overflow-y: auto; overscroll-behavior: contain;
    transition: transform .22s ease;
    padding-bottom: env(safe-area-inset-bottom);
}
.brand { display: flex; gap: 12px; align-items: center; padding: 22px 20px 18px; }
.brand-mark {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none;
    background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 18px;
}
.brand-name { color: #fff; font-weight: 600; font-size: 15px; }
.brand-tag { color: var(--sidebar-muted); font-size: 12px; }
.nav { padding: 8px 12px 24px; display: flex; flex-direction: column; gap: 2px; }
.nav-section {
    margin: 18px 10px 6px; font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--sidebar-muted);
}
.nav-link {
    display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 10px;
    font-size: 14px; border-left: 3px solid transparent;
}
.nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-link.active { background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--accent, var(--brand)); }
.nav-link .icon { color: var(--accent, currentColor); }
.nav-link.disabled { opacity: .45; cursor: not-allowed; }
.nav-link.disabled:hover { background: none; color: inherit; }
.nav-count {
    flex: none; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.nav-toggle, .nav-backdrop, .icon-btn.menu-btn { display: none; }

/* ---------------- Main shell ---------------- */
.main { margin-left: var(--sidebar-w); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
    padding: 10px 28px; padding-top: max(10px, env(safe-area-inset-top));
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
    position: relative; width: var(--tap); height: var(--tap); border-radius: 12px;
    display: grid; place-items: center; cursor: pointer; color: var(--text); background: none; border: 0;
}
.icon-btn:hover { background: var(--surface-2); }
.dot {
    position: absolute; top: 8px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center;
    border: 2px solid var(--bg);
}
.lang-switch { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex: none; }
.lang-switch a { padding: 5px 11px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.lang-switch a.on { background: var(--brand); color: var(--brand-ink); }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--brand);
    font-weight: 700; font-size: 13px;
}
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.content { padding: 28px; flex: 1; width: 100%; max-width: 1280px; }
.footer { padding: 16px 28px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 12px; }

/* ---------------- Dropdowns (bell, user menu) — no JavaScript needed ---------------- */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel {
    position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-pop); z-index: 50; overflow: hidden;
}
.dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.dropdown-item { display: flex; gap: 10px; align-items: center; padding: 11px 16px; min-height: var(--tap); font-size: 14px; width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item + .dropdown-item { border-top: 1px solid var(--border); }
.dropdown-foot { display: block; text-align: center; padding: 11px; font-size: 14px; color: var(--brand); border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.user-chip strong { display: block; font-size: 14px; }
.notif { display: block; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 14px; }
.notif:first-of-type { border-top: 0; }
.notif:hover { background: var(--surface-2); }
.notif.unread { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.notif strong { display: block; }
.notif .muted { font-size: 13px; }

/* ---------------- Page header ---------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 24px; font-weight: 700; }
.page-head p { margin-top: 4px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Cards ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-head h2 { font-size: 16px; font-weight: 600; }
.card-body { padding: 20px; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grid-2 > .card + .card { margin-top: 0; }

/* ---------------- Buttons ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--surface-2); }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); }
.btn-danger:hover { background: color-mix(in srgb, var(--neg) 8%, var(--surface)); }
.btn-ghost { border-color: transparent; background: none; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn-block { width: 100%; }
.link { color: var(--brand); font-weight: 500; }
.link:hover { text-decoration: underline; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---------------- Forms ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label, .label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.field .req { color: var(--neg); }
.input, .select, .textarea {
    width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    font: inherit; font-size: 16px; /* 16px stops phones zooming in */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 88px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--neg); }
.input[type="color"] { padding: 4px; width: 72px; }
.code-input { font-size: 26px; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .5em; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.error { font-size: 13px; color: var(--neg); margin-top: 6px; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding: 10px 0; cursor: pointer; font-size: 14px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.check-card {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; min-height: var(--tap);
}
.check-card:has(input:checked) { border-color: var(--accent, var(--brand)); background: color-mix(in srgb, var(--accent, var(--brand)) 7%, var(--surface)); }
.check-card input { width: 20px; height: 20px; accent-color: var(--accent, var(--brand)); flex: none; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 70px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* Segmented control (From role / Allow / Deny) */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; flex: none; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 7px 11px; font-size: 13px; color: var(--muted); min-width: 64px; text-align: center; }
.seg label + label span { border-left: 1px solid var(--border-strong); }
.seg input:checked + span { background: var(--surface-2); color: var(--text); font-weight: 600; }
.seg input[value="allow"]:checked + span { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); }
.seg input[value="deny"]:checked + span { background: color-mix(in srgb, var(--neg) 12%, var(--surface)); color: var(--neg); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }
.perm-group + .perm-group { margin-top: 18px; }
.perm-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--border); }
.perm-row:first-of-type { border-top: 0; }
.perm-row .tag { margin-left: 6px; }

/* ---------------- Alerts & tags ---------------- */
.alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; border: 1px solid; margin-bottom: 18px; }
.alert-success { background: color-mix(in srgb, var(--pos) 9%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 30%, var(--border)); }
.alert-warn { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
.alert-error { background: color-mix(in srgb, var(--neg) 8%, var(--surface)); border-color: color-mix(in srgb, var(--neg) 30%, var(--border)); }
.alert-info { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 25%, var(--border)); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; font-weight: 500; }
.tag.pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, var(--surface)); }
.tag.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 11%, var(--surface)); }
.tag.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.tag.brand { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }

/* ---------------- Filters, tabs ---------------- */
.filters { display: grid; grid-template-columns: 2fr repeat(3, 1fr) auto; gap: 10px; margin-bottom: 18px; }
.filters.cols-4 { grid-template-columns: repeat(4, 1fr) auto; }
.filters.cols-3 { grid-template-columns: 2fr 1fr auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 10px 14px; min-height: var(--tap); display: flex; align-items: center; gap: 8px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }

/* ---------------- Data tables → cards on phones ---------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data .actions { text-align: right; white-space: nowrap; }
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person strong { display: block; }
.person .muted { font-size: 13px; }

/* ---------------- Dashboard ---------------- */
.hello h1 { font-size: 26px; font-weight: 700; }
.hello p { margin-top: 4px; }
.notice { margin: 18px 0 22px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 12px; background: var(--surface-2); color: var(--muted); }
.kpi-icon.pos { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, var(--surface)); }
.kpi-icon.neg { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); }
.kpi-label { color: var(--muted); font-size: 13px; }
.kpi-value { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.section-title { font-size: 17px; font-weight: 600; margin: 32px 0 14px; }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.area {
    position: relative; display: flex; flex-direction: column; gap: 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow); overflow: hidden;
    transition: transform .15s ease, border-color .15s ease;
}
.area::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.area:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.area-top { display: flex; justify-content: space-between; align-items: center; }
.area-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.area-icon.lg { width: 60px; height: 60px; border-radius: 16px; }
.area-icon.lg .icon { width: 28px; height: 28px; }
.badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--accent, var(--brand)); background: color-mix(in srgb, var(--accent, var(--brand)) 10%, var(--surface)); white-space: nowrap; }
.area-name { font-weight: 600; font-size: 16px; line-height: 1.35; }
.area-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border); }
.area-stats span { display: block; font-size: 12px; }
.area-stats strong { font-variant-numeric: tabular-nums; }
.area-open { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14px; font-weight: 500; }
.area-open .icon { width: 16px; height: 16px; }
.biz-hero { display: flex; gap: 18px; align-items: center; }
.biz-hero h1 { font-size: 24px; margin: 8px 0 2px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty.boxed { margin-top: 28px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }
.empty-icon { width: 36px; height: 36px; margin-bottom: 8px; }

/* ---------------- Approvals, activity, sessions ---------------- */
.req { padding: 18px 20px; border-top: 1px solid var(--border); }
.req:first-child { border-top: 0; }
.req-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.req-title { font-weight: 600; }
.diff { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.diff th, .diff td { text-align: left; padding: 8px 10px; border: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.diff th { background: var(--surface-2); font-weight: 500; color: var(--muted); width: 30%; }
.diff .old { color: var(--neg); text-decoration: line-through; }
.diff .new { color: var(--pos); font-weight: 500; }
.req-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.req-actions .input { max-width: 320px; min-height: 40px; font-size: 15px; }
.timeline-item { display: flex; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.timeline-item:first-child { border-top: 0; }
.timeline-item .meta { margin-left: auto; text-align: right; white-space: nowrap; font-size: 13px; color: var(--muted); }
.device { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.device:first-child { border-top: 0; }
.device-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; }
.qr-box { display: inline-block; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid var(--border); }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .08em; word-break: break-all; background: var(--surface-2); padding: 8px 10px; border-radius: 8px; }

/* ---------------- Pagination ---------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); font-size: 14px; flex-wrap: wrap; }
.pager .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------------- Login pages ---------------- */
.auth-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); background:
    radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--accent, var(--brand)) 16%, transparent), transparent 70%), var(--bg); }
.auth-top { width: 100%; max-width: 440px; display: flex; justify-content: flex-end; margin-bottom: 16px; }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-pop); padding: 32px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brand .brand-mark { background: var(--accent, var(--brand)); }
.auth-brand strong { display: block; font-size: 16px; }
.auth-card h1 { font-size: 22px; font-weight: 700; }
.auth-card .sub { color: var(--muted); margin: 6px 0 22px; font-size: 14px; }
.auth-card .field + .field { margin-top: 16px; }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; }
.auth-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); max-width: 440px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------------- Error pages ---------------- */
.error-page { text-align: center; max-width: 440px; }
.error-page .code { font-size: 64px; font-weight: 800; color: var(--brand); line-height: 1; }
.error-page h1 { margin: 12px 0 8px; font-size: 22px; }
.error-page p { color: var(--muted); margin-bottom: 22px; }


/* =====================================================================
   Phase 3: areas, employees, ledger, electricity
   ===================================================================== */
.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.money.pos { color: var(--pos); }
.money.neg { color: var(--neg); }
.money.warn { color: var(--warn); }
th.num, td.num, .num { text-align: right; font-variant-numeric: tabular-nums; }
img.avatar { object-fit: cover; background: var(--surface-2); }

.area-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.area-head-name { font-weight: 700; font-size: 17px; line-height: 1.3; }
.area-tabs { margin-bottom: 22px; }
.area-tabs a.on { border-bottom-color: var(--accent, var(--brand)); }

.month-pick { margin-bottom: 18px; }
.month-pick .input { width: auto; min-width: 170px; }

.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-strong { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.kpi-value .muted { font-weight: 400; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.module-grid > .card + .card { margin-top: 0; }
.module { display: block; padding: 18px 20px; border-top: 4px solid var(--accent); transition: transform .15s ease; }
.module:hover { transform: translateY(-2px); }
.module-head { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.module-big { font-size: 26px; font-weight: 700; margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
.module-big small { font-size: 13px; font-weight: 400; }
.kv { margin: 0; display: grid; gap: 6px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kv-wide > div { padding: 8px 0; border-top: 1px dashed var(--border); }
.kv-wide > div:first-child { border-top: 0; }
.mini-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }

.input-prefix { position: relative; display: block; }
.input-prefix > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-prefix > .input { padding-left: 28px; }
.input-lg { font-size: 20px; font-weight: 600; min-height: 52px; }
.seg-wide { display: flex; width: 100%; }
.seg-wide label { flex: 1; }
.seg-wide span { min-width: 0; padding: 10px 8px; }

.line-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); }
.card-head + .line-item { border-top: 0; }
.empty.small { padding: 24px 16px; font-size: 14px; }

/* Attendance */
.att-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.att-seg span { min-width: 58px; padding: 9px 10px; }
.att-seg .att-present input:checked + span { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: var(--pos); }
.att-seg .att-absent input:checked + span { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--neg); }
.att-seg .att-half input:checked + span { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.att-seg .att-leave input:checked + span { background: color-mix(in srgb, #2563eb 14%, var(--surface)); color: #2563eb; }
.sticky-foot { position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); z-index: 5; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 13px; }
.cal-h { color: var(--muted); font-size: 11px; padding-bottom: 2px; }
.cal-d { padding: 7px 0; border-radius: 8px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.att-present.cal-d, td.att-present, .legend i.att-present { background: color-mix(in srgb, var(--pos) 20%, var(--surface)); color: var(--pos); }
.att-absent.cal-d, td.att-absent, .legend i.att-absent { background: color-mix(in srgb, var(--neg) 16%, var(--surface)); color: var(--neg); }
.att-half.cal-d, td.att-half, .legend i.att-half { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); }
.att-leave.cal-d, td.att-leave, .legend i.att-leave { background: color-mix(in srgb, #2563eb 16%, var(--surface)); color: #2563eb; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
table.month-grid { font-size: 12px; }
table.month-grid th, table.month-grid td { padding: 6px 4px; text-align: center; min-width: 28px; }
table.month-grid th.fri, table.month-grid td.fri:not([class*="att-"]) { background: var(--surface-2); }
.sticky-col { position: sticky; left: 0; background: var(--surface); text-align: left !important; min-width: 140px !important; padding-left: 14px !important; z-index: 1; box-shadow: 1px 0 0 var(--border); }
th.sticky-col { background: var(--surface-2); }

/* Documents */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.doc { border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.doc-thumb { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: 12px; gap: 4px; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-box { border-top: 1px dashed var(--border); padding-top: 16px; }

/* Ledger */
.balance-banner { padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); text-align: center; }
.balance-banner.pos { border-color: color-mix(in srgb, var(--pos) 35%, var(--border)); background: color-mix(in srgb, var(--pos) 6%, var(--surface)); }
.balance-banner.neg { border-color: color-mix(in srgb, var(--neg) 35%, var(--border)); background: color-mix(in srgb, var(--neg) 5%, var(--surface)); }
.balance-big { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 4px 0; }
.balance-banner.pos .balance-big { color: var(--pos); }
.balance-banner.neg .balance-big { color: var(--neg); }
.kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kind { position: relative; cursor: pointer; }
.kind input { position: absolute; opacity: 0; }
.kind > span { display: block; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-height: 58px; }
.kind strong { display: block; font-size: 14px; }
.kind small { color: var(--muted); font-size: 12px; line-height: 1.3; display: block; }
.kind.raise input:checked + span { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.kind.lower input:checked + span { border-color: var(--neg); background: color-mix(in srgb, var(--neg) 6%, var(--surface)); }
.kind input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.ledger-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); }
.ledger-row.opening { background: var(--surface-2); grid-template-columns: 1fr auto; }
.plan { padding: 14px 20px; border-top: 1px solid var(--border); }
.card-head + .plan { border-top: 0; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; }
.progress span { display: block; height: 100%; background: var(--pos); border-radius: 999px; }
.inst-list summary { cursor: pointer; padding: 4px 0; }
.inst { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.plan-new summary { list-style: none; }
.plan-new summary::-webkit-details-marker { display: none; }

/* Electricity */
.meter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.meter-grid > .card + .card { margin-top: 0; }
.meter { display: block; padding: 16px; transition: transform .15s ease; }
.meter:hover { transform: translateY(-2px); }
.meter.inactive { opacity: .55; }
.meter-units { font-size: 24px; font-weight: 700; margin-top: 10px; font-variant-numeric: tabular-nums; }
.meter-units small, .reading-units small { font-size: 12px; font-weight: 400; color: var(--muted); }
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 8px 0; }
.bar span { display: block; height: 100%; background: #eab308; border-radius: 999px; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding-top: 18px; }
.chart-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.chart-bar { width: 100%; max-width: 38px; background: color-mix(in srgb, #eab308 55%, var(--surface)); border-radius: 6px 6px 2px 2px; min-height: 0; }
.chart-col.on .chart-bar { background: #ca8a04; }
.chart-val { font-size: 10px; color: var(--muted); white-space: nowrap; }
.chart-label { font-size: 11px; color: var(--muted); }
.reading { padding: 16px 20px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.reading:first-child { border-top: 0; }
.reading:target { background: color-mix(in srgb, #eab308 8%, var(--surface)); }
.reading-top { display: flex; justify-content: space-between; gap: 12px; }
.reading-units { font-size: 18px; font-weight: 700; }
.pay-box { display: inline-block; }
.pay-box[open] { display: block; width: 100%; margin-top: 8px; }
.pay-box summary { list-style: none; }
.pay-box summary::-webkit-details-marker { display: none; }
.read-row { display: grid; grid-template-columns: 1.2fr 1fr 150px; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.read-row:first-child { border-top: 0; }
.read-row.bad .read-units { color: var(--neg); }
.read-result { text-align: right; }
.read-units { font-weight: 600; font-variant-numeric: tabular-nums; }
.read-total { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.slab-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.slab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }

/* Printable statement */
.print-page { background: #fff; color: #111; }
.statement { max-width: 820px; margin: 0 auto; padding: 28px 20px; }
.st-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.st-head h1 { font-size: 20px; }
.st-title { text-align: right; }
.st-party { display: grid; gap: 4px; margin-bottom: 16px; font-size: 14px; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table th, .st-table td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; }
.st-table th { background: #f3f4f6; }
.st-table .num { text-align: right; }
.st-opening td { background: #fafafa; font-style: italic; }
.st-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 2px solid #111; margin: 10px 0; font-size: 15px; flex-wrap: wrap; }

@media (max-width: 1024px) {
    .read-row { grid-template-columns: 1fr 1fr; }
    .read-result { grid-column: 1 / -1; text-align: left; display: flex; gap: 12px; }
}
@media (max-width: 600px) {
    .kpis-3 { grid-template-columns: 1fr 1fr; }
    .kpis-3 > :last-child { grid-column: 1 / -1; }
    .module-grid, .meter-grid { grid-template-columns: 1fr; }
    .month-pick .input { flex: 1; min-width: 0; }
    .line-item, .ledger-row, .plan, .reading, .att-row { padding-left: 16px; padding-right: 16px; }
    .att-row { flex-direction: column; align-items: stretch; }
    .att-seg { display: flex; }
    .att-seg label { flex: 1; }
    .att-seg span { min-width: 0; }
    .kind-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .kind > span { padding: 8px 10px; }
    .read-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
    .read-result { grid-column: auto; }
    .balance-big { font-size: 26px; }
    .chart { gap: 3px; height: 150px; }
    .chart-val { display: none; }
    .btn-block-sm { width: 100%; }
    .doc-grid { grid-template-columns: repeat(2, 1fr); }
    .plan form.row > .btn, .plan form.row > .input-prefix, .plan form.row > .input { width: 100%; max-width: none !important; flex: 1 1 100%; }
    .reading-top { flex-direction: column; }
    .reading-top .num { text-align: left; }
}
@media print {
    .no-print, .area-tabs, .month-pick, .btn, form { display: none !important; }
    .statement { padding: 0; }
    .st-table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* =====================================================================
   Phase 4: Today screen, calendar, dashboard charts
   ===================================================================== */
a.kpi { display: block; transition: border-color .15s ease; }
a.kpi:hover { border-color: var(--border-strong); }

.day-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.day-bar .icon-btn { font-size: 20px; border: 1px solid var(--border); background: var(--surface); flex: none; }
.day-bar-mid { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 10px 8px 16px; min-width: 0; }
.day-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.day-picker { width: auto; min-height: 40px; font-size: 15px; flex: none; }
.today-links { margin-bottom: 16px; }
.chips-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; flex: 1; min-width: 0; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chip-link { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; white-space: nowrap; }
.chip-link.on { background: var(--accent, var(--brand)); border-color: var(--accent, var(--brand)); color: #fff; }
.today-kpis { margin-bottom: 20px; }

.today-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.today-grid > .card + .card { margin-top: 0; }
.quick-add { position: sticky; top: 76px; }
.today-areas > .card + .card { margin-top: 16px; }
.dir-toggle span { font-size: 15px; font-weight: 600; padding: 11px 8px; }
.dir-toggle .dir-expense input:checked + span { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--neg); }
.dir-toggle .dir-income input:checked + span { background: color-mix(in srgb, var(--pos) 15%, var(--surface)); color: var(--pos); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cat-chip { position: relative; cursor: pointer; }
.cat-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cat-chip span { display: block; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 14px; background: var(--surface); }
.cat-chip input:checked + span { background: var(--neg); border-color: var(--neg); color: #fff; }
.is-income .cat-chip input:checked + span { background: var(--pos); border-color: var(--pos); }
.cat-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.input-xl { font-size: 26px; font-weight: 700; min-height: 58px; }
.input-prefix:has(.input-xl) > span { font-size: 20px; }
.more summary { cursor: pointer; }

.day-area { border-top: 4px solid var(--accent); overflow: hidden; }
.day-area-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 8px; }
.day-area-head .area-icon { width: 34px; height: 34px; border-radius: 10px; }
.day-sums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 20px 14px; border-bottom: 1px solid var(--border); }
.day-sums span { display: block; font-size: 12px; }
.day-sums strong { font-variant-numeric: tabular-nums; }
.day-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--border); }
.day-sums + .day-item { border-top: 0; }
.day-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.day-item.income .day-dot { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); }
.day-item.expense .day-dot { background: color-mix(in srgb, var(--neg) 12%, var(--surface)); color: var(--neg); }
.day-item-title { font-weight: 500; overflow-wrap: anywhere; }
.day-amount { white-space: nowrap; }
.day-actions { display: flex; gap: 2px; }
.closing { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.closing > summary { list-style: none; }
.closing > summary::-webkit-details-marker { display: none; }
.closing.done { background: color-mix(in srgb, var(--pos) 5%, var(--surface)); }
.closing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; font-variant-numeric: tabular-nums; }
.closing-grid span { display: block; font-size: 12px; }

.money-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mc-h { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 2px; }
.mc-day { min-height: 86px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--surface); transition: border-color .15s ease; min-width: 0; }
.mc-day:hover { border-color: var(--brand); }
.mc-day.fri { background: var(--surface-2); }
.mc-day.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mc-day.future { opacity: .4; pointer-events: none; }
.mc-num { font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; }
.mc-lock { color: var(--pos); }
.mc-in { color: var(--pos); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-out { color: var(--neg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-none { color: var(--border-strong); }

.hbar + .hbar { margin-top: 12px; }
.hbar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 4px; }
.hbar-top strong { font-variant-numeric: tabular-nums; }
.bar.neg span { background: color-mix(in srgb, var(--neg) 70%, var(--surface)); }
.bar.pos span { background: color-mix(in srgb, var(--pos) 70%, var(--surface)); }

.chart2 { display: flex; align-items: stretch; gap: 4px; height: 190px; }
.c2-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; border-radius: 6px; padding-top: 4px; }
.c2-col:hover, .c2-col.on { background: var(--surface-2); }
.c2-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.c2-in, .c2-out { width: 42%; max-width: 14px; border-radius: 3px 3px 0 0; min-height: 0; }
.c2-in { background: var(--pos); }
.c2-out { background: var(--neg); opacity: .8; }

.cat-row { display: grid; grid-template-columns: 1fr 1fr auto auto auto; gap: 8px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--border); }
.card-head + .cat-row { border-top: 0; }
.cat-row.inactive .input { opacity: .55; }
.cat-row .check { min-height: 0; padding: 0; }
.card-foot.cat-row { grid-template-columns: 1fr 1fr auto; justify-content: stretch; }
.old-val { text-decoration: line-through; color: var(--muted); }

@media (max-width: 1200px) {
    .today-grid { grid-template-columns: 340px minmax(0, 1fr); }
}
@media (max-width: 1024px) {
    .today-grid { grid-template-columns: 1fr; }
    .quick-add { position: static; }
}
@media (max-width: 600px) {
    .day-bar-mid { padding: 6px 8px 6px 12px; }
    .day-title { font-size: 16px; }
    .day-picker { max-width: 140px; font-size: 14px; }
    .day-bar-mid .muted.small { display: none; }
    .day-bar .icon-btn { width: 40px; height: 40px; }
    .today-links { flex-wrap: nowrap; }
    .today-links > .btn { flex: none; }
    .day-area-head, .day-sums, .day-item, .closing, .cat-row { padding-left: 14px; padding-right: 14px; }
    .day-item { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .day-actions { grid-column: 2 / -1; justify-content: flex-end; margin-top: -6px; }
    .closing-grid { grid-template-columns: 1fr 1fr; }
    .money-cal { gap: 3px; }
    .mc-day { min-height: 58px; padding: 4px; font-size: 10px; border-radius: 8px; }
    .mc-num { font-size: 12px; }
    .chart2 { height: 150px; gap: 2px; }
    .cat-row { grid-template-columns: 1fr 1fr; }
    .card-foot.cat-row { grid-template-columns: 1fr 1fr; }
    .card-foot.cat-row .btn { grid-column: 1 / -1; }
}


/* =====================================================================
   Phase 5: family, loans, budgets
   ===================================================================== */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.member-grid > .card + .card { margin-top: 0; }
.member { display: block; padding: 16px; transition: transform .15s ease; }
.member:hover { transform: translateY(-2px); }
.member.inactive { opacity: .55; }
.member .person strong { display: block; }
.member-amount { font-size: 22px; font-weight: 700; margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
.member .bar span { background: var(--brand); }
.avatar-f { background: color-mix(in srgb, #db2777 14%, var(--surface)); color: #be185d; }
.member-chip input:checked + span, .is-income .member-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.chart-bar.fam { background: color-mix(in srgb, var(--brand) 55%, var(--surface)); }
.chart-col.on .chart-bar.fam { background: var(--brand); }
a.chart-col { border-radius: 6px; }
a.chart-col:hover { background: var(--surface-2); }

.loan-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--border); }
.card-head + .loan-row, .card > .loan-row:first-child { border-top: 0; }
.loan-row:hover { background: var(--surface-2); }
.loan-row.closed { opacity: .6; }
.loan-dir { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; }
.loan-dir.given { background: color-mix(in srgb, var(--pos) 14%, var(--surface)); color: var(--pos); }
.loan-dir.taken { background: color-mix(in srgb, var(--neg) 12%, var(--surface)); color: var(--neg); }

.bar.warn span { background: color-mix(in srgb, var(--warn) 75%, var(--surface)); }
.budget-line { display: flex; align-items: center; gap: 10px; padding: 0 20px 10px; flex-wrap: wrap; }
.budget-line .bar { flex: 1; min-width: 120px; margin: 0; }
.day-item.transfer .day-amount { opacity: .7; }
.day-item.transfer .day-dot { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
.cat-row { display: flex; flex-wrap: wrap; }
.cat-row > .input, .cat-row > .input-prefix { flex: 1 1 140px; min-width: 0; }
.cat-row > .input-prefix { max-width: 160px; }

@media (max-width: 600px) {
    .member-grid { grid-template-columns: 1fr; gap: 8px; }
    .member { padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
    .member .person .avatar { width: 32px; height: 32px; font-size: 12px; }
    .member-amount { margin: 0; font-size: 17px; text-align: right; }
    .member .bar, .member .row { grid-column: 1 / -1; }
    .member .bar { margin: 8px 0 4px; }
    .loan-row { padding-left: 14px; padding-right: 14px; }
    .budget-line { padding-left: 14px; padding-right: 14px; }
    .cat-row > .input-prefix { max-width: none; }
}

/* =====================================================================
   Large desktop
   ===================================================================== */
@media (min-width: 1600px) {
    .content { max-width: 1440px; }
}

/* =====================================================================
   Small laptop / landscape tablet
   ===================================================================== */
@media (max-width: 1200px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters { grid-template-columns: 1fr 1fr 1fr; }
    .filters > :first-child { grid-column: 1 / -1; }
    .filters.cols-4 { grid-template-columns: 1fr 1fr; }
    .filters.cols-4 > :first-child { grid-column: auto; }
}

/* =====================================================================
   Tablet (portrait) and below: sidebar slides in from the left
   ===================================================================== */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); box-shadow: none; }
    .nav-toggle:checked ~ .sidebar { transform: none; box-shadow: var(--shadow-pop); }
    .nav-toggle:checked ~ .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }
    .main { margin-left: 0; }
    .icon-btn.menu-btn { display: grid; }
    .topbar { padding-left: 12px; padding-right: 12px; }
    .content { padding: 22px 20px; }
    .footer { padding-left: 20px; padding-right: 20px; }
    .grid-2 { grid-template-columns: 1fr; }
}

/* =====================================================================
   Phones
   ===================================================================== */
@media (max-width: 600px) {
    body { font-size: 15px; }
    .content { padding: 16px 14px 24px; }
    .footer { padding: 8px 14px 20px; text-align: center; }
    .topbar { gap: 4px; padding-left: 6px; padding-right: 8px; }
    .lang-switch a { padding: 5px 9px; font-size: 12px; }
    .hide-sm { display: none !important; }

    .page-head { align-items: stretch; flex-direction: column; margin-bottom: 16px; }
    .page-head h1 { font-size: 21px; }
    .page-actions > .btn { flex: 1; }

    .card-head, .card-body, .card-foot, .req, .pager { padding-left: 16px; padding-right: 16px; }
    .card-foot > .btn { flex: 1; }
    .form-grid { grid-template-columns: 1fr; gap: 14px; }
    .filters, .filters.cols-4 { grid-template-columns: 1fr 1fr; }
    .filters > :first-child { grid-column: 1 / -1; }

    .kpis { gap: 10px; }
    .kpi { padding: 14px; }
    .kpi-icon { width: 32px; height: 32px; margin-bottom: 8px; }
    .kpi-value { font-size: 18px; }
    .hello h1 { font-size: 22px; }
    .areas { grid-template-columns: 1fr; }
    .biz-hero { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* Tables turn into stacked cards */
    table.data.stack thead { display: none; }
    table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td { display: block; width: 100%; }
    table.data.stack tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
    table.data.stack tr:last-child { border-bottom: 0; }
    table.data.stack td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
    table.data.stack td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; flex: none; }
    table.data.stack td.cell-main { display: block; text-align: left; padding-bottom: 8px; }
    table.data.stack td.cell-main::before { display: none; }
    table.data.stack td.actions { justify-content: flex-start; padding-top: 10px; flex-wrap: wrap; }
    table.data.stack td.actions::before { display: none; }

    .perm-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .seg { display: flex; }
    .seg label { flex: 1; }
    .seg span { min-width: 0; }
    .timeline-item { flex-wrap: wrap; padding-left: 16px; padding-right: 16px; }
    .timeline-item .meta { margin-left: 0; text-align: left; width: 100%; padding-left: 48px; }
    .req-actions .input { max-width: none; flex: 1 1 100%; }
    .req-actions .btn { flex: 1; }

    .dropdown { position: static; }
    .dropdown-panel { position: fixed; left: 8px; right: 8px; top: calc(60px + env(safe-area-inset-top)); width: auto; max-width: none; max-height: 75vh; overflow-y: auto; }

    .auth-card { padding: 24px 20px; border-radius: 16px; }
    .auth-body { justify-content: flex-start; padding-top: max(16px, env(safe-area-inset-top)); }
}

@media (max-width: 360px) {
    .kpis { grid-template-columns: 1fr; }
    .lang-switch a { padding: 4px 7px; }
}

/* =====================================================================
   Print (reports, statements)
   ===================================================================== */
@media print {
    .sidebar, .topbar, .nav-backdrop, .page-actions, .filters, .pager, .req-actions, .footer { display: none !important; }
    .main { margin: 0; }
    .content { padding: 0; max-width: none; }
    .card { box-shadow: none; break-inside: avoid; }
    body { background: #fff; color: #000; }
}


/* =====================================================================
   Phase 6: Rice mill
   ===================================================================== */
.subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 18px; padding-bottom: 2px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); white-space: nowrap; font-size: 14px; }
.subnav a .icon { width: 16px; height: 16px; }
.subnav a.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.wt { display: inline-block; line-height: 1.25; white-space: nowrap; }
.wt small { font-size: .7em; color: var(--muted); font-weight: 500; }
.wt-kg { display: block; font-size: 11.5px; font-weight: 400; }

.qty-group { display: flex; gap: 6px; }
.qty-group .input { flex: 1; min-width: 0; }
.qty-group .select { width: auto; flex: none; max-width: 48%; }

.calc-box { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.calc-box strong { font-size: 18px; }

.kind-tag-paddy { color: #a16207; background: #fef3c7; }
.kind-tag-rice { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.kind-tag-byproduct { color: #6b4f2a; background: #efe6da; }

/* profit statement */
.pl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.pl dd { margin: 0; text-align: right; white-space: nowrap; }
.pl .pl-sub { border-bottom-style: solid; background: var(--surface-2); margin: 0 -12px; padding: 8px 12px; border-radius: 8px; }
.pl .pl-total { border-bottom: 0; border-top: 2px solid var(--text); margin-top: 4px; padding-top: 10px; font-size: 17px; }

/* stock cards */
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.stock-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.stock-card.kind-paddy { border-left-color: #d97706; }
.stock-card.kind-rice { border-left-color: var(--brand); }
.stock-card.kind-byproduct { border-left-color: #8b6b43; }
.stock-card.low { border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); background: color-mix(in srgb, var(--neg) 4%, var(--surface)); }
.stock-qty { font-size: 20px; margin-top: 2px; }
.stock-card .tag { align-self: flex-start; }

/* milling batches */
.batch { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.batch:last-child { border-bottom: 0; }
.batch-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.out-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.out-chips .chip { display: inline-flex; gap: 4px; align-items: baseline; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.out-chips .chip.kind-rice { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.recovery-pill { font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.recovery-pill.good { color: var(--pos); background: color-mix(in srgb, var(--pos) 13%, var(--surface)); }
.recovery-pill.ok { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, var(--surface)); }
.recovery-pill.low { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); }
.out-row { display: grid; grid-template-columns: 1fr minmax(0, 260px); gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }

/* sale lines */
.sale-line { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(70px, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 100px 40px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sale-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.totals-box { display: flex; justify-content: flex-end; gap: 28px; flex-wrap: wrap; text-align: right; }
.totals-box > div { display: flex; flex-direction: column; }
.totals-box .big { font-size: 26px; color: var(--brand); }

/* invoice */
.invoice { padding: 28px; max-width: 820px; }
.inv-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 2px solid var(--text); flex-wrap: wrap; }
.inv-head h2 { margin: 0 0 4px; font-size: 20px; }
.inv-title { text-align: right; }
.inv-title strong { display: block; font-size: 16px; letter-spacing: .5px; }
.inv-party { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 16px; padding: 14px 0; }
.inv-totals { margin: 14px 0 0 auto; max-width: 340px; display: flex; flex-direction: column; }
.inv-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-variant-numeric: tabular-nums; }
.inv-totals .grand { font-weight: 700; font-size: 17px; border-bottom: 2px solid var(--text); }
.inv-sign { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; }
.inv-sign > div { border-top: 1px solid var(--text); padding-top: 6px; min-width: 160px; text-align: center; font-size: 13px; }

@media (max-width: 760px) {
    .sale-line { grid-template-columns: 1fr 1fr 40px; grid-template-areas: "item item rm" "q u u" "r amt amt"; background: var(--surface-2); border: 0; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
    .sale-line > :nth-child(1) { grid-area: item; }
    .sale-line > :nth-child(2) { grid-area: q; }
    .sale-line > :nth-child(3) { grid-area: u; }
    .sale-line > :nth-child(4) { grid-area: r; }
    .sale-line > :nth-child(5) { grid-area: amt; }
    .sale-line > :nth-child(6) { grid-area: rm; }
    .out-row { grid-template-columns: 1fr; gap: 6px; }
    .totals-box { justify-content: space-between; }
    .totals-box > div:first-child { text-align: left; }
    .invoice { padding: 16px; }
    .inv-title { text-align: left; }
    .stock-grid { grid-template-columns: repeat(2, 1fr); }
    .stock-qty { font-size: 17px; }
}

@media print {
    .subnav, .no-print { display: none !important; }
    .invoice { border: 0; padding: 0; max-width: none; }
    .inv-sign { margin-top: 80px; }
}


/* =====================================================================
   Phase 7: Poultry farm
   ===================================================================== */
.btn-lg { min-height: 52px; padding: 0 22px; font-size: 16px; }
.kind-tag-feed { color: #a16207; background: #fef3c7; }
.kind-tag-egg { color: #9a3412; background: #ffedd5; }
.kind-tag-medicine { color: #1d4ed8; background: #dbeafe; }
.kind-tag-bird { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.kind-tag-other { color: var(--muted); background: var(--surface-2); }

/* flock cards */
.flock-grid > .card { margin: 0; }
.flock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 8px; }
.flock-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-top: 4px solid var(--brand); color: inherit; margin: 0; transition: border-color .15s ease, transform .15s ease; }
.flock-card:hover { border-color: var(--border-strong); border-top-color: var(--brand); }
.flock-card.kind-layer { border-top-color: var(--warn); }
.flock-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.flock-age { display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 4px 10px; line-height: 1.1; }
.flock-age strong { font-size: 20px; }
.flock-live strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.flock-card .bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.flock-card .bar span { display: block; height: 100%; background: var(--pos); border-radius: 99px; }
.flock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.flock-stats > div { display: flex; flex-direction: column; }
.flock-card .tag.mt { align-self: flex-start; }

/* daily log */
.log-card { border-left: 4px solid var(--brand); padding: 14px 18px; }
.log-card.kind-layer { border-left-color: var(--warn); }
.log-card.saved { background: color-mix(in srgb, var(--pos) 3%, var(--surface)); }
.log-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.log-head .num strong { font-size: 22px; }
.log-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.log-grid .field { margin: 0; }
.log-grid .span-2 { grid-column: span 2; }
.log-grid .qty-group > .select:first-child { flex: 1; min-width: 0; max-width: none; }
.sticky-save { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }

/* poultry sale lines: item | flock | birds | qty | unit | rate | amount | x */
.psale-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 80px minmax(70px, .9fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 96px 40px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.psale-line .psale-hint { grid-column: 1 / -1; margin-top: -2px; }
.psale-line .psale-hint:empty { display: none; }

.vac-form { flex-wrap: wrap; gap: 8px; }
.vac-form .input:first-child { flex: 1; min-width: 180px; }

@media (max-width: 900px) {
    .log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .psale-line { grid-template-columns: 1fr 1fr 40px; background: var(--surface-2); border: 0; border-radius: 12px; padding: 10px; margin-bottom: 8px; }
    .psale-line > [data-item] { grid-column: 1 / 3; }
    .psale-line > [data-remove] { grid-column: 3; grid-row: 1; }
    .psale-line > [data-flock], .psale-line > [data-birds] { grid-column: span 1; }
    .psale-line > [data-q] { grid-column: 1; }
    .psale-line > [data-u] { grid-column: 2 / 4; }
    .psale-line > .input-prefix { grid-column: 1; }
    .psale-line > [data-amt] { grid-column: 2 / 4; }
    .psale-line:not(.is-bird) > [data-flock] { grid-column: 1 / 4; }
    .flock-grid { grid-template-columns: 1fr; }
    .sticky-save { justify-content: space-between; }
    .sticky-save .btn { flex: 1; }
}
@media (max-width: 420px) {
    .log-grid { grid-template-columns: 1fr 1fr; }
    .log-grid .span-2 { grid-column: 1 / -1; }
}


/* =====================================================================
   Phase 8: Truck rental
   ===================================================================== */
.plate { display: inline-block; font-weight: 700; letter-spacing: .3px; padding: 3px 10px; border: 2px solid var(--text); border-radius: 6px; background: var(--surface); font-size: 15px; line-height: 1.3; white-space: nowrap; }
.plate-lg { font-size: 20px; padding: 4px 12px; }
.plate-sm { font-size: 11.5px; padding: 1px 6px; border-width: 1.5px; border-radius: 4px; }

.truck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.truck-grid > .card { margin: 0; }
.truck-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; color: inherit; border-left: 4px solid var(--pos); }
.truck-card.status-repair { border-left-color: var(--warn); }
.truck-card.status-sold { border-left-color: var(--border-strong); opacity: .75; }
.truck-card:hover { border-color: var(--border-strong); }
.truck-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.truck-top .muted { margin-top: 4px; }
.truck-card .icon { width: 14px; height: 14px; vertical-align: -2px; }
.truck-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px dashed var(--border); padding-top: 10px; }
.truck-stats > div { display: flex; flex-direction: column; min-width: 0; }
.truck-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); }
.truck-foot > span:first-child { margin-right: auto; }

.paper-alert { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.paper-old { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.paper-add { display: block; }
.paper-add > summary { list-style: none; display: inline-flex; }
.paper-add > summary::-webkit-details-marker { display: none; }

.filters-row { flex-wrap: wrap; }
.filters-row .select { width: auto; min-width: 140px; }
.kpi-value.small-val { font-size: 18px; }

.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-pick label { position: relative; cursor: pointer; }
.chips-pick input { position: absolute; opacity: 0; pointer-events: none; }
.chips-pick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); font-size: 14px; }
.chips-pick input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.chips-pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.cost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
.cost-grid .field { margin: 0; }
.trip-sum { display: flex; justify-content: flex-end; gap: 28px; flex-wrap: wrap; text-align: right; margin: 14px 0; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; }
.trip-sum > div { display: flex; flex-direction: column; }
.trip-sum .big { font-size: 24px; }

@media (max-width: 760px) {
    .truck-grid { grid-template-columns: 1fr; }
    .cost-grid { grid-template-columns: 1fr 1fr; }
    .trip-sum { justify-content: space-between; }
    .trip-sum > div:first-child { text-align: left; }
    .filters-row .select { flex: 1; min-width: 0; }
    .plate-lg { font-size: 17px; }
}
@media print {
    .plate { border-width: 1.5px; }
}


/* =====================================================================
   Phase 9: Agro farm
   ===================================================================== */
.cat-tag-vegetable { color: #15803d; background: #dcfce7; }
.cat-tag-fruit { color: #a16207; background: #fef9c3; }
.cat-tag-rice { color: #92400e; background: #fef3c7; }
.cat-tag-other { color: var(--muted); background: var(--surface-2); }

.crop-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; color: inherit; border-top: 4px solid #16a34a; margin: 0; }
.crop-card:hover { border-color: var(--border-strong); border-top-color: #16a34a; }
.crop-card.cat-fruit { border-top-color: #ca8a04; }
.crop-card.cat-rice { border-top-color: #b45309; }
.crop-card.cat-other { border-top-color: var(--border-strong); }
.crop-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.plot-card { border-top-color: var(--pos); }
.plot-card.own-leased, .plot-card.own-leased:hover { border-top-color: var(--warn); }
.plot-card.inactive { opacity: .65; }

.lease-box { padding: 14px; border: 1px dashed color-mix(in srgb, var(--warn) 50%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--warn) 4%, var(--surface)); }
.lease-card { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }

.harvest-form { display: grid; grid-template-columns: 150px 1fr 1fr 1.3fr auto; gap: 10px; align-items: end; border-bottom: 1px solid var(--border); }
.harvest-form .field { margin: 0; }
.harvest-form .btn { min-height: 52px; }

.cat-bar { margin-bottom: 10px; }
.cat-bar .bar { margin: 6px 0 0; }
.cat-bar .bar span { background: color-mix(in srgb, var(--neg) 65%, var(--surface)); }

@media (max-width: 900px) {
    .harvest-form { grid-template-columns: 1fr 1fr; }
    .harvest-form .btn { grid-column: 1 / -1; }
}


/* =====================================================================
   Phase 10: dashboards pulse, backups, system check
   ===================================================================== */
.area-pulse { border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.pulse-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.module-pulse { border-top: 4px solid var(--accent, var(--brand)); }
.check-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.check-row:last-child { border-bottom: 0; }
.check-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--pos); }
.state-warn .check-dot { background: var(--warn); }
.state-fail .check-dot { background: var(--neg); }
.state-fail { background: color-mix(in srgb, var(--neg) 4%, var(--surface)); }
.steps-list { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Rahima Transports: vehicle types + daily km */
.plate .icon { width: 15px; height: 15px; vertical-align: -2px; }
.chips-pick span .icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.tabs a .icon { width: 15px; height: 15px; }
.km-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.km-list > .card { margin: 0; }
.km-card { padding: 14px 16px; border-left: 4px solid var(--brand); }
.km-card.type-car { border-left-color: #2563eb; }
.km-card.type-tractor { border-left-color: #b45309; }
.km-card.saved { background: color-mix(in srgb, var(--pos) 3%, var(--surface)); }
.km-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.km-head .muted { display: block; margin-top: 4px; }
.km-total { font-size: 22px; font-weight: 700; white-space: nowrap; color: var(--brand); font-variant-numeric: tabular-nums; }
.km-total.bad { color: var(--neg); }
.km-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.km-grid .field { margin: 0; }
.km-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.km-sheet th, .km-sheet td { white-space: nowrap; }
.km-sheet tfoot th { background: var(--surface-2); }
@media (max-width: 760px) { .km-list { grid-template-columns: 1fr; } }
.truck-card .truck-stats { grid-template-columns: repeat(2, 1fr); }

/* vehicle categories (truck / car / tractor) */
.type-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.type-compare > .card + .card { margin-top: 0; }
.type-tile { display: block; padding: 14px 16px; border-left: 4px solid var(--brand); transition: transform .15s ease, box-shadow .15s ease; }
.type-tile:hover { transform: translateY(-2px); }
.type-tile.type-car { border-left-color: #2563eb; }
.type-tile.type-tractor { border-left-color: #c2410c; }
.type-tile.on { box-shadow: 0 0 0 2px var(--brand) inset, var(--shadow, 0 1px 2px rgba(0,0,0,.06)); }
.type-tile-head { display: flex; align-items: center; gap: 10px; }
.type-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.type-ico .icon { width: 22px; height: 22px; }
.type-tile-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.type-tile-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.type-tile-nums strong { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-title .icon { vertical-align: -3px; }
@media (max-width: 760px) {
  .type-compare { grid-template-columns: 1fr; gap: 8px; }
  .type-tile { padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
  .type-tile-nums { margin-top: 0; }
}
.type-table th, .type-table td:not(:first-child) { white-space: nowrap; }