/* ===========================================================
   Sahaj Field — MFI Field Executive App
   Global theme: design tokens + Bootstrap 5 variable overrides.
   Ported from the Claude Design prototype (styles.css) so every
   page inherits the same look without redefining it.
   =========================================================== */

@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/HankenGrotesk-Variable.woff2') format('woff2-variations');
}

:root {
    /* Brand / accent */
    --accent: #EA580C;
    --accent-press: #C2410C;
    --accent-soft: #FFEDD5;
    --accent-ink: #7C2D12;
    --amber: #F59E0B;
    --amber-soft: #FEF3C7;
    /* Brand green (dashboard hero cards, primary CTAs) */
    --brand: #316b22;
    --brand-press: #244f19;
    --brand-2: #4a9138;
    --brand-soft: #E7F2E1;
    --brand-ink: #1F4A17;
    /* Warm neutrals (stone) */
    --bg: #F4F1EC;
    --surface: #FFFFFF;
    --surface-2: #FBF9F6;
    --ink: #1C1917;
    --ink-2: #57534E;
    --ink-3: #8A847E;
    --line: #E7E3DD;
    --line-2: #F0ECE6;
    /* Semantic money colors */
    --in: #316b22;
    --in-soft: #DCFCE7;
    --in-ink: #14532D;
    --out: #DC2626;
    --out-soft: #FEE2E2;
    --out-ink: #7F1D1D;
    --info: #2563EB;
    --info-soft: #DBEAFE;
    /* Sync states */
    --sync-ok: #15803D;
    --sync-busy: #2563EB;
    --sync-warn: #D97706;
    --sync-off: #B91C1C;
    /* Type */
    --font: 'Hanken Grotesk', system-ui, sans-serif;
    /* Radii */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;
    /* Touch */
    --tap: 50px;
    /* Shadows (warm) */
    --sh-1: 0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.05);
    --sh-2: 0 2px 6px rgba(28,25,23,.07), 0 6px 16px rgba(28,25,23,.06);
    --sh-3: 0 8px 24px rgba(28,25,23,.10), 0 2px 6px rgba(28,25,23,.06);
    --sh-up: 0 -4px 20px rgba(28,25,23,.08);
    /* Layout */
    --pad: 16px;
    --app-max-w: 480px;
    /* ---- Bootstrap 5 variable overrides ---- */
    --bs-font-sans-serif: var(--font);
    --bs-body-font-family: var(--font);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-primary: var(--accent);
    --bs-primary-rgb: 234, 88, 12;
    --bs-success: var(--in);
    --bs-success-rgb: 21, 128, 61;
    --bs-danger: var(--out);
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: var(--amber);
    --bs-warning-rgb: 245, 158, 11;
    --bs-info: var(--info);
    --bs-info-rgb: 37, 99, 235;
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);
    --bs-border-radius-pill: var(--r-pill);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-press);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Neutralize default anchor styling app-wide — this UI treats <a> purely as a
   navigation mechanism for what are visually cards/rows/buttons, not text links. */
a {
    text-decoration: none;
    color: inherit;
}

html, body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

button {
    font-family: inherit;
}

input, select, textarea {
    font-family: inherit;
}

/* ---- Mobile-first app frame: full-bleed on phones, centered card on wide screens ---- */
.app-shell {
    /*  max-width: var(--app-max-w);*/
    margin: 0 auto;
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
    /*    padding: 20px 0px 0px 0px;*/
    padding-bottom: 85px;
}

@media (min-width: 540px) {
    .app-shell {
        min-height: 100dvh;
        box-shadow: 0 0 0 1px var(--line), var(--sh-3);
    }

    body {
        background: #2a2723;
    }
}

/* generic stacks (kept minimal — pages mostly use Bootstrap utility classes) */
.grow {
    flex: 1 1 auto;
    min-width: 0;
}

/* cards */
.card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    border: 1px solid var(--line-2);
}

/* buttons */
.btn {
    --bs-btn-border-radius: var(--r-md);
    --bs-btn-font-weight: 700;
    min-height: var(--tap);
}

.btn-lg {
    --bs-btn-border-radius: var(--r-lg);
    font-size: 18px;
    min-height: 58px;
}

.btn-primary {
    --bs-btn-bg: var(--brand-2);
    --bs-btn-border-color: var(--brand-2);
    --bs-btn-hover-bg: var(--brand-2);
    --bs-btn-hover-border-color: var(--brand-2);
    --bs-btn-active-bg: var(--brand-2);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-2) 38%, transparent);
}

.btn-success {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
    background-color: var(--brand);
}

.btn-dark {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: var(--line);
}

.btn-soft-accent {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* pills / chips (badges) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 39px;
    padding: 0 11px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
}

.chip-in {
    background: var(--in-soft);
    color: var(--in-ink);
}

.chip-out {
    background: var(--out-soft);
    color: var(--out-ink);
}

.chip-warn {
    background: var(--amber-soft);
    color: #92400e;
}

.chip-info {
    background: var(--info-soft);
    color: #1e40af;
}

.chip-neutral {
    background: var(--line-2);
    color: var(--ink-2);
}

.chip-accent {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* section header */
.sec-title {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--ink-3);
}

.kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* form controls */
.form-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-2);
}

.form-control, .form-select {
    min-height: var(--tap);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-soft);
    }

textarea.form-control {
    min-height: 84px;
    line-height: 1.45;
}

/* avatar */
.avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--accent-ink);
    flex: 0 0 auto;
}

/* big amount */
.amount {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

.text-in {
    color: var(--in);
}

.text-out {
    color: var(--out);
}

/* pulse for sync */
@keyframes pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}

.pulsing {
    animation: pulse 1.1s ease-in-out infinite;
}

/* progress bar (multi-step forms) */
.prog-track {
    height: 8px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.prog-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--accent);
    transition: width .3s;
}

/* screen enter animation */
@keyframes screenIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .screen-anim {
        animation: screenIn .28s cubic-bezier(.22,.9,.3,1);
    }
}

/* toast (transient bottom message) */
.toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 24px;
    margin: 0 auto;
    max-width: calc(var(--app-max-w) - 32px);
    z-index: 1080;
    background: var(--ink);
    color: #fff;
    border-radius: 14px;
    padding: 13px 16px;
    font-weight: 600;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--sh-3);
    animation: screenIn .25s ease;
}

/* segmented control (e.g. Urgency: Normal/High/Urgent) */
.seg {
    display: flex;
    background: var(--line-2);
    border-radius: var(--r-md);
    padding: 4px;
    gap: 4px;
}

    .seg > button {
        flex: 1;
        min-height: 38px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 14px;
        color: var(--ink-2);
        background: none;
        border: none;
    }

        .seg > button.on {
            background: var(--surface);
            color: var(--ink);
            box-shadow: var(--sh-1);
        }

/* ---- shared "document detail" layout (Receipt Detail / Voucher Detail) ---- */
.doc-detail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 12px;
}

.dd-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.dd-sub {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
    margin-top: 1px;
}

.dd-body {
    padding: 0 16px 95px;
    flex: 1;
    overflow-y: auto;
}

.dd-card {
    overflow: hidden;
}

.dd-hero {
    padding: 20px 18px 16px;
    text-align: center;
    color: #fff;
}

.dd-hero-in {
    background: linear-gradient(135deg, var(--in) 0%, #0f6b32 100%);
}

.dd-hero-out {
    background: linear-gradient(135deg, var(--out) 0%, #991b1b 100%);
}

.dd-hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    font-size: 26px;
}

.dd-hero-label {
    font-size: 12.5px;
    font-weight: 700;
    opacity: .85;
    letter-spacing: .4px;
}

.dd-hero-amount {
    font-size: 38px;
    margin-top: 2px;
    color: #fff;
}

.dd-hero-no {
    font-size: 12.5px;
    font-weight: 700;
    opacity: .85;
    margin-top: 6px;
}

.dd-rows {
    padding: 4px 18px 14px;
}

.dd-row {
    padding: 11px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line-2);
}

.dd-row-last {
    border-bottom: none;
}

.dd-row span:last-child {
    font-weight: 700;
    color: var(--ink);
    text-align: right;
}

.dd-row-strong span:last-child {
    font-size: 17px;
    font-weight: 800;
    color: var(--accent);
}

.dd-status-chip {
    height: 32px;
    font-size: 13px;
}

.dd-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex: 0 0 auto;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: var(--sh-up);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
}

.dd-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* list row */
.lrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px var(--pad);
}

    .lrow:active {
        background: var(--surface-2);
    }

/* ---- bottom-sheet-style modal (shared across pages: any modal with class "sheet-modal") ---- */
.sheet-modal .modal-dialog-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: var(--app-max-w);
    width: 100%;
}

.sheet-modal .modal-content {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
}

.sheet-modal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.sheet-modal .modal-title {
    font-size: 17px;
    font-weight: 800;
}

.sheet-modal .modal-footer {
    border-top: none;
    padding-top: 0;
}

/* ---- reusable radio-card option (skip reasons, route-change reasons, visit outcomes, etc.) ---- */
.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    background: var(--surface);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}

.radio-option-selected {
    border-color: var(--accent);
}

.radio-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line);
    flex: 0 0 auto;
    position: relative;
}

.radio-option-selected .radio-dot {
    border-color: var(--accent);
}

    .radio-option-selected .radio-dot::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: var(--accent);
    }

/* ---- reusable sync badge (small round header icon button, used on every module header) ---- */
.sync-badge {
    height: 34px;
    width: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 16px;
}

.sync-badge-ok {
    background: var(--in-soft);
    color: var(--sync-ok);
}

.sync-badge-busy {
    background: var(--info-soft);
    color: var(--sync-busy);
}

.sync-badge-pending {
    background: var(--amber-soft);
    color: var(--sync-warn);
}

.sync-badge-offline {
    background: var(--out-soft);
    color: var(--sync-off);
}

/* ---- reusable KPI / stat card ---- */
.kpi-card {
    padding: 12px;
    text-decoration: none;
    color: inherit;
    display: block;
}

    .kpi-card .kpi-value {
        font-size: 20px;
    }

.kpi-ico {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--line-2);
    font-size: 15px;
}

.kpi-in .kpi-value {
    color: var(--in);
}

.kpi-in .kpi-ico {
    background: var(--in-soft);
    color: var(--in);
}

.kpi-out .kpi-value {
    color: var(--out);
}

.kpi-out .kpi-ico {
    background: var(--out-soft);
    color: var(--out);
}

.kpi-accent .kpi-value {
    color: var(--accent);
}

.kpi-accent .kpi-ico {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ---- reusable alerts list ---- */
.alerts-card {
    padding: 0 2px;
    overflow: hidden;
}

.alert-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line-2);
}

    .alert-row:last-child {
        border-bottom: none;
    }

.alert-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 18px;
}

.alert-title {
    font-size: 14.5px;
    font-weight: 700;
}

.alert-sub {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
    margin-top: 1px;
}

.sec-action {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- reusable back button (screen header back arrow) ---- */
.back-btn {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--ink);
    text-decoration: none;
    font-size: 20px;
}

/* ---- reusable module header icon button (bell etc.) ---- */
.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    position: relative;
    color: var(--ink);
    text-decoration: none;
    font-size: 20px;
}

.icon-btn-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--out);
    border: 2px solid var(--surface);
}

/* ---- empty state ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    gap: 12px;
    color: var(--ink-3);
}

.empty-state-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--line-2);
    display: grid;
    place-items: center;
    font-size: 26px;
}

.empty-state-text {
    font-size: 14.5px;
    font-weight: 700;
}

/* ---- shared member-search list (used by Receipt, Payment, Savings, Apply Loan) ---- */
.ms-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ms-head {
    padding: 4px 16px 10px;
}

.ms-search {
    position: relative;
}

.ms-search-icon {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--ink-3);
    font-size: 19px;
    pointer-events: none;
}

.ms-search .form-control {
    padding-left: 46px;
    font-size: 17px;
}

.ms-chips {
    margin-top: 10px;
    overflow-x: auto;
}

    .ms-chips .chip {
        flex: 0 0 auto;
    }

.ms-body {
    padding: 4px 16px 20px;
    flex: 1;
    overflow-y: auto;
}

.ms-count {
    padding: 4px 2px 10px;
}

.ms-row {
    flex-direction: row;
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.ms-avatar {
    width: 46px;
    height: 46px;
    font-size: 16px;
}

.ms-name {
    font-size: 15.5px;
    font-weight: 800;
}

.ms-due {
    font-size: 14.5px;
}

.ms-sub {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
}

.ms-duelabel {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink-3);
}
.erp-req {
    color: #C2483A;
}