/* =====================================================================
   finance.css — shared responsive layout for the finance section (حسابداری)
   Loaded on every finance page AFTER the page's inline <style> so these
   rules win over the old hardcoded 480px single-column layout.

   Breakpoints:  <600px  mobile (single column, stacked)
                600–899  tablet  (single column, wider)
                ≥900px   desktop (multi-column, full page width)
   ===================================================================== */

/* ── Main column (single source of truth for the page width) ── */
.main-content {
    max-width: 480px;
}

@media (min-width: 600px) and (max-width: 899.98px) {
    .main-content {
        max-width: 640px;
    }
}

@media (min-width: 900px) {
    .main-content {
        max-width: 1100px;
        padding-bottom: 100px;
    }

    /* The floating bottom-nav stays available on desktop too; the global
       .main-content padding-bottom: 100px keeps content clear of it. */

    /* Chat stays comfortable on desktop. */
    .chat-container {
        max-width: 800px;
    }
}

/* ── Two-column form grid (add_transaction, add_account, …) ── */
.form-grid {
    display: block;
}

@media (min-width: 900px) {
    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 26px;
        align-items: start;
    }

    .form-grid > .full,
    .form-grid > .col-span-2 {
        grid-column: 1 / -1;
    }

    /* Category / priority chips: fixed-size, centered on desktop. */
    .cat-grid {
        grid-template-columns: repeat(auto-fill, 130px);
        justify-content: center;
    }
}

/* ── Multi-column card lists on desktop ── */
@media (min-width: 900px) {
    /* Accounts are grouped by currency (.account-group wraps the cards). */
    .account-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }

    .account-group .group-header {
        grid-column: 1 / -1;
    }

    .account-group .account-card {
        margin-bottom: 0;
    }

    #goals-container,
    #budget-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }

    #goals-container .goal-card,
    #budget-list .budget-card {
        margin-bottom: 0;
    }

    /* Centered empty-state when only one child is present. */
    #goals-container > :only-child,
    #budget-list > :only-child {
        grid-column: 1 / -1;
    }

    /* Transactions: two columns per day under a full-width header. */
    .date-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    .date-group .date-header {
        grid-column: 1 / -1;
    }

    .date-group .transaction-item,
    .transaction-list .transaction-item {
        margin-bottom: 0;
    }

    /* Dashboard recent transactions. */
    .transaction-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    .transaction-list .section-header {
        grid-column: 1 / -1;
    }

    /* Reports: donut + legend side by side, categories in two columns. */
    .chart-card {
        display: grid;
        grid-template-columns: minmax(0, 380px) 1fr;
        gap: 24px;
        align-items: center;
    }

    .chart-card .chart-title {
        grid-column: 1 / -1;
    }

    #cat-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #cat-list .cat-item {
        margin-bottom: 0;
    }

    /* Settings: two columns of items per group. */
    .settings-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    .settings-group .settings-group-title {
        grid-column: 1 / -1;
    }

    .settings-group .setting-item {
        margin-bottom: 0;
    }
}

/* ── Emoji picker popup (categories) ── */
.fin-egrid {
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    padding: 10px;
}

.fin-emoji {
    padding: 6px 2px;
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 599.98px) {
    .fin-egrid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* =====================================================================
   Green finance theme (fin-skin) — matches dashboard.html & transactions.html
   Opt-in per page: <body class="fin-skin">. Canonical pages (dashboard,
   transactions) keep their own inline palettes and are NOT skinned here.
   Loaded after every page's inline <style>, so these declarations win.
   ===================================================================== */

body.fin-skin {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 0%, rgba(66, 214, 161, .10), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(99, 199, 255, .07), transparent 27%),
        linear-gradient(145deg, var(--fin-bg, var(--ai-bg, var(--pay-bg, var(--rec-bg, var(--bg))))), var(--fin-bg-2, var(--ai-bg-2, var(--pay-bg2, var(--rec-bg2, var(--bg-2))))));
    color: var(--fin-text, var(--ai-text, var(--pay-text, var(--rec-text, #f2f7f4))));
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
[data-theme="light"] body.fin-skin {
    background:
        radial-gradient(circle at 12% 0%, rgba(66, 214, 161, .10), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(99, 199, 255, .07), transparent 27%),
        linear-gradient(145deg, var(--fin-bg, #f3f7f5), var(--fin-bg-2, #eaf2ee));
    color: var(--fin-text, #14221e);
}

/* Legacy main.css tokens, re-pointed to the green finance palette so every
   component that already uses var(--primary)/var(--bg)/… re-skins itself. */
.fin-skin {
    /* accent family */
    --primary:         #42d6a1;
    --primary-dim:     #20a97b;
    --primary-glow:    rgba(66, 214, 161, .28);
    --primary-glass:   rgba(66, 214, 161, .12);
    --primary-glass2:  rgba(66, 214, 161, .06);

    --secondary:       #63c7ff;
    --secondary-glow:  rgba(99, 199, 255, .25);
    --secondary-glass: rgba(99, 199, 255, .08);

    --accent:          #b995ff;
    --accent-glow:     rgba(185, 149, 255, .25);

    /* status colors */
    --ok:     #42d6a1;
    --warn:   #eacb76;
    --danger: #ff7d86;

    /* background layers */
    --bg:   #071310;
    --bg-2: #0b1c18;
    --bg-3: #10251f;

    --surface-glass: rgba(15, 31, 27, .82);
}
[data-theme="light"] .fin-skin {
    --primary:#13966c;
    --primary-dim:#087a58;
    --ok:#13966c;
    --warn:#9c751d;
    --danger:#d94e5b;
    --bg:#f3f7f5;
    --bg-2:#eaf2ee;
    --bg-3:#ffffff;
    --surface-glass:rgba(255,255,255,.88);
}

/* Cohesion extras */
.fin-skin ::selection {
    background: rgba(66, 214, 161, .35);
}

.fin-skin ::-webkit-scrollbar-thumb {
    background: rgba(66, 214, 161, .35);
}

/* Fix RTL/LTR cursor bug: main.css forces direction:ltr on all .form-control,
   which breaks Persian text cursor positioning. Override for finance pages. */
.fin-skin .form-control:not(select):not([dir="ltr"]) {
    direction: rtl;
    text-align: right;
}

.fin-skin input:focus,
.fin-skin select:focus,
.fin-skin textarea:focus {
    border-color: rgba(66, 214, 161, .55) !important;
    box-shadow: 0 0 0 3px rgba(66, 214, 161, .15) !important;
    outline: none !important;
}