/* ==========================================================
   SPENDWISE AI — MODERN FINTECH DESIGN SYSTEM
   Shared stylesheet for all application pages
   ========================================================== */

/* ==================== 1. GLOBAL VARIABLES ==================== */

:root {
    --primary: #7560f5;
    --primary-dark: #5b43df;
    --primary-light: #f0edff;
    --primary-soft: #e4dfff;

    --secondary: #14b889;
    --secondary-light: #e1f8ef;

    --danger: #ef5b72;
    --danger-light: #fff0f2;

    --warning: #f3ad45;
    --warning-light: #fff5df;

    --info: #4996ee;
    --info-light: #eaf4ff;

    --background: #f7f8fc;
    --surface: #ffffff;
    --surface-soft: #fbfaff;

    --text-primary: #252442;
    --text-secondary: #77788f;
    --text-muted: #a1a2b5;

    --border: #eeedf5;

    --radius-sm: 9px;
    --radius-md: 15px;
    --radius-lg: 21px;
    --radius-xl: 28px;

    --shadow-sm: 0 3px 12px rgba(44, 38, 100, 0.04);
    --shadow-md: 0 8px 26px rgba(44, 38, 100, 0.07);
    --shadow-lg: 0 16px 45px rgba(44, 38, 100, 0.11);

    --transition: 0.25s ease;
}


/* ==================== 2. RESET ==================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;

    color: var(--text-primary);
    background: var(--background);

    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    line-height: 1.3;
}

p {
    color: var(--text-secondary);
}

::selection {
    color: white;
    background: var(--primary);
}


/* ==================== 3. NAVIGATION ==================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: 76px;
    padding: 14px 5%;

    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
}

.navbar h1 {
    margin: 0;

    color: var(--primary);
    font-size: 25px;
    font-weight: 850;
    letter-spacing: -1px;

    white-space: nowrap;
}

.navbar ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.navbar li {
    margin: 0;
}

.navbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 13px;

    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;

    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.navbar a:hover,
.navbar a:focus-visible {
    color: var(--primary);
    background: var(--primary-light);
}

.navbar a.active {
    color: var(--primary);
    background: var(--primary-light);
}


/* ==================== 4. PAGE CONTAINER ==================== */

.container {
    width: min(1240px, 92%);
    margin: 35px auto 65px;
}

.container > h1 {
    margin: 0 0 10px;

    font-size: clamp(27px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -1px;
}

.container > h2 {
    margin: 30px 0 18px;

    font-size: 23px;
    font-weight: 750;
    letter-spacing: -0.5px;
}

.container > p {
    color: var(--text-secondary);
}

section {
    margin-bottom: 28px;
}


/* ==================== 5. DASHBOARD HEADING ==================== */

.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 28px;
}

.dashboard-heading h1 {
    margin: 8px 0;

    font-size: clamp(28px, 3vw, 36px);
    font-weight: 850;
    letter-spacing: -1.3px;
}

.dashboard-heading p {
    margin: 0;
    max-width: 650px;

    font-size: 14px;
}

.eyebrow {
    display: inline-block;

    color: var(--primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.currency-label {
    flex-shrink: 0;

    padding: 11px 16px;

    color: #5143a7;
    background: var(--primary-light);

    border: 1px solid #e3ddff;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 750;
}


/* ==================== 6. FILTER SECTION ==================== */

.filter-section {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;

    margin: 22px 0;
    padding: 19px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

.filter-section .form-group {
    flex: 1 1 150px;
    margin: 0;
}

.dashboard-filters {
    justify-content: flex-start;
}

.dashboard-filters button {
    min-width: 150px;
}


/* ==================== 7. CARDS ==================== */

.card {
    min-width: 0;
    padding: 24px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card h2 {
    margin: 0 0 18px;

    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.card h3 {
    margin-top: 0;
    font-size: 17px;
    font-weight: 750;
}


/* ==================== 8. SUMMARY CARDS ==================== */

.summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;

    margin: 28px 0;
}

.summary-card {
    position: relative;
    overflow: hidden;

    min-width: 0;
    padding: 25px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.summary-card::after {
    position: absolute;
    right: -35px;
    bottom: -55px;

    width: 140px;
    height: 140px;

    content: "";
    border-radius: 50%;
    background: rgba(117, 96, 245, 0.035);

    pointer-events: none;
}

.expense-summary {
    border-top: 4px solid var(--danger);
}

.income-summary {
    border-top: 4px solid var(--secondary);
}

.savings-summary {
    border-top: 4px solid var(--primary);
}

.summary-card-top {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;
}

.summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 13px;

    font-size: 21px;
    font-weight: 800;
}

.expense-summary .summary-icon {
    color: var(--danger);
    background: var(--danger-light);
}

.income-summary .summary-icon {
    color: var(--secondary);
    background: var(--secondary-light);
}

.savings-summary .summary-icon {
    color: var(--primary);
    background: var(--primary-light);
}

.summary-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.summary-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 9px;

    font-size: clamp(22px, 2.3vw, 31px);
    font-weight: 850;
    letter-spacing: -1px;

    overflow-wrap: anywhere;
}

.summary-card p {
    position: relative;
    z-index: 1;

    margin: 0;
    font-size: 12px;
}


/* ==================== 9. DASHBOARD CHART GRID ==================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;

    margin: 28px 0;
}

.dashboard-chart-card {
    min-width: 0;
    padding: 25px;
}

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

.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 22px;
}

.card-heading h2 {
    margin: 5px 0 0;
}

.chart-tag {
    padding: 6px 11px;

    color: var(--primary);
    background: var(--primary-light);

    border-radius: 8px;

    font-size: 11px;
    font-weight: 750;
}

.chart-wrap {
    position: relative;
    width: 100%;
    height: 270px;
}

.chart-wrap.donut {
    height: 285px;
}

.chart-note {
    margin: 18px 0 0;

    color: var(--text-secondary);
    font-size: 12px;
}

.text-link {
    flex-shrink: 0;

    color: var(--primary);
    font-size: 12px;
    font-weight: 750;
}

.text-link:hover {
    text-decoration: underline;
}


/* ==================== 10. BUDGET STATUS ==================== */

.budget-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.budget-status.good {
    color: #087b57;
    background: #e0f8ed;
}

.budget-status.near {
    color: #946000;
    background: #fff2cf;
}

.budget-status.over {
    color: #c5324a;
    background: #ffe5e9;
}

.budget-status.none {
    color: #66677e;
    background: #f0eff6;
}


/* ==================== 11. QUICK ACTIONS ==================== */

.quick-actions-section {
    margin-top: 36px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.section-heading h2 {
    margin: 5px 0 0;

    font-size: 23px;
    font-weight: 800;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.quick-action-card {
    display: flex;
    align-items: center;
    gap: 16px;

    min-width: 0;
    padding: 20px;

    color: var(--text-primary);
    background: var(--surface);

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

    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.quick-action-card:hover {
    color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #dcd5ff;
}

.quick-action-card h3 {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 800;
}

.quick-action-card p {
    margin: 0;
    font-size: 12px;
}

.quick-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    font-size: 23px;
    font-weight: 800;
}

.expense-icon {
    color: var(--danger);
    background: var(--danger-light);
}

.income-icon {
    color: var(--secondary);
    background: var(--secondary-light);
}

.budget-icon {
    color: var(--warning);
    background: var(--warning-light);
}

.ai-icon {
    color: var(--primary);
    background: var(--primary-light);
}

.quick-action-arrow {
    margin-left: auto;

    color: var(--text-muted);
    font-size: 21px;
}


/* ==================== 12. FORMS ==================== */

form {
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-bottom: 20px;
}

.form-group label {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 750;
}

input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;

    color: var(--text-primary);
    background: #ffffff;

    border: 1px solid #e1e2ed;
    border-radius: var(--radius-sm);

    outline: none;
    transition: var(--transition);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #a5a6b7;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #c5bafa;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(117, 96, 245, 0.12);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: auto;
    accent-color: var(--primary);
}

input[type="date"] {
    cursor: pointer;
}

input[type="number"] {
    appearance: textfield;
}


/* ==================== 13. BUTTONS ==================== */

button,
input[type="submit"],
input[type="button"],
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 11px 20px;

    color: #ffffff;
    background: var(--primary);

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-size: 13px;
    font-weight: 750;

    transition: var(--transition);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
    color: #ffffff;
    background: var(--primary-dark);

    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(117, 96, 245, 0.22);
}

button:active,
.btn:active {
    transform: translateY(0);
}

button.delete-btn,
.delete-btn {
    min-height: 36px;
    padding: 8px 12px;

    color: var(--danger);
    background: var(--danger-light);

    border: 1px solid #ffd6dd;
    border-radius: 8px;
}

button.delete-btn:hover,
.delete-btn:hover {
    color: #ffffff;
    background: var(--danger);
    box-shadow: none;
}

button.secondary-btn,
.secondary-btn {
    color: var(--primary);
    background: var(--primary-light);
    border-color: #e0d9ff;
}

button.secondary-btn:hover,
.secondary-btn:hover {
    color: #ffffff;
    background: var(--primary);
}


/* ==================== 14. TABLES ==================== */

.table-container {
    width: 100%;
    margin: 22px 0;
    overflow-x: auto;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

thead {
    background: #f8f7ff;
}

th {
    padding: 15px 17px;

    color: #696781;
    text-align: left;
    white-space: nowrap;

    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.5px;
    text-transform: uppercase;

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

td {
    padding: 15px 17px;

    color: var(--text-secondary);
    font-size: 13px;

    border-bottom: 1px solid #f1f0f7;
}

tbody tr {
    transition: background 0.2s ease;
}

tbody tr:hover {
    background: #fbfaff;
}

tbody tr:last-child td {
    border-bottom: none;
}


/* ==================== 15. PROGRESS BARS ==================== */

progress {
    width: 100%;
    min-width: 65px;
    height: 9px;

    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;

    border: none;
    border-radius: 999px;

    background: #eeedf6;
}

progress::-webkit-progress-bar {
    background: #eeedf6;
    border-radius: 999px;
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, #9b8bff, #7560f5);
    border-radius: 999px;
}

progress::-moz-progress-bar {
    background: linear-gradient(90deg, #9b8bff, #7560f5);
    border-radius: 999px;
}


/* ==================== 16. STATUS BADGES ==================== */

.badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.badge-success,
.status-success {
    color: #087b57;
    background: var(--secondary-light);
}

.badge-danger,
.status-danger {
    color: #c5324a;
    background: var(--danger-light);
}

.badge-warning,
.status-warning {
    color: #946000;
    background: var(--warning-light);
}

.badge-info,
.status-info {
    color: #245ca8;
    background: var(--info-light);
}


/* ==================== 17. MESSAGES ==================== */

.message,
.success-message,
.error-message,
.info-message {
    margin: 16px 0;
    padding: 13px 16px;

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

    font-size: 13px;
    font-weight: 650;
}

.message.success,
.success-message {
    color: #087b57;
    background: var(--secondary-light);
    border: 1px solid #c1f0dc;
}

.message.error,
.error-message {
    color: #c5324a;
    background: var(--danger-light);
    border: 1px solid #ffd6dd;
}

.message.info,
.info-message {
    color: #245ca8;
    background: var(--info-light);
    border: 1px solid #cfe5ff;
}


/* ==================== 18. EMPTY STATES ==================== */

.empty-state {
    padding: 38px 20px;

    color: var(--text-secondary);
    text-align: center;

    background: var(--surface-soft);
    border: 1px dashed #d9d2fb;
    border-radius: var(--radius-md);
}


/* ==================== 19. LINKS AND SEPARATORS ==================== */

small {
    color: var(--text-secondary);
}

hr {
    height: 1px;
    margin: 24px 0;

    background: var(--border);
    border: none;
}


/* ==================== 20. AI PAGE SUPPORT ==================== */

.ai-result,
.ai-card,
.insight-card {
    padding: 24px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.ai-result h2,
.ai-card h2,
.insight-card h2 {
    color: var(--text-primary);
}

.ai-result p,
.ai-card p,
.insight-card p {
    line-height: 1.8;
}


/* ==================== 21. AUTHENTICATION PAGES ==================== */

body:has(.login-btn),
body:has(.guest-btn) {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(117, 96, 245, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(20, 184, 137, 0.10),
            transparent 30%
        ),
        #f7f8fc;
}


/* ==================== 22. FOCUS ACCESSIBILITY ==================== */

:focus-visible {
    outline: 3px solid rgba(117, 96, 245, 0.38);
    outline-offset: 3px;
}


/* ==================== 23. RESPONSIVE DESIGN ==================== */

@media (max-width: 1050px) {

    .navbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .navbar ul {
        justify-content: flex-start;
        width: 100%;
    }

    .summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .container {
        margin-top: 28px;
    }
}


@media (max-width: 760px) {

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card.wide {
        grid-column: auto;
    }

    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .chart-wrap {
        height: 245px;
    }

    .chart-wrap.donut {
        height: 260px;
    }
}


@media (max-width: 600px) {

    body {
        font-size: 13px;
    }

    .navbar {
        position: relative;
        padding: 15px 4%;
    }

    .navbar h1 {
        font-size: 23px;
    }

    .navbar ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .navbar a {
        width: 100%;
        padding: 10px 7px;
        font-size: 12px;
    }

    .container {
        width: 92%;
        margin: 23px auto 40px;
    }

    .container > h1 {
        font-size: 27px;
    }

    .container > h2 {
        font-size: 21px;
    }

    .summary-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .summary-card {
        padding: 21px;
    }

    .summary-card h3 {
        font-size: 27px;
    }

    .card,
    .dashboard-chart-card {
        padding: 18px;
        border-radius: var(--radius-md);
    }

    .dashboard-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-filters .form-group {
        width: 100%;
    }

    .dashboard-filters button {
        width: 100%;
    }

    .filter-section {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    .filter-section .form-group {
        width: 100%;
    }

    .filter-section button {
        width: 100%;
    }

    .card-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    th,
    td {
        padding: 12px;
    }

    table {
        min-width: 600px;
    }

    .quick-action-card {
        padding: 16px;
    }

    .currency-label {
        white-space: normal;
    }

}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

}