/* ==========================================================
   Budget Dashboard
   style.css
   POLISHED LIGHT / DARK UI
========================================================== */


/* ==========================================================
   DARK THEME — BASE TOKENS
   Light is the app default via body.light-mode.
========================================================== */

:root {

    /* Native <select> / date pickers follow this so option lists
       are not white-on-white in dark mode. */
    color-scheme: dark;

    --bg: #0b1120;
    --sidebar: #0f172a;
    --panel: #172033;
    --panel-hover: #1d2940;

    --border: rgba(148, 163, 184, 0.14);
    --border-hover: rgba(148, 163, 184, 0.25);

    --primary: #3b82f6;
    --primary-hover: #2563eb;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --purple: #a855f7;

    --text: #f8fafc;
    --text-muted: #94a3b8;
    --text-soft: #cbd5e1;

    --input-bg: #0d1525;
    --table-header: rgba(255,255,255,0.035);

    --calendar-bg: rgba(23, 32, 51, 0.90);

    --modal-bg: #1b263b;

    --shadow:
        0 10px 35px rgba(0, 0, 0, 0.25);

    --shadow-lg:
        0 20px 60px rgba(0, 0, 0, 0.40);

    --radius: 14px;

    --transition: 0.2s ease;

}


/* ==========================================================
   LIGHT THEME
========================================================== */

body.light-mode {

    color-scheme: light;

    /* Cool near-white page; still enough contrast for white cards */
    --bg: #f4f7fb;

    --sidebar: #ffffff;

    --panel: #ffffff;

    --panel-hover: #f1f5f9;

    --border: rgba(15, 23, 42, 0.16);

    --border-hover: rgba(15, 23, 42, 0.28);

    --primary: #2563eb;

    --primary-hover: #1d4ed8;

    --success: #16a34a;

    --warning: #d97706;

    --danger: #dc2626;

    --purple: #9333ea;

    --text: #0f172a;

    --text-muted: #475569;

    --text-soft: #1e293b;

    --input-bg: #ffffff;

    --table-header: #f4f7fb;

    --calendar-bg: #ffffff;

    --modal-bg: #ffffff;

    --shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px rgba(15, 23, 42, 0.10);

    --shadow-lg:
        0 4px 12px rgba(15, 23, 42, 0.08),
        0 18px 48px rgba(15, 23, 42, 0.14);

}


/* ==========================================================
   RESET
========================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;
    height: 100%;

}


body {

    font-family: 'Inter', sans-serif;

    background:
        radial-gradient(
            circle at top right,
            rgba(59, 130, 246, 0.07),
            transparent 35%
        ),
        var(--bg);

    color: var(--text);

    overflow: hidden;

    transition:
        background 0.25s ease,
        color 0.25s ease;

}



body.light-mode {

    background:
        radial-gradient(
            1100px 520px at 100% -8%,
            rgba(191, 219, 254, 0.18),
            transparent 58%
        ),
        radial-gradient(
            800px 420px at 0% 100%,
            rgba(219, 234, 254, 0.14),
            transparent 52%
        ),
        linear-gradient(
            180deg,
            #fafcfe 0%,
            #f4f7fb 48%,
            #f1f5f9 100%
        );

}


/* ==========================================================
   LAYOUT
========================================================== */

.app {

    display: grid;

    grid-template-columns: 260px 1fr;

    height: 100vh;

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar {

    position: relative;

    background:
        linear-gradient(
            180deg,
            var(--sidebar),
            var(--sidebar)
        );

    border-right: 1px solid var(--border);

    display: flex;

    flex-direction: column;

    min-height: 0;

    padding: 24px 18px;

    overflow: hidden;

    scrollbar-width: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;

}


.sidebar::-webkit-scrollbar {

    display: none;

    width: 0;

    height: 0;

}


/* ==========================================================
   LOGO
========================================================== */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 4px 10px;

    min-width: 0;

}


.sidebar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 22px;

}


.logo i {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(59, 130, 246, 0.14);

    color: var(--primary);

    font-size: 20px;

}



.logo-mark {

    width: 38px;

    height: 38px;

    border-radius: 11px;

    object-fit: cover;

    flex-shrink: 0;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);

}


.logo h1 {

    font-size: 22px;

    font-weight: 700;

    letter-spacing: -0.5px;

    white-space: nowrap;

}


.sidebar-toggle {

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    border: 1px solid transparent;

    border-radius: 8px;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.sidebar-toggle:hover {

    background: rgba(59, 130, 246, 0.10);

    color: var(--text);

    border-color: var(--border);

}


.sidebar-toggle:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 2px;

}


/* ==========================================================
   NAVIGATION
========================================================== */

.sidebar-scroll {

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

    min-height: 0;

    overflow-x: hidden;

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color: #94a3b8 transparent;

    overscroll-behavior: contain;

}


.sidebar-scroll::-webkit-scrollbar {

    display: block;

    width: 8px;

    height: 8px;

}


.sidebar-scroll::-webkit-scrollbar-track {

    background: transparent;

}


.sidebar-scroll::-webkit-scrollbar-thumb {

    background: #94a3b8;

    border-radius: 20px;

}


.sidebar nav {

    display: flex;

    flex-direction: column;

    flex: 1 0 auto;

    min-height: 0;

    gap: 6px;

}


.sidebar-footer {

    margin-top: auto;

    padding-top: 14px;

    border-top: 1px solid var(--border);

    display: flex;

    flex-direction: column;

    flex-shrink: 0;

    gap: 10px;

}


@media (min-width: 951px) {

    .sidebar {

        overflow: visible;

        z-index: 320;

    }


    .sidebar-toggle {

        position: absolute;

        top: 36px;

        right: 0;

        transform: translateX(50%);

        width: 24px;

        height: 24px;

        border-radius: 999px;

        background: var(--sidebar);

        border: 1px solid var(--border);

        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);

        font-size: 11px;

        z-index: 1;

    }


    .sidebar-toggle:hover {

        background: var(--panel-hover);

    }


    html.sidebar-collapsed .app {

        grid-template-columns: 76px 1fr;

    }


    html.sidebar-collapsed .sidebar {

        padding: 18px 8px;

        overflow: visible;

    }


    html.sidebar-collapsed .sidebar-header {

        flex-direction: column;

        align-items: center;

        gap: 10px;

        margin-bottom: 16px;

    }


    html.sidebar-collapsed .sidebar-toggle {

        top: 30px;

    }


    html.sidebar-collapsed .sidebar-scroll {

        overflow-x: hidden;

        overflow-y: auto;

        scrollbar-gutter: auto;

        min-height: 0;

    }


    html.sidebar-collapsed .sidebar-scroll::-webkit-scrollbar {

        width: 6px;

    }


    html.sidebar-collapsed .sidebar-footer {

        overflow: visible;

        flex-shrink: 0;

        background: var(--sidebar);

        z-index: 2;

    }


    html.sidebar-collapsed .logo {

        justify-content: center;

        padding: 4px 0;

    }


    html.sidebar-collapsed .logo h1,
    html.sidebar-collapsed .sidebar .nav-label,
    html.sidebar-collapsed .theme-switch-option span,
    html.sidebar-collapsed .auth-copy {

        display: none;

    }


    html.sidebar-collapsed .auth-user:has([data-auth-avatar][hidden]) {

        display: none;

    }


    html.sidebar-collapsed .nav-btn {

        justify-content: center;

        padding: 12px 0;

        gap: 0;

        transform: none;

    }


    html.sidebar-collapsed .nav-btn:hover {

        transform: none;

    }


    html.sidebar-collapsed .theme-switch {

        grid-template-columns: 1fr;

        gap: 2px;

        padding: 3px;

    }


    html.sidebar-collapsed .theme-switch-option {

        position: relative;

        height: 30px;

        gap: 0;

    }


    html.sidebar-collapsed .auth-btn {

        position: relative;

        padding: 0;

        gap: 0;

    }


    html.sidebar-collapsed .auth-user {

        justify-content: center;

    }


    html.sidebar-collapsed .sidebar nav .nav-btn::after,
    html.sidebar-collapsed .theme-switch-option::after,
    html.sidebar-collapsed .auth-btn::after {

        content: none;

    }


    html.sidebar-collapsed .sidebar-toggle::after {

        content: attr(aria-label);

        position: absolute;

        top: 50%;

        left: calc(100% + 10px);

        transform: translateY(-50%);

        width: max-content;

        max-width: min(240px, 70vw);

        padding: 10px 12px;

        background: #0f172a;

        color: #e2e8f0;

        border: 1px solid rgba(148, 163, 184, 0.22);

        border-radius: 8px;

        font-family: Inter, system-ui, -apple-system, sans-serif;

        font-size: 12px;

        font-weight: 400;

        font-style: normal;

        line-height: 1.5;

        text-align: left;

        text-transform: none;

        letter-spacing: normal;

        white-space: nowrap;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.15s ease,
            visibility 0.15s ease;

        z-index: 4000;

    }


    html.sidebar-collapsed .sidebar-toggle:hover::after,
    html.sidebar-collapsed .sidebar-toggle:focus-visible::after {

        opacity: 1;

        visibility: visible;

    }


    html.sidebar-collapsed body.light-mode .sidebar-toggle::after {

        background: #ffffff;

        color: #334155;

        border-color: rgba(148, 163, 184, 0.35);

        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);

    }

}


.sidebar-rail-tooltip {

    position: fixed;

    z-index: 4000;

    padding: 10px 12px;

    background: #0f172a;

    color: #e2e8f0;

    border: 1px solid rgba(148, 163, 184, 0.22);

    border-radius: 8px;

    font-family: Inter, system-ui, -apple-system, sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.5;

    white-space: nowrap;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);

    pointer-events: none;

    transform: translateY(-50%);

}


body.light-mode .sidebar-rail-tooltip {

    background: #ffffff;

    color: #334155;

    border-color: rgba(148, 163, 184, 0.35);

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);

}


.nav-btn {

    position: relative;

    border: none;

    background: transparent;

    color: var(--text-muted);

    padding: 13px 14px;

    border-radius: 11px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 13px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    text-align: left;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);

}


.nav-btn i {

    width: 20px;

    text-align: center;

    font-size: 15px;

}


.nav-btn:hover {

    background: rgba(59, 130, 246, 0.07);

    color: var(--text);

    transform: translateX(2px);

}


.nav-btn.active {

    background:
        linear-gradient(
            90deg,
            rgba(59, 130, 246, 0.20),
            rgba(59, 130, 246, 0.08)
        );

    color: var(--text);

}


.nav-btn.active::before {

    content: "";

    position: absolute;

    left: 0;

    top: 8px;

    bottom: 8px;

    width: 3px;

    border-radius: 4px;

    background: var(--primary);

}


/* ==========================================================
   MAIN
========================================================== */

.main {

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: 0;

    overflow: hidden;

}


/* ==========================================================
   TOPBAR
========================================================== */

.topbar {

    position: relative;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    min-width: 0;

    min-height: 92px;

    padding: 20px 34px;

    border-bottom: 1px solid var(--border);

    background:
        rgba(11, 17, 32, 0.72);

    backdrop-filter: blur(12px);

    overflow: visible;

    container-type: inline-size;

    container-name: topbar;

    z-index: 300;

}


body.light-mode .topbar {

    background:
        rgba(255, 255, 255, 0.82);

}


.topbar h2 {

    flex: 0 1 auto;

    min-width: 0;

    font-size: 22px;

    font-weight: 650;

    letter-spacing: -0.4px;

}


.topbar-right {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    /* Wrap onto the next row before the profile gear is clipped */
    flex: 1 1 42rem;

    min-width: 0;

    max-width: 100%;

}


/* ==========================================================
   MAIN STATUS ROW (TODAY + BUDGET PERIOD)
========================================================== */

.main-status {

    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    align-items: center;

    gap: 12px;

    min-height: 56px;

    padding: 12px 34px;

    background: var(--panel);

    border-bottom: 1px solid var(--border);

    z-index: 50;

}


/* ==========================================================
   CURRENT DATE
========================================================== */

#currentDate {

    justify-self: start;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 8px 12px;

    color: var(--text-muted);

    font-size: 12px;

    white-space: nowrap;

    box-shadow: none;

}


/* ==========================================================
   THEME SWITCH (sidebar)
========================================================== */

.theme-switch {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4px;

    padding: 4px;

    background: var(--input-bg);

    border: 1px solid var(--border);

    border-radius: 12px;

}


.theme-switch-option {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    height: 32px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition);

}


.theme-switch-option i {

    font-size: 12px;

}


.theme-switch-option:hover {

    color: var(--text);

}


.theme-switch-option:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 2px;

}


.theme-switch-option.is-active {

    background: var(--panel-hover);

    color: var(--text);

    box-shadow:
        inset 0 0 0 1px var(--border-hover),
        0 1px 2px rgba(0, 0, 0, 0.22);

}


.theme-switch-option[data-theme="light"].is-active i {

    color: var(--warning);

}


.theme-switch-option[data-theme="dark"].is-active i {

    color: var(--primary);

}


body.light-mode .theme-switch {

    background: #e8eef5;

    border-color: rgba(15, 23, 42, 0.12);

}


body.light-mode .theme-switch-option.is-active {

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.08);

}


/* ==========================================================
   SCHEDULE / PROFILE CONTROLS
========================================================== */

.schedule-selector,
.profile-selector {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    max-width: 100%;

    background:
        var(--panel);

    border: 1px solid var(--border);

    border-radius: 11px;

    padding: 8px 10px;

    transition:
        border-color var(--transition),
        background var(--transition);

}


.schedule-selector:hover,
.profile-selector:hover {

    border-color: var(--border-hover);

    background: var(--panel-hover);

}


.schedule-selector label,
.profile-selector label {

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}


.schedule-selector select,
.schedule-selector input[type="date"],
.profile-selector select {

    background: var(--input-bg);

    color: var(--text);

    border: 1px solid var(--border);

    border-radius: 7px;

    padding: 7px 10px;

    font-size: 12px;

    font-family: inherit;

    cursor: pointer;

    outline: none;

    transition:
        border-color var(--transition);

}


.schedule-selector select:focus,
.schedule-selector input[type="date"]:focus,
.profile-selector select:focus {

    border-color: var(--primary);

}


/* ==========================================================
   PROFILE CONTROLS
========================================================== */

.profile-controls {

    display: flex;

    flex-wrap: nowrap;

    align-items: center;

    gap: 5px;

    min-width: 0;

    flex: 1 1 auto;

}


.profile-controls select {

    min-width: 0;

    flex: 1 1 7rem;

    width: auto;

    max-width: 100%;

}


.profile-manage-btn {

    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    border: 1px solid var(--border);

    border-radius: 7px;

    background: rgba(128,128,128,0.06);

    color: var(--text-muted);

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);

}


.profile-manage-btn:hover {

    background: rgba(128,128,128,0.12);

    color: var(--text);

    transform: rotate(20deg);

}


/* ==========================================================
   CURRENT BUDGET PERIOD
========================================================== */

.budget-period {

    position: relative;

    grid-column: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    background: rgba(59,130,246,0.10);

    border: 1px solid rgba(59,130,246,0.28);

    border-radius: 10px;

    color: var(--text-muted);

    font-size: 12px;

    white-space: nowrap;

    box-shadow: none;

    z-index: 2;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}


.budget-period.is-actionable {

    cursor: pointer;

    border-color: rgba(59, 130, 246, 0.45);

}


.budget-period.is-actionable:hover,
.budget-period.is-actionable:focus-visible {

    background: rgba(59,130,246,0.16);

    border-color: var(--primary);

    color: var(--text);

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px rgba(59, 130, 246, 0.16);

    outline: none;

}


.budget-period i {

    color: var(--primary);

}


.budget-period span {

    color: var(--text-muted);

    font-weight: 600;

}


.budget-period strong {

    color: var(--text);

    font-weight: 700;

}


/* ==========================================================
   PAGES
========================================================== */

.page {

    display: none;

    overflow: auto;

    padding: 28px 34px 34px;

    flex: 1;

    min-height: 0;

}


.page.active {

    display: block;

}


/* ==========================================================
   PAGE HEADER
========================================================== */

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    margin-bottom: 22px;

}


.page-header h3 {

    font-size: 20px;

    font-weight: 650;

    letter-spacing: -0.3px;

}


.page-header-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    justify-content: flex-end;

}


.sort-selector {

    display: flex;

    align-items: center;

    gap: 8px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 9px;

    padding: 6px 10px;

}


.sort-selector label {

    font-size: 11px;

    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    color: var(--text-muted);

    white-space: nowrap;

}


.sort-selector select {

    border: none;

    background: transparent;

    color: var(--text);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    outline: none;

    min-width: 160px;

}


/* Native dropdown popups inherit `color` from <select> but often keep a
   light OS background. color-scheme plus option tokens keep the Recurring
   Payments sort menu (and other selects) readable in both themes. */
select,
input,
textarea {

    color-scheme: dark;

}


body.light-mode select,
body.light-mode input,
body.light-mode textarea {

    color-scheme: light;

}


select option {

    background-color: var(--panel);

    color: var(--text);

}


/* ==========================================================
   BUTTONS
========================================================== */

.primary-btn,
.secondary-btn {

    border: none;

    padding: 10px 17px;

    border-radius: 9px;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);

}


.primary-btn {

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    color: white;

    box-shadow:
        0 5px 16px rgba(37, 99, 235, 0.18);

}


.primary-btn:hover {

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb
        );

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.28);

}


.secondary-btn {

    background: rgba(148,163,184,0.14);

    color: var(--text);

    border: 1px solid rgba(148,163,184,0.40);

}


.secondary-btn:hover {

    background: rgba(148,163,184,0.22);

    border-color: rgba(148,163,184,0.55);

    transform: translateY(-1px);

}


.cancel-btn,
#cancelSavingsGoalBtn,
#cancelSavingsProgressBtn,
#cancelBtn,
#cancelCreateProfileBtn,
#closeProfileModalBtn {

    background: rgba(245,158,11,0.14);

    color: #fbbf24;

    border: 1px solid rgba(245,158,11,0.40);

}


.cancel-btn:hover,
#cancelSavingsGoalBtn:hover,
#cancelSavingsProgressBtn:hover,
#cancelBtn:hover,
#cancelCreateProfileBtn:hover,
#closeProfileModalBtn:hover {

    background: rgba(245,158,11,0.22);

    border-color: rgba(245,158,11,0.55);

    color: #fcd34d;

    transform: translateY(-1px);

}


body.light-mode .cancel-btn,
body.light-mode #cancelSavingsGoalBtn,
body.light-mode #cancelSavingsProgressBtn,
body.light-mode #cancelBtn,
body.light-mode #cancelCreateProfileBtn,
body.light-mode #closeProfileModalBtn {

    background: rgba(245,158,11,0.12);

    color: #d97706;

    border-color: rgba(217,119,6,0.35);

}


/* ==========================================================
   DASHBOARD CARDS
========================================================== */

.dashboard-cards {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 24px;

}


.card {

    position: relative;

    background:
        var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 22px;

    min-height: 130px;

    box-shadow: var(--shadow);

    overflow: hidden;

    transition:
        transform var(--transition),
        border-color var(--transition),
        background var(--transition);

}


/* ==========================================================
   LIGHT MODE — stronger surfaces (cards / tables / panels)
========================================================== */

body.light-mode .card,
body.light-mode .panel,
body.light-mode .data-table,
body.light-mode .savings-form-card,
body.light-mode .savings-goal-card,
body.light-mode .savings-empty,
body.light-mode .modal,
body.light-mode .calendar-day,
body.light-mode .forecast-day,
body.light-mode .calendar-header button,
body.light-mode .savings-preview-item {

    border-color: rgba(148, 163, 184, 0.35);

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 28px rgba(15, 23, 42, 0.06);

}



body.light-mode .card:hover,
body.light-mode .panel:hover {

    border-color: rgba(15, 23, 42, 0.26);

    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 12px 28px rgba(15, 23, 42, 0.12);

}



body.light-mode .data-table th {

    background: var(--table-header);

    color: #475569;

    border-bottom: 1px solid rgba(148, 163, 184, 0.35);

}



body.light-mode .data-table td {

    color: #1e293b;

    border-top-color: rgba(15, 23, 42, 0.10);

}



body.light-mode .data-table tbody tr:nth-child(even) {

    background: rgba(15, 23, 42, 0.025);

}



body.light-mode .data-table tbody tr:hover {

    background: rgba(37, 99, 235, 0.07);

}



body.light-mode .payment-item {

    border-bottom-color: rgba(15, 23, 42, 0.12);

}



body.light-mode .sidebar {

    border-right-color: rgba(15, 23, 42, 0.14);

    box-shadow:
        4px 0 24px rgba(15, 23, 42, 0.06);

}



body.light-mode .topbar {

    border-bottom-color: rgba(15, 23, 42, 0.14);

    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.04),
        0 8px 20px rgba(15, 23, 42, 0.05);

}



body.light-mode input,
body.light-mode select,
body.light-mode textarea {

    border-color: rgba(15, 23, 42, 0.18);

    background: #ffffff;

}



body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {

    border-color: rgba(37, 99, 235, 0.55);

}


.card:hover {

    transform: translateY(-2px);

    border-color: var(--border-hover);

}


.card h3 {

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 12px;

}


.card h2 {

    font-size: 28px;

    font-weight: 700;

    letter-spacing: -0.8px;

}


/* ==========================================================
   DASHBOARD PANEL
========================================================== */

.panel {

    background:
        var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 22px;

    box-shadow: var(--shadow);

}


.panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}


.panel-header h3 {

    font-size: 16px;

    font-weight: 650;

}


/* ==========================================================
   UPCOMING FORECAST
========================================================== */

.upcoming-panel {

    padding: 16px 18px 14px;

}


.upcoming-view-controls {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 10px;

    min-width: 0;

}


.upcoming-view-switch {

    display: grid;

    grid-template-columns: repeat(3, auto);

    gap: 3px;

    padding: 3px;

    background: var(--input-bg);

    border: 1px solid var(--border);

    border-radius: 10px;

}


.upcoming-view-option {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    height: 30px;

    padding: 0 10px;

    border: none;

    border-radius: 7px;

    background: transparent;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition);

}


.upcoming-view-option i {

    font-size: 11px;

}


.upcoming-view-option:hover {

    color: var(--text);

}


.upcoming-view-option:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 2px;

}


.upcoming-view-option.is-active {

    background: var(--panel-hover);

    color: var(--text);

    box-shadow:
        inset 0 0 0 1px var(--border-hover),
        0 1px 2px rgba(0, 0, 0, 0.22);

}


body.light-mode .upcoming-view-switch {

    background: #e8eef5;

    border-color: rgba(15, 23, 42, 0.12);

}


body.light-mode .upcoming-view-option.is-active {

    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.08);

}


.upcoming-panel[data-view="list"] .forecast-strip,
.upcoming-panel[data-view="list"] .forecast-calendar-link,
.upcoming-panel[data-view="list"] #forecastSummary {

    display: none;

}


.upcoming-panel[data-view^="forecast"] .upcoming-payments-table,
.upcoming-panel[data-view^="forecast"] .payments-paid-summary,
.upcoming-panel[data-view^="forecast"] .upcoming-payments-tools {

    display: none;

}


.forecast-header {

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 10px;

}


.forecast-title {

    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;

}


.forecast-title h3 {

    font-size: 16px;

}


.forecast-title small {

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 500;

}


.forecast-calendar-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-left: auto;

    padding: 4px 2px;

    border: none;

    background: none;

    color: var(--primary);

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition:
        color var(--transition),
        transform var(--transition);

}


.forecast-calendar-link:hover {

    color: var(--primary-hover);

    transform: translateX(2px);

}


.upcoming-view-controls .forecast-calendar-link {

    margin-left: 0;

}


.upcoming-payments-tools {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap: 8px;

    margin: 2px 0 6px;

    min-width: 0;

}


.upcoming-bank-check-launch {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-width: 0;

}


.upcoming-bank-check-launch[hidden] {

    display: none;

}


.upcoming-bank-check-toggle {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    height: 30px;

    padding: 0 11px;

    border: 1px solid rgba(59, 130, 246, 0.30);

    border-radius: 8px;

    background: rgba(59, 130, 246, 0.10);

    color: var(--text);

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    white-space: nowrap;

    box-shadow: none;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);

}


.upcoming-bank-check-toggle i {

    font-size: 11px;

    color: #3b82f6;

}


.upcoming-bank-check-toggle:hover {

    background: rgba(59, 130, 246, 0.16);

    border-color: rgba(59, 130, 246, 0.45);

    color: var(--text);

}


.upcoming-bank-check-toggle:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 2px;

}


body.light-mode .upcoming-bank-check-toggle {

    background: rgba(37, 99, 235, 0.08);

    border-color: rgba(37, 99, 235, 0.24);

    color: var(--text);

}


body.light-mode .upcoming-bank-check-toggle i {

    color: #2563eb;

}


body.light-mode .upcoming-bank-check-toggle:hover {

    background: rgba(37, 99, 235, 0.13);

    border-color: rgba(37, 99, 235, 0.38);

}


.forecast-strip {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 6px;

}


.forecast-day {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

    min-height: 0;

    padding: 8px 7px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--calendar-bg);

    overflow: hidden;

    transition:
        border-color var(--transition),
        background var(--transition);

}

.forecast-day:hover {

    border-color: var(--border-hover);

    background:
        var(--panel-hover);

}

.forecast-event:focus-visible {

    outline: 2px solid rgba(255, 255, 255, 0.85);

    outline-offset: 1px;

}


.forecast-day.is-today {

    border-color: rgba(59, 130, 246, 0.55);

    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.22);

}


.forecast-day.has-income:not(.is-today) {

    border-color: rgba(34, 197, 94, 0.38);

}


.forecast-weekday {

    display: block;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--text-muted);

}


.forecast-date {

    display: block;

    margin-top: 1px;

    font-size: 13px;

    font-weight: 700;

    color: var(--text);

}


.forecast-net {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: -0.02em;

    color: var(--text-soft);

}


.forecast-net.is-in {

    color: var(--success);

}


.forecast-net.is-out {

    color: var(--danger);

}


.forecast-net.is-clear {

    color: var(--text-muted);

    font-weight: 600;

}


.forecast-events {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}


.forecast-event {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 6px;

    width: 100%;

    margin-top: 0;

    border: none;

    font-family: inherit;

    text-align: left;

    color: inherit;

    appearance: none;

    -webkit-appearance: none;

    white-space: nowrap;

    cursor: pointer;

    padding: 3px 5px;

    font-size: 10px;

    border-radius: 5px;

}


.forecast-event-name {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

}


.forecast-event-amount {

    flex-shrink: 0;

    font-size: 9px;

    font-weight: 700;

    opacity: 0.95;

}


.forecast-more {

    margin-top: 2px;

    padding: 0;

    border: none;

    background: none;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 10px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

}


.forecast-more:hover {

    color: var(--primary);

}


.forecast-clear {

    margin-top: auto;

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 600;

}


body.light-mode .forecast-day.is-today {

    border-color: rgba(37, 99, 235, 0.45);

    box-shadow:
        0 0 0 1px rgba(37, 99, 235, 0.16);

}


/* ==========================================================
   UPCOMING PAYMENTS
========================================================== */

.payment-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 4px;

    border-bottom: 1px solid var(--border);

    transition:
        padding-left var(--transition),
        background var(--transition);

}


.payment-item:hover {

    padding-left: 8px;

}


.payment-item:last-child {

    border-bottom: none;

}


.payment-status {

    font-size: 12px;

    font-weight: 600;

}


.status-good {

    color: var(--success);

}


.status-warning {

    color: var(--warning);

}


.status-danger {

    color: var(--danger);

}


/* ==========================================================
   TABLE
========================================================== */

.data-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    background:
        var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

}


.data-table th {

    background:
        var(--table-header);

    color: var(--text-muted);

    text-align: left;

    padding: 15px 18px;

    font-size: 11px;

    font-weight: 650;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border-bottom: 1px solid var(--border);

}


.data-table td {

    padding: 16px 18px;

    border-top: 1px solid var(--border);

    font-size: 13px;

    color: var(--text-soft);

}


.data-table tbody tr {

    transition:
        background var(--transition);

}


.data-table tbody tr:hover {

    background:
        rgba(59,130,246,0.035);

}


.data-table tbody tr:first-child td {

    border-top: none;

}


#paymentsTable tbody tr[data-payment-id] {

    cursor: grab;

}



#paymentsTable tbody tr[data-payment-id]:active {

    cursor: grabbing;

}



.data-table tbody tr.dragging {

    opacity: 0.45;

}


.data-table tbody tr.drag-over {

    background: rgba(59,130,246,0.08);

}


.data-table tbody tr.drag-over td {

    box-shadow: inset 0 2px 0 var(--primary);

}


#paymentsTable tbody tr {

    cursor: default;

}


/* ==========================================================
   ACTION BUTTONS
========================================================== */

.row-actions,
.savings-goal-actions,
.profile-management-actions {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}


.data-table td:last-child {

    width: 1%;

    white-space: nowrap;

}


.action-btn {

    width: 34px;

    height: 34px;

    padding: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 10px;

    background: var(--panel-hover);

    color: var(--text-muted);

    cursor: pointer;

    font-size: 13px;

    line-height: 1;

    box-shadow: none;

    margin: 0;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition),
        filter var(--transition),
        box-shadow var(--transition);

}


.action-btn i {

    pointer-events: none;

    color: inherit;

}


.action-btn:hover {

    transform: translateY(-1px);

    filter: brightness(1.08);

    box-shadow:
        0 8px 18px rgba(0,0,0,0.18);

}


.action-btn:active {

    transform: translateY(0);

    filter: brightness(0.96);

}


.action-btn.edit-btn {

    background: #3b82f6;

    color: #ffffff;

}


.action-btn.edit-btn:hover,
.action-btn.edit-btn:focus-visible {

    background: #2563eb;

    color: #ffffff;

    outline: none;

}


.action-btn.delete-btn {

    background: #ef4444;

    color: #ffffff;

}


.action-btn.delete-btn:hover,
.action-btn.delete-btn:focus-visible {

    background: #dc2626;

    color: #ffffff;

    outline: none;

}


.action-btn.paid-btn {

    background: #22c55e;

    color: #ffffff;

}


.action-btn.paid-btn:hover,
.action-btn.paid-btn:focus-visible {

    background: #16a34a;

    color: #ffffff;

    outline: none;

}


body.light-mode .action-btn.edit-btn {

    background: #3b82f6;

    color: #ffffff;

}


body.light-mode .action-btn.delete-btn {

    background: #ef4444;

    color: #ffffff;

}


body.light-mode .action-btn.paid-btn {

    background: #22c55e;

    color: #ffffff;

}


/* ==========================================================
   CALENDAR
========================================================== */

.calendar-header {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-bottom: 20px;

}


.calendar-header h2 {

    min-width: 180px;

    text-align: center;

    font-size: 19px;

}


.calendar-header button {

    width: 38px;
    height: 38px;

    border: 1px solid var(--border);

    border-radius: 9px;

    background: var(--panel);

    color: var(--text);

    cursor: pointer;

    transition:
        background var(--transition),
        transform var(--transition);

}


.calendar-header button:hover {

    background: var(--panel-hover);

    transform: translateY(-1px);

}


.calendar-grid {

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 9px;

}


.calendar-day {

    min-height: 125px;

    background:
        var(--calendar-bg);

    border: 1px solid var(--border);

    border-radius: 11px;

    padding: 10px;

    transition:
        border-color var(--transition),
        background var(--transition);

}


.calendar-day:hover {

    border-color: var(--border-hover);

    background:
        var(--panel-hover);

}


.calendar-number {

    font-size: 13px;

    font-weight: 700;

    color: var(--text-soft);

    margin-bottom: 7px;

}


.calendar-event {

    font-size: 11px;

    padding: 5px 7px;

    border-radius: 6px;

    margin-top: 5px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-weight: 500;

}


.calendar-event.income-event {

    background:
        rgba(34,197,94,0.85);

    color: white;

}


.calendar-event.payment-event {

    background:
        rgba(239,68,68,0.85);

    color: white;

}


.calendar-event.oneoff-event {

    background:
        rgba(168,85,247,0.85);

    color: white;

}


.calendar-event.savings-event {

    background:
        rgba(14,165,233,0.9);

    color: white;

}


.forecast-event.calendar-event {

    margin-top: 0;

    padding: 3px 5px;

    border-radius: 5px;

    font-size: 10px;

}


/* ==========================================================
   SAVINGS CALCULATOR
========================================================== */

.savings-form-card {

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 20px;

    margin-bottom: 22px;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.06);

}


.savings-form-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;

}


.savings-form-header h4 {

    font-size: 16px;

    font-weight: 650;

}


.savings-form-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

}


.checkbox-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 16px 0 18px;

    color: var(--text);

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    user-select: none;

}


.checkbox-row input[type="checkbox"] {

    width: 16px;

    height: 16px;

    accent-color: var(--primary);

    cursor: pointer;

}


.savings-preview {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 18px;

}


.savings-preview-item {

    background: var(--panel-hover);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 14px;

}


.savings-preview-item span {

    display: block;

    color: var(--text-muted);

    font-size: 12px;

    margin-bottom: 6px;

}


.savings-preview-item strong {

    font-size: 18px;

    font-weight: 700;

    color: var(--text);

}


.savings-empty {

    text-align: center;

    padding: 48px 20px;

    background: var(--panel);

    border: 1px dashed var(--border);

    border-radius: 14px;

    color: var(--text-muted);

}


.savings-empty i {

    font-size: 28px;

    color: var(--primary);

    margin-bottom: 12px;

}


.savings-empty h4 {

    color: var(--text);

    font-size: 16px;

    margin-bottom: 8px;

}


.savings-empty p {

    max-width: 420px;

    margin: 0 auto;

    line-height: 1.5;

    font-size: 13px;

}


.savings-goals-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 16px;

}


.savings-goal-card {

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 18px;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.05);

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.savings-goal-top {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    align-items: flex-start;

}


.savings-goal-top h4 {

    font-size: 16px;

    font-weight: 650;

    color: var(--text);

}


.savings-goal-actions {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}


.savings-goal-meta {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}


.savings-goal-meta div {

    background: var(--panel-hover);

    border-radius: 10px;

    padding: 10px 12px;

}


.savings-goal-meta span {

    display: block;

    font-size: 11px;

    color: var(--text-muted);

    margin-bottom: 4px;

}


.savings-goal-meta strong {

    font-size: 14px;

    color: var(--text);

}


.savings-goal-highlight {

    border: 1px solid rgba(14,165,233,0.25);

    background: rgba(14,165,233,0.08);

    border-radius: 12px;

    padding: 12px 14px;

}


.savings-goal-highlight span {

    display: block;

    font-size: 12px;

    color: var(--text-muted);

    margin-bottom: 4px;

}


.savings-goal-highlight strong {

    font-size: 20px;

    color: rgb(14,165,233);

}


.savings-goal-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    width: fit-content;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 600;

}


.savings-goal-badge.is-included {

    background: rgba(14,165,233,0.15);

    color: rgb(2,132,199);

}


.savings-goal-badge.is-tracker {

    background: rgba(148,163,184,0.18);

    color: var(--text-muted);

}


@media (max-width: 900px) {

    .savings-form-grid,
    .savings-preview {

        grid-template-columns: 1fr;

    }

}


/* ==========================================================
   PAY CALCULATOR
========================================================== */

.paycalc-intro {

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.55;

    max-width: 760px;

    margin: -8px 0 16px;

}


.paycalc-country-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0 0 20px;

}


.paycalc-country-btn {

    border: 1px solid var(--border);

    background: transparent;

    color: var(--text-muted);

    border-radius: 999px;

    padding: 8px 14px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 650;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.paycalc-country-btn:hover {

    color: var(--text);

    border-color: var(--border-hover);

}


.paycalc-country-btn.active {

    background: rgba(59,130,246,0.14);

    border-color: rgba(59,130,246,0.35);

    color: var(--primary);

    box-shadow: 0 0 0 1px rgba(59,130,246,0.12);

}


.paycalc-layout {

    display: grid;

    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);

    gap: 18px;

    align-items: start;

}


.paycalc-card {

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 20px;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.06);

}


.paycalc-card h4 {

    font-size: 16px;

    font-weight: 650;

    margin-bottom: 16px;

}


.paycalc-form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

}


.paycalc-options {

    margin-top: 8px;

}


.paycalc-nested-options {

    margin: 4px 0 8px 26px;

    padding: 12px 14px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: var(--panel-hover);

}


.paycalc-field-hint {

    display: block;

    margin-top: 6px;

    font-size: 11px;

    line-height: 1.4;

    color: var(--text-muted);

}


.paycalc-note {

    margin-top: 14px;

    font-size: 12px;

    color: var(--text-muted);

    line-height: 1.45;

}


.paycalc-results-header {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 16px;

}


.paycalc-results-header h4 {

    margin-bottom: 0;

}


.paycalc-period-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.paycalc-period-btn {

    border: 1px solid var(--border);

    background: transparent;

    color: var(--text-muted);

    border-radius: 999px;

    padding: 6px 11px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.paycalc-period-btn:hover {

    color: var(--text);

    border-color: var(--border-hover);

}


.paycalc-period-btn.active {

    background: rgba(59,130,246,0.14);

    border-color: rgba(59,130,246,0.35);

    color: var(--primary);

}


.paycalc-net {

    background: rgba(34,197,94,0.10);

    border: 1px solid rgba(34,197,94,0.22);

    border-radius: 14px;

    padding: 18px;

    margin-bottom: 16px;

}


.paycalc-net span {

    display: block;

    font-size: 12px;

    color: var(--text-muted);

    margin-bottom: 6px;

}


.paycalc-net strong {

    font-size: 32px;

    font-weight: 750;

    color: rgb(22,163,74);

    letter-spacing: -0.6px;

}


.paycalc-breakdown {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.paycalc-row {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    font-size: 13px;

    color: var(--text-soft);

}


.paycalc-row strong {

    color: var(--text);

    font-weight: 650;

}


.paycalc-row.is-deduction strong {

    color: rgb(239,68,68);

}


.paycalc-row.is-total {

    margin-top: 4px;

    padding-top: 12px;

    border-top: 1px solid var(--border);

    font-weight: 650;

}


.paycalc-employer-box {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-top: 14px;

    padding: 12px 14px;

    border-radius: 12px;

    background: rgba(14,165,233,0.08);

    border: 1px solid rgba(14,165,233,0.2);

    color: var(--text-soft);

    font-size: 13px;

}


.paycalc-employer-box strong {

    color: rgb(2,132,199);

}


.paycalc-summary-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 16px;

}


.paycalc-summary-grid div {

    background: var(--panel-hover);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 12px 14px;

}


.paycalc-summary-grid span {

    display: block;

    font-size: 11px;

    color: var(--text-muted);

    margin-bottom: 5px;

}


.paycalc-summary-grid strong {

    font-size: 16px;

    color: var(--text);

}


@media (max-width: 900px) {

    .paycalc-layout,
    .paycalc-form-grid,
    .paycalc-summary-grid {

        grid-template-columns: 1fr;

    }

}


/* ==========================================================
   MODAL
========================================================== */

.modal {

    position: fixed;

    inset: 0;

    background:
        rgba(2,6,23,0.72);

    backdrop-filter: blur(5px);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999;

    padding: 20px;

}


/* Layout rules further down the file would otherwise re-show
   elements that JS hides, so both switches win over display. */
.hidden,
[hidden] {

    display: none !important;

}


.modal.hidden {

    display: none;

}


.modal-content {

    width: 450px;

    max-width: 100%;

    background:
        var(--modal-bg);

    border-radius: 17px;

    padding: 28px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-lg);

    animation:
        modalIn 0.18s ease;

}


body.light-mode .modal {

    background:
        rgba(15,23,42,0.30);

}


@keyframes modalIn {

    from {

        opacity: 0;

        transform: translateY(8px) scale(0.98);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}


.modal-content h2 {

    margin-bottom: 24px;

    font-size: 20px;

}


/* ==========================================================
   FORM
========================================================== */

.form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 17px;

}


.form-group label {

    margin-bottom: 7px;

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 600;

}


.form-group input,
.form-group select,
.form-group textarea {

    background: var(--input-bg);

    color: var(--text);

    border: 1px solid var(--border);

    border-radius: 9px;

    padding: 11px;

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(59,130,246,0.10);

}


.modal-buttons {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 9px;

    margin-top: 25px;

}


.modal-content .admin-status {

    margin: 12px 0 0;

    padding: 0;

    border: none;

}


/* ==========================================================
   DELETE MODAL BUTTON
========================================================== */

.delete-modal-btn {

    background: transparent;

    color: var(--danger);

    border: 1px solid rgba(239,68,68,0.30);

    padding: 9px 14px;

    border-radius: 8px;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    transition:
        background var(--transition),
        border-color var(--transition);

}


.delete-modal-btn:hover {

    background:
        rgba(239,68,68,0.10);

    border-color:
        rgba(239,68,68,0.65);

}


.confirm-modal {

    z-index: 1100;

}


.confirm-modal-copy {

    margin: 8px 0 0;

    font-size: 14px;

    line-height: 1.5;

    color: var(--text-soft);

}


.confirm-modal-delete {

    min-width: 88px;

    padding: 9px 14px;

    border-radius: 8px;

    border: 1px solid rgba(239, 68, 68, 0.45);

    background: rgba(239, 68, 68, 0.16);

    color: #fca5a5;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);

}


.confirm-modal-delete:hover {

    background: rgba(239, 68, 68, 0.28);

    border-color: rgba(239, 68, 68, 0.7);

    color: #fecaca;

}


body.light-mode .confirm-modal-delete {

    background: rgba(239, 68, 68, 0.10);

    border-color: rgba(185, 28, 28, 0.35);

    color: #b91c1c;

}


body.light-mode .confirm-modal-delete:hover {

    background: rgba(239, 68, 68, 0.16);

    border-color: rgba(185, 28, 28, 0.55);

    color: #991b1b;

}


/* ==========================================================
   PROFILE MANAGEMENT
========================================================== */

.profile-modal-content {

    width: min(500px,90vw);

}


.profile-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 20px 0;

}


.profile-management-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 14px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background:
        rgba(128,128,128,0.035);

    transition:
        background var(--transition),
        border-color var(--transition);

}


.profile-management-row:hover {

    background:
        rgba(59,130,246,0.04);

    border-color: var(--border-hover);

}


.profile-management-name {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

}


.profile-management-name span {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.profile-management-name small {

    padding: 3px 7px;

    border-radius: 6px;

    font-size: 10px;

    background:
        rgba(128,128,128,0.10);

    color: var(--text-muted);

}


.profile-management-actions {

    display: flex;

    gap: 6px;

}


.profile-create-section {

    margin-top: 10px;

    padding-top: 15px;

    border-top: 1px solid var(--border);

}


.profile-create-section .primary-btn {

    width: 100%;

}


/* ==========================================================
   PROFILE CREATION
========================================================== */

.profile-payday-options {

    display: flex;

    gap: 8px;

}


.profile-option-btn {

    flex: 1;

    padding: 10px 16px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background:
        rgba(128,128,128,0.035);

    color: var(--text);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition);

}


.profile-option-btn:hover {

    border-color: var(--primary);

}


.profile-option-btn.active {

    background:
        rgba(59,130,246,0.16);

    border-color: var(--primary);

    color: var(--text);

}


/* ==========================================================
   TOOLTIPS
========================================================== */

.tooltip {

    position: relative;

    display: inline-flex;

    align-items: center;

    margin-left: 4px;

    cursor: help;

    text-transform: none;

    letter-spacing: normal;

    font-weight: 400;

}


.tooltip > i {

    font-size: 12px;

    opacity: 0.7;

    color: var(--text-muted);

}


.tooltip-text,
.schedule-selector .tooltip-text,
.profile-selector .tooltip-text,
.form-group .tooltip-text,
label .tooltip-text,
.checkbox-row .tooltip-text {

    position: absolute;

    bottom: calc(100% + 8px);

    left: 50%;

    transform: translateX(-50%);

    width: 240px;

    max-width: min(240px, 70vw);

    padding: 10px 12px;

    background: #0f172a;

    color: #e2e8f0;

    border: 1px solid rgba(148,163,184,0.22);

    border-radius: 8px;

    font-family: Inter, system-ui, -apple-system, sans-serif;

    font-size: 12px;

    font-weight: 400;

    font-style: normal;

    line-height: 1.5;

    text-align: left;

    text-transform: none;

    letter-spacing: normal;

    white-space: normal;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.28);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;

    z-index: 4000;

}


body.light-mode .tooltip-text,
body.light-mode .schedule-selector .tooltip-text,
body.light-mode .profile-selector .tooltip-text,
body.light-mode .form-group .tooltip-text,
body.light-mode label .tooltip-text,
body.light-mode .checkbox-row .tooltip-text {

    background: #ffffff;

    color: #334155;

    border-color: rgba(148,163,184,0.35);

    box-shadow:
        0 12px 30px rgba(15,23,42,0.12);

}



.tooltip:hover .tooltip-text,
.tooltip:focus-within .tooltip-text {

    opacity: 1;

    visibility: visible;

}


/* Smart placement modifiers (set by JS) */

.tooltip.tooltip-bottom .tooltip-text {

    top: calc(100% + 8px);

    bottom: auto;

}


.tooltip.tooltip-left .tooltip-text {

    left: auto;

    right: 0;

    transform: none;

}


.tooltip.tooltip-right .tooltip-text {

    left: 0;

    transform: none;

}


.tooltip.tooltip-bottom.tooltip-left .tooltip-text,
.tooltip.tooltip-bottom.tooltip-right .tooltip-text {

    top: calc(100% + 8px);

    bottom: auto;

}


/* ==========================================================
   CALENDAR ADD MENU
========================================================== */

.calendar-add-menu {

    position: fixed;

    z-index: 5000;

    width: 220px;

    padding: 8px;

    background:
        var(--panel);

    border: 1px solid var(--border);

    border-radius: 10px;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.25);

    display: flex;

    flex-direction: column;

    gap: 4px;

    backdrop-filter: blur(12px);

}


.calendar-add-menu.hidden {

    display: none;

}


.calendar-add-title {

    padding: 8px 10px 10px;

    color: var(--text-soft);

    font-size: 11px;

    font-weight: 650;

    border-bottom: 1px solid var(--border);

    margin-bottom: 4px;

}


.calendar-add-menu button {

    width: 100%;

    border: none;

    background: transparent;

    color: var(--text-soft);

    padding: 9px 10px;

    border-radius: 7px;

    text-align: left;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 10px;

    transition:
        background var(--transition);

}


.calendar-add-menu button:hover {

    background:
        rgba(59,130,246,0.07);

}


.calendar-add-menu button i {

    width: 16px;

    text-align: center;

    opacity: 0.8;

}


.calendar-add-menu .calendar-add-cancel {

    margin-top: 4px;

    border-top: 1px solid var(--border);

    border-radius: 0;

    color: var(--text-muted);

    padding-top: 10px;

}


/* ==========================================================
   PAID COLUMN + STATUS
========================================================== */

#paymentsTable tr.is-paid td {

    opacity: 0.78;

}


.paid-status-btn {

    min-width: 88px;

    height: 32px;

    padding: 0 12px;

    border: 1.5px solid transparent;

    border-radius: 999px;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.2px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

}



/* Unpaid: outlined CTA — readable in both themes */

.paid-status-btn.is-unpaid {

    background: rgba(34, 197, 94, 0.12);

    border-color: #22c55e;

    color: #86efac;

}



.paid-status-btn.is-unpaid:hover {

    background: #22c55e;

    border-color: #22c55e;

    color: #fff;

    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);

    transform: translateY(-1px);

}



/* Paid: solid filled chip */

.paid-status-btn.is-paid {

    background: #16a34a;

    border-color: #15803d;

    color: #fff;

    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);

}



.paid-status-btn.is-paid:hover {

    background: #15803d;

    border-color: #166534;

}



/* Light mode: stronger contrast so Mark paid is not washed out */

body.light-mode .paid-status-btn.is-unpaid {

    background: #ecfdf5;

    border-color: #15803d;

    color: #14532d;

    box-shadow: 0 1px 2px rgba(20, 83, 45, 0.12);

}



body.light-mode .paid-status-btn.is-unpaid:hover {

    background: #16a34a;

    border-color: #15803d;

    color: #fff;

    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);

}



body.light-mode .paid-status-btn.is-paid {

    background: #15803d;

    border-color: #166534;

    color: #fff;

}



body.light-mode .paid-status-btn.is-paid:hover {

    background: #166534;

    border-color: #14532d;

}

.payments-paid-summary {

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 600;

}



.upcoming-payments-header {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    align-items: center;

    column-gap: 12px;

    row-gap: 10px;

}



.upcoming-payments-header h3 {

    grid-column: 1;

    justify-self: start;

    min-width: 0;

}



.upcoming-payments-header .forecast-title {

    grid-column: 1;

    justify-self: start;

    min-width: 0;

}



.upcoming-payments-header .upcoming-view-controls {

    grid-column: 2;

    justify-self: end;

}



.upcoming-payments-bank-check:not([hidden]) {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-start;

    gap: 6px 10px;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 8px 10px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: rgba(59, 130, 246, 0.10);

}



.upcoming-payments-bank-check[hidden] {

    display: none;

}



body.light-mode .upcoming-payments-bank-check:not([hidden]) {

    background: rgba(37, 99, 235, 0.07);

    border-color: rgba(37, 99, 235, 0.18);

}



.upcoming-payments-bank-field {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 650;

}



.upcoming-payments-bank-field input {

    width: 88px;

    padding: 4px 6px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: var(--input-bg);

    color: var(--text);

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;

    appearance: textfield;

    -moz-appearance: textfield;

}



.upcoming-payments-bank-field input::-webkit-outer-spin-button,
.upcoming-payments-bank-field input::-webkit-inner-spin-button {

    appearance: none;

    -webkit-appearance: none;

    margin: 0;

}



.upcoming-payments-bank-field input:focus {

    outline: none;

    border-color: var(--primary);

}



.upcoming-payments-bank-math {

    display: inline-flex;

    align-items: baseline;

    gap: 8px;

    color: var(--text-muted);

    font-size: 14px;

    font-weight: 650;

}



.upcoming-payments-bank-math strong {

    color: var(--text);

    font-size: 14px;

    font-weight: 750;

    font-variant-numeric: tabular-nums;

}



.upcoming-payments-bank-left.is-negative,
#upcomingPaymentsBankLeft.is-negative {

    color: var(--danger);

}



.upcoming-payments-bank-note {

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 550;

}



.upcoming-payments-tally-clear {

    flex-shrink: 0;

    border: none;

    background: transparent;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    padding: 6px 8px;

    border-radius: 8px;

}



.upcoming-payments-tally-clear:hover {

    background: rgba(148, 163, 184, 0.16);

    color: var(--text);

}



.upcoming-payments-table {

    margin-top: 4px;

    width: 100%;

    table-layout: auto;

}



.upcoming-payments-table thead th {

    white-space: nowrap;

}



.upcoming-payments-table tbody td {

    vertical-align: middle;

}



.upcoming-payments-table tbody td:first-child {

    font-weight: 650;

    color: var(--text);

}



.upcoming-payment-name {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



.upcoming-oneoff-badge {

    display: inline-flex;

    align-items: center;

    padding: 2px 8px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.3px;

    text-transform: uppercase;

    background: rgba(168, 85, 247, 0.18);

    color: rgb(216, 180, 254);

}



body.light-mode .upcoming-oneoff-badge {

    background: rgba(168, 85, 247, 0.14);

    color: rgb(126, 34, 206);

}



.upcoming-payments-table td:nth-child(3),
.upcoming-payments-table th:nth-child(3) {

    white-space: nowrap;

}



.upcoming-payments-table td:nth-child(4) {

    font-size: 12px;

    font-weight: 650;

    white-space: nowrap;

}



.upcoming-payments-table tr.is-paid td {

    opacity: 0.78;

}



.upcoming-payments-table tbody tr[data-payment-id] {

    cursor: pointer;

}



.upcoming-payments-table tbody tr.is-selected {

    background: rgba(59, 130, 246, 0.16);

    box-shadow: inset 3px 0 0 var(--primary);

}



.upcoming-payments-table tbody tr.is-selected:hover {

    background: rgba(59, 130, 246, 0.20);

}



.upcoming-payments-table tr.is-paid.is-selected td {

    opacity: 1;

}



body.light-mode .upcoming-payments-table tbody tr.is-selected {

    background: rgba(37, 99, 235, 0.10);

}



body.light-mode .upcoming-payments-table tbody tr.is-selected:hover {

    background: rgba(37, 99, 235, 0.14);

}


.payment-item-right {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}



.payment-item-right .payment-due {

    min-width: 72px;

    text-align: right;

    font-size: 12px;

    font-weight: 600;

}



.payment-item .paid-status-btn {

    flex-shrink: 0;

}



.paid-status-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 64px;

    height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

}



.paid-status-label.is-paid {

    background: rgba(22, 163, 74, 0.16);

    color: #16a34a;

}



.paid-status-label.is-unpaid {

    background: rgba(100, 116, 139, 0.12);

    color: var(--text-muted);

}



body.light-mode .paid-status-label.is-paid {

    background: #dcfce7;

    color: #14532d;

}



body.light-mode .paid-status-label.is-unpaid {

    background: #f1f5f9;

    color: #475569;

}



.payment-item.is-paid {

    opacity: 0.75;

}


.payment-item .paid-tag {

    display: inline-block;

    margin-left: 8px;

    padding: 2px 8px;

    border-radius: 999px;

    background: rgba(34,197,94,0.16);

    color: #4ade80;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

}


.calendar-event.paid-event {

    opacity: 0.7;

    text-decoration: line-through;

    filter: grayscale(0.2);

}


/* ==========================================================
   SAVINGS PROGRESS
========================================================== */

.savings-progress-block {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.savings-progress-bar {

    width: 100%;

    height: 10px;

    border-radius: 999px;

    background: rgba(148,163,184,0.18);

    overflow: hidden;

}


.savings-progress-fill {

    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #0ea5e9,
        #22c55e
    );

    transition: width 0.25s ease;

}


.savings-progress-stats {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    font-size: 12px;

    color: var(--text-muted);

}


.savings-progress-stats strong {

    color: var(--text);

}


.savings-progress-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.savings-progress-actions .secondary-btn,
.savings-progress-actions .primary-btn {

    padding: 8px 12px;

    font-size: 12px;

}


.savings-contribution-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 4px;

}


.savings-contribution-list h5 {

    font-size: 12px;

    font-weight: 700;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.4px;

}


.savings-contribution-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 10px 12px;

    border-radius: 10px;

    background: var(--panel-hover);

    border: 1px solid var(--border);

}


.savings-contribution-item strong {

    display: block;

    color: var(--text);

    font-size: 13px;

}


.savings-contribution-item small {

    color: var(--text-muted);

    font-size: 11px;

}


.savings-contribution-empty {

    font-size: 12px;

    color: var(--text-muted);

    padding: 4px 0;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar {

    width: 8px;
    height: 8px;

}


::-webkit-scrollbar-track {

    background: transparent;

}


::-webkit-scrollbar-thumb {

    background:
        #64748b;

    border-radius: 20px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #475569;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

    .dashboard-cards {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

    .forecast-strip {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        padding-bottom: 4px;

        -webkit-overflow-scrolling: touch;

    }

    .forecast-day {

        flex: 0 0 118px;

        scroll-snap-align: start;

    }

    .topbar {

        padding: 16px 20px;

        min-height: 0;

    }

    .topbar-right {

        gap: 8px;

        justify-content: flex-end;

    }

    .schedule-selector,
    .profile-selector {

        flex: 1 1 168px;

        flex-direction: column;

        align-items: stretch;

        gap: 6px;

        min-width: 0;

        padding: 8px 10px;

    }

    .schedule-selector label,
    .profile-selector label {

        width: 100%;

    }

    .schedule-selector select,
    .schedule-selector input[type="date"],
    .profile-controls {

        width: 100%;

        min-width: 0;

    }

    .profile-manage-btn {

        width: 36px;

        height: 36px;

    }

}


/* When the main column is narrow (desktop-site on a phone, small windows
   with the sidebar still visible), keep profile + manage on-screen. */
@container topbar (max-width: 820px) {

    .topbar-right {

        flex-basis: 100%;

        justify-content: flex-end;

    }

    .schedule-selector,
    .profile-selector {

        flex: 1 1 160px;

        flex-direction: column;

        align-items: stretch;

        gap: 6px;

        min-width: 0;

    }

    .schedule-selector label,
    .profile-selector label {

        width: 100%;

    }

    .schedule-selector select,
    .schedule-selector input[type="date"],
    .profile-controls {

        width: 100%;

        min-width: 0;

    }

    .profile-manage-btn {

        width: 36px;

        height: 36px;

    }

}


@media (max-width: 950px) {

    .app {

        grid-template-columns: 1fr;

        grid-template-rows: auto minmax(0, 1fr);

        width: 100%;

        max-width: 100vw;

        overflow-x: hidden;

    }

    html,
    body {

        max-width: 100%;

        overflow-x: hidden;

    }

    .sidebar {

        flex-direction: column;

        justify-content: flex-start;

        align-items: stretch;

        gap: 8px;

        padding: 10px 12px;

        border-right: none;

        border-bottom: 1px solid var(--border);

    }

    .sidebar-scroll {

        display: contents;

    }

    .logo {

        display: none;

    }

    .sidebar-header,
    .sidebar-toggle {

        display: none;

    }

    .sidebar nav {

        flex-direction: row;

        flex-wrap: nowrap;

        width: 100%;

        justify-content: flex-start;

        gap: 4px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;

        scrollbar-gutter: auto;

        flex: 0 0 auto;

        min-height: 0;

        order: 1;

    }

    .sidebar-footer {

        order: 2;

        margin-top: 0;

        padding-top: 8px;

        border-top: 1px solid var(--border);

        gap: 8px;

    }

    .theme-switch {

        width: 100%;

    }

    /* Compact auth strip under the nav on phones */
    .auth-panel {

        margin: 0;

        padding: 0;

        border-bottom: none;

        border-top: none;

        flex-direction: row;

        flex-wrap: nowrap;

        align-items: center;

        gap: 8px;

    }

    .auth-user {

        flex: 1 1 auto;

        min-width: 0;

    }

    .auth-copy small {

        display: none;

    }

    .auth-copy strong {

        font-size: 12px;

    }

    .auth-avatar {

        width: 28px;

        height: 28px;

    }

    .auth-btn {

        flex: 0 0 auto;

        width: auto;

        min-width: 0;

        max-width: 58vw;

        height: 34px;

        padding: 0 12px;

        white-space: nowrap;

    }

    .nav-btn {

        flex: 0 0 auto;

        flex-direction: column;

        justify-content: center;

        gap: 4px;

        min-width: 68px;

        max-width: 86px;

        padding: 8px 6px;

        font-size: 9px;

        line-height: 1.15;

        text-align: center;

    }

    .nav-btn i {

        font-size: 15px;

    }

    .nav-btn.active::before {

        display: none;

    }

    .sidebar .nav-btn .nav-label {

        display: none;

    }

    .sidebar .nav-btn {

        min-width: 44px;

        max-width: 52px;

        padding: 10px 6px;

    }

    .sidebar .nav-btn i {

        font-size: 16px;

    }

    .auth-panel {

        padding-top: 0;

        gap: 6px;

    }

    .sidebar-footer .auth-btn-discord {

        flex-shrink: 0;

        width: auto;

        min-width: 0;

        padding: 0 12px;

    }

    .auth-copy strong {

        font-size: 11px;

    }

    .auth-btn {

        height: 32px;

        font-size: 11px;

        padding: 0 10px;

    }

    /* Collapse schedule / payday / profile behind one control */
    .mobile-budget-settings {

        display: block;

        grid-column: 1 / -1;

        width: 100%;

        border: 1px solid var(--border);

        border-radius: 11px;

        background: var(--panel);

        padding: 0;

        overflow: hidden;

    }

    .budget-settings-toggle {

        display: flex;

        align-items: center;

        gap: 8px;

        width: 100%;

        border: none;

        background: transparent;

        cursor: pointer;

        padding: 11px 12px;

        font-family: inherit;

        font-size: 13px;

        font-weight: 650;

        color: var(--text);

        text-align: left;

    }

    .budget-settings-toggle i {

        color: var(--primary);

    }

    .budget-settings-toggle::after {

        content: "\f078";

        font-family: "Font Awesome 6 Free";

        font-weight: 900;

        margin-left: auto;

        font-size: 11px;

        color: var(--text-muted);

        transition: transform 0.15s ease;

    }

    .mobile-budget-settings.is-open .budget-settings-toggle::after {

        transform: rotate(180deg);

    }

    .budget-settings-body {

        display: none;

        flex-direction: column;

    }

    .mobile-budget-settings.is-open .budget-settings-body {

        display: flex;

    }

    .mobile-budget-settings .schedule-selector,
    .mobile-budget-settings .profile-selector {

        width: 100%;

        border: none;

        border-top: 1px solid var(--border);

        border-radius: 0;

        box-shadow: none;

        margin: 0;

    }

    .topbar-right {

        width: 100%;

    }

    .topbar h2 {

        font-size: 18px;

        margin: 0;

    }

    .topbar {

        gap: 10px;

        padding: 12px;

    }

    .main-status {

        padding: 8px 12px 0;

        gap: 6px;

        min-height: 0;

    }

    #currentDate,
    .budget-period {

        padding: 8px 10px;

        font-size: 11px;

    }

    .page {

        padding: 12px;

    }

    .dashboard-cards {

        gap: 10px;

        margin-bottom: 14px;

    }

    .upcoming-panel {

        padding: 12px;

    }

    .forecast-header {

        flex-wrap: wrap;

        gap: 8px;

    }

    .card {

        padding: 14px;

        min-height: 0;

    }

    .card h3 {

        margin-bottom: 6px;

        font-size: 11px;

    }

    .card h2 {

        font-size: 22px;

    }

    .panel {

        padding: 12px;

    }

    .topbar {

        flex-wrap: wrap;

        gap: 12px;

        padding: 16px;

        min-height: 0;

    }

    .topbar h2 {

        font-size: 20px;

    }

    .topbar-right {

        width: 100%;

        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 10px;

        align-items: stretch;

    }

    .schedule-selector,
    .profile-selector {

        width: 100%;

        min-width: 0;

        padding: 10px;

        flex-wrap: wrap;

    }

    .schedule-selector label,
    .profile-selector label {

        width: 100%;

    }

    .schedule-selector select,
    .schedule-selector input,
    .profile-controls {

        width: 100%;

        min-width: 0;

    }

    .main-status {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        padding: 10px 16px 0;

        gap: 8px;

    }

    #currentDate,
    .budget-period {

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

        justify-content: flex-start;

    }

    #currentDate {

        max-width: 100%;

    }

    .budget-period {

        grid-column: auto;

        width: 100%;

        max-width: 100%;

        white-space: normal;

        flex-wrap: wrap;

    }

    .sidebar {

        width: 100%;

        max-width: 100%;

        overflow: hidden;

        box-sizing: border-box;

    }

    .main,
    .page,
    .topbar,
    .main-status,
    .panel,
    .card,
    .dashboard-cards,
    .data-table,
    .upcoming-payments-table,
    .forecast-strip,
    .upcoming-panel {

        max-width: 100%;

        box-sizing: border-box;

    }

    .page {

        padding: 16px;

        overflow-x: hidden;

    }

    .topbar {

        padding: 14px 16px;

    }

}


@media (max-width: 650px) {

    .dashboard-cards {

        grid-template-columns: 1fr;

    }

    .page {

        padding: 16px;

    }

    .page-header {

        align-items: flex-start;

        gap: 12px;

        flex-direction: column;

    }

    .upcoming-payments-header {

        grid-template-columns: minmax(0, 1fr);

        row-gap: 8px;

    }

    .upcoming-payments-header .upcoming-view-controls {

        grid-column: 1;

        justify-self: start;

    }

    .upcoming-payments-bank-check:not([hidden]) {

        justify-content: flex-start;

        padding: 8px;

    }

    /* Stack tables into cards — no sideways scrolling */
    .data-table,
    .upcoming-payments-table {

        display: block;

        width: 100%;

        max-width: 100%;

        overflow: visible;

        border: none;

        background: transparent;

        box-shadow: none;

    }

    .data-table thead,
    .upcoming-payments-table thead {

        display: none;

    }

    .data-table tbody,
    .upcoming-payments-table tbody {

        display: flex;

        flex-direction: column;

        gap: 10px;

    }

    .data-table tr,
    .upcoming-payments-table tr {

        display: block;

        background: var(--panel);

        border: 1px solid var(--border);

        border-radius: 12px;

        padding: 10px 12px;

        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.05),
            0 6px 18px rgba(15, 23, 42, 0.06);

    }

    .data-table td,
    .upcoming-payments-table td {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        width: 100%;

        padding: 8px 0;

        border: none;

        border-top: 1px solid var(--border);

        white-space: normal;

        text-align: right;

        font-size: 13px;

    }

    .data-table tr td:first-child,
    .upcoming-payments-table tr td:first-child {

        border-top: none;

        padding-top: 2px;

        font-weight: 700;

        font-size: 14px;

        color: var(--text);

        text-align: left;

        justify-content: flex-start;

    }

    .upcoming-payments-table .upcoming-payment-name {

        width: 100%;

    }

    .data-table td::before,
    .upcoming-payments-table td::before {

        content: attr(data-label);

        font-size: 11px;

        font-weight: 650;

        letter-spacing: 0.3px;

        text-transform: uppercase;

        color: var(--text-muted);

        text-align: left;

        flex: 0 0 auto;

    }

    .data-table tr td:first-child::before,
    .upcoming-payments-table tr td:first-child::before {

        display: none;

    }

    .data-table td.actions,
    .data-table td[data-label="Actions"],
    .upcoming-payments-table td[data-label="Paid"] {

        justify-content: space-between;

    }

    .data-table td[data-label="Actions"] .row-actions {

        margin-left: auto;

    }

    .data-table td[colspan],
    .upcoming-payments-table td[colspan] {

        display: block;

        text-align: left;

        border-top: none;

    }

    .data-table td[colspan]::before,
    .upcoming-payments-table td[colspan]::before {

        display: none;

    }

    .upcoming-payments-table tr.is-selected {

        border-color: rgba(59, 130, 246, 0.45);

        box-shadow:
            inset 3px 0 0 var(--primary),
            0 1px 2px rgba(15, 23, 42, 0.05),
            0 6px 18px rgba(15, 23, 42, 0.06);

    }

    body.light-mode .upcoming-payments-table tr.is-selected {

        border-color: rgba(37, 99, 235, 0.35);

    }

    .panel {

        padding: 14px;

        overflow: visible;

    }

    #paymentsTable tbody tr[data-payment-id] {

        cursor: grab;

    }

    .calendar-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

    .calendar-day {

        min-height: 110px;

    }

    .topbar-right {

        grid-template-columns: 1fr;

        justify-content: stretch;

    }

    .schedule-selector,
    .profile-selector {

        flex: 1;

        min-width: 0;

        width: 100%;

    }

    .page-header-actions {

        width: 100%;

        justify-content: stretch;

    }

    .page-header-actions .sort-selector,
    .page-header-actions .primary-btn {

        flex: 1;

        min-width: 0;

    }

    .sort-selector {

        width: 100%;

    }

    .sort-selector select {

        width: 100%;

        min-width: 0;

    }

}


@media (max-width: 450px) {

    .calendar-grid {

        grid-template-columns: 1fr;

    }

    .nav-btn {

        min-width: 62px;

        max-width: 76px;

        padding: 8px 4px;

        font-size: 8px;

    }

    .auth-btn {

        font-size: 11px;

        padding: 0 10px;

    }

}


/* ==========================================================
   BUDGET SETTINGS (collapsible on mobile)

   These desktop defaults sit after the mobile rules, so they
   must stay behind a min-width query or they win on source
   order and the mobile collapse never applies.
========================================================== */

@media (min-width: 951px) {

    .mobile-budget-settings {

        display: contents;

    }

    .budget-settings-toggle {

        display: none;

    }

    .budget-settings-body {

        display: contents;

    }

}


/* ==========================================================
   AUTH PANEL (Google / guest)
========================================================== */

.auth-panel {

    margin: 0;

    padding: 0;

    border-bottom: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.auth-user {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

}



.auth-avatar {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid var(--border);

    flex-shrink: 0;

}



.auth-copy {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.auth-copy strong {

    font-size: 12px;

    font-weight: 650;

    color: var(--text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.auth-copy small {

    font-size: 11px;

    line-height: 1.35;

    color: var(--text-muted);

}



.auth-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    height: 36px;

    border-radius: 10px;

    border: 1px solid var(--border);

    background: var(--panel-hover);

    color: var(--text);

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);

}



/* Important: .auth-btn { display } must not override HTML hidden */
.auth-btn[hidden],
.auth-panel [hidden],
.nav-btn[hidden] {

    display: none !important;

}



.auth-btn:hover {

    border-color: var(--border-hover);

    transform: translateY(-1px);

}



.auth-btn-google {

    background: rgba(66, 133, 244, 0.12);

    border-color: rgba(66, 133, 244, 0.35);

    color: var(--text);

}



.auth-btn-google i {

    color: #ea4335;

}



body.light-mode .auth-btn-google {

    background: #eff6ff;

    border-color: #93c5fd;

    color: #1e3a8a;

}



.auth-btn-facebook {

    background: rgba(24, 119, 242, 0.14);

    border-color: rgba(24, 119, 242, 0.4);

    color: var(--text);

}



.auth-btn-facebook i {

    color: #1877f2;

}



body.light-mode .auth-btn-facebook {

    background: #eff6ff;

    border-color: #93c5fd;

    color: #1e3a8a;

}



.auth-btn-discord {

    background: rgba(88, 101, 242, 0.14);

    border-color: rgba(88, 101, 242, 0.4);

    color: var(--text);

    text-decoration: none;

}



.auth-btn-discord i {

    color: #5865f2;

}



.auth-btn-discord:hover {

    color: var(--text);

}



body.light-mode .auth-btn-discord {

    background: #eef0ff;

    border-color: #a5b4fc;

    color: #312e81;

}



.auth-btn-signout {

    background: transparent;

}


/* ==========================================================
   ADMIN — signed-in users
========================================================== */

#admin.page {

    container-type: inline-size;

    container-name: admin;

    min-width: 0;

}


.admin-page-header {

    margin-bottom: 16px;

}


body:not(.is-admin) #admin {

    display: none !important;

}


.admin-metrics {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin: 0 0 14px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow);

}


.admin-metric {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 12px 16px;

    border-right: 1px solid var(--border);

    min-width: 0;

}


.admin-metric:last-child {

    border-right: none;

}


.admin-metric span {

    font-size: 11px;

    font-weight: 650;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    color: var(--text-muted);

}


.admin-metric strong {

    font-size: 22px;

    font-weight: 700;

    letter-spacing: -0.4px;

    line-height: 1.1;

}


body.light-mode .admin-metrics,
body.light-mode .admin-table-card {

    border-color: rgba(148, 163, 184, 0.35);

}


.admin-search {

    min-width: 220px;

}


.admin-search input {

    border: none;

    background: transparent;

    color: var(--text);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    outline: none;

    min-width: 160px;

    width: 100%;

}


.admin-search input::placeholder {

    color: var(--text-muted);

    font-weight: 500;

}


.admin-table-card {

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    max-width: 100%;

    min-width: 0;

    box-shadow: var(--shadow);

}


.admin-table-scroll {

    overflow-x: auto;

    max-width: 100%;

    -webkit-overflow-scrolling: touch;

}


.admin-table-card .admin-users-table {

    border: none;

    box-shadow: none;

    border-radius: 0;

    background: transparent;

}


.admin-status {

    margin: 0;

    padding: 10px 16px;

    font-size: 13px;

    color: var(--text-muted);

    border-bottom: 1px solid var(--border);

}


.admin-status.is-error {

    color: #f87171;

}


.admin-user-cell {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}


.admin-user-avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid var(--border);

    flex-shrink: 0;

}


.admin-user-avatar-fallback {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(59, 130, 246, 0.12);

    color: var(--primary);

    font-size: 13px;

}


.admin-user-copy {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}


.admin-user-name {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

}


.admin-user-copy strong {

    font-size: 14px;

    font-weight: 650;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.admin-user-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

    color: var(--text-muted);

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.admin-provider-badge {

    flex-shrink: 0;

    padding: 1px 7px;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.16);

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.3px;

    text-transform: uppercase;

}


.admin-presence {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.2px;

    white-space: nowrap;

}


.admin-presence::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: currentColor;

}


.admin-presence.is-online {

    color: #34d399;

}


.admin-presence.is-offline {

    color: var(--text-muted);

}


body.light-mode .admin-presence.is-online {

    color: #059669;

}


.admin-seen {

    display: flex;

    flex-direction: column;

    gap: 2px;

    white-space: nowrap;

}


.admin-first-seen {

    color: var(--text-muted);

    font-size: 11px;

}


.admin-muted {

    color: var(--text-muted);

    font-size: 12px;

}


.admin-toolbar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin: 0;

    padding: 10px 12px;

    border-bottom: 1px solid var(--border);

}


.admin-filter-group {

    display: flex;

    flex-wrap: wrap;

    gap: 3px;

    padding: 3px;

    background: var(--input-bg);

    border: 1px solid var(--border);

    border-radius: 10px;

}


.admin-filter-btn {

    border: none;

    background: transparent;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 650;

    height: 30px;

    padding: 0 10px;

    border-radius: 7px;

    cursor: pointer;

    white-space: nowrap;

}


.admin-filter-btn:hover {

    color: var(--text);

}


.admin-filter-btn.is-active {

    background: var(--panel);

    color: var(--text);

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);

}


.admin-sort-btn {

    border: none;

    background: transparent;

    color: inherit;

    font: inherit;

    letter-spacing: inherit;

    text-transform: inherit;

    padding: 0;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}


.admin-sort-btn::after {

    content: "";

    width: 0;

    height: 0;

    border-left: 4px solid transparent;

    border-right: 4px solid transparent;

    opacity: 0.35;

}


.admin-sort-btn.is-active[data-sort-dir="asc"]::after {

    border-bottom: 5px solid currentColor;

    opacity: 1;

}


.admin-sort-btn.is-active[data-sort-dir="desc"]::after {

    border-top: 5px solid currentColor;

    opacity: 1;

}


.admin-you-badge {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    padding: 2px 7px;

    border-radius: 999px;

    background: rgba(59, 130, 246, 0.16);

    color: var(--primary);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;

}


.admin-users-table th,
.admin-users-table td {

    padding: 12px 16px;

    vertical-align: middle;

}


.admin-users-table th:nth-child(2),
.admin-users-table td:nth-child(2),
.admin-users-table th:nth-child(3),
.admin-users-table td:nth-child(3),
.admin-users-table th:last-child,
.admin-users-table td:last-child {

    white-space: nowrap;

    width: 1%;

}


.admin-users-table td:first-child {

    min-width: 0;

}


.admin-users-table tbody tr.is-current-admin-user td {

    background: rgba(59, 130, 246, 0.06);

}


@media (max-width: 1200px) {

    .admin-metrics {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .admin-metric:nth-child(2) {

        border-right: none;

    }

    .admin-metric:nth-child(1),
    .admin-metric:nth-child(2) {

        border-bottom: 1px solid var(--border);

    }

}


@media (max-width: 900px) {

    .admin-search {

        width: 100%;

        min-width: 0;

    }

}

@media (max-width: 1100px) {

    #admin.page {

        padding-left: 16px;

        padding-right: 16px;

    }

}


/* Stack the admin table when the content column is narrow
   (phones using desktop site still have a wide CSS viewport). */
@container admin (max-width: 880px) {

    .admin-metrics {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .admin-metric:nth-child(2) {

        border-right: none;

    }

    .admin-metric:nth-child(1),
    .admin-metric:nth-child(2) {

        border-bottom: 1px solid var(--border);

    }

    .admin-users-table {

        display: block;

        width: 100%;

        max-width: 100%;

        overflow: visible;

    }

    .admin-users-table thead {

        display: none;

    }

    .admin-users-table tbody {

        display: flex;

        flex-direction: column;

        gap: 10px;

        padding: 10px 12px 12px;

    }

    .admin-users-table tr {

        display: block;

        background: var(--panel-hover);

        border: 1px solid var(--border);

        border-radius: 12px;

        padding: 10px 12px;

    }

    .admin-users-table td {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        width: 100%;

        max-width: 100%;

        padding: 8px 0;

        border: none;

        border-top: 1px solid var(--border);

        white-space: normal;

        text-align: right;

        font-size: 13px;

    }

    .admin-users-table tr td:first-child {

        border-top: none;

        padding-top: 2px;

        text-align: left;

        justify-content: flex-start;

    }

    .admin-users-table td::before {

        content: attr(data-label);

        font-size: 11px;

        font-weight: 650;

        letter-spacing: 0.3px;

        text-transform: uppercase;

        color: var(--text-muted);

        text-align: left;

        flex: 0 0 auto;

    }

    .admin-users-table tr td:first-child::before {

        display: none;

    }

    .admin-users-table td[colspan] {

        display: block;

        text-align: left;

        border-top: none;

    }

    .admin-users-table td[colspan]::before {

        display: none;

    }

    .admin-users-table th:nth-child(2),
    .admin-users-table td:nth-child(2),
    .admin-users-table th:nth-child(3),
    .admin-users-table td:nth-child(3),
    .admin-users-table th:last-child,
    .admin-users-table td:last-child {

        width: auto;

        white-space: normal;

    }

    .admin-user-meta {

        white-space: normal;

    }

}


.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


.form-group textarea {

    min-height: 96px;

    resize: vertical;

    line-height: 1.45;

}


.nav-badge {

    position: absolute;

    top: 6px;

    right: 8px;

    min-width: 18px;

    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--danger);

    color: #fff;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

}


.nav-badge[hidden],
.admin-section-tab .nav-badge[hidden] {

    display: none !important;

}


html.sidebar-collapsed .nav-badge {

    top: 4px;

    right: 4px;

}


.admin-header-tabs {

    min-width: 0;

}


.admin-section-tabs {

    display: flex;

    gap: 6px;

    padding: 4px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 12px;

}


.admin-section-tab {

    position: relative;

    border: none;

    background: transparent;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 13px;

    font-weight: 650;

    height: 34px;

    padding: 0 14px;

    border-radius: 9px;

    cursor: pointer;

}


.admin-section-tab:hover {

    color: var(--text);

}


.admin-section-tab.is-active {

    background: var(--panel-hover);

    color: var(--text);

}


.admin-section-tab .nav-badge {

    position: static;

    margin-left: 8px;

}


/* Support and Admin are not budget views, so the budget
   controls and period strip only get in the way — and on
   phones they push the page itself below the fold. */
body[data-page="support"] .topbar-right,
body[data-page="admin"] .topbar-right,
body[data-page="support"] .main-status,
body[data-page="admin"] .main-status {

    display: none;

}


.support-card {

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 22px;

    margin-bottom: 16px;

    box-shadow: var(--shadow);

}


.support-guest-card {

    display: flex;

    align-items: flex-start;

    gap: 16px;

}


.support-guest-icon {

    flex-shrink: 0;

    width: 44px;

    height: 44px;

    border-radius: 13px;

    display: grid;

    place-items: center;

    font-size: 17px;

    color: #fff;

    background:
        linear-gradient(135deg, #3b82f6, #2563eb);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.25);

}


.support-guest-card h4,
.support-card h4 {

    font-size: 16px;

    font-weight: 700;

    letter-spacing: -0.2px;

    margin-bottom: 6px;

}


.support-guest-card p {

    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.55;

    max-width: 46rem;

}


.support-workspace {

    display: grid;

    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);

    gap: 16px;

    height: clamp(520px, calc(100vh - 280px), 840px);

    align-items: stretch;

}


.support-list-panel,
.support-thread-panel {

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    min-width: 0;

    min-height: 0;

}


.support-list-panel {

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


.support-list-panel .admin-toolbar {

    margin: 0;

    padding: 12px;

    border-bottom: 1px solid var(--border);

}


.ticket-list {

    overflow: auto;

    flex: 1;

    padding: 8px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.ticket-item {

    position: relative;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 6px;

    text-align: left;

    border: 1px solid transparent;

    background: transparent;

    color: inherit;

    font-family: inherit;

    padding: 12px 14px;

    border-radius: 12px;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition);

}


.ticket-item::before {

    content: "";

    position: absolute;

    left: 5px;

    top: 12px;

    bottom: 12px;

    width: 3px;

    border-radius: 3px;

    background: transparent;

}


.ticket-item:hover {

    background: var(--panel-hover);

}


.ticket-item.is-active {

    border-color: rgba(59, 130, 246, 0.32);

    background: rgba(59, 130, 246, 0.10);

}


.ticket-item.is-active::before {

    background: var(--primary);

}


.ticket-item.is-unread .ticket-item-title {

    font-weight: 750;

    color: var(--text);

}


.ticket-item-top {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 10px;

}


.ticket-item-title {

    font-size: 13.5px;

    font-weight: 650;

    line-height: 1.35;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


.ticket-item-time {

    flex-shrink: 0;

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;

}


.ticket-item-sub {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

}


.ticket-item-who {

    color: var(--text-soft);

    font-size: 12px;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.ticket-item-preview {

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


.ticket-list-empty {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    flex: 1;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.5;

    padding: 28px 18px;

    text-align: center;

}


.ticket-list-empty i {

    font-size: 20px;

    opacity: 0.5;

}


.ticket-status {

    flex-shrink: 0;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    padding: 3px 8px;

    border-radius: 999px;

    background: rgba(34, 197, 94, 0.16);

    color: #4ade80;

}


body.light-mode .ticket-status {

    background: rgba(22, 163, 74, 0.12);

    color: #15803d;

}


.ticket-status.is-closed {

    background: rgba(148, 163, 184, 0.16);

    color: var(--text-muted);

}


body.light-mode .ticket-status.is-closed {

    background: rgba(100, 116, 139, 0.14);

    color: #475569;

}


.ticket-unread-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--primary);

    flex-shrink: 0;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.18);

}


.support-thread-panel {

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


.ticket-thread {

    display: flex;

    flex-direction: column;

    min-height: 0;

    flex: 1;

}


.ticket-thread-empty {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    flex: 1;

    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.55;

    padding: 24px;

    text-align: center;

}


.ticket-thread-empty i {

    font-size: 26px;

    opacity: 0.45;

}


.ticket-thread-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 18px;

    border-bottom: 1px solid var(--border);

    background: var(--panel);

    border-radius: var(--radius) var(--radius) 0 0;

}


.ticket-thread-copy {

    min-width: 0;

    flex: 1;

}


.ticket-thread-copy h4 {

    font-size: 16px;

    font-weight: 700;

    letter-spacing: -0.2px;

    line-height: 1.3;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.ticket-thread-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px;

    margin-top: 6px;

}


.ticket-meta-chip {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    max-width: 100%;

    padding: 3px 9px;

    border-radius: 999px;

    background: var(--panel-hover);

    border: 1px solid var(--border);

    color: var(--text-muted);

    font-size: 11px;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.ticket-meta-chip i {

    font-size: 10px;

    opacity: 0.75;

}


.ticket-thread-actions {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

}


.ticket-back-btn {

    display: none;

}


.ticket-messages {

    flex: 1;

    overflow: auto;

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding: 20px 18px;

    background:
        linear-gradient(
            180deg,
            rgba(148, 163, 184, 0.05),
            transparent 140px
        );

}


.ticket-messages > :first-child {

    margin-top: auto;

}


.ticket-message {

    display: flex;

    align-items: flex-end;

    gap: 10px;

    max-width: min(100%, 640px);

}


.ticket-message.is-admin {

    flex-direction: row-reverse;

    align-self: flex-end;

}


.ticket-avatar {

    flex-shrink: 0;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.2px;

    background: var(--panel-hover);

    border: 1px solid var(--border);

    color: var(--text-soft);

    text-transform: uppercase;

}


.ticket-avatar.is-admin {

    /* The logo is transparent, so keep a light disc behind it
       or the bird disappears in dark mode. */
    background: #ffffff;

    border-color: transparent;

    padding: 0;

    overflow: hidden;

}


.ticket-avatar.is-admin img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transform: scale(1.18);

}


.ticket-bubble {

    min-width: 0;

    padding: 11px 14px 12px;

    border-radius: 16px 16px 16px 5px;

    background: var(--panel-hover);

    border: 1px solid var(--border);

}


.ticket-message.is-admin .ticket-bubble {

    border-radius: 16px 16px 5px 16px;

    background: rgba(59, 130, 246, 0.13);

    border-color: rgba(59, 130, 246, 0.24);

}


body.light-mode .ticket-bubble {

    background: #f1f5f9;

    border-color: rgba(15, 23, 42, 0.08);

}


body.light-mode .ticket-message.is-admin .ticket-bubble {

    background: #e0edff;

    border-color: rgba(37, 99, 235, 0.22);

}


.ticket-message-top {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 5px;

}


.ticket-message-top strong {

    font-size: 12px;

    font-weight: 750;

}


.ticket-message.is-admin .ticket-message-top strong {

    color: var(--primary);

}


body.light-mode .ticket-message.is-admin .ticket-message-top strong {

    color: #1d4ed8;

}


.ticket-message-top time {

    flex-shrink: 0;

    color: var(--text-muted);

    font-size: 11px;

}


.ticket-message p {

    font-size: 14px;

    line-height: 1.55;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

}


.ticket-reply-form {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    align-items: end;

    gap: 10px;

    padding: 14px 18px 16px;

    border-top: 1px solid var(--border);

}


.ticket-reply-form textarea {

    width: 100%;

    background: var(--input-bg);

    color: var(--text);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 12px 14px;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.5;

    resize: vertical;

    min-height: 48px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}


.ticket-reply-form textarea:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(59,130,246,0.10);

}


.ticket-reply-form .primary-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    height: 44px;

    border-radius: 13px;

    white-space: nowrap;

}


.ticket-reply-hint {

    grid-column: 1 / -1;

    color: var(--text-muted);

    font-size: 11px;

}


.ticket-reply-form [data-ticket-reply-error] {

    grid-column: 1 / -1;

    margin: 0;

}


.ticket-closed-note {

    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-size: 12.5px;

}


.admin-tickets-workspace {

    height: clamp(520px, calc(100vh - 320px), 840px);

}


.app-toast {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 1200;

    max-width: min(360px, calc(100vw - 32px));

    padding: 12px 14px;

    border-radius: 12px;

    background: #0f172a;

    color: #f8fafc;

    border: 1px solid rgba(148, 163, 184, 0.28);

    box-shadow: var(--shadow-lg);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;

}


body.light-mode .app-toast {

    background: #0f172a;

    color: #f8fafc;

}


@media (max-width: 860px) {

    /* The mobile header is tall, so the page area is short.
       Let the page scroll as one column instead of nesting
       a tall scroller inside it. */
    .support-workspace,
    .admin-tickets-workspace {

        grid-template-columns: 1fr;

        height: auto;

        min-height: 0;

    }

    .support-list-panel,
    .support-thread-panel {

        max-height: none;

    }

    .ticket-list {

        overflow: visible;

    }

    .ticket-messages {

        flex: 0 1 auto;

        max-height: 62vh;

    }

    .ticket-messages > :first-child {

        margin-top: 0;

    }

    .ticket-thread-empty {

        padding: 40px 24px;

    }

    .ticket-reply-form {

        grid-template-columns: 1fr;

    }

    .ticket-reply-form .primary-btn {

        justify-self: stretch;

        justify-content: center;

    }

    .ticket-message {

        max-width: 100%;

    }

    .support-workspace.is-thread-open .support-list-panel {

        display: none;

    }

    .support-workspace:not(.is-thread-open) .support-thread-panel {

        display: none;

    }

    .ticket-back-btn {

        display: inline-flex;

        align-items: center;

        height: 30px;

        padding: 0 10px;

    }

    .nav-badge {

        top: 2px;

        right: 10px;

    }

    .admin-page-header {

        flex-wrap: wrap;

    }

    .admin-header-tabs,
    .admin-page-header .page-header-actions {

        width: 100%;

    }

}


@media (max-width: 640px) {

    .ticket-thread-header {

        flex-wrap: wrap;

    }

    .ticket-thread-actions {

        width: 100%;

        justify-content: flex-end;

    }

}


/* ==========================================================
   PRIVACY NOTICE + LEGAL PAGE
========================================================== */

.sidebar-legal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px 4px 0;
    padding: 6px 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: center;
}

.sidebar-legal-link:hover {
    color: var(--text);
}

html.sidebar-collapsed .sidebar-legal-link {
    font-size: 0;
    padding: 4px;
}

html.sidebar-collapsed .sidebar-legal-link::before {
    content: "PP";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.privacy-notice-modal .privacy-notice-content,
.privacy-notice-modal .modal-content {
    width: min(520px, 100%);
    max-height: min(86vh, 720px);
    overflow: auto;
}

.privacy-notice-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 8px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.privacy-notice-body p,
.privacy-notice-body ul {
    margin: 0;
}

.privacy-notice-body ul {
    padding-left: 1.2em;
}

.privacy-notice-body li + li {
    margin-top: 6px;
}

.privacy-notice-body a {
    color: var(--primary);
    font-weight: 600;
}

.privacy-notice-modal .modal-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.privacy-notice-modal .primary-btn,
.privacy-notice-modal .secondary-btn {
    width: auto;
    min-height: 40px;
}

/* App shell locks body scroll; legal pages must scroll normally. */
html:has(body.legal-page) {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.legal-page {
    margin: 0;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(59, 130, 246, 0.16), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(34, 197, 94, 0.10), transparent 50%),
        var(--bg);
    color: var(--text);
}

.legal-shell {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 48px;
}

.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.legal-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
}

.legal-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.legal-back {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.legal-back:hover,
.legal-brand:hover {
    color: var(--primary);
}

.legal-article {
    padding: 28px 28px 32px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.legal-article h1 {
    margin: 0 0 8px;
    font-size: 1.85rem;
    line-height: 1.2;
}

.legal-updated {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.legal-article h2 {
    margin: 28px 0 10px;
    font-size: 1.15rem;
}

.legal-article h3 {
    margin: 18px 0 8px;
    font-size: 1rem;
}

.legal-article p,
.legal-article li {
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.6;
}

.legal-article p {
    margin: 0 0 12px;
}

.legal-article ul {
    margin: 0 0 12px;
    padding-left: 1.2em;
}

.legal-article li + li {
    margin-top: 6px;
}

.legal-article a {
    color: var(--primary);
}

.legal-footer {
    margin-top: 22px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.legal-footer a {
    color: var(--text-muted);
}

.legal-footer a:hover {
    color: var(--primary);
}

@media (max-width: 640px) {
    .legal-shell {
        width: min(100% - 24px, 760px);
        padding-top: 20px;
    }

    .legal-article {
        padding: 22px 18px 26px;
    }

    .privacy-notice-modal .modal-buttons {
        flex-direction: column-reverse;
    }

    .privacy-notice-modal .primary-btn,
    .privacy-notice-modal .secondary-btn {
        width: 100%;
    }
}


/* ============================================================
   Site-wide announcement strip (top of viewport)
   ============================================================ */

.announcement-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1400;
    display: grid;
    gap: 0;
    margin: 0;
    padding:
        env(safe-area-inset-top, 0)
        max(16px, env(safe-area-inset-right, 0))
        0
        max(16px, env(safe-area-inset-left, 0));
    background: #0c4a6e;
    color: #f0f9ff;
    border-bottom: 1px solid rgba(125, 211, 252, 0.28);
    box-shadow: 0 8px 24px rgba(2, 32, 56, 0.28);
}

.announcement-banner[hidden] {
    display: none;
}

body.light-mode .announcement-banner {
    background: #f0f9ff;
    color: #0c4a6e;
    border-bottom-color: rgba(14, 165, 233, 0.28);
    box-shadow: 0 6px 18px rgba(12, 74, 110, 0.08);
}

.announcement-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
}

.announcement-card + .announcement-card {
    border-top: 1px solid rgba(125, 211, 252, 0.2);
}

body.light-mode .announcement-card + .announcement-card {
    border-top-color: rgba(14, 165, 233, 0.16);
}

.announcement-card-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.announcement-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border-radius: 10px;
    background: rgba(125, 211, 252, 0.18);
    color: #7dd3fc;
}

body.light-mode .announcement-card-icon {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.announcement-card-copy {
    min-width: 0;
}

.announcement-card-copy strong {
    display: block;
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.announcement-card-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(224, 242, 254, 0.88);
    white-space: pre-wrap;
}

body.light-mode .announcement-card-copy p {
    color: #0369a1;
}

.announcement-dismiss-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(224, 242, 254, 0.9);
    cursor: pointer;
}

.announcement-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

body.light-mode .announcement-dismiss-btn {
    background: rgba(14, 165, 233, 0.1);
    color: #0369a1;
}

body.light-mode .announcement-dismiss-btn:hover {
    background: rgba(14, 165, 233, 0.18);
    color: #0c4a6e;
}

body.has-announcement-banner .app {
    padding-top: var(--announcement-banner-height, 58px);
}

@media (max-width: 860px) {
    .announcement-banner {
        padding-left: max(12px, env(safe-area-inset-left, 0));
        padding-right: max(12px, env(safe-area-inset-right, 0));
    }

    .announcement-card {
        align-items: flex-start;
        padding: 11px 0;
    }

    .announcement-card-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 12px;
    }
}

.admin-user-actions {
    display: flex;
    justify-content: flex-start;
}

.admin-message-user-btn {
    white-space: nowrap;
}

.admin-broadcast-card,
.admin-broadcast-list-card {
    margin-bottom: 16px;
}

.admin-broadcast-list-card {
    padding: 16px 18px 18px;
}

.admin-broadcast-help {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.admin-broadcast-list-title {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.3;
}

.admin-broadcast-list {
    display: grid;
    gap: 10px;
}

.admin-broadcast-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.03);
}

body.light-mode .admin-broadcast-item {
    background: #fff;
}

.admin-broadcast-item.is-inactive {
    opacity: 0.72;
}

.admin-broadcast-item-copy {
    min-width: 0;
}

.admin-broadcast-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.admin-broadcast-item-top strong {
    font-size: 14px;
}

.admin-broadcast-item-copy p {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.admin-broadcast-item-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.admin-broadcast-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-broadcast-empty {
    margin: 0;
    padding: 18px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.admin-dm-recipient {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.admin-status-pill.is-active {
    background: rgba(16, 185, 129, 0.16);
    color: #059669;
}

.admin-status-pill.is-inactive {
    background: rgba(148, 163, 184, 0.18);
    color: #64748b;
}

@media (max-width: 860px) {
    .admin-broadcast-item {
        flex-direction: column;
    }

    .admin-broadcast-item-actions {
        width: 100%;
    }

    .admin-broadcast-item-actions .secondary-btn,
    .admin-broadcast-item-actions .primary-btn {
        flex: 1 1 auto;
    }
}


/* ============================================================
   Admin Messenger (Facebook-style floating chat)
   ============================================================ */

.admin-messenger {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1300;
    width: min(380px, calc(100vw - 24px));
}

.admin-messenger.hidden {
    display: none;
}

.admin-messenger-window {
    display: flex;
    flex-direction: column;
    height: min(560px, calc(100vh - 100px));
    overflow: hidden;
    border-radius: 18px;
    background: var(--panel, #fff);
    border: 1px solid var(--border);
    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.28),
        0 2px 8px rgba(15, 23, 42, 0.12);
}

body.light-mode .admin-messenger-window {
    background: #fff;
}

.admin-messenger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    background: #0c4a6e;
    color: #f0f9ff;
}

body.light-mode .admin-messenger-header {
    background: #0284c7;
    color: #fff;
}

.admin-messenger-peer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-messenger-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-messenger-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-messenger-peer-copy {
    min-width: 0;
}

.admin-messenger-peer-copy strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-messenger-peer-copy small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.86;
}

.admin-messenger-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
    cursor: pointer;
}

.admin-messenger-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.admin-messenger-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px;
    background:
        linear-gradient(
            180deg,
            rgba(14, 165, 233, 0.05),
            transparent 48px
        ),
        var(--bg, #f8fafc);
}

body.light-mode .admin-messenger-messages {
    background:
        linear-gradient(
            180deg,
            rgba(14, 165, 233, 0.06),
            transparent 48px
        ),
        #f8fafc;
}

.admin-messenger-empty {
    margin: auto;
    max-width: 240px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.admin-messenger-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
    color: #0284c7;
}

.admin-messenger .ticket-message {
    max-width: 86%;
}

.admin-messenger .ticket-bubble {
    border-radius: 18px;
    padding: 8px 12px;
}

.admin-messenger .ticket-message.is-admin .ticket-bubble {
    background: #0284c7;
    color: #fff;
    border-color: transparent;
}

.admin-messenger .ticket-message.is-admin .ticket-message-top strong,
.admin-messenger .ticket-message.is-admin .ticket-message-top time,
.admin-messenger .ticket-message.is-admin .ticket-bubble p {
    color: #fff;
}

.admin-messenger .ticket-message.is-admin .ticket-message-top time {
    opacity: 0.8;
}

.admin-messenger .ticket-message.is-user .ticket-bubble {
    background: #e2e8f0;
    border-color: transparent;
}

body:not(.light-mode) .admin-messenger .ticket-message.is-user .ticket-bubble {
    background: rgba(148, 163, 184, 0.22);
}

.admin-messenger-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border);
    background: var(--panel, #fff);
}

.admin-messenger-composer textarea {
    flex: 1 1 auto;
    min-height: 40px;
    max-height: 120px;
    resize: none;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg, #f8fafc);
    color: var(--text);
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
}

.admin-messenger-composer textarea:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}

.admin-messenger-send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #0284c7;
    color: #fff;
    cursor: pointer;
}

.admin-messenger-send:hover {
    background: #0369a1;
}

.admin-messenger-send:disabled {
    opacity: 0.55;
    cursor: default;
}

.admin-messenger-error {
    margin: 0;
    padding: 0 12px 10px;
    color: #dc2626;
    font-size: 12px;
}

@media (max-width: 640px) {
    .admin-messenger {
        right: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
    }

    .admin-messenger-window {
        height: min(70vh, 560px);
    }
}


.admin-messenger-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.admin-messenger-icon-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
    cursor: pointer;
}

.admin-messenger-icon-btn:hover {
    background: rgba(255, 255, 255, 0.24);
}

.admin-messenger-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.admin-messenger.is-minimized .admin-messenger-window {
    height: auto;
}

.admin-messenger.is-minimized .admin-messenger-body {
    display: none;
}

.admin-messenger-avatar-logo {
    background: #fff;
    padding: 2px;
}

.admin-messenger-avatar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.user-messenger {
    right: 20px;
    bottom: 20px;
    z-index: 1290;
}

.user-messenger-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1280;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: #0284c7;
    color: #fff;
    box-shadow: 0 10px 28px rgba(2, 132, 199, 0.35);
    cursor: pointer;
    font-size: 22px;
}

.user-messenger-launcher:hover {
    background: #0369a1;
}

.user-messenger-launcher[hidden],
.user-messenger-launcher.hidden {
    display: none !important;
}

.user-messenger-launcher-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    border: 2px solid #fff;
}

.user-messenger-launcher-badge[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .user-messenger,
    .user-messenger-launcher {
        right: 10px;
        bottom: 10px;
    }
}