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


/* ==========================================================
   DARK THEME — DEFAULT
========================================================== */

:root {

    --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 {

    /* 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 {

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

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

    display: flex;

    flex-direction: column;

    padding: 24px 18px;

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

}


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

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 4px 10px;

    margin-bottom: 38px;

}


.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;

}


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

.sidebar nav {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.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;

    overflow: hidden;

}


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

.topbar {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 92px;

    padding: 20px 34px;

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

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

    backdrop-filter: blur(12px);

    z-index: 300;

}


body.light-mode .topbar {

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

}


.topbar h2 {

    font-size: 22px;

    font-weight: 650;

    letter-spacing: -0.4px;

}


.topbar-right {

    display: flex;

    align-items: center;

    gap: 10px;

}


/* ==========================================================
   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 TOGGLE
========================================================== */

.theme-toggle {

    width: 38px;
    height: 38px;

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

    border-radius: 9px;

    background: var(--panel);

    color: var(--text-muted);

    cursor: pointer;

    display: flex;

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

    font-size: 15px;

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

}


.theme-toggle:hover {

    background: var(--panel-hover);

    color: var(--text);

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

    transform: translateY(-1px);

}


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

.schedule-selector,
.profile-selector {

    display: flex;

    align-items: center;

    gap: 9px;

    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;

    align-items: center;

    gap: 5px;

}


.profile-controls select {

    min-width: 120px;

}


.profile-manage-btn {

    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;

}


/* ==========================================================
   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 .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 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;

}


/* ==========================================================
   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 22px;

}


.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-kiwisaver-options {

    margin: 4px 0 8px 26px;

    padding: 12px 14px;

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

    border-radius: 12px;

    background: var(--panel-hover);

}


.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;

}


.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 {

    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 {

    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;

}


/* ==========================================================
   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);

}


/* ==========================================================
   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-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-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;

}


.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));

    }

    .topbar-right {

        gap: 6px;

    }

    .schedule-selector,
    .profile-selector {

        padding: 7px;

    }

}


@media (max-width: 950px) {

    .app {

        grid-template-columns: 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);

    }

    .logo {

        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;

        order: 1;

    }

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

        order: 2;

        margin: 0;

        padding: 8px 2px 2px;

        border-bottom: none;

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

        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: 6px;

        gap: 6px;

    }

    .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 {

        grid-template-columns: auto 1fr;

        gap: 8px;

    }

    .topbar-right .theme-toggle {

        grid-column: auto;

        width: 38px;

        height: 38px;

    }

    .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;

    }

    .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: repeat(2, minmax(0, 1fr));

        gap: 10px;

        align-items: stretch;

    }

    .topbar-right .theme-toggle {

        grid-column: 1 / -1;

        width: 100%;

    }

    .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 {

        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;

    }

    /* 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;

    }

    .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;

    }

    .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)
========================================================== */

.mobile-budget-settings {

    display: contents;

}

.budget-settings-toggle {

    display: none;

}

.budget-settings-body {

    display: contents;

}


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

.auth-panel {

    margin: 0 0 18px;

    padding: 0 0 16px;

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

    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] {

    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-discord {

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

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

}



.auth-btn-discord i {

    color: #5865f2;

}



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

    background: #eef0ff;

    border-color: #a5b4fc;

    color: #312e81;

}



.auth-btn-signout {

    background: transparent;

}