/* ============================================================
   محفظتي · v2 — Premium Dark Design System
   Inspired by Cash App / Revolut / Wise — mobile-native feel
   ============================================================ */

:root {
    /* Surface ladder — true premium dark */
    --bg-base:      #06070C;            /* page bg, deepest */
    --bg-raised:    #0E1220;            /* topbar, sticky */
    --bg-card:      #161B2E;            /* card surface */
    --bg-card-hi:   #1F2540;            /* hover/active card */
    --bg-inset:     #0B0F1B;            /* recessed (skeleton, divider) */

    /* Borders + dividers */
    --border:       rgba(255,255,255,0.06);
    --border-hi:    rgba(255,255,255,0.12);

    /* Brand accents */
    --gold:         #E0B84F;
    --gold-hi:      #F4CE6C;
    --gold-soft:    #8F7530;

    /* Semantic */
    --pos:          #4DD896;            /* income / positive — vivid emerald */
    --pos-soft:     #1F4D38;
    --pos-glow:     rgba(77, 216, 150, 0.18);
    --neg:          #FF5C5C;            /* expense / negative — coral red */
    --neg-soft:     #4D2030;
    --neg-glow:     rgba(255, 92, 92, 0.18);
    --warn:         #FFB547;
    --warn-soft:    #4D3820;
    --info:         #6FB3FF;
    --info-soft:    #1F3450;

    /* Text */
    --text:         #FFFFFF;
    --text-soft:    rgba(255,255,255,0.72);
    --text-muted:   rgba(255,255,255,0.46);
    --text-faint:   rgba(255,255,255,0.28);

    /* Radii */
    --r-sm:         10px;
    --r-md:         16px;
    --r-lg:         22px;
    --r-xl:         28px;
    --r-pill:       100px;

    /* Shadows */
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:    0 6px 18px rgba(0,0,0,0.5);
    --shadow-lg:    0 16px 40px rgba(0,0,0,0.55);
    --shadow-gold:  0 8px 28px rgba(224, 184, 79, 0.25);
    --shadow-pos:   0 8px 28px rgba(77, 216, 150, 0.22);

    /* Motion */
    --ease:         cubic-bezier(0.32, 0.72, 0.24, 1);
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --dur:          240ms;
    --dur-fast:     140ms;
    --dur-slow:     420ms;

    /* Layout */
    --safe-top:     env(safe-area-inset-top, 0px);
    --safe-bottom:  env(safe-area-inset-bottom, 0px);
    --nav-h:        72px;
    --side-w:       250px;              /* desktop sidebar rail width */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--gold); color: #000; }

html { background: var(--bg-base); }

html, body {
    direction: rtl;
    font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
    background: var(--bg-base);
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
    font-feature-settings: "tnum" 1, "lnum" 1;   /* tabular figures for money */
}

/* ── LTR / English mode ── */
html.lang-en, html.lang-en body {
    direction: ltr;
    font-family: 'Inter', 'Segoe UI', 'SF Pro Text', system-ui, -apple-system, sans-serif;
}
html.lang-en .ai-hint,
html.lang-en .card-title,
html.lang-en .tx-meta,
html.lang-en .tx-title { text-align: left; }
html.lang-en .empty { direction: ltr; }
html.lang-en .topbar-actions .icon-btn { transform: scaleX(-1); }
html.lang-en .topbar-actions .icon-btn[data-no-flip] { transform: none; }
html.lang-en .login-card,
html.lang-en .field-input,
html.lang-en .field-select,
html.lang-en .amount-input { text-align: left; }
html.lang-en .amount-input { direction: ltr; }
html.lang-en select option { direction: ltr; }

body {
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
    background:
        radial-gradient(ellipse at top, rgba(224,184,79,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(77,216,150,0.04) 0%, transparent 40%),
        var(--bg-base);
    background-attachment: fixed;
}

a { color: var(--gold); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* =============== Top bar =============== */
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(14, 18, 32, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding: calc(var(--safe-top) + 12px) 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar-title .brand-mark {
    color: var(--gold);
    font-size: 22px;
}
.topbar-actions { display: flex; gap: 6px; }

.icon-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 17px;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,0.10); }
.icon-btn:active { transform: scale(0.94); }

/* =============== Container =============== */
.main {
    padding: 18px 16px;
    max-width: 560px;
    margin: 0 auto;
}

/* =============== Cards =============== */
.card {
    background: var(--bg-card);
    border-radius: var(--r-md);
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast) var(--ease);
}
.card-flat {
    background: transparent;
    border: 1px solid var(--border);
    box-shadow: none;
}
.card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.2px;
}
.card-title .link {
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
}
.card-title .link:hover { color: var(--gold-hi); }

/* =============== KPI tiles =============== */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.kpi {
    background: var(--bg-card);
    border-radius: var(--r-md);
    padding: 16px;
    border: 1px solid var(--border);
}
.kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.kpi-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}
.kpi-value .currency {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 4px;
}
.kpi-value.pos { color: var(--pos); }
.kpi-value.neg { color: var(--neg); }
.kpi-value.gold { color: var(--gold); }
.kpi-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hero KPI: full width with gold halo */
.kpi-hero {
    grid-column: span 2;
    background:
        radial-gradient(ellipse at top right, rgba(224,184,79,0.20) 0%, transparent 70%),
        linear-gradient(135deg, #1A2040 0%, #0F1428 100%);
    border: 1px solid rgba(224,184,79,0.20);
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.kpi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(224,184,79,0.10) 0%, transparent 50%);
    pointer-events: none;
}
.kpi-hero .kpi-label { color: rgba(255,255,255,0.55); }
.kpi-hero .kpi-value {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -1.2px;
    line-height: 1.05;
}
.kpi-hero .kpi-value.pos { color: var(--gold-hi); }
.kpi-hero .kpi-value.neg { color: #ff8585; }

/* Delta pill (used in KPI sub + insights) */
.delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.06);
}
.delta.pos { background: var(--pos-soft); color: var(--pos); }
.delta.neg { background: var(--neg-soft); color: var(--neg); }
.delta.warn { background: var(--warn-soft); color: var(--warn); }

/* =============== Quick entry tabs =============== */
.tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
    background: var(--bg-card);
    padding: 6px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}
.tab-btn {
    padding: 12px 4px;
    border: 0;
    background: transparent;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all var(--dur-fast) var(--ease);
}
.tab-btn .tab-emoji { font-size: 22px; }
.tab-btn.active {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.tab-btn.active.expense  { background: var(--neg-soft); color: var(--neg); }
.tab-btn.active.income   { background: var(--pos-soft); color: var(--pos); }
.tab-btn.active.loan-out { background: rgba(224,184,79,0.16); color: var(--gold); }
.tab-btn.active.loan-in  { background: var(--info-soft); color: var(--info); }
.tab-btn:active { transform: scale(0.96); }

/* =============== Category grid =============== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
@media (min-width: 480px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat-btn {
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-soft);
    transition: all var(--dur-fast) var(--ease);
    min-height: 82px;
}
.cat-btn .cat-emoji { font-size: 28px; }
.cat-btn:active { transform: scale(0.95); }
.cat-btn.selected {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(224,184,79,0.18), rgba(224,184,79,0.06));
    color: var(--gold-hi);
    box-shadow: var(--shadow-gold);
}

/* =============== Big amount input =============== */
.amount-wrap {
    text-align: center;
    padding: 8px 0 4px;
}
.amount-input {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 56px;
    font-weight: 900;
    text-align: center;
    border: 0;
    border-radius: var(--r-md);
    padding: 8px 16px;
    background: transparent;
    color: var(--text);
    letter-spacing: -2px;
    line-height: 1.1;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
}
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-input:focus { outline: none; }
.amount-input::placeholder { color: var(--text-faint); }
.amount-currency {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    margin-top: -4px;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

/* =============== Form fields =============== */
.field { margin-bottom: 14px; }
.field-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.field-input, .field-select, .field-textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-inset);
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field-input::placeholder { color: var(--text-faint); }
.field-input:focus, .field-select:focus, .field-textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--bg-card);
}
.field-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(0% + 14px) calc(50% - 2px), calc(0% + 18px) calc(50% - 2px);
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-left: 32px;
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* =============== Buttons =============== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border: 0;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
    letter-spacing: 0.1px;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn-primary {
    background: linear-gradient(180deg, var(--gold) 0%, #C99B30 100%);
    color: #0A0A12;
    box-shadow: var(--shadow-gold);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-block { width: 100%; padding: 16px; font-size: 16px; }

.btn-outline {
    background: rgba(255,255,255,0.04);
    color: var(--text);
    border: 1px solid var(--border-hi);
}
.btn-outline:hover { background: rgba(255,255,255,0.08); }

.btn-ghost {
    background: transparent;
    color: var(--text-soft);
}

.btn-success {
    background: linear-gradient(180deg, var(--pos) 0%, #2DA571 100%);
    color: #061B14;
    box-shadow: var(--shadow-pos);
}
.btn-danger {
    background: linear-gradient(180deg, var(--neg) 0%, #C13838 100%);
    color: #FFF;
}
.btn-gold { background: var(--gold); color: #0A0A12; }

/* =============== Lists =============== */
.tx-list { display: flex; flex-direction: column; gap: 6px; }
.tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
    transition: background var(--dur-fast) var(--ease);
}
.tx-item:hover { background: var(--bg-card-hi); }
.tx-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.tx-body { flex: 1; min-width: 0; }
.tx-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 500;
}
.tx-amount {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
.tx-amount.pos { color: var(--pos); }
.tx-amount.neg { color: var(--neg); }
.tx-amount.neutral { color: var(--gold); }

/* Swipe-to-delete reveal */
.swipe-wrap { position: relative; overflow: hidden; border-radius: var(--r-md); }
.swipe-action {
    position: absolute;
    inset: 0 0 0 auto;
    width: 100px;
    background: var(--neg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    border-radius: var(--r-md);
}
.swipe-action.edit { background: var(--gold); color: #0A0A12; left: 0; right: auto; }
.swipe-card { position: relative; z-index: 2; transition: transform var(--dur) var(--ease-out); will-change: transform; }

/* =============== Bottom nav =============== */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(14, 18, 32, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    z-index: 30;
    padding: 8px 0 calc(8px + var(--safe-bottom));
}
.bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
.bnav-item .bnav-icon { font-size: 22px; transition: transform var(--dur-fast) var(--ease); }
.bnav-item.active { color: var(--text); }
.bnav-item.active .bnav-icon { transform: translateY(-2px); }
.bnav-item:active .bnav-icon { transform: scale(0.92); }
.bnav-item.add {
    position: relative;
}
.bnav-item.add .bnav-icon {
    background: linear-gradient(180deg, var(--gold) 0%, #C99B30 100%);
    color: #0A0A12;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-top: -22px;
    font-size: 28px;
    font-weight: 900;
    box-shadow: var(--shadow-gold);
    border: 3px solid var(--bg-base);
}
.bnav-item.add span:last-child { display: none; }

/* =============== Login screen =============== */
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(ellipse at top, rgba(224,184,79,0.10) 0%, transparent 60%),
        radial-gradient(ellipse at bottom, rgba(77,216,150,0.06) 0%, transparent 50%),
        var(--bg-base);
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 36px 26px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.login-emoji {
    font-size: 56px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 16px rgba(224,184,79,0.4));
}
.login-title {
    font-size: 26px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
.login-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 28px;
    font-weight: 600;
}
.login-error {
    background: rgba(255,92,92,0.10);
    border: 1px solid rgba(255,92,92,0.30);
    color: var(--neg);
    font-size: 13px;
    font-weight: 700;
    padding: 12px;
    border-radius: var(--r-sm);
    margin-top: 12px;
    display: none;
}
.login-error.show { display: block; animation: shake 0.4s; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* =============== Misc =============== */
.muted { color: var(--text-muted); }
.text-center { text-align: center; }
.empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--text-muted);
    font-size: 14px;
}
.empty-emoji { font-size: 44px; display: block; margin-bottom: 10px; opacity: 0.7; }

.toast {
    position: fixed;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-card);
    border: 1px solid var(--border-hi);
    color: var(--text);
    padding: 12px 22px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast.success {
    background: var(--pos-soft);
    border-color: var(--pos);
    color: var(--pos);
}
.toast.error {
    background: var(--neg-soft);
    border-color: var(--neg);
    color: var(--neg);
}

/* =============== Pill / Tag =============== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 800;
    background: rgba(255,255,255,0.06);
    color: var(--text-soft);
    border: 1px solid var(--border);
    transition: all var(--dur-fast) var(--ease);
}
.pill.pos { background: var(--pos-soft); color: var(--pos); border-color: rgba(77,216,150,0.30); }
.pill.neg { background: var(--neg-soft); color: var(--neg); border-color: rgba(255,92,92,0.30); }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(255,181,71,0.30); }
.pill.gold { background: rgba(224,184,79,0.14); color: var(--gold); border-color: rgba(224,184,79,0.30); }

/* =============== Skeleton loaders =============== */
.sk {
    background: linear-gradient(90deg, var(--bg-inset) 0%, var(--bg-card-hi) 50%, var(--bg-inset) 100%);
    background-size: 200% 100%;
    animation: sk 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
}
.sk-line { height: 14px; width: 100%; }
.sk-line.short { width: 60%; }
.sk-num { height: 32px; width: 60%; }
.sk-block { height: 60px; width: 100%; border-radius: var(--r-md); }

@keyframes sk {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* =============== Bottom sheet (mobile-native modal) =============== */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg-card);
    border-top-left-radius: var(--r-xl);
    border-top-right-radius: var(--r-xl);
    border-top: 1px solid var(--border-hi);
    z-index: 91;
    padding: 8px 0 calc(20px + var(--safe-bottom));
    transform: translateY(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    overscroll-behavior: contain;
}
.sheet.open { transform: translateY(0); }
.sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--text-faint);
    border-radius: 2px;
    margin: 6px auto 14px;
}
.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 14px;
    border-bottom: 1px solid var(--border);
}
.sheet-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}
.sheet-close {
    background: rgba(255,255,255,0.06);
    border: 0;
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
}
.sheet-body {
    padding: 20px 22px 4px;
}

/* =============== Insight cards =============== */
.insight {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    align-items: flex-start;
}
.insight-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
.insight-icon.warn { background: var(--warn-soft); color: var(--warn); }
.insight-icon.pos  { background: var(--pos-soft);  color: var(--pos); }
.insight-icon.neg  { background: var(--neg-soft);  color: var(--neg); }
.insight-icon.gold { background: rgba(224,184,79,0.14); color: var(--gold); }
.insight-icon.info { background: var(--info-soft); color: var(--info); }
.insight-body { flex: 1; min-width: 0; }
.insight-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 3px;
}
.insight-meta {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

/* =============== Progress bars =============== */
.progress {
    height: 8px;
    background: var(--bg-inset);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-top: 6px;
}
.progress-fill {
    height: 100%;
    background: var(--gold);
    border-radius: var(--r-pill);
    transition: width var(--dur-slow) var(--ease-out);
}
.progress-fill.pos { background: linear-gradient(90deg, #2DA571, var(--pos)); }
.progress-fill.neg { background: linear-gradient(90deg, #C13838, var(--neg)); }
.progress-fill.warn { background: linear-gradient(90deg, #C9852E, var(--warn)); }

/* =============== FAB Speed Dial =============== */
.fab-dial {
    position: fixed;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 24px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.fab-dial.open { opacity: 1; pointer-events: auto; }
.fab-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-pill);
    color: var(--text);
    font-weight: 800;
    font-size: 14px;
    box-shadow: var(--shadow-md);
    transform: translateY(20px);
    opacity: 0;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.fab-dial.open .fab-option { transform: translateY(0); opacity: 1; }
.fab-dial.open .fab-option:nth-child(1) { transition-delay: 0ms; }
.fab-dial.open .fab-option:nth-child(2) { transition-delay: 60ms; }
.fab-dial.open .fab-option:nth-child(3) { transition-delay: 120ms; }
.fab-dial.open .fab-option:nth-child(4) { transition-delay: 180ms; }
.fab-option:active { transform: scale(0.95); }

/* =============== AI input (smart entry) =============== */
.ai-input {
    background: linear-gradient(135deg, rgba(224,184,79,0.10), rgba(77,216,150,0.06));
    border: 1px solid rgba(224,184,79,0.30);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.ai-input::before {
    content: '✨';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}
.ai-input input {
    flex: 1;
    background: transparent;
    border: 0;
    font-family: inherit;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    padding: 4px 0 4px 32px;
    outline: none;
}
.ai-input input::placeholder { color: var(--text-muted); font-weight: 500; }
.ai-input button {
    background: var(--gold);
    color: #0A0A12;
    border: 0;
    border-radius: 12px;
    padding: 8px 14px;
    font-weight: 800;
    font-size: 13px;
}
.ai-input button:disabled { opacity: 0.5; }
.ai-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: -8px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 600;
}

/* =============== Charts container =============== */
.chart-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    margin-top: 4px;
}
.chart-wrap.sm { height: 140px; }
.chart-wrap.lg { height: 280px; }

/* =============== Animations =============== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
    animation: fadeUp var(--dur) var(--ease-out) both;
}
.fade-up:nth-child(2) { animation-delay: 40ms; }
.fade-up:nth-child(3) { animation-delay: 80ms; }
.fade-up:nth-child(4) { animation-delay: 120ms; }
.fade-up:nth-child(5) { animation-delay: 160ms; }
.fade-up:nth-child(6) { animation-delay: 200ms; }

@keyframes pulse-gold {
    0%,100% { box-shadow: 0 0 0 0 rgba(224,184,79,0.4); }
    50%     { box-shadow: 0 0 0 8px rgba(224,184,79,0); }
}
.pulse { animation: pulse-gold 2s infinite; }

/* =============== Asset row (net worth page) =============== */
.asset-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: 8px;
}
.asset-row.editing { border-color: var(--gold); }
.asset-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--bg-card-hi);
    flex-shrink: 0;
}
.asset-info { flex: 1; min-width: 0; }
.asset-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}
.asset-kind {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}
.asset-balance {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* =============== Segmented control =============== */
.segmented {
    display: flex;
    gap: 4px;
    background: var(--bg-inset);
    padding: 4px;
    border-radius: var(--r-sm);
    margin-bottom: 14px;
}
.segmented button {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 9px 6px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    transition: all var(--dur-fast) var(--ease);
}
.segmented button.active {
    background: var(--bg-card-hi);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* =============== Headings =============== */
.h-section {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    margin: 18px 4px 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* =============== Utility =============== */
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.center { justify-content: center; }
.spacer-sm { height: 8px; }
.spacer-md { height: 16px; }
.spacer-lg { height: 24px; }
.spacer-xl { height: 40px; }
.text-pos { color: var(--pos); }
.text-neg { color: var(--neg); }
.text-gold { color: var(--gold); }
.font-num { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.3px; }
.no-scroll { overflow: hidden; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   DESKTOP / LAPTOP  — sidebar rail + roomier, 2-column layout
   Mobile is untouched; everything below activates ≥ breakpoints
   ============================================================ */

/* Sidebar is mobile-hidden by default (bottom nav handles mobile) */
.sidebar { display: none; }

/* ── Tablet / small laptop: just give the column more room ── */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .main { max-width: 680px; padding: 24px 22px; }
}

/* ── Laptop & up: full desktop shell ── */
@media (min-width: 1024px) {
    /* Reserve space for the rail (RTL → right side) and drop the
       mobile bottom padding that was leaving room for the bottom nav */
    body {
        padding-right: var(--side-w);
        padding-bottom: 24px;
    }
    html.lang-en body { padding-right: 0; padding-left: var(--side-w); }

    /* Bottom nav + FAB dial are replaced by the rail on desktop */
    .bottom-nav,
    .fab-dial { display: none !important; }

    /* The "⋯ more" button is redundant — the rail holds every link */
    #btn-more { display: none; }

    /* Topbar now spans the content area only (body padding shifts it) */
    .topbar { padding-left: 28px; padding-right: 28px; }

    /* Roomier content column for all pages */
    .main { max-width: 820px; padding: 30px 28px 56px; }

    /* ── The sidebar rail ── */
    .sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: var(--side-w);
        background: var(--bg-raised);
        border-left: 1px solid var(--border);
        padding: 22px 14px calc(20px + var(--safe-bottom));
        z-index: 40;
        overflow-y: auto;
    }
    html.lang-en .sidebar {
        right: auto; left: 0;
        border-left: 0;
        border-right: 1px solid var(--border);
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -0.4px;
        color: var(--text);
        padding: 4px 12px 18px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-brand .brand-mark { color: var(--gold); font-size: 26px; }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        margin-top: 12px;
    }
    .sidebar-link {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 12px 14px;
        border-radius: var(--r-sm);
        color: var(--text-soft);
        font-size: 15px;
        font-weight: 700;
        transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }
    .sidebar-link .si { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }
    .sidebar-link:hover { background: rgba(255,255,255,0.06); color: var(--text); }
    .sidebar-link.active {
        background: rgba(224,184,79,0.13);
        color: var(--gold-hi);
        box-shadow: inset 0 0 0 1px rgba(224,184,79,0.25);
    }
    .sidebar-link.add {
        background: linear-gradient(180deg, var(--gold) 0%, #C99B30 100%);
        color: #0A0A12;
        font-weight: 800;
        margin: 8px 0;
        box-shadow: var(--shadow-gold);
    }
    .sidebar-link.add .si { color: #0A0A12; }
    .sidebar-link.add:hover { filter: brightness(1.05); color: #0A0A12; }

    .sidebar-foot { padding-top: 14px; border-top: 1px solid var(--border); }

    /* ── Dashboard becomes a real 2-column board ── */
    #dash-main {
        max-width: 1120px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }
    /* KPI band spans both columns; the 4 small tiles sit in one row */
    #dash-main > .kpi-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 0;
    }
    #dash-main > .kpi-grid .kpi-hero { grid-column: 1 / -1; }
    /* Remaining cards auto-flow into the two columns, no stretch */
    #dash-main > .card { margin-bottom: 0; align-self: start; }

    /* Slightly larger hero figure on big screens */
    .kpi-hero .kpi-value { font-size: 44px; }

    /* ── Reports page: charts/cards in a 2-column board ── */
    #reports-main {
        max-width: 1120px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }
    #reports-main > .card { margin-bottom: 0; align-self: start; }
    /* Full-width elements span both columns */
    #reports-main > #btn-aging,
    #reports-main > #btn-export,
    #reports-main > .spacer-lg { grid-column: 1 / -1; margin-bottom: 0; }
}

/* ── Large desktop: widen a touch more ── */
@media (min-width: 1440px) {
    .main { max-width: 900px; }
    #dash-main { max-width: 1240px; }
    #reports-main { max-width: 1240px; }
}

/* ============================================================
   REPORT / STATEMENT overlay — white printable document + PDF
   كشف حساب وتقرير الذمم: معاينة على الشاشة + تصدير PDF عبر الطباعة
   ============================================================ */
.report-overlay {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(3,4,8,0.86);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: none; flex-direction: column;
}
.report-overlay.open { display: flex; }
.report-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: calc(var(--safe-top) + 10px) 14px 10px;
    background: var(--bg-raised); border-bottom: 1px solid var(--border);
    flex-shrink: 0; flex-wrap: wrap; row-gap: 8px;
}
.report-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-period { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rp-pinput {
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border-hi); border-radius: 8px;
    padding: 7px 9px; font-family: inherit; font-size: 12px; font-weight: 700;
}
.rp-pinput:focus { outline: none; border-color: var(--gold); }
.rp-pinput::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
@media (max-width: 520px) { .rp-pinput { font-size: 11px; padding: 6px 7px; } }
.report-toolbar .btn { padding: 10px 14px; font-size: 13px; }
.report-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; justify-content: center; }
.report-paper {
    background: #fff; color: #14171F; width: 100%; max-width: 820px;
    border-radius: 8px; padding: 28px 26px; align-self: flex-start;
    box-shadow: 0 16px 50px rgba(0,0,0,0.5);
    font-family: 'Cairo','Tajawal',system-ui,sans-serif; line-height: 1.5;
}
.report-paper .rp-head { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #14171F; padding-bottom:12px; margin-bottom:14px; }
.report-paper .rp-brand { display:flex; align-items:center; gap:8px; font-size:20px; font-weight:900; }
.report-paper .rp-logo { font-size:24px; }
.report-paper .rp-doc { font-size:18px; font-weight:800; color:#5A4A12; }
.report-paper .rp-meta { display:flex; flex-wrap:wrap; gap:6px 22px; font-size:13px; color:#3A3F4A; margin-bottom:16px; font-weight:600; }
.report-paper .rp-meta .k { font-size:16px; font-weight:900; color:#14171F; }
.report-paper .rp-badge { background:#EFE6C8; color:#5A4A12; padding:2px 8px; border-radius:8px; font-size:11px; font-weight:800; }
.report-paper .rp-totals { display:flex; gap:16px; flex-wrap:wrap; width:100%; margin-top:4px; font-weight:800; }
.report-paper .rp-totals .pos { color:#157A4A; }
.report-paper .rp-totals .neg { color:#B42318; }
.report-paper .rp-sec { font-size:15px; font-weight:900; margin:18px 0 8px; color:#14171F; }
.report-paper table.rp-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:8px; }
.report-paper .rp-table th { background:#F2F1EC; color:#14171F; font-weight:800; padding:9px 8px; text-align:right; border-bottom:1px solid #D8D8D2; }
.report-paper .rp-table td { padding:8px; border-bottom:1px solid #ECECE6; vertical-align:top; }
.report-paper .rp-table td.num, .report-paper .rp-table th.num { text-align:left; font-variant-numeric:tabular-nums; white-space:nowrap; }
.report-paper .rp-table td.desc { color:#2A2F3A; }
.report-paper .rp-table td.bal { font-weight:800; }
.report-paper .rp-table td.bal.pos { color:#157A4A; }   /* رصيد ليه (موجب) */
.report-paper .rp-table td.bal.neg { color:#B42318; }   /* رصيد عليه (سالب) */
.report-paper .rp-table tr.opening td, .report-paper .rp-table tr.closing td { background:#FBF7E8; font-weight:800; }
.report-paper .rp-table tfoot td { border-top:2px solid #14171F; }
.report-paper .rp-table .due { font-size:10px; color:#8A6D12; margin-top:2px; }
.report-paper .rp-table .dr { color:#157A4A; font-size:10px; font-weight:800; margin-right:4px; }
.report-paper .rp-table .cr { color:#B42318; font-size:10px; font-weight:800; margin-right:4px; }
.report-paper .empty-row, .report-paper .rp-empty { text-align:center; color:#8A8F98; padding:24px; }
.report-paper .rp-foot { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
    margin-top:20px; padding-top:12px; border-top:1px solid #D8D8D2; font-size:11px; color:#6A6F78; font-weight:700; }
.report-paper .rp-foot-link { color:#5A4A12; text-decoration:none; font-weight:800; white-space:nowrap; }
/* English (LTR) flips number/header alignment */
html.lang-en .report-paper .rp-table th { text-align:left; }
html.lang-en .report-paper .rp-table td.num, html.lang-en .report-paper .rp-table th.num { text-align:right; }
html.lang-en .report-paper .rp-table .dr, html.lang-en .report-paper .rp-table .cr { margin-right:0; margin-left:4px; }

@media print {
    /* خلفية بيضا للصفحة كلها — يمنع ظهور خلفية الـ dark theme السودا تحت التقرير */
    html, body { background:#fff !important; }
    /* display:none (مش visibility) عشان عناصر الـ app ما تاخدش مساحة، فالـ overlay يبقى static بعرض الورقة A4 الحقيقي (مش عرض الشاشة) */
    body > *:not(#report-overlay) { display:none !important; }
    #report-overlay { position:static !important; inset:auto !important; width:auto !important; height:auto !important;
        background:#fff; display:block !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
    .report-toolbar { display:none !important; }
    .report-scroll { overflow:visible; padding:0; display:block; height:auto; }
    /* print-color-adjust: يجبر طباعة الخلفيات والألوان (الهيدر/الصفوف/الـ tags) بدل ما تطلع أبيض */
    .report-paper, .report-paper * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
    .report-paper { box-shadow:none; max-width:none !important; width:auto !important; border-radius:0; padding:0; margin:0; }
    /* table.rp-table بدل .rp-table عشان specificity يغلب قاعدة الشاشة (table.rp-table=13px) */
    .report-paper table.rp-table { font-size:11px; }
    /* fit-one: تصغير حجم خط الجدول فعليًا (من statement.js) ليدخل التقرير ورقة واحدة — الـ padding بالـ em فيتناسب */
    .report-paper.fit-one table.rp-table { font-size: var(--ptf, 11px); }
    .report-paper .rp-table th, .report-paper .rp-table td { padding:0.45em 0.6em; }   /* em = يتناسب مع تصغير الخط */
    .report-paper .rp-table thead { display:table-header-group; }   /* رأس الجدول يتكرر في كل صفحة */
    /* tfoot يفضل table-row-group عشان الإجمالي والرصيد الختامي يظهروا مرة واحدة في الآخر بس (مش آخر كل صفحة) */
    .report-paper .rp-table tfoot { display:table-row-group; }
    .report-paper .rp-table tr { break-inside:avoid; page-break-inside:avoid; }   /* الصف ما يتقطّعش بين صفحتين */
    .report-paper .rp-head, .report-paper .rp-meta, .report-paper .rp-sec, .report-paper .rp-foot { break-inside:avoid; }
    @page { size: A4; margin: 8mm; }
}