/* ============================================
   MyFinance Pro - Premium Desktop Web App
   Glassmorphism Design with Animations
   ============================================ */

/* CSS Variables - Premium Theme */
:root {
    /* Background Colors */
    --bg-primary: #121319;
    --bg-secondary: #1a1a24;
    --bg-tertiary: #1f2029;

    /* Glass Effect */
    --glass-bg: rgba(30, 31, 41, 0.8);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-highlight: rgba(255, 255, 255, 0.08);

    /* Primary Colors */
    --primary: #8a63e5;
    --primary-light: #b892ff;
    --primary-dark: #6a48b9;
    --primary-glow: rgba(138, 99, 229, 0.4);

    /* Accent Colors */
    --accent-cyan: #00d4ff;
    --accent-pink: #ff6b9d;
    --accent-gold: #ffd93d;
    --accent-green: #00d084;
    --accent-orange: #ff9f43;

    /* Status Colors */
    --success: #00d084;
    --success-glow: rgba(0, 208, 132, 0.3);
    --danger: #ff5a5f;
    --danger-glow: rgba(255, 90, 95, 0.3);
    --warning: #ffd93d;
    --info: #54a0ff;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.4);

    /* Jar Colors */
    --jar-nec: #f06d7a;
    --jar-ffa: #8f7cf7;
    --jar-edu: #6fa8f7;
    --jar-play: #e8b95e;
    --jar-ltss: #5fd3a4;
    --jar-give: #e878a2;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 40px var(--primary-glow);

    /* Sidebar */
    --sidebar-width: 280px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ── Design System Tokens ── */

    /* Typography Scale */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 15px;
    --fs-xl: 16px;
    --fs-2xl: 18px;
    --fs-3xl: 20px;
    --fs-4xl: 24px;
    --fs-5xl: 28px;
    --fs-6xl: 32px;

    /* Font Weights */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Semantic Colors */
    --color-profit: #00d084;
    --color-loss: #ff5a5f;
    --color-navy: #1B2559;

    /* Component Sizes */
    --icon-sm: 32px;
    --icon-md: 40px;
    --icon-lg: 48px;
    --icon-xl: 56px;
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ANIMATED BACKGROUND
   ============================================ */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
}

.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-light);
    border-radius: 50%;
    opacity: 0.3;
    animation: floatParticle 15s infinite ease-in-out;
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

.gradient-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: orbFloat 20s infinite ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--primary), var(--accent-pink));
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    bottom: -50px;
    left: -50px;
    animation-delay: -7s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange));
    top: 50%;
    left: 50%;
    animation-delay: -14s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50px, -30px) scale(1.1);
    }

    50% {
        transform: translate(-30px, 50px) scale(0.9);
    }

    75% {
        transform: translate(-50px, -20px) scale(1.05);
    }
}

/* ============================================
   LAYOUT - App Wrapper
   ============================================ */
.app-wrapper {
    display: flex;
    height: 100vh;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 40px var(--primary-glow);

    /* Sidebar */
    --sidebar-width: 280px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ── Design System Tokens ── */

    /* Typography Scale */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 15px;
    --fs-xl: 16px;
    --fs-2xl: 18px;
    --fs-3xl: 20px;
    --fs-4xl: 24px;
    --fs-5xl: 28px;
    --fs-6xl: 32px;

    /* Font Weights */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Semantic Colors */
    --color-profit: #00d084;
    --color-loss: #ff5a5f;
    --color-navy: #1B2559;

    /* Component Sizes */
    --icon-sm: 32px;
    --icon-md: 40px;
    --icon-lg: 48px;
    --icon-xl: 56px;
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ANIMATED BACKGROUND
   ============================================ */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
}

.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-light);
    border-radius: 50%;
    opacity: 0.3;
    animation: floatParticle 15s infinite ease-in-out;
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.3;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

.gradient-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: orbFloat 20s infinite ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--primary), var(--accent-pink));
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    bottom: -50px;
    left: -50px;
    animation-delay: -7s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange));
    top: 50%;
    left: 50%;
    animation-delay: -14s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50px, -30px) scale(1.1);
    }

    50% {
        transform: translate(-30px, 50px) scale(0.9);
    }

    75% {
        transform: translate(-50px, -20px) scale(1.05);
    }
}

/* ============================================
   LAYOUT - App Wrapper
   ============================================ */
.app-wrapper {
    display: flex;
    height: 100vh;
    position: relative;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: #15141e;
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1000;
}

.sidebar-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.logo-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--accent-pink));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: var(--shadow-glow);
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-subtitle {
    font-size: 11px;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

/* Sidebar Navigation - Accordion */
.sidebar-nav {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-sm); /* Reduced padding to give more room */
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px; /* Thin scrollbar for sidebar */
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: var(--glass-border); /* Only show on hover */
}

.nav-item {
    display: flex;
    flex-direction: column;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-normal);
    position: relative;
    cursor: pointer;
}

.nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    transition: height var(--transition-normal);
}

.nav-link:hover {
    background: var(--glass-highlight);
    color: var(--text-primary);
}

.nav-link.active,
.nav-item.open > .nav-link {
    background: rgba(138, 99, 229, 0.15);
    color: white;
}

.nav-link.active::before,
.nav-item.open > .nav-link::before {
    height: 60%;
}

.nav-link i {
    font-size: 18px;
    width: 24px;
    text-align: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.submenu-arrow {
    margin-left: auto;
    font-size: 12px !important;
    transition: transform 0.3s ease;
    width: auto !important;
    margin-right: 0 !important;
}

.nav-item.open .submenu-arrow {
    transform: rotate(180deg);
}

.submenu {
    display: none;
    flex-direction: column;
    padding: 2px 0 6px 42px; /* Adjusted left padding to align with text */
    gap: 2px;
}

.nav-item.open .submenu {
    display: flex;
}

.submenu-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.submenu-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.submenu-link.active {
    color: var(--primary-light);
    font-weight: 600;
    background: rgba(138, 99, 229, 0.08);
}

/* Sidebar Footer */
.sidebar-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--glass-border);
}

.btn-add-transaction {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--primary-light);
    color: #3b2a6b;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-normal);
    margin-bottom: var(--spacing-lg);
}

.btn-add-transaction:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 146, 255, 0.3);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: color var(--transition-fast);
}

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

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-highlight);
    border-radius: var(--radius-md);
}

.avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-plan {
    font-size: 11px;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   CONTENT WRAPPER & TOPBAR
   ============================================ */
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-primary);
}

.topbar {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-xl);
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-primary);
    flex-shrink: 0;
    position: relative;
    z-index: 900;
}



.topbar-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-light);
    margin: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    width: 400px;
}

.search-bar i {
    color: var(--text-muted);
    margin-right: var(--spacing-sm);
    font-size: 14px;
}

.search-bar input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 100%;
    outline: none;
    font-size: 14px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.topbar-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.topbar-btn:hover {
    color: var(--text-primary);
}

.notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: var(--primary-light);
    border-radius: 50%;
}

.user-profile-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    margin-left: var(--spacing-md);
    padding-left: var(--spacing-md);
    border-left: 1px solid var(--glass-border);
}

.user-info-top {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.user-name-top {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-plan-top {
    font-size: 10px;
    color: var(--primary-light);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.avatar-top img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
    position: relative;
    z-index: 1;
}

.main-content.main-content--page-owned-header {
    padding-top: var(--spacing-xl);
}

.main-content::-webkit-scrollbar {
    width: 8px;
}

.main-content::-webkit-scrollbar-track {
    background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
}

.main-content::-webkit-scrollbar-thumb:hover {
    background: var(--glass-highlight);
}

/* ============================================
   GLASSMORPHISM CARDS
   ============================================ */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}

.glass-card:hover {
    border-color: var(--glass-highlight);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Card Sizes */
.glass-card.card-sm {
    padding: var(--spacing-md);
}

.glass-card.card-lg {
    padding: var(--spacing-xl);
}

/* Featured Card */
.glass-card.featured {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(255, 107, 157, 0.1));
    border-color: rgba(108, 92, 231, 0.3);
}

.glass-card.featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(108, 92, 231, 0.15), transparent 70%);
    pointer-events: none;
}

/* Success Card */
.glass-card.success {
    border-left: 3px solid var(--success);
}

/* Danger Card */
.glass-card.danger {
    border-left: 3px solid var(--danger);
}

/* ============================================
   DASHBOARD HEADER
   ============================================ */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
}

.page-title {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-xs);
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-icon {
    width: 44px;
    height: 44px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.btn-icon:hover {
    background: var(--glass-highlight);
    color: var(--primary-light);
    border-color: var(--primary);
}

/* ============================================
   NET WORTH CARD - Hero Section
   ============================================ */
.net-worth-card {
    background: linear-gradient(135deg, var(--primary), #8b5cf6, var(--accent-pink));
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}

.net-worth-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
}

.net-worth-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2));
    pointer-events: none;
}

.net-worth-content {
    position: relative;
    z-index: 1;
}

.net-worth-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
}

.net-worth-amount {
    font-size: 48px;
    font-weight: 900;
    color: white;
    margin-bottom: var(--spacing-md);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.net-worth-amount .currency {
    font-size: 28px;
    opacity: 0.8;
}

.net-worth-change {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    color: white;
    backdrop-filter: blur(10px);
}

.net-worth-change.positive {
    background: rgba(0, 212, 170, 0.3);
}

.net-worth-change.negative {
    background: rgba(255, 107, 107, 0.3);
}

.net-worth-stats {
    display: flex;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.net-worth-stat {
    text-align: center;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.stat-icon.income {
    background: rgba(0, 212, 170, 0.15);
    color: var(--success);
    box-shadow: 0 0 20px var(--success-glow);
}

.stat-icon.expense {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
    box-shadow: 0 0 20px var(--danger-glow);
}

.stat-icon.balance {
    background: rgba(108, 92, 231, 0.15);
    color: var(--primary-light);
    box-shadow: 0 0 20px var(--primary-glow);
}

.stat-icon.savings {
    background: rgba(255, 217, 61, 0.15);
    color: var(--warning);
}

.stat-info {
    flex: 1;
}

.stat-info .label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-info .value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-info .change {
    font-size: 12px;
    color: var(--success);
}

.stat-info .change.negative {
    color: var(--danger);
}

/* ============================================
   HOME DASHBOARD PRO
   ============================================ */
.home-dashboard-pro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.home-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.home-kpi-card,
.home-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.home-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px;
}

.home-kpi-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    font-size: 17px;
}

.home-kpi-icon.net {
    background: rgba(108, 92, 231, 0.16);
    color: var(--primary-light);
}

.home-kpi-icon.income {
    background: rgba(0, 212, 170, 0.15);
    color: var(--success);
}

.home-kpi-icon.expense {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
}

.home-kpi-icon.balance {
    background: rgba(116, 185, 255, 0.14);
    color: #74b9ff;
}

.home-kpi-card span,
.home-panel-header p,
.home-empty-state span,
.home-goal-meta,
.home-due-main span,
.home-due-amount span,
.home-transaction-main span,
.home-transaction-amount span,
.home-jar-mini-name {
    color: var(--text-muted);
}

.home-kpi-card span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
}

.home-kpi-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.home-kpi-card strong.income,
.home-cashflow-breakdown .income {
    color: var(--success);
}

.home-kpi-card strong.expense,
.home-cashflow-breakdown .expense {
    color: var(--danger);
}

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

.home-action-btn {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 750;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.home-action-btn:hover {
    background: var(--glass-highlight);
    border-color: var(--primary);
    color: var(--text-primary);
}

.home-action-btn.income i { color: var(--success); }
.home-action-btn.expense i { color: var(--danger); }
.home-action-btn.transfer i { color: var(--primary-light); }
.home-action-btn.report i { color: var(--warning); }

.home-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
    gap: 18px;
    align-items: start;
}

.home-left-column,
.home-right-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.home-panel {
    padding: 18px;
    min-width: 0;
}

.home-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.home-panel-header.compact {
    margin-bottom: 12px;
}

.home-panel-header h2 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.25;
}

.home-panel-header p {
    margin: 0;
    font-size: 12px;
}

.home-link-button,
.home-period-chip {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
}

.home-link-button {
    padding: 0 10px;
    background: rgba(108, 92, 231, 0.12);
    border: 1px solid rgba(108, 92, 231, 0.28);
    color: var(--primary-light);
    cursor: pointer;
}

.home-link-button:hover {
    background: rgba(108, 92, 231, 0.22);
    color: var(--text-primary);
}

.home-period-chip {
    padding: 0 11px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
}

.home-cashflow-panel {
    overflow: hidden;
    position: relative;
}

.home-cashflow-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--success), var(--danger));
    opacity: 0.9;
}

.home-cashflow-total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0;
    padding: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
}

.home-cashflow-total span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.home-cashflow-total strong {
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 900;
    text-align: right;
    overflow-wrap: anywhere;
}

.home-cashflow-total.positive strong {
    color: var(--success);
}

.home-cashflow-total.negative strong {
    color: var(--danger);
}

.home-cashflow-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-cashflow-breakdown div {
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.home-cashflow-breakdown span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.home-cashflow-breakdown strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 850;
}

.home-transaction-list,
.home-goal-list,
.home-due-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-transaction-row,
.home-goal-row,
.home-due-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.home-transaction-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.home-transaction-row:hover {
    background: var(--glass-highlight);
    border-color: rgba(108, 92, 231, 0.35);
}

.home-transaction-icon,
.home-due-icon,
.home-goal-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    font-size: 17px;
}

.home-transaction-main,
.home-due-main,
.home-goal-main {
    min-width: 0;
}

.home-transaction-main strong,
.home-due-main strong,
.home-goal-name {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-transaction-main span,
.home-due-main span,
.home-transaction-amount span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
}

.home-transaction-amount {
    text-align: right;
    white-space: nowrap;
}

.home-transaction-amount strong {
    display: block;
    font-size: 14px;
    font-weight: 850;
}

.home-jars-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-jar-mini {
    min-width: 0;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.home-jar-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.home-jar-mini-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: rgba(108, 92, 231, 0.12);
    font-size: 16px;
}

.home-status-pill {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.055);
}

.home-status-pill.warning {
    color: var(--warning);
    background: rgba(254, 202, 87, 0.14);
}

.home-status-pill.danger {
    color: var(--danger);
    background: rgba(255, 107, 107, 0.14);
}

.home-jar-mini-name {
    min-height: 18px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-jar-mini-amount {
    margin-bottom: 9px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.home-jar-mini-progress,
.home-goal-progress {
    height: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.075);
    border-radius: 999px;
}

.home-jar-mini-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: inherit;
}

.home-goal-row,
.home-due-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
}

.home-goal-row {
    grid-template-columns: 40px minmax(0, 1fr);
}

.home-goal-progress {
    margin: 7px 0 6px;
}

.home-goal-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.home-goal-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.home-due-amount {
    text-align: right;
    white-space: nowrap;
}

.home-due-amount strong {
    display: block;
    color: var(--danger);
    font-size: 13px;
}

.home-due-amount span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
}

.home-due-amount span.warning {
    color: var(--warning);
}

.home-empty-state {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
}

.home-empty-state.compact {
    min-height: 58px;
}

.home-empty-state i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: rgba(108, 92, 231, 0.12);
    color: var(--primary-light);
}

.home-empty-state strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
}

.home-empty-state span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .home-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-main-grid {
        grid-template-columns: 1fr;
    }

    .home-right-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .home-jars-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .home-kpi-grid,
    .home-quick-actions,
    .home-right-column,
    .home-cashflow-breakdown,
    .home-jars-mini-grid {
        grid-template-columns: 1fr;
    }

    .home-panel,
    .home-kpi-card {
        padding: 14px;
    }

    .home-panel-header,
    .home-cashflow-total {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-cashflow-total strong {
        text-align: left;
        font-size: 24px;
    }

    .home-transaction-row,
    .home-due-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .home-transaction-amount,
    .home-due-amount {
        grid-column: 2;
        text-align: left;
    }
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-title i {
    color: var(--primary-light);
}

.section-action {
    font-size: 13px;
    color: var(--primary-light);
    cursor: pointer;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.section-action:hover {
    color: var(--text-primary);
}

/* ============================================
   6 JARS GRID
   ============================================ */
.jars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.jar-card {
    position: relative;
    padding-top: 4px;
    transition: all var(--transition-normal);
}

.jar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.jar-card.nec::before {
    background: var(--jar-nec);
}

.jar-card.ffa::before {
    background: var(--jar-ffa);
}

.jar-card.edu::before {
    background: var(--jar-edu);
}

.jar-card.play::before {
    background: var(--jar-play);
}

.jar-card.ltss::before {
    background: var(--jar-ltss);
}

.jar-card.give::before {
    background: var(--jar-give);
}

.jar-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.jar-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.jar-card.nec .jar-icon {
    background: rgba(255, 107, 107, 0.15);
}

.jar-card.ffa .jar-icon {
    background: rgba(84, 160, 255, 0.15);
}

.jar-card.edu .jar-icon {
    background: rgba(168, 85, 247, 0.15);
}

.jar-card.play .jar-icon {
    background: rgba(255, 217, 61, 0.15);
}

.jar-card.ltss .jar-icon {
    background: rgba(0, 212, 170, 0.15);
}

.jar-card.give .jar-icon {
    background: rgba(255, 159, 243, 0.15);
}

.jar-info {
    flex: 1;
}

.jar-name {
    font-size: 13px;
    color: var(--text-secondary);
}

.jar-percent {
    font-size: 11px;
    color: var(--text-muted);
}

.jar-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.jar-progress {
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

.jar-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.jar-card.nec .jar-progress-bar {
    background: linear-gradient(90deg, var(--jar-nec), #ff8787);
}

.jar-card.ffa .jar-progress-bar {
    background: linear-gradient(90deg, var(--jar-ffa), #74b9ff);
}

.jar-card.edu .jar-progress-bar {
    background: linear-gradient(90deg, var(--jar-edu), #c084fc);
}

.jar-card.play .jar-progress-bar {
    background: linear-gradient(90deg, var(--jar-play), #ffe066);
}

.jar-card.ltss .jar-progress-bar {
    background: linear-gradient(90deg, var(--jar-ltss), #55efc4);
}

.jar-card.give .jar-progress-bar {
    background: linear-gradient(90deg, var(--jar-give), #ffb8d8);
}

/* ============================================
   WALLETS LIST
   ============================================ */
.wallets-row {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
}

.wallet-card {
    min-width: 220px;
    flex-shrink: 0;
}

.wallet-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.wallet-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.wallet-icon.cash {
    background: rgba(0, 212, 170, 0.15);
}

.wallet-icon.bank {
    background: rgba(84, 160, 255, 0.15);
}

.wallet-icon.credit {
    background: rgba(255, 107, 107, 0.15);
}

.wallet-icon.ewallet {
    background: rgba(168, 85, 247, 0.15);
}

.wallet-info .name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.wallet-info .type {
    font-size: 12px;
    color: var(--text-muted);
}

.wallet-balance {
    font-size: 24px;
    font-weight: 700;
}

.wallet-currency {
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================================
   TRANSACTIONS LIST
   ============================================ */
.transactions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.transaction-item:hover {
    background: var(--glass-highlight);
    transform: translateX(4px);
}

.transaction-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.transaction-info {
    flex: 1;
    min-width: 0;
}

.transaction-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-category {
    font-size: 12px;
    color: var(--text-muted);
}

.transaction-amount {
    text-align: right;
    flex-shrink: 0;
}

.transaction-value {
    font-size: 15px;
    font-weight: 700;
}

.transaction-value.income {
    color: var(--success);
}

.transaction-value.expense {
    color: var(--danger);
}

.transaction-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================
   SAVINGS GOALS
   ============================================ */
.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.goal-card {
    position: relative;
}

.goal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.goal-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.goal-info {
    flex: 1;
}

.goal-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.goal-deadline {
    font-size: 12px;
    color: var(--text-muted);
}

.goal-progress {
    margin-bottom: var(--spacing-md);
}

.goal-progress-bar {
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.goal-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.goal-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.goal-percent {
    font-weight: 600;
}

.goal-amounts {
    color: var(--text-muted);
}

.goal-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--glass-border);
}

.goal-stat {
    text-align: center;
}

.goal-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.goal-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================
   QUICK ACTIONS FAB
   ============================================ */
.fab {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--accent-pink));
    border: none;
    border-radius: var(--radius-full);
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--shadow-glow), var(--shadow-lg);
    z-index: 1000;
    transition: all var(--transition-normal);
}

.fab:hover {
    transform: scale(1.1) rotate(90deg);
}

.fab.active {
    transform: rotate(45deg);
}

.quick-actions-menu {
    position: fixed;
    bottom: calc(var(--spacing-xl) + 70px);
    right: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    z-index: 999;
}

.quick-actions-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.quick-action-item:hover {
    transform: translateX(-4px);
}

.quick-action-item.income {
    border-color: var(--success);
    color: var(--success);
}

.quick-action-item.expense {
    border-color: var(--danger);
    color: var(--danger);
}

.quick-action-item.transfer {
    border-color: var(--info);
    color: var(--info);
}

.quick-action-item i {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-action-item.income i {
    background: rgba(0, 212, 170, 0.2);
}

.quick-action-item.expense i {
    background: rgba(255, 107, 107, 0.2);
}

.quick-action-item.transfer i {
    background: rgba(84, 160, 255, 0.2);
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--spacing-xl);
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--glass-border);
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
}

.modal-close {
    width: 36px;
    height: 36px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: var(--danger);
    color: var(--danger);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.form-input {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: all var(--transition-fast);
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-select {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a0a0b8' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
}

.form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    box-shadow: 0 4px 20px var(--primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--primary-glow);
}

.btn-action-compact {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
}

.btn-action-compact i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #55efc4);
    color: white;
    box-shadow: 0 4px 20px var(--success-glow);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #ff8787);
    color: white;
    box-shadow: 0 4px 20px var(--danger-glow);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: var(--glass-highlight);
    border-color: var(--primary);
    color: var(--primary-light);
}

.btn-block {
    width: 100%;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 3000;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    animation: toastSlideIn 0.3s ease;
}

.toast.success {
    border-left: 3px solid var(--success);
}

.toast.error {
    border-left: 3px solid var(--danger);
}

.toast.warning {
    border-left: 3px solid var(--warning);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   TABS
   ============================================ */
.tab-nav {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.tab-item {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.tab-item:hover {
    color: var(--text-secondary);
}

.tab-item.active {
    background: var(--primary);
    color: white;
}

/* ============================================
   CHARTS PLACEHOLDER
   ============================================ */
.chart-container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
}

.empty-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-lg);
    opacity: 0.5;
}

.empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-text {
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-sm {
    margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
    margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
    margin-bottom: var(--spacing-xl) !important;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

/* ============================================
   ANIMATIONS
   ============================================ */
.fade-in {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    :root {
        --sidebar-width: 240px;
    }
}

@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        left: -100%;
        transition: left var(--transition-normal);
        z-index: 1000;
    }

    .sidebar.open {
        left: 0;
    }

    .main-content {
        margin-left: 0;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .net-worth-amount {
        font-size: 36px;
    }

    .jars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 576px) {
    .main-content {
        padding: var(--spacing-md);
    }

    .net-worth-card {
        padding: var(--spacing-lg);
    }

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

/* ============================================
   COMPATIBILITY - Original App Classes
   ============================================ */

/* Page Header (from original) */
.page-header {
    margin-bottom: var(--spacing-md);
}

.page-header h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: var(--spacing-xs);
}

.page-header p {
    color: var(--text-muted);
    font-size: 14px;
}

/* Card Classes (original app compatibility) */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.card-sm {
    padding: var(--spacing-md);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-action {
    font-size: 13px;
    color: var(--primary-light);
    cursor: pointer;
}

/* Quick Actions Grid (original) */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.quick-action-btn:hover {
    background: var(--glass-highlight);
    transform: translateY(-2px);
}

.quick-action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 20px;
}

.quick-action-icon.income {
    background: rgba(0, 212, 170, 0.15);
    color: var(--success);
}

.quick-action-icon.expense {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
}

.quick-action-icon.transfer {
    background: rgba(84, 160, 255, 0.15);
    color: var(--info);
}

.quick-action-icon.more {
    background: rgba(255, 217, 61, 0.15);
    color: var(--warning);
}

.quick-action-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Transaction List (original) */
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.transaction-item:hover {
    background: var(--glass-highlight);
}

.transaction-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.transaction-info {
    flex: 1;
    min-width: 0;
}

.transaction-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.transaction-category {
    font-size: 12px;
    color: var(--text-muted);
}

.transaction-amount {
    text-align: right;
}

.transaction-amount.income .transaction-value {
    color: var(--success);
}

.transaction-amount.expense .transaction-value {
    color: var(--danger);
}

.transaction-value {
    font-size: 15px;
    font-weight: 700;
}

.transaction-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* Wallet List (original) */
.wallet-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.wallet-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.wallet-item:hover {
    background: var(--glass-highlight);
}

.wallet-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.wallet-icon.cash {
    background: rgba(0, 212, 170, 0.15);
    color: var(--success);
}

.wallet-icon.bank {
    background: rgba(84, 160, 255, 0.15);
    color: var(--info);
}

.wallet-icon.credit {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
}

.wallet-icon.ewallet {
    background: rgba(168, 85, 247, 0.15);
    color: var(--primary);
}

.wallet-info {
    flex: 1;
}

.wallet-name {
    font-size: 15px;
    font-weight: 600;
}

.wallet-type {
    font-size: 12px;
    color: var(--text-muted);
}

.wallet-balance {
    text-align: right;
}

.wallet-amount {
    font-size: 16px;
    font-weight: 700;
}

.wallet-currency {
    font-size: 12px;
    color: var(--text-muted);
}

/* Buttons (original) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    box-shadow: 0 4px 20px var(--primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--primary-glow);
}

.btn-success {
    background: linear-gradient(135deg, var(--success), #55efc4);
    color: white;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #ff8787);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: var(--glass-highlight);
    border-color: var(--primary);
    color: var(--primary-light);
}

/* Tab Navigation (original) */
.tab-nav {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.tab-item {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-fast);
}

.tab-item:hover {
    color: var(--text-secondary);
}

.tab-item.active {
    background: var(--primary);
    color: white;
}

/* Modal (original compatibility) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--glass-border);
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
}

.modal-close {
    width: 36px;
    height: 36px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
}

.modal-close:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: var(--danger);
    color: var(--danger);
}

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

/* Forms (original) */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.form-input,
.form-select {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a0a0b8' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
}

.form-select option {
    background: var(--bg-secondary);
}

/* Toast Notification (original) */
.toast {
    position: fixed;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 3000;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    border-left: 3px solid var(--success);
}

.toast.error {
    border-left: 3px solid var(--danger);
}

/* FAB Button (original) */
.fab {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--accent-pink));
    border: none;
    border-radius: var(--radius-full);
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--shadow-glow), var(--shadow-lg);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.fab:hover {
    transform: scale(1.1);
}

/* Menu List (original) */
.menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.menu-item:hover {
    background: var(--glass-highlight);
}

.menu-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.menu-text {
    flex: 1;
}

.menu-name {
    font-size: 15px;
    font-weight: 600;
}

.menu-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* Category Grid (original) */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-item:hover {
    background: var(--glass-highlight);
}

.category-item.selected {
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.1);
}

.category-icon {
    font-size: 24px;
}

.category-name {
    font-size: 11px;
    text-align: center;
    color: var(--text-secondary);
}

/* Calendar (original) */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-header {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: var(--spacing-sm);
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--glass-bg);
}

.calendar-day:hover {
    background: var(--glass-highlight);
}

.calendar-day.today {
    background: var(--primary);
    color: white;
}

.calendar-day.has-transactions {
    border-bottom: 2px solid var(--success);
}

/* Misc utility classes */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.font-bold {
    font-weight: 700;
}

.cursor-pointer {
    cursor: pointer;
}

/* ============================================
   AMOUNT INPUT - Large Display
   ============================================ */
.amount-display {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.amount-input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 42px;
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    outline: none;
    font-family: inherit;
}

.amount-input::placeholder {
    color: var(--text-muted);
}

.amount-input.income {
    color: var(--success);
}

.amount-input.expense {
    color: var(--danger);
}

.amount-currency {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

/* Numeric Keypad */
.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.numpad-btn {
    aspect-ratio: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.numpad-btn:hover {
    background: var(--glass-highlight);
    border-color: var(--primary);
}

.numpad-btn:active {
    transform: scale(0.95);
    background: var(--primary);
    color: white;
}

.numpad-btn.action {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.numpad-btn.action:hover {
    background: #8b5cf6;
}

.numpad-btn.backspace {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
}

.numpad-btn.clear {
    background: rgba(255, 193, 7, 0.15);
    color: var(--warning);
}

/* ============================================
   Authentication Screen Styles
   ============================================ */

.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0a0a1a 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.auth-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.auth-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 100px rgba(108, 92, 231, 0.15);
    animation: slideUp 0.6s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.auth-logo-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: 36px;
    color: white;
    box-shadow: 0 10px 40px var(--primary-glow);
}

.auth-logo h1 {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-logo p {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 4px;
}

.auth-form h2 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.auth-form .form-group {
    margin-bottom: var(--spacing-md);
}

.auth-form .form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.auth-form .form-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.3s ease;
}

.auth-form .form-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(108, 92, 231, 0.1);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
}

.auth-form .form-input::placeholder {
    color: var(--text-muted);
}

.auth-switch {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: 14px;
    color: var(--text-muted);
}

.auth-switch a {
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-switch a:hover {
    color: var(--accent-cyan);
}

/* ============================================
   FAB (Floating Action Button) Menu
   ============================================ */
.fab-container {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent-pink));
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px var(--primary-glow);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px var(--primary-glow);
}

.fab.active {
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--danger), #ff8787);
}

.fab-menu {
    position: absolute;
    bottom: 72px;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm);
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.2s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fab-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.fab-item:hover {
    background: var(--glass-highlight);
}

.fab-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--fab-color, var(--primary));
    background: color-mix(in srgb, var(--fab-color, var(--primary)) 15%, transparent);
}

.fab-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 6px 0;
}

/* ============================================
   NEW DASHBOARD LAYOUT
   ============================================ */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.top-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.stat-card-new {
    background: #1c1d26;
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-change {
    font-size: 13px;
    font-weight: 600;
}

.stat-change.positive {
    color: var(--success);
}

.stat-change.negative {
    color: var(--danger);
}

.stat-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.middle-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-lg);
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-title-new {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.card-subtitle-new {
    font-size: 13px;
    color: var(--text-secondary);
}

.chart-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.chart-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chart-tab.active {
    background: var(--primary-light);
    color: #1a1a24;
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.goal-item-new {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.goal-progress-circle {
    position: relative;
    width: 48px;
    height: 48px;
    margin-right: var(--spacing-md);
}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 250px;
}

.circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2.5;
}

.circle {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke: var(--primary-light);
}

.goal-percent-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}

.goal-info-new {
    flex: 1;
}

.goal-name-new {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.goal-amount-new {
    font-size: 12px;
    color: var(--text-secondary);
}

.goal-arrow {
    color: var(--text-muted);
    font-size: 12px;
}

.btn-outline-full {
    width: 100%;
    padding: var(--spacing-sm) 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-outline-full:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.view-all-link {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.view-all-link:hover {
    color: var(--primary-light);
}

.recent-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.recent-table th {
    text-align: left;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.recent-table td {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
}

.recent-table tr:last-child td {
    border-bottom: none;
}

.recent-table tr {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.recent-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.transaction-icon-small {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.badge-expense {
    background: rgba(255, 90, 95, 0.15);
    color: var(--danger);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.badge-income {
    background: rgba(0, 208, 132, 0.15);
    color: var(--success);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.amount-expense {
    font-weight: 700;
    color: var(--text-primary);
}

.amount-income {
    font-weight: 700;
    color: var(--success);
}

.sidebar-profile-card {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sidebar-profile-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-profile-card img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    margin-right: 12px;
}

.sidebar-profile-info {
    display: flex;
    flex-direction: column;
}

.sidebar-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-profile-sub {
    font-size: 11px;
    color: var(--text-secondary);
}

.btn-outline-full {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(138, 99, 229, 0.4);
    color: var(--primary-light);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.btn-outline-full:hover {
    background: rgba(138, 99, 229, 0.15);
    border-color: var(--primary-light);
}

/* ================================================================
   DESIGN SYSTEM (ds-*) — Unified Component Library
   All new classes use ds- prefix to coexist with legacy styles.
   ================================================================ */

/* ── DS PAGE HEADER ── */
.ds-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
    gap: var(--spacing-md);
}

.ds-page-header__left {
    flex: 1;
    min-width: 0;
}

.ds-page-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.ds-page-subtitle {
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin: 0;
}

.ds-page-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* ── DS CARD ── */
.ds-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    position: relative;
    transition: all var(--transition-normal);
}

.ds-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ds-card:hover {
    border-color: var(--glass-highlight);
}

.ds-card--sm {
    padding: var(--spacing-md);
}

.ds-card--lg {
    padding: var(--spacing-xl);
}

.ds-card--clickable {
    cursor: pointer;
}

.ds-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ds-card--gradient {
    border: none;
    color: #fff;
}

.ds-card--gradient::before {
    display: none;
}

.ds-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.ds-card__title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.ds-card__subtitle {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ── DS BUTTON ── */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
    color: var(--text-primary);
}

.ds-btn:active {
    transform: scale(0.97);
}

.ds-btn--primary {
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    box-shadow: 0 4px 20px var(--primary-glow);
}

.ds-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--primary-glow);
}

.ds-btn--success {
    background: linear-gradient(135deg, var(--success), #55efc4);
    color: white;
    box-shadow: 0 4px 20px var(--success-glow);
}

.ds-btn--success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--success-glow);
}

.ds-btn--danger {
    background: linear-gradient(135deg, var(--danger), #ff8787);
    color: white;
    box-shadow: 0 4px 20px var(--danger-glow);
}

.ds-btn--danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--danger-glow);
}

.ds-btn--outline {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.ds-btn--outline:hover {
    background: var(--glass-highlight);
    border-color: var(--primary);
    color: var(--primary-light);
}

.ds-btn--ghost {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px;
}

.ds-btn--ghost:hover {
    color: var(--primary-light);
    background: var(--glass-highlight);
}

.ds-btn--sm {
    padding: 6px 12px;
    font-size: var(--fs-base);
    border-radius: var(--radius-sm);
}

.ds-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.ds-btn--icon.ds-btn--sm {
    width: 32px;
    height: 32px;
}

.ds-btn--block {
    width: 100%;
}

/* ── DS INPUT / SELECT / TEXTAREA ── */
.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    padding: 12px var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-family: inherit;
    outline: none;
    transition: all var(--transition-fast);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(138, 99, 229, 0.2);
}

.ds-input::placeholder,
.ds-textarea::placeholder {
    color: var(--text-muted);
}

.ds-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a0a0b8' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-right: 40px;
}

.ds-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.ds-textarea {
    min-height: 80px;
    resize: vertical;
}

.ds-form-group {
    margin-bottom: var(--spacing-md);
}

.ds-form-label {
    display: block;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* ── DS TABLE ── */
.ds-table {
    width: 100%;
    border-collapse: collapse;
}

.ds-table th {
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--fw-semibold);
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: 0;
    border-bottom: 1px solid var(--glass-border);
}

.ds-table th:last-child {
    text-align: right;
}

.ds-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
    font-size: var(--fs-md);
}

.ds-table tr:last-child td {
    border-bottom: none;
}

.ds-table tr {
    transition: background var(--transition-fast);
}

.ds-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.ds-table td:last-child {
    text-align: right;
}

/* ── DS BADGE ── */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    line-height: 1.4;
}

.ds-badge--success {
    background: rgba(0, 208, 132, 0.15);
    color: var(--success);
}

.ds-badge--danger {
    background: rgba(255, 90, 95, 0.15);
    color: var(--danger);
}

.ds-badge--warning {
    background: rgba(255, 217, 61, 0.15);
    color: var(--warning);
}

.ds-badge--info {
    background: rgba(84, 160, 255, 0.15);
    color: var(--info);
}

.ds-badge--primary {
    background: rgba(138, 99, 229, 0.15);
    color: var(--primary-light);
}

.ds-badge--neutral {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

/* ── DS LIST ITEM ── */
.ds-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.ds-list-item:hover {
    background: var(--glass-highlight);
}

.ds-list-item--clickable {
    cursor: pointer;
}

.ds-list-item--clickable:hover {
    transform: translateX(4px);
}

.ds-list-item__icon {
    width: var(--icon-md);
    height: var(--icon-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ds-list-item__icon--sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
    font-size: 14px;
    border-radius: var(--radius-sm);
}

.ds-list-item__icon--lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    font-size: 22px;
}

.ds-list-item__body {
    flex: 1;
    min-width: 0;
}

.ds-list-item__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-list-item__subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

.ds-list-item__right {
    text-align: right;
    flex-shrink: 0;
}

.ds-list-item__value {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.ds-list-item__value--profit {
    color: var(--color-profit);
}

.ds-list-item__value--loss {
    color: var(--color-loss);
}

.ds-list-item__meta {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.ds-list-item__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    padding-left: var(--spacing-sm);
    border-left: 1px solid var(--glass-border);
}

.ds-list-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ── DS EMPTY STATE ── */
.ds-empty {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.ds-empty__icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
    display: block;
}

.ds-empty__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.ds-empty__text {
    font-size: var(--fs-base);
    color: var(--text-muted);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── DS SECTION ── */
.ds-section {
    margin-bottom: var(--spacing-xl);
}

.ds-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.ds-section__title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ds-section__title i {
    color: var(--primary-light);
}

.ds-section__action {
    font-size: var(--fs-base);
    color: var(--primary-light);
    cursor: pointer;
    font-weight: var(--fw-medium);
    transition: color var(--transition-fast);
    background: none;
    border: none;
    text-decoration: none;
}

.ds-section__action:hover {
    color: var(--text-primary);
}

.ds-section__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

/* ── DS PROGRESS BAR ── */
.ds-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.ds-progress--lg {
    height: 8px;
    border-radius: 4px;
}

.ds-progress__bar {
    height: 100%;
    border-radius: inherit;
    transition: width 0.5s ease;
    background: var(--primary-light);
}

.ds-progress__bar--success {
    background: linear-gradient(90deg, var(--success), #55efc4);
}

.ds-progress__bar--danger {
    background: linear-gradient(90deg, var(--danger), #ff8787);
}

.ds-progress__bar--warning {
    background: linear-gradient(90deg, var(--warning), #ffe066);
}

.ds-progress__info {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-sm);
    margin-top: var(--spacing-sm);
}

.ds-progress__label {
    color: var(--text-secondary);
}

.ds-progress__value {
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

/* ── DS STAT CARD ── */
.ds-stat {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--glass-border);
    transition: all var(--transition-normal);
}

.ds-stat:hover {
    border-color: var(--glass-highlight);
}

.ds-stat__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ds-stat__label {
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.ds-stat__value {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.1;
}

.ds-stat__change {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ds-stat__change--up {
    color: var(--color-profit);
}

.ds-stat__change--down {
    color: var(--color-loss);
}

.ds-stat__icon {
    width: var(--icon-xl);
    height: var(--icon-xl);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

/* ── DS ACTION BUTTONS (inline edit/delete) ── */
.ds-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 13px;
    padding: 0;
}

.ds-action-btn:hover {
    background: var(--glass-highlight);
}

.ds-action-btn--edit {
    color: var(--primary-light);
}

.ds-action-btn--edit:hover {
    background: rgba(138, 99, 229, 0.15);
}

.ds-action-btn--delete {
    color: var(--danger);
}

.ds-action-btn--delete:hover {
    background: rgba(255, 90, 95, 0.15);
}

.ds-action-btn--toggle {
    color: var(--primary);
}

.ds-action-btn--toggle:hover {
    background: rgba(138, 99, 229, 0.15);
}

/* ── DS ICON BOX (generic icon container) ── */
.ds-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.ds-icon-box--sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
    font-size: 14px;
    border-radius: var(--radius-sm);
}

.ds-icon-box--md {
    width: var(--icon-md);
    height: var(--icon-md);
    font-size: 18px;
}

.ds-icon-box--lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    font-size: 22px;
}

.ds-icon-box--xl {
    width: var(--icon-xl);
    height: var(--icon-xl);
    font-size: 24px;
}

/* ── DS GRID HELPERS ── */
.ds-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.ds-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.ds-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

/* ── DS SUMMARY BAR (income/expense/balance bar) ── */
.ds-summary-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.ds-summary-bar__item {
    text-align: center;
    padding: var(--spacing-sm) 0;
}

.ds-summary-bar__label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 4px;
}

.ds-summary-bar__value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}

/* ── DS FILTER BAR ── */
.ds-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.ds-filter-bar .ds-input,
.ds-filter-bar .ds-select {
    width: auto;
    min-width: 160px;
    padding: 8px 12px;
    font-size: var(--fs-base);
}

/* ── DS TWO-COLUMN LAYOUT ── */
.ds-layout-2col {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.ds-layout-2col--reverse {
    grid-template-columns: 1fr 320px;
}

.ds-col-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ── DS INFO ROW ── */
.ds-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--glass-border);
}

.ds-info-row:last-child {
    border-bottom: none;
}

.ds-info-row__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--fs-base);
    color: var(--text-secondary);
}

.ds-info-row__value {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

/* ── DS HINT / INFO BOX ── */
.ds-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin-top: var(--spacing-md);
}

.ds-hint i {
    flex-shrink: 0;
}

/* ── DS SPECIFIC COMPONENTS (HOME, CALENDAR, WALLET) ── */
.ds-chart-container {
    height: 300px;
    margin-top: var(--spacing-md);
}

.ds-card__title--mb {
    margin-bottom: var(--spacing-lg);
}

.ds-card--mt {
    margin-top: var(--spacing-sm);
}

.ds-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.ds-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ds-calendar-legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--glass-border);
    padding-top: var(--spacing-sm);
}

.ds-calendar-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ds-calendar-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ds-calendar-legend__dot--income {
    background: var(--success);
}

.ds-calendar-legend__dot--expense {
    background: var(--danger);
}

.ds-summary-bar__item--left {
    text-align: left;
}

.ds-summary-bar__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin-bottom: 4px;
}

.ds-summary-bar__icon {
    color: var(--primary-light);
    margin-right: 8px;
}

.ds-summary-bar__subtitle {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.ds-color-profit {
    color: var(--color-profit) !important;
}

.ds-color-loss {
    color: var(--color-loss) !important;
}

.ds-balance-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin-bottom: var(--spacing-xl);
}

.ds-balance-card__body {
    text-align: center;
}

.ds-balance-card__label {
    font-size: var(--fs-md);
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--spacing-sm);
}

.ds-balance-card__value {
    font-size: var(--fs-6xl);
    font-weight: var(--fw-extrabold);
    color: #fff;
}

/* ── DS RESPONSIVE ENHANCEMENTS ── */
@media (max-width: 1200px) {
    .ds-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .ds-layout-2col {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 992px) {
    .ds-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ds-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ds-layout-2col,
    .ds-layout-2col--reverse {
        grid-template-columns: 1fr;
    }

    .ds-stat__value {
        font-size: var(--fs-4xl);
    }
}

@media (max-width: 768px) {
    .ds-page-header {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .ds-page-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .ds-grid-2,
    .ds-grid-3,
    .ds-grid-4 {
        grid-template-columns: 1fr;
    }

    .ds-summary-bar {
        grid-template-columns: 1fr;
    }

    .ds-stat {
        padding: var(--spacing-md);
    }

    .ds-stat__value {
        font-size: var(--fs-3xl);
    }

    .ds-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ds-filter-bar .ds-input,
    .ds-filter-bar .ds-select {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .ds-page-title {
        font-size: var(--fs-3xl);
    }

    .ds-card {
        padding: var(--spacing-md);
    }

    .ds-card--lg {
        padding: var(--spacing-lg);
    }

    .ds-list-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .ds-list-item__actions {
        flex-direction: column;
    }
}

.topbar-page-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.topbar-title {
    margin: 0;
    line-height: 1.15;
}

.topbar-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.3;
}
/* ============================================
   TRANSACTION HISTORY DASHBOARD
   ============================================ */
.transactions-history-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    font-family: inherit;
}

.transactions-sidebar,
.transactions-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tx-dashboard-card {
    position: relative;
    background: linear-gradient(145deg, rgba(28, 32, 35, 0.96), rgba(18, 22, 25, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.tx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.tx-card-header.compact {
    margin-bottom: 14px;
}

.tx-card-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.tx-icon-btn,
.tx-add-btn,
.tx-export-btn,
.tx-row-actions button,
.tx-search-box button {
    border: 0;
    cursor: pointer;
    color: var(--primary-light);
    background: rgba(181, 133, 255, 0.12);
    transition: all var(--transition-normal);
}

.tx-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.tx-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.tx-icon-btn:hover,
.tx-add-btn:hover,
.tx-export-btn:hover,
.tx-row-actions button:hover,
.tx-search-box button:hover {
    background: rgba(181, 133, 255, 0.22);
    transform: translateY(-1px);
}

.tx-calendar-weekdays,
.tx-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.tx-calendar-weekdays {
    margin-bottom: 10px;
}

.tx-calendar-weekdays span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.tx-calendar-day {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tx-calendar-day.empty {
    pointer-events: none;
}

.tx-calendar-day.active {
    color: #251331;
    background: linear-gradient(135deg, #dba5ff, #a980ff);
    box-shadow: 0 10px 26px rgba(181, 133, 255, 0.28);
}

.tx-day-markers {
    position: absolute;
    left: 50%;
    bottom: 5px;
    display: flex;
    gap: 3px;
    transform: translateX(-50%);
}

.tx-day-markers i,
.tx-calendar-legend i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.tx-day-markers .income,
.tx-calendar-legend .income {
    background: var(--success);
}

.tx-day-markers .expense,
.tx-calendar-legend .expense {
    background: #ffaaa0;
}

.tx-calendar-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.tx-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tx-wallet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tx-wallet-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.tx-wallet-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(181, 133, 255, 0.13);
    color: var(--primary-light);
    font-size: 15px;
}

.tx-wallet-icon.credit {
    background: rgba(255, 133, 133, 0.14);
}

.tx-wallet-icon.bank {
    background: rgba(84, 160, 255, 0.14);
}

.tx-wallet-icon.ewallet {
    background: rgba(181, 133, 255, 0.16);
}

.tx-wallet-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-wallet-balance {
    font-size: 14px;
    font-weight: 700;
}

.tx-wallet-balance.positive {
    color: var(--text-primary);
}

/* ============================================
   REPORTS DASHBOARD
   ============================================ */

.reports-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}

.reports-dashboard .reports-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(31, 32, 41, 0.78);
    box-shadow: var(--shadow-sm);
}

.reports-dashboard .reports-filter-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reports-dashboard .reports-filter-title strong {
    color: var(--text-primary);
    font-size: 15px;
}

.reports-dashboard .reports-filter-title span,
.reports-dashboard .reports-filter-group span {
    color: var(--text-muted);
    font-size: 12px;
}

.reports-dashboard .reports-filter-controls {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.reports-dashboard .reports-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reports-dashboard .reports-period-select {
    min-width: 118px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: var(--bg-secondary);
    font: inherit;
    font-size: 13px;
    outline: none;
}

.reports-dashboard .reports-period-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(184, 146, 255, 0.12);
}

.reports-dashboard .reports-filter-apply {
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-md);
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.reports-dashboard .reports-action-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.reports-dashboard .reports-action-btn {
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(184, 146, 255, 0.22);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-fast);
}

.reports-dashboard .reports-action-btn:hover {
    color: #fff;
    border-color: var(--primary-light);
    background: rgba(184, 146, 255, 0.16);
}

.reports-dashboard .reports-action-message {
    min-height: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.reports-dashboard .reports-action-message.success {
    color: var(--success);
}

.reports-dashboard .reports-action-message.warning {
    color: var(--warning);
}

.reports-dashboard .reports-print-title {
    display: none;
}

.reports-dashboard .reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.reports-dashboard .report-kpi-card,
.reports-dashboard .report-card {
    background: linear-gradient(145deg, rgba(31, 32, 41, 0.92), rgba(18, 19, 25, 0.88));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.reports-dashboard .report-kpi-card {
    position: relative;
    min-height: 138px;
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    overflow: hidden;
}

.reports-dashboard .report-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--primary-light);
    opacity: 0.9;
}

.reports-dashboard .report-kpi-card--income::before {
    background: var(--success);
}

.reports-dashboard .report-kpi-card--expense::before {
    background: var(--danger);
}

.reports-dashboard .report-kpi-title {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.reports-dashboard .report-kpi-value {
    margin-top: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
}

.reports-dashboard .report-kpi-card--income .report-kpi-value {
    color: var(--success);
}

.reports-dashboard .report-kpi-card--expense .report-kpi-value {
    color: var(--danger);
}

.reports-dashboard .report-kpi-status {
    margin-top: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 13px;
}

.reports-dashboard .report-net-positive {
    color: var(--success);
    font-weight: 800;
}

.reports-dashboard .report-net-negative {
    color: var(--danger);
    font-weight: 800;
}

.reports-dashboard .report-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--primary-light);
    background: rgba(184, 146, 255, 0.14);
    font-size: 19px;
    font-weight: 800;
}

.reports-dashboard .report-kpi-card--income .report-kpi-icon {
    color: var(--success);
    background: rgba(0, 208, 132, 0.12);
}

.reports-dashboard .report-kpi-card--expense .report-kpi-icon {
    color: var(--danger);
    background: rgba(255, 90, 95, 0.12);
}

.reports-dashboard .reports-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: var(--spacing-lg);
}

.reports-dashboard .report-card {
    padding: var(--spacing-lg);
}

.reports-dashboard .report-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.reports-dashboard .report-card-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
}

.reports-dashboard .report-card-header p {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
}

.reports-dashboard .report-chart-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

.reports-dashboard .report-chart-tabs button,
.reports-dashboard .report-link-button,
.reports-dashboard .report-text-link {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.reports-dashboard .report-chart-tabs button {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--text-secondary);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
}

.reports-dashboard .report-chart-tabs button.active {
    color: #fff;
    background: var(--primary-light);
    box-shadow: 0 6px 18px rgba(138, 99, 229, 0.28);
}

.reports-dashboard .report-chart-wrap {
    width: 100%;
    overflow: hidden;
}

.reports-dashboard .report-cashflow-chart {
    display: block;
    width: 100%;
    min-height: 240px;
}

.reports-dashboard .report-chart-grid,
.reports-dashboard .report-chart-axis {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

.reports-dashboard .report-chart-line {
    fill: none;
    stroke: var(--primary-light);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px rgba(184, 146, 255, 0.35));
}

.reports-dashboard .report-chart-point circle {
    fill: var(--primary-light);
    stroke: #fff;
    stroke-width: 2;
}

.reports-dashboard .report-chart-label {
    fill: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.reports-dashboard .report-cashflow-summary {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 13px;
}

.reports-dashboard .report-cashflow-summary strong {
    font-size: 18px;
}

.reports-dashboard .report-cashflow-summary .income,
.reports-dashboard .report-amount--income {
    color: var(--success);
}

.reports-dashboard .report-cashflow-summary .expense,
.reports-dashboard .report-amount--expense {
    color: var(--danger);
}

.reports-dashboard .report-goals-card,
.reports-dashboard .report-insight-panel {
    display: flex;
    flex-direction: column;
}

.reports-dashboard .report-goals-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.reports-dashboard .report-goal-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.reports-dashboard .report-progress-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: conic-gradient(var(--primary-light) var(--progress), rgba(255, 255, 255, 0.09) 0);
    position: relative;
}

.reports-dashboard .report-progress-circle::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--bg-secondary);
}

.reports-dashboard .report-progress-circle span {
    position: relative;
    z-index: 1;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
}

.reports-dashboard .report-goal-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.reports-dashboard .report-goal-info strong {
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reports-dashboard .report-goal-info span {
    color: var(--text-muted);
    font-size: 12px;
}

.reports-dashboard .report-empty-state {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-align: center;
    color: var(--text-muted);
}

.reports-dashboard .report-empty-state strong {
    color: var(--text-primary);
}

.reports-dashboard .report-empty-icon {
    font-size: 34px;
}

.reports-dashboard .report-link-button {
    width: 100%;
    min-height: 42px;
    margin-top: auto;
    border-radius: var(--radius-md);
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    font-size: 13px;
    font-weight: 800;
}

.reports-dashboard .report-text-link {
    color: var(--primary-light);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.reports-dashboard .report-table-scroll {
    overflow-x: auto;
}

.reports-dashboard .reports-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: var(--spacing-lg);
}

.reports-dashboard .report-category-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.reports-dashboard .report-category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-sm) var(--spacing-md);
    align-items: center;
}

.reports-dashboard .report-category-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reports-dashboard .report-category-meta strong {
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-dashboard .report-category-meta span {
    color: var(--text-muted);
    font-size: 12px;
}

.reports-dashboard .report-category-amount {
    color: var(--danger);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.reports-dashboard .report-category-progress {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}

.reports-dashboard .report-category-progress span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
}

.reports-dashboard .report-budget-summary {
    display: grid;
    gap: var(--spacing-md);
}

.reports-dashboard .report-budget-summary div {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.reports-dashboard .report-budget-summary span {
    color: var(--text-muted);
    font-size: 12px;
}

.reports-dashboard .report-budget-summary strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.reports-dashboard .report-budget-summary .income {
    color: var(--success);
}

.reports-dashboard .report-budget-summary .expense {
    color: var(--danger);
}

.reports-dashboard .report-empty-state--compact {
    min-height: 132px;
}

.reports-dashboard .report-recent-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.reports-dashboard .report-recent-table th {
    padding: 0 14px 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
}

.reports-dashboard .report-recent-table td {
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    font-size: 13px;
}

.reports-dashboard .report-recent-table td:nth-child(2) {
    color: var(--text-primary);
    font-weight: 700;
}

.reports-dashboard .report-recent-table th:last-child,
.reports-dashboard .report-recent-table td:last-child {
    text-align: right;
}

.reports-dashboard .report-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.reports-dashboard .report-badge--income {
    color: var(--success);
    background: rgba(0, 208, 132, 0.12);
}

.reports-dashboard .report-badge--expense {
    color: var(--danger);
    background: rgba(255, 90, 95, 0.12);
}

.reports-dashboard .report-badge--transfer,
.reports-dashboard .report-badge--saving {
    color: var(--primary-light);
    background: rgba(184, 146, 255, 0.13);
}

.reports-dashboard .report-amount {
    font-weight: 800;
    white-space: nowrap;
}

.reports-dashboard .report-amount--transfer {
    color: var(--info);
}

.reports-dashboard .report-table-empty {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-muted);
}

.reports-dashboard .report-monthly-breakdown {
    margin-top: var(--spacing-sm);
}

.reports-dashboard .report-monthly-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.reports-dashboard .report-monthly-status.positive {
    color: var(--success);
    background: rgba(0, 208, 132, 0.12);
}

.reports-dashboard .report-monthly-status.negative {
    color: var(--danger);
    background: rgba(255, 90, 95, 0.12);
}

.reports-dashboard .report-monthly-status.neutral {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.08);
}

.reports-dashboard .reports-period-tabs {
    display: flex;
    gap: 8px;
    padding: 0;
    flex-wrap: wrap;
}

.reports-dashboard .reports-period-tab {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.reports-dashboard .reports-period-tab.active {
    color: #fff;
    background: rgba(138, 99, 229, 0.2);
    border-color: rgba(138, 99, 229, 0.5);
    box-shadow: none;
}

.reports-dashboard .reports-custom-range {
    display: none;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.reports-dashboard .reports-custom-range.is-visible {
    display: flex;
}

.reports-dashboard .report-insight-section {
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.reports-dashboard .report-insight-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.reports-dashboard .report-insight-title {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.reports-dashboard .report-category-list--compact {
    gap: var(--spacing-sm);
}

.reports-dashboard .report-budget-alert {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.reports-dashboard .report-budget-alert strong {
    color: var(--text-primary);
    font-size: 14px;
}

.reports-dashboard .report-budget-alert span {
    color: var(--text-muted);
    font-size: 12px;
}

.reports-dashboard .report-budget-alert.is-danger {
    border-color: rgba(255, 90, 95, 0.32);
    background: rgba(255, 90, 95, 0.08);
}

.reports-dashboard .report-budget-alert.is-ok {
    border-color: rgba(0, 208, 132, 0.28);
    background: rgba(0, 208, 132, 0.07);
}

.reports-dashboard .reports-custom-range label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.reports-dashboard .reports-date-input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    font: inherit;
    font-size: 13px;
    outline: none;
    color-scheme: dark;
}

.reports-dashboard .reports-date-input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(184, 146, 255, 0.12);
}

.reports-dashboard .reports-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(138, 99, 229, 0.3);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.reports-dashboard .reports-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(138, 99, 229, 0.6);
}

.reports-dashboard .reports-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.reports-dashboard .report-chart-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.reports-dashboard .report-chart-toggle-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.reports-dashboard .report-chart-toggle-btn.active {
    background: rgba(138, 99, 229, 0.2);
    color: #fff;
}

.reports-dashboard .report-chart-toggle-btn svg {
    width: 18px;
    height: 18px;
}

.reports-dashboard .report-action-link {
    color: #b892ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.reports-dashboard .report-action-link:hover {
    text-decoration: underline;
}

.reports-dashboard .report-chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    align-items: center;
}
.reports-dashboard .report-chart-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.reports-dashboard .report-chart-legend span::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.reports-dashboard .report-chart-legend .legend-income::before {
    background: var(--success);
}
.reports-dashboard .report-chart-legend .legend-expense::before {
    background: var(--danger);
}


@media (max-width: 1100px) {
    .reports-dashboard .reports-kpi-grid,
    .reports-dashboard .reports-main-grid,
    .reports-dashboard .reports-analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .reports-dashboard .reports-filter-bar {
        align-items: stretch;
        flex-direction: column;
        padding: var(--spacing-md);
    }

    .reports-dashboard .reports-filter-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .reports-dashboard .reports-action-bar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .reports-dashboard .reports-action-btn {
        width: 100%;
    }

    .reports-dashboard .reports-filter-apply {
        grid-column: 1 / -1;
    }

    .reports-dashboard .reports-period-select {
        width: 100%;
        min-width: 0;
    }

    .reports-dashboard .report-card,
    .reports-dashboard .report-kpi-card {
        padding: var(--spacing-md);
    }

    .reports-dashboard .report-card-header {
        flex-direction: column;
    }

    .reports-dashboard .report-kpi-value {
        font-size: 22px;
    }

    .reports-dashboard .report-chart-tabs {
        width: 100%;
    }

    .reports-dashboard .report-chart-tabs button {
        flex: 1;
    }
}

@media print {
    body {
        background: #fff !important;
        color: #111 !important;
        overflow: visible !important;
    }

    body * {
        visibility: hidden !important;
    }

    #mainContent,
    #mainContent *,
    .reports-dashboard,
    .reports-dashboard * {
        visibility: visible !important;
    }

    #mainContent {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .reports-dashboard {
        display: block !important;
        color: #111 !important;
        background: #fff !important;
        padding: 16px !important;
    }

    .reports-dashboard .reports-print-title {
        display: block !important;
        margin-bottom: 16px !important;
    }

    .reports-dashboard .reports-print-title h1 {
        margin: 0 0 4px !important;
        color: #111 !important;
        font-size: 24px !important;
    }

    .reports-dashboard .reports-print-title p {
        margin: 0 !important;
        color: #444 !important;
    }

    .reports-dashboard .reports-filter-bar,
    .reports-dashboard .reports-action-message,
    .reports-dashboard .report-chart-tabs,
    .reports-dashboard .report-link-button,
    .reports-dashboard .report-text-link {
        display: none !important;
    }

    .reports-dashboard .reports-kpi-grid,
    .reports-dashboard .reports-main-grid,
    .reports-dashboard .reports-analytics-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .reports-dashboard .report-kpi-card,
    .reports-dashboard .report-card,
    .reports-dashboard .report-goal-item,
    .reports-dashboard .report-budget-summary div {
        break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        color: #111 !important;
    }

    .reports-dashboard .report-card-header h2,
    .reports-dashboard .report-kpi-value,
    .reports-dashboard .report-goal-info strong,
    .reports-dashboard .report-recent-table td:nth-child(2) {
        color: #111 !important;
    }

    .reports-dashboard .report-card-header p,
    .reports-dashboard .report-kpi-title,
    .reports-dashboard .report-kpi-status,
    .reports-dashboard .report-goal-info span,
    .reports-dashboard .report-recent-table th,
    .reports-dashboard .report-recent-table td {
        color: #444 !important;
    }

    .reports-dashboard .report-recent-table {
        min-width: 0 !important;
    }
}

.tx-wallet-balance.negative {
    color: #ffaaa0;
}

.tx-empty-mini {
    color: var(--text-muted);
    font-size: 13px;
    padding: 10px 0 2px;
}

.quick-analysis {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
}

.quick-ring {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, #1c2023 0 52%, transparent 53%),
        conic-gradient(#dba5ff 0 58%, #b8b7ff 58% 86%, #6ee7b7 86% 100%);
    color: var(--text-primary);
    flex-shrink: 0;
}

.quick-ring span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.quick-ring strong {
    font-size: 14px;
    font-weight: 700;
}

.quick-analysis-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.quick-analysis-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.quick-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.quick-dot.dot-1 {
    background: #dba5ff;
}

.quick-dot.dot-2 {
    background: #b8b7ff;
}

.quick-dot.dot-3 {
    background: #6ee7b7;
}

.tx-month-summary {
    min-height: 118px;
}

.tx-summary-meta {
    position: absolute;
    top: 22px;
    right: 22px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.tx-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.tx-summary-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tx-summary-item strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

.tx-summary-item .income,
.transaction-amount.income .transaction-value {
    color: var(--success);
}

.tx-summary-item .expense,
.transaction-amount.expense .transaction-value {
    color: #ffaaa0;
}

.tx-summary-item .balance,
.transaction-amount.transfer .transaction-value {
    color: var(--primary-light);
}

.tx-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto 44px;
    gap: 14px;
    align-items: center;
}

.tx-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(28, 32, 35, 0.96);
    color: var(--text-muted);
}

.tx-search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
}

.tx-search-box input::placeholder {
    color: var(--text-muted);
}

.tx-search-box button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.tx-filter-chips {
    display: flex;
    gap: 8px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(28, 32, 35, 0.96);
}

.tx-filter-chips button {
    min-width: 92px;
    border: 0;
    border-radius: 9px;
    padding: 11px 16px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: all var(--transition-normal);
}

.tx-filter-chips button.active {
    color: #31143f;
    background: linear-gradient(135deg, #e3a9ff, #b78cff);
    box-shadow: 0 10px 26px rgba(181, 133, 255, 0.25);
}

.tx-filter-chips button.clear-scope {
    color: var(--primary-light);
    background: rgba(181, 133, 255, 0.12);
}

.tx-export-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--success);
    background: rgba(0, 212, 170, 0.12);
}

.tx-range-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(28, 32, 35, 0.86);
}

.tx-range-filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.tx-range-filter input {
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    padding: 0 10px;
    background: rgba(10, 13, 15, 0.74);
    color: var(--text-primary);
    color-scheme: dark;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
}

.tx-range-filter input::-webkit-calendar-picker-indicator {
    opacity: 0.72;
    cursor: pointer;
    filter: invert(1);
}

.tx-range-filter button {
    height: 36px;
    border: 0;
    border-radius: 9px;
    padding: 0 14px;
    color: #31143f;
    background: linear-gradient(135deg, #e3a9ff, #b78cff);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

.tx-range-filter button.ghost {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
}

.tx-history-list,
.tx-date-group,
.tx-modern-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tx-date-group {
    gap: 12px;
}

.tx-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px;
}

.tx-date-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
}

.tx-date-totals {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.tx-date-totals span {
    font-size: 14px;
    font-weight: 600;
}

.tx-date-totals .income {
    color: var(--success);
}

.tx-date-totals .expense {
    color: #ffaaa0;
}

.tx-modern-item {
    min-height: 86px;
    padding: 18px 20px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(28, 32, 35, 0.98), rgba(22, 26, 29, 0.98));
}

.tx-modern-item:hover {
    transform: translateY(-2px);
}

.tx-modern-item .transaction-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 20px;
}

.tx-modern-item .transaction-info {
    cursor: pointer;
}

.tx-modern-item .transaction-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.tx-modern-item .transaction-category {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.tx-modern-item .transaction-amount {
    cursor: pointer;
    min-width: 116px;
}

.tx-modern-item .transaction-value {
    font-size: 16px;
    font-weight: 700;
}

.tx-modern-item .transaction-time {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
}

.tx-row-actions {
    display: flex;
    gap: 6px;
    margin-left: 2px;
}

.tx-row-actions button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.tx-row-actions button.danger {
    color: #ffaaa0;
    background: rgba(255, 107, 107, 0.12);
}

.tx-empty-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(28, 32, 35, 0.68);
    text-align: center;
}

.tx-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light);
    background: rgba(181, 133, 255, 0.13);
    font-size: 24px;
}

.tx-empty-state strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.tx-empty-state span {
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 1180px) {
    .transactions-history-layout {
        grid-template-columns: 1fr;
    }

    .transactions-sidebar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .transactions-sidebar,
    .tx-summary-grid,
    .tx-toolbar {
        grid-template-columns: 1fr;
    }

    .tx-filter-chips {
        overflow-x: auto;
    }

    .tx-filter-chips button {
        min-width: 104px;
        white-space: nowrap;
    }

    .tx-modern-item {
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    .transactions-history-layout {
        gap: 16px;
    }

    .tx-dashboard-card {
        padding: 18px;
    }

    .tx-summary-meta {
        position: static;
        margin-bottom: 10px;
    }

    .tx-modern-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .tx-modern-item .transaction-amount,
    .tx-row-actions {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }
}

/* --- NEW JARS DASHBOARD LAYOUT --- */
.jars-dashboard-layout {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
}
.jars-main-column {
    flex: 7;
    min-width: 0;
}
.jars-side-column {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (max-width: 1024px) {
    .jars-dashboard-layout {
        flex-direction: column;
    }
    .jars-main-column, .jars-side-column {
        flex: none;
        width: 100%;
    }
}

.jars-overview-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}
.jars-overview-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.jars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}
@media (max-width: 768px) {
    .jars-grid {
        grid-template-columns: 1fr;
    }
}

.jar-detail-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    position: relative;
}

.jars-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.donut-container {
    display: flex;
    justify-content: center;
    margin: var(--spacing-lg) 0;
}
.jar-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.donut-inner {
    width: 120px;
    height: 120px;
    background: var(--bg-card); /* Should match card bg to look like a donut */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.donut-percent {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}
.donut-label {
    font-size: 11px;
    color: var(--text-muted);
}

.jar-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--spacing-lg);
}
.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.legend-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.jars-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.jars-main-column,
.jars-side-column {
    min-width: 0;
}

.jars-side-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jars-overview-card {
    padding: 20px 24px;
    border-radius: 14px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 78% 18%, rgba(139, 92, 246, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(63, 44, 124, 0.88), rgba(30, 26, 65, 0.96));
    border: 1px solid rgba(167, 139, 250, 0.2);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.jars-overview-title {
    color: rgba(248, 250, 252, 0.72);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.jars-overview-amount {
    color: #fff;
    font-size: 34px;
    font-weight: 850;
    line-height: 1.15;
    margin: 6px 0 18px;
    text-align: center;
}

.jars-overview-note {
    max-width: 560px;
    margin: -8px auto 18px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
    text-align: center;
}

.jars-overview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.jars-overview-metric {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
}

.jars-overview-icon {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
}

.jars-overview-icon.income {
    color: #86efac;
}

.jars-overview-icon.expense {
    color: #fca5a5;
}

.jars-overview-icon.ratio {
    color: #c4b5fd;
}

.jars-overview-metric span {
    color: rgba(226, 232, 240, 0.72);
    font-size: 11px;
    font-weight: 700;
}

.jars-overview-metric strong {
    color: #fff;
    font-size: 14px;
    font-weight: 850;
}

.jars-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.jars-section-heading h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
}

.jars-section-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.jars-grid {
    gap: 12px;
}

.jar-detail-card {
    min-height: 188px;
    padding: 14px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--jar-color) 10%, transparent), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
        rgba(15, 18, 30, 0.96);
    border: 1px solid color-mix(in srgb, var(--jar-color) 20%, rgba(255, 255, 255, 0.07));
    border-top: 2px solid color-mix(in srgb, var(--jar-color) 72%, #0f172a);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.jar-card-header,
.jar-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jar-card-header {
    justify-content: space-between;
    margin-bottom: 12px;
}

.jar-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jar-color);
    background: color-mix(in srgb, var(--jar-color) 13%, transparent);
    flex-shrink: 0;
}

.jar-card-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 850;
}

.jar-card-subtitle {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.jar-status-badge {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.jar-status-badge.normal,
.jar-card-stats strong.normal {
    color: #86efac;
}

.jar-status-badge.normal {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(134, 239, 172, 0.2);
}

.jar-status-badge.warning,
.jar-card-stats strong.warning {
    color: #fde68a;
}

.jar-status-badge.warning {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(253, 230, 138, 0.22);
}

.jar-status-badge.exceeded,
.jar-card-stats strong.exceeded,
.jar-card-stats strong.negative {
    color: #fda4af;
}

.jar-status-badge.exceeded {
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(253, 164, 175, 0.22);
}

.jar-card-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    margin-bottom: 12px;
}

.jar-card-stats span {
    color: var(--text-muted);
    font-size: 11px;
}

.jar-card-stats strong {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.jar-card-progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.jar-card-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--jar-bar-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--jar-bar-color) 26%, transparent);
}

.jars-action-btn,
.jar-guide-detail-btn {
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.jars-action-btn.primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(124, 58, 237, 0.92));
    border-color: rgba(167, 139, 250, 0.34);
}

.jars-action-btn.danger {
    color: #f9a8d4;
    border-color: rgba(244, 114, 182, 0.28);
}

.jars-action-btn:hover,
.jar-guide-detail-btn:hover {
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(124, 58, 237, 0.18);
}

.jar-ratio-card,
.jar-guide-card {
    border-radius: 12px;
    background: rgba(15, 18, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.jar-guide-card {
    padding: 14px;
}

.jar-side-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 850;
}

.donut-container {
    margin: 16px 0;
}

.jar-donut {
    width: 178px;
    height: 178px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 30px rgba(0, 0, 0, 0.26);
}

.donut-inner {
    width: 104px;
    height: 104px;
    background: #141722;
}

.jar-ratio-warning {
    color: var(--warning);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
}

.legend-item {
    color: var(--text-secondary);
}

.jar-guide-card-header {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.jar-guide-card-header p {
    margin: 7px 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.48;
}

.jar-guide-card-header > i {
    color: var(--text-muted);
    margin-top: 2px;
}

.jar-guide-detail-btn {
    width: 100%;
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.28);
}

.jars-empty-state {
    padding: 36px;
    text-align: center;
    color: var(--text-muted);
}

.jars-empty-state i {
    display: block;
    margin-bottom: 12px;
    color: var(--primary-light);
    font-size: 28px;
}

.jar-guide-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 5, 14, 0.72);
    backdrop-filter: blur(10px);
}

.jar-guide-modal-overlay.active {
    display: flex;
}

.jar-guide-modal {
    width: min(560px, 100%);
    max-height: min(720px, 88vh);
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.25), transparent 36%),
        linear-gradient(180deg, rgba(31, 34, 48, 0.98), rgba(18, 20, 31, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.jar-guide-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 10px;
}

.jar-guide-modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 21px;
    font-weight: 850;
}

.jar-guide-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.jar-guide-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.jar-guide-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.jar-guide-tab {
    height: 46px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.jar-guide-tab.active {
    color: #c4b5fd;
    border-bottom-color: #8b5cf6;
}

.jar-guide-modal-body {
    padding: 16px 24px 24px;
    max-height: calc(88vh - 128px);
    overflow-y: auto;
}

.jar-guide-list-modal {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.jar-guide-modal-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: rgba(255, 255, 255, 0.018);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.jar-guide-modal-item:last-child {
    border-bottom: 0;
}

.jar-guide-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jar-color);
    background: color-mix(in srgb, var(--jar-color) 18%, transparent);
}

.jar-guide-modal-item strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 850;
}

.jar-guide-modal-item p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.jar-guide-notes {
    display: grid;
    gap: 10px;
}

.jar-guide-note {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 13px 14px;
    border-radius: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13px;
    line-height: 1.45;
}

.jar-guide-note-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
}

@media (max-width: 1180px) {
    .jars-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .jars-side-column {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .jars-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .jars-dashboard-layout {
        gap: 14px;
    }

    .jars-side-column,
    .jars-overview-metrics {
        grid-template-columns: 1fr;
    }

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

    .jars-actions {
        flex-direction: column;
    }

    .jars-action-btn {
        width: 100%;
    }

    .jars-overview-card {
        padding: 18px;
    }

    .jars-overview-amount {
        font-size: 28px;
        text-align: left;
    }

    .jars-overview-title {
        text-align: left;
    }

    .jar-guide-modal-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .jar-guide-modal {
        max-height: 92vh;
        border-radius: 18px 18px 12px 12px;
    }

    .jar-guide-modal-header,
    .jar-guide-modal-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .jar-guide-tabs {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.jar-clickable-card {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.jar-clickable-card:hover,
.jar-clickable-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    outline: none;
}

.jar-detail-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.jar-detail-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    justify-content: space-between;
}

.jar-detail-back {
    flex-shrink: 0;
}

.jar-detail-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.jar-detail-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.jar-detail-kicker {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.jar-detail-title {
    margin: 2px 0 4px;
    font-size: 28px;
    color: var(--text-primary);
}

.jar-detail-description {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0;
}

.jar-detail-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.jar-detail-summary-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-width: 0;
}

.summary-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.summary-value {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.summary-value.expense,
.jar-detail-tx-amount {
    color: var(--danger);
}

.summary-value.income {
    color: var(--success);
}

.jar-detail-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 118, 117, 0.12);
    border: 1px solid rgba(255, 118, 117, 0.35);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-weight: 700;
}

.jar-detail-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.jar-detail-filter {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 14px;
}

.jar-detail-filter.active,
.jar-detail-filter:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.jar-detail-custom-range {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
    gap: var(--spacing-md);
    align-items: end;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.jar-detail-transactions {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.jar-detail-section-title {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.jar-detail-section-title h3 {
    margin: 0;
    font-size: 18px;
}

.jar-detail-section-title span {
    color: var(--danger);
    font-weight: 800;
}

.jar-detail-transaction-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.jar-detail-transaction-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: var(--spacing-md);
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
}

.jar-detail-tx-date span,
.jar-detail-tx-title,
.jar-detail-tx-amount {
    font-weight: 800;
}

.jar-detail-tx-date small,
.jar-detail-tx-meta,
.jar-detail-tx-note {
    color: var(--text-muted);
    font-size: 12px;
}

.jar-detail-tx-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jar-detail-tx-main {
    min-width: 0;
}

.jar-detail-tx-title {
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jar-detail-tx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jar-detail-tx-note {
    margin-top: 4px;
}

.jar-detail-tx-amount {
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
}

.jar-detail-empty {
    color: var(--text-muted);
    text-align: center;
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
}

@media (max-width: 1024px) {
    .jar-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .jar-detail-header {
        flex-direction: column;
    }

    .jar-detail-summary,
    .jar-detail-custom-range,
    .jar-detail-transaction-item {
        grid-template-columns: 1fr;
    }

    .jar-detail-tx-amount {
        text-align: left;
    }
}

.jar-detail-panel-root {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.jar-detail-panel-root.active {
    display: block;
}

.jar-detail-panel-open {
    overflow: hidden;
}

.jar-detail-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 18, 0.72);
    backdrop-filter: blur(8px);
}

.jar-detail-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-top: 5px solid var(--jar-color);
    border-radius: var(--radius-md);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
    padding: 24px;
}

.jar-detail-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.jar-detail-panel-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.jar-detail-panel-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--jar-color) 18%, transparent);
    color: var(--jar-color);
    border-radius: var(--radius-md);
    font-size: 28px;
}

.jar-detail-panel-heading {
    min-width: 0;
}

.jar-detail-panel-heading h2 {
    margin: 2px 0 8px;
    color: var(--text-primary);
    font-size: 24px;
}

.jar-detail-panel-kicker {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.jar-detail-panel-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--jar-color) 16%, transparent);
    color: var(--jar-color);
    font-size: 12px;
    font-weight: 800;
}

.jar-detail-panel-status.is-danger {
    background: rgba(255, 107, 107, 0.14);
    color: var(--danger);
}

.jar-detail-panel-close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.jar-detail-panel-close:hover {
    color: var(--text-primary);
    border-color: var(--jar-color);
}

.jar-detail-panel-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.jar-detail-metric,
.jar-detail-panel-insights > div,
.jar-detail-panel-side,
.jar-detail-panel-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.jar-detail-metric {
    padding: 16px;
    min-width: 0;
}

.jar-detail-metric span,
.jar-detail-panel-insights span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.jar-detail-metric strong,
.jar-detail-panel-insights strong {
    color: var(--text-primary);
    font-size: 20px;
    overflow-wrap: anywhere;
}

.jar-detail-metric .is-expense,
.jar-detail-panel-tx-amount {
    color: var(--danger);
}

.jar-detail-metric .is-income {
    color: var(--success);
}

.jar-detail-panel-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.jar-detail-panel-filter {
    min-height: 36px;
    padding: 0 13px;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.jar-detail-panel-filter.active,
.jar-detail-panel-filter:hover {
    background: var(--jar-color);
    border-color: var(--jar-color);
    color: #fff;
}

.jar-detail-panel-custom {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
    padding: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.jar-detail-panel-custom label span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.jar-detail-panel-custom input {
    width: 100%;
    min-height: 40px;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 0 12px;
}

.jar-detail-panel-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.jar-detail-panel-insights > div {
    padding: 14px;
}

.jar-detail-panel-insights strong {
    font-size: 15px;
}

.jar-detail-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
}

.jar-detail-panel-section,
.jar-detail-panel-side {
    padding: 18px;
    min-width: 0;
}

.jar-detail-panel-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.jar-detail-panel-section-head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
}

.jar-detail-panel-section-head span {
    color: var(--danger);
    font-weight: 900;
}

.jar-detail-panel-tx-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jar-detail-panel-tx {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

.jar-detail-panel-tx-date,
.jar-detail-panel-tx-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.jar-detail-panel-tx-date strong,
.jar-detail-panel-tx-main strong {
    color: var(--text-primary);
    font-size: 13px;
}

.jar-detail-panel-tx-date span,
.jar-detail-panel-tx-main span {
    color: var(--text-muted);
    font-size: 12px;
}

.jar-detail-panel-tx-main strong,
.jar-detail-panel-tx-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jar-detail-panel-badge {
    padding: 5px 9px;
    background: color-mix(in srgb, var(--jar-color) 15%, transparent);
    color: var(--jar-color);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.jar-detail-panel-tx-amount {
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.jar-detail-panel-empty,
.jar-detail-panel-mini-empty {
    color: var(--text-muted);
    text-align: center;
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-md);
    padding: 26px 14px;
}

.jar-detail-panel-rank {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.jar-detail-panel-rank span {
    min-width: 0;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jar-detail-panel-rank strong {
    color: var(--text-primary);
    white-space: nowrap;
}

.jar-detail-panel-days-head {
    margin-top: 18px;
}

@media (max-width: 1024px) {
    .jar-detail-panel-summary,
    .jar-detail-panel-insights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jar-detail-panel-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .jar-detail-panel {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        padding: 16px;
    }

    .jar-detail-panel-header,
    .jar-detail-panel-title-row {
        align-items: flex-start;
    }

    .jar-detail-panel-summary,
    .jar-detail-panel-insights,
    .jar-detail-panel-custom,
    .jar-detail-panel-tx {
        grid-template-columns: 1fr;
    }

    .jar-detail-panel-badge {
        width: fit-content;
    }
}

.guide-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guide-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.guide-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.guide-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.guide-text strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

/* Custom columns for report-recent-table */
.reports-dashboard .report-recent-table td.income-col {
    color: var(--success);
    font-weight: 700;
}
.reports-dashboard .report-recent-table td.expense-col {
    color: var(--danger);
    font-weight: 700;
}
.reports-dashboard .report-recent-table td.neutral-col {
    color: var(--text-secondary);
    font-weight: 700;
}
.reports-dashboard .report-recent-table td:nth-child(1) strong {
    color: var(--text-primary);
}
.reports-dashboard .report-recent-table th {
    text-align: right;
}
.reports-dashboard .report-recent-table th:nth-child(1),
.reports-dashboard .report-recent-table td:nth-child(1) {
    text-align: left;
}
.reports-dashboard .report-recent-table th:last-child,
.reports-dashboard .report-recent-table td:last-child {
    text-align: center;
}

/* Finance list card grids: investments, debts, savings */
.investment-grid,
.debt-grid,
.savings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.investment-grid > .card,
.debt-grid > .card,
.savings-grid > .card {
    margin-bottom: 0 !important;
    min-width: 0;
}

.finance-card {
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
        var(--glass-bg);
}

.finance-card,
.finance-card * {
    min-width: 0;
}

.finance-card-title,
.finance-subtitle {
    min-width: 0;
    overflow-wrap: anywhere;
}

.finance-card .finance-subtitle {
    line-height: 1.35;
}

.finance-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
    margin-bottom: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(108, 92, 231, 0.14);
    color: var(--primary-light);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.finance-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
}

.finance-metrics > div {
    min-width: 0;
}

.finance-metrics > div > div:first-child {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    line-height: 1.25;
}

.finance-metrics strong,
.finance-metrics > div > div:last-child {
    display: block;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.finance-metric-wide {
    grid-column: 1 / -1;
}

.finance-card-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    align-items: center;
}

.finance-card-actions .finance-action-btn {
    flex: 0 1 auto !important;
    min-width: 96px;
    max-width: 160px;
    padding: 8px 12px !important;
    justify-content: center;
}

.finance-card-actions .finance-action-danger {
    background: rgba(255, 107, 107, 0.12) !important;
    border-color: rgba(255, 107, 107, 0.28) !important;
    color: var(--danger) !important;
}

.trade-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.trade-history-card {
    margin: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    min-width: 0;
}

.trade-history-card .transaction-details,
.trade-history-card .transaction-amount {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Investments dashboard */
.investments-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}

.investment-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.investment-hero h1 {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 800;
}

.investment-hero p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.investment-sync-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.investment-sync-line strong {
    color: var(--success);
}

.investment-sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 12px rgba(0, 208, 132, 0.45);
}

.investment-hero-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.investment-primary-btn,
.investment-secondary-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.investment-primary-btn {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    box-shadow: 0 12px 24px rgba(138, 99, 229, 0.22);
}

.investment-secondary-btn {
    color: var(--text-primary);
    border: 1px solid rgba(184, 146, 255, 0.28);
    background: rgba(255, 255, 255, 0.04);
}

.investment-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.investment-kpi-card,
.investment-panel,
.investment-history-section {
    background: linear-gradient(145deg, rgba(31, 32, 41, 0.92), rgba(18, 19, 25, 0.88));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.investment-kpi-card {
    min-height: 112px;
    padding: var(--spacing-lg);
}

.investment-kpi-card span,
.investment-position-row span,
.investment-kpi-card small {
    color: var(--text-muted);
    font-size: 12px;
}

.investment-kpi-card strong {
    display: block;
    margin-top: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1.15;
}

.investment-kpi-card--success strong,
.investment-pnl.is-positive strong,
.investment-pnl.is-positive em {
    color: var(--success);
}

.investment-kpi-card--danger strong,
.investment-pnl.is-negative strong,
.investment-pnl.is-negative em {
    color: var(--danger);
}

.investment-panel {
    overflow: hidden;
}

.investment-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.investment-tabs button {
    min-height: 56px;
    padding: 0 28px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.investment-tabs button.active {
    color: var(--primary-light);
    border-bottom-color: var(--primary-light);
    background: rgba(184, 146, 255, 0.06);
}

.investment-empty-state {
    min-height: 420px;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
}

.investment-empty-icon {
    width: 86px;
    height: 86px;
    margin-bottom: var(--spacing-lg);
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    font-size: 30px;
}

.investment-empty-state h3 {
    margin: 0 0 var(--spacing-sm);
    color: var(--text-primary);
    font-size: 22px;
}

.investment-empty-state p {
    max-width: 430px;
    margin: 0 0 var(--spacing-lg);
    line-height: 1.55;
}

.investment-position-list {
    display: grid;
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.investment-position-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) repeat(4, minmax(120px, 1fr)) minmax(130px, auto);
    gap: var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(18, 19, 25, 0.95);
}

.investment-symbol-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.investment-symbol-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    color: var(--primary-light);
    background: rgba(184, 146, 255, 0.12);
}

.investment-symbol-cell strong,
.investment-position-row strong {
    color: var(--text-primary);
}

.investment-symbol-cell span {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.investment-pnl em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
}

.investment-row-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.investment-row-actions button,
.investment-section-title button {
    border: 0;
    color: var(--primary-light);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.investment-realized-note {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 12px;
}

.investment-history-section {
    padding: var(--spacing-lg);
}

.investment-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.investment-section-title h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 22px;
}

.investment-history-empty {
    min-height: 58px;
    padding: var(--spacing-md);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    font-style: italic;
}

.investment-history-list {
    display: grid;
    gap: 10px;
}

.investment-history-row {
    display: grid;
    grid-template-columns: 76px minmax(90px, 1fr) minmax(90px, auto) minmax(110px, auto);
    gap: var(--spacing-md);
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
}

.investment-history-type {
    color: var(--success);
    font-weight: 800;
}

.investment-history-type.is-sell {
    color: var(--danger);
}

@media (max-width: 900px) {
    .investment-grid,
    .debt-grid,
    .savings-grid,
    .trade-history-grid {
        grid-template-columns: 1fr;
    }

    .investment-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .investment-hero-actions {
        justify-content: flex-start;
    }

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

    .investment-position-row {
        grid-template-columns: 1fr 1fr;
    }

    .investment-symbol-cell,
    .investment-row-actions,
    .investment-realized-note {
        grid-column: 1 / -1;
    }

    .investment-row-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .finance-metrics {
        grid-template-columns: 1fr !important;
    }

    .finance-card-actions .finance-action-btn {
        flex: 1 1 120px !important;
        max-width: none;
    }

    .investment-kpi-grid,
    .investment-position-row,
    .investment-history-row {
        grid-template-columns: 1fr;
    }

    .investment-hero-actions,
    .investment-primary-btn,
    .investment-secondary-btn {
        width: 100%;
    }

    .investment-tabs button {
        flex: 1;
        padding: 0 12px;
    }

    .investment-empty-state {
        min-height: 320px;
        padding: var(--spacing-lg);
    }
}

/* =========================================
   NEW INVESTMENTS DASHBOARD STYLES
   ========================================= */

.investments-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* HERO SECTION */
.investment-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.investment-hero-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ih-title-small {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ih-title-large {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.ih-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.ih-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(39, 174, 96, 0.1);
    border-radius: 12px;
    width: fit-content;
    color: var(--text-secondary);
}

.ih-status-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
}

.ih-status-text {
    color: var(--success);
    font-weight: 600;
}

.investment-hero-actions {
    display: flex;
    gap: 12px;
}

.ih-btn-primary, .ih-btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--spacing-lg);
    height: 44px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.ih-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #a29bfe 100%);
    color: #fff;
}
.ih-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.ih-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ih-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* KPI CARDS */
.investment-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.ih-kpi-card {
    background: #1e2126; /* Dark background */
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.ih-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: rgba(255, 255, 255, 0.1);
}
.ih-kpi-card.tone-success::before { background: var(--success); }
.ih-kpi-card.tone-danger::before { background: var(--danger); }
.ih-kpi-card.tone-neutral::before { background: var(--primary); }

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.kpi-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
}
.tone-success .kpi-icon { color: var(--success); background: rgba(39, 174, 96, 0.1); }
.tone-danger .kpi-icon { color: var(--danger); background: rgba(231, 76, 60, 0.1); }
.tone-neutral .kpi-icon { color: var(--primary-light); background: rgba(108, 92, 231, 0.1); }

.kpi-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}

.kpi-hint {
    font-size: 12px;
    color: var(--text-muted);
}
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }


/* TABLE LAYOUT */
.investment-table {
    background: #1e2126;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.investment-table-header {
    display: grid;
    grid-template-columns: minmax(140px, 1.5fr) 1fr 1fr 1fr 1fr 80px;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.investment-position-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.5fr) 1fr 1fr 1fr 1fr 80px;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    align-items: center;
    transition: background 0.2s;
}

.investment-position-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.investment-position-row:last-child {
    border-bottom: none;
}

/* Col styling */
.col-symbol {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.col-symbol strong { font-size: 16px; color: var(--text-primary); }
.col-symbol span { font-size: 12px; color: var(--text-muted); }

.col-volume strong, .col-price strong, .col-cost strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.col-pnl {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.col-pnl strong { font-size: 14px; font-weight: 600; }
.col-pnl em { font-size: 12px; font-style: normal; }
.col-pnl.is-positive strong, .col-pnl.is-positive em { color: var(--success); }
.col-pnl.is-negative strong, .col-pnl.is-negative em { color: var(--danger); }

.col-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
}
.gavel-btn {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}
.gavel-btn:hover { background: rgba(46, 204, 113, 0.2); }

.eye-btn {
    background: rgba(162, 155, 254, 0.1);
    color: #a29bfe;
}
.eye-btn:hover { background: rgba(162, 155, 254, 0.2); }

.investment-table-footer {
    text-align: center;
    padding: var(--spacing-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-light);
    background: #1e2126;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.investment-table-footer span:hover { text-decoration: underline; }

/* TRADE HISTORY */
.ih-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.ih-history-header h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}

.ih-history-filters {
    display: flex;
    gap: 8px;
}
.ih-history-filters button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.ih-history-filters button:hover {
    background: rgba(255, 255, 255, 0.05);
}
.ih-history-filters button.active {
    background: rgba(162, 155, 254, 0.15);
    color: #a29bfe;
}

.history-date-group {
    margin-bottom: var(--spacing-xl);
}
.history-date-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.history-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-md);
}

.history-item-card {
    background: #1e2126;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.history-item-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 16px;
}
.history-item-icon.is-buy { background: rgba(46, 204, 113, 0.1); color: #2ecc71; }
.history-item-icon.is-sell { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }

.history-item-details { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hi-title { font-size: 14px; color: var(--text-primary); }
.hi-subtitle { font-size: 12px; color: var(--text-secondary); }

.history-item-right { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.hi-amount { font-size: 14px; font-weight: 700; }
.is-buy-text { color: var(--text-primary); }
.is-sell-text { color: #2ecc71; }
.hi-time { font-size: 12px; color: var(--text-muted); }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .investment-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .investment-table-header, .investment-position-row {
        grid-template-columns: minmax(120px, 1.2fr) 1fr 1fr 1fr 1fr 60px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .investment-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .investment-hero-actions {
        width: 100%;
        justify-content: space-between;
    }
    .ih-btn-primary, .ih-btn-secondary {
        flex: 1;
        justify-content: center;
    }
    
    .investment-table-header { display: none; }
    .investment-position-row {
        grid-template-columns: 1fr 1fr;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
        background: #1e2126;
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .col-symbol { grid-column: 1 / -1; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 8px; }
    .col-volume::before { content: 'Khối lượng: '; color: var(--text-muted); font-weight: normal; font-size: 12px; display: block; }
    .col-price::before { content: 'Giá thị trường: '; color: var(--text-muted); font-weight: normal; font-size: 12px; display: block; }
    .col-cost::before { content: 'Giá vốn: '; color: var(--text-muted); font-weight: normal; font-size: 12px; display: block; }
    .col-pnl::before { content: 'Lãi/lỗ: '; color: var(--text-muted); font-weight: normal; font-size: 12px; display: block; }
    
    .col-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        border-top: 1px dashed rgba(255,255,255,0.1);
        padding-top: 8px;
    }
    .investment-table { background: transparent; border: none; }
}

@media (max-width: 480px) {
    .investment-kpi-grid { grid-template-columns: 1fr; }
    .ih-history-filters { flex-wrap: wrap; }
}

/* =========================================
   UPDATED INVESTMENTS DASHBOARD STYLES (ROW 2)
   ========================================= */

.investment-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.investment-panel-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 768px) {
    .investment-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .investment-panel-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .investment-panel-actions .ih-btn-primary, 
    .investment-panel-actions .ih-btn-secondary {
        flex: 1;
        justify-content: center;
    }
}


/* =========================================
   REPORTS PRO MAX (UI/UX Upgraded)
   ========================================= */

.reports-pro-max {
    --rp-bg: #0f172a; /* slate-900 */
    --rp-card-bg: #1e293b; /* slate-800 */
    --rp-card-border: #334155; /* slate-700 */
    --rp-text-primary: #f8fafc; /* slate-50 */
    --rp-text-secondary: #94a3b8; /* slate-400 */
    --rp-accent: #8b5cf6; /* violet-500 */
    --rp-accent-hover: #7c3aed; /* violet-600 */
    --rp-income: #10b981; /* emerald-500 */
    --rp-expense: #ef4444; /* red-500 */
    --rp-purple: #c084fc; /* purple-400 */
    --rp-cyan: #22d3ee; /* cyan-400 */
    --rp-warning: #f59e0b; /* amber-500 */
    --rp-radius-lg: 16px;
    --rp-radius-md: 12px;
    --rp-radius-sm: 8px;
    --rp-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    
    padding: 24px;
    color: var(--rp-text-primary);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Header */
.reports-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.reports-title-modern {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--rp-text-primary);
}

.reports-subtitle-modern {
    font-size: 14px;
    color: var(--rp-text-secondary);
    margin: 0;
}

.reports-action-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.reports-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    color: var(--rp-text-primary);
    padding: 8px 16px;
    border-radius: var(--rp-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reports-btn-action:hover {
    background: var(--rp-card-border);
}

.reports-btn-action svg {
    width: 18px;
    height: 18px;
}

.reports-btn-action.btn-primary-modern {
    background: var(--rp-accent);
    border-color: var(--rp-accent);
    color: #fff;
}

.reports-btn-action.btn-primary-modern:hover {
    background: var(--rp-accent-hover);
    border-color: var(--rp-accent-hover);
}

/* Filter Bar */
.reports-filter-bar-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: var(--rp-radius-lg);
    padding: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.reports-period-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reports-period-tab {
    background: transparent;
    border: none;
    color: var(--rp-text-secondary);
    padding: 8px 16px;
    border-radius: var(--rp-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reports-period-tab:hover {
    color: var(--rp-text-primary);
    background: rgba(255,255,255,0.05);
}

.reports-period-tab.active {
    background: var(--rp-accent);
    color: #fff;
}

.reports-custom-range {
    display: none;
    align-items: center;
    gap: 12px;
}

.reports-custom-range.is-visible {
    display: flex;
}

.reports-date-input {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--rp-card-border);
    color: var(--rp-text-primary);
    padding: 8px 12px;
    border-radius: var(--rp-radius-sm);
    font-size: 14px;
}

.reports-range-sep {
    color: var(--rp-text-secondary);
}

.reports-filter-apply {
    background: var(--rp-accent);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--rp-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* KPIs */
.reports-kpi-grid-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media(max-width: 1024px) {
    .reports-kpi-grid-modern { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width: 640px) {
    .reports-kpi-grid-modern { grid-template-columns: 1fr; }
}

.report-kpi-card-modern {
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: var(--rp-radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--rp-shadow);
}

.kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tone-income .kpi-icon-wrapper { background: rgba(16, 185, 129, 0.1); color: var(--rp-income); }
.tone-expense .kpi-icon-wrapper { background: rgba(239, 68, 68, 0.1); color: var(--rp-expense); }
.tone-accent .kpi-icon-wrapper { background: rgba(34, 211, 238, 0.1); color: var(--rp-cyan); }
.tone-danger .kpi-icon-wrapper { background: rgba(239, 68, 68, 0.1); color: var(--rp-expense); }
.tone-purple .kpi-icon-wrapper { background: rgba(192, 132, 252, 0.1); color: var(--rp-purple); }

.kpi-icon-wrapper svg {
    width: 24px;
    height: 24px;
}

.kpi-content {
    flex-grow: 1;
}

.kpi-title {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rp-text-secondary);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.kpi-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--rp-text-primary);
    margin-bottom: 2px;
}

.tone-income .kpi-value { color: var(--rp-income); }
.tone-expense .kpi-value { color: var(--rp-expense); }

.kpi-note {
    font-size: 13px;
    color: var(--rp-text-secondary);
}

/* Charts Area */
.reports-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media(max-width: 1024px) {
    .reports-charts-grid { grid-template-columns: 1fr; }
}

.report-card-modern {
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: var(--rp-radius-lg);
    padding: 24px;
    box-shadow: var(--rp-shadow);
}

.card-modern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.card-modern-header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--rp-text-primary);
}

.chart-legend-modern {
    display: flex;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rp-text-secondary);
    font-weight: 500;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bg-income { background: var(--rp-income); }
.bg-expense { background: var(--rp-expense); }

.chart-svg-container {
    height: 300px;
    width: 100%;
}

/* Donut Chart CSS */
.report-donut-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.report-donut-chart-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
}

.report-donut-chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.report-donut-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: var(--rp-card-bg);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.report-donut-inner-title {
    font-size: 13px;
    color: var(--rp-text-secondary);
    margin-bottom: 4px;
}

.report-donut-inner-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--rp-text-primary);
}

.report-donut-legend {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-donut-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.report-donut-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.report-donut-label {
    flex-grow: 1;
    color: var(--rp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-donut-pct {
    font-weight: 700;
    color: var(--rp-text-secondary);
}

/* Insights */
.reports-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media(max-width: 1024px) {
    .reports-insights-grid { grid-template-columns: 1fr; }
}

.report-insight-card {
    background: var(--rp-card-bg);
    border: 1px solid var(--rp-card-border);
    border-radius: var(--rp-radius-lg);
    padding: 20px;
    box-shadow: var(--rp-shadow);
}

.insight-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.insight-header svg {
    width: 20px;
    height: 20px;
    color: var(--rp-accent);
}

.insight-header h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--rp-text-primary);
}

.insight-empty {
    font-size: 14px;
    color: var(--rp-text-secondary);
    text-align: center;
    padding: 20px 0;
}

.insight-cat-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 6px;
}

.cat-row strong { color: var(--rp-text-primary); font-weight: 600; }
.cat-row span { color: var(--rp-text-secondary); font-weight: 700; }

.cat-progress-bg {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
}

.cat-progress-fill {
    height: 100%;
    border-radius: 4px;
}

.budget-alert-box {
    padding: 16px;
    border-radius: var(--rp-radius-md);
    background: rgba(255,255,255,0.03);
}

.budget-alert-box.over {
    border-left: 4px solid var(--rp-expense);
}

.budget-alert-box.ok {
    border-left: 4px solid var(--rp-income);
}

.budget-alert-box strong {
    display: block;
    font-size: 14px;
    color: var(--rp-text-primary);
    margin-bottom: 4px;
}

.budget-alert-box p {
    margin: 0;
    font-size: 13px;
    color: var(--rp-text-secondary);
}

.insight-goal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insight-goal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--rp-radius-md);
}

.insight-goal-item strong {
    font-size: 14px;
    color: var(--rp-text-primary);
}

.goal-pct {
    background: rgba(139, 92, 246, 0.1);
    color: var(--rp-accent);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
}

/* Table */
.modern-table-scroll {
    overflow-x: auto;
}

.modern-report-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-report-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--rp-text-secondary);
    border-bottom: 1px solid var(--rp-card-border);
    font-weight: 600;
}

.modern-report-table td {
    padding: 16px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--rp-text-primary);
}

.modern-report-table tr:last-child td {
    border-bottom: none;
}

.text-right { text-align: right; }
.text-center { text-align: center; }

.text-income { color: var(--rp-income) !important; font-weight: 600; }
.text-expense { color: var(--rp-expense) !important; font-weight: 600; }

.modern-action-link {
    color: var(--rp-accent);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

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

.report-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--rp-text-secondary);
}

.report-empty-state strong {
    font-size: 16px;
    color: var(--rp-text-primary);
    margin-bottom: 8px;
}


/* =========================================
   REPORTS MONTHLY GRID (UI/UX Upgraded)
   ========================================= */

.reports-monthly-table-wrap {
    overflow-x: auto;
    width: 100%;
}

.reports-monthly-table {
    min-width: 900px;
    display: flex;
    flex-direction: column;
}

.reports-monthly-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 1.2fr 1.2fr 0.9fr;
    align-items: center;
    column-gap: 16px;
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.modern-report-header {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--rp-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--rp-card-border);
}

.modern-report-row:last-child {
    border-bottom: none;
}

.reports-money-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Phase 7B - Invest Order Modal
   ============================================ */
.invest-order-modal {
    padding: var(--spacing-lg);
}

.invest-order-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.invest-order-tab {
    flex: 1;
    padding: 12px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.invest-order-tab.buy.active {
    background: rgba(0, 208, 132, 0.15);
    color: var(--success);
    border: 1px solid var(--success);
}

.invest-order-tab.sell.active {
    background: rgba(255, 90, 95, 0.15);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.invest-search-container {
    position: relative;
    margin-bottom: 12px;
}

.invest-search-input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: #151824;
    border: 1px solid #2a3142;
    border-radius: var(--radius-md);
    color: #f5f7ff;
    font-size: 14px;
}

.invest-search-container .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.invest-chips {
    display: flex;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.invest-chip {
    padding: 5px 13px;
    background: #151824;
    border: 1px solid #2a3142;
    border-radius: var(--radius-xl);
    font-size: 12px;
    color: #f5f7ff;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.invest-chip.active,
.invest-chip:hover {
    background: #18392d;
    border-color: #19c37d;
    color: #f5f7ff;
    box-shadow: 0 0 0 1px rgba(25, 195, 125, 0.28);
}

.investment-order-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    max-height: 240px;
    overflow-y: auto;
    background: #10131c;
    border: 1px solid #2a3142;
    border-radius: 8px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.32);
}

.investment-order-result-empty {
    padding: 12px;
    color: #aab3c5;
    text-align: center;
    background: #10131c;
}

.investment-order-result-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #2a3142;
    background: #151824;
    color: #f5f7ff;
    padding: 12px 14px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    align-items: center;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.investment-order-result-item:last-child {
    border-bottom: 0;
}

.investment-order-result-item:hover,
.investment-order-result-item:focus {
    background: #1c2231;
    outline: none;
}

.investment-order-result-item[aria-selected="true"],
.investment-order-result-item.is-selected {
    background: #18392d;
    box-shadow: inset 3px 0 0 #19c37d;
}

.investment-order-result-symbol {
    color: #f5f7ff;
    font-size: 14px;
    font-weight: 800;
}

.investment-order-result-name {
    color: #aab3c5;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.investment-order-result-exchange {
    background: #1d2a22;
    border: 1px solid #19c37d;
    border-radius: 999px;
    color: #f5f7ff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
}

.invest-stock-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.stock-symbol-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.stock-symbol {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.stock-exchange {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    color: var(--text-secondary);
}

.stock-company {
    font-size: 13px;
    color: var(--text-muted);
}

.stock-card-right {
    text-align: right;
}

.stock-price {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.stock-change {
    font-size: 13px;
}

.stock-change.is-positive {
    color: var(--success);
}

.stock-change.is-negative {
    color: var(--danger);
}

.invest-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.invest-order-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 480px) {
    .invest-order-input-grid {
        grid-template-columns: 1fr;
    }
}

.invest-input-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.invest-stepper {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.invest-stepper-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.invest-stepper-btn:hover {
    background: rgba(255,255,255,0.05);
    color: white;
}

.invest-price-input, .invest-qty-input {
    flex: 1;
    width: 0;
    text-align: center;
    background: transparent;
    border: none;
    color: white;
    font-weight: 600;
    font-size: 14px;
    outline: none;
}

.invest-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
}

.invest-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
}

.invest-submit-btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    margin-top: 24px;
    cursor: pointer;
    border: none;
    color: white;
}

.invest-submit-btn.btn-buy {
    background: var(--success);
}

.invest-submit-btn.btn-sell {
    background: var(--danger);
}

.invest-fee-estimate {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
}

.invest-error {
    color: var(--danger);
    font-size: 12px;
    margin-bottom: 12px;
}

/* =========================================
   SAVINGS GOALS DASHBOARD DEMO
   ========================================= */

.savings-dashboard {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: var(--spacing-xl);
    color: var(--text-primary);
}

.savings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.savings-hero h1 {
    margin: 0 0 6px;
    color: #f8f5ff;
    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;
}

.savings-hero p {
    margin: 0;
    color: rgba(235, 230, 255, 0.68);
    font-size: 14px;
}

.savings-primary-action,
.savings-btn {
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.savings-primary-action {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2e1065;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(135deg, #ddd6fe, #a78bfa);
    box-shadow: 0 18px 34px rgba(124, 58, 237, 0.28);
}

.savings-primary-action i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.savings-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.savings-kpi-card {
    min-height: 130px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(26, 28, 40, 0.96), rgba(15, 17, 26, 0.94));
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.savings-kpi-card::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 18px;
    width: 66px;
    height: 66px;
    border-radius: 18px;
    opacity: 0.14;
    background: currentColor;
}

.savings-kpi-card--target { color: #c4b5fd; }
.savings-kpi-card--saved { color: #34d399; }
.savings-kpi-card--remaining { color: #fca5a5; }
.savings-kpi-card--near { color: #10b981; }

.savings-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.savings-kpi-head span {
    color: rgba(235, 230, 255, 0.68);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.savings-kpi-head i {
    position: relative;
    z-index: 1;
    font-size: 20px;
}

.savings-kpi-card strong {
    display: block;
    color: currentColor;
    font-size: 26px;
    line-height: 1.2;
}

.savings-kpi-card small {
    display: block;
    margin-top: 12px;
    color: rgba(235, 230, 255, 0.58);
    font-size: 12px;
}

.savings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.savings-tabs {
    display: flex;
    gap: 32px;
}

.savings-tabs button {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: rgba(241, 237, 255, 0.72);
    background: transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.savings-tabs button.active {
    color: #d8c4ff;
    border-bottom-color: #c4a5ff;
}

.savings-layout-toggle {
    display: flex;
    gap: 8px;
}

.savings-layout-toggle button {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    color: rgba(235, 230, 255, 0.68);
    background: rgba(255, 255, 255, 0.035);
    cursor: pointer;
}

.savings-layout-toggle button.active {
    color: #f8f5ff;
    border-color: rgba(196, 181, 253, 0.42);
    background: rgba(196, 181, 253, 0.10);
}

.savings-goal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.savings-goal-grid.is-list {
    grid-template-columns: 1fr;
}

.savings-goal-card {
    min-height: 398px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(22, 24, 35, 0.96), rgba(15, 17, 26, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.savings-goal-grid.is-list .savings-goal-card {
    min-height: 220px;
}

.savings-goal-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.savings-goal-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.18);
    font-size: 20px;
}

.savings-goal-card--good .savings-goal-icon,
.savings-goal-card--near .savings-goal-icon {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.18);
}

.savings-status {
    padding: 6px 10px;
    border-radius: 8px;
    color: #ddd6fe;
    background: rgba(196, 181, 253, 0.13);
    font-size: 11px;
    font-weight: 900;
}

.savings-status--near,
.savings-status--completed {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.16);
}

.savings-goal-title {
    margin-top: 22px;
}

.savings-goal-title h3 {
    margin: 0 0 4px;
    color: #f8f5ff;
    font-size: 20px;
    font-weight: 850;
}

.savings-goal-title p {
    margin: 0;
    color: rgba(235, 230, 255, 0.68);
    font-size: 14px;
}

.savings-progress-block {
    margin-top: 24px;
}

.savings-progress-label,
.savings-progress-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.savings-progress-label span,
.savings-card-meta span {
    color: rgba(235, 230, 255, 0.58);
    font-size: 12px;
    font-weight: 800;
}

.savings-progress-label strong {
    color: #c4b5fd;
    font-size: 18px;
}

.savings-progress {
    height: 9px;
    margin: 10px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}

.savings-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}

.savings-goal-card--good .savings-progress span {
    background: linear-gradient(90deg, #5eead4, #34d399);
}

.savings-goal-card--near .savings-progress span,
.savings-goal-card--complete .savings-progress span {
    background: linear-gradient(90deg, #34d399, #10b981);
}

.savings-progress-money {
    color: rgba(235, 230, 255, 0.68);
    font-size: 13px;
}

.savings-progress-money strong {
    color: #f8f5ff;
}

.savings-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.savings-card-meta strong {
    display: block;
    margin-top: 3px;
    color: #f8f5ff;
}

.savings-ready {
    min-height: 82px;
    margin-top: 20px;
    display: grid;
    place-items: center;
    gap: 8px;
    color: #10b981;
    text-transform: uppercase;
    font-weight: 900;
}

.savings-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

.savings-btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 850;
}

.savings-btn--ghost {
    color: #f8f5ff;
    background: rgba(255, 255, 255, 0.12);
}

.savings-btn--primary {
    color: #2e1065;
    background: linear-gradient(135deg, #d8b4fe, #a78bfa);
}

.savings-btn--danger {
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.30);
    background: rgba(127, 29, 29, 0.38);
}

.savings-btn--disabled {
    color: rgba(235, 230, 255, 0.48);
    background: rgba(255, 255, 255, 0.08);
    cursor: not-allowed;
}

.savings-btn--full {
    width: 100%;
    min-height: 50px;
}

.savings-empty-state {
    padding: 56px 24px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    color: rgba(235, 230, 255, 0.68);
    text-align: center;
}

.savings-empty-state > div {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #c4b5fd;
    background: rgba(196, 181, 253, 0.12);
    font-size: 24px;
}

.savings-empty-state h3 {
    color: #f8f5ff;
    margin-bottom: 8px;
}

.savings-empty-state p {
    max-width: 520px;
    margin: 0 auto 20px;
}

.modal-content.savings-modal-shell {
    max-width: 680px;
    background: #151722;
    border-color: rgba(196, 181, 253, 0.16);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}

.modal-content.savings-detail-shell {
    max-width: 920px;
    background: #151722;
    border-color: rgba(196, 181, 253, 0.16);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}

.savings-modal {
    background: #151722;
}

.savings-modal-header {
    align-items: flex-start;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.savings-modal-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.savings-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #d8b4fe;
    background: rgba(196, 181, 253, 0.14);
}

.savings-modal-header p {
    margin: 4px 0 0;
    color: rgba(235, 230, 255, 0.62);
    font-size: 13px;
}

.savings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

.savings-field--wide {
    grid-column: 1 / -1;
}

.savings-field span {
    display: block;
    margin-bottom: 8px;
    color: rgba(235, 230, 255, 0.62);
    font-size: 12px;
    font-weight: 850;
}

.savings-field input,
.savings-field select,
.savings-field textarea {
    width: 100%;
    border: 1px solid rgba(196, 181, 253, 0.16);
    border-radius: 10px;
    outline: none;
    color: #f8f5ff;
    background: #090b12;
    font: inherit;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.savings-field input,
.savings-field select {
    min-height: 42px;
    padding: 0 14px;
}

.savings-field textarea {
    min-height: 82px;
    padding: 13px 14px;
    resize: vertical;
}

.savings-field input:focus,
.savings-field select:focus,
.savings-field textarea:focus,
.savings-money-input:focus-within {
    border-color: rgba(196, 181, 253, 0.62);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

.savings-money-input {
    min-height: 42px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid rgba(196, 181, 253, 0.16);
    border-radius: 10px;
    background: #090b12;
}

.savings-money-input input {
    border: 0;
    background: transparent;
}

.savings-money-input strong {
    padding: 0 14px;
    color: rgba(235, 230, 255, 0.72);
    font-size: 13px;
}

.savings-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.savings-category-chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(196, 181, 253, 0.18);
    border-radius: 999px;
    color: rgba(235, 230, 255, 0.72);
    background: rgba(255, 255, 255, 0.045);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.savings-category-chip input {
    display: none;
}

.savings-category-chip.active {
    color: #d8b4fe;
    border-color: rgba(196, 181, 253, 0.48);
    background: rgba(139, 92, 246, 0.16);
}

.savings-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.savings-modal--deposit {
    width: min(460px, calc(100vw - 32px));
}

.savings-deposit-summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid rgba(196, 181, 253, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.075);
}

.savings-deposit-summary .savings-goal-icon {
    width: 44px;
    height: 44px;
}

.savings-deposit-summary h3 {
    margin: 0;
    color: #f8f5ff;
    font-size: 16px;
}

.savings-deposit-summary span {
    color: rgba(235, 230, 255, 0.62);
    font-size: 12px;
    font-weight: 800;
}

.savings-deposit-summary > strong {
    color: #34d399;
    font-size: 12px;
}

.savings-deposit-summary .savings-progress,
.savings-deposit-summary p {
    grid-column: 1 / -1;
    margin: 0;
}

.savings-deposit-summary p {
    display: flex;
    justify-content: space-between;
    color: rgba(235, 230, 255, 0.68);
    font-size: 12px;
}

.savings-deposit-summary em {
    color: rgba(235, 230, 255, 0.48);
    font-style: italic;
}

.savings-help-note {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(196, 181, 253, 0.12);
    border-radius: 10px;
    color: rgba(235, 230, 255, 0.7);
    background: rgba(196, 181, 253, 0.07);
    font-size: 13px;
}

.savings-help-note i {
    color: #c4b5fd;
    margin-top: 2px;
}

.savings-detail-modal {
    position: relative;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 520px;
    background: #1a1c27;
}

.savings-detail-side {
    padding: 28px 24px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.savings-detail-close {
    position: absolute;
    right: 14px;
    top: 14px;
}

.savings-detail-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.savings-detail-title h2 {
    margin: 0 0 8px;
    color: #f8f5ff;
    font-size: 24px;
}

.savings-detail-progress {
    margin-top: 22px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.075);
}

.savings-detail-metrics {
    display: grid;
    gap: 14px;
    margin: 22px 0;
}

.savings-detail-metrics div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.savings-detail-metrics span,
.savings-detail-dates span {
    color: rgba(235, 230, 255, 0.62);
    font-size: 13px;
}

.savings-detail-metrics strong {
    color: #f8f5ff;
}

.savings-detail-metrics .is-good,
.savings-history-row strong {
    color: #34d399;
}

.savings-detail-metrics .is-warn {
    color: #fca5a5;
}

.savings-detail-dates {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
}

.savings-detail-dates div {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 2px 10px;
}

.savings-detail-dates i {
    grid-row: span 2;
    color: rgba(235, 230, 255, 0.62);
}

.savings-detail-dates strong {
    color: #f8f5ff;
}

.savings-detail-history {
    padding: 30px 22px 20px;
}

.savings-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.savings-history-head h3 {
    margin: 0;
    color: #f8f5ff;
    font-size: 16px;
}

.savings-history-head i {
    color: rgba(235, 230, 255, 0.62);
}

.savings-history-table {
    min-height: 320px;
}

.savings-history-row {
    display: grid;
    grid-template-columns: 100px 120px 130px minmax(120px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 12px 0;
    color: rgba(235, 230, 255, 0.70);
    font-size: 13px;
}

.savings-history-row--head {
    color: rgba(235, 230, 255, 0.42);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.savings-history-empty {
    padding: 42px 16px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: rgba(235, 230, 255, 0.58);
    text-align: center;
}

.savings-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 1120px) {
    .savings-kpi-grid,
    .savings-goal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .savings-detail-modal {
        grid-template-columns: 1fr;
    }

    .savings-detail-side {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

}

@media (max-width: 760px) {
    .savings-hero,
    .savings-toolbar,
    .savings-modal-footer,
    .savings-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .savings-tabs {
        gap: 6px;
        overflow-x: auto;
    }

    .savings-tabs button {
        white-space: nowrap;
    }

    .savings-kpi-grid,
    .savings-goal-grid,
    .savings-form-grid,
    .savings-card-meta,
    .savings-history-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   DEBT & LOAN DASHBOARD DEMO
   ========================================= */

.debts-dashboard {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: var(--spacing-xl);
    color: var(--text-primary);
}

.debt-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.debt-hero h1 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 850;
    line-height: 1.15;
    color: #f8f5ff;
}

.debt-hero p {
    margin: 0;
    color: rgba(235, 230, 255, 0.66);
    font-size: 14px;
}

.debt-primary-action,
.debt-btn {
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.debt-primary-action {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    box-shadow: 0 18px 34px rgba(124, 58, 237, 0.32);
}

.debt-primary-action i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.debt-primary-action:hover,
.debt-btn--primary:hover {
    box-shadow: 0 20px 38px rgba(124, 58, 237, 0.42);
}

.debt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.debt-kpi-card {
    min-height: 112px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(26, 28, 40, 0.96), rgba(15, 17, 26, 0.94));
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.debt-kpi-card--due {
    border-color: rgba(255, 173, 173, 0.45);
}

.debt-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.debt-kpi-head span {
    color: rgba(235, 230, 255, 0.68);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.debt-kpi-head i {
    color: #c4b5fd;
}

.debt-kpi-card--owe .debt-kpi-head i,
.debt-kpi-card--due .debt-kpi-head i {
    color: #fca5a5;
}

.debt-kpi-card--lend .debt-kpi-head i {
    color: #fbbf24;
}

.debt-kpi-card strong {
    display: block;
    color: #f8f5ff;
    font-size: 22px;
    line-height: 1.2;
}

.debt-kpi-card small {
    display: block;
    margin-top: 8px;
    color: rgba(235, 230, 255, 0.54);
    font-size: 12px;
}

.debt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.debt-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.debt-tabs button,
.debt-modal-tabs button {
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    color: rgba(241, 237, 255, 0.72);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.debt-tabs button.active,
.debt-modal-tabs button.active {
    color: #24143f;
    background: #c4a5ff;
    box-shadow: 0 10px 22px rgba(167, 139, 250, 0.25);
}

.debt-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.debt-card {
    min-height: 318px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(22, 24, 35, 0.96), rgba(15, 17, 26, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.debt-card--credit {
    border-color: rgba(251, 146, 60, 0.24);
    background:
        linear-gradient(150deg, rgba(31, 24, 30, 0.96), rgba(15, 17, 26, 0.98)),
        #0f111a;
}

.debt-card-main {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.debt-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fecaca;
    background: rgba(248, 113, 113, 0.16);
}

.debt-card--lend .debt-card-icon {
    color: #fed7aa;
    background: rgba(251, 191, 36, 0.16);
}

.debt-card--credit .debt-card-icon {
    color: #ddd6fe;
    background: rgba(139, 92, 246, 0.22);
}

.debt-card-titleblock h3 {
    margin: 0;
    color: #f8f5ff;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.28;
}

.debt-card-titleblock p {
    margin: 5px 0 0;
    color: rgba(235, 230, 255, 0.58);
    font-size: 12px;
    font-weight: 700;
}

.debt-status {
    max-width: 104px;
    padding: 5px 8px;
    border-radius: 8px;
    color: #fecaca;
    background: rgba(127, 29, 29, 0.55);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
}

.debt-card--lend .debt-status {
    color: #fde68a;
    background: rgba(120, 53, 15, 0.54);
}

.debt-progress-block {
    margin-top: 24px;
}

.debt-progress-label,
.debt-progress-values {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.debt-progress-label span,
.debt-progress-values span,
.debt-credit-amount span,
.debt-meta-grid dt {
    color: rgba(235, 230, 255, 0.56);
    font-size: 11px;
    font-weight: 800;
}

.debt-progress-label strong {
    color: #c4b5fd;
}

.debt-card--lend .debt-progress-label strong {
    color: #fbbf24;
}

.debt-progress {
    height: 8px;
    margin: 10px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.debt-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #c4b5fd, #8b5cf6);
}

.debt-card--lend .debt-progress span {
    background: linear-gradient(90deg, #fbbf24, #fb923c);
}

.debt-credit-amount {
    margin-top: 24px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.075);
}

.debt-credit-amount strong {
    display: block;
    margin-top: 6px;
    color: #fca5a5;
    font-size: 25px;
    line-height: 1.12;
}

.debt-credit-sync-note {
    margin: 10px 0 0;
    color: rgba(235, 230, 255, 0.62);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.debt-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.debt-meta-grid dd {
    margin: 4px 0 0;
    color: #f8f5ff;
    font-size: 14px;
    font-weight: 850;
}

.debt-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}

.debt-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 850;
}

.debt-btn--ghost {
    color: #f8f5ff;
    background: rgba(255, 255, 255, 0.12);
}

.debt-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.debt-card--lend .debt-btn--primary {
    color: #24170a;
    background: linear-gradient(135deg, #fed7aa, #fb923c);
}

.debt-card--credit .debt-btn--primary {
    color: #2e1065;
    background: linear-gradient(135deg, #ddd6fe, #c084fc);
}

.debt-empty-state {
    grid-column: 1 / -1;
    padding: 42px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    color: rgba(235, 230, 255, 0.62);
    text-align: center;
}

.debt-empty-state--loading,
.debt-empty-state--error {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 260px;
}

.debt-empty-state--loading i {
    color: #c4b5fd;
    font-size: 22px;
}

.debt-empty-state--error {
    border-color: rgba(248, 113, 113, 0.32);
    color: rgba(254, 202, 202, 0.82);
}

.debt-empty-state--error i {
    color: #fca5a5;
    font-size: 22px;
}

.debt-empty-state strong {
    color: #f8f5ff;
}

.debt-empty-state span {
    max-width: 520px;
}

.debt-modal {
    background: #11131d;
}

.debt-modal--wide {
    width: min(960px, calc(100vw - 48px));
}

.debt-modal--credit {
    width: min(680px, calc(100vw - 32px));
}

.debt-modal--detail {
    width: 100%;
}

.modal-content.debt-modal-shell {
    max-width: 720px;
    background: #11131d;
    border-color: rgba(196, 181, 253, 0.16);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}

.modal-content.debt-modal-shell.debt-wide-shell {
    width: min(960px, calc(100vw - 48px));
    max-width: 1000px;
}

.modal-content.debt-modal-shell.debt-detail-shell {
    width: min(960px, calc(100vw - 48px));
    max-width: 960px;
}

.debt-modal-header {
    align-items: flex-start;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.debt-modal-header p {
    margin: 6px 0 0;
    color: rgba(235, 230, 255, 0.58);
    font-size: 13px;
}

.debt-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.debt-modal-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.debt-modal-layout > .debt-form-section,
.debt-modal-layout > .debt-form-grid {
    min-width: 0;
}

.debt-modal-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
}

.debt-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.debt-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #ddd6fe;
    font-weight: 850;
}

.debt-radio-row {
    display: flex;
    gap: 14px;
    color: rgba(235, 230, 255, 0.7);
    font-size: 12px;
}

.debt-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.debt-contact-pane.is-hidden {
    display: none;
}

.debt-field-label,
.debt-field span {
    display: block;
    margin-bottom: 8px;
    color: rgba(235, 230, 255, 0.62);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.debt-search-select {
    min-height: 44px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(196, 181, 253, 0.18);
    border-radius: 10px;
    background: #090b12;
    color: rgba(235, 230, 255, 0.55);
}

.debt-search-select input,
.debt-field input,
.debt-field select,
.debt-field textarea {
    width: 100%;
    border: 1px solid rgba(196, 181, 253, 0.16);
    border-radius: 10px;
    outline: none;
    color: #f8f5ff;
    background: #090b12;
    font: inherit;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.debt-search-select input {
    border: 0;
    background: transparent;
    min-height: 42px;
}

.debt-field input,
.debt-field select {
    min-height: 44px;
    padding: 0 14px;
}

.debt-field textarea {
    min-height: 76px;
    padding: 13px 14px;
    resize: vertical;
}

.debt-search-select:focus-within,
.debt-field input:focus,
.debt-field select:focus,
.debt-field textarea:focus {
    border-color: rgba(196, 181, 253, 0.62);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

.debt-contact-list {
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.085);
}

.debt-contact-hint {
    display: block;
    margin: 0 0 8px 4px;
    color: rgba(235, 230, 255, 0.48);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.debt-contact-option {
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: center;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.debt-contact-option:hover {
    border-color: rgba(196, 181, 253, 0.22);
    background: rgba(255, 255, 255, 0.07);
}

.debt-contact-option.selected {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
}

.debt-contact-option span {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #ddd6fe;
    background: rgba(139, 92, 246, 0.22);
    font-size: 12px;
    font-weight: 900;
}

.debt-contact-option strong {
    color: #f8f5ff;
    font-size: 14px;
}

.debt-contact-option small {
    color: rgba(235, 230, 255, 0.56);
    font-size: 12px;
}

.debt-contact-empty {
    padding: 14px;
    border: 1px dashed rgba(196, 181, 253, 0.18);
    border-radius: 10px;
    color: rgba(235, 230, 255, 0.62);
    font-size: 13px;
}

.debt-form-grid,
.debt-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.debt-field--wide {
    grid-column: 1 / -1;
}

.debt-credit-note {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(196, 181, 253, 0.12);
    border-radius: 12px;
    color: rgba(235, 230, 255, 0.7);
    background: rgba(196, 181, 253, 0.07);
    font-size: 13px;
    line-height: 1.55;
}

.debt-credit-note i {
    color: #c4b5fd;
    margin-top: 3px;
}

.debt-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.debt-btn--full {
    width: 100%;
    min-height: 50px;
}

.debt-detail-body {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.25fr);
    align-items: start;
    gap: 18px;
}

.debt-detail-panel {
    min-width: 0;
}

.debt-detail-grid > div {
    padding: 14px;
    border: 1px solid rgba(196, 181, 253, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
}

.debt-detail-grid span {
    display: block;
    color: rgba(235, 230, 255, 0.56);
    font-size: 12px;
    margin-bottom: 6px;
}

.debt-detail-grid strong {
    color: #f8f5ff;
}

.debt-history-title {
    margin: 22px 0 10px;
    color: #f8f5ff;
    font-size: 16px;
}

.debt-history-table {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid rgba(196, 181, 253, 0.12);
    border-radius: 12px;
}

.debt-history-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(235, 230, 255, 0.72);
    font-size: 13px;
}

.debt-history-row--head {
    color: rgba(235, 230, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
    font-weight: 850;
}

.debt-history-empty {
    padding: 18px;
    color: rgba(235, 230, 255, 0.58);
    text-align: center;
}

@media (max-width: 1100px) {
    .debt-kpi-grid,
    .debt-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .debt-detail-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .debt-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .debt-kpi-grid,
    .debt-card-grid,
    .debt-modal-layout,
    .debt-form-grid,
    .debt-detail-grid,
    .debt-meta-grid,
    .debt-history-row {
        grid-template-columns: 1fr;
    }

    .debt-tabs,
    .debt-modal-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .debt-tabs button,
    .debt-modal-tabs button {
        white-space: nowrap;
    }

    .debt-modal-tabs {
        display: flex;
    }

    .modal-content.debt-modal-shell.debt-detail-shell {
        width: calc(100vw - 24px);
        max-width: 960px;
    }

    .modal-content.debt-modal-shell.debt-wide-shell,
    .debt-modal--wide {
        width: calc(100vw - 24px);
    }

    .debt-section-head,
    .debt-radio-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==================== MASTER DATA SCREEN ==================== */
.master-data-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
}

.master-data-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.master-data-header .header-text h2 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
}

.master-data-header .subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.master-data-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

.master-data-search {
    flex: 1;
    min-width: 260px;
    background: rgba(18, 19, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all 0.2s;
}

.master-data-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}

.master-data-search i {
    color: var(--text-muted);
}

.master-data-search input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 12px;
    font-size: 14px;
}

.master-data-tabs {
    display: flex;
    gap: 4px;
    background: rgba(18, 19, 25, 0.8);
    padding: 4px;
    border-radius: 12px;
}

.master-data-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.master-data-tab:hover {
    color: var(--text-primary);
}

.master-data-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.master-data-actions {
    display: flex;
    gap: 12px;
}

.master-data-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.master-data-chip {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.master-data-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.master-data-chip.active {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: #fff;
    box-shadow: 0 4px 12px rgba(138, 99, 229, 0.3);
}

.master-data-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: linear-gradient(145deg, rgba(31, 32, 41, 0.9), rgba(18, 19, 25, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-secondary);
}

.kpi-content {
    flex: 1;
}

.kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

.kpi-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.master-data-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.master-data-wallet-card,
.master-data-category-card,
.master-data-contact-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.master-data-wallet-card:hover,
.master-data-category-card:hover,
.master-data-contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.15);
}

.master-data-credit-card {
    border-color: rgba(255, 107, 107, 0.2);
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(255, 107, 107, 0.02) 100%);
}

.card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.card-icon, .card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.card-avatar {
    border-radius: 50%;
    font-weight: 800;
}

.card-title {
    flex: 1;
    min-width: 0;
}

.card-title h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-title p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-balance {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.balance-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.master-data-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-hidden {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.badge-active {
    background: rgba(0, 212, 170, 0.15);
    color: var(--success);
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px dashed var(--glass-border);
}

.master-data-contact-card .card-actions,
.master-data-wallet-card .card-actions {
    display: flex;
    gap: 8px;
}

.btn-action {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.master-data-add-card {
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed var(--glass-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 180px;
}

.master-data-add-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary-light);
}

.add-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-light);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.master-data-add-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--text-primary);
}

.master-data-add-card p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.master-data-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    position: relative;
    gap: 12px;
}

.master-data-category-card .card-info {
    width: 100%;
}

.master-data-category-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 80px; /* Space for action buttons */
}

.master-data-category-card .card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.md-parent-category-card {
    min-height: 150px;
}

.master-data-category-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.master-data-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #151824;
    color: #f5f7ff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.master-data-icon-btn:hover {
    background: #1c2231;
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.master-data-icon-btn.view {
    color: #7dd3fc;
}

.master-data-icon-btn.edit {
    color: #c4b5fd;
}

.master-data-child-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.master-data-child-row {
    display: grid;
    grid-template-columns: 44px 1fr 40px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--bg-card);
}

.master-data-child-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.master-data-child-info {
    min-width: 0;
}

.master-data-child-info strong {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
}

.master-data-child-info span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-data-empty-children {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    background: var(--bg-card);
}

@media (max-width: 1024px) {
    .master-data-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .btn-action-compact {
        width: 100%;
    }

    .master-data-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .master-data-tabs {
        overflow-x: auto;
    }
    
    .master-data-tab {
        white-space: nowrap;
    }
    
    .master-data-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* Contact Detail Popup */
.contact-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.contact-detail-modal {
    background: var(--bg-card);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.contact-detail-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-detail-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.contact-detail-body {
    padding: 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.contact-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .contact-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-detail-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .contact-detail-info {
        grid-column: 1 / -1;
    }
}
.contact-detail-info p {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 15px;
}
.contact-detail-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
}
.contact-detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-detail-list-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-primary);
}
.master-data-icon-action {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.master-data-tab-header {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

/* Hotfix: Reduce ghosting/blur when switching tabs in Debt Modal */
.modal-content.debt-modal-shell,
.modal-content.debt-modal-shell * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

.modal-content.debt-modal-shell {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.modal-overlay:has(.debt-modal-shell) {
    backdrop-filter: blur(2px) !important;
    background: rgba(0, 0, 0, 0.65) !important;
}

/* ==================== INVESTMENT V2 MARKET DASHBOARD ==================== */
.invest-v2-dashboard {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--text-primary);
}

.invest-v2-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 82% 14%, rgba(34, 197, 94, 0.16), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(18, 20, 31, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.invest-v2-eyebrow {
    margin: 0 0 8px;
    color: #86efac;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.invest-v2-hero h1 {
    margin: 0 0 6px;
    color: #f8fafc;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.12;
}

.invest-v2-hero span {
    color: var(--text-secondary);
    font-size: 13px;
}

.invest-v2-refresh {
    height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(134, 239, 172, 0.24);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #dcfce7;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.9), rgba(5, 150, 105, 0.86));
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 180ms ease, filter 180ms ease;
}

.invest-v2-refresh:hover {
    border-color: rgba(187, 247, 208, 0.5);
    filter: brightness(1.06);
}

.invest-v2-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.invest-v2-kpis article,
.invest-v2-panel,
.invest-v2-modal {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 20, 31, 0.96);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.invest-v2-kpis article {
    min-height: 108px;
    padding: 16px;
    border-radius: 14px;
}

.invest-v2-kpis span {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.invest-v2-kpis strong {
    display: block;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

.invest-v2-kpis small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
}

.invest-v2-panel {
    overflow: hidden;
    border-radius: 16px;
}

.invest-v2-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invest-v2-search {
    flex: 1;
    min-width: 240px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    background: rgba(8, 11, 20, 0.72);
}

.invest-v2-search input {
    width: 100%;
    border: 0;
    outline: none;
    color: var(--text-primary);
    background: transparent;
    font-size: 14px;
}

.invest-v2-toolbar select {
    height: 42px;
    min-width: 150px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: var(--text-primary);
    background: rgba(8, 11, 20, 0.86);
    font-weight: 700;
}

.invest-v2-table-wrap {
    overflow-x: auto;
}

.invest-v2-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.invest-v2-table th,
.invest-v2-table td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    vertical-align: middle;
}

.invest-v2-table th {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.025);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.invest-v2-table th i {
    margin-left: 5px;
    font-size: 10px;
}

.invest-v2-table td {
    color: var(--text-secondary);
    font-size: 13px;
}

.invest-v2-symbol strong {
    display: block;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 900;
}

.invest-v2-symbol span {
    color: var(--text-muted);
    font-size: 11px;
}

.invest-v2-company {
    max-width: 300px;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invest-v2-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.invest-v2-number small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
}

.is-up {
    color: #86efac !important;
}

.is-down {
    color: #fda4af !important;
}

.is-flat {
    color: var(--text-muted) !important;
}

.invest-v2-view-btn {
    min-width: 58px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(167, 139, 250, 0.24);
    border-radius: 10px;
    color: #c4b5fd;
    background: rgba(124, 58, 237, 0.12);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.invest-v2-view-btn:hover {
    border-color: rgba(196, 181, 253, 0.5);
    background: rgba(124, 58, 237, 0.2);
}

.invest-v2-empty,
.invest-v2-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px;
    color: var(--text-muted);
    text-align: center;
}

.invest-v2-empty i,
.invest-v2-loading i {
    color: var(--primary-light);
    font-size: 26px;
}

.invest-v2-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: 12px;
}

.invest-v2-pagination div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.invest-v2-pagination button {
    height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.invest-v2-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.invest-v2-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 5, 14, 0.72);
    backdrop-filter: blur(10px);
}

.invest-v2-modal-overlay.active {
    display: flex;
}

.invest-v2-modal {
    width: min(680px, 100%);
    max-height: 88vh;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 197, 94, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(31, 34, 48, 0.98), rgba(18, 20, 31, 0.98));
}

.invest-v2-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invest-v2-modal-header p {
    margin: 0 0 6px;
    color: #86efac;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.invest-v2-modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 900;
}

.invest-v2-modal-header button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.invest-v2-modal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 24px;
}

.invest-v2-modal-grid article {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.invest-v2-modal-grid span {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.invest-v2-modal-grid strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 850;
}

.invest-v2-history-chart {
    height: 132px;
    margin: 0 24px 16px;
    padding: 18px 12px 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    display: flex;
    align-items: end;
    gap: 8px;
    background: rgba(8, 11, 20, 0.5);
}

.invest-v2-history-chart span {
    flex: 1;
    min-width: 8px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #86efac, #22c55e);
}

.invest-v2-modal-note {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .invest-v2-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invest-v2-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .invest-v2-hero,
    .invest-v2-toolbar,
    .invest-v2-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .invest-v2-refresh,
    .invest-v2-toolbar select {
        width: 100%;
    }

    .invest-v2-kpis,
    .invest-v2-modal-grid {
        grid-template-columns: 1fr;
    }

    .invest-v2-hero h1 {
        font-size: 26px;
    }
}

/* Reports detail redesign overrides */
.reports-page {
    --rp-bg: #0b1020;
    --rp-card-bg: rgba(20, 27, 45, 0.92);
    --rp-card-border: rgba(148, 163, 184, 0.16);
    --rp-text-primary: #f8fafc;
    --rp-text-secondary: #a8b3c7;
    --rp-accent: #8b5cf6;
    --rp-accent-hover: #7c3aed;
    --rp-income: #22c55e;
    --rp-expense: #fb7185;
    --rp-warning: #f59e0b;
    --rp-purple: #c084fc;
    --rp-cyan: #38bdf8;
    max-width: 1440px;
    margin: 0 auto;
}

.reports-page .reports-header-modern {
    align-items: center;
    margin-bottom: 18px;
}

.reports-page .reports-title-modern {
    font-size: 28px;
    letter-spacing: 0;
}

.reports-page .reports-subtitle-modern {
    margin-top: 4px;
    line-height: 1.45;
}

.reports-period-label {
    display: inline-flex;
    margin-top: 10px;
    padding: 5px 10px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 999px;
    color: #d8b4fe;
    background: rgba(139, 92, 246, 0.1);
    font-size: 12px;
    font-weight: 700;
}

.reports-page .reports-action-bar {
    align-items: center;
    gap: 10px;
}

.reports-page .reports-btn-action {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1;
}

.reports-page .reports-btn-action svg {
    width: 16px;
    height: 16px;
}

.reports-page .reports-filter-bar-modern {
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 18px;
    background: rgba(15, 23, 42, 0.78);
}

.reports-page .reports-period-tabs {
    gap: 6px;
}

.reports-page .reports-period-tab {
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
}

.reports-page .reports-period-tab.active {
    border-color: rgba(167, 139, 250, 0.45);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}

.reports-date-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.reports-page .reports-date-input {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 13px;
}

.reports-page .reports-filter-apply {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
}

.reports-page .reports-kpi-grid-modern {
    gap: 14px;
    margin-bottom: 18px;
}

.reports-page .report-kpi-card-modern {
    min-height: 112px;
    padding: 16px;
    border-color: var(--rp-card-border);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.88));
}

.reports-page .kpi-title {
    text-transform: none;
    letter-spacing: 0;
}

.reports-page .kpi-value {
    font-size: 22px;
    line-height: 1.2;
}

.reports-page .reports-charts-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
    gap: 18px;
    margin-bottom: 18px;
}

.reports-page .report-card-modern,
.reports-page .report-insight-card {
    border-color: var(--rp-card-border);
    background: linear-gradient(180deg, rgba(20, 27, 45, 0.94), rgba(12, 18, 32, 0.94));
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28);
}

.reports-page .card-modern-header {
    align-items: center;
    margin-bottom: 14px;
}

.reports-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.reports-chart-toggle {
    display: inline-flex;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.32);
}

.reports-chart-toggle button {
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rp-text-secondary);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.reports-chart-toggle button.active {
    color: #fff;
    background: rgba(139, 92, 246, 0.9);
}

.reports-page .chart-svg-container {
    height: 272px;
}

.reports-page .report-donut-chart-wrapper {
    width: 184px;
    height: 184px;
}

.reports-page .report-donut-inner {
    width: 118px;
    height: 118px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #111827;
}

.reports-page .report-donut-inner-value {
    max-width: 96px;
    font-size: 15px;
    line-height: 1.25;
}

.report-donut-amount {
    margin-left: auto;
    padding-left: 8px;
    color: var(--rp-text-primary);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.reports-page .report-donut-pct {
    width: 54px;
    text-align: right;
    font-size: 12px;
}

.reports-page .reports-insights-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 18px;
    margin-bottom: 18px;
}

.reports-quick-notes {
    display: grid;
    gap: 10px;
}

.reports-quick-notes p {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--rp-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.reports-page .reports-monthly-table {
    min-width: 980px;
}

.reports-page .reports-monthly-grid {
    grid-template-columns: 1.1fr 1.12fr 1.12fr 1.12fr 1fr 0.9fr;
    padding: 14px 16px;
}

.reports-row-action {
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
}

.reports-page .report-empty-state {
    min-height: 140px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.22);
    color: var(--rp-text-secondary);
    font-size: 14px;
}

@media (max-width: 1100px) {
    .reports-page .reports-charts-grid,
    .reports-page .reports-insights-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .reports-page {
        padding: 16px;
    }

    .reports-page .reports-header-modern,
    .reports-page .reports-action-bar,
    .reports-page .reports-filter-bar-modern,
    .reports-page .reports-custom-range {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-page .reports-action-bar,
    .reports-date-field,
    .reports-page .reports-filter-apply {
        width: 100%;
    }

    .reports-page .reports-btn-action {
        justify-content: center;
        width: 100%;
    }

    .reports-date-field {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-page .reports-period-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .reports-page .reports-period-tab {
        width: 100%;
    }
}

/* ============================================
   RESPONSIVE FOUNDATION + DENSITY OVERRIDES
   ============================================ */
:root {
    --app-font-size: 14px;
    --page-gap: 16px;
    --page-padding-desktop: 22px;
    --page-padding-laptop: 16px;
    --page-padding-tablet: 16px;
    --page-padding-mobile: 12px;
    --card-padding: 18px;
    --card-radius: 14px;
    --button-height: 40px;
    --topbar-height: 60px;
    --sidebar-width: 248px;
    --mobile-safe-bottom: 96px;
}

html,
body {
    width: 100%;
    max-width: 100%;
    font-size: var(--app-font-size);
    overflow-x: hidden;
}

body {
    font-size: var(--app-font-size);
}

.app-wrapper,
.content-wrapper,
.main-content {
    min-width: 0;
}

.content-wrapper {
    width: 100%;
}

.main-content {
    padding: var(--page-padding-desktop);
    overflow-x: hidden;
}

.main-content.main-content--page-owned-header {
    padding-top: var(--page-padding-desktop);
}

.glass-card,
.card,
.tx-dashboard-card,
.report-card-modern,
.report-insight-card,
.savings-kpi-card,
.savings-goal-card,
.debt-card,
.master-data-card,
.invest-v2-panel,
.invest-v2-kpis article,
.investment-card,
.portfolio-card {
    border-radius: var(--card-radius);
}

.glass-card,
.glass-card.card-lg,
.card,
.tx-dashboard-card,
.report-card-modern,
.report-insight-card,
.savings-kpi-card,
.savings-goal-card,
.debt-card,
.master-data-card,
.invest-v2-kpis article,
.investment-card,
.portfolio-card {
    padding: var(--card-padding);
}

.glass-card.card-sm,
.card-sm {
    padding: 14px;
}

.topbar {
    min-height: var(--topbar-height);
    height: var(--topbar-height);
    padding: 0 var(--page-padding-desktop);
    gap: 14px;
}

.topbar-title {
    min-width: 0;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-right {
    min-width: 0;
    flex: 1;
    justify-content: flex-end;
}

.search-bar {
    width: min(320px, 30vw);
    min-width: 160px;
    height: 40px;
    padding: 0 12px;
}

.topbar-actions {
    flex-shrink: 0;
}

.topbar-btn,
.avatar-top img {
    width: 38px;
    height: 38px;
}

.topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: none;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(4px);
}

.sidebar {
    flex: 0 0 var(--sidebar-width);
}

.sidebar-header {
    padding: 18px;
}

.sidebar-footer {
    padding: 16px;
}

.logo-title {
    font-size: 18px;
}

.nav-link {
    min-height: 40px;
    padding: 9px 12px;
}

.submenu-link {
    padding: 7px 10px;
}

.btn,
.btn-action-compact,
.btn-add-transaction {
    min-height: var(--button-height);
}

.btn,
.btn-action-compact {
    padding: 0 16px;
    font-size: 14px;
}

.page-header h1,
.dashboard-header h1,
.reports-title-modern,
.invest-v2-hero h1 {
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.16;
}

.home-kpi-grid,
.stats-grid,
.jars-grid,
.wallets-grid,
.investment-kpi-grid,
.investment-grid,
.debt-kpi-grid,
.debt-card-grid,
.debt-grid,
.savings-kpi-grid,
.savings-goal-grid,
.savings-grid,
.master-data-kpi-grid,
.master-data-card-grid,
.reports-kpi-grid-modern,
.invest-v2-kpis {
    gap: var(--page-gap);
}

.home-kpi-grid,
.stats-grid,
.wallets-grid,
.investment-grid,
.debt-grid,
.savings-grid,
.master-data-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.investment-kpi-grid,
.debt-kpi-grid,
.savings-kpi-grid,
.master-data-kpi-grid,
.reports-kpi-grid-modern,
.invest-v2-kpis {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

.jars-grid,
.debt-card-grid,
.savings-goal-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.home-main-grid,
.reports-charts-grid,
.reports-insights-grid {
    gap: var(--page-gap);
}

.responsive-table-wrapper,
.table-responsive,
.modern-table-scroll,
.reports-monthly-table-wrap,
.invest-v2-table-wrap,
.investment-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-table-wrapper table,
.table-responsive table,
.modern-table-scroll table {
    min-width: 680px;
}

.investment-table-header,
.investment-position-row,
.reports-monthly-table,
.savings-history-table,
.debt-history-table {
    min-width: 680px;
}

table th,
table td,
.invest-v2-table th,
.invest-v2-table td {
    padding: 10px 12px;
    font-size: 13px;
}

.form-grid,
.form-row-2,
.debt-form-row,
.debt-form-grid,
.savings-form-grid,
.invest-order-input-grid,
.debt-detail-grid,
.debt-meta-grid {
    gap: 14px;
}

.form-input,
.form-select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    min-height: 40px;
    font-size: 14px;
}

.modal-overlay,
.invest-v2-modal-overlay,
.jar-guide-modal-overlay,
.contact-detail-overlay {
    padding: 16px;
}

.modal-content,
.modal-content.debt-modal-shell,
.modal-content.savings-modal-shell,
.modal-content.savings-detail-shell,
.jar-guide-modal,
.contact-detail-modal,
.invest-v2-modal {
    width: 100%;
    max-width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: hidden;
}

.modal-content.debt-wide-shell,
.modal-content.debt-detail-shell {
    max-width: min(960px, calc(100vw - 32px));
}

.modal-header,
.debt-modal-header,
.savings-modal-header,
.jar-guide-modal-header,
.contact-detail-header,
.invest-v2-modal-header {
    flex-shrink: 0;
    padding: 18px 20px;
}

.modal-title,
.modal-header h2,
.debt-modal-header h2,
.savings-modal-header h2,
.jar-guide-modal-header h2,
.contact-detail-header h2,
.invest-v2-modal-header h2 {
    min-width: 0;
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.25;
}

.modal-body,
.debt-modal-body,
.savings-modal-body,
.jar-guide-modal-body,
.contact-detail-body {
    max-height: calc(100vh - 136px);
    overflow-y: auto;
    padding: 18px;
}

.fab-container {
    right: 24px;
    bottom: 24px;
}

.fab {
    width: 54px;
    height: 54px;
}

.fab-menu {
    max-height: min(70vh, 480px);
    overflow-y: auto;
}

.home-dashboard-pro,
.reports-dashboard,
.jars-dashboard-layout,
.investments-dashboard,
.savings-dashboard,
.debts-dashboard,
.master-data-page,
.settings-dashboard {
    gap: var(--page-gap);
}

.home-kpi-card,
.stat-card,
.stat-card-new,
.jar-card,
.jars-overview-card,
.jar-detail-card,
.jar-ratio-card,
.jar-guide-card,
.finance-card,
.investment-kpi-card,
.ih-kpi-card,
.reports-dashboard .report-kpi-card,
.reports-dashboard .report-card,
.report-kpi-card-modern,
.debt-kpi-card,
.savings-kpi-card,
.master-data-wallet-card,
.master-data-category-card,
.master-data-contact-card,
.kpi-card {
    padding: var(--card-padding);
    border-radius: var(--card-radius);
}

.home-kpi-card strong,
.investment-kpi-card strong,
.debt-kpi-card strong,
.savings-kpi-card strong,
.report-kpi-card-modern .kpi-value,
.reports-dashboard .report-kpi-value {
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.15;
}

.home-kpi-card span,
.investment-kpi-card span,
.debt-kpi-card small,
.savings-kpi-card small,
.reports-dashboard .report-kpi-label,
.report-kpi-card-modern .kpi-title {
    font-size: 12px;
    line-height: 1.35;
}

.home-main-grid,
.reports-charts-grid,
.reports-insights-grid,
.reports-page .reports-charts-grid,
.reports-page .reports-insights-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
}

.transactions-dashboard-layout,
.reports-dashboard .reports-content-grid {
    gap: var(--page-gap);
}

.transactions-sidebar {
    min-width: 260px;
}

.investment-table,
.invest-v2-table,
.reports-monthly-table {
    font-size: 13px;
}

.investment-table-header,
.investment-position-row {
    grid-template-columns: minmax(130px, 1.4fr) repeat(4, minmax(92px, 1fr)) 68px;
}

.reports-page .reports-monthly-table,
.reports-monthly-table {
    min-width: 860px;
}

.reports-page .reports-monthly-grid {
    padding: 11px 12px;
}

.invest-v2-table {
    min-width: 760px;
}

.invest-v2-table th,
.invest-v2-table td {
    padding: 10px 12px;
}

.invest-v2-hero {
    padding: 18px;
}

.invest-v2-hero h1,
.debt-page-title,
.savings-title,
.investment-page-title {
    font-size: clamp(24px, 2vw, 28px);
}

.debt-modal--wide,
.savings-detail-modal,
.debt-detail-modal {
    max-width: min(960px, calc(100vw - 32px));
}

.debt-modal-layout {
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.1fr);
    gap: 16px;
}

.debt-detail-layout {
    grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.1fr);
}

.sidebar-collapse-btn {
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin-left: auto;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-collapse-btn:hover {
    border-color: rgba(184, 146, 255, 0.35);
    background: rgba(138, 99, 229, 0.14);
    color: var(--text-primary);
}

.sidebar,
.content-wrapper {
    transition: width var(--transition-normal), flex-basis var(--transition-normal);
}

body.sidebar-collapsed .sidebar {
    width: 72px;
    flex-basis: 72px;
}

body.sidebar-collapsed .sidebar-header {
    padding: 14px 10px;
}

body.sidebar-collapsed .logo {
    justify-content: center;
    margin-bottom: 14px;
}

body.sidebar-collapsed .logo-text,
body.sidebar-collapsed .sidebar-profile-info,
body.sidebar-collapsed .nav-link span,
body.sidebar-collapsed .submenu,
body.sidebar-collapsed .submenu-arrow {
    display: none !important;
}

body.sidebar-collapsed .sidebar-profile-card {
    justify-content: center;
    padding: 10px 0;
}

body.sidebar-collapsed .sidebar-profile-card img {
    width: 36px;
    height: 36px;
}

body.sidebar-collapsed .sidebar-nav {
    padding: 10px 8px;
}

body.sidebar-collapsed .nav-link {
    min-height: 42px;
    justify-content: center;
    padding: 0;
}

body.sidebar-collapsed .nav-link i:not(.submenu-arrow) {
    width: 42px;
    margin-right: 0;
    font-size: 17px;
}

body.sidebar-collapsed .nav-link::before {
    left: 4px;
}

body.sidebar-collapsed .sidebar-footer {
    padding: 12px 8px;
}

body.sidebar-collapsed .btn-add-transaction {
    width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0 auto 12px;
    padding: 0;
    font-size: 0;
}

body.sidebar-collapsed .btn-add-transaction i {
    margin: 0;
    font-size: 15px;
}

body.sidebar-collapsed .footer-links {
    align-items: center;
    gap: 10px;
}

body.sidebar-collapsed .footer-links a {
    width: 42px;
    height: 42px;
    justify-content: center;
    gap: 0;
    font-size: 0;
}

body.sidebar-collapsed .footer-links a i {
    font-size: 16px;
}

body.sidebar-collapsed .sidebar-collapse-btn {
    margin: 0 auto;
}

@media (max-width: 1440px) {
    :root {
        --page-gap: 12px;
        --card-padding: 14px;
        --page-padding-desktop: 14px;
        --sidebar-width: 240px;
    }

    .main-content {
        padding: var(--page-padding-laptop);
    }

    .main-content.main-content--page-owned-header {
        padding-top: var(--page-padding-laptop);
    }

    .topbar {
        padding: 0 var(--page-padding-laptop);
    }

    .search-bar {
        width: min(280px, 28vw);
    }

    .topbar-title {
        font-size: clamp(18px, 1.5vw, 20px);
    }

    .home-main-grid,
    .reports-page .reports-charts-grid,
    .reports-page .reports-insights-grid {
        gap: var(--page-gap);
    }

    .home-kpi-card,
    .stat-card,
    .stat-card-new,
    .jar-card,
    .jars-overview-card,
    .jar-detail-card,
    .jar-ratio-card,
    .jar-guide-card,
    .finance-card,
    .investment-kpi-card,
    .ih-kpi-card,
    .reports-dashboard .report-kpi-card,
    .reports-dashboard .report-card,
    .report-kpi-card-modern,
    .debt-kpi-card,
    .savings-kpi-card,
    .master-data-wallet-card,
    .master-data-category-card,
    .master-data-contact-card,
    .kpi-card {
        padding: var(--card-padding);
    }

    .home-main-grid,
    .reports-charts-grid,
    .reports-insights-grid,
    .reports-page .reports-charts-grid,
    .reports-page .reports-insights-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.8fr);
    }

    .investment-grid,
    .debt-grid,
    .savings-grid,
    .master-data-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    }

    .jars-grid,
    .debt-card-grid,
    .savings-goal-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    }

    .btn,
    .btn-action-compact,
    .btn-add-transaction,
    .debt-btn,
    .savings-btn,
    .reports-btn-action {
        min-height: 38px;
    }

    .modal-content,
    .modal-content.debt-modal-shell,
    .modal-content.savings-modal-shell,
    .modal-content.savings-detail-shell,
    .jar-guide-modal,
    .contact-detail-modal,
    .invest-v2-modal {
        max-width: min(820px, calc(100vw - 32px));
    }

    .modal-content.debt-wide-shell,
    .modal-content.debt-detail-shell,
    .debt-modal--wide,
    .savings-detail-modal,
    .debt-detail-modal {
        max-width: min(940px, calc(100vw - 32px));
    }
}

@media (max-width: 1024px) {
    body.sidebar-drawer-open {
        overflow: hidden;
    }

    .sidebar-collapse-btn {
        display: none;
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    .sidebar,
    body.sidebar-collapsed .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: min(300px, 84vw);
        flex-basis: auto;
        max-width: 84vw;
        transform: translateX(-105%);
        transition: transform var(--transition-normal);
        box-shadow: 24px 0 48px rgba(0, 0, 0, 0.32);
    }

    .sidebar.open,
    body.sidebar-collapsed .sidebar.open {
        left: 0;
        transform: translateX(0);
    }

    body.sidebar-collapsed .logo-text,
    body.sidebar-collapsed .sidebar-profile-info {
        display: flex !important;
    }

    body.sidebar-collapsed .nav-link span,
    body.sidebar-collapsed .submenu-arrow {
        display: inline-flex !important;
    }

    body.sidebar-collapsed .submenu {
        display: none !important;
    }

    body.sidebar-collapsed .nav-item.open .submenu {
        display: flex !important;
    }

    body.sidebar-collapsed .nav-link {
        justify-content: flex-start;
        padding: 9px 12px;
    }

    body.sidebar-collapsed .nav-link i:not(.submenu-arrow) {
        width: 24px;
        margin-right: 12px;
    }

    body.sidebar-collapsed .sidebar-header {
        padding: 18px;
    }

    body.sidebar-collapsed .logo {
        justify-content: flex-start;
        margin-bottom: var(--spacing-lg);
    }

    body.sidebar-collapsed .sidebar-profile-card {
        justify-content: flex-start;
        padding: 12px;
    }

    body.sidebar-collapsed .sidebar-nav {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    body.sidebar-collapsed .sidebar-footer {
        padding: 16px;
    }

    body.sidebar-collapsed .btn-add-transaction {
        width: 100%;
        min-height: var(--button-height);
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-md);
        font-size: 15px;
    }

    body.sidebar-collapsed .btn-add-transaction i {
        font-size: inherit;
    }

    body.sidebar-collapsed .footer-links {
        align-items: stretch;
        gap: var(--spacing-md);
    }

    body.sidebar-collapsed .footer-links a {
        width: auto;
        height: auto;
        justify-content: flex-start;
        gap: var(--spacing-md);
        font-size: 14px;
    }

    body.sidebar-drawer-open .sidebar-overlay {
        display: block;
    }

    .main-content {
        padding: var(--page-padding-tablet);
    }

    .topbar {
        padding: 0 var(--page-padding-tablet);
    }

    .search-bar {
        width: min(280px, 36vw);
    }
}

@media (max-width: 768px) {
    :root {
        --page-gap: 14px;
        --card-padding: 16px;
        --button-height: 40px;
        --topbar-height: auto;
    }

    .topbar {
        min-height: 58px;
        height: auto;
        flex-wrap: wrap;
        padding: 10px var(--page-padding-mobile);
    }

    .topbar-title {
        flex: 1 1 calc(100% - 56px);
        font-size: 18px;
    }

    .topbar-right {
        flex: 1 1 100%;
        width: 100%;
        gap: 10px;
    }

    .search-bar {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .topbar-actions {
        gap: 8px;
    }

    .user-profile-top {
        margin-left: 0;
        padding-left: 10px;
    }

    .main-content {
        padding: var(--page-padding-mobile);
        padding-bottom: var(--mobile-safe-bottom);
    }

    .home-kpi-grid,
    .stats-grid,
    .wallets-grid,
    .investment-kpi-grid,
    .investment-grid,
    .debt-kpi-grid,
    .debt-card-grid,
    .debt-grid,
    .savings-kpi-grid,
    .savings-goal-grid,
    .savings-grid,
    .master-data-kpi-grid,
    .master-data-card-grid,
    .reports-kpi-grid-modern,
    .invest-v2-kpis,
    .jars-grid {
        grid-template-columns: 1fr !important;
    }

    .form-grid,
    .form-row-2,
    .debt-form-row,
    .debt-form-grid,
    .savings-form-grid,
    .invest-order-input-grid,
    .debt-detail-grid,
    .debt-meta-grid,
    .investment-detail-summary,
    .contact-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-overlay,
    .invest-v2-modal-overlay,
    .jar-guide-modal-overlay,
    .contact-detail-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .modal-content,
    .modal-content.debt-modal-shell,
    .modal-content.savings-modal-shell,
    .modal-content.savings-detail-shell,
    .jar-guide-modal,
    .contact-detail-modal,
    .invest-v2-modal {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .modal-header,
    .debt-modal-header,
    .savings-modal-header,
    .jar-guide-modal-header,
    .contact-detail-header,
    .invest-v2-modal-header {
        padding: 14px 16px;
    }

    .modal-body,
    .debt-modal-body,
    .savings-modal-body,
    .jar-guide-modal-body,
    .contact-detail-body {
        max-height: calc(100vh - 124px);
        padding: 16px;
    }

    .fab-container {
        right: 16px;
        bottom: 16px;
    }

    .fab {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .fab-menu {
        bottom: 60px;
        min-width: 168px;
    }
}

@media (max-width: 390px) {
    .topbar-actions {
        gap: 6px;
    }

    .topbar-btn,
    .avatar-top img {
        width: 34px;
        height: 34px;
    }

    .search-bar input {
        font-size: 13px;
    }
}
/* ============================================
   PHASE 8 - RESPONSIVE MOBILE PATCH
   ============================================ */
@media (max-width: 1024px) {
    /* 5. Sidebar Drawer Overlap Fix */
    .sidebar-overlay {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    body.sidebar-drawer-open .sidebar-overlay {
        display: block !important;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    /* 1. Topbar */
    .topbar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 60px !important;
        padding: 10px 16px !important;
    }
    .search-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 8px;
        order: 3;
    }
    .topbar-right {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }
    .topbar-title {
        flex: 1 !important;
    }
    
    /* 2. Dashboard & Grids */
    .home-main-grid,
    .reports-main-grid,
    .transactions-dashboard-layout,
    .ds-layout-2col,
    .ds-layout-2col--reverse {
        grid-template-columns: 1fr !important;
    }

    /* 3 & 4. Table Scroll UX */
    .transactions-dashboard-layout > div,
    .reports-main-grid > div,
    .table-responsive,
    .transactions-table-wrapper,
    .reports-table-wrapper {
        max-width: 100vw;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px; /* Room for scrollbar */
    }
    
    /* 6. Modal */
    .modal-content, 
    .modal-content.debt-modal-shell, 
    .modal-content.savings-modal-shell, 
    .modal-content.savings-detail-shell, 
    .jar-guide-modal, 
    .contact-detail-modal, 
    .invest-v2-modal {
        max-width: calc(100vw - 24px) !important;
        width: 100% !important;
        margin: 12px auto !important;
    }
    .modal-body, .debt-modal-body, .savings-modal-body {
        padding: 16px !important;
    }
    .modal-close {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .modal-overlay {
        align-items: center !important; /* Fix flex-start issue */
        padding: 0 !important;
    }

    /* 7. Form - iOS zoom fix */
    input, select, textarea, .form-input, .form-select, .ds-input, .ds-select {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    
    /* 8. Toast */
    .toast {
        max-width: calc(100vw - 32px) !important;
        width: max-content !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        text-align: center !important;
        padding: 12px 24px !important;
    }

    /* 10. Calendar padding */
    .month-grid, .emoji-grid {
        gap: 2px !important;
    }
}

@media (max-width: 576px) {
    /* 10. Calendar adjustment */
    .month-grid, .week-grid, .emoji-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 2px !important;
    }
    .calendar-day, .month-cell, .emoji-item {
        min-height: 40px !important;
        padding: 4px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 9. Hover on Touch */
@media (hover: none) {
    .glass-card:hover, 
    .fab:hover, 
    .home-action-btn:hover,
    .btn:hover,
    .nav-link:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .glass-card {
        transition: none !important;
    }
}

/* ============================================ */
/* PHASE 9 - MOBILE DASHBOARD UX IMPROVEMENT */
/* ============================================ */
@media (max-width: 768px) {
    /* 1. Giảm khoảng trắng tổng thể Dashboard */
    .home-dashboard-pro, .home-main-grid {
        gap: 12px !important;
    }
    .home-panel {
        padding: 12px !important;
    }
    .home-panel-header {
        margin-bottom: 10px !important;
    }

    /* 2. Đưa Quick Actions về lưới 2x2, Button nhỏ hơn */
    .home-quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .home-action-btn {
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 56px !important;
        gap: 2px !important;
        border-radius: var(--radius-md) !important;
        padding: 6px !important;
    }
    .home-action-btn i {
        font-size: 18px !important;
        margin-bottom: 2px;
    }
    .home-action-btn span {
        font-size: 12px !important;
    }

    /* 3. Ẩn Card Dòng tiền tháng này (Chống lặp nội dung) */
    .home-cashflow-panel {
        display: none !important;
    }

    /* 4. KPI và 6 Hũ dạng lưới (2x2 và 2x3) */
    .home-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .home-kpi-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    .home-kpi-card > div {
        width: 100% !important;
    }
    .home-kpi-card strong {
        font-size: 15px !important;
        word-break: break-all;
    }
    .home-kpi-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .home-jars-mini-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* 5. Topbar 1 dòng */
    .topbar {
        flex-wrap: nowrap !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    .topbar-title {
        flex: 0 1 auto !important;
        font-size: 16px !important;
        max-width: 80px;
    }
    .topbar-right {
        flex-wrap: nowrap !important;
        width: auto !important;
        flex: 1 !important;
        gap: 8px !important;
    }
    .search-bar {
        margin-top: 0 !important;
        order: 0 !important;
        width: 100% !important;
        max-width: 120px !important;
        height: 34px !important;
    }
    .topbar-actions {
        flex-wrap: nowrap !important;
    }
}

/* 6. Global Font Reset for Form Elements */
button, input, select, textarea {
    font-family: inherit;
}