:root {
    --ink: #20302f;
    --muted: #73817f;
    --line: #dce5e3;
    --paper: #ffffff;
    --canvas: #f4f7f6;
    --teal: #087f72;
    --teal-dark: #05675d;
    --coral: #dd654e;
    --gold: #c69532;
}

html, body, button, input, select, textarea, table, th, td {
    direction: rtl;
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
    color: var(--ink);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


/* ============================================================
   AUTHENTICATION & LOGIN REDESIGN (طراحی مدرن صفحه ورود و احراز هویت)
   ============================================================ */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.035) 0%, transparent 45%),
                radial-gradient(circle at 82% 82%, rgba(14, 165, 233, 0.03) 0%, transparent 45%),
                linear-gradient(150deg, #f8fafc 0%, #f1f5f9 50%, #eef2f6 100%);
    position: relative;
    overflow-x: hidden;
    padding: 30px 16px;
    direction: rtl;
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
}

.auth-page.dark-theme,
[data-theme="dark"] .auth-page {
    background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.05) 0%, transparent 45%),
                radial-gradient(circle at 82% 82%, rgba(14, 165, 233, 0.03) 0%, transparent 45%),
                linear-gradient(150deg, #0b0f19 0%, #0e1420 50%, #0d1117 100%);
}

.auth-ambient-orb {
    display: none;
}

.auth-theme-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 50;
}

.auth-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.auth-theme-btn:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.auth-card-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    margin: auto;
    transition: max-width 0.25s ease;
}

.auth-card-container.is-split-layout {
    width: 96vw;
    max-width: 1180px;
    margin: 20px auto;
}

.auth-card {
    width: 100%;
    background: #ffffff;
    border-radius: 26px;
    padding: 38px 34px 34px 34px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.8);
    position: relative;
    animation: authCardIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark-theme .auth-card,
[data-theme="dark"] .auth-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.auth-card.auth-card-split {
    padding: 0;
    border-radius: 28px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Split Layout for Modern Login & Showcase */
.auth-split-layout {
    display: flex;
    flex-direction: row;
    min-height: 620px;
    width: 100%;
    box-sizing: border-box;
}

/* RIGHT SIDE (in RTL): APP FEATURES & CAPABILITIES SHOWCASE */
.auth-showcase-side {
    flex: 1.35;
    min-width: 0;
    background: linear-gradient(150deg, #f8fafc 0%, #eef2ff 45%, #f0fdf4 100%);
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.showcase-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.showcase-brand-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.showcase-logo-box {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(79, 70, 229, 0.2);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
}

.showcase-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.showcase-version-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(79, 70, 229, 0.09);
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
}

.showcase-version-chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

.showcase-app-name {
    font-size: 19px;
    font-weight: 900;
    color: #0f172a;
    margin: 3px 0 0 0;
    letter-spacing: -0.3px;
}

.showcase-slogan {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #6366f1;
    margin-top: 2px;
    letter-spacing: 0.3px;
    direction: ltr;
    text-align: right;
}

.showcase-hero-text .showcase-main-heading {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.45;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.3px;
}

.highlight-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.showcase-lead-desc {
    font-size: 13px;
    color: #64748b;
    margin: 6px 0 0 0;
    line-height: 1.65;
}

.showcase-features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.showcase-feature-card {
    display: flex;
    gap: 9px;
    padding: 11px 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.9);
    backdrop-filter: blur(8px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 0;
    box-sizing: border-box;
}

.showcase-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.feature-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.icon-sun { background: #fef3c7; }
.icon-cal { background: #e0e7ff; }
.icon-loan { background: #d1fae5; }
.icon-cheque { background: #cffafe; }
.icon-note { background: #fce7f3; }
.icon-lock { background: #f1f5f9; }

.feature-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.feature-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
}

.feature-title-row strong {
    font-size: 12px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

.feature-badge {
    font-size: 9px;
    font-weight: 700;
    color: #4338ca;
    background: rgba(79, 70, 229, 0.08);
    padding: 1px 5px;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.feature-content p {
    font-size: 10.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}

.showcase-proof-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed rgba(203, 213, 225, 0.8);
}

.proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: rgba(255, 255, 255, 0.75);
    padding: 4px 10px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.85);
}

/* LEFT SIDE (in RTL): LOGIN FORM AREA */
.auth-form-side {
    flex: 0.95;
    min-width: 320px;
    max-width: 420px;
    padding: 38px 30px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.auth-form-inner {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-side-header {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 4px;
}

.mobile-only-logo {
    display: none;
}

.form-welcome-title {
    font-size: 21px;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.3px;
}

.form-welcome-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.form-side-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
}

/* Dark Theme Overrides for Split Layout */
[data-theme="dark"] .auth-card.auth-card-split,
.dark-theme .auth-card.auth-card-split {
    background: #0d1117;
    border-color: #30363d;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .auth-showcase-side,
.dark-theme .auth-showcase-side {
    background: linear-gradient(150deg, #131822 0%, #171d2b 45%, #0f1e1a 100%);
    border-left-color: #30363d;
}

[data-theme="dark"] .showcase-app-name,
.dark-theme .showcase-app-name,
[data-theme="dark"] .showcase-hero-text .showcase-main-heading,
.dark-theme .showcase-hero-text .showcase-main-heading,
[data-theme="dark"] .form-welcome-title,
.dark-theme .form-welcome-title {
    color: #f0f6fc;
}

[data-theme="dark"] .showcase-feature-card,
.dark-theme .showcase-feature-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .showcase-feature-card:hover,
.dark-theme .showcase-feature-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .feature-title-row strong,
.dark-theme .feature-title-row strong {
    color: #f0f6fc;
}

[data-theme="dark"] .feature-content p,
.dark-theme .feature-content p,
[data-theme="dark"] .showcase-lead-desc,
.dark-theme .showcase-lead-desc,
[data-theme="dark"] .form-welcome-desc,
.dark-theme .form-welcome-desc {
    color: #8b949e;
}

[data-theme="dark"] .feature-badge,
.dark-theme .feature-badge {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

[data-theme="dark"] .showcase-version-chip,
.dark-theme .showcase-version-chip {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

[data-theme="dark"] .showcase-logo-box,
.dark-theme .showcase-logo-box {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .proof-pill,
.dark-theme .proof-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

[data-theme="dark"] .auth-form-side,
.dark-theme .auth-form-side {
    background: #0d1117;
}

[data-theme="dark"] .icon-sun, .dark-theme .icon-sun { background: rgba(245, 158, 11, 0.15); }
[data-theme="dark"] .icon-cal, .dark-theme .icon-cal { background: rgba(99, 102, 241, 0.15); }
[data-theme="dark"] .icon-loan, .dark-theme .icon-loan { background: rgba(16, 185, 129, 0.15); }
[data-theme="dark"] .icon-cheque, .dark-theme .icon-cheque { background: rgba(6, 182, 212, 0.15); }
[data-theme="dark"] .icon-note, .dark-theme .icon-note { background: rgba(236, 72, 153, 0.15); }
[data-theme="dark"] .icon-lock, .dark-theme .icon-lock { background: rgba(148, 163, 184, 0.15); }

/* Responsive Media Queries */
@media (max-width: 1060px) {
    .auth-card-container.is-split-layout {
        max-width: 520px;
        padding: 12px;
    }

    .auth-split-layout {
        flex-direction: column;
        min-height: auto;
    }

    .auth-form-side {
        order: 1;
        padding: 28px 22px;
    }

    .auth-showcase-side {
        order: 2;
        border-left: none;
        border-top: 1px solid #e2e8f0;
        padding: 26px 20px;
    }

    [data-theme="dark"] .auth-showcase-side,
    .dark-theme .auth-showcase-side {
        border-top-color: #30363d;
    }

    .mobile-only-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
    }

    .form-side-header {
        text-align: center;
    }

    .showcase-features-grid {
        grid-template-columns: 1fr;
    }

    .showcase-hero-text .showcase-main-heading {
        font-size: 20px;
    }
}

/* Features Intro Button & Slogan on Login Card */
.auth-slogan-wrap {
    margin: 2px 0 6px 0;
}

.auth-slogan {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.3px;
    direction: ltr;
}

.dark-theme .auth-slogan,
[data-theme="dark"] .auth-slogan {
    color: #818cf8;
}

.btn-features-intro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.22);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 8px;
    text-decoration: none;
}

.btn-features-intro:hover {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
    color: #4338ca;
}

.intro-sparkle {
    font-size: 13px;
}

.intro-badge {
    font-size: 10px;
    background: #4f46e5;
    color: #ffffff;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 800;
}

.dark-theme .btn-features-intro,
[data-theme="dark"] .btn-features-intro {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.32);
}

.dark-theme .btn-features-intro:hover,
[data-theme="dark"] .btn-features-intro:hover {
    background: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
}

/* Features Showcase Modal */
.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    animation: authModalFadeIn 0.22s ease-out;
    direction: rtl;
}

.auth-modal-dialog {
    width: 100%;
    max-width: 780px;
    max-height: 88vh;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: authModalZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #fafbfc;
}

.auth-modal-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-modal-logo-box {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(79, 70, 229, 0.18);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
}

.auth-modal-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-modal-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-modal-title {
    font-size: 17px;
    font-weight: 900;
    color: #0f172a;
    margin: 2px 0 0 0;
}

.auth-modal-slogan {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    direction: ltr;
    text-align: right;
}

.auth-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.auth-modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    transform: rotate(90deg);
}

.auth-modal-body {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(88vh - 150px);
}

.auth-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #fafbfc;
    display: flex;
    justify-content: flex-end;
}

.btn-modal-done {
    width: auto !important;
    padding: 10px 24px !important;
    font-size: 13.5px !important;
}

/* Dark mode for modal */
.dark-theme .auth-modal-dialog,
[data-theme="dark"] .auth-modal-dialog {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}

.dark-theme .auth-modal-header,
[data-theme="dark"] .auth-modal-header,
.dark-theme .auth-modal-footer,
[data-theme="dark"] .auth-modal-footer {
    background: #11161d;
    border-color: #30363d;
}

.dark-theme .auth-modal-title,
[data-theme="dark"] .auth-modal-title {
    color: #f0f6fc;
}

.dark-theme .auth-modal-slogan,
[data-theme="dark"] .auth-modal-slogan {
    color: #818cf8;
}

.dark-theme .auth-modal-logo-box,
[data-theme="dark"] .auth-modal-logo-box {
    background: #0d1117;
    border-color: #30363d;
}

.dark-theme .auth-modal-close,
[data-theme="dark"] .auth-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #8b949e;
}

.dark-theme .auth-modal-close:hover,
[data-theme="dark"] .auth-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

@keyframes authModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes authModalZoomIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Mobile Clean Dashboard Header */
.dashboard-mobile-header {
    display: none;
}

.mobile-quick-nav-strip {
    display: none;
}

@media (max-width: 768px) {
    .dashboard-mobile-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 6px 4px 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    }

    .mobile-header-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .mobile-today-progress {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        background: rgba(79, 70, 229, 0.05) !important;
        border: 1px solid rgba(79, 70, 229, 0.12) !important;
        border-radius: 12px !important;
        padding: 7px 11px !important;
    }

    .dark-theme .mobile-today-progress,
    [data-theme="dark"] .mobile-today-progress {
        background: rgba(99, 102, 241, 0.1) !important;
        border-color: rgba(99, 102, 241, 0.2) !important;
    }

    .mtp-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 11px !important;
        color: #475569 !important;
    }

    .dark-theme .mtp-info,
    [data-theme="dark"] .mtp-info {
        color: #cbd5e1 !important;
    }

    .mtp-info strong {
        color: #4f46e5 !important;
        font-weight: 800 !important;
    }

    .dark-theme .mtp-info strong,
    [data-theme="dark"] .mtp-info strong {
        color: #a5b4fc !important;
    }

    .mtp-track {
        width: 100% !important;
        height: 4px !important;
        background: rgba(0, 0, 0, 0.07) !important;
        border-radius: 99px !important;
        overflow: hidden !important;
    }

    .dark-theme .mtp-track,
    [data-theme="dark"] .mtp-track {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .mtp-bar {
        height: 100% !important;
        background: linear-gradient(90deg, #4f46e5, #06b6d4) !important;
        border-radius: 99px !important;
        transition: width 0.3s ease !important;
    }

    [data-theme="dark"] .dashboard-mobile-header,
    .dark-theme .dashboard-mobile-header {
        border-bottom-color: rgba(51, 65, 85, 0.8) !important;
    }

    .mobile-greeting-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .mobile-greeting-sub {
        font-size: 11.5px !important;
        color: #64748b !important;
        font-weight: 600 !important;
    }

    [data-theme="dark"] .mobile-greeting-sub,
    .dark-theme .mobile-greeting-sub {
        color: #94a3b8 !important;
    }

    .mobile-greeting-title {
        font-size: 15.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    [data-theme="dark"] .mobile-greeting-title,
    .dark-theme .mobile-greeting-title {
        color: #f1f5f9 !important;
    }

    .mobile-clock-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        padding: 4px 10px !important;
        border-radius: 99px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #475569 !important;
    }

    [data-theme="dark"] .mobile-clock-badge,
    .dark-theme .mobile-clock-badge {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #cbd5e1 !important;
    }
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header Section */
.auth-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.auth-logo-badge {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(59, 130, 246, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(79, 70, 229, 0.15);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12);
    margin-bottom: 4px;
}

.auth-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.auth-brand-logo-mini {
    width: 44px;
    height: 44px;
}

.auth-main-title {
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.3px;
    font-feature-settings: "ss01" 1;
}

.auth-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    max-width: 360px;
}

.dark-theme .auth-main-title,
[data-theme="dark"] .auth-main-title {
    color: #f0f6fc;
}

.dark-theme .auth-subtitle,
[data-theme="dark"] .auth-subtitle {
    color: #8b949e;
}

/* Alerts */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;
}

.auth-alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.auth-alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

/* Segmented Tabs */
.auth-tabs-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 14px;
    gap: 4px;
    border: 1px solid #e2e8f0;
}

.auth-seg-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

.auth-seg-tab:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.auth-seg-tab.active {
    background: #ffffff;
    color: #1e40af;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tab-emoji-icon {
    font-size: 16px;
}

.tab-google-icon {
    flex-shrink: 0;
}

/* Tab Panels */
.auth-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: authPanelFade 0.22s ease-out;
}

@keyframes authPanelFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Official Google Button */
.btn-google-sign-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 15px;
    padding: 13px 18px;
    text-decoration: none !important;
    color: #1e293b !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.btn-google-sign-in:hover {
    border-color: #4285f4;
    background: #fbfdff;
    box-shadow: 0 8px 24px rgba(66, 133, 244, 0.18);
    transform: translateY(-2px);
}

.btn-google-sign-in:active {
    transform: scale(0.98);
}

.google-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.google-btn-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    text-align: right;
    gap: 1px;
}

.google-btn-texts .btn-primary-text {
    font-size: 14.5px;
    font-weight: 800;
    color: #1e293b;
}

.google-btn-texts .btn-sub-text {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
}

.btn-arrow-icon {
    font-size: 18px;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.btn-google-sign-in:hover .btn-arrow-icon {
    transform: translateX(-4px);
    color: #4285f4;
}

/* Divider */
.auth-divider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.divider-label {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 700;
    white-space: nowrap;
}

/* Auth Forms */
.auth-form-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-field-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-field-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin: 0;
}

.auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix-icon {
    position: absolute;
    right: 14px;
    font-size: 18px;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

.auth-text-input {
    width: 100%;
    height: 50px;
    border-radius: 13px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    padding: 0 46px 0 14px;
    font-size: 14.5px;
    font-family: inherit;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
}

.auth-text-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.auth-text-input.ltr-input {
    direction: ltr;
    text-align: left;
    padding-left: 14px;
    padding-right: 46px;
    font-feature-settings: "ss01" 1;
}

.field-hint {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.5;
}

.quick-email-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.chips-hint {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
}

.quick-chip {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    color: #475569;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    direction: ltr;
}

.quick-chip:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn-primary-submit {
    height: 50px;
    width: 100%;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.btn-primary-submit:hover {
    box-shadow: 0 8px 26px rgba(79, 70, 229, 0.45);
    transform: translateY(-2px);
}

.btn-primary-submit:active {
    transform: scale(0.98);
}

.btn-primary-submit .submit-arrow {
    font-size: 17px;
    transition: transform 0.2s ease;
}

.btn-primary-submit:hover .submit-arrow {
    transform: translateX(-4px);
}

.btn-mobile-submit {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.35);
}

.btn-mobile-submit:hover {
    box-shadow: 0 8px 26px rgba(5, 150, 105, 0.45);
}

/* Trust Badges */
.auth-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.trust-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
}

.trust-tile .trust-icon {
    font-size: 16px;
}

.auth-page-footer {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.auth-footer-sep {
    font-size: 16px;
    opacity: 0.6;
}

/* Backward compatibility classes */
.auth-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #0f172a;
}

.auth-input {
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    padding: 0 14px;
}

.auth-button {
    height: 48px;
    width: 100%;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14.5px;
}

.auth-message {
    margin-top: 15px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
}

.calendar-page {
    min-height: calc(100vh - 3rem);
    background: var(--canvas);
    margin: -1.1rem -1.5rem -1.1rem;
    padding: 24px clamp(16px, 3vw, 42px);
}

.calendar-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 18px;
}

.calendar-toolbar h1 {
    font-size: clamp(22px, 3vw, 34px);
    margin: 2px 0 0;
}

.eyebrow {
    color: var(--teal);
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.calendar-actions,
.view-switcher,
.quick-add {
    display: flex;
    align-items: center;
}

.calendar-actions {
    direction: ltr;
    border: 1px solid var(--line);
    background: var(--paper);
}

.icon-button,
.today-button,
.view-switcher button {
    border: 0;
    background: transparent;
    color: var(--ink);
    min-height: 38px;
}

.icon-button,
.today-button {
    padding: 0 13px;
}

.today-button,
.view-switcher button {
    border-inline: 1px solid var(--line);
}

.view-switcher {
    direction: ltr;
    background: #e8eeec;
    border-radius: 7px;
    padding: 3px;
}

.view-switcher button {
    border: 0;
    border-radius: 5px;
    padding: 8px 14px;
}

.view-switcher button.active {
    background: var(--paper);
    box-shadow: 0 1px 3px rgba(32, 48, 47, .12);
    font-weight: 700;
}

.quick-add {
    gap: 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 9px;
    margin-bottom: 14px;
}

.quick-add input,
.quick-add select,
.quick-add button {
    min-height: 42px;
    border: 1px solid var(--line);
    background: white;
    border-radius: 5px;
}

.type-input {
    flex: 1;
    min-width: 180px;
    padding: 0 12px;
}

.type-select,
.date-input {
    padding: 0 10px;
}

.add-button {
    border: 0 !important;
    background: var(--teal) !important;
    color: white;
    padding: 0 22px;
    font-weight: 700;
}

.add-button:disabled {
    opacity: .48;
}

.calendar-error {
    color: #a73527;
    background: #fff0ed;
    border: 1px solid #f3c6bf;
    padding: 10px;
    margin-bottom: 12px;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(85px, 1fr));
    background: var(--line);
    border: 1px solid var(--line);
    gap: 1px;
}

.weekday {
    background: #edf2f1;
    text-align: center;
    padding: 9px 4px;
    font-size: 12px;
    color: var(--muted);
}

.month-day {
    min-height: 112px;
    border: 0;
    background: var(--paper);
    text-align: right;
    padding: 8px;
    overflow: hidden;
}

.month-day.outside {
    color: #adb8b6;
    background: #f8fafa;
}

.month-day.selected {
    box-shadow: inset 0 0 0 2px var(--teal);
}

.month-day > span {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

.month-day small,
.agenda-item {
    display: block;
    border-right: 3px solid var(--teal);
}

.month-day small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #eaf5f3;
    padding: 3px 5px;
    margin: 3px 0;
}

.month-day small.reminder,
.agenda-item.reminder { border-right-color: var(--coral); }
.month-day small.note,
.agenda-item.note { border-right-color: var(--gold); }

.agenda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.agenda-day {
    min-width: 0;
    background: var(--paper);
    border: 1px solid var(--line);
}

.agenda-date {
    width: 100%;
    min-height: 68px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #fbfcfc;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.agenda-date.selected {
    color: var(--teal);
}

.agenda-date strong {
    font-size: 28px;
}

.agenda-date span,
.agenda-item span {
    color: var(--muted);
    font-size: 12px;
}

.agenda-items {
    padding: 8px;
}

.agenda-item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    background: #edf5f3;
    margin-bottom: 6px;
    padding: 9px;
}

.agenda-item strong,
.agenda-item span {
    display: block;
}

.completed {
    text-decoration: line-through;
    color: var(--muted);
}

.complete-button,
.delete-button,
.empty-day {
    border: 0;
    background: transparent;
}

.complete-button {
    width: 24px;
    height: 24px;
    border: 1px solid #9fb0ad;
    border-radius: 50%;
    padding: 0;
}

.delete-button {
    color: #9eaaa8;
    font-size: 20px;
}

.empty-day {
    width: 100%;
    min-height: 68px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .calendar-toolbar {
        grid-template-columns: 1fr auto;
    }

    .view-switcher {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .view-switcher button {
        flex: 1;
    }

    .quick-add {
        flex-wrap: wrap;
    }

    .type-input {
        flex-basis: 100%;
    }

    .month-grid {
        grid-template-columns: repeat(7, minmax(42px, 1fr));
    }

    .month-day {
        min-height: 82px;
        padding: 5px;
    }
}

@media (max-width: 600px) {
    .calendar-page {
        margin: -1.1rem -1rem;
        padding: 16px 10px;
    }

    .calendar-toolbar {
        grid-template-columns: 1fr;
    }

    .calendar-actions {
        justify-self: start;
    }

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

    .type-input,
    .add-button {
        grid-column: 1 / -1;
    }

    .month-day small {
        height: 6px;
        color: transparent;
        font-size: 0;
        padding: 0;
    }

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

/* Premium workspace styling */
html, body {
    background: #f3f5f3;
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
}

button,
input,
select {
    font-family: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(25, 126, 111, .18);
    outline-offset: 2px;
}

.calendar-page {
    min-height: calc(100vh - 72px);
    max-width: 1640px;
    margin: 0 auto;
    padding: 32px 38px 44px;
    background:
        radial-gradient(circle at 92% 8%, rgba(239, 189, 84, .13), transparent 270px),
        #f3f5f3;
}

.calendar-toolbar {
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.eyebrow {
    color: #167969;
    font-size: 12px;
    letter-spacing: 0;
}

.calendar-toolbar h1 {
    color: #1d302d;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
}

.calendar-actions {
    direction: ltr;
    height: 42px;
    overflow: hidden;
    border: 1px solid #dce4e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(35, 62, 57, .055);
}

.icon-button,
.today-button {
    height: 40px;
    min-width: 42px;
    color: #53645f;
    padding: 0 12px;
}

.icon-button:hover,
.today-button:hover { background: #f1f5f4; color: #0d705f; }
.today-button { direction: rtl; border-inline: 1px solid #e5ebe9; }

.view-switcher {
    direction: ltr;
    height: 42px;
    padding: 4px;
    border: 1px solid #dde5e2;
    border-radius: 8px;
    background: #e9eeec;
}

.view-switcher button {
    min-height: 32px;
    min-width: 74px;
    border: 0;
    border-radius: 6px;
    color: #687873;
    font-size: 13px;
}

.view-switcher button.active {
    background: #fff;
    color: #1a654c;
    box-shadow: 0 2px 8px rgba(31, 53, 49, .12);
}

.quick-add {
    gap: 10px;
    min-height: 68px;
    padding: 10px;
    margin-bottom: 18px;
    border: 1px solid #dbe4e1;
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 32px rgba(35, 62, 57, .055);
}

.quick-add input,
.quick-add select {
    height: 46px;
    border: 1px solid #e1e7e5;
    border-radius: 7px;
    background: #fafbfa;
    color: #263936;
}

.quick-add input:focus,
.quick-add select:focus {
    border-color: #86afa7;
    background: #fff;
}

.type-input { font-weight: 600; }
.type-select { min-width: 112px; }
.date-input { direction: ltr; }

.add-button {
    height: 46px;
    min-width: 112px;
    border-radius: 7px !important;
    background: #167969 !important;
    box-shadow: 0 7px 16px rgba(22,121,105,.18);
}
.add-button:hover:not(:disabled) { background: #106657 !important; }
.add-button:disabled { box-shadow: none; }

.month-grid {
    overflow: hidden;
    border: 1px solid #dae3e0;
    border-radius: 10px;
    background: #dae3e0;
    gap: 1px;
    box-shadow: 0 14px 38px rgba(35,62,57,.06);
}

.weekday {
    background: #f7f9f8;
    color: #7a8985;
    font-size: 12px;
    font-weight: 700;
    padding: 13px 4px;
}

.month-day {
    min-height: 132px;
    background: #fff;
    padding: 9px;
    transition: background .16s ease, box-shadow .16s ease;
}
.month-day:hover { background: #f8fbfa; }
.month-day.outside { background: #f7f9f8; color: #adb8b5; }
.month-day.selected { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px #168276; }
.month-day > span { font-size: 15px; }

.month-day small {
    border-right: 0;
    border-radius: 4px;
    background: #e5f3f0;
    color: #24685f;
    font-size: 11px;
    padding: 5px 6px;
}
.month-day small.reminder { background: #fff0ed; color: #9a513f; }
.month-day small.note { background: #fff5db; color: #805e1e; }

.agenda {
    display: grid;
    grid-template-columns: repeat(7, minmax(158px, 1fr));
    gap: 8px;
}
.agenda-day {
    min-height: 310px;
    overflow: hidden;
    border: 1px solid #dce4e1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(35,62,57,.045);
}

.agenda-date {
    min-height: 84px;
    align-items: center;
    border-bottom: 1px solid #e7ecea;
    background: #fff;
    padding: 12px 13px;
}
.agenda-date:hover { background: #f8fbfa; }
.agenda-date.selected { background: #f0f7f5; }
.agenda-date strong { color: #273936; font-size: 31px; }
.agenda-date.selected strong { color: #147769; }
.agenda-date span { line-height: 1.7; }

.agenda-items { padding: 9px; }
.agenda-item {
    grid-template-columns: 25px minmax(0, 1fr) 24px;
    gap: 7px;
    min-height: 66px;
    border-right: 3px solid #4a9e92;
    border-radius: 7px;
    background: #edf5f3;
    margin-bottom: 7px;
    padding: 9px 8px;
    box-shadow: 0 3px 8px rgba(35,62,57,.045);
}
.agenda-item.reminder { border-right-color: #d56c54; background: #fff3ef; }
.agenda-item.note { border-right-color: #c99b3f; background: #fff8e5; }
.agenda-item strong { color: #263936; font-size: 13px; }
.complete-button { width: 22px; height: 22px; }
.complete-button:hover { border-color: #168276; }
.delete-button { opacity: .45; }
.delete-button:hover { opacity: 1; color: #bd4a3b; }
.empty-day { min-height: 90px; color: #99a5a2; font-size: 12px; }

@media (max-width: 1200px) {
    .calendar-page { padding-inline: 24px; }
    .agenda { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
}

@media (max-width: 900px) {
    .calendar-page { padding: 24px 18px 36px; }
    .calendar-toolbar { grid-template-columns: 1fr auto; }
    .view-switcher { grid-column: 1 / -1; }
    .quick-add { align-items: stretch; }
    .agenda { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 640px) {
    .calendar-page {
        min-height: calc(100vh - 60px);
        margin: 0;
        padding: 20px 12px 96px;
    }

    .calendar-toolbar h1 { font-size: 24px; }
    .calendar-actions { justify-self: start; }
    .view-switcher { width: 100%; }
    .view-switcher button { min-width: 0; flex: 1; }

    .quick-add {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .type-input,
    .add-button { grid-column: 1 / -1; }
    .date-input { min-width: 0; }

    .month-grid { grid-template-columns: repeat(7, minmax(44px, 1fr)); }
    .weekday { font-size: 10px; }
    .month-day { min-height: 76px; padding: 5px; }
    .month-day small { height: 5px; font-size: 0; padding: 0; }

    .agenda { grid-template-columns: 1fr; }
    .agenda-day { min-height: auto; }
    .empty-day { min-height: 64px; }
}

#blazor-error-ui { display: none !important; }

@media (max-width: 640.98px) {
    .page { display: block !important; padding-bottom: 72px; }
    .sidebar {
        position: fixed !important;
        inset: auto 0 0 !important;
        width: 100% !important;
        height: 72px !important;
        z-index: 40 !important;
        overflow: hidden;
    }
    .sidebar .top-row { display: none !important; }
    .sidebar .nav-scrollable {
        height: 72px !important;
        display: flex !important;
        align-items: center;
    }
    .sidebar nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .sidebar .nav-item { margin: 0 4px; }
    .sidebar .nav-link {
        min-height: 58px;
        justify-content: center;
        flex-direction: column;
        gap: 3px;
        padding: 4px;
    }
    .sidebar .nav-link span:not(.nav-icon) { display: block; }
}

/* Unified task workspace shell - exact same layout as dashboard */
@media (min-width: 641px) {
    body:has(.todo-shell) .page > main > .top-row {
        display: flex !important;
    }
}

@media (max-width: 640.98px) {
    body:has(.todo-shell) .page > main > .top-row {
        display: flex !important;
    }
}

.todo-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 0 36px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    direction: rtl;
    background: transparent !important;
}

.todo-sidebar {
    position: sticky;
    top: 88px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.todo-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 12px;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 10px;
}

.todo-sidebar-title-icon {
    font-size: 18px;
}

.todo-sidebar-title h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
}

.todo-main {
    min-width: 0;
    min-height: auto;
    padding: 0 !important;
}

.todo-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    margin: 0 6px 18px;
}
.todo-profile div:last-child { min-width: 0; }
.todo-profile strong,
.todo-profile span { display: block; }
.todo-profile strong { color: #292c33; font-size: 14px; }
.todo-profile span { color: #777d86; font-size: 11px; margin-top: 3px; }
.todo-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #e7eefb;
    color: #285eaa;
    font-weight: 800;
}

.todo-nav { padding-bottom: 10px; }
.todo-nav-item {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #565b62;
    text-align: right;
    padding: 5px 9px;
    margin: 1px 0;
    transition: background .14s ease, color .14s ease;
}
.todo-nav-item:hover { background: #f0f2f5; }
.todo-nav-item.active {
    background: #eaf1fb;
    color: #2d67b1;
    font-weight: 700;
}
.todo-nav-item b {
    min-width: 22px;
    color: #8a9098;
    font-size: 11px;
    font-weight: 500;
    text-align: left;
}
.todo-nav-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 5px;
    font-size: 12px;
}
.todo-nav-icon.blue { color: #316fc1; }
.todo-nav-icon.red { color: #cf5f66; }
.todo-nav-icon.teal { color: #2f8b78; }
.todo-nav-icon.slate { color: #737985; }
.todo-nav-icon.gold { color: #bd862a; }
.todo-nav-icon.violet { color: #7358b5; }

.todo-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7d828a;
    font-size: 11px;
    font-weight: 700;
    margin: 16px 9px 7px;
}
.todo-list-heading button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #6f747d;
    font-size: 20px;
}
.todo-list-heading button:hover { background: #eceef1; }
.category-dot {
    width: 9px;
    height: 9px;
    margin-inline: 9px;
    border-radius: 3px;
}

.todo-main {
    min-width: 0;
    min-height: 100vh;
    padding: 32px clamp(28px, 5vw, 74px) 52px;
}
.todo-heading {
    min-height: 74px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}
.todo-heading p {
    color: #858992;
    font-size: 12px;
    margin: 0 0 5px;
}
.todo-heading h1 {
    color: #2b2e34;
    font-size: clamp(25px, 3vw, 33px);
    line-height: 1.2;
    margin: 0;
}
.todo-heading-actions { display: flex; align-items: center; gap: 8px; }
.icon-action {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e4e8;
    border-radius: 6px;
    background: #fff;
    color: #6d727b;
}
.selected-category {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e2e4e8;
    border-radius: 999px;
    background: #fff;
    color: #62666e;
    font-size: 12px;
    padding: 7px 10px;
}
.selected-category i,
.task-meta i { width: 7px; height: 7px; display: inline-block; border-radius: 2px; }

.quick-task {
    min-height: 52px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e5e9;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(48, 56, 71, .055);
    padding: 5px 8px 5px 6px;
    margin-bottom: 18px;
}
.quick-task:focus-within {
    border-color: #9ab4d7;
    box-shadow: 0 0 0 3px rgba(66, 119, 188, .09), 0 6px 20px rgba(48,56,71,.06);
}
.quick-task input {
    width: 100%;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #30333a;
}
.quick-task input::placeholder { color: #9a9ea6; }
.quick-check {
    width: 24px;
    height: 24px;
    border: 1.5px solid #9da2aa;
    border-radius: 50%;
    background: transparent;
    color: #8d929a;
    line-height: 1;
}
.quick-options { display: flex; align-items: center; gap: 4px; direction: ltr; }
.quick-options input {
    width: 150px;
    direction: ltr;
    color: #777c85;
    font-size: 12px;
}
.quick-options button,
.task-important,
.task-delete {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #a0a4aa;
}
.quick-options button:hover,
.task-important:hover,
.task-delete:hover { background: #f1f2f4; }
.quick-options button.selected,
.task-important.selected { color: #d39b35; }

.category-editor {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 44px auto auto;
    gap: 8px;
    border: 1px dashed #cbd7e6;
    border-radius: 8px;
    background: #fafdff;
    padding: 12px;
    margin: -8px 0 18px;
}
.category-editor input[type="text"] { border: 1px solid #dee2e7; border-radius: 6px; padding: 8px 10px; }
.category-editor input[type="color"] { width: 44px; height: 36px; border: 0; background: transparent; }
.primary-action,
.ghost-action { min-height: 36px; border: 0; border-radius: 6px; padding: 0 14px; }
.primary-action { background: #356aa9; color: #fff; }
.ghost-action { background: #eef0f3; color: #62666e; }

.task-groups { max-width: 980px; }
.task-group { margin-top: 12px; }
.task-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #60646c;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 2px 7px;
}
.task-group-title small { color: #9a9da3; font-weight: 400; }
.task-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 32px 32px;
    align-items: center;
    gap: 8px;
    border: 1px solid #e6e7ea;
    border-bottom: 0;
    background: #fff;
    padding: 8px 8px 8px 5px;
    transition: background .12s ease, box-shadow .12s ease;
}
.task-row:first-child { border-radius: 8px 8px 0 0; }
.task-row:last-child { border-bottom: 1px solid #e6e7ea; border-radius: 0 0 8px 8px; }
.task-row:only-of-type { border-bottom: 1px solid #e6e7ea; border-radius: 8px; }
.task-row:hover { position: relative; z-index: 1; background: #fafbfc; box-shadow: 0 5px 16px rgba(48,56,71,.07); }
.task-check {
    width: 22px;
    height: 22px;
    border: 1.5px solid #9ea3ab;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    padding: 0;
}
.task-row.done .task-check { border-color: #5f79b5; background: #5f79b5; }
.task-copy { min-width: 0; }
.task-copy strong {
    display: block;
    color: #35383f;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-row.done .task-copy strong { color: #92959b; text-decoration: line-through; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #9a9da4; font-size: 11px; margin-top: 5px; }
.task-meta span { display: flex; align-items: center; gap: 5px; }
.task-delete { opacity: 0; }
.task-row:hover .task-delete { opacity: 1; }
.task-row.done { background: #f9f9fa; }

.todo-empty {
    min-height: 410px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #90949b;
    text-align: center;
}
.empty-symbol {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 1px solid #e1e3e7;
    border-radius: 50%;
    background: #fff;
    color: #90add2;
    font-size: 30px;
    box-shadow: 0 12px 30px rgba(48,56,71,.06);
}
.todo-empty h2 { color: #555960; font-size: 18px; margin: 18px 0 7px; }
.todo-empty p { font-size: 13px; margin: 0; }

.calendar-board {
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.calendar-board-header {
    min-height: 74px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.calendar-board-header p { color: #858992; font-size: 12px; margin: 0 0 5px; }
.calendar-board-header h1 { color: #2b2e34; font-size: 28px; margin: 0; }
.calendar-board-actions,
.calendar-board-view { direction: ltr; display: flex; gap: 4px; }
.calendar-board-actions button,
.calendar-board-view button {
    min-height: 34px;
    border: 1px solid #e1e3e7;
    background: #fff;
    color: #686c74;
    padding: 0 12px;
}
.calendar-board-actions button:first-child { border-radius: 6px 0 0 6px; }
.calendar-board-actions button:last-child { border-radius: 0 6px 6px 0; }
.calendar-board-view { direction: rtl; background: #eceef1; border-radius: 6px; padding: 3px; }
.calendar-board-view button { border: 0; border-radius: 5px; font-size: 12px; }
.calendar-board-view button.active { background: #fff; color: #2d67b1; box-shadow: 0 2px 7px rgba(48,56,71,.1); }
.calendar-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(86px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid #e2e4e8;
    border-radius: 8px;
    background: #e2e4e8;
}
.calendar-month > b { background: #f6f7f8; color: #898e95; text-align: center; padding: 10px 4px; }
.calendar-day {
    min-height: 112px;
    border: 0;
    background: #fff;
    text-align: right;
    padding: 8px;
}
.calendar-day.outside { background: #f7f7f8; color: #afb2b7; }
.calendar-day.selected { box-shadow: inset 0 0 0 2px #4d7fc2; }
.calendar-day > span { display: block; font-weight: 700; }
.calendar-day small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; padding: 4px 5px; margin-top: 4px; }
.calendar-day small.teal { background: #edf6f3; color: #27715f; }
.calendar-day small.coral { background: #fff0ee; color: #9d4f45; }
.calendar-day small.violet { background: #f1edfa; color: #67509a; }
.calendar-day small.gold { background: #fff6de; color: #89691f; }
.calendar-list { display: grid; grid-template-columns: repeat(7, minmax(136px, 1fr)); gap: 7px; }
.calendar-list article { min-height: 280px; border: 1px solid #e2e4e8; border-radius: 8px; background: #fff; }
.calendar-date { width: 100%; min-height: 70px; display: flex; align-items: center; gap: 7px; border: 0; border-bottom: 1px solid #eceef1; background: #fff; padding: 10px 12px; }
.calendar-date strong { color: #34373d; font-size: 25px; }
.calendar-date span { color: #8c9096; font-size: 11px; }
.calendar-events { padding: 7px; }
.calendar-event { width: 100%; display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 7px; border: 0; border-radius: 5px; background: #f3f6fa; text-align: right; padding: 8px 6px; margin-bottom: 5px; }
.calendar-event i { background: #4f73c8; }
.calendar-event.coral i { background: #d7695e; }
.calendar-event.violet i { background: #7d57c2; }
.calendar-event.gold i { background: #d49a35; }
.calendar-event strong,
.calendar-event small { display: block; }
.calendar-event strong { font-size: 12px; }
.calendar-event small { color: #92969d; font-size: 10px; margin-top: 3px; }
.calendar-empty { width: 100%; min-height: 90px; border: 0; background: transparent; color: #adafb4; font-size: 11px; }

@media (max-width: 1100px) {
    .todo-shell { grid-template-columns: 238px minmax(0, 1fr); }
    .todo-main { padding-inline: 28px; }
    .calendar-list { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
}

@media (max-width: 800px) {
    .todo-shell { grid-template-columns: 78px minmax(0, 1fr); }
    .todo-sidebar { padding-inline: 8px; }
    .todo-profile { justify-content: center; margin-inline: 0; }
    .todo-profile div:last-child,
    .todo-nav-item > span:not(.todo-nav-icon):not(.category-dot),
    .todo-nav-item b,
    .todo-list-heading span,
    .todo-custom-lists .todo-nav-item span:not(.category-dot) { display: none; }
    .todo-nav-item { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
    .todo-nav-icon { margin: auto; }
    .todo-list-heading { justify-content: center; }
    .todo-main { padding-inline: 18px; }
    .calendar-list { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 640px) {
    .todo-shell { display: block; min-height: 100vh; }
    .todo-sidebar {
        height: auto;
        position: static;
        z-index: 10;
        border: none;
        padding: 8px 12px 4px;
        background: transparent;
        box-shadow: none;
    }
    .todo-list-heading,
    .todo-custom-lists { display: none; }
    .todo-main { padding: 4px 12px 84px; }
    .todo-heading { min-height: 62px; }
    .todo-heading h1 { font-size: 24px; }
    .todo-heading-actions { align-self: flex-start; }
    .selected-category { display: none; }
    .quick-task { grid-template-columns: 24px minmax(0, 1fr) 32px; }
    .quick-options.birthday-options {
        grid-column: 2;
    }

    .quick-task {
        grid-template-columns: 24px minmax(0, 1fr) auto;
    }

    .quick-options {
        max-width: 165px;
    }

    .quick-options input[type="date"],
    .quick-options input[type="time"] {
        width: 108px;
        max-width: 108px;
        height: 36px;
        border: 1px solid #e2e5e9;
        border-radius: 5px;
        padding: 0 5px;
        direction: ltr;
    }

    .quick-options input[type="time"] {
        width: 78px;
        max-width: 78px;
    }

    .quick-options .recurrence-note {
        display: none;
    }
    .category-editor { grid-template-columns: 1fr 44px; }
    .category-editor .primary-action,
    .category-editor .ghost-action { grid-column: auto; }
    .task-row { grid-template-columns: 28px minmax(0, 1fr) 32px; }
    .task-delete { display: none; }
    .todo-empty { min-height: 340px; }
    .calendar-board-header { grid-template-columns: 1fr auto; }
    .calendar-board-header p { margin-bottom: 2px; }
    .calendar-board-header h1 { font-size: 23px; }
    .calendar-board-actions { gap: 2px; }
    .calendar-board-actions button { min-height: 32px; padding-inline: 9px; }
    .calendar-board-view { grid-column: 1 / -1; }
    .calendar-board-view button { flex: 1; }
    .calendar-month { grid-template-columns: repeat(7, minmax(42px, 1fr)); }
    .calendar-day { min-height: 72px; padding: 4px; }
    .calendar-day small { height: 5px; font-size: 0; padding: 0; }
    .calendar-list { grid-template-columns: 1fr; gap: 6px; }
    .calendar-list article { min-height: 106px; }
    .calendar-date { min-height: 58px; padding: 8px 10px; }
    .calendar-date strong { font-size: 22px; }
    .calendar-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .calendar-event { min-width: 0; margin: 0; }
    .calendar-empty { min-height: 54px; grid-column: 1 / -1; }
}

/* Persian task dates and holiday emphasis */
.quick-options input[type="text"] {
    direction: rtl;
    text-align: center;
    letter-spacing: 0;
}

.quick-options input[title*="شمسی"] {
    width: 118px;
    max-width: 118px;
    height: 36px;
    border: 1px solid #e2e5e9;
    border-radius: 5px;
    padding: 0 7px;
    background: #fff;
}

.calendar-day.is-holiday,
.calendar-date.is-holiday {
    background: #fff3f2;
}

.calendar-day.is-holiday > span,
.calendar-date.is-holiday strong {
    color: #c64d43;
}

.calendar-day.is-holiday {
    box-shadow: inset 0 -3px 0 #df6b62;
}

.calendar-date.is-holiday {
    border-bottom-color: #efc4c1;
}

.holiday-label {
    display: inline-flex;
    max-width: 100%;
    color: #bb4a42;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-day .holiday-label {
    margin-top: 3px;
}

@media (max-width: 640px) {
    .quick-options input[title*="شمسی"] {
        width: 112px;
        max-width: 112px;
    }

    .calendar-day.is-holiday {
        box-shadow: inset 0 -2px 0 #df6b62;
    }

    .calendar-day .holiday-label {
        max-width: 38px;
        font-size: 7px;
    }

    .calendar-date .holiday-label {
        margin-inline-start: auto;
    }
}

/* Modern workspace theme */
.todo-shell,
.todo-shell * {
    box-sizing: border-box;
}

.todo-shell {
    --theme-primary: #5865f2;
    --theme-primary-soft: #eef0ff;
    --theme-cyan: #27a9a1;
    --theme-ink: #202430;
    --theme-muted: #7d8291;
    --theme-line: #e8eaf0;
    --theme-surface: #f6f7fb;
    direction: rtl;
    background:
        radial-gradient(circle at 94% 0%, rgba(88, 101, 242, .055), transparent 32%),
        var(--theme-surface);
    font-family: "Vazirmatn", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.todo-shell button,
.todo-shell input {
    font-family: inherit;
}

.todo-sidebar {
    border-left: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 8px 0 34px rgba(42, 49, 76, .045);
    backdrop-filter: blur(18px);
}

.todo-profile {
    min-height: 62px;
    margin: 0 4px 20px;
    padding: 8px;
}

.todo-profile strong { color: var(--theme-ink); font-size: 14px; font-weight: 700; }
.todo-profile span { color: #9296a3; font-size: 11px; }

.todo-avatar {
    background: linear-gradient(145deg, #6875f8, #9c74df);
    color: #fff;
    box-shadow: 0 8px 18px rgba(88, 101, 242, .24);
}

.todo-nav-item {
    min-height: 44px;
    border-radius: 9px;
    color: #676d7d;
    font-size: 13px;
    padding-inline: 10px 8px;
}

.todo-nav-item:hover {
    background: #f4f5fa;
    color: #353a49;
}

.todo-nav-item.active {
    background: var(--theme-primary-soft);
    color: #4d55b9;
    box-shadow: inset 3px 0 0 var(--theme-primary);
}

.todo-nav-item b { color: #a1a5b2; }
.todo-nav-icon { border-radius: 7px; background: #f5f6fa; }
.todo-nav-item.active .todo-nav-icon { background: #fff; }

.todo-list-heading {
    color: #9a9dac;
    font-size: 11px;
    letter-spacing: 0;
}

.todo-main {
    background:
        linear-gradient(180deg, rgba(255,255,255,.5), transparent 240px);
}

.todo-heading {
    align-items: end;
    min-height: 86px;
    margin-bottom: 20px;
}

.todo-heading p {
    color: #9296a5;
    font-size: 12px;
}

.todo-heading h1 {
    color: var(--theme-ink);
    font-size: 30px;
    font-weight: 800;
}

.icon-action,
.selected-category {
    border: 1px solid #e3e5ec;
    background: rgba(255,255,255,.86);
    box-shadow: 0 5px 16px rgba(48, 53, 75, .045);
}

.quick-task {
    min-height: 58px;
    border: 1px solid #e3e5ec;
    border-color: rgba(216, 219, 228, .9);
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 30px rgba(48,53,75,.055);
    backdrop-filter: blur(10px);
}

.quick-task:focus-within {
    border-color: rgba(88, 101, 242, .42);
    box-shadow: 0 0 0 4px rgba(88,101,242,.075), 0 12px 32px rgba(48,53,75,.06);
}

.quick-task input { color: #343847; }
.quick-task input::placeholder { color: #adafba; }
.quick-check {
    border-color: #aeb2bf;
    color: #999daa;
}

.quick-options input {
    border: 1px solid #e5e7ed;
    border-radius: 8px;
    background: #fafafe;
}

.quick-options input:focus {
    border-color: #8d96f5;
}

.primary-action,
.add-button,
.quick-task + .task-group .primary-action {
    background: var(--theme-primary) !important;
    box-shadow: 0 7px 18px rgba(88,101,242,.22);
}

.todo-toast {
    position: fixed;
    inset: auto 28px 26px;
    z-index: 80;
    max-width: 340px;
    width: fit-content;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 10px;
    background: rgba(38, 42, 54, .94);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 18px 45px rgba(28,31,43,.22);
    backdrop-filter: blur(12px);
    padding: 12px 16px;
}

.task-row {
    min-height: 66px;
    border: 1px solid #edf0f4;
    border-bottom: 0;
    background: rgba(255,255,255,.92);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.task-row:last-child { border-bottom: 1px solid #edf0f4; }
.task-row:hover {
    background: #fff;
    box-shadow: 0 12px 30px rgba(48,53,75,.07);
    transform: translateY(-1px);
}

.task-row.done { background: #f8f9fb; }
.task-copy strong { color: #303440; font-size: 14px; font-weight: 600; }
.task-meta { color: #9a9dab; }
.task-check { border-color: #bdc1cc; }
.task-row.done .task-check { border-color: #626fe8; background: #626fe8; }
.task-important.selected { color: #f0ad35; }

.task-group-title {
    color: #7f8492;
    font-size: 12px;
}

.empty-symbol {
    border: 0;
    background: linear-gradient(145deg, #fff, #f0f2fa);
    color: #818bf0;
    box-shadow: 0 18px 45px rgba(48,53,75,.09);
}

.todo-empty h2 { color: #3a3d49; }
.todo-empty p { color: #9295a1; }

.category-editor {
    border: 1px solid #e2e5ef;
    border-radius: 12px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 28px rgba(48,53,75,.05);
}

.calendar-board {
    animation: none !important;
    transform: none !important;
}

.calendar-board-header h1,
.calendar-board-header p {
    color: var(--theme-ink);
}

.calendar-board-actions button,
.calendar-board-view button {
    border-color: #e2e4eb;
    background: rgba(255,255,255,.92);
    color: #737789;
}

.calendar-board-view button.active {
    color: #4d55b9;
}

.calendar-list article,
.calendar-month {
    border-color: #e4e6ed;
    box-shadow: 0 12px 32px rgba(48,53,75,.045);
}

.calendar-date,
.calendar-day {
    background: rgba(255,255,255,.95);
}

.calendar-day.selected {
    box-shadow: inset 0 0 0 2px var(--theme-primary);
}

.calendar-event {
    border-radius: 8px;
    background: #f4f5fb;
}

.calendar-event i { border-radius: 99px; }

@keyframes theme-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .todo-shell {
        background: #f7f8fb;
    }

    .todo-sidebar {
        height: auto;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .todo-nav-item {
        min-height: 54px;
        border-radius: 8px;
        box-shadow: none;
    }

    .todo-nav-item.active {
        box-shadow: none;
        background: var(--theme-primary-soft);
    }

    .todo-heading h1 { font-size: 26px; }
    .quick-task { border-radius: 10px; }
    .todo-toast { inset: auto 12px 82px; max-width: none; }
}


/* ============================================================
   GOOGLE CALENDAR STYLE FILTERS BAR
   ============================================================ */
.calendar-filters-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e5e8ed;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.calendar-filters-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
}

.filters-heading-icon {
    font-size: 16px;
}

.calendar-filters-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.calendar-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    transition: all 0.18s ease;
}

.calendar-filter-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.calendar-filter-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.custom-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #94a3b8;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.checkbox-check {
    display: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

/* Tasks Pill Active */
.filter-pill-tasks.is-active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
}

.filter-pill-tasks.is-active .custom-checkbox {
    background: #3b82f6;
    border-color: #3b82f6;
}

.filter-pill-tasks.is-active .checkbox-check {
    display: block;
}

/* Birthdays Pill Active */
.filter-pill-birthdays.is-active {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #b45309;
}

.filter-pill-birthdays.is-active .custom-checkbox {
    background: #f59e0b;
    border-color: #f59e0b;
}

.filter-pill-birthdays.is-active .checkbox-check {
    display: block;
}

.filter-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-tasks {
    background: #3b82f6;
}

.dot-birthdays {
    background: #f59e0b;
}

.filter-text {
    font-size: 13px;
}

.filter-badge {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}

.calendar-filters-actions {
    margin-right: auto;
}

.filter-quick-btn {
    border: none;
    background: #e0e7ff;
    color: #4338ca;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-quick-btn:hover {
    background: #c7d2fe;
}

/* ============================================================
   CALENDAR ITEMS & CARDS (GOOGLE CALENDAR STYLE)
   ============================================================ */
.calendar-day small {
    display: flex !important;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
    font-weight: 500;
    margin-top: 3px !important;
    transition: transform 0.1s ease, filter 0.1s ease;
}

.calendar-day small:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
}

.item-icon {
    font-size: 10px;
    flex-shrink: 0;
}

.item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Birthday item in month view */
.calendar-day small.item-birthday {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a;
    font-weight: 600;
}

/* Task item in month view */
.calendar-day small.item-task {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd;
}

.calendar-more-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    margin-top: 3px;
    padding: 1px 4px;
}

/* Events in list / day / week view */
.calendar-event {
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease !important;
}

.calendar-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.calendar-event.is-birthday-event {
    background: #fffbeb !important;
    border: 1px solid #fef3c7;
}

.calendar-event.is-birthday-event strong {
    color: #92400e;
}

.birthday-strip {
    background: #f59e0b !important;
    border-radius: 99px;
}

.task-strip {
    background: #3b82f6 !important;
    border-radius: 99px;
}

/* ============================================================
   CALENDAR EVENT DETAIL MODAL (GOOGLE CALENDAR POPOVER)
   ============================================================ */
.calendar-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: modal-fade-in 0.2s ease-out;
}

.calendar-modal-card {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 580px;
    max-height: min(90vh, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    position: relative;
    z-index: 200002;
    animation: modal-scale-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-scale-in {
    from { transform: scale(0.92) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.calendar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.calendar-modal-header.header-birthday {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-bottom-color: #fde68a;
}

.calendar-modal-header.header-task {
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border-bottom-color: #dbeafe;
}

.modal-type-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.header-birthday .modal-type-chip {
    color: #b45309;
}

.header-task .modal-type-chip {
    color: #1d4ed8;
}

.modal-close-btn {
    border: none;
    background: rgba(255, 255, 255, 0.8);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    display: grid;
    place-items: center;
    color: #64748b;
    transition: all 0.15s ease;
}

.modal-close-btn:hover {
    background: #ffffff;
    color: #0f172a;
    transform: scale(1.08);
}

.calendar-modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.modal-event-title {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 8px;
    line-height: 1.35;
}

.modal-event-desc {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.modal-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #f1f5f9;
}

.modal-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.info-label {
    color: #64748b;
    font-weight: 500;
}

.info-value {
    color: #1e293b;
    font-weight: 700;
}

.calendar-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 14px 24px 20px;
}

.modal-btn-confirm {
    background: #5865f2;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 9px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.modal-btn-confirm:hover {
    background: #4752c4;
    transform: translateY(-1px);
}

/* ============================================================
   GLOBAL DARK MODE STYLES ([data-theme="dark"])
   ============================================================ */
[data-theme="dark"] {
    --ink: #e6edf3;
    --muted: #8b949e;
    --line: #21262d;
    --paper: #161b22;
    --canvas: #0d1117;
    --teal: #2dd4bf;
    --teal-dark: #14b8a6;
    --coral: #f87171;
    --gold: #fbbf24;
    --theme-primary: #707bfb;
    --theme-primary-soft: rgba(112, 123, 251, 0.18);
    --theme-cyan: #38bdf8;
    --theme-ink: #f0f6fc;
    --theme-muted: #8b949e;
    --theme-line: #30363d;
    --theme-surface: #0d1117;
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: #0d1117;
    color: #e6edf3;
}

/* Global inputs in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #161b22;
    color: #e6edf3;
    border-color: #30363d;
}

[data-theme="dark"] input::placeholder {
    color: #6e7681;
}

/* Todo shell in dark mode */
[data-theme="dark"] .todo-shell {
    background: radial-gradient(circle at 94% 0%, rgba(112, 123, 251, 0.08), transparent 35%), #0d1117;
    color: #e6edf3;
}

[data-theme="dark"] .todo-sidebar {
    background: rgba(17, 22, 31, 0.95);
    border-left: 1px solid #21262d;
    box-shadow: -8px 0 34px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .todo-profile strong {
    color: #f0f6fc;
}

[data-theme="dark"] .todo-profile span {
    color: #8b949e;
}

[data-theme="dark"] .todo-nav-item {
    color: #8b949e;
}

[data-theme="dark"] .todo-nav-item:hover {
    background: #1c222e;
    color: #f0f6fc;
}

[data-theme="dark"] .todo-nav-item.active {
    background: rgba(112, 123, 251, 0.2);
    color: #c7d2fe;
    box-shadow: inset 3px 0 0 #707bfb;
}

[data-theme="dark"] .todo-nav-item b {
    color: #6e7681;
}

[data-theme="dark"] .todo-nav-icon {
    background: #1c222e;
}

[data-theme="dark"] .todo-nav-item.active .todo-nav-icon {
    background: #2a3346;
}

[data-theme="dark"] .todo-list-heading {
    color: #8b949e;
}

[data-theme="dark"] .todo-list-heading button {
    background: #1c222e;
    color: #e6edf3;
}

[data-theme="dark"] .todo-heading h1 {
    color: #f0f6fc;
}

[data-theme="dark"] .todo-heading p {
    color: #8b949e;
}

[data-theme="dark"] .quick-task {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .quick-task input {
    color: #f0f6fc;
}

[data-theme="dark"] .quick-options input[type="text"],
[data-theme="dark"] .quick-options input[type="time"] {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
}

[data-theme="dark"] .quick-options button {
    background: #1c222e;
    border-color: #30363d;
    color: #8b949e;
}

[data-theme="dark"] .quick-options button.selected {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

[data-theme="dark"] .task-row {
    background: #161b22;
    border-color: #262c36;
}

[data-theme="dark"] .task-row:hover {
    background: #1c222e;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .task-row.done {
    background: #0f141c;
    opacity: 0.72;
}

[data-theme="dark"] .task-copy strong {
    color: #f0f6fc;
}

[data-theme="dark"] .task-meta {
    color: #8b949e;
}

[data-theme="dark"] .task-check {
    border-color: #484f58;
    background: #0d1117;
    color: #f0f6fc;
}

[data-theme="dark"] .task-row.done .task-check {
    border-color: #707bfb;
    background: #707bfb;
}

[data-theme="dark"] .task-delete {
    color: #6e7681;
}

[data-theme="dark"] .task-delete:hover {
    color: #f87171;
}

[data-theme="dark"] .todo-empty {
    border-color: #21262d;
}

[data-theme="dark"] .empty-symbol {
    background: #161b22;
    color: #818cf8;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .todo-empty h2 {
    color: #e6edf3;
}

[data-theme="dark"] .todo-empty p {
    color: #8b949e;
}

[data-theme="dark"] .category-editor {
    background: #161b22;
    border-color: #30363d;
}

/* Calendar Board in Dark Mode */
[data-theme="dark"] .calendar-board-header h1 {
    color: #f0f6fc;
}

[data-theme="dark"] .calendar-board-header p {
    color: #8b949e;
}

[data-theme="dark"] .calendar-board-actions button {
    border-color: #30363d;
    background: #161b22;
    color: #c9d1d9;
}

[data-theme="dark"] .calendar-board-actions button:hover {
    background: #21262d;
    color: #ffffff;
}

[data-theme="dark"] .calendar-board-view {
    background: #161b22;
    border: 1px solid #30363d;
}

[data-theme="dark"] .calendar-board-view button {
    color: #8b949e;
    background: transparent;
}

[data-theme="dark"] .calendar-board-view button.active {
    background: #232c3d;
    color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Calendar Filter Toolbar in Dark Mode */
[data-theme="dark"] .calendar-filters-toolbar {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .calendar-filters-heading {
    color: #c9d1d9;
}

[data-theme="dark"] .calendar-filter-pill {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .calendar-filter-pill:hover {
    background: #1c222e;
    border-color: #484f58;
}

[data-theme="dark"] .custom-checkbox {
    border-color: #6e7681;
    background: #0d1117;
}

[data-theme="dark"] .filter-pill-tasks.is-active {
    background: rgba(59, 130, 246, 0.16);
    border-color: #3b82f6;
    color: #93c5fd;
}

[data-theme="dark"] .filter-pill-tasks.is-active .custom-checkbox {
    background: #3b82f6;
    border-color: #3b82f6;
}

[data-theme="dark"] .filter-pill-birthdays.is-active {
    background: rgba(245, 158, 11, 0.16);
    border-color: #f59e0b;
    color: #fcd34d;
}

[data-theme="dark"] .filter-pill-birthdays.is-active .custom-checkbox {
    background: #f59e0b;
    border-color: #f59e0b;
}

[data-theme="dark"] .filter-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #e6edf3;
}

[data-theme="dark"] .filter-quick-btn {
    background: #2a3346;
    color: #a5b4fc;
}

[data-theme="dark"] .filter-quick-btn:hover {
    background: #374151;
}

/* Calendar Month Grid in Dark Mode */
[data-theme="dark"] .calendar-month {
    border-color: #30363d;
    background: #30363d;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .calendar-month > b {
    background: #161b22;
    color: #8b949e;
}

[data-theme="dark"] .calendar-day {
    background: #11161f;
    color: #e6edf3;
}

[data-theme="dark"] .calendar-day:hover {
    background: #18202d;
}

[data-theme="dark"] .calendar-day.outside {
    background: #0a0d12;
    color: #484f58;
}

[data-theme="dark"] .calendar-day.selected {
    box-shadow: inset 0 0 0 2px #707bfb;
    background: #171f2c;
}

[data-theme="dark"] .calendar-day small.item-birthday {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fef08a !important;
    border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .calendar-day small.item-task {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #bfdbfe !important;
    border-color: rgba(59, 130, 246, 0.32);
}

[data-theme="dark"] .calendar-day small.teal {
    background: rgba(45, 212, 191, 0.18) !important;
    color: #5eead4 !important;
}

[data-theme="dark"] .calendar-day small.coral {
    background: rgba(244, 63, 94, 0.18) !important;
    color: #fda4af !important;
}

[data-theme="dark"] .calendar-day small.violet {
    background: rgba(168, 85, 247, 0.18) !important;
    color: #d8b4fe !important;
}

[data-theme="dark"] .calendar-day small.gold {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fde047 !important;
}

[data-theme="dark"] .calendar-more-badge {
    color: #8b949e;
}

/* Calendar List View in Dark Mode */
[data-theme="dark"] .calendar-list article {
    border-color: #30363d;
    background: #11161f;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .calendar-date {
    background: #161b22;
    border-bottom-color: #21262d;
}

[data-theme="dark"] .calendar-date strong {
    color: #f0f6fc;
}

[data-theme="dark"] .calendar-date span {
    color: #8b949e;
}

[data-theme="dark"] .calendar-event {
    background: #18202d;
}

[data-theme="dark"] .calendar-event:hover {
    background: #202b3c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .calendar-event strong {
    color: #f0f6fc;
}

[data-theme="dark"] .calendar-event small {
    color: #8b949e;
}

[data-theme="dark"] .calendar-event.is-birthday-event {
    background: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .calendar-event.is-birthday-event strong {
    color: #fef08a;
}

[data-theme="dark"] .calendar-empty {
    color: #6e7681;
}

/* Modal in Dark Mode */
[data-theme="dark"] .calendar-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .calendar-modal-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .calendar-modal-header {
    border-bottom-color: #21262d;
}

[data-theme="dark"] .calendar-modal-header.header-birthday {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
    border-bottom-color: rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .calendar-modal-header.header-task {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.08));
    border-bottom-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .modal-type-chip {
    background: rgba(13, 17, 23, 0.85);
}

[data-theme="dark"] .header-birthday .modal-type-chip {
    color: #fcd34d;
}

[data-theme="dark"] .header-task .modal-type-chip {
    color: #93c5fd;
}

[data-theme="dark"] .modal-close-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #c9d1d9;
}

[data-theme="dark"] .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

[data-theme="dark"] .modal-event-title {
    color: #f0f6fc;
}

[data-theme="dark"] .modal-event-desc {
    color: #8b949e;
}

[data-theme="dark"] .modal-info-list {
    background: #0d1117;
    border-color: #21262d;
}

[data-theme="dark"] .info-label {
    color: #8b949e;
}

[data-theme="dark"] .info-value {
    color: #f0f6fc;
}

[data-theme="dark"] .modal-btn-confirm {
    background: #6366f1;
}

[data-theme="dark"] .modal-btn-confirm:hover {
    background: #4f46e5;
}




.auth-theme-toggle {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}


/* ============================================================
   SEGMENTED THEME SWITCHER (EXPLICIT USER CHOICE: LIGHT / DARK)
   ============================================================ */
.theme-selector-segmented {
    display: inline-flex;
    align-items: center;
    background: #f1f3f6;
    border: 1px solid #dce0e6;
    border-radius: 20px;
    padding: 3px;
    gap: 3px;
    transition: all 0.2s ease;
    user-select: none;
}

.theme-segment-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.18s ease;
}

.theme-segment-btn:hover {
    color: #1e293b;
}

.theme-segment-btn.is-selected {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.theme-segment-btn .theme-icon {
    font-size: 14px;
    line-height: 1;
}

.theme-selector-mini {
    padding: 2px;
    border-radius: 16px;
}

.theme-selector-mini .theme-segment-btn {
    padding: 3px 9px;
    font-size: 11px;
}

.theme-selector-fluid {
    width: 100%;
    display: flex;
}

.theme-selector-fluid .theme-segment-btn {
    flex: 1;
    justify-content: center;
    padding: 6px 10px;
}

/* Sidebar Theme Section */
.todo-theme-section {
    margin-top: 24px;
    padding: 14px 12px;
    border-top: 1px solid #eef1f4;
}

.todo-theme-label {
    font-size: 12px;
    font-weight: 700;
    color: #8b92a3;
    margin-bottom: 8px;
    display: block;
}

/* Dark mode overrides for Segmented Switcher */
[data-theme="dark"] .theme-selector-segmented {
    background: #12161f;
    border-color: #2b3648;
}

[data-theme="dark"] .theme-segment-btn {
    color: #8b949e;
}

[data-theme="dark"] .theme-segment-btn:hover {
    color: #f0f6fc;
}

[data-theme="dark"] .theme-segment-btn.is-selected {
    background: #253144;
    color: #93c5fd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .todo-theme-section {
    border-top-color: #212836;
}

[data-theme="dark"] .todo-theme-label {
    color: #8b949e;
}

/* ============================================================
   PROFILE & APPEARANCE SETTINGS
   ============================================================ */
.profile-container {
    max-width: 820px;
    margin: 20px auto;
    padding: 0 16px;
}

.profile-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar-big {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3);
}

.profile-info h1 {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 6px;
}

.profile-info p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.profile-divider {
    border: 0;
    height: 1px;
    background: #eef2f6;
    margin: 28px 0;
}

.section-title h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
}

.section-title p {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 20px;
}

.theme-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.theme-choice-card {
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.theme-choice-card:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.theme-choice-card.active {
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12);
}

.theme-choice-radio {
    position: absolute;
    top: 16px;
    left: 16px;
}

.custom-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: block;
    transition: all 0.15s ease;
}

.custom-radio.checked {
    border-color: #4f46e5;
    background: radial-gradient(circle, #4f46e5 45%, #ffffff 50%);
}

.theme-preview-box {
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.light-preview {
    background: #ffffff;
}

.light-preview .preview-mini-header {
    height: 14px;
    background: #f1f5f9;
    border-radius: 4px;
}

.light-preview .mini-bar {
    height: 10px;
    background: #e2e8f0;
    border-radius: 3px;
    display: block;
    margin-bottom: 4px;
}

.light-preview .mini-bar.short {
    width: 60%;
}

.dark-preview {
    background: #0d1117;
    border-color: #30363d;
}

.dark-preview .preview-mini-header {
    height: 14px;
    background: #161b22;
    border-radius: 4px;
}

.dark-preview .mini-bar {
    height: 10px;
    background: #21262d;
    border-radius: 3px;
    display: block;
    margin-bottom: 4px;
}

.dark-preview .mini-bar.short {
    width: 60%;
}

.theme-choice-details h3 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
}

.theme-choice-details p {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.theme-current-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
}

.status-badge.status-light {
    background: #fef9c3;
    color: #854d0e;
}

.status-badge.status-dark {
    background: #1e293b;
    color: #93c5fd;
}

/* Dark mode for profile */
[data-theme="dark"] .profile-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .profile-info h1 {
    color: #f0f6fc;
}

[data-theme="dark"] .profile-info p {
    color: #8b949e;
}

[data-theme="dark"] .profile-divider {
    background: #21262d;
}

[data-theme="dark"] .section-title h2 {
    color: #f0f6fc;
}

[data-theme="dark"] .section-title p {
    color: #8b949e;
}

[data-theme="dark"] .theme-choice-card {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .theme-choice-card:hover {
    background: #18202c;
    border-color: #484f58;
}

[data-theme="dark"] .theme-choice-card.active {
    border-color: #818cf8;
    background: #161f2e;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .custom-radio {
    border-color: #484f58;
}

[data-theme="dark"] .custom-radio.checked {
    border-color: #818cf8;
    background: radial-gradient(circle, #818cf8 45%, #0d1117 50%);
}

[data-theme="dark"] .theme-choice-details h3 {
    color: #f0f6fc;
}

[data-theme="dark"] .theme-choice-details p {
    color: #8b949e;
}

[data-theme="dark"] .theme-current-status {
    color: #8b949e;
}


/* ============================================================
   PERSIAN DATEPICKER COMPONENT
   ============================================================ */
.pdp-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.pdp-input-group {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 0 8px;
    height: 38px;
    cursor: pointer;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.pdp-input-group:hover {
    border-color: #3b82f6;
}

.pdp-container.is-open .pdp-input-group {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.pdp-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.pdp-input {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    direction: ltr;
    text-align: center;
    width: 95px;
    outline: none;
    color: #1f2937;
    cursor: pointer;
}

.pdp-clear-btn {
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
}

.pdp-clear-btn:hover {
    color: #ef4444;
}

.pdp-toggle-btn {
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 11px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.pdp-container.is-open .pdp-arrow {
    transform: rotate(180deg);
}

.pdp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

.pdp-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 14px;
    width: 280px;
    user-select: none;
    animation: pdp-pop-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pdp-pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.pdp-nav-btn {
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 12px;
    color: #475569;
    transition: all 0.15s ease;
}

.pdp-nav-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.pdp-selectors {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.pdp-select-month,
.pdp-select-year {
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    color: #1e293b;
    outline: none;
    cursor: pointer;
}

.pdp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
}

.pdp-weekday {
    padding: 2px 0;
}

.pdp-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.pdp-day {
    border: none;
    background: transparent;
    border-radius: 8px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: #1e293b;
    transition: all 0.12s ease;
}

.pdp-day:hover:not(.outside):not(.selected) {
    background: #eff6ff;
    color: #2563eb;
    transform: scale(1.06);
}

.pdp-day.outside {
    color: #cbd5e1;
    cursor: default;
}

.pdp-day.weekend {
    color: #ef4444;
}

.pdp-day.today {
    border: 1.5px solid #3b82f6;
    font-weight: 800;
}

.pdp-day.selected {
    background: #3b82f6 !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
}

.pdp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.pdp-footer-btn {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.pdp-footer-btn.today-btn {
    color: #2563eb;
    background: #eff6ff;
}

.pdp-footer-btn.today-btn:hover {
    background: #dbeafe;
}

.pdp-footer-btn.clear-btn {
    color: #ef4444;
}

.pdp-footer-btn.close-btn {
    color: #64748b;
}

.pdp-footer-btn.close-btn:hover {
    color: #0f172a;
}

/* Calendar Jump integration */
.pdp-calendar-jump .pdp-input-group {
    height: 34px;
    background: #ffffff;
    border-radius: 6px;
}

.pdp-calendar-jump .pdp-input {
    width: 86px;
    font-size: 12px;
}

/* Quick options sizing */
.quick-options {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: none !important;
}

/* Dark mode for PersianDatePicker */
[data-theme="dark"] .pdp-input-group {
    background: #161b22;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .pdp-input-group:hover,
[data-theme="dark"] .pdp-container.is-open .pdp-input-group {
    border-color: #707bfb;
    box-shadow: 0 0 0 3px rgba(112, 123, 251, 0.2);
}

[data-theme="dark"] .pdp-input {
    color: #f0f6fc;
}

[data-theme="dark"] .pdp-clear-btn {
    color: #8b949e;
}

[data-theme="dark"] .pdp-toggle-btn {
    color: #8b949e;
}

[data-theme="dark"] .pdp-popover {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .pdp-nav-btn {
    background: #21262d;
    color: #c9d1d9;
}

[data-theme="dark"] .pdp-nav-btn:hover {
    background: #30363d;
    color: #ffffff;
}

[data-theme="dark"] .pdp-select-month,
[data-theme="dark"] .pdp-select-year {
    background: #21262d;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .pdp-weekdays {
    color: #8b949e;
}

[data-theme="dark"] .pdp-day {
    color: #f0f6fc;
}

[data-theme="dark"] .pdp-day:hover:not(.outside):not(.selected) {
    background: #21262d;
    color: #93c5fd;
}

[data-theme="dark"] .pdp-day.outside {
    color: #484f58;
}

[data-theme="dark"] .pdp-day.weekend {
    color: #f87171;
}

[data-theme="dark"] .pdp-day.today {
    border-color: #707bfb;
}

[data-theme="dark"] .pdp-day.selected {
    background: #707bfb !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(112, 123, 251, 0.4);
}

[data-theme="dark"] .pdp-footer {
    border-top-color: #21262d;
}

[data-theme="dark"] .pdp-footer-btn.today-btn {
    background: rgba(112, 123, 251, 0.2);
    color: #a5b4fc;
}

[data-theme="dark"] .pdp-footer-btn.close-btn {
    color: #8b949e;
}

[data-theme="dark"] .pdp-footer-btn.close-btn:hover {
    color: #f0f6fc;
}

[data-theme="dark"] .pdp-calendar-jump .pdp-input-group {
    background: #161b22;
    border-color: #30363d;
}

/* ============================================================
   INSTALLMENTS & LOANS MANAGEMENT STYLES
   ============================================================ */
.todo-nav-icon.emerald {
    background: #ecfdf5;
    color: #059669;
}

.filter-pill-installments.is-active {
    background: #ecfdf5;
    border-color: #10b981;
    color: #047857;
}

.filter-pill-installments.is-active .custom-checkbox {
    background: #10b981;
    border-color: #10b981;
}

.filter-pill-installments.is-active .checkbox-check {
    display: block;
}

.dot-installments {
    background: #10b981;
}

.calendar-day small.item-installment {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0;
    font-weight: 600;
}

.calendar-event.is-installment-event {
    background: #ecfdf5 !important;
    border: 1px solid #d1fae5;
}

.calendar-event.is-installment-event strong {
    color: #047857;
}

.installment-strip {
    background: #10b981 !important;
    border-radius: 99px;
}

.calendar-modal-header.header-installment {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    border-bottom-color: #a7f3d0;
}

.header-installment .modal-type-chip {
    color: #047857;
}

.status-paid {
    color: #059669;
    font-weight: 700;
}

.status-unpaid {
    color: #d97706;
    font-weight: 700;
}

.installments-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

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

.installments-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 4px 0;
}

.installments-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.btn-new-loan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-new-loan:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.4);
}

.installments-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
}

.metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
}

.metric-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 24px;
    flex-shrink: 0;
}

.metric-active .metric-icon { background: #eff6ff; color: #2563eb; }
.metric-monthly .metric-icon { background: #ecfdf5; color: #059669; }
.metric-remaining .metric-icon { background: #fffbeb; color: #d97706; }
.metric-settled .metric-icon { background: #f1f5f9; color: #475569; }

.metric-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.metric-label {
    font-size: 12.5px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}

.metric-val {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.metric-val small {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

.installments-empty-card {
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 18px;
    padding: 48px 24px;
    text-align: center;
    max-width: 540px;
    margin: 32px auto;
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
}

.installments-empty-card .empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.installments-empty-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.installments-empty-card p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
    line-height: 1.7;
}

.loans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    width: 100%;
}

.loan-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
    position: relative;
}

.loan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.loan-card.is-settled-card {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.9;
}

.loan-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.loan-bank-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.loan-status-chip {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.loan-status-chip.active {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.loan-status-chip.settled {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.loan-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
}

.loan-desc {
    font-size: 12.5px;
    color: #64748b;
    margin: -6px 0 0 0;
    line-height: 1.6;
}

.loan-amount-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #f1f5f9;
}

.loan-amount-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.loan-amount-item .amt-label,
.loan-amount-item .label {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
}

.loan-amount-item .amt-val,
.loan-amount-item .val {
    font-size: 14.5px;
    font-weight: 800;
    color: #047857;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.loan-amount-item .amt-val small,
.loan-amount-item .val small {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

.loan-amount-item .val-amount {
    color: #059669;
    font-size: 15px;
}

.loan-progress-wrap,
.loan-progress-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.loan-progress-info,
.loan-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.progress-pct {
    color: #059669;
    font-weight: 700;
}

.loan-progress-bar {
    height: 9px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.loan-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.loan-due-text,
.loan-next-due {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fef08a;
    border-radius: 11px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: #92400e;
    font-weight: 700;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.loan-actions-bar,
.loan-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.btn-loan-pay,
.btn-pay-next {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border: none;
    padding: 9px 14px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.25);
    transition: all 0.18s ease;
    font-family: inherit;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.btn-loan-pay:hover,
.btn-pay-next:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(5, 150, 105, 0.35);
}

.btn-loan-unpay,
.btn-undo-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    padding: 9px 12px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.btn-loan-unpay:hover,
.btn-undo-pay:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-loan-schedule {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8fafc;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-loan-schedule:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.btn-loan-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 11px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-loan-edit:hover {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
    transform: translateY(-1px);
}

.loan-top-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.loan-interval-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.installment-interval-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.installment-interval-pills .interval-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    background: #f8fafc;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.installment-interval-pills .interval-chip:hover {
    background: #f1f5f9;
    border-color: #10b981;
    color: #047857;
}

.installment-interval-pills .interval-chip.active {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.28);
}

.btn-loan-delete,
.btn-delete-loan {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 11px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    flex-shrink: 0;
}

.btn-loan-delete:hover,
.btn-delete-loan:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #f87171;
    transform: scale(1.05);
}

/* Loan Modal */
.loan-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(5px);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modal-fade-in 0.2s ease-out;
}

.loan-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.28);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    animation: modal-scale-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
}

.loan-modal-card.schedule-modal-card {
    max-width: 720px !important;
}

.loan-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.loan-modal-header h2 {
    font-size: 17.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.loan-modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1;
}

.loan-form-group {
    margin-bottom: 16px;
}

.loan-form-row {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
}

.loan-input {
    border-radius: 11px;
    border: 1.5px solid #cbd5e1;
    padding: 9px 13px;
    font-size: 13.5px;
    width: 100%;
    transition: all 0.15s ease;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.loan-input:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
    outline: none;
}

.input-hint {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: #059669;
    font-weight: 600;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.quick-total-chips {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.quick-total-chips .chip {
    flex: 1;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
    transition: all 0.15s ease;
}

.quick-total-chips .chip.active {
    background: #ecfdf5;
    border-color: #059669;
    color: #059669;
}

.loan-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.btn-cancel {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    padding: 9px 20px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.btn-submit-loan,
.btn-save-loan,
.btn-confirm-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #059669, #047857);
    border: none;
    color: white;
    padding: 9px 22px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
    font-family: inherit;
    transition: all 0.18s ease;
    touch-action: manipulation;
}

.btn-submit-loan:hover,
.btn-save-loan:hover,
.btn-confirm-save:hover {
    background: linear-gradient(135deg, #047857, #065f46);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.btn-submit-loan:active,
.btn-save-loan:active,
.btn-confirm-save:active {
    transform: scale(0.98);
}

/* Schedule Table and Summary Row */
.schedule-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.summary-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
}

.summary-pill strong {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.schedule-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

.schedule-table th {
    background: #f1f5f9;
    color: #334155;
    font-weight: 800;
    padding: 11px 14px;
    text-align: right;
    border-bottom: 2px solid #cbd5e1;
    font-size: 12.5px;
}

.schedule-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    font-family: "Vazirmatn", sans-serif !important;
    font-feature-settings: "ss01" 1;
    -webkit-font-feature-settings: "ss01" 1;
}

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

.schedule-table tr.row-paid {
    background: #f0fdf4;
}

.schedule-table tr.row-paid td {
    color: #15803d;
}

.badge-paid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #15803d;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fef3c7;
    color: #92400e;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.btn-table-toggle {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-table-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    filter: brightness(0.96);
}

.btn-confirm-close {
    background: #059669;
    border: none;
    color: white;
    padding: 9px 24px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-confirm-close:hover {
    background: #047857;
}

/* ============================================================
   INSTALLMENTS DARK MODE
   ============================================================ */
[data-theme="dark"] .filter-pill-installments.is-active,
.dark-theme .filter-pill-installments.is-active {
    background: rgba(16, 185, 129, 0.16);
    border-color: #10b981;
    color: #6ee7b7;
}

[data-theme="dark"] .filter-pill-installments.is-active .custom-checkbox,
.dark-theme .filter-pill-installments.is-active .custom-checkbox {
    background: #10b981;
    border-color: #10b981;
}

[data-theme="dark"] .calendar-day small.item-installment,
.dark-theme .calendar-day small.item-installment {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

[data-theme="dark"] .calendar-event.is-installment-event,
.dark-theme .calendar-event.is-installment-event {
    background: #162421 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .calendar-event.is-installment-event strong,
.dark-theme .calendar-event.is-installment-event strong {
    color: #6ee7b7;
}

[data-theme="dark"] .calendar-modal-header.header-installment,
.dark-theme .calendar-modal-header.header-installment {
    background: linear-gradient(135deg, #064e3b, #047857);
    border-bottom-color: #059669;
}

[data-theme="dark"] .installments-title,
.dark-theme .installments-title {
    color: #f0f6fc;
}

[data-theme="dark"] .installments-sub,
.dark-theme .installments-sub {
    color: #8b949e;
}

[data-theme="dark"] .metric-card,
.dark-theme .metric-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .metric-val,
.dark-theme .metric-val {
    color: #f0f6fc;
}

[data-theme="dark"] .metric-label,
.dark-theme .metric-label {
    color: #8b949e;
}

[data-theme="dark"] .metric-active .metric-icon { background: rgba(59, 130, 246, 0.18); }
[data-theme="dark"] .metric-monthly .metric-icon { background: rgba(16, 185, 129, 0.18); }
[data-theme="dark"] .metric-remaining .metric-icon { background: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .metric-settled .metric-icon { background: rgba(255, 255, 255, 0.08); }

[data-theme="dark"] .loan-card,
.dark-theme .loan-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .loan-card.is-settled-card,
.dark-theme .loan-card.is-settled-card {
    background: #0d1117;
    border-color: #21262d;
}

[data-theme="dark"] .loan-bank-badge,
.dark-theme .loan-bank-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .loan-status-chip.active,
.dark-theme .loan-status-chip.active {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="dark"] .loan-status-chip.settled,
.dark-theme .loan-status-chip.settled {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .loan-title,
.dark-theme .loan-title {
    color: #f0f6fc;
}

[data-theme="dark"] .loan-desc,
.dark-theme .loan-desc {
    color: #8b949e;
}

[data-theme="dark"] .loan-amount-row,
.dark-theme .loan-amount-row {
    background: #0d1117;
    border-color: #21262d;
}

[data-theme="dark"] .loan-amount-item .amt-label,
[data-theme="dark"] .loan-amount-item .label,
.dark-theme .loan-amount-item .amt-label,
.dark-theme .loan-amount-item .label {
    color: #8b949e;
}

[data-theme="dark"] .loan-amount-item .amt-val,
[data-theme="dark"] .loan-amount-item .val,
.dark-theme .loan-amount-item .amt-val,
.dark-theme .loan-amount-item .val {
    color: #34d399;
}

[data-theme="dark"] .loan-amount-item .amt-val small,
[data-theme="dark"] .loan-amount-item .val small,
.dark-theme .loan-amount-item .amt-val small,
.dark-theme .loan-amount-item .val small {
    color: #8b949e;
}

[data-theme="dark"] .loan-amount-item .val-amount,
.dark-theme .loan-amount-item .val-amount {
    color: #34d399;
}

[data-theme="dark"] .loan-progress-bar,
.dark-theme .loan-progress-bar {
    background: #21262d;
}

[data-theme="dark"] .loan-progress-info,
[data-theme="dark"] .loan-progress-labels,
.dark-theme .loan-progress-info,
.dark-theme .loan-progress-labels {
    color: #8b949e;
}

[data-theme="dark"] .loan-due-text,
[data-theme="dark"] .loan-next-due,
.dark-theme .loan-due-text,
.dark-theme .loan-next-due {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .loan-actions-bar,
[data-theme="dark"] .loan-card-actions,
.dark-theme .loan-actions-bar,
.dark-theme .loan-card-actions {
    border-top-color: #21262d;
}

[data-theme="dark"] .btn-loan-unpay,
[data-theme="dark"] .btn-undo-pay,
.dark-theme .btn-loan-unpay,
.dark-theme .btn-undo-pay {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-loan-unpay:hover,
[data-theme="dark"] .btn-undo-pay:hover,
.dark-theme .btn-loan-unpay:hover,
.dark-theme .btn-undo-pay:hover {
    background: #30363d;
    color: #ffffff;
}

[data-theme="dark"] .btn-loan-schedule,
.dark-theme .btn-loan-schedule {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-loan-schedule:hover,
.dark-theme .btn-loan-schedule:hover {
    background: #30363d;
    color: #ffffff;
}

[data-theme="dark"] .btn-loan-edit,
.dark-theme .btn-loan-edit {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

[data-theme="dark"] .btn-loan-edit:hover,
.dark-theme .btn-loan-edit:hover {
    background: rgba(16, 185, 129, 0.22);
    color: #a7f3d0;
    border-color: rgba(16, 185, 129, 0.5);
}

[data-theme="dark"] .loan-interval-tag,
.dark-theme .loan-interval-tag {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .installment-interval-pills .interval-chip,
.dark-theme .installment-interval-pills .interval-chip {
    background: #21262d;
    color: #c9d1d9;
    border-color: #30363d;
}

[data-theme="dark"] .installment-interval-pills .interval-chip:hover,
.dark-theme .installment-interval-pills .interval-chip:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #6ee7b7;
}

[data-theme="dark"] .installment-interval-pills .interval-chip.active,
.dark-theme .installment-interval-pills .interval-chip.active {
    background: #059669;
    color: #ffffff;
    border-color: #10b981;
}

[data-theme="dark"] .btn-loan-delete,
[data-theme="dark"] .btn-delete-loan,
.dark-theme .btn-loan-delete,
.dark-theme .btn-delete-loan {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .installments-empty-card,
.dark-theme .installments-empty-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .installments-empty-card h3,
.dark-theme .installments-empty-card h3 {
    color: #f0f6fc;
}

[data-theme="dark"] .installments-empty-card p,
.dark-theme .installments-empty-card p {
    color: #8b949e;
}

[data-theme="dark"] .loan-modal-card,
.dark-theme .loan-modal-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .loan-modal-header,
.dark-theme .loan-modal-header {
    background: #0d1117;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .loan-modal-header h2,
.dark-theme .loan-modal-header h2 {
    color: #f0f6fc;
}

[data-theme="dark"] .loan-modal-footer,
.dark-theme .loan-modal-footer {
    background: #0d1117;
    border-top-color: #30363d;
}

[data-theme="dark"] .loan-input,
.dark-theme .loan-input {
    background: #0d1117;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .loan-input:focus,
.dark-theme .loan-input:focus {
    border-color: #10b981;
    background: #161b22;
}

[data-theme="dark"] .quick-total-chips .chip,
.dark-theme .quick-total-chips .chip {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .quick-total-chips .chip.active,
.dark-theme .quick-total-chips .chip.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #6ee7b7;
}

[data-theme="dark"] .btn-cancel,
.dark-theme .btn-cancel {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .summary-pill,
.dark-theme .summary-pill {
    background: #0d1117;
    border-color: #21262d;
    color: #8b949e;
}

[data-theme="dark"] .summary-pill strong,
.dark-theme .summary-pill strong {
    color: #f0f6fc;
}

[data-theme="dark"] .schedule-table,
.dark-theme .schedule-table {
    border-color: #30363d;
}

[data-theme="dark"] .schedule-table th,
.dark-theme .schedule-table th {
    background: #0d1117;
    color: #8b949e;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .schedule-table td,
.dark-theme .schedule-table td {
    border-bottom-color: #21262d;
    color: #c9d1d9;
}

[data-theme="dark"] .schedule-table tr.row-paid,
.dark-theme .schedule-table tr.row-paid {
    background: rgba(16, 185, 129, 0.12);
}

[data-theme="dark"] .schedule-table tr.row-paid td,
.dark-theme .schedule-table tr.row-paid td {
    color: #6ee7b7;
}

/* ============================================================
   MEETINGS & EVENTS MANAGEMENT STYLES
   ============================================================ */
.todo-nav-icon.violet {
    background: #f5f3ff;
    color: #7c3aed;
}

[data-theme="dark"] .todo-nav-icon.violet {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
}

/* Filter pill for Meetings */
.filter-pill-meetings.is-active {
    background: #f5f3ff;
    border-color: #8b5cf6;
    color: #6d28d9;
}

.filter-pill-meetings.is-active .custom-checkbox {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

.filter-pill-meetings.is-active .checkbox-check {
    display: block;
}

.dot-meetings {
    background: #8b5cf6;
}

/* Calendar month and list view for meetings */
.calendar-day small.item-meeting {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border: 1px solid #ddd6fe;
    font-weight: 600;
}

.calendar-event.is-meeting-event {
    background: #f5f3ff !important;
    border: 1px solid #ede9fe;
}

.calendar-event.is-meeting-event strong {
    color: #6d28d9;
}

.meeting-strip {
    background: #8b5cf6 !important;
    border-radius: 99px;
}

.calendar-modal-header.header-meeting {
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
    border-bottom-color: #ddd6fe;
}

.header-meeting .modal-type-chip {
    color: #6d28d9;
}

.calendar-meeting-url-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #7c3aed;
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
}

.calendar-meeting-url-link:hover {
    background: #6d28d9;
    transform: translateY(-1px);
}

/* Dedicated Meetings Page Layout */
.meetings-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

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

.meetings-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 4px 0;
}

.meetings-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.btn-new-meeting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7c3aed;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
    transition: all 0.2s ease;
}

.btn-new-meeting:hover {
    background: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}

.meetings-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metric-meetings-today .metric-icon { background: #eff6ff; }
.metric-meetings-upcoming .metric-icon { background: #f5f3ff; }
.metric-meetings-online .metric-icon { background: #ecfdf5; }
.metric-meetings-done .metric-icon { background: #f1f5f9; }

/* Filter tabs inside meetings view */
.meetings-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 12px;
    margin-bottom: 24px;
    width: fit-content;
    flex-wrap: wrap;
}

.meeting-tab-btn {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.meeting-tab-btn:hover {
    color: #0f172a;
}

.meeting-tab-btn.is-active {
    background: #ffffff;
    color: #7c3aed;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Meeting Cards */
.meetings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.meeting-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.meeting-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.meeting-card.is-completed-card {
    background: #f8fafc;
    opacity: 0.82;
}

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

.meeting-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.type-online {
    background: #ecfdf5;
    color: #047857;
}

.type-inperson {
    background: #f5f3ff;
    color: #6d28d9;
}

.type-event {
    background: #fffbeb;
    color: #b45309;
}

.type-personal {
    background: #eff6ff;
    color: #1d4ed8;
}

.meeting-countdown-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

.meeting-countdown-badge.is-today {
    background: #fee2e2;
    color: #b91c1c;
    animation: pulse-glow 2s infinite;
}

.meeting-countdown-badge.is-tomorrow {
    background: #fef3c7;
    color: #b45309;
}

.meeting-countdown-badge.is-upcoming {
    background: #f1f5f9;
    color: #475569;
}

.meeting-countdown-badge.is-completed {
    background: #ecfdf5;
    color: #059669;
}

.meeting-countdown-badge.is-past {
    background: #f1f5f9;
    color: #94a3b8;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.meeting-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.meeting-datetime-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    border: 1px solid #f1f5f9;
}

.meeting-datetime-row span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meeting-location-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.btn-join-meeting {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #7c3aed;
    color: #ffffff !important;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
    width: 100%;
}

.btn-join-meeting:hover {
    background: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.meeting-participants-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 8px;
}

.meeting-agenda-box {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    background: #fafaf9;
    border-right: 3px solid #8b5cf6;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
}

.meeting-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.btn-toggle-meeting {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-toggle-meeting:hover {
    background: #e2e8f0;
}

.btn-toggle-meeting.is-done {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.btn-star-meeting {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #94a3b8;
    font-size: 16px;
    transition: all 0.15s ease;
}

.btn-star-meeting.is-starred {
    color: #f59e0b;
    background: #fef3c7;
    border-color: #fde68a;
}

.btn-delete-meeting {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-delete-meeting:hover {
    background: #fee2e2;
    transform: scale(1.05);
}

.duration-chips {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.duration-chips .chip {
    flex: 1;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.duration-chips .chip:hover {
    background: #ede9fe;
    border-color: #8b5cf6;
    color: #7c3aed;
}

/* ============================================================
   MEETINGS DARK MODE STYLES
   ============================================================ */
[data-theme="dark"] .filter-pill-meetings.is-active {
    background: rgba(139, 92, 246, 0.16);
    border-color: #8b5cf6;
    color: #c4b5fd;
}

[data-theme="dark"] .filter-pill-meetings.is-active .custom-checkbox {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

[data-theme="dark"] .calendar-day small.item-meeting {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #c4b5fd !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

[data-theme="dark"] .calendar-event.is-meeting-event {
    background: #1c182c !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .calendar-event.is-meeting-event strong {
    color: #c4b5fd;
}

[data-theme="dark"] .calendar-modal-header.header-meeting {
    background: linear-gradient(135deg, #2e1065, #4c1d95);
    border-bottom-color: #6d28d9;
}

[data-theme="dark"] .meetings-title {
    color: #f0f6fc;
}

[data-theme="dark"] .meetings-sub {
    color: #8b949e;
}

[data-theme="dark"] .meetings-filter-tabs {
    background: #161b22;
}

[data-theme="dark"] .meeting-tab-btn {
    color: #8b949e;
}

[data-theme="dark"] .meeting-tab-btn:hover {
    color: #f0f6fc;
}

[data-theme="dark"] .meeting-tab-btn.is-active {
    background: #21262d;
    color: #c4b5fd;
}

[data-theme="dark"] .meeting-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .meeting-card.is-completed-card {
    background: #0d1117;
    border-color: #21262d;
}

[data-theme="dark"] .meeting-title {
    color: #f0f6fc;
}

[data-theme="dark"] .meeting-datetime-row {
    background: #0d1117;
    border-color: #21262d;
    color: #c9d1d9;
}

[data-theme="dark"] .meeting-agenda-box {
    background: #0d1117;
    border-right-color: #8b5cf6;
    color: #8b949e;
}

[data-theme="dark"] .meeting-participants-tag {
    background: #21262d;
    color: #8b949e;
}

[data-theme="dark"] .meeting-card-actions {
    border-top-color: #21262d;
}

[data-theme="dark"] .btn-toggle-meeting {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-toggle-meeting.is-done {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

[data-theme="dark"] .btn-star-meeting {
    background: #21262d;
    border-color: #30363d;
    color: #6e7681;
}

[data-theme="dark"] .btn-star-meeting.is-starred {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .btn-delete-meeting {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .duration-chips .chip {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .duration-chips .chip:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8b5cf6;
    color: #c4b5fd;
}

/* ==========================================================================
   NOTES & STICKY NOTES FEATURE (یادداشت‌ها)
   ========================================================================== */

.notes-page-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px clamp(20px, 3vw, 40px) 48px;
    direction: rtl;
    font-family: inherit;
}

.notes-embedded {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Header */
.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.notes-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.notes-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--ink, #1f2937);
    margin: 0 0 6px 0;
}

.notes-sub {
    font-size: 14px;
    color: var(--muted, #64748b);
    margin: 0;
}

.btn-new-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 22px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    transition: all 0.2s ease;
}

.btn-new-note:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
}

/* Metrics Grid */
.notes-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.note-metric-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
}

.note-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.note-metric-card .metric-icon {
    font-size: 26px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f8fafc;
    flex-shrink: 0;
}

.metric-all .metric-icon { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.metric-checklists .metric-icon { background: rgba(16, 185, 129, 0.12); color: #059669; }
.metric-pinned .metric-icon { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.metric-categorized .metric-icon { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.metric-archived .metric-icon { background: rgba(100, 116, 139, 0.12); color: #475569; }

.note-metric-card .metric-data {
    display: flex;
    flex-direction: column;
}

.note-metric-card .metric-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink, #0f172a);
    line-height: 1.2;
}

.note-metric-card .metric-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #64748b);
    margin-top: 2px;
}

/* Quick Note Container (Keep style) */
.quick-note-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
}

.quick-note-box {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    padding: 14px 20px;
    transition: all 0.25s ease;
}

.quick-note-box.expanded {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 16px 20px;
}

.quick-note-placeholder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #64748b;
    font-size: 15px;
    font-weight: 500;
    padding: 4px 0;
}

.quick-note-icons {
    display: flex;
    gap: 12px;
    opacity: 0.6;
    font-size: 18px;
}

.quick-note-expanded-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-note-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quick-note-title {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink, #1e293b);
}

.btn-pin-toggle {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.2s ease;
    padding: 4px;
    border-radius: 6px;
}

.btn-pin-toggle:hover, .btn-pin-toggle.pinned {
    opacity: 1;
    transform: scale(1.15);
}

.quick-note-textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink, #334155);
    resize: vertical;
    font-family: inherit;
}

.quick-note-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.quick-note-colors {
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.15s ease;
}

.color-dot:hover {
    transform: scale(1.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.color-dot.active {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px #f59e0b;
    transform: scale(1.15);
}

.quick-note-category-select {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    outline: none;
}

.quick-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.btn-cancel-quick {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-save-quick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-save-quick:hover {
    background: #d97706;
}

/* Toolbar: Search & Filters */
.notes-filter-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.notes-search-wrapper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 6px 12px;
    flex: 1;
    min-width: 240px;
    gap: 8px;
}

.notes-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    color: var(--ink, #1e293b);
}

.search-clear-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
}

.notes-filter-tabs {
    display: flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.filter-tab {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-tab.active {
    background: #ffffff;
    color: #d97706;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.notes-filter-select {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    outline: none;
}

.notes-color-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-filter-chip {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.color-filter-chip.active {
    background: #d97706;
    color: #ffffff;
    border-color: #d97706;
}

.color-filter-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.15s ease;
}

.color-filter-dot.active {
    border-color: #d97706;
    box-shadow: 0 0 0 2px #d97706;
    transform: scale(1.15);
}

/* Toast */
.notes-toast {
    background: #1e293b;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: fadeInSlide 0.3s ease;
}

/* Empty State */
.notes-empty-state {
    text-align: center;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 18px;
    padding: 48px 24px;
    margin: 20px 0;
}

.notes-empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.notes-empty-state h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink, #1e293b);
    margin: 0 0 8px;
}

.notes-empty-state p {
    font-size: 14px;
    color: var(--muted, #64748b);
    max-width: 480px;
    margin: 0 auto 20px;
}

/* Sections & Grid */
.notes-section {
    margin-bottom: 32px;
}

.notes-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink, #334155);
    margin-bottom: 14px;
}

.notes-section-title .count-tag {
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 10px;
}

.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

/* Note Card */
.note-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

.note-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.note-card.is-pinned {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 16px 8px;
    gap: 10px;
}

.note-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink, #1e293b);
    margin: 0;
    line-height: 1.35;
    word-break: break-word;
}

.note-card-title-placeholder {
    font-size: 13px;
    font-style: italic;
    color: #94a3b8;
}

.btn-card-pin {
    background: transparent;
    border: none;
    font-size: 17px;
    cursor: pointer;
    opacity: 0.3;
    transition: all 0.2s ease;
    padding: 2px;
}

.btn-card-pin:hover, .btn-card-pin.active {
    opacity: 1;
    transform: scale(1.15);
}

.note-card-body {
    padding: 6px 16px 14px;
    flex: 1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.note-card-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink, #334155);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow-y: auto;
}

.note-category-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.06);
    color: #334155;
    margin-top: auto;
}

.note-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
    gap: 8px;
}

.note-date-text {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

.note-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-card-action {
    background: transparent;
    border: none;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.btn-card-action:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.07);
}

.btn-card-action.btn-delete-action:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Color Hover Dropdown */
.note-action-dropdown {
    position: relative;
    display: inline-block;
}

.color-hover-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 6px 8px;
    gap: 5px;
    z-index: 10;
    margin-bottom: 6px;
}

.note-action-dropdown:hover .color-hover-menu {
    display: flex;
}

.color-dot-mini {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.color-dot-mini:hover {
    transform: scale(1.3);
}

.color-dot-mini.active {
    box-shadow: 0 0 0 2px #f59e0b;
}

/* Edit Modal */
.note-edit-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 580px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid #e2e8f0;
}

.note-modal-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    gap: 12px;
}

.note-modal-title-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink, #1e293b);
}

.note-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.note-modal-textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink, #334155);
    resize: vertical;
    font-family: inherit;
    min-height: 160px;
}

.note-modal-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.form-label-small {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin: 0;
    min-width: 80px;
}

.note-meta-dates {
    font-size: 11px;
    color: #94a3b8;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.btn-save-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-save-note:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
}

/* ==========================================================================
   DARK MODE FOR NOTES ([data-theme="dark"] & .dark-theme)
   ========================================================================== */

[data-theme="dark"] .note-metric-card,
.dark-theme .note-metric-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .note-metric-card .metric-icon,
.dark-theme .note-metric-card .metric-icon {
    background: #21262d;
}

[data-theme="dark"] .quick-note-box,
.dark-theme .quick-note-box {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .quick-note-placeholder,
.dark-theme .quick-note-placeholder {
    color: #8b949e;
}

[data-theme="dark"] .quick-note-options,
.dark-theme .quick-note-options {
    border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .quick-note-category-select,
.dark-theme .quick-note-category-select {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-cancel-quick,
.dark-theme .btn-cancel-quick {
    border-color: #30363d;
    color: #8b949e;
}

[data-theme="dark"] .notes-filter-toolbar,
.dark-theme .notes-filter-toolbar {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .notes-search-wrapper,
.dark-theme .notes-search-wrapper {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .notes-filter-tabs,
.dark-theme .notes-filter-tabs {
    background: #0d1117;
}

[data-theme="dark"] .filter-tab,
.dark-theme .filter-tab {
    color: #8b949e;
}

[data-theme="dark"] .filter-tab.active,
.dark-theme .filter-tab.active {
    background: #21262d;
    color: #f59e0b;
}

[data-theme="dark"] .notes-filter-select,
.dark-theme .notes-filter-select {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .color-filter-chip,
.dark-theme .color-filter-chip {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}

[data-theme="dark"] .notes-empty-state,
.dark-theme .notes-empty-state {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .notes-section-title .count-tag,
.dark-theme .notes-section-title .count-tag {
    background: #21262d;
    color: #8b949e;
}

[data-theme="dark"] .note-card,
.dark-theme .note-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .note-category-pill,
.dark-theme .note-category-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #c9d1d9;
}

[data-theme="dark"] .note-card-footer,
.dark-theme .note-card-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .color-hover-menu,
.dark-theme .color-hover-menu {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .btn-card-action:hover,
.dark-theme .btn-card-action:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .note-edit-modal-card,
.dark-theme .note-edit-modal-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .note-modal-header,
.dark-theme .note-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .note-meta-dates,
.dark-theme .note-meta-dates {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   NOTE CHECKLIST & TO-DO STYLES
   ========================================================================== */

.btn-quick-new-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-quick-new-check:hover {
    background: rgba(16, 185, 129, 0.2);
    transform: translateY(-1px);
}

.note-type-segmented {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
    width: fit-content;
    align-self: flex-start;
    margin-bottom: 6px;
}

.note-type-segmented .segmented-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.note-type-segmented .segmented-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.note-modal-mode-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.modal-checklist-stat {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.note-checklist-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.note-checklist-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.btn-checklist-action-mini {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-checklist-action-mini:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.note-checklist-items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}

.note-checklist-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 5px 8px;
    transition: all 0.15s ease;
}

.note-checklist-edit-row:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

.note-checklist-edit-row.item-done {
    opacity: 0.7;
}

.btn-check-toggle {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
}

.btn-check-toggle:hover {
    border-color: #10b981;
}

.btn-check-toggle.checked {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.note-checklist-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--ink, #1e293b);
    outline: none;
    padding: 4px 6px;
    font-family: inherit;
}

.note-checklist-input.is-done {
    text-decoration: line-through;
    color: #94a3b8;
}

.btn-delete-check-item {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
    opacity: 0.5;
}

.btn-delete-check-item:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    opacity: 1;
}

.note-checklist-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.checklist-add-icon {
    font-size: 16px;
    color: #64748b;
    font-weight: 700;
}

.note-checklist-new-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--ink, #1e293b);
    outline: none;
    font-family: inherit;
}

.btn-add-check-item {
    background: #10b981;
    color: #ffffff;
    border: none;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-add-check-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Card Checklist Presentation */
.note-card-title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.card-checklist-type-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.card-checklist-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.card-checklist-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
}

.card-checklist-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.card-checklist-pill.done-all {
    background: #10b981;
    color: #ffffff;
}

.card-checklist-pct-num {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
}

.card-checklist-progress {
    height: 5px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 99px;
    overflow: hidden;
    width: 100%;
}

.card-checklist-progress-bar {
    height: 100%;
    background: #10b981;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.card-checklist-progress-bar.done-all {
    background: #059669;
}

.card-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.card-checklist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 13.5px;
}

.card-checklist-row:hover {
    background: rgba(0, 0, 0, 0.05);
}

.card-check-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    background: #ffffff;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.card-check-box.checked {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.card-check-text {
    color: var(--ink, #334155);
    line-height: 1.4;
    word-break: break-word;
    transition: all 0.15s ease;
}

.card-checklist-row.is-done .card-check-text {
    text-decoration: line-through;
    color: #94a3b8;
    opacity: 0.7;
}

.card-checklist-more {
    font-size: 11px;
    color: #64748b;
    padding-right: 26px;
    font-weight: 600;
}

/* Dashboard Mini Note Checklist */
.dash-mini-checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0;
}

.dash-mini-check-badge {
    font-size: 10px;
    font-weight: 700;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 6px;
    border-radius: 8px;
    width: fit-content;
    margin-bottom: 2px;
}

.dash-mini-check-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: inherit;
    line-height: 1.3;
}

.dash-mini-check-item.is-done .dash-mini-check-text {
    text-decoration: line-through;
    opacity: 0.6;
}

.dash-mini-more {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 2px;
}

.dash-mini-note-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-mini-type {
    font-size: 12px;
}

/* Dark theme overrides for checklists */
[data-theme="dark"] .metric-checklists .metric-icon,
.dark-theme .metric-checklists .metric-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .note-type-segmented,
.dark-theme .note-type-segmented {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .note-type-segmented .segmented-btn,
.dark-theme .note-type-segmented .segmented-btn {
    color: #94a3b8;
}

[data-theme="dark"] .note-type-segmented .segmented-btn.active,
.dark-theme .note-type-segmented .segmented-btn.active {
    background: #242b35;
    color: #f1f5f9;
}

[data-theme="dark"] .note-checklist-edit-row,
.dark-theme .note-checklist-edit-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-check-toggle,
.dark-theme .btn-check-toggle {
    background: #1e2530;
    border-color: #475569;
}

[data-theme="dark"] .note-checklist-input,
.dark-theme .note-checklist-input {
    color: #e2e8f0;
}

[data-theme="dark"] .note-checklist-add-row,
.dark-theme .note-checklist-add-row {
    border-color: #334155;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .card-checklist-progress,
.dark-theme .card-checklist-progress {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .card-checklist-row:hover,
.dark-theme .card-checklist-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .card-check-box,
.dark-theme .card-check-box {
    background: #1e2530;
    border-color: #475569;
}

[data-theme="dark"] .card-check-box.checked,
.dark-theme .card-check-box.checked {
    background: #10b981;
    border-color: #10b981;
}

[data-theme="dark"] .card-check-text,
.dark-theme .card-check-text {
    color: #e2e8f0;
}

[data-theme="dark"] .btn-checklist-action-mini,
.dark-theme .btn-checklist-action-mini {
    border-color: #475569;
    color: #94a3b8;
}

[data-theme="dark"] .btn-checklist-action-mini:hover,
.dark-theme .btn-checklist-action-mini:hover {
    background: #242b35;
    color: #f1f5f9;
}

/* ==========================================================================
   TODAY'S DASHBOARD & OVERVIEW (امروز من - داشبورد)
   ========================================================================== */

.dashboard-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px clamp(20px, 3vw, 40px) 48px;
    direction: rtl;
    font-family: inherit;
}

/* Hero Banner */
.dashboard-hero {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 40%, #6366f1 100%);
    color: #ffffff;
    border-radius: 24px;
    padding: 32px 36px;
    margin-bottom: 24px;
    box-shadow: 0 14px 34px rgba(67, 56, 202, 0.28);
    position: relative;
    overflow: hidden;
}

.dashboard-hero::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    bottom: -60px;
    right: 15%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.dashboard-hero-content {
    position: relative;
    z-index: 1;
}

.dashboard-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-greeting-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.greeting-emoji {
    font-size: 16px;
}

.dashboard-live-clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
}

.dashboard-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.day-of-week {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #e0e7ff;
    margin-bottom: 2px;
}

.full-persian-date {
    font-size: 34px;
    font-weight: 900;
    margin: 0;
    color: #ffffff;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.dashboard-occasion-pill {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.dashboard-occasion-pill.is-holiday {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fee2e2;
}

/* Progress bar */
.dashboard-progress-section {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(6px);
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 8px;
}

.dashboard-progress-track {
    width: 100%;
    height: 9px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
}

.dashboard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Tasks Page Hero (matching Dashboard Page Hero) */
.tasks-page-hero {
    margin-bottom: 24px;
}

.tasks-page-hero.hero-today {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #38bdf8 100%);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.28);
}

.tasks-page-hero.hero-important {
    background: linear-gradient(135deg, #78350f 0%, #d97706 50%, #fbbf24 100%);
    box-shadow: 0 14px 34px rgba(217, 119, 6, 0.28);
}

.tasks-page-hero.hero-planned {
    background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #34d399 100%);
    box-shadow: 0 14px 34px rgba(5, 150, 105, 0.28);
}

.tasks-page-hero.hero-birthdays {
    background: linear-gradient(135deg, #831843 0%, #db2777 50%, #f472b6 100%);
    box-shadow: 0 14px 34px rgba(219, 39, 119, 0.28);
}

.tasks-page-hero.hero-all {
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #818cf8 100%);
    box-shadow: 0 14px 34px rgba(79, 70, 229, 0.28);
}

.tasks-page-hero.hero-meetings {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a855f7 100%);
    box-shadow: 0 14px 34px rgba(124, 58, 237, 0.28);
}

.tasks-page-hero.hero-installments {
    background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%);
    box-shadow: 0 14px 34px rgba(16, 185, 129, 0.28);
}

.tasks-hero-view-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    width: fit-content;
}

.tasks-hero-view-badge .hero-view-emoji {
    font-size: 16px;
}

/* Hero Actions */
.dashboard-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.hero-btn.primary {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.hero-btn.primary:hover {
    background: #059669;
    transform: translateY(-2px);
}

.hero-btn.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.hero-btn.ghost {
    background: transparent;
    color: #e0e7ff;
    border: 1px dashed rgba(255, 255, 255, 0.35);
}

.hero-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Stats Grid */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dash-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    position: relative;
}

.dash-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
}

.dash-stat-card .stat-icon {
    font-size: 28px;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-tasks .stat-icon { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.stat-birthdays .stat-icon { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.stat-meetings .stat-icon { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.stat-loans .stat-icon { background: rgba(16, 185, 129, 0.12); color: #059669; }

.dash-stat-card .stat-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dash-stat-card .stat-number {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink, #0f172a);
    line-height: 1.2;
}

.dash-stat-card .stat-number small {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #64748b);
    margin-right: 4px;
}

.dash-stat-card .stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #64748b);
    margin-top: 4px;
}

.dash-stat-card .stat-arrow {
    font-size: 16px;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.dash-stat-card:hover .stat-arrow {
    transform: translateX(-4px);
    color: #3b82f6;
}

/* Birthday Festive Banner */
.birthday-festive-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 2px solid #f59e0b;
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
    display: flex;
    align-items: center;
    gap: 20px;
    animation: gentlePulse 3s infinite ease-in-out;
}

.birthday-confetti {
    font-size: 36px;
    flex-shrink: 0;
}

.birthday-content h3 {
    font-size: 18px;
    font-weight: 800;
    color: #92400e;
    margin: 0 0 8px;
}

.birthday-names-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.birthday-person-chip {
    font-size: 14px;
    color: #78350f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.birthday-person-chip strong {
    font-size: 15px;
    color: #b45309;
}

.birthday-upcoming-banner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #475569;
    gap: 12px;
}

.btn-banner-link {
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* Columns Grid */
.dashboard-columns-grid {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .dashboard-columns-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-col-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Dash Card */
.dash-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
    gap: 12px;
}

.dash-card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-card-title-group h2 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink, #1e293b);
    margin: 0;
}

.card-title-icon {
    font-size: 20px;
}

.badge-count {
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.dash-pills-filter {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    gap: 3px;
}

.dash-pills-filter .pill {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dash-pills-filter .pill.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.btn-header-mini {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-header-mini:hover {
    color: #2563eb;
}

/* Quick Add Task Bar */
.dash-quick-add-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.dash-quick-add-task input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 14px;
    background: #ffffff;
    color: var(--ink, #1e293b);
    outline: none;
}

.dash-quick-add-task input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.btn-quick-add {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-quick-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-quick-add:not(:disabled):hover {
    background: #1d4ed8;
}

/* Task List */
.dash-task-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.dash-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.15s ease;
    gap: 12px;
}

.dash-task-item:hover {
    background: #f8fafc;
}

.dash-task-item.completed .dash-task-text {
    text-decoration: line-through;
    color: #94a3b8;
}

.dash-task-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
    margin: 0;
}

.dash-task-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    accent-color: #2563eb;
    cursor: pointer;
}

.dash-task-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1e293b);
    line-height: 1.4;
}

.dash-task-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-category-tag {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 8px;
}

.task-time-tag {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 6px;
}

.btn-star-task {
    background: transparent;
    border: none;
    font-size: 16px;
    color: #cbd5e1;
    cursor: pointer;
    padding: 2px 4px;
}

.btn-star-task.starred {
    color: #f59e0b;
}

.btn-delete-task {
    background: transparent;
    border: none;
    font-size: 13px;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.5;
}

.btn-delete-task:hover {
    opacity: 1;
    color: #ef4444;
}

.dash-empty-state {
    text-align: center;
    padding: 36px 20px;
    color: #64748b;
}

.dash-empty-state .empty-emoji {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}

.dash-card-footer {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.link-footer {
    background: transparent;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Side Card: Meetings */
.dash-side-empty {
    padding: 24px 20px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-link-action {
    background: transparent;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 6px 14px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: center;
}

.dash-meetings-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-meeting-card {
    background: #fbfbfe;
    border: 1px solid #ede9fe;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-meeting-card.completed {
    opacity: 0.6;
}

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

.meeting-type-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.meeting-type-badge.online {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
}

.meeting-type-badge.in-person {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.meeting-time-badge {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

.meeting-title {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.meeting-loc {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meeting-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.btn-dash-join {
    background: #8b5cf6;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease;
}

.btn-dash-join:hover {
    background: #7c3aed;
    color: #ffffff;
}

.btn-dash-toggle-meeting {
    background: transparent;
    border: 1px solid #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-dash-toggle-meeting.is-done {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-color: #10b981;
}

/* Side Card: Loans */
.dash-due-alert-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 12px 16px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #991b1b;
    font-size: 13px;
}

.dash-loan-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dash-loan-card.is-due-today {
    background: #fffbeb;
    border-color: #f59e0b;
}

.loan-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bank-tag {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
}

.loan-amount {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}

.loan-days-badge {
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    color: #475569;
    padding: 3px 8px;
    border-radius: 6px;
}

.btn-pay-now {
    background: #10b981;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
}

.upcoming-loans-list {
    padding: 12px 0 6px;
}

.upcoming-loans-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    padding: 0 16px 4px;
    display: block;
}

/* Side Card: Pinned Notes */
.dash-pinned-notes-grid {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.dash-mini-note {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.15s ease;
}

.dash-mini-note:hover {
    transform: translateY(-2px);
}

.dash-mini-note h5 {
    font-size: 13px;
    font-weight: 800;
    margin: 0;
    color: #1e293b;
}

.dash-mini-note p {
    font-size: 12px;
    color: #334155;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.mini-note-cat {
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 6px;
    align-self: flex-start;
    margin-top: auto;
}

/* ==========================================================================
   DARK MODE STYLES FOR DASHBOARD ([data-theme="dark"] & .dark-theme)
   ========================================================================== */

[data-theme="dark"] .dashboard-hero,
.dark-theme .dashboard-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #2e2654 50%, #312e81 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dash-stat-card,
.dark-theme .dash-stat-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .dash-stat-card .stat-number,
.dark-theme .dash-stat-card .stat-number {
    color: #f0f6fc;
}

[data-theme="dark"] .dash-card,
.dark-theme .dash-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .dash-card-header,
.dark-theme .dash-card-header {
    border-bottom-color: #21262d;
}

[data-theme="dark"] .dash-card-title-group h2,
.dark-theme .dash-card-title-group h2 {
    color: #f0f6fc;
}

[data-theme="dark"] .dash-pills-filter,
.dark-theme .dash-pills-filter {
    background: #0d1117;
}

[data-theme="dark"] .dash-pills-filter .pill.active,
.dark-theme .dash-pills-filter .pill.active {
    background: #21262d;
    color: #58a6ff;
}

[data-theme="dark"] .dash-quick-add-task,
.dark-theme .dash-quick-add-task {
    background: #0d1117;
    border-bottom-color: #21262d;
}

[data-theme="dark"] .dash-quick-add-task input,
.dark-theme .dash-quick-add-task input {
    background: #161b22;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .dash-task-item,
.dark-theme .dash-task-item {
    border-bottom-color: #21262d;
}

[data-theme="dark"] .dash-task-item:hover,
.dark-theme .dash-task-item:hover {
    background: #1c2128;
}

[data-theme="dark"] .dash-task-text,
.dark-theme .dash-task-text {
    color: #e6edf3;
}

[data-theme="dark"] .dash-card-footer,
.dark-theme .dash-card-footer {
    background: #0d1117;
    border-top-color: #21262d;
}

[data-theme="dark"] .dash-meeting-card,
.dark-theme .dash-meeting-card {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .meeting-title,
.dark-theme .meeting-title {
    color: #f0f6fc;
}

[data-theme="dark"] .dash-loan-card,
.dark-theme .dash-loan-card {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .loan-amount,
.dark-theme .loan-amount {
    color: #f0f6fc;
}

[data-theme="dark"] .birthday-festive-card,
.dark-theme .birthday-festive-card {
    background: linear-gradient(135deg, #2e210a 0%, #3d2b0e 100%);
    border-color: #b45309;
}

[data-theme="dark"] .birthday-content h3,
.dark-theme .birthday-content h3 {
    color: #fbbf24;
}

[data-theme="dark"] .birthday-person-chip,
.dark-theme .birthday-person-chip {
    color: #fef3c7;
}

[data-theme="dark"] .birthday-upcoming-banner,
.dark-theme .birthday-upcoming-banner {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

/* ==========================================================================
   PROFILE & USER SETTINGS (پروفایل و مشخصات کاربری)
   ========================================================================== */

.profile-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    direction: rtl;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-toast {
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    animation: fadeInSlide 0.3s ease;
}

.profile-toast.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.profile-toast.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Hero Profile Card */
.profile-hero-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.profile-header-layout {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.profile-avatar-large {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
    border: 3px solid #ffffff;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar-large.is-emoji {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    border-color: #f59e0b;
}

.avatar-large-emoji {
    font-size: 48px;
    line-height: 1;
}

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

.avatar-large-initials {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
}

.profile-hero-info {
    flex: 1;
    min-width: 260px;
}

.profile-hero-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.profile-hero-name-row h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink, #1e293b);
    margin: 0;
}

.user-role-badge {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid #a7f3d0;
}

.profile-hero-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px;
}

.profile-hero-mobile strong {
    color: #334155;
    font-size: 14px;
}

.verified-tag {
    font-size: 11px;
    color: #059669;
    background: #d1fae5;
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 600;
}

/* Avatar Action Buttons */
.avatar-actions-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-avatar-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-avatar-action:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

.btn-upload-photo {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
    position: relative;
    overflow: hidden;
}

.btn-upload-photo:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.hidden-file-input {
    display: none;
}

.btn-remove-photo {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}

.btn-remove-photo:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Preset Avatars Grid Panel */
.avatar-presets-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed #e2e8f0;
    animation: fadeInSlide 0.25s ease;
}

.presets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.presets-header h4 {
    font-size: 14px;
    font-weight: 800;
    color: #334155;
    margin: 0;
}

.btn-close-presets {
    background: transparent;
    border: none;
    font-size: 14px;
    color: #94a3b8;
    cursor: pointer;
}

.presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 10px;
}

.preset-avatar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-avatar-btn:hover {
    background: #ffffff;
    border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.preset-avatar-btn.selected {
    border-color: #f59e0b;
    background: #fef3c7;
    box-shadow: 0 0 0 2px #f59e0b;
}

.preset-emoji {
    font-size: 28px;
    line-height: 1;
}

.preset-title {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profile Form Grid */
.profile-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.form-group-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group-item.col-6 {
    flex: 1 1 calc(50% - 8px);
    min-width: 240px;
}

.form-group-item.col-12 {
    flex: 1 1 100%;
}

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

.calculated-age-badge {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid #a7f3d0;
}

.input-with-badge {
    position: relative;
    display: flex;
    align-items: center;
}

.readonly-input {
    background: #f8fafc !important;
    color: #64748b !important;
    cursor: not-allowed;
    padding-left: 100px;
}

.input-inner-badge {
    position: absolute;
    left: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
}

.form-helper-text {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.auto-sync-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    width: 100%;
}

.auto-sync-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}

/* Save Bar */
.profile-save-bar {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.btn-save-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    padding: 11px 28px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease;
}

.btn-save-profile:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

/* Account Stats Row */
.account-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.account-stat-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.stat-box-icon {
    font-size: 24px;
    margin-bottom: 2px;
}

.stat-box-val {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.stat-box-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* Dark Mode Overrides for Profile */
[data-theme="dark"] .profile-hero-card,
.dark-theme .profile-hero-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .profile-hero-name-row h1,
.dark-theme .profile-hero-name-row h1 {
    color: #f0f6fc;
}

[data-theme="dark"] .btn-avatar-action,
.dark-theme .btn-avatar-action {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-avatar-action:hover,
.dark-theme .btn-avatar-action:hover {
    background: #30363d;
    color: #ffffff;
}

[data-theme="dark"] .avatar-presets-panel,
.dark-theme .avatar-presets-panel {
    border-top-color: #30363d;
}

[data-theme="dark"] .preset-avatar-btn,
.dark-theme .preset-avatar-btn {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .preset-avatar-btn:hover,
.dark-theme .preset-avatar-btn:hover {
    background: #21262d;
    border-color: #f59e0b;
}

[data-theme="dark"] .preset-avatar-btn.selected,
.dark-theme .preset-avatar-btn.selected {
    background: #3d2e10;
    border-color: #f59e0b;
}

[data-theme="dark"] .readonly-input,
.dark-theme .readonly-input {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}

[data-theme="dark"] .auto-sync-checkbox,
.dark-theme .auto-sync-checkbox {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .account-stat-box,
.dark-theme .account-stat-box {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .stat-box-val,
.dark-theme .stat-box-val {
    color: #f0f6fc;
}

[data-theme="dark"] .profile-save-bar,
.dark-theme .profile-save-bar {
    border-top-color: #30363d;
}

/* ==========================================================================
   TASKS SIDEBAR: RETURN TO DASHBOARD & DYNAMIC USER PROFILE
   ========================================================================== */

/* Return to Dashboard Button in Tasks */
.todo-back-dashboard-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 4px 14px;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
    transition: all 0.2s ease;
}

.todo-back-dashboard-btn:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.todo-back-dashboard-btn .btn-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.todo-back-dashboard-btn:hover .btn-arrow {
    transform: translateX(-4px);
}

/* Dynamic User Profile in Tasks Sidebar */
.todo-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin: 0 4px 16px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.todo-profile-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.todo-avatar-box {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.25);
}

.todo-avatar-box.is-emoji {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    border: 1px solid #f59e0b;
}

.todo-avatar-box .avatar-emoji {
    font-size: 24px;
    line-height: 1;
}

.todo-avatar-box .avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.todo-profile-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.todo-user-name {
    color: #1e293b;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.todo-profile-sub {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    margin-top: 3px;
}

/* Home link in todo nav */
.todo-nav-home-link {
    text-decoration: none;
    color: #4338ca !important;
    background: #eef2ff !important;
    font-weight: 700;
    margin-bottom: 6px !important;
}

.todo-nav-home-link:hover {
    background: #e0e7ff !important;
    color: #3730a3 !important;
}

.nav-home-tag {
    font-size: 11px;
    font-weight: 700;
    background: #c7d2fe;
    color: #3730a3;
    padding: 1px 7px;
    border-radius: 8px;
}

/* Breadcrumb in Tasks header */
.todo-breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 4px;
}

.todo-breadcrumb-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

.todo-breadcrumb-sep {
    color: #94a3b8;
}

.todo-breadcrumb-current {
    color: #64748b;
    font-weight: 600;
}

/* Dark mode for tasks sidebar user and home button */
[data-theme="dark"] .todo-sidebar,
.dark-theme .todo-sidebar {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .todo-sidebar-title,
.dark-theme .todo-sidebar-title {
    border-bottom-color: #21262d !important;
}

[data-theme="dark"] .todo-sidebar-title h3,
.dark-theme .todo-sidebar-title h3 {
    color: #f0f6fc !important;
}

[data-theme="dark"] .todo-back-dashboard-btn,
.dark-theme .todo-back-dashboard-btn {
    background: linear-gradient(135deg, #1e293b, #172554);
    border-color: #1d4ed8;
    color: #93c5fd;
}

[data-theme="dark"] .todo-back-dashboard-btn:hover,
.dark-theme .todo-back-dashboard-btn:hover {
    background: #2563eb;
    color: #ffffff;
}

[data-theme="dark"] .todo-profile-card,
.dark-theme .todo-profile-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .todo-profile-card:hover,
.dark-theme .todo-profile-card:hover {
    background: #21262d;
    border-color: #484f58;
}

[data-theme="dark"] .todo-user-name,
.dark-theme .todo-user-name {
    color: #f0f6fc;
}

[data-theme="dark"] .todo-nav-home-link,
.dark-theme .todo-nav-home-link {
    background: #1e1b4b !important;
    color: #c7d2fe !important;
}

[data-theme="dark"] .todo-nav-home-link:hover,
.dark-theme .todo-nav-home-link:hover {
    background: #312e81 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .nav-home-tag,
.dark-theme .nav-home-tag {
    background: #3730a3;
    color: #e0e7ff;
}

[data-theme="dark"] .todo-breadcrumb-link,
.dark-theme .todo-breadcrumb-link {
    color: #58a6ff;
}


/* ============================================================
   GLOBAL LAYOUT & SIDEBAR STYLING (ROBUST FALLBACK)
   ============================================================ */
@media (min-width: 641px) {
    .page {
        min-height: 100vh;
        display: grid !important;
        grid-template-columns: 244px minmax(0, 1fr) !important;
        background: #f3f5f3;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .page > .sidebar {
        display: block !important;
    }

    .page > main > .top-row {
        display: flex !important;
    }

    .page > main {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    .page > main article.content {
        padding: 0 !important;
        display: block !important;
    }

    .sidebar {
        height: 100vh;
        position: sticky !important;
        top: 0 !important;
        background: #ffffff !important;
        border-left: 1px solid #e2e8f0 !important;
        box-shadow: -4px 0 24px rgba(15, 23, 42, 0.04) !important;
        transition: all 0.25s ease;
        z-index: 100;
    }
}

main {
    min-width: 0;
}

.nav-label-mobile {
    display: none;
}

.nav-label-desktop {
    display: inline;
}

.sidebar .sidebar-brand-row {
    min-height: 84px;
    align-items: center;
    display: flex;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.sidebar .app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.sidebar .brand-mark-wrapper {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.sidebar .app-brand-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.12));
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar .app-brand:hover .app-brand-logo {
    transform: scale(1.08) rotate(-3deg);
}

.sidebar .brand-mark {
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
}

.sidebar .brand-text-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar .navbar-brand {
    display: block;
    color: #0f172a !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    text-decoration: none !important;
}

.sidebar .brand-sub {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    margin-top: 3px;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: right;
}

.sidebar .nav-scrollable {
    display: block;
    height: calc(100vh - 108px);
    padding: 16px 10px;
    overflow-y: auto;
}

.sidebar .nav-item {
    margin-bottom: 6px;
}

.sidebar .nav-item .nav-link,
.sidebar a.nav-link {
    min-height: 48px;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: 10px !important;
    color: #aec0bd !important;
    padding: 0 14px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: background .16s ease, color .16s ease;
}

.sidebar .nav-item .nav-link:hover,
.sidebar a.nav-link:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.sidebar .nav-item .nav-link.active,
.sidebar a.nav-link.active {
    background: #f1b95b !important;
    color: #17312f !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.sidebar .nav-icon {
    width: 24px;
    text-align: center;
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

.top-row {
    height: 72px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid #dde5e2 !important;
    backdrop-filter: blur(12px);
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding-inline: 24px !important;
    transition: background 0.25s ease, border-color 0.25s ease;
    gap: 16px !important;
}

.top-context-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.topbar-nav-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    text-decoration: none !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.15s ease !important;
}

.topbar-nav-pill:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    text-decoration: none !important;
}

.topbar-nav-pill.active {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
    text-decoration: none !important;
}

.top-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.user-chip {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 12px 4px 6px !important;
    border-radius: 24px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.user-chip:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
}

.user-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar.is-emoji {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    border: 1px solid #f59e0b;
}

.avatar-emoji-mini {
    font-size: 20px;
    line-height: 1;
}

.avatar-img-mini {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-chip-text {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.25;
}

.user-chip-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
}

.user-chip-role {
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

article {
    min-height: calc(100vh - 72px);
    padding: 0 !important;
}

/* Dark mode overrides for Layout */
.page.dark-theme,
[data-theme="dark"] .page {
    background: #0d1117 !important;
    color: #e6edf3 !important;
}

.page.dark-theme .sidebar,
[data-theme="dark"] .sidebar {
    background: #11161f !important;
    border-left: 1px solid #1f2734 !important;
}

.page.dark-theme .top-row,
[data-theme="dark"] .top-row {
    background: rgba(17, 22, 31, 0.94) !important;
    border-bottom: 1px solid #202735 !important;
}

.page.dark-theme .topbar-nav-pill,
[data-theme="dark"] .topbar-nav-pill {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}

.page.dark-theme .topbar-nav-pill:hover,
[data-theme="dark"] .topbar-nav-pill:hover {
    background: #21262d !important;
    color: #f0f6fc !important;
}

.page.dark-theme .topbar-nav-pill.active,
[data-theme="dark"] .topbar-nav-pill.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.page.dark-theme .user-chip,
[data-theme="dark"] .user-chip {
    background: #161b22 !important;
    border-color: #30363d !important;
}

.page.dark-theme .user-chip:hover,
[data-theme="dark"] .user-chip:hover {
    background: #21262d !important;
    border-color: #484f58 !important;
}

.page.dark-theme .user-chip-name,
[data-theme="dark"] .user-chip-name {
    color: #f0f6fc !important;
}

.page.dark-theme .user-chip-role,
[data-theme="dark"] .user-chip-role {
    color: #8b949e !important;
}

/* Responsive Breakpoints */
@media (min-width: 641px) and (max-width: 900px) {
    .page {
        grid-template-columns: 78px minmax(0, 1fr) !important;
    }

    .top-context-nav {
        display: none !important;
    }

    .sidebar .sidebar-brand-row {
        justify-content: center !important;
        padding-inline: 12px !important;
    }

    .sidebar .app-brand div,
    .sidebar .nav-link span:not(.nav-icon) {
        display: none !important;
    }

    .sidebar .nav-scrollable {
        padding-inline: 10px !important;
    }

    .sidebar .nav-item .nav-link {
        justify-content: center !important;
        padding: 0 !important;
    }

    .sidebar .nav-icon {
        font-size: 20px !important;
    }
}

@media (max-width: 640.98px) {
    /* 1. Global Page Layout & Containers */
    .page {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        min-height: 100vh !important;
        padding-bottom: 78px !important;
    }

    .page > main {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    .page > main article.content {
        padding-inline: 12px !important;
        padding-top: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Universal Bottom Navigation Bar */
    .sidebar {
        position: fixed !important;
        inset: auto 0 0 !important;
        width: 100% !important;
        height: 66px !important;
        z-index: 9999 !important;
        display: block !important;
        background: #17312f !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.16) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .sidebar .sidebar-brand-row {
        display: none !important;
    }

    .sidebar .nav-scrollable {
        height: 66px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 6px !important;
    }

    .sidebar .flex-column {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        direction: rtl !important;
        gap: 4px !important;
    }

    .sidebar .nav-item {
        margin: 0 !important;
    }

    .sidebar .nav-item .nav-link {
        min-height: 56px !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 3px !important;
        padding: 4px 2px !important;
        direction: rtl !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .nav-label-mobile {
        display: block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .nav-label-desktop {
        display: none !important;
    }

    .sidebar .nav-item .nav-link.active {
        background: rgba(255, 255, 255, 0.14) !important;
        color: #ffffff !important;
    }

    .sidebar .nav-icon {
        font-size: 20px !important;
        margin-bottom: 2px !important;
    }

    /* 3. Top Row Navigation on Mobile */
    .top-row {
        height: 58px !important;
        padding-inline: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .top-context-nav {
        display: none !important;
    }

    .top-row-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .theme-selector-segmented {
        padding: 3px !important;
        gap: 2px !important;
    }

    .theme-segment-btn {
        padding: 5px 8px !important;
    }

    .theme-segment-btn .theme-label {
        display: none !important;
    }

    .user-chip {
        padding: 4px 8px 4px 6px !important;
        gap: 6px !important;
        max-width: 130px !important;
    }

    .user-chip-role {
        display: none !important;
    }

    .user-chip-name {
        font-size: 12px !important;
        max-width: 80px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 4. Tasks Page Mobile Architecture */
    .todo-shell {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
    }

    .todo-sidebar {
        position: static !important;
        height: auto !important;
        width: 100% !important;
        inset: auto !important;
        border: none !important;
        padding: 10px 12px 2px !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: 10 !important;
    }

    .todo-profile,
    .todo-profile-card {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 14px !important;
        margin: 0 0 10px 0 !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
        min-height: auto !important;
    }

    .todo-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 4px 2px 12px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .todo-nav::-webkit-scrollbar {
        display: none !important;
    }

    .todo-nav-item {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 38px !important;
        padding: 6px 14px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
        margin: 0 !important;
    }

    .todo-nav-item > span:not(.todo-nav-icon):not(.category-dot) {
        display: inline !important;
        width: auto !important;
        color: inherit !important;
        font-size: 12.5px !important;
        text-align: right !important;
    }

    .todo-nav-item.active {
        background: linear-gradient(135deg, #1b6ec2, #0d5bb5) !important;
        color: #ffffff !important;
        border-color: #1b6ec2 !important;
        box-shadow: 0 4px 12px rgba(27, 110, 194, 0.3) !important;
    }

    .todo-nav-item.active > span:not(.todo-nav-icon):not(.category-dot) {
        color: #ffffff !important;
    }

    .todo-nav-item b {
        display: inline-flex !important;
        background: rgba(0, 0, 0, 0.08) !important;
        padding: 2px 7px !important;
        border-radius: 99px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    .todo-nav-item.active b {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
    }

    .todo-main {
        padding: 4px 12px 84px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .todo-list-heading,
    .todo-custom-lists {
        display: none !important;
    }

    /* 5. Hero Banners Responsive - Clean and minimal on mobile */
    .dashboard-hero {
        display: none !important;
    }

    .tasks-hero-banner.hero-all,
    .tasks-hero-banner.hero-today,
    .tasks-hero-banner.hero-overdue,
    .tasks-hero-banner.hero-important,
    .tasks-hero-banner.hero-planned,
    .tasks-hero-banner.hero-category {
        display: none !important;
    }

    .tasks-hero-banner.hero-installments,
    .tasks-hero-banner.hero-meetings,
    .tasks-hero-banner.hero-cheques,
    .tasks-hero-banner.hero-birthdays,
    .tasks-hero-banner.hero-notes {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 4px 2px 10px !important;
        margin-bottom: 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        color: var(--ink, #1e293b) !important;
        border-radius: 0 !important;
    }

    .tasks-hero-banner.hero-installments::after,
    .tasks-hero-banner.hero-meetings::after,
    .tasks-hero-banner.hero-cheques::after,
    .tasks-hero-banner.hero-notes::after {
        display: none !important;
    }

    .tasks-hero-breadcrumbs,
    .tasks-hero-icon-box,
    .tasks-hero-date-tag,
    .tasks-hero-subtitle,
    .hero-stat-pill {
        display: none !important;
    }

    .tasks-hero-content {
        gap: 0 !important;
    }

    .tasks-hero-main-row {
        gap: 0 !important;
    }

    .tasks-hero-title {
        font-size: 17px !important;
        font-weight: 800 !important;
        color: var(--ink, #1e293b) !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    [data-theme="dark"] .tasks-hero-title,
    .dark-theme .tasks-hero-title {
        color: #f1f5f9 !important;
    }

    .tasks-hero-stats {
        width: auto !important;
        margin: 0 !important;
    }

    .hero-action-btn {
        width: auto !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }

    /* 6. Quick Task & Task Cards Mobile */
    .quick-task-card {
        padding: 12px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }

    .quick-task-text-input {
        font-size: 14.5px !important;
    }

    .quick-task-chips-row {
        gap: 6px !important;
        padding-top: 10px !important;
    }

    .quick-chip-item {
        font-size: 11.5px !important;
        padding: 4px 8px !important;
    }

    .task-card-item {
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }

    .task-card-content {
        padding: 12px 14px !important;
    }

    .task-card-title {
        font-size: 14px !important;
    }

    .task-card-badges {
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .badge-meta {
        font-size: 11px !important;
        padding: 2px 7px !important;
    }

    /* 7. Dashboard Responsive - Hide stat cards on mobile */
    .dashboard-stats-grid {
        display: none !important;
    }

    .dash-stat-card {
        padding: 9px 11px !important;
        border-radius: 14px !important;
        gap: 8px !important;
        min-height: auto !important;
        align-items: center !important;
    }

    .dash-stat-card.mobile-hide-zero {
        display: none !important;
    }

    .dash-stat-card .stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 17px !important;
        border-radius: 9px !important;
        flex-shrink: 0 !important;
    }

    .dash-stat-card .stat-content {
        gap: 1px !important;
        min-width: 0 !important;
    }

    .dash-stat-card .stat-number {
        font-size: 15px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    .dash-stat-card .stat-number small {
        font-size: 10px !important;
        font-weight: 600 !important;
    }

    .dash-stat-card .stat-label {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dash-stat-card .stat-arrow {
        display: none !important;
    }

    /* Hide empty cards on mobile to prevent clutter */
    .dash-card.empty-on-mobile {
        display: none !important;
    }

    /* Clean mobile quick add input (remove recurrence select) */
    .dash-quick-add-task .dash-recurrence-select {
        display: none !important;
    }

    .dash-quick-add-task {
        gap: 6px !important;
        padding: 6px 8px !important;
        margin-bottom: 10px !important;
    }

    .dash-quick-add-task input {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    .dash-quick-add-task .btn-quick-add {
        padding: 8px 14px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Task list items optimization on mobile */
    .dash-task-item {
        padding: 9px 8px !important;
        gap: 8px !important;
    }

    .dash-task-check {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    .dash-task-text {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
    }

    .dash-task-meta {
        gap: 4px !important;
    }

    .btn-star-task,
    .btn-delete-task {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }

    /* Mobile Quick Navigation Strip */
    .mobile-quick-nav-strip {
        display: block !important;
        margin-top: 14px !important;
        margin-bottom: 24px !important;
        padding: 14px 12px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 18px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    }

    .dark-theme .mobile-quick-nav-strip,
    [data-theme="dark"] .mobile-quick-nav-strip {
        background: rgba(22, 27, 34, 0.9) !important;
        border-color: #30363d !important;
    }

    .mqn-title {
        display: block !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #64748b !important;
        margin-bottom: 10px !important;
        text-align: right !important;
    }

    .dark-theme .mqn-title,
    [data-theme="dark"] .mqn-title {
        color: #8b949e !important;
    }

    .mqn-chips-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7px !important;
    }

    .mqn-chip-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 9px 4px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        color: #334155 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        transition: all 0.15s ease !important;
    }

    .dark-theme .mqn-chip-btn,
    [data-theme="dark"] .mqn-chip-btn {
        background: #161b22 !important;
        border-color: #30363d !important;
        color: #c9d1d9 !important;
    }

    .mqn-chip-btn:active {
        transform: scale(0.96) !important;
        background: rgba(79, 70, 229, 0.08) !important;
        color: #4f46e5 !important;
    }

    .mqn-icon {
        font-size: 18px !important;
    }

    .full-persian-date {
        font-size: 20px !important;
    }

    .day-of-week {
        font-size: 14px !important;
    }

    .dashboard-date-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .dashboard-occasion-pill {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .dashboard-columns-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .dash-card {
        border-radius: 16px !important;
    }

    .dash-card-header {
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .dash-card-body {
        padding: 10px 12px !important;
    }

    .dash-loan-card {
        margin: 6px 0 !important;
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .dash-loan-card .btn-pay-now {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 8. Installments, Loans & Meetings Mobile */
    .installments-metrics-grid,
    .meetings-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .metric-card {
        padding: 12px 14px !important;
        border-radius: 14px !important;
        gap: 10px !important;
    }

    .metric-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        border-radius: 10px !important;
    }

    .metric-val {
        font-size: 16px !important;
    }

    .metric-label {
        font-size: 11px !important;
    }

    .loans-grid,
    .meetings-grid,
    .notes-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .loan-card,
    .meeting-card {
        padding: 16px !important;
        border-radius: 16px !important;
        gap: 12px !important;
    }

    .note-card {
        padding: 0 !important;
        border-radius: 16px !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    .loan-amount-row {
        padding: 10px 12px !important;
    }

    .loan-actions-bar,
    .meeting-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .btn-loan-pay,
    .btn-pay-next,
    .meeting-btn-join {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* 9. Calendar Mobile Responsive */
    .calendar-filters-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .calendar-filters-group {
        display: flex !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }

    .calendar-filters-group::-webkit-scrollbar {
        display: none !important;
    }

    .calendar-filters-actions {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .btn-manage-holidays {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .calendar-month-grid {
        gap: 3px !important;
    }

    .calendar-weekday-cell {
        font-size: 10.5px !important;
        font-weight: 800 !important;
        padding: 6px 1px !important;
        text-align: center !important;
    }

    .cal-day-mobile {
        display: inline !important;
    }

    .cal-day-desktop {
        display: none !important;
    }

    .calendar-day-card {
        min-height: 56px !important;
        padding: 4px 3px !important;
        border-radius: 8px !important;
    }

    .day-card-number {
        font-size: 11.5px !important;
    }

    .today-tag-pill {
        font-size: 8.5px !important;
        padding: 1px 3px !important;
    }

    .holiday-pill .hol-name {
        display: none !important;
    }

    .calendar-chip {
        min-height: 18px !important;
        padding: 1px 4px !important;
        font-size: 9.5px !important;
        gap: 3px !important;
        border-radius: 4px !important;
    }

    .calendar-chip .chip-title {
        display: none !important;
    }

    .more-mobile {
        display: inline !important;
    }

    .more-desktop {
        display: none !important;
    }

    .more-chips-pill {
        font-size: 8.5px !important;
        padding: 1px 3px !important;
    }

    .calendar-chip .chip-emoji {
        font-size: 11px !important;
    }

    .calendar-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .calendar-list-card {
        flex-direction: column !important;
        border-radius: 14px !important;
    }

    .calendar-date {
        width: 100% !important;
        border-left: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 14px !important;
    }

    /* 10. Modals Mobile Responsive */
    .calendar-modal-card,
    .loan-modal-card,
    .note-edit-modal-card,
    .meeting-modal-card,
    .holiday-modal-card {
        width: 95% !important;
        max-width: 100% !important;
        margin: auto !important;
        border-radius: 18px !important;
    }

    .loan-modal-card.schedule-modal-card {
        max-width: 96% !important;
    }

    .loan-modal-body,
    .calendar-modal-body,
    .note-edit-body {
        padding: 16px 14px !important;
        max-height: 70vh !important;
    }

    .loan-form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .loan-form-group.col-6 {
        width: 100% !important;
    }

    .loan-modal-footer,
    .calendar-modal-footer {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .btn-submit-loan,
    .btn-cancel,
    .btn-save-note,
    .btn-confirm-close {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* 11. Dark Theme Overrides for Mobile */
    [data-theme="dark"] .sidebar,
    .dark-theme .sidebar {
        background: #0d1117 !important;
        border-top-color: #21262d !important;
    }

    [data-theme="dark"] .todo-profile,
    .dark-theme .todo-profile,
    [data-theme="dark"] .todo-profile-card,
    .dark-theme .todo-profile-card {
        background: #161b22 !important;
        border-color: #30363d !important;
    }

    [data-theme="dark"] .todo-nav-item,
    .dark-theme .todo-nav-item {
        background: #161b22 !important;
        border-color: #30363d !important;
        color: #c9d1d9 !important;
    }

    [data-theme="dark"] .todo-nav-item.active,
    .dark-theme .todo-nav-item.active {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        color: #ffffff !important;
        border-color: #3b82f6 !important;
    }
}


/* ============================================================
   ENHANCED TASK HERO BANNER & MODERN TASK CARDS SYSTEM
   ============================================================ */

/* 1. Hero Banner */
.tasks-hero-banner {
    border-radius: 20px;
    padding: 24px 28px;
    color: #ffffff;
    margin-bottom: 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.tasks-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.15), transparent 50%);
    pointer-events: none;
}

.tasks-hero-banner.hero-today {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #38bdf8 100%);
}

.tasks-hero-banner.hero-important {
    background: linear-gradient(135deg, #78350f 0%, #d97706 50%, #fbbf24 100%);
}

.tasks-hero-banner.hero-planned {
    background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #34d399 100%);
}

.tasks-hero-banner.hero-birthdays {
    background: linear-gradient(135deg, #831843 0%, #db2777 50%, #f472b6 100%);
}

.tasks-hero-banner.hero-all {
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #818cf8 100%);
}

.tasks-hero-banner.hero-meetings {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a855f7 100%);
}

.tasks-hero-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.tasks-hero-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
}

.hero-bc-link {
    color: #ffffff !important;
    text-decoration: none !important;
    opacity: 0.9;
    transition: opacity 0.15s;
}

.hero-bc-link:hover {
    opacity: 1;
    text-decoration: underline !important;
}

.tasks-hero-main-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tasks-hero-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    font-size: 26px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.tasks-hero-date-tag {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tasks-hero-title {
    font-size: 26px;
    font-weight: 800;
    margin: 2px 0 0;
    color: #ffffff;
    line-height: 1.2;
}

.tasks-hero-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.tasks-hero-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.hero-stat-pill {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 8px 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #ffffff;
}

.hero-progress-box {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 8px 16px;
    border-radius: 14px;
    min-width: 170px;
}

.hero-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #ffffff;
}

.hero-progress-bar {
    height: 7px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.hero-progress-fill {
    height: 100%;
    background: #ffffff;
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* 2. Sleek Floating Quick Task Card (Microsoft To-Do Style) */
.quick-task-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    margin-bottom: 22px;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-task-card.is-collapsed {
    padding: 10px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    margin-bottom: 18px;
}

.quick-task-card.is-collapsed .quick-task-input-row {
    margin-bottom: 0;
}

.quick-task-card.is-collapsed .quick-add-circle {
    width: 32px;
    height: 32px;
    font-size: 17px;
}

.quick-task-card.is-collapsed .quick-task-text-input {
    font-size: 14.5px;
}

.quick-task-card.is-expanded {
    padding: 14px 18px;
    border-color: #3b82f6;
    box-shadow: 0 10px 32px rgba(59, 130, 246, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.quick-task-card:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 8px 28px rgba(0, 0, 0, 0.06);
}

.quick-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.quick-close-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

[data-theme="dark"] .quick-close-btn,
.dark-theme .quick-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

[data-theme="dark"] .quick-close-btn:hover,
.dark-theme .quick-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.quick-submit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.quick-cancel-action-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-cancel-action-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

[data-theme="dark"] .quick-cancel-action-btn,
.dark-theme .quick-cancel-action-btn {
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .quick-cancel-action-btn:hover,
.dark-theme .quick-cancel-action-btn:hover {
    background: #1e293b;
    color: #f1f5f9;
}

.quick-task-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.quick-add-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    border: none;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.quick-add-circle:hover {
    transform: scale(1.08);
    background: #1d4ed8;
}

.quick-task-text-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
}

.quick-task-text-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.quick-task-chips-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.quick-chip-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    color: #475569;
}

.chip-icon {
    font-size: 14px;
}

.chip-time-input {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    outline: none;
}

.chip-category-select {
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    outline: none;
    cursor: pointer;
}

.quick-star-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-star-btn:hover {
    border-color: #f59e0b;
    color: #d97706;
}

.quick-star-btn.is-starred {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #b45309;
}

.quick-submit-btn {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-submit-btn:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.quick-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 3. Filter Bar */
.tasks-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tasks-filter-pills {
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-filter-btn:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}

.view-filter-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.view-filter-btn .count-tag {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.08);
}

.view-filter-btn.active .count-tag {
    background: rgba(255, 255, 255, 0.25);
}

.tool-btn-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tool-btn-sort:hover {
    background: #f8fafc;
    color: #1e293b;
}

/* 4. Task Cards System */
.task-group-heading-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
}

.task-group-badge-title {
    font-size: 14px;
    font-weight: 800;
    color: #334155;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 12px;
}

.task-group-count-tag {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.task-card-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.task-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.task-card-accent-bar {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
}

.card-type-birthday .task-card-accent-bar {
    background: linear-gradient(180deg, #ec4899, #f43f5e);
}

.card-type-meeting .task-card-accent-bar {
    background: linear-gradient(180deg, #8b5cf6, #6366f1);
}

.card-type-loan .task-card-accent-bar {
    background: linear-gradient(180deg, #10b981, #059669);
}

.card-type-important .task-card-accent-bar {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}

.card-type-regular .task-card-accent-bar {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.task-card-content {
    padding: 14px 20px 14px 16px;
}

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

.task-custom-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
    padding: 0;
}

.task-custom-checkbox:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.task-custom-checkbox.checked {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.checkbox-tick {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.task-card-title-group {
    flex: 1;
    min-width: 0;
}

.task-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    display: block;
    word-break: break-word;
}

.task-card-item.is-completed .task-card-title {
    text-decoration: line-through;
    color: #94a3b8;
}

.task-card-item.is-completed {
    background: #fafafa;
    opacity: 0.85;
}

.task-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.task-card-today-btn {
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.task-card-today-btn:hover {
    color: #ea580c;
    background: #fff7ed;
    border-color: #fdba74;
}

.task-card-today-btn.is-today {
    background: #fff7ed;
    border-color: #f97316;
    color: #c2410c;
}

[data-theme="dark"] .task-card-today-btn,
.dark-theme .task-card-today-btn {
    background: #21262d;
    border-color: #30363d;
    color: #cbd5e1;
}

[data-theme="dark"] .task-card-today-btn:hover,
.dark-theme .task-card-today-btn:hover {
    background: #3c2415;
    border-color: #ea580c;
    color: #fb923c;
}

[data-theme="dark"] .task-card-today-btn.is-today,
.dark-theme .task-card-today-btn.is-today {
    background: #431407;
    border-color: #f97316;
    color: #fdba74;
}

.badge-add-today {
    background: #fff7ed;
    color: #c2410c;
    border: 1px dashed #fb923c;
    cursor: pointer;
    transition: all 0.15s ease;
}

.badge-add-today:hover {
    background: #ffedd5;
    border-style: solid;
    border-color: #ea580c;
    transform: translateY(-1px);
}

[data-theme="dark"] .badge-add-today,
.dark-theme .badge-add-today {
    background: #431407;
    color: #fdba74;
    border-color: #ea580c;
}

[data-theme="dark"] .badge-add-today:hover,
.dark-theme .badge-add-today:hover {
    background: #7c2d12;
    border-color: #f97316;
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.btn-field-quick-today {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-field-quick-today:hover {
    background: #ffedd5;
    border-color: #ea580c;
}

[data-theme="dark"] .btn-field-quick-today,
.dark-theme .btn-field-quick-today {
    background: #431407;
    color: #fdba74;
    border-color: #ea580c;
}

.task-card-star-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;
}

.task-card-star-btn:hover {
    color: #f59e0b;
    background: #fef3c7;
}

.task-card-star-btn.starred {
    color: #f59e0b;
}

.task-card-del-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;
}

.task-card-del-btn:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* 5. Rich Meta Badges Bar */
.task-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-right: 36px;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.badge-birthday {
    background: #fdf2f8;
    color: #db2777;
    border: 1px solid #fbcfe8;
}

.badge-meeting {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.badge-loan {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.badge-important {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-today {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.badge-tomorrow {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.badge-date {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.badge-time {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.badge-location {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.badge-category {
    border: 1px solid;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

/* 6. Empty State */
.task-empty-card {
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 20px;
    padding: 48px 24px;
    text-align: center;
    margin: 24px 0;
}

.task-empty-emoji {
    font-size: 48px;
    margin-bottom: 14px;
    display: block;
}

.task-empty-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 6px;
}

.task-empty-card p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* ============================================================
   DARK MODE OVERRIDES FOR NEW TASK SYSTEM
   ============================================================ */
[data-theme="dark"] .quick-task-card,
.dark-theme .quick-task-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .quick-task-text-input,
.dark-theme .quick-task-text-input {
    color: #f0f6fc;
}

[data-theme="dark"] .quick-task-chips-row,
.dark-theme .quick-task-chips-row {
    border-color: #21262d;
}

[data-theme="dark"] .quick-chip-item,
.dark-theme .quick-chip-item,
[data-theme="dark"] .quick-star-btn,
.dark-theme .quick-star-btn {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .chip-time-input,
.dark-theme .chip-time-input,
[data-theme="dark"] .chip-category-select,
.dark-theme .chip-category-select {
    color: #f0f6fc;
}

[data-theme="dark"] .view-filter-btn,
.dark-theme .view-filter-btn,
[data-theme="dark"] .tool-btn-sort,
.dark-theme .tool-btn-sort {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

[data-theme="dark"] .view-filter-btn.active,
.dark-theme .view-filter-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

[data-theme="dark"] .task-group-badge-title,
.dark-theme .task-group-badge-title {
    background: #21262d;
    color: #c9d1d9;
}

[data-theme="dark"] .task-card-item,
.dark-theme .task-card-item {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .task-card-item:hover,
.dark-theme .task-card-item:hover {
    background: #1c2128;
    border-color: #484f58;
}

[data-theme="dark"] .task-card-title,
.dark-theme .task-card-title {
    color: #f0f6fc;
}

[data-theme="dark"] .task-card-item.is-completed,
.dark-theme .task-card-item.is-completed {
    background: #0d1117;
    opacity: 0.75;
}

[data-theme="dark"] .task-empty-card,
.dark-theme .task-empty-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .task-empty-card h3,
.dark-theme .task-empty-card h3 {
    color: #f0f6fc;
}

[data-theme="dark"] .badge-birthday,
.dark-theme .badge-birthday {
    background: rgba(236, 72, 153, 0.15);
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

[data-theme="dark"] .badge-meeting,
.dark-theme .badge-meeting {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c084fc;
}

[data-theme="dark"] .badge-loan,
.dark-theme .badge-loan {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

[data-theme="dark"] .badge-important,
.dark-theme .badge-important {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

[data-theme="dark"] .badge-today,
.dark-theme .badge-today {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

[data-theme="dark"] .badge-date,
.dark-theme .badge-date,
[data-theme="dark"] .badge-time,
.dark-theme .badge-time,
[data-theme="dark"] .badge-tomorrow,
.dark-theme .badge-tomorrow,
[data-theme="dark"] .badge-location,
.dark-theme .badge-location {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}

/* --------------------------------------------------------------------------
   NEW VIBRANT HERO BANNERS (INSTALLMENTS, NOTES, CALENDAR)
   -------------------------------------------------------------------------- */
.tasks-hero-banner.hero-installments {
    background: linear-gradient(135deg, #064e3b 0%, #047857 45%, #10b981 100%);
}

.tasks-hero-banner.hero-notes {
    background: linear-gradient(135deg, #7c2d12 0%, #d97706 48%, #f59e0b 100%);
}

.tasks-hero-banner.hero-calendar {
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 45%, #6366f1 100%);
}

.hero-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.hero-action-btn .btn-plus {
    font-size: 16px;
    font-weight: 800;
}

.hero-action-btn.hero-btn-emerald {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-action-btn.hero-btn-emerald:hover {
    background: #ffffff;
    color: #047857;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.hero-action-btn.hero-btn-amber {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-action-btn.hero-btn-amber:hover {
    background: #ffffff;
    color: #b45309;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* Calendar Hero Controls */
.calendar-hero-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.calendar-hero-nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cal-nav-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.cal-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.cal-nav-btn.today {
    background: rgba(255, 255, 255, 0.25);
    font-weight: 800;
}

.cal-nav-btn.today:hover {
    background: #ffffff;
    color: #4338ca;
}

.cal-hero-datepicker {
    margin-inline-start: 4px;
}

.cal-hero-datepicker input {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
}

.cal-hero-datepicker input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

.calendar-hero-views {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cal-view-pill {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.88);
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cal-view-pill:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.cal-view-pill.active {
    background: #ffffff;
    color: #312e81;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-weight: 800;
}

/* Dark Mode Overrides for Hero Banners */
[data-theme="dark"] .tasks-hero-banner.hero-installments,
.dark-theme .tasks-hero-banner.hero-installments {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #047857 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tasks-hero-banner.hero-notes,
.dark-theme .tasks-hero-banner.hero-notes {
    background: linear-gradient(135deg, #451a03 0%, #7c2d12 50%, #9a3412 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tasks-hero-banner.hero-calendar,
.dark-theme .tasks-hero-banner.hero-calendar {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .cal-view-pill.active,
.dark-theme .cal-view-pill.active {
    background: #38bdf8;
    color: #0f172a;
}
/* Category & Meetings Hero Styles */
.tasks-hero-banner {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}

.tasks-hero-banner.hero-category {
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #6366f1 100%);
    box-shadow: 0 12px 32px rgba(67, 56, 202, 0.25);
}

.tasks-hero-banner.hero-meetings {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a855f7 100%);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.25);
}

.hero-action-btn.hero-btn-purple {
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-action-btn.hero-btn-purple:hover {
    background: #ffffff;
    color: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .tasks-hero-banner.hero-category,
.dark-theme .tasks-hero-banner.hero-category {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
}

[data-theme="dark"] .tasks-hero-banner.hero-meetings,
.dark-theme .tasks-hero-banner.hero-meetings {
    background: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #6d28d9 100%);
}
/* Dashboard Profile Card in Hero */
.dashboard-profile-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px 6px 12px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 16px;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.dashboard-profile-card:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.dashboard-profile-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.dashboard-greeting-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-user-name {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.dashboard-hero-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-tasks-shortcut-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.dashboard-tasks-shortcut-btn:hover {
    background: #ffffff;
    color: #2563eb !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .dashboard-profile-card,
.dark-theme .dashboard-profile-card {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .dashboard-profile-card:hover,
.dark-theme .dashboard-profile-card:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   UNIFIED FULL-WIDTH SCREEN & CONTAINER LAYOUT
   Standardizes Today, Meetings, Installments, Calendar, Notes,
   Categories, and Dashboard to the exact same responsive width.
   ============================================================ */
.todo-main > .meetings-shell,
.todo-main > .installments-shell,
.todo-main > .birthdays-shell,
.todo-main > .calendar-board,
.todo-main > .notes-page-shell,
.todo-main .meetings-shell,
.todo-main .installments-shell,
.todo-main .birthdays-shell,
.todo-main .calendar-board,
.todo-main .notes-page-shell,
.todo-main .calendar-embedded,
.todo-main .notes-embedded {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure all hero banners fill the container consistently */
.todo-main .tasks-hero-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Modals unified maximum width */
.calendar-modal-card,
.loan-modal-card,
.note-edit-modal-card,
.meeting-modal-card,
.holiday-modal-card {
    max-width: min(580px, calc(100vw - 20px)) !important;
    width: 100% !important;
}

.loan-modal-card.schedule-modal-card {
    max-width: min(720px, calc(100vw - 20px)) !important;
}

/* ============================================================
   NOTIFICATION CENTER & ALERTS SYSTEM (سیستم اعلان‌ها و یادآوری‌ها)
   ============================================================ */
.notification-center-root {
    position: relative;
    display: inline-flex;
    align-items: center;
    direction: rtl;
}

/* Bell Trigger Button */
.notif-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 19px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: all 0.22s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.notif-bell-btn * {
    pointer-events: none;
}

.notif-bell-btn:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.notif-bell-btn.is-active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
}

/* Urgent Pulse Animation */
@keyframes bell-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
    }
}

.notif-bell-btn.pulse-urgent {
    animation: bell-pulse 2s infinite;
    border-color: #fca5a5;
}

/* Unread Badge */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
    animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badge-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Dropdown Backdrop */
.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150000;
    background: rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(2px);
}

/* Dropdown Card */
.notif-dropdown-card {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 410px;
    max-width: 92vw;
    max-height: calc(100vh - 90px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 150005;
    overflow: hidden;
    animation: notif-slide-down 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

/* Sidebar Notification Dropdown: Break out of sidebar overflow completely */
.todo-sidebar .notif-dropdown-card {
    position: fixed !important;
    top: 68px !important;
    right: 14px !important;
    left: auto !important;
    width: 410px !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100vh - 84px) !important;
    z-index: 150005 !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

.todo-sidebar .notif-backdrop {
    z-index: 10040 !important;
}

@keyframes notif-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Header */
.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}

.notif-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-header-title .header-icon {
    font-size: 18px;
}

.notif-header-title .header-text {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
}

.unread-tag {
    background: #fee2e2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.notif-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-mark-all-read {
    background: transparent;
    border: 0;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.btn-mark-all-read:hover {
    background: #eff6ff;
}

.notif-close-btn {
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notif-close-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Permission Banner */
.notif-permission-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
    border-bottom: 1px solid #bae6fd;
    font-size: 12px;
    color: #0369a1;
}

.btn-perm-enable {
    background: #0284c7;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.btn-perm-enable:hover {
    background: #0369a1;
}

/* Filter Tabs */
.notif-tabs-bar {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.notif-tabs-bar::-webkit-scrollbar {
    display: none;
}

.notif-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.notif-tab:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.notif-tab.active {
    background: #3b82f6;
    color: #ffffff;
}

.notif-tab .tab-count {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
}

.notif-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Items List */
.notif-items-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notif-item-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.18s ease;
}

.notif-item-card:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.notif-item-card.is-unread {
    background: #f0f7ff;
    border-color: #dbeafe;
}

.notif-item-card.priority-urgent {
    border-right: 4px solid #ef4444;
}

.notif-item-card.priority-high {
    border-right: 4px solid #f59e0b;
}

.notif-item-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.notif-item-content {
    flex: 1;
    min-width: 0;
}

.notif-item-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.notif-item-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
}

.notif-item-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 6px 0;
    line-height: 1.5;
}

.notif-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
}

.notif-tag {
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
}

.notif-item-side-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.notif-quick-read-btn {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.notif-quick-read-btn:hover {
    background: #dcfce7;
    border-color: #22c55e;
}

.notif-action-link {
    color: #2563eb;
    font-weight: 600;
}

.notif-dismiss-btn {
    background: transparent;
    border: 0;
    color: #cbd5e1;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.notif-dismiss-btn:hover {
    color: #ef4444;
}

/* Empty State */
.notif-empty-box {
    padding: 36px 20px;
    text-align: center;
    color: #64748b;
}

.notif-empty-box .empty-emoji {
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
}

.notif-empty-box strong {
    display: block;
    font-size: 14px;
    color: #334155;
    margin-bottom: 4px;
}

.notif-empty-box p {
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

/* Dropdown Footer */
.notif-dropdown-footer {
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    background: #fafafa;
}

.btn-clear-all {
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-clear-all:hover {
    color: #ef4444;
}

/* Modal Footer Mark as Read Button */
.btn-notif-mark-read {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #86efac;
    padding: 9px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-notif-mark-read:hover {
    background: #dcfce7;
    border-color: #22c55e;
}

/* Floating Live Toast Card - Guaranteed Full Visibility & Centered at Viewport Top */
.notif-toast-card {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1.5px solid #3b82f6 !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    max-width: 490px !important;
    width: calc(100vw - 28px) !important;
    animation: toast-slide-down-center 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    direction: rtl !important;
    box-sizing: border-box !important;
}

@keyframes toast-slide-down-center {
    from {
        opacity: 0;
        transform: translate(-50%, -24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.toast-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.toast-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
}

.toast-close-btn {
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 15px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.toast-close-btn:hover {
    color: #ef4444;
}

.toast-desc {
    font-size: 12.5px;
    color: #475569;
    margin: 0 0 10px 0;
    line-height: 1.5;
    word-break: break-word;
}

.toast-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-toast-view {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-toast-view:hover {
    background: #dbeafe;
    border-color: #3b82f6;
}

.btn-toast-mark-read {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-toast-mark-read:hover {
    background: #dcfce7;
    border-color: #22c55e;
}

.btn-toast-dismiss {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-toast-dismiss:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Sidebar Top Bar layout in Tasks */
.todo-sidebar-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.todo-sidebar-top-bar .todo-back-dashboard-btn {
    flex: 1;
    margin-bottom: 0 !important;
}

/* ============================================================
   NOTIFICATION CENTER - DARK MODE STYLING
   ============================================================ */
[data-theme="dark"] .notif-bell-btn,
.dark-theme .notif-bell-btn {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .notif-bell-btn:hover,
.dark-theme .notif-bell-btn:hover {
    background: #21262d;
    border-color: #484f58;
    color: #ffffff;
}

[data-theme="dark"] .notif-bell-btn.is-active,
.dark-theme .notif-bell-btn.is-active {
    background: #1e293b;
    border-color: #3b82f6;
    color: #60a5fa;
}

[data-theme="dark"] .notif-dropdown-card,
.dark-theme .notif-dropdown-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .notif-dropdown-header,
.dark-theme .notif-dropdown-header {
    background: #1c2128;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .notif-header-title .header-text,
.dark-theme .notif-header-title .header-text {
    color: #f0f6fc;
}

[data-theme="dark"] .notif-tabs-bar,
.dark-theme .notif-tabs-bar {
    background: #161b22;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .notif-tab,
.dark-theme .notif-tab {
    color: #8b949e;
}

[data-theme="dark"] .notif-tab:hover,
.dark-theme .notif-tab:hover {
    background: #21262d;
    color: #f0f6fc;
}

[data-theme="dark"] .notif-item-card,
.dark-theme .notif-item-card {
    background: #161b22;
    border-color: #21262d;
}

[data-theme="dark"] .notif-item-card:hover,
.dark-theme .notif-item-card:hover {
    background: #1c2128;
    border-color: #30363d;
}

[data-theme="dark"] .notif-item-card.is-unread,
.dark-theme .notif-item-card.is-unread {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .notif-item-title,
.dark-theme .notif-item-title {
    color: #f0f6fc;
}

[data-theme="dark"] .notif-item-desc,
.dark-theme .notif-item-desc {
    color: #8b949e;
}

[data-theme="dark"] .notif-dropdown-footer,
.dark-theme .notif-dropdown-footer {
    background: #1c2128;
    border-top-color: #30363d;
}

[data-theme="dark"] .notif-toast-card,
.dark-theme .notif-toast-card {
    background: #161b22 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .toast-title,
.dark-theme .toast-title {
    color: #f0f6fc !important;
}

[data-theme="dark"] .toast-desc,
.dark-theme .toast-desc {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .btn-toast-view,
.dark-theme .btn-toast-view {
    background: #1e3a8a !important;
    color: #bfdbfe !important;
    border-color: #2563eb !important;
}

[data-theme="dark"] .btn-toast-mark-read,
.dark-theme .btn-toast-mark-read {
    background: #064e3b !important;
    color: #a7f3d0 !important;
    border-color: #059669 !important;
}

[data-theme="dark"] .btn-toast-dismiss,
.dark-theme .btn-toast-dismiss {
    background: #21262d !important;
    color: #94a3b8 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .btn-notif-mark-read,
.dark-theme .btn-notif-mark-read {
    background: #064e3b !important;
    color: #a7f3d0 !important;
    border-color: #059669 !important;
}

[data-theme="dark"] .notif-quick-read-btn,
.dark-theme .notif-quick-read-btn {
    background: #064e3b !important;
    color: #a7f3d0 !important;
    border-color: #059669 !important;
}

[data-theme="dark"] .todo-sidebar .notif-dropdown-card,
.dark-theme .todo-sidebar .notif-dropdown-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .notif-backdrop,
.dark-theme .notif-backdrop {
    background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
    .notification-center-root {
        position: static !important;
    }

    .notif-backdrop,
    .todo-sidebar .notif-backdrop {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(15, 23, 42, 0.55) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 150000 !important;
    }

    .notif-dropdown-card,
    .todo-sidebar .notif-dropdown-card {
        position: fixed !important;
        top: 60px !important;
        bottom: auto !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 72px) !important;
        border-radius: 20px !important;
        z-index: 150005 !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 16px 48px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
        animation: notifSlideDownMobile 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow: hidden !important;
    }

    .notif-dropdown-header {
        flex-shrink: 0 !important;
        padding: 14px 16px !important;
    }

    .notif-tabs-bar {
        flex-shrink: 0 !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .notif-items-list {
        flex: 1 1 auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 10px !important;
    }

    .notif-dropdown-footer {
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
    }
}

@keyframes notifSlideDownMobile {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   MODERN CALENDAR DESIGN & HOLIDAY HIGHLIGHTS (تقویم هوشمند و روزهای تعطیل)
   ============================================================ */
/* Toolbar Manage Holidays Button */
.btn-manage-holidays {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border: 1px solid #fecdd3;
    border-radius: 12px;
    padding: 7px 14px;
    color: #e11d48;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08);
}

.btn-manage-holidays:hover {
    background: #ffe4e6;
    border-color: #fda4af;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.16);
}

.hol-btn-icon {
    font-size: 14px;
}

.hol-count-tag {
    background: #e11d48;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 8px;
}

/* Month Wrapper */
.calendar-month-wrapper {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.calendar-weekday-cell {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: #475569;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.calendar-weekday-cell.is-friday {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

.cal-day-mobile {
    display: none;
}

.cal-day-desktop {
    display: inline;
}

.more-mobile {
    display: none;
}

.more-desktop {
    display: inline;
}

/* Month Grid */
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

/* Day Cards */
.calendar-day-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    min-height: 120px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.calendar-day-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.calendar-day-card.outside {
    opacity: 0.38;
    background: #f8fafc;
}

.calendar-day-card.selected {
    box-shadow: 0 0 0 2px #3b82f6, 0 8px 24px rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
}

/* Today's Cell */
.calendar-day-card.is-today {
    box-shadow: 0 0 0 2px #6366f1, 0 8px 24px rgba(99, 102, 241, 0.15);
    border-color: #818cf8;
}

.calendar-day-card.is-today .day-card-number {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff !important;
    border-radius: 8px;
    padding: 2px 7px;
}

.today-tag-pill {
    background: #e0e7ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
}

/* ============================================================
   RED HOLIDAY STYLING (روزهای تعطیل - قرمز در تقویم)
   ============================================================ */
.calendar-day-card.is-holiday {
    background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%) !important;
    border-top: 3.5px solid #ef4444 !important;
    border-color: #fecdd3 !important;
}

.calendar-day-card.is-holiday:hover {
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.14) !important;
    border-color: #fda4af !important;
}

.calendar-day-card.is-holiday .day-card-number {
    color: #e11d48 !important;
    font-weight: 800;
}

.holiday-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.holiday-pill .hol-dot {
    color: #ef4444;
    font-size: 9px;
}

.holiday-pill .hol-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Day Card Header */
.day-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-height: 24px;
}

.day-card-number {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.day-card-tags {
    display: flex;
    align-items: center;
    gap: 3px;
    overflow: hidden;
}

/* Event Chips in Day Cards */
.day-card-chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
}

.calendar-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.calendar-chip:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.chip-emoji {
    font-size: 12px;
    flex-shrink: 0;
}

.chip-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chip Themed Variants */
.calendar-chip.chip-meeting {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.calendar-chip.chip-birthday {
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid #fbcfe8;
}

.calendar-chip.chip-installment {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.calendar-chip.chip-task {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.more-chips-pill {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
}

/* Week/Day List View Enhancements */
.calendar-list-card.is-holiday .calendar-date {
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%) !important;
    border-bottom: 3px solid #ef4444 !important;
}

.calendar-list-card.is-holiday .calendar-date strong {
    color: #e11d48 !important;
}

/* ============================================================
   DAY DETAIL & HOLIDAY ACTION MODAL
   ============================================================ */
.day-detail-modal {
    max-width: 580px !important;
}

.calendar-modal-header.header-day {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #ffffff;
}

.calendar-modal-header.header-holiday {
    background: linear-gradient(135deg, #9f1239 0%, #e11d48 100%);
    color: #ffffff;
}

.calendar-modal-header.header-holiday-manager {
    background: linear-gradient(135deg, #881337 0%, #be123c 100%);
    color: #ffffff;
}

.day-detail-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.day-detail-date .day-detail-weekday {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.day-detail-date .day-detail-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 2px 0 0;
}

.day-holiday-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 14px;
    padding: 12px 16px;
    color: #9f1239;
}

.day-holiday-banner .hol-badge-icon {
    font-size: 24px;
}

.day-holiday-banner strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.day-holiday-banner small {
    font-size: 12px;
    color: #be123c;
}

/* Holiday Toggle Actions */
.day-holiday-action-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.holiday-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}

.btn-remove-holiday {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-remove-holiday:hover {
    background: #dc2626;
    color: #ffffff;
}

.holiday-add-box .box-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.holiday-input-row {
    display: flex;
    gap: 8px;
}

.holiday-text-input {
    flex: 1;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    padding: 8px 12px;
    font-size: 13px;
}

.btn-set-holiday {
    background: #e11d48;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease;
}

.btn-set-holiday:hover {
    background: #be123c;
}

/* Day Items List */
.day-items-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.day-empty-msg {
    padding: 20px;
    text-align: center;
    background: #f8fafc;
    border-radius: 12px;
    color: #64748b;
    font-size: 13px;
}

.day-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.day-event-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.day-event-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.event-row-icon {
    font-size: 18px;
}

.event-row-details {
    flex: 1;
    min-width: 0;
}

.event-row-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.event-row-sub {
    font-size: 11.5px;
    color: #64748b;
}

.event-row-arrow {
    color: #94a3b8;
    font-size: 14px;
}

/* ============================================================
   HOLIDAY MANAGER MODAL
   ============================================================ */
.holiday-manager-modal {
    max-width: 620px !important;
}

.holiday-manager-intro h3 {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.holiday-manager-intro p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px 0;
}

.holiday-form-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
}

.holiday-form-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.holiday-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.holiday-field .field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
}

.btn-submit-holiday {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: all 0.18s ease;
}

.btn-submit-holiday:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25);
}

.btn-submit-holiday:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Custom Holidays List in Manager */
.custom-holidays-list-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.holidays-scroll-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.holiday-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #fecdd3;
    border-right: 4px solid #ef4444;
}

.hol-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hol-badge-dot {
    color: #ef4444;
    font-size: 10px;
}

.hol-date-tag {
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 6px;
}

.btn-delete-holiday {
    background: transparent;
    border: 0;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.btn-delete-holiday:hover {
    background: #fee2e2;
}

.no-custom-holidays {
    padding: 16px;
    text-align: center;
    background: #f8fafc;
    border-radius: 12px;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.5;
}

/* ============================================================
   DARK MODE CALENDAR STYLING
   ============================================================ */
[data-theme="dark"] .calendar-month-wrapper,
.dark-theme .calendar-month-wrapper {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .calendar-weekday-cell,
.dark-theme .calendar-weekday-cell {
    background: #1c2128;
    border-color: #30363d;
    color: #8b949e;
}

[data-theme="dark"] .calendar-weekday-cell.is-friday,
.dark-theme .calendar-weekday-cell.is-friday {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

[data-theme="dark"] .calendar-day-card,
.dark-theme .calendar-day-card {
    background: #11161f;
    border-color: #30363d;
}

[data-theme="dark"] .calendar-day-card:hover,
.dark-theme .calendar-day-card:hover {
    background: #18202d;
    border-color: #484f58;
}

[data-theme="dark"] .calendar-day-card.outside,
.dark-theme .calendar-day-card.outside {
    background: #0d1117;
    opacity: 0.35;
}

[data-theme="dark"] .calendar-day-card .day-card-number,
.dark-theme .calendar-day-card .day-card-number {
    color: #e6edf3;
}

/* Dark mode Red Holiday */
[data-theme="dark"] .calendar-day-card.is-holiday,
.dark-theme .calendar-day-card.is-holiday {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.15) 0%, #11161f 100%) !important;
    border-top: 3.5px solid #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .calendar-day-card.is-holiday .day-card-number,
.dark-theme .calendar-day-card.is-holiday .day-card-number {
    color: #f87171 !important;
}

[data-theme="dark"] .holiday-pill,
.dark-theme .holiday-pill {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .btn-manage-holidays,
.dark-theme .btn-manage-holidays {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

[data-theme="dark"] .btn-manage-holidays:hover,
.dark-theme .btn-manage-holidays:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

[data-theme="dark"] .holiday-form-card,
.dark-theme .holiday-form-card {
    background: #1c2128;
    border-color: #30363d;
}

[data-theme="dark"] .holiday-item-row,
.dark-theme .holiday-item-row {
    background: #161b22;
    border-color: rgba(239, 68, 68, 0.35);
}

[data-theme="dark"] .day-holiday-action-box,
.dark-theme .day-holiday-action-box {
    background: #1c2128;
    border-color: #30363d;
}

[data-theme="dark"] .day-event-row,
.dark-theme .day-event-row {
    background: #161b22;
    border-color: #30363d;
}




/* ============================================================
   USER LOGOUT & SESSION MANAGEMENT STYLES (خروج از حساب کاربری)
   ============================================================ */

/* 1. Top Bar Logout Button (MainLayout) */
.btn-topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 999px;
    padding: 6px 14px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08);
}

.btn-topbar-logout:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
}

.btn-topbar-logout .logout-icon {
    font-size: 15px;
    line-height: 1;
}

[data-theme="dark"] .btn-topbar-logout,
.dark-theme .btn-topbar-logout {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

[data-theme="dark"] .btn-topbar-logout:hover,
.dark-theme .btn-topbar-logout:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* 2. Tasks Page Top Actions & Logout Button */
.todo-sidebar-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo-topbar-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 12px;
    padding: 6px 12px;
    color: #dc2626;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.todo-topbar-logout-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .todo-topbar-logout-btn,
.dark-theme .todo-topbar-logout-btn {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

[data-theme="dark"] .todo-topbar-logout-btn:hover,
.dark-theme .todo-topbar-logout-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* 3. Tasks Nav Items & Sidebar Footer Logout */
.todo-nav-logout-btn {
    border: 1px dashed rgba(239, 68, 68, 0.35) !important;
    background: rgba(239, 68, 68, 0.04) !important;
    color: #dc2626 !important;
    transition: all 0.2s ease !important;
}

.todo-nav-logout-btn:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

.todo-nav-logout-btn:hover .todo-nav-icon {
    transform: scale(1.15);
}

.todo-sidebar-footer {
    margin-top: 20px;
    padding: 12px 6px 6px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.todo-sidebar-logout-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.todo-sidebar-logout-card:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.24);
}

[data-theme="dark"] .todo-sidebar-footer,
.dark-theme .todo-sidebar-footer {
    border-top-color: #30363d;
}

[data-theme="dark"] .todo-sidebar-logout-card,
.dark-theme .todo-sidebar-logout-card {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .todo-sidebar-logout-card:hover,
.dark-theme .todo-sidebar-logout-card:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* 4. Desktop Sidebar NavMenu Logout Item */
.nav-item-logout-desktop {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.nav-link-logout {
    background: transparent !important;
    border: none !important;
    color: #fca5a5 !important;
    width: 100% !important;
    text-align: right !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

.nav-link-logout:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #ffffff !important;
    transform: translateX(-3px);
}

/* 5. Profile Security & Session Management Card */
.profile-security-card {
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.4) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
    margin-top: 24px;
}

.profile-logout-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 16px;
    margin-top: 12px;
}

.logout-info-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.logout-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.logout-info-text strong {
    display: block;
    color: #1e293b;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px;
}

.logout-info-text p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.btn-profile-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-profile-logout:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
}

[data-theme="dark"] .profile-security-card,
.dark-theme .profile-security-card {
    background: #161b22 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .profile-logout-content,
.dark-theme .profile-logout-content {
    background: #1c2128;
    border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .logout-info-text strong,
.dark-theme .logout-info-text strong {
    color: #f0f6fc;
}

[data-theme="dark"] .logout-info-text p,
.dark-theme .logout-info-text p {
    color: #8b949e;
}

/* Security Sessions & Multi-Device Alert Styles */
.security-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.security-status-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.security-status-badge.single-device {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.security-status-badge.has-multiple-devices {
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    animation: pulse 2s infinite;
}

.security-devices-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.security-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
}

.security-banner.info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

.security-banner.warning {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.sec-banner-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.sec-banner-text strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 4px;
}

.sec-banner-text p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    opacity: 0.92;
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.session-item-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.session-item-card.is-current-device {
    border-right: 4px solid #10b981;
    background: #fafcfb;
}

.session-item-card.is-other-device {
    border-right: 4px solid #f59e0b;
    background: #fffdfa;
}

.session-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.session-details {
    flex: 1;
    min-width: 0;
}

.session-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.session-device-name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.session-tag {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.session-tag.current {
    background: #d1fae5;
    color: #065f46;
}

.session-tag.other {
    background: #fef3c7;
    color: #92400e;
}

.session-meta-line {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #64748b;
}

.session-meta-line code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    color: #334155;
    font-size: 11.5px;
}

.btn-revoke-single {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-revoke-single:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-1px);
}

.security-actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.btn-revoke-all-others {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
    transition: all 0.2s ease;
}

.btn-revoke-all-others:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35);
}

.btn-simulate-device {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: #334155;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-simulate-device:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}

.profile-divider {
    border: none;
    border-top: 1px dashed #e2e8f0;
    margin: 20px 0;
}

/* Dark Theme overrides for Security */
[data-theme="dark"] .security-status-badge.single-device,
.dark-theme .security-status-badge.single-device {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .security-status-badge.has-multiple-devices,
.dark-theme .security-status-badge.has-multiple-devices {
    background: rgba(225, 29, 72, 0.2);
    color: #fb7185;
    border-color: rgba(225, 29, 72, 0.4);
}

[data-theme="dark"] .security-banner.info,
.dark-theme .security-banner.info {
    background: rgba(3, 105, 161, 0.15);
    border-color: rgba(3, 105, 161, 0.3);
    color: #7dd3fc;
}

[data-theme="dark"] .security-banner.warning,
.dark-theme .security-banner.warning {
    background: rgba(190, 18, 60, 0.2);
    border-color: rgba(190, 18, 60, 0.4);
    color: #fda4af;
}

[data-theme="dark"] .session-item-card,
.dark-theme .session-item-card {
    background: #1c2128;
    border-color: #30363d;
}

[data-theme="dark"] .session-item-card.is-current-device,
.dark-theme .session-item-card.is-current-device {
    background: #1c2624;
    border-right-color: #10b981;
}

[data-theme="dark"] .session-item-card.is-other-device,
.dark-theme .session-item-card.is-other-device {
    background: #23221b;
    border-right-color: #f59e0b;
}

[data-theme="dark"] .session-icon-box,
.dark-theme .session-icon-box {
    background: #21262d;
}

[data-theme="dark"] .session-device-name,
.dark-theme .session-device-name {
    color: #f0f6fc;
}

[data-theme="dark"] .session-meta-line,
.dark-theme .session-meta-line {
    color: #8b949e;
}

[data-theme="dark"] .session-meta-line code,
.dark-theme .session-meta-line code {
    background: #21262d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-simulate-device,
.dark-theme .btn-simulate-device {
    background: #21262d;
    color: #c9d1d9;
    border-color: #30363d;
}

[data-theme="dark"] .btn-simulate-device:hover,
.dark-theme .btn-simulate-device:hover {
    background: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .profile-divider,
.dark-theme .profile-divider {
    border-top-color: #30363d;
}

[data-theme="dark"] .logout-icon-box,
.dark-theme .logout-icon-box {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* 6. Reusable Logout Confirmation Dialog Modal */
.logout-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100100;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: logout-fade-in 0.2s ease-out forwards;
}

.logout-modal-card {
    background: #ffffff;
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 28px 24px 22px;
    text-align: center;
    direction: rtl;
    animation: logout-scale-up 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.logout-icon-wrapper {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.18);
}

.logout-modal-icon {
    font-size: 30px;
    line-height: 1;
}

.logout-modal-title {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.logout-modal-subtitle {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
}

.logout-modal-body {
    margin: 16px 0 24px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.logout-modal-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #475569;
}

.logout-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-logout-confirm {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
    transition: all 0.2s ease;
}

.btn-logout-confirm:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
}

.btn-logout-cancel {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-logout-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
}

[data-theme="dark"] .logout-modal-card,
.dark-theme .logout-modal-card {
    background: #1c2128;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px #30363d;
}

[data-theme="dark"] .logout-modal-title,
.dark-theme .logout-modal-title {
    color: #f0f6fc;
}

[data-theme="dark"] .logout-modal-subtitle,
.dark-theme .logout-modal-subtitle {
    color: #8b949e;
}

[data-theme="dark"] .logout-modal-body,
.dark-theme .logout-modal-body {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .logout-modal-body p,
.dark-theme .logout-modal-body p {
    color: #c9d1d9;
}

[data-theme="dark"] .btn-logout-cancel,
.dark-theme .btn-logout-cancel {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-logout-cancel:hover,
.dark-theme .btn-logout-cancel:hover {
    background: #30363d;
    color: #ffffff;
}

@keyframes logout-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes logout-scale-up {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 7. Mobile Responsive Adjustments for Logout */
@media (max-width: 640.98px) {
    .nav-item-logout-desktop {
        display: none !important;
    }

    .btn-topbar-logout {
        padding: 6px 9px !important;
        font-size: 13px !important;
    }

    .btn-topbar-logout .logout-label {
        display: none !important;
    }

    .todo-topbar-logout-btn {
        padding: 5px 8px !important;
        font-size: 12px !important;
    }

    .todo-topbar-logout-btn .btn-text {
        display: none !important;
    }

    .profile-logout-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    .btn-profile-logout {
        width: 100% !important;
        justify-content: center !important;
    }

    .logout-modal-card {
        padding: 22px 18px 18px !important;
        border-radius: 20px !important;
    }
}


/* ============================================================
   UNIVERSAL DELETE CONFIRMATION MODAL & ACTIONS (دیالوگ تایید حذف)
   ============================================================ */

.delete-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999999 !important;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: del-fade-in 0.2s ease-out forwards;
}

.delete-modal-card {
    background: #ffffff;
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 26px 24px 22px;
    text-align: center;
    direction: rtl;
    animation: del-scale-up 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delete-icon-wrapper {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.2);
}

.delete-modal-icon {
    font-size: 28px;
    line-height: 1;
}

.delete-modal-title {
    margin: 0 0 6px 0;
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
}

.delete-modal-subtitle {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.delete-modal-body {
    margin: 16px 0 22px;
    padding: 12px 14px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.delete-item-preview {
    margin-bottom: 8px;
}

.delete-item-name {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    font-weight: 800;
    font-size: 13.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-modal-message {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #475569;
}

.delete-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-delete-confirm-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32);
    transition: all 0.2s ease;
}

.btn-delete-confirm-action:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
}

.btn-delete-confirm-action:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-delete-cancel-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-cancel-action:hover:not(:disabled) {
    background: #e2e8f0;
    color: #1e293b;
}

/* Modal In-Dialog Delete Buttons */
.btn-delete-in-modal,
.btn-delete-cal-event {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #dc2626;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-in-modal:hover,
.btn-delete-cal-event:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}

/* Category Item Row with Delete Button in Tasks */
.todo-category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.todo-category-row .todo-nav-cat-btn {
    flex: 1;
    min-width: 0;
}

.btn-delete-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.7;
    margin-inline-end: 4px;
}

.btn-delete-cat:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    opacity: 1;
}

/* Dark Theme Overrides for Delete Confirmation */
[data-theme="dark"] .delete-modal-card,
.dark-theme .delete-modal-card {
    background: #1c2128;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px #30363d;
}

[data-theme="dark"] .delete-modal-title,
.dark-theme .delete-modal-title {
    color: #f0f6fc;
}

[data-theme="dark"] .delete-modal-subtitle,
.dark-theme .delete-modal-subtitle {
    color: #8b949e;
}

[data-theme="dark"] .delete-modal-body,
.dark-theme .delete-modal-body {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .delete-item-name,
.dark-theme .delete-item-name {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

[data-theme="dark"] .delete-modal-message,
.dark-theme .delete-modal-message {
    color: #c9d1d9;
}

[data-theme="dark"] .btn-delete-cancel-action,
.dark-theme .btn-delete-cancel-action {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .btn-delete-cancel-action:hover,
.dark-theme .btn-delete-cancel-action:hover {
    background: #30363d;
    color: #ffffff;
}

@keyframes del-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes del-scale-up {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (max-width: 640.98px) {
    .delete-modal-card {
        padding: 22px 18px 18px !important;
        border-radius: 20px !important;
    }
}


/* ============================================================
   AUTH & VERIFICATION CODE DISPLAY STYLES (کد تایید ورود پیش‌فرض)
   ============================================================ */

.auth-mobile-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 14px;
    margin-bottom: 20px;
    font-size: 13.5px;
    color: #475569;
}

.auth-mobile-badge strong {
    color: #0f172a;
    letter-spacing: 1px;
}

.link-edit-mobile {
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    margin-inline-start: 4px;
    transition: color 0.15s ease;
}

.link-edit-mobile:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.dev-otp-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px dashed #f59e0b;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
    animation: otp-card-appear 0.3s ease-out forwards;
}

.dev-otp-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.dev-otp-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.dev-otp-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dev-otp-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #92400e;
}

.dev-otp-desc {
    font-size: 11.5px;
    color: #b45309;
    line-height: 1.5;
}

.dev-otp-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 8px 14px;
}

.dev-otp-value {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 5px;
    color: #d97706;
    font-family: monospace, 'Courier New', Courier;
    user-select: all;
    direction: ltr;
}

.btn-fill-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-fill-code:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
}

.otp-input {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 6px !important;
    color: #1e293b !important;
}

.auth-extra-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
}

.btn-resend-link {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.btn-resend-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.btn-back-link {
    color: #64748b;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: color 0.15s ease;
}

.btn-back-link:hover {
    color: #334155;
    text-decoration: underline;
}

.auth-sep {
    color: #cbd5e1;
}

/* Dark Theme Overrides for Auth Verification */
[data-theme="dark"] .auth-mobile-badge,
.dark-theme .auth-mobile-badge {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .auth-mobile-badge strong,
.dark-theme .auth-mobile-badge strong {
    color: #f0f6fc;
}

[data-theme="dark"] .dev-otp-card,
.dark-theme .dev-otp-card {
    background: #1c1917;
    border-color: #b45309;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dev-otp-title,
.dark-theme .dev-otp-title {
    color: #fcd34d;
}

[data-theme="dark"] .dev-otp-desc,
.dark-theme .dev-otp-desc {
    color: #fbbf24;
}

[data-theme="dark"] .dev-otp-code-box,
.dark-theme .dev-otp-code-box {
    background: #0c0a09;
    border-color: #78350f;
}

[data-theme="dark"] .dev-otp-value,
.dark-theme .dev-otp-value {
    color: #f59e0b;
}

[data-theme="dark"] .otp-input,
.dark-theme .otp-input {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #f0f6fc !important;
}

[data-theme="dark"] .auth-extra-actions,
.dark-theme .auth-extra-actions {
    border-top-color: #30363d;
}

[data-theme="dark"] .btn-resend-link,
.dark-theme .btn-resend-link {
    color: #60a5fa;
}

[data-theme="dark"] .btn-back-link,
.dark-theme .btn-back-link {
    color: #8b949e;
}

@keyframes otp-card-appear {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   CONTACTS & CHAT SYSTEM STYLES (سیستم مخاطبین و چت زنده)
   ============================================================ */

/* 1. Navigation Badges & Shortcuts */
.topbar-chat-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s ease;
}

.topbar-chat-icon-btn:hover,
.topbar-chat-icon-btn.active {
    background: #e0e7ff;
    border-color: #c7d2fe;
    color: #4338ca;
    transform: translateY(-1px);
}

.topbar-chat-icon-btn .btn-chat-icon {
    font-size: 18px;
    line-height: 1;
}

.topbar-chat-badge,
.nav-unread-pill,
.chat-badge-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    line-height: 1;
}

.chat-badge-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.hero-btn-chat {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

.hero-btn-chat:hover {
    background: #dcfce7 !important;
    border-color: #86efac !important;
}

/* 2. Chat Layout & Shell */
.contacts-chat-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 0 20px;
}

.chat-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100500;
    padding: 12px 24px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    animation: otp-card-appear 0.25s ease-out forwards;
}

.chat-toast.success {
    background: #059669;
    color: #ffffff;
}

.chat-toast.error {
    background: #dc2626;
    color: #ffffff;
}

.chat-layout-card {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    height: calc(100vh - 130px);
    min-height: 560px;
}

/* 3. Sidebar (Contacts & Chats Column) */
.chat-sidebar {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e2e8f0;
    background: #f8fafc;
    height: 100%;
    overflow: hidden;
}

.chat-sidebar-header {
    padding: 16px 16px 10px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.chat-sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.title-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-head-icon {
    font-size: 22px;
}

.title-with-icon h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
}

.unread-badge-total {
    background: #fee2e2;
    color: #dc2626;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid #fecdd3;
}

/* Tabs */
.chat-tabs-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f1f5f9;
    padding: 3px;
    border-radius: 12px;
    gap: 3px;
}

.chat-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.chat-tab-btn:hover {
    color: #0f172a;
}

.chat-tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tab-badge-pill {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 99px;
    line-height: 1;
}

.tab-badge-pill.amber {
    background: #f59e0b;
}

.tab-count-sub {
    font-size: 11px;
    color: #94a3b8;
}

/* List Panels */
.chat-list-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
}

.chat-search-box {
    margin-bottom: 10px;
}

.chat-search-input {
    border-radius: 12px;
    font-size: 13px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.chat-items-stream {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Contact List Item (Chats Tab) */
.chat-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-contact-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(-2px);
}

.chat-contact-item.selected {
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}

.contact-avatar-box {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.contact-avatar-box.is-emoji {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    font-size: 22px;
}

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

.contact-avatar-initials {
    font-size: 15px;
    font-weight: 800;
    color: #334155;
}

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

.contact-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.contact-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-item-time {
    font-size: 11px;
    color: #94a3b8;
    flex-shrink: 0;
}

.contact-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.contact-last-msg {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-unread-badge {
    background: #2563eb;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Contact Cards (Directory & My Contacts) */
.contact-directory-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    transition: all 0.15s ease;
}

.contact-directory-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.dir-user-details {
    flex: 1;
    min-width: 0;
}

.dir-user-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dir-user-sub {
    font-size: 11.5px;
    color: #94a3b8;
}

.dir-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-action-chat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-action-chat:hover {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

.btn-action-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #e11d48;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-action-delete:hover {
    background: #e11d48;
    color: #ffffff;
}

.btn-action-send-req {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.btn-action-send-req:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px);
}

.btn-action-chat-mini {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.badge-rel {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
}

.badge-rel.mutual {
    background: #dcfce7;
    color: #15803d;
}

.badge-rel.pending {
    background: #fef3c7;
    color: #b45309;
}

.add-contact-help-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #1e40af;
    line-height: 1.5;
}

/* Requests Panel */
.requests-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.requests-section-head h4 {
    font-size: 13.5px;
    font-weight: 800;
    margin: 0;
    color: #334155;
}

.section-badge {
    background: #dbeafe;
    color: #1e40af;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
}

.section-badge.gray {
    background: #e2e8f0;
    color: #475569;
}

.requests-empty-box {
    padding: 14px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 14px;
}

.request-card-item {
    background: #ffffff;
    border: 1px solid #fde68a;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.08);
}

.req-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.req-user-info strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
}

.req-user-info small {
    font-size: 11px;
    color: #64748b;
}

.req-date-tag {
    font-size: 10.5px;
    color: #94a3b8;
}

.req-message-bubble {
    background: #fffbeb;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: #78350f;
    margin: 8px 0;
    line-height: 1.5;
}

.req-actions-bar {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.btn-accept-req {
    flex: 1;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-accept-req:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.btn-reject-req {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn-reject-req:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecdd3;
}

.sent-req-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    margin-bottom: 6px;
}

.sent-req-info strong {
    display: block;
    font-size: 12.5px;
}

.sent-req-info small {
    font-size: 11px;
    color: #94a3b8;
}

.badge-status-pending {
    font-size: 11px;
    font-weight: 700;
    color: #d97706;
}

.badge-status-accepted {
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
}

.badge-status-rejected {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
}

/* 4. Main Chat Area */
.chat-main-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

/* Welcome Placeholder */
.chat-welcome-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    background: radial-gradient(circle at center, #f8fafc 0%, #f1f5f9 100%);
}

.welcome-decor-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.welcome-big-icon {
    font-size: 42px;
}

.chat-welcome-placeholder h2 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.chat-welcome-placeholder p {
    font-size: 14px;
    color: #64748b;
    max-width: 480px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.welcome-quick-tips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 580px;
    width: 100%;
}

.quick-tip-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-align: right;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.tip-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.quick-tip-card strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 2px;
}

.quick-tip-card small {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.4;
}

/* Active Conversation Header */
.chat-active-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.chat-header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-mobile-chat-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f1f5f9;
    border: none;
    font-size: 16px;
    color: #334155;
    cursor: pointer;
}

.header-avatar {
    width: 42px;
    height: 42px;
}

.header-name-box {
    display: flex;
    flex-direction: column;
}

.header-contact-name {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.header-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.online-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.header-contact-sub {
    font-size: 11.5px;
    color: #64748b;
}

.btn-header-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-header-action:hover {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

/* Messages Stream */
.chat-messages-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
}

.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
}

.chat-date-separator span {
    background: #e2e8f0;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

.chat-conversation-empty {
    margin: auto;
    text-align: center;
    padding: 30px;
    color: #94a3b8;
}

.empty-bubble-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}

/* Bubbles */
.chat-bubble-row {
    display: flex;
    width: 100%;
}

.chat-bubble-row.mine {
    justify-content: flex-start;
}

.chat-bubble-row.theirs {
    justify-content: flex-end;
}

.chat-bubble-card {
    max-width: 68%;
    padding: 10px 14px 6px;
    border-radius: 18px;
    position: relative;
    word-break: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.chat-bubble-row.mine .chat-bubble-card {
    background: linear-gradient(135deg, #1b6ec2, #0d5bb5);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.chat-bubble-row.theirs .chat-bubble-card {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

.bubble-content {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 3px;
    white-space: pre-wrap;
}

.bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 10.5px;
    opacity: 0.8;
}

.chat-bubble-row.mine .bubble-time {
    color: rgba(255, 255, 255, 0.85);
}

.chat-bubble-row.theirs .bubble-time {
    color: #94a3b8;
}

.bubble-read-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.bubble-read-status.read {
    color: #93c5fd;
    font-weight: 800;
}

/* 5. Input Toolbar */
.chat-input-toolbar {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 8px 16px 12px;
}

.chat-quick-emojis {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.chat-quick-emojis::-webkit-scrollbar {
    display: none;
}

.btn-quick-emoji {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-quick-emoji:hover {
    background: #e2e8f0;
    transform: scale(1.15);
}

.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat-text-input {
    flex: 1;
    min-height: 42px;
    max-height: 110px;
    border-radius: 14px;
    border: 1.5px solid #cbd5e1;
    padding: 10px 14px;
    font-size: 13.5px;
    resize: none;
    direction: rtl;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat-text-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.btn-send-message {
    height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    background: #cbd5e1;
    color: #64748b;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    cursor: not-allowed;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-send-message.can-send {
    background: linear-gradient(135deg, #1b6ec2, #0d5bb5);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(27, 110, 194, 0.3);
}

.btn-send-message.can-send:hover {
    background: linear-gradient(135deg, #0d5bb5, #084388);
    transform: translateY(-1px);
}

/* 6. Request Modal */
.chat-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100300;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.chat-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    padding: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    direction: rtl;
    animation: otp-card-appear 0.2s ease-out forwards;
}

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

.chat-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

.target-user-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.chat-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.btn-chat-submit {
    flex: 1;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.btn-chat-cancel {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

/* 7. Dark Theme Overrides for Contacts & Chat */
[data-theme="dark"] .chat-layout-card,
.dark-theme .chat-layout-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .chat-sidebar,
.dark-theme .chat-sidebar {
    background: #0d1117;
    border-left-color: #30363d;
}

[data-theme="dark"] .chat-sidebar-header,
.dark-theme .chat-sidebar-header {
    background: #161b22;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .title-with-icon h2,
.dark-theme .title-with-icon h2 {
    color: #f0f6fc;
}

[data-theme="dark"] .chat-tabs-bar,
.dark-theme .chat-tabs-bar {
    background: #21262d;
}

[data-theme="dark"] .chat-tab-btn,
.dark-theme .chat-tab-btn {
    color: #8b949e;
}

[data-theme="dark"] .chat-tab-btn.active,
.dark-theme .chat-tab-btn.active {
    background: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .chat-search-input,
.dark-theme .chat-search-input {
    background: #161b22;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .chat-contact-item,
.dark-theme .chat-contact-item,
[data-theme="dark"] .contact-directory-card,
.dark-theme .contact-directory-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .chat-contact-item:hover,
.dark-theme .chat-contact-item:hover,
[data-theme="dark"] .contact-directory-card:hover,
.dark-theme .contact-directory-card:hover {
    background: #21262d;
}

[data-theme="dark"] .chat-contact-item.selected,
.dark-theme .chat-contact-item.selected {
    background: #1c2738;
    border-color: #388bfd;
}

[data-theme="dark"] .contact-item-name,
.dark-theme .contact-item-name,
[data-theme="dark"] .dir-user-name,
.dark-theme .dir-user-name {
    color: #f0f6fc;
}

[data-theme="dark"] .chat-main-area,
.dark-theme .chat-main-area {
    background: #161b22;
}

[data-theme="dark"] .chat-welcome-placeholder,
.dark-theme .chat-welcome-placeholder {
    background: radial-gradient(circle at center, #161b22 0%, #0d1117 100%);
}

[data-theme="dark"] .chat-welcome-placeholder h2,
.dark-theme .chat-welcome-placeholder h2 {
    color: #f0f6fc;
}

[data-theme="dark"] .quick-tip-card,
.dark-theme .quick-tip-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .quick-tip-card strong,
.dark-theme .quick-tip-card strong {
    color: #f0f6fc;
}

[data-theme="dark"] .chat-active-header,
.dark-theme .chat-active-header {
    background: #161b22;
    border-bottom-color: #30363d;
}

[data-theme="dark"] .header-contact-name,
.dark-theme .header-contact-name {
    color: #f0f6fc;
}

[data-theme="dark"] .chat-messages-scroll,
.dark-theme .chat-messages-scroll {
    background: #0d1117;
}

[data-theme="dark"] .chat-date-separator span,
.dark-theme .chat-date-separator span {
    background: #21262d;
    color: #8b949e;
}

[data-theme="dark"] .chat-bubble-row.theirs .chat-bubble-card,
.dark-theme .chat-bubble-row.theirs .chat-bubble-card {
    background: #21262d;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .chat-input-toolbar,
.dark-theme .chat-input-toolbar {
    background: #161b22;
    border-top-color: #30363d;
}

[data-theme="dark"] .btn-quick-emoji,
.dark-theme .btn-quick-emoji {
    background: #21262d;
    border-color: #30363d;
}

[data-theme="dark"] .chat-text-input,
.dark-theme .chat-text-input {
    background: #0d1117;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .topbar-chat-icon-btn,
.dark-theme .topbar-chat-icon-btn {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .chat-modal-card,
.dark-theme .chat-modal-card {
    background: #161b22;
    border: 1px solid #30363d;
}

[data-theme="dark"] .chat-modal-header h3,
.dark-theme .chat-modal-header h3 {
    color: #f0f6fc;
}

[data-theme="dark"] .target-user-summary,
.dark-theme .target-user-summary {
    background: #0d1117;
    border-color: #30363d;
}

/* Direct Add Contact by Mobile Form Card */
.direct-add-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.direct-add-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.direct-add-header h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.direct-add-tip {
    font-size: 12px;
    color: #64748b;
    margin: -4px 0 12px;
    line-height: 1.6;
}

.direct-add-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

.direct-add-btn {
    width: 100%;
    padding: 9px 16px;
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.direct-add-btn:hover {
    background: linear-gradient(135deg, #4338ca, #3730a3);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.direct-add-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

[data-theme="dark"] .direct-add-card,
.dark-theme .direct-add-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .direct-add-header h4,
.dark-theme .direct-add-header h4 {
    color: #f0f6fc;
}

[data-theme="dark"] .direct-add-tip,
.dark-theme .direct-add-tip {
    color: #8b949e;
}

/* 8. Mobile Responsive Overrides for Contacts & Chat */
@media (max-width: 640.98px) {
    /* Mobile Bottom Navbar with 4 items */
    .sidebar .flex-column {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .contacts-chat-container {
        padding: 0;
    }

    .chat-layout-card {
        grid-template-columns: 1fr !important;
        border-radius: 0 !important;
        border: none !important;
        height: calc(100vh - 126px) !important;
        min-height: auto !important;
    }

    .chat-sidebar.mobile-hidden {
        display: none !important;
    }

    .chat-main-area {
        display: none !important;
    }

    .chat-main-area.mobile-active {
        display: flex !important;
        height: 100% !important;
    }

    .btn-mobile-chat-back {
        display: inline-flex !important;
    }

    .chat-bubble-card {
        max-width: 85% !important;
    }

    .chat-welcome-placeholder {
        display: none !important;
    }
}


/* ============================================================
   TRELLO KANBAN MODULE STYLES (تخته کارها به سبک ترلو)
   ============================================================ */
.kanban-page {
    min-height: calc(100vh - 72px);
    background: var(--board-bg, linear-gradient(135deg, #1e3a8a, #3b82f6));
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background 0.4s ease;
}

/* Kanban Topbar */
.kanban-topbar {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.65rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    z-index: 20;
    color: #ffffff;
}

.kanban-topbar-start,
.kanban-topbar-center,
.kanban-topbar-end {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* Board Selector */
.board-selector-wrap {
    position: relative;
}

.btn-board-select {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-board-select:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.board-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.board-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 290px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 101;
    overflow: hidden;
    color: #1e293b;
    animation: fadeInDown 0.18s ease-out;
}

.dark-theme .board-dropdown-menu {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.board-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    font-size: 0.88rem;
}

.dark-theme .board-dropdown-header {
    background: #0f172a;
    border-color: #334155;
}

.btn-mini-add-board {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-mini-add-board:hover {
    background: #1d4ed8;
}

.board-list-items {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.4rem;
}

.board-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s;
}

.board-menu-item:hover,
.board-menu-item.active {
    background: #f1f5f9;
}

.dark-theme .board-menu-item:hover,
.dark-theme .board-menu-item.active {
    background: #334155;
}

.board-item-swatch {
    width: 24px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.board-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-fav-star {
    color: #f59e0b;
    font-size: 1rem;
}

/* Background popover */
.bg-picker-popover {
    position: absolute;
    top: 52px;
    right: 170px;
    width: 260px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border: 1px solid #e2e8f0;
    padding: 0.85rem;
    z-index: 101;
    color: #1e293b;
}

.dark-theme .bg-picker-popover {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.bg-picker-popover h4 {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
}

.bg-swatches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.bg-swatch-btn {
    height: 48px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.15s, border-color 0.15s;
}

.bg-swatch-btn:hover {
    transform: scale(1.06);
}

.bg-swatch-btn.selected {
    border-color: #ffffff;
    outline: 2px solid #2563eb;
}

/* Action button in topbar */
.btn-kanban-action {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-kanban-action:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Search Box */
.kanban-search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    gap: 0.4rem;
    width: 230px;
    transition: all 0.2s;
}

.kanban-search-box:focus-within {
    background: rgba(255, 255, 255, 0.95);
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    width: 280px;
}

.kanban-search-box:focus-within .kanban-search-input {
    color: #0f172a;
}

.kanban-search-box:focus-within .search-icon {
    filter: invert(0);
}

.kanban-search-input {
    border: none;
    background: transparent;
    color: #ffffff;
    outline: none;
    font-size: 0.85rem;
    width: 100%;
}

.kanban-search-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.kanban-search-box:focus-within .kanban-search-input::placeholder {
    color: #64748b;
}

.search-clear-btn {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}

/* Filter Chips */
.kanban-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-chip {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.filter-chip:hover {
    background: rgba(255, 255, 255, 0.24);
}

.filter-chip.active {
    background: #ffffff;
    color: #1e3a8a;
    border-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.dark-theme .filter-chip.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Topbar End Buttons */
.btn-new-column {
    background: #10b981;
    color: #ffffff;
    border: none;
    padding: 0.45rem 0.95rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    transition: all 0.2s;
}

.btn-new-column:hover {
    background: #059669;
    transform: translateY(-1px);
}

.btn-kanban-settings {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.15s;
}

.btn-kanban-settings:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   KANBAN CANVAS & COLUMNS
   ============================================================ */
.kanban-canvas {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.25rem 1.5rem;
    display: flex;
}

.kanban-columns-container {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    min-height: calc(100vh - 170px);
}

/* Column Box */
.kanban-column {
    width: 310px;
    min-width: 310px;
    max-width: 310px;
    background: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s;
}

.dark-theme .kanban-column {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Column Header */
.column-header {
    padding: 0.85rem 1rem 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark-theme .column-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.column-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.column-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    cursor: pointer;
    line-height: 1.3;
}

.dark-theme .column-title {
    color: #f1f5f9;
}

.column-title-input {
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    border: 1px solid #3b82f6;
    background: #ffffff;
    width: 100%;
    color: #0f172a;
}

.column-cards-count {
    background: rgba(0, 0, 0, 0.06);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
}

.dark-theme .column-cards-count {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.column-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-col-move,
.btn-col-more {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}

.btn-col-move:hover,
.btn-col-more:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #0f172a;
}

.dark-theme .btn-col-move:hover,
.dark-theme .btn-col-more:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

/* Column Cards List */
.column-cards-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.column-empty-placeholder {
    padding: 2rem 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.82rem;
    border: 2px dashed rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.dark-theme .column-empty-placeholder {
    border-color: rgba(255, 255, 255, 0.08);
    color: #64748b;
}

/* ============================================================
   KANBAN CARD STYLES
   ============================================================ */
.kanban-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: grab;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    overflow: hidden;
}

.dark-theme .kanban-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card.is-dragging {
    opacity: 0.45;
    transform: scale(0.97);
}

.kanban-card.is-card-completed .card-title-text {
    text-decoration: line-through;
    color: #94a3b8;
}

/* Card Cover Bar */
.card-cover-bar {
    height: 7px;
    margin: -0.75rem -0.85rem 0.35rem -0.85rem;
}

/* Card Labels Row */
.card-labels-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.card-label-badge {
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Card Main Row (Check + Title) */
.card-main-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.card-check-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffffff;
    transition: all 0.15s;
}

.dark-theme .card-check-circle {
    background: #334155;
    border-color: #64748b;
}

.card-check-circle:hover {
    border-color: #10b981;
}

.card-check-circle.checked {
    background: #10b981;
    border-color: #10b981;
}

.card-title-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    word-break: break-word;
}

.dark-theme .card-title-text {
    color: #f1f5f9;
}

/* Badges Row */
.card-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.card-due-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
}

.due-today {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.due-overdue {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.due-future {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

.due-completed {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.dark-theme .due-today {
    background: #78350f;
    color: #fef3c7;
    border-color: #92400e;
}

.dark-theme .due-overdue {
    background: #7f1d1d;
    color: #fee2e2;
    border-color: #991b1b;
}

.dark-theme .due-future {
    background: #0c4a6e;
    color: #e0f2fe;
    border-color: #0369a1;
}

.dark-theme .due-completed {
    background: #14532d;
    color: #dcfce7;
    border-color: #166534;
}

.card-check-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: #f1f5f9;
    color: #475569;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
}

.card-check-badge.all-done {
    background: #dcfce7;
    color: #15803d;
}

.dark-theme .card-check-badge {
    background: #334155;
    color: #cbd5e1;
}

.dark-theme .card-check-badge.all-done {
    background: #14532d;
    color: #dcfce7;
}

.card-desc-badge {
    font-size: 0.8rem;
    color: #64748b;
}

.card-priority-badge {
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

/* Card Quick Move Buttons (Mobile & Desktop) */
.card-quick-move-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
    opacity: 0.4;
    transition: opacity 0.15s;
}

.kanban-card:hover .card-quick-move-row {
    opacity: 1;
}

.dark-theme .card-quick-move-row {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.card-move-hint {
    font-size: 0.7rem;
    color: #94a3b8;
}

.btn-card-move {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.15s;
}

.btn-card-move:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.dark-theme .btn-card-move {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

/* Column Footer (Add Card) */
.column-footer {
    padding: 0.5rem 0.85rem 0.75rem 0.85rem;
}

.btn-open-add-card {
    background: transparent;
    border: none;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-open-add-card:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #0f172a;
}

.dark-theme .btn-open-add-card {
    color: #94a3b8;
}

.dark-theme .btn-open-add-card:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

.quick-add-card-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-card-input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #3b82f6;
    padding: 0.5rem;
    font-size: 0.85rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    resize: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dark-theme .quick-card-input {
    background: #1e293b;
    color: #f8fafc;
    border-color: #3b82f6;
}

.quick-add-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-confirm-add-card {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-confirm-add-card:hover {
    background: #1d4ed8;
}

.btn-cancel-add-card {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}

/* Kanban Add Column Block */
.kanban-add-column-block {
    width: 290px;
    min-width: 290px;
}

.btn-add-another-column {
    width: 100%;
    background: rgba(255, 255, 255, 0.22);
    border: 2px dashed rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.2s;
}

.btn-add-another-column:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: #ffffff;
    transform: translateY(-2px);
}

.new-column-form {
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(12px);
    padding: 0.85rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dark-theme .new-column-form {
    background: #1e293b;
}

.new-column-input {
    width: 100%;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #3b82f6;
    font-size: 0.9rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
}

.dark-theme .new-column-input {
    background: #0f172a;
    color: #f1f5f9;
}

.new-column-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-confirm-add-col {
    background: #10b981;
    color: #ffffff;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-cancel-add-col {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
}

/* ============================================================
   TRELLO CARD MODAL (مودال جزئیات کارت)
   ============================================================ */
.trello-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.15s ease-out;
}

.trello-card-modal {
    background: #ffffff;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    position: relative;
    color: #1e293b;
    animation: scaleUp 0.18s ease-out;
}

.dark-theme .trello-card-modal {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #334155;
}

.modal-cover-header {
    height: 14px;
    width: 100%;
}

.trello-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.modal-header-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.modal-card-title-input {
    font-size: 1.3rem;
    font-weight: 800;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    background: transparent;
    color: inherit;
    outline: none;
    transition: all 0.15s;
}

.modal-card-title-input:focus {
    background: #f1f5f9;
    border-color: #3b82f6;
}

.dark-theme .modal-card-title-input:focus {
    background: #1e293b;
    border-color: #3b82f6;
}

.modal-column-status {
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.5rem;
}

.modal-column-select {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
}

.dark-theme .modal-column-select {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

/* Modal Grid Layout */
.modal-grid-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 1.5rem;
}

.modal-main-pane {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
}

.dark-theme .modal-section-label {
    color: #94a3b8;
}

.modal-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.modal-section-header h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.modal-labels-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.modal-label-item {
    color: #ffffff;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.remove-lbl-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}

.modal-due-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-due-preview {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.modal-quick-dates {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.quick-date-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.quick-date-btn:hover {
    background: #e2e8f0;
}

.quick-date-btn.danger {
    color: #ef4444;
    border-color: #fecaca;
}

.dark-theme .quick-date-btn {
    background: #1e293b;
    border-color: #475569;
    color: #cbd5e1;
}

.modal-description-textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: inherit;
    font-size: 0.9rem;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s;
}

.modal-description-textarea:focus {
    border-color: #3b82f6;
    background: #ffffff;
}

.dark-theme .modal-description-textarea {
    background: #1e293b;
    border-color: #334155;
}

/* Modal Checklist */
.modal-check-pct {
    margin-right: auto;
    font-size: 0.82rem;
    font-weight: 800;
    color: #2563eb;
}

.modal-checklist-progress {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.dark-theme .modal-checklist-progress {
    background: #334155;
}

.progress-bar-fill {
    height: 100%;
    background: #10b981;
    border-radius: 10px;
    transition: width 0.25s ease;
}

.modal-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.modal-check-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.modal-check-item:hover {
    background: #f1f5f9;
}

.dark-theme .modal-check-item:hover {
    background: #1e293b;
}

.modal-check-item.is-done .check-item-text {
    text-decoration: line-through;
    color: #94a3b8;
}

.check-item-text {
    flex: 1;
    font-size: 0.88rem;
}

.btn-del-check-item {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.btn-del-check-item:hover {
    opacity: 1;
    color: #ef4444;
}

.modal-add-check-row {
    display: flex;
    gap: 0.5rem;
}

.modal-add-check-input {
    flex: 1;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.85rem;
    background: #f8fafc;
    color: inherit;
    outline: none;
}

.dark-theme .modal-add-check-input {
    background: #1e293b;
    border-color: #334155;
}

.btn-modal-add-check {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

/* Modal Sidebar Pane */
.modal-sidebar-pane {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.sidebar-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.block-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dark-theme .block-title {
    color: #94a3b8;
}

.sidebar-select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
    background: #f8fafc;
    color: inherit;
}

.dark-theme .sidebar-select {
    background: #1e293b;
    border-color: #334155;
}

.cover-swatches-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.swatch-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.15s;
}

.swatch-btn:hover {
    transform: scale(1.1);
}

.swatch-btn.selected {
    border-color: #0f172a;
    outline: 2px solid #3b82f6;
}

.swatch-btn.none {
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.label-palette-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.btn-palette-label {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-right-width: 5px;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s;
    text-align: right;
}

.btn-palette-label:hover {
    background: #f1f5f9;
}

.dark-theme .btn-palette-label {
    background: #1e293b;
    border-color: #334155;
}

.pal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.actions-block {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.btn-sidebar-action {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-sidebar-action:hover {
    background: #e2e8f0;
}

.btn-sidebar-action.btn-reopen {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.btn-sidebar-action.btn-complete {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.btn-sidebar-action.btn-danger {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-sidebar-action.btn-danger:hover {
    background: #fee2e2;
}

.dark-theme .btn-sidebar-action {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-theme .btn-sidebar-action.btn-danger {
    background: #7f1d1d;
    color: #fee2e2;
    border-color: #991b1b;
}

/* Modal Bottom Actions */
.modal-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.dark-theme .modal-bottom-actions {
    border-top-color: #334155;
}

.btn-save-card {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 0.55rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-save-card:hover {
    background: #1d4ed8;
}

.btn-cancel-modal {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.dark-theme .btn-cancel-modal {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

/* New Board Modal */
.new-board-modal {
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    color: #1e293b;
    animation: scaleUp 0.18s ease-out;
}

.dark-theme .new-board-modal {
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #334155;
}

.new-board-modal-header {
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
}

.dark-theme .new-board-modal-header {
    border-bottom-color: #334155;
}

.new-board-modal-header h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.new-board-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kanban-text-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: inherit;
    font-size: 0.9rem;
    outline: none;
}

.dark-theme .kanban-text-input {
    background: #1e293b;
    border-color: #334155;
}

.new-board-modal-footer {
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.dark-theme .new-board-modal-footer {
    background: #0f172a;
    border-top-color: #334155;
}

.btn-confirm-board {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.board-danger-zone {
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.85rem;
    border-radius: 10px;
    color: #991b1b;
}

.board-danger-zone h4 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    font-weight: 800;
}

.board-danger-zone p {
    margin: 0 0 0.65rem 0;
    font-size: 0.8rem;
    color: #b91c1c;
}

.btn-del-board {
    background: #dc2626;
    color: #ffffff;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

/* Loading & Empty States */
.kanban-loading-screen,
.kanban-empty-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    gap: 1rem;
    padding: 3rem 1rem;
    text-align: center;
}

.kanban-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kanban-topbar {
        padding: 0.5rem 0.75rem;
        gap: 0.65rem;
    }

    .kanban-search-box {
        width: 100%;
    }

    .modal-grid-layout {
        grid-template-columns: 1fr;
    }

    .kanban-column {
        width: 285px;
        min-width: 285px;
    }
}


/* ==========================================================================
   CHEQUES & SAYAD MANAGEMENT MODULE (ماژول مدیریت و یادآوری چک‌های صیادی)
   ========================================================================== */
.tasks-hero-banner.hero-cheques {
    background: linear-gradient(135deg, #78350f 0%, #b45309 40%, #d97706 75%, #f59e0b 100%);
    box-shadow: 0 14px 34px rgba(217, 119, 6, 0.28);
}

[data-theme="dark"] .tasks-hero-banner.hero-cheques,
.dark-theme .tasks-hero-banner.hero-cheques {
    background: linear-gradient(135deg, #451a03 0%, #78350f 50%, #92400e 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.hero-btn-gold {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff !important;
}

.hero-btn-gold:hover {
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
    transform: translateY(-2px);
}

.cheques-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.cheques-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
}

.metric-cheques-issued .metric-icon { background: #fee2e2; color: #dc2626; }
.metric-cheques-received .metric-icon { background: #dcfce7; color: #16a34a; }
.metric-cheques-near .metric-icon { background: #fef3c7; color: #d97706; }
.metric-cheques-passed .metric-icon { background: #e0e7ff; color: #4f46e5; }

.cheques-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.cheque-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cheque-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cheque-tab-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.cheque-tab-btn.active {
    background: #1e293b;
    color: #ffffff;
    border-color: #1e293b;
}

.cheque-tab-btn .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.cheque-tab-btn.active .tab-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.cheque-tab-btn .tab-badge.warning { background: #fef3c7; color: #b45309; }
.cheque-tab-btn .tab-badge.success { background: #dcfce7; color: #15803d; }
.cheque-tab-btn .tab-badge.danger { background: #fee2e2; color: #b91c1c; }

.cheques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    width: 100%;
}

.cheque-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.cheque-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.cheque-card.cheque-issued {
    border-top: 5px solid #ef4444;
}

.cheque-card.cheque-received {
    border-top: 5px solid #10b981;
}

.cheque-card.is-passed {
    opacity: 0.82;
    border-top-color: #64748b !important;
}

.cheque-card.is-bounced {
    border-color: #f87171;
    background: #fff8f8;
}

.cheque-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 92px;
    font-weight: 900;
    color: rgba(148, 163, 184, 0.06);
    pointer-events: none;
    user-select: none;
    letter-spacing: 12px;
}

.cheque-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cheque-bank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cheque-bank-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14.5px;
    color: #0f172a;
}

.bank-branch {
    font-weight: 500;
    font-size: 12px;
    color: #64748b;
}

.cheque-type-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

.cheque-type-badge.badge-issued {
    background: #fee2e2;
    color: #b91c1c;
}

.cheque-type-badge.badge-received {
    background: #dcfce7;
    color: #15803d;
}

.cheque-status-tag {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 12px;
}

.cheque-status-tag.status-pending {
    background: #fef3c7;
    color: #b45309;
}

.cheque-status-tag.status-passed {
    background: #e0e7ff;
    color: #4338ca;
}

.cheque-status-tag.status-bounced {
    background: #fee2e2;
    color: #dc2626;
}

.cheque-status-tag.status-cancelled {
    background: #f1f5f9;
    color: #64748b;
}

.cheque-sayad-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 8px 14px;
}

.sayad-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sayad-label {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
}

.sayad-digits {
    font-family: monospace;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 1px;
    direction: ltr;
}

.btn-copy-sayad {
    border: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.btn-copy-sayad:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.cheque-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cheque-title-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cheque-label {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
}

.cheque-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.cheque-amount-row {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #e2e8f0;
}

.cheque-amount-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.amount-num {
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    font-family: inherit;
}

.amount-currency {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.cheque-amount-words {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    line-height: 1.5;
}

.cheque-dates-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cheque-date-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
}

.due-date-box {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 10px;
    padding: 8px 12px;
}

.due-date-box.due-today {
    background: #fef2f2;
    border-color: #fca5a5;
}

.due-date-box.due-overdue {
    background: #fff1f2;
    border-color: #fda4af;
}

.date-countdown {
    font-size: 11.5px;
    font-weight: 700;
}

.status-alert-text { color: #dc2626; font-weight: 800; }
.status-warn-text { color: #d97706; font-weight: 700; }
.status-info-text { color: #2563eb; }
.status-pass-text { color: #16a34a; }

.cheque-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #64748b;
}

.cheque-desc {
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.5;
}

.cheque-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.btn-ch-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.btn-ch-pass {
    background: #10b981;
    color: #ffffff;
}

.btn-ch-pass:hover {
    background: #059669;
}

.btn-ch-bounce {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.btn-ch-bounce:hover {
    background: #fee2e2;
}

.btn-ch-revert {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.btn-ch-revert:hover {
    background: #dbeafe;
}

.btn-ch-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-ch-icon:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-ch-del:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Segmented type buttons in modal */
.cheque-type-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.type-seg-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    font-weight: 600;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    text-align: center;
}

.type-seg-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.type-seg-btn.active.is-issued {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
    font-weight: 700;
}

.type-seg-btn.active.is-received {
    border-color: #10b981;
    background: #f0fdf4;
    color: #15803d;
    font-weight: 700;
}

.persian-words-preview {
    margin-top: 6px;
    padding: 6px 12px;
    background: #fefce8;
    border-radius: 8px;
    font-size: 12.5px;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.sayad-input {
    letter-spacing: 2px;
    font-family: monospace;
    font-weight: 700;
    font-size: 14px;
}

/* Cheque empty card */
.cheques-empty-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px dashed #cbd5e1;
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.btn-new-cheque {
    padding: 10px 22px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.btn-new-cheque:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}

/* Dashboard Cheque Card Styles */
.cheque-mini-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.cheque-mini-badge.badge-issued {
    background: #fee2e2;
    color: #b91c1c;
}

.cheque-mini-badge.badge-received {
    background: #dcfce7;
    color: #15803d;
}

.cheque-card-top-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.cheque-alert {
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
}

.stat-cheques .stat-icon {
    background: #fef3c7;
    color: #b45309;
}

/* Dark mode overrides for cheques */
[data-theme="dark"] .cheque-card,
.dark-theme .cheque-card {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .cheque-bank-pill,
.dark-theme .cheque-bank-pill {
    color: #f1f5f9;
}

[data-theme="dark"] .cheque-title,
.dark-theme .cheque-title {
    color: #f1f5f9;
}

[data-theme="dark"] .cheque-amount-row,
.dark-theme .cheque-amount-row {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .amount-num,
.dark-theme .amount-num {
    color: #f1f5f9;
}

[data-theme="dark"] .cheque-sayad-bar,
.dark-theme .cheque-sayad-bar {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .sayad-digits,
.dark-theme .sayad-digits {
    color: #f1f5f9;
}

[data-theme="dark"] .cheque-tab-btn,
.dark-theme .cheque-tab-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .cheque-tab-btn.active,
.dark-theme .cheque-tab-btn.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0f172a;
}

[data-theme="dark"] .due-date-box,
.dark-theme .due-date-box {
    background: #422006;
    border-color: #78350f;
}

[data-theme="dark"] .btn-ch-icon,
.dark-theme .btn-ch-icon {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .cheques-empty-card,
.dark-theme .cheques-empty-card {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .type-seg-btn,
.dark-theme .type-seg-btn {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .persian-words-preview,
.dark-theme .persian-words-preview {
    background: #422006;
    border-color: #78350f;
    color: #fde047;
}

[data-theme="dark"] .cheque-desc,
.dark-theme .cheque-desc {
    background: #0f172a;
    color: #cbd5e1;
}

@media (max-width: 768px) {
    .cheques-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .cheques-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .cheque-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }
    .cheque-type-segmented {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   UNIFIED RICH SIDEBAR & NAVIGATION SYSTEM (Modern Executive Design)
   ========================================================================== */
.side-panel-scrollable {
    height: calc(100vh - 84px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent !important;
    padding: 12px 10px 24px !important;
}

.side-panel-scrollable::-webkit-scrollbar {
    width: 4px;
}
.side-panel-scrollable::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}

.side-panel-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-nav-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.side-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 12px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
}

.side-nav-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    transform: translateX(-3px);
}

.side-nav-item.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 5px 16px rgba(79, 70, 229, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Squircle icon box with distinct pastel backgrounds */
.side-nav-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.side-nav-icon-box.icon-dashboard { background: rgba(59, 130, 246, 0.12); }
.side-nav-icon-box.icon-today { background: rgba(245, 158, 11, 0.14); }
.side-nav-icon-box.icon-important { background: rgba(239, 68, 68, 0.12); }
.side-nav-icon-box.icon-planned { background: rgba(13, 148, 136, 0.12); }
.side-nav-icon-box.icon-all { background: rgba(100, 116, 139, 0.12); }
.side-nav-icon-box.icon-meetings { background: rgba(139, 92, 246, 0.14); }
.side-nav-icon-box.icon-birthdays { background: rgba(236, 72, 153, 0.14); }
.side-nav-icon-box.icon-installments { background: rgba(16, 185, 129, 0.14); }
.side-nav-icon-box.icon-cheques { background: rgba(217, 119, 6, 0.14); }
.side-nav-icon-box.icon-notes { background: rgba(245, 158, 11, 0.14); }
.side-nav-icon-box.icon-calendar { background: rgba(99, 102, 241, 0.14); }
.side-nav-icon-box.icon-profile { background: rgba(100, 116, 139, 0.12); }
.side-nav-icon-box.icon-logout { background: rgba(239, 68, 68, 0.12); }

.side-nav-item.active .side-nav-icon-box {
    background: rgba(255, 255, 255, 0.22) !important;
}

.side-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-badge {
    margin-right: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    flex-shrink: 0;
}

.side-nav-item.active .side-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.side-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 14px 8px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-side-add-cat {
    background: #f1f5f9;
    border: none;
    color: #4f46e5;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-side-add-cat:hover {
    background: #e2e8f0;
    color: #4338ca;
    transform: scale(1.08);
}

.side-custom-categories {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
}

.side-cat-row {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 10px;
    transition: all 0.15s ease;
}

.side-cat-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    color: #334155;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    overflow: hidden;
}

.side-cat-row:hover {
    background: #f8fafc;
}

.side-cat-row.is-active {
    background: rgba(79, 70, 229, 0.08);
}

.side-cat-row.is-active .side-cat-btn {
    color: #4f46e5;
    font-weight: 700;
}

.side-cat-btn .category-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.side-cat-btn .cat-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-cat-side {
    opacity: 0;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.side-cat-row:hover .btn-delete-cat-side {
    opacity: 1;
}

.btn-delete-cat-side:hover {
    color: #ef4444;
}

.side-empty-cat {
    font-size: 11.5px;
    color: #94a3b8;
    padding: 6px 10px;
}

.side-footer-group {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-logout-btn {
    color: #ef4444 !important;
}

.side-logout-btn:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
}

/* Single Column Tasks View (No Duplicate Inner Sidebar) */
.todo-shell.single-column {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 36px !important;
    margin: 0 !important;
    gap: 0 !important;
}

.todo-shell.single-column .todo-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Category Creator Modal */
.cat-creator-modal {
    max-width: 420px;
}

.cat-colors-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cat-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cat-color-swatch.selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #3b82f6;
    transform: scale(1.1);
}

/* ==========================================================================
   DARK MODE OVERRIDES FOR SIDEBAR
   ========================================================================== */
[data-theme="dark"] .sidebar,
.dark-theme .sidebar {
    background: #0f172a !important;
    border-left: 1px solid #1e293b !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .sidebar-brand-row,
.dark-theme .sidebar-brand-row {
    background: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] .sidebar .navbar-brand,
.dark-theme .sidebar .navbar-brand {
    color: #f8fafc !important;
}

[data-theme="dark"] .sidebar .brand-sub,
.dark-theme .sidebar .brand-sub {
    color: #94a3b8 !important;
}

[data-theme="dark"] .side-section-title,
.dark-theme .side-section-title {
    color: #64748b !important;
}

[data-theme="dark"] .side-nav-item,
.dark-theme .side-nav-item {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .side-nav-item:hover,
.dark-theme .side-nav-item:hover {
    background: #1e293b !important;
    color: #ffffff !important;
}

[data-theme="dark"] .side-nav-item.active,
.dark-theme .side-nav-item.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45) !important;
}

[data-theme="dark"] .side-badge,
.dark-theme .side-badge {
    background: #1e293b;
    color: #94a3b8;
}

[data-theme="dark"] .side-cat-btn,
.dark-theme .side-cat-btn {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .side-cat-row:hover,
.dark-theme .side-cat-row:hover {
    background: #1e293b;
}

[data-theme="dark"] .side-cat-row.is-active,
.dark-theme .side-cat-row.is-active {
    background: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .side-cat-row.is-active .side-cat-btn,
.dark-theme .side-cat-row.is-active .side-cat-btn {
    color: #a5b4fc !important;
}

[data-theme="dark"] .btn-side-add-cat,
.dark-theme .btn-side-add-cat {
    background: #1e293b;
    color: #818cf8;
}

[data-theme="dark"] .side-footer-group,
.dark-theme .side-footer-group {
    border-top-color: #1e293b;
}

[data-theme="dark"] .side-logout-btn,
.dark-theme .side-logout-btn {
    color: #f87171 !important;
}

[data-theme="dark"] .side-logout-btn:hover,
.dark-theme .side-logout-btn:hover {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #ef4444 !important;
}

/* Mobile Bottom Navigation (only on small screens) */
@media (max-width: 640px) {
    .sidebar .side-panel-scrollable {
        display: none !important;
    }
    .sidebar .sidebar-brand-row {
        display: none !important;
    }
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 64px !important;
        background: #ffffff !important;
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        align-items: center !important;
        z-index: 99999 !important;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
        border-top: 1px solid #e2e8f0 !important;
        direction: rtl !important;
        padding: 2px 4px !important;
    }
    [data-theme="dark"] .mobile-bottom-nav,
    .dark-theme .mobile-bottom-nav {
        background: #0f172a !important;
        border-top-color: #1e293b !important;
    }
    .mobile-nav-pill {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        text-decoration: none !important;
        color: #64748b !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 4px 0 !important;
        border-radius: 10px !important;
        transition: all 0.15s ease !important;
    }
    .mobile-nav-pill.active {
        color: #4f46e5 !important;
        background: rgba(79, 70, 229, 0.09) !important;
    }
    [data-theme="dark"] .mobile-nav-pill.active,
    .dark-theme .mobile-nav-pill.active {
        color: #818cf8 !important;
        background: rgba(99, 102, 241, 0.18) !important;
    }
    .mobile-nav-pill span:first-child {
        font-size: 17px !important;
    }
}

/* ==========================================================================
   CALENDAR CHEQUE INTEGRATION (چک‌های صیادی در تقویم)
   ========================================================================== */
.calendar-filter-pill.filter-pill-cheques.is-active,
.filter-pill-cheques.is-active {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

.filter-pill-cheques.is-active .custom-checkbox,
.filter-pill-cheques input[type="checkbox"]:checked ~ .custom-checkbox {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}

.filter-pill-cheques.is-active .checkbox-check,
.filter-pill-cheques input[type="checkbox"]:checked ~ .custom-checkbox .checkbox-check {
    display: block !important;
    color: #ffffff !important;
    visibility: visible !important;
}

.dot-cheques {
    background: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}

/* Dark Mode for Cheques Pill Active */
[data-theme="dark"] .calendar-filter-pill.filter-pill-cheques.is-active,
.dark-theme .calendar-filter-pill.filter-pill-cheques.is-active,
[data-theme="dark"] .filter-pill-cheques.is-active,
.dark-theme .filter-pill-cheques.is-active {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

[data-theme="dark"] .filter-pill-cheques.is-active .custom-checkbox,
.dark-theme .filter-pill-cheques.is-active .custom-checkbox,
[data-theme="dark"] .filter-pill-cheques input[type="checkbox"]:checked ~ .custom-checkbox,
.dark-theme .filter-pill-cheques input[type="checkbox"]:checked ~ .custom-checkbox {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}

[data-theme="dark"] .filter-pill-cheques.is-active .checkbox-check,
.dark-theme .filter-pill-cheques.is-active .checkbox-check,
[data-theme="dark"] .filter-pill-cheques input[type="checkbox"]:checked ~ .custom-checkbox .checkbox-check,
.dark-theme .filter-pill-cheques input[type="checkbox"]:checked ~ .custom-checkbox .checkbox-check {
    display: block !important;
    color: #ffffff !important;
    visibility: visible !important;
}

/* Month View Chips */
.calendar-chip.chip-cheque {
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 1.5px 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-chip.chip-cheque:hover {
    transform: scale(1.03);
}

.calendar-chip.chip-cheque-issued {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.calendar-chip.chip-cheque-received {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

[data-theme="dark"] .calendar-chip.chip-cheque-issued,
.dark-theme .calendar-chip.chip-cheque-issued {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fde68a !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .calendar-chip.chip-cheque-received,
.dark-theme .calendar-chip.chip-cheque-received {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #86efac !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Week/Day View Event Cards */
.calendar-event.is-cheque-event {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 8px;
    padding: 8px 12px;
}

.calendar-event.is-cheque-event:hover {
    background: #fef3c7;
}

.cheque-strip {
    background: #f59e0b;
    width: 4px;
    height: 100%;
    border-radius: 4px;
    flex-shrink: 0;
}

[data-theme="dark"] .calendar-event.is-cheque-event,
.dark-theme .calendar-event.is-cheque-event {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #fde68a !important;
}

/* Day Detail Modal - Cheques List */
.day-cheques-section {
    margin-bottom: 16px;
}

.count-gold {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
}

[data-theme="dark"] .count-gold,
.dark-theme .count-gold {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
}

.day-cheque-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 6px;
}

.day-cheque-row:hover {
    background: #f1f5f9;
    border-color: #f59e0b;
    transform: translateX(-2px);
}

[data-theme="dark"] .day-cheque-row,
.dark-theme .day-cheque-row {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .day-cheque-row:hover,
.dark-theme .day-cheque-row:hover {
    background: #334155;
    border-color: #f59e0b;
}

/* Cheque Details Modal */
.cheque-details-modal {
    max-width: 460px !important;
    border-radius: 18px !important;
}

.header-cheque {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}

.header-cheque.is-received {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.cheque-detail-amount-hero {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 16px 20px;
    text-align: center;
    margin-bottom: 16px;
}

[data-theme="dark"] .cheque-detail-amount-hero,
.dark-theme .cheque-detail-amount-hero {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

.amount-hero-label {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
}

[data-theme="dark"] .amount-hero-label,
.dark-theme .amount-hero-label {
    color: #fde68a;
}

.amount-hero-value {
    font-size: 26px;
    font-weight: 800;
    color: #b45309;
    margin: 4px 0 8px;
}

[data-theme="dark"] .amount-hero-value,
.dark-theme .amount-hero-value {
    color: #fbbf24;
}

.amount-hero-value small {
    font-size: 13px;
    font-weight: 500;
}

.sayad-code-badge {
    font-family: monospace, Tahoma !important;
    letter-spacing: 2px;
    background: #e0e7ff;
    color: #3730a3;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    direction: ltr;
    display: inline-block;
}

[data-theme="dark"] .sayad-code-badge,
.dark-theme .sayad-code-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.cheque-modal-quick-status {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

[data-theme="dark"] .cheque-modal-quick-status,
.dark-theme .cheque-modal-quick-status {
    border-top-color: #334155;
}

.quick-status-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.quick-status-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-status-quick {
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-status-quick:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-status-quick.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}

[data-theme="dark"] .btn-status-quick,
.dark-theme .btn-status-quick {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .btn-status-quick:hover,
.dark-theme .btn-status-quick:hover {
    background: #334155;
}

.btn-go-to-cheques {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.08);
    transition: all 0.15s ease;
}

.btn-go-to-cheques:hover {
    background: rgba(79, 70, 229, 0.15);
    color: #4338ca;
}

[data-theme="dark"] .btn-go-to-cheques,
.dark-theme .btn-go-to-cheques {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

/* ==========================================================================
   Notification Full Details Modal
   ========================================================================== */
.notif-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: notifFadeIn 0.2s ease-out;
}

@keyframes notifFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.notif-modal-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 200001;
    animation: notifScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    direction: rtl;
    text-align: right;
}

@keyframes notifScaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.notif-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-right: 5px solid #3b82f6;
}

.notif-modal-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.notif-modal-title-box {
    flex: 1;
    min-width: 0;
}

.notif-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    word-break: break-word;
}

.notif-modal-sub-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    flex-wrap: wrap;
}

.notif-modal-tag {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.notif-modal-close-btn {
    border: none;
    background: #e2e8f0;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
}

.notif-modal-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
}

.notif-modal-body {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.notif-modal-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notif-modal-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.notif-modal-message-box {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.8;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
}

.notif-modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.notif-info-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notif-info-tile .tile-label {
    font-size: 11px;
    color: #64748b;
}

.notif-info-tile .tile-val {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.notif-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.btn-notif-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-notif-action:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.btn-notif-dismiss {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #ef4444;
    border: 1px solid #fecaca;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-notif-dismiss:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

.btn-notif-cancel {
    background: #e2e8f0;
    color: #475569;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-notif-cancel:hover {
    background: #cbd5e1;
}

/* Dark mode for Notification Modal */
[data-theme="dark"] .notif-modal-card,
.dark-theme .notif-modal-card {
    background: #1e293b;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .notif-modal-header,
.dark-theme .notif-modal-header {
    background: #0f172a;
    border-bottom-color: #334155;
}

[data-theme="dark"] .notif-modal-title,
.dark-theme .notif-modal-title {
    color: #f1f5f9;
}

[data-theme="dark"] .notif-modal-sub-meta,
.dark-theme .notif-modal-sub-meta {
    color: #94a3b8;
}

[data-theme="dark"] .notif-modal-close-btn,
.dark-theme .notif-modal-close-btn {
    background: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .notif-modal-label,
.dark-theme .notif-modal-label {
    color: #cbd5e1;
}

[data-theme="dark"] .notif-modal-message-box,
.dark-theme .notif-modal-message-box {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .notif-info-tile,
.dark-theme .notif-info-tile {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .notif-info-tile .tile-label,
.dark-theme .notif-info-tile .tile-label {
    color: #94a3b8;
}

[data-theme="dark"] .notif-info-tile .tile-val,
.dark-theme .notif-info-tile .tile-val {
    color: #f1f5f9;
}

[data-theme="dark"] .notif-modal-footer,
.dark-theme .notif-modal-footer {
    background: #0f172a;
    border-top-color: #334155;
}

[data-theme="dark"] .btn-notif-cancel,
.dark-theme .btn-notif-cancel {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .btn-notif-dismiss,
.dark-theme .btn-notif-dismiss {
    border-color: #7f1d1d;
    color: #f87171;
}

/* ==========================================================================
   Task Description & Quick Card Styling
   ========================================================================== */
.quick-task-desc-row {
    padding: 0 16px 12px 16px;
    animation: notifFadeIn 0.2s ease-out;
}

.quick-task-desc-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    resize: vertical;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.quick-task-desc-input:focus {
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

[data-theme="dark"] .quick-task-desc-input,
.dark-theme .quick-task-desc-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .quick-task-desc-input:focus,
.dark-theme .quick-task-desc-input:focus {
    border-color: #6366f1;
    background: #1e293b;
}

.quick-chip-btn.quick-desc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-chip-btn.quick-desc-toggle:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.quick-chip-btn.quick-desc-toggle.has-desc,
.quick-chip-btn.quick-desc-toggle.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

[data-theme="dark"] .quick-chip-btn.quick-desc-toggle,
.dark-theme .quick-chip-btn.quick-desc-toggle {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .quick-chip-btn.quick-desc-toggle.has-desc,
.dark-theme .quick-chip-btn.quick-desc-toggle.has-desc {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #93c5fd;
}

/* Task card description in list */
.task-card-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.task-card-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #64748b;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="dark"] .task-card-desc,
.dark-theme .task-card-desc {
    color: #94a3b8;
}

.task-card-edit-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #94a3b8;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.task-card-edit-btn:hover {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}

[data-theme="dark"] .task-card-edit-btn:hover,
.dark-theme .task-card-edit-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

/* Dashboard task description */
.dash-task-text-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dash-task-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme="dark"] .dash-task-desc,
.dark-theme .dash-task-desc {
    color: #94a3b8;
}

/* Task Edit Modal Specifics */
.task-edit-modal-card {
    max-width: 580px;
}

/* ==========================================================================
   ULTRA-FAST MOBILE TASK CREATION & COMPREHENSIVE MOBILE OPTIMIZATION
   ========================================================================== */

/* Top Mobile Brand (Hidden on desktop, shown on mobile <= 768px) */
.top-mobile-brand {
    display: none;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
}

.mobile-brand-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12));
}

.brand-logo-mini {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.brand-name-mini {
    font-weight: 700;
    font-size: 14.5px;
    color: #0f172a;
    letter-spacing: -0.2px;
}

[data-theme="dark"] .brand-name-mini,
.dark-theme .brand-name-mini {
    color: #f1f5f9;
}

/* 1-Tap Quick Presets in Tasks.razor */
.quick-preset-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 4px 16px;
    flex-wrap: wrap;
}

.preset-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

[data-theme="dark"] .preset-title,
.dark-theme .preset-title {
    color: #94a3b8;
}

.preset-btn {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.preset-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e1;
}

.preset-btn.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

.preset-btn.preset-star.active {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] .preset-btn,
.dark-theme .preset-btn {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .preset-btn:hover,
.dark-theme .preset-btn:hover {
    background: #1e293b;
    border-color: #475569;
}

/* Mobile Floating Action Button (FAB) */
.mobile-fab-quick-task {
    display: none;
    position: fixed;
    bottom: 78px;
    right: 16px;
    z-index: 99998;
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
    color: #ffffff;
    border: none;
    border-radius: 28px;
    padding: 10px 18px 10px 14px;
    font-weight: 700;
    font-size: 13.5px;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    direction: rtl;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-fab-quick-task:active {
    transform: scale(0.94);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.mobile-fab-quick-task .fab-icon {
    font-size: 16px;
    line-height: 1;
}

.mobile-fab-quick-task .fab-label {
    letter-spacing: -0.2px;
}

/* Mobile Quick Task Bottom Sheet */
.mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100005;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: sheetFadeIn 0.2s ease-out;
}

@keyframes sheetFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mobile-sheet-card {
    background: #ffffff;
    width: 100%;
    max-width: 520px;
    border-radius: 24px 24px 0 0;
    padding: 12px 18px 28px 18px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
    direction: rtl;
    text-align: right;
    animation: sheetSlideUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 85vh;
    overflow-y: auto;
    box-sizing: border-box;
}

@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.mobile-sheet-drag-handle {
    width: 38px;
    height: 4.5px;
    border-radius: 4px;
    background: #cbd5e1;
    margin: 4px auto 14px auto;
}

.mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.mobile-sheet-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sheet-bolt {
    font-size: 18px;
    color: #f59e0b;
}

.sheet-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.sheet-sub {
    font-size: 11.5px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 600;
}

.sheet-close-btn {
    border: none;
    background: #f1f5f9;
    color: #64748b;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}

.sheet-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
}

.mobile-sheet-success-banner {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
    animation: sheetFadeIn 0.2s ease-out;
}

.mobile-sheet-input-box {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.mobile-sheet-input {
    width: 100%;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 14px;
    padding: 13px 16px 13px 52px;
    font-size: 15.5px;
    font-family: inherit;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.mobile-sheet-input:focus {
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.mobile-sheet-quick-submit {
    position: absolute;
    left: 8px;
    width: 36px;
    height: 36px;
    border: none;
    background: #4f46e5;
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mobile-sheet-quick-submit:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.mobile-sheet-chips-row {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-sheet-chips-row::-webkit-scrollbar {
    display: none;
}

.m-chip {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.m-chip.active {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
}

.m-chip.m-chip-star.active {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

.mobile-sheet-desc-row {
    margin-bottom: 12px;
    animation: sheetFadeIn 0.2s ease-out;
}

.mobile-sheet-textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: #0f172a;
    outline: none;
    resize: none;
    box-sizing: border-box;
}

.mobile-sheet-textarea:focus {
    border-color: #4f46e5;
    background: #ffffff;
}

.mobile-sheet-actions {
    margin-top: 4px;
}

.btn-mobile-instant-save {
    width: 100%;
    border: none;
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transition: all 0.15s ease;
}

.btn-mobile-instant-save:active {
    transform: scale(0.98);
}

.btn-mobile-instant-save:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
}

/* Dark Mode for Mobile Sheet */
[data-theme="dark"] .mobile-sheet-card,
.dark-theme .mobile-sheet-card {
    background: #1e293b;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .mobile-sheet-drag-handle,
.dark-theme .mobile-sheet-drag-handle {
    background: #475569;
}

[data-theme="dark"] .sheet-title,
.dark-theme .sheet-title {
    color: #f1f5f9;
}

[data-theme="dark"] .sheet-sub,
.dark-theme .sheet-sub {
    background: #0f172a;
    color: #94a3b8;
}

[data-theme="dark"] .sheet-close-btn,
.dark-theme .sheet-close-btn {
    background: #0f172a;
    color: #cbd5e1;
}

[data-theme="dark"] .mobile-sheet-input,
.dark-theme .mobile-sheet-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

[data-theme="dark"] .mobile-sheet-input:focus,
.dark-theme .mobile-sheet-input:focus {
    border-color: #6366f1;
    background: #1e293b;
}

[data-theme="dark"] .m-chip,
.dark-theme .m-chip {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}

[data-theme="dark"] .mobile-sheet-textarea,
.dark-theme .mobile-sheet-textarea {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

/* ==========================================================================
   UNIFIED MOBILE BREAKPOINT (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Global Layout */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .page {
        display: block !important;
        padding-bottom: 84px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .page > main {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .sidebar {
        display: none !important;
    }

    .top-mobile-brand {
        display: flex !important;
    }

    .top-context-nav {
        display: none !important;
    }

    /* Top Row Clean Mobile Styling */
    .top-row {
        height: 56px !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    [data-theme="dark"] .top-row,
    .dark-theme .top-row {
        background: #0f172a !important;
        border-bottom-color: #1e293b !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .top-row-actions {
        gap: 8px !important;
    }

    .user-chip {
        padding: 3px 6px 3px 3px !important;
    }

    .user-chip-text {
        display: none !important;
    }

    .btn-topbar-logout {
        padding: 6px 10px !important;
    }

    .btn-topbar-logout .logout-label {
        display: none !important;
    }

    /* 2. Mobile Bottom Navigation */
    .mobile-bottom-nav {
        display: grid !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 62px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border-top: 1px solid #e2e8f0 !important;
        grid-template-columns: repeat(5, 1fr) !important;
        align-items: center !important;
        z-index: 99999 !important;
        padding: 2px 2px !important;
        padding-bottom: max(3px, env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
        direction: rtl !important;
    }

    .mobile-bottom-nav.has-admin {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    [data-theme="dark"] .mobile-bottom-nav,
    .dark-theme .mobile-bottom-nav {
        background: rgba(15, 23, 42, 0.96) !important;
        border-top-color: #1e293b !important;
    }

    .mobile-nav-pill {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        padding: 5px 0 !important;
        border-radius: 12px !important;
        color: #64748b !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
        white-space: nowrap !important;
    }

    .mobile-nav-pill span:first-child {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .mobile-nav-pill.active {
        color: #4f46e5 !important;
        background: rgba(79, 70, 229, 0.08) !important;
    }

    [data-theme="dark"] .mobile-nav-pill.active,
    .dark-theme .mobile-nav-pill.active {
        color: #818cf8 !important;
        background: rgba(99, 102, 241, 0.16) !important;
    }

    .mobile-nav-pill.mobile-nav-admin {
        color: #b45309 !important;
    }

    .mobile-nav-pill.mobile-nav-admin.active {
        color: #d97706 !important;
        background: rgba(245, 158, 11, 0.12) !important;
    }

    [data-theme="dark"] .mobile-nav-pill.mobile-nav-admin.active,
    .dark-theme .mobile-nav-pill.mobile-nav-admin.active {
        color: #fbbf24 !important;
        background: rgba(245, 158, 11, 0.22) !important;
    }

    /* 3. Mobile FAB Display */
    .mobile-fab-quick-task {
        display: inline-flex !important;
    }

    /* 4. Single-Column Flow & Padding */
    .page > main article.content {
        padding-inline: 12px !important;
        padding-top: 10px !important;
        padding-bottom: 24px !important;
    }

    .todo-shell {
        display: block !important;
        padding: 0 0 20px 0 !important;
    }

    /* 5. Mobile Quick Task Card */
    .quick-task-card {
        padding: 12px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 14px !important;
    }

    .quick-task-card.is-collapsed {
        padding: 8px 12px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    }

    .quick-task-card.is-collapsed .quick-task-input-row {
        margin-bottom: 0 !important;
        gap: 8px !important;
    }

    .quick-task-card.is-collapsed .quick-add-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }

    .quick-task-card.is-collapsed .quick-task-text-input {
        font-size: 14px !important;
    }

    .quick-submit-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        margin-top: 6px !important;
    }

    .quick-cancel-action-btn {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 9px !important;
        font-size: 12px !important;
    }

    .quick-submit-btn {
        flex: 1 !important;
        justify-content: center !important;
        padding: 9px !important;
        margin-top: 0 !important;
        font-size: 12px !important;
    }

    /* 6. Mobile Task Item Cards */
    .task-card-item {
        border-radius: 14px !important;
        margin-bottom: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }

    .task-card-content {
        padding: 10px 12px !important;
    }

    .task-card-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .task-custom-checkbox {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    .task-card-title-group {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .task-card-title {
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }

    .task-card-desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* 6. Mobile Task Item Cards - Decluttered & Clean Action Icons */
    .task-card-actions {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
    }

    /* Hide redundant action icons on mobile (tap the card to view/edit, date is in badge/modal) */
    .task-card-actions .task-card-today-btn,
    .task-card-actions .task-card-reschedule-btn,
    .task-card-actions .task-card-edit-btn {
        display: none !important;
    }

    /* Minimalist, clean quick action buttons on mobile: Star (★) & Delete (🗑️) */
    .task-card-actions .task-card-star-btn,
    .task-card-actions .task-card-del-btn {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        font-size: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        border: none !important;
        background: transparent !important;
        flex-shrink: 0 !important;
        touch-action: manipulation !important;
        color: #cbd5e1 !important;
    }

    .task-card-actions .task-card-star-btn.starred {
        color: #f59e0b !important;
    }

    .task-card-actions .task-card-del-btn {
        font-size: 14px !important;
        color: #94a3b8 !important;
        opacity: 0.6 !important;
    }

    .task-card-actions .task-card-del-btn:active {
        color: #ef4444 !important;
        opacity: 1 !important;
    }

    [data-theme="dark"] .task-card-actions .task-card-star-btn,
    .dark-theme .task-card-actions .task-card-star-btn {
        color: #475569 !important;
    }

    [data-theme="dark"] .task-card-actions .task-card-star-btn.starred,
    .dark-theme .task-card-actions .task-card-star-btn.starred {
        color: #fbbf24 !important;
    }

    [data-theme="dark"] .task-card-actions .task-card-del-btn,
    .dark-theme .task-card-actions .task-card-del-btn {
        color: #64748b !important;
    }

    /* Decluttered & Compact Badges Bar on Mobile */
    .task-card-badges {
        padding-right: 32px !important;
        margin-top: 4px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .task-card-badges .card-badge {
        padding: 2px 7px !important;
        font-size: 10.5px !important;
        border-radius: 6px !important;
        gap: 3px !important;
        line-height: 1.3 !important;
    }

    /* Hide redundant "مهم و اولویت‌دار" badge on mobile since the gold star icon already clearly shows it */
    .task-card-badges .badge-important {
        display: none !important;
    }

    /* Hide duplicate attachment badge on mobile since attachment pill is already visible */
    .task-card-badges .badge-attachment {
        display: none !important;
    }

    /* Compact add-to-today chip in badges */
    .card-badge.badge-add-today {
        background: #fff7ed !important;
        color: #c2410c !important;
        border: 1px solid #fdba74 !important;
        border-radius: 6px !important;
        padding: 2px 7px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        line-height: 1.2 !important;
        touch-action: manipulation !important;
        white-space: nowrap !important;
    }

    [data-theme="dark"] .card-badge.badge-add-today,
    .dark-theme .card-badge.badge-add-today {
        background: #431407 !important;
        color: #fdba74 !important;
        border-color: #ea580c !important;
    }

    /* Compact reschedule strip on mobile */
    .task-card-reschedule-strip {
        margin-top: 5px !important;
        padding-top: 5px !important;
        gap: 4px !important;
    }

    .reschedule-strip-label {
        font-size: 10.5px !important;
        margin-left: 2px !important;
    }

    .btn-reschedule-chip {
        padding: 2px 6px !important;
        font-size: 10.5px !important;
        border-radius: 6px !important;
        gap: 3px !important;
    }

    /* Compact image attachment pill on mobile */
    .btn-card-attachment-pill {
        padding: 3px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        gap: 4px !important;
        margin-top: 3px !important;
    }

    /* 7. Tasks Filter Tabs Bar Mobile */
    .tasks-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .tasks-filter-pills {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        width: 100% !important;
        gap: 4px !important;
    }

    .view-filter-btn {
        justify-content: center !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    /* 8. Dashboard Mobile Optimizations & Responsiveness */
    .dashboard-shell {
        padding: 10px 10px 84px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hide large colorful hero banner on mobile dashboard */
    .dashboard-hero {
        display: none !important;
    }

    /* Birthday Banner Mobile Responsiveness */
    .birthday-festive-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 14px !important;
        gap: 10px !important;
        border-radius: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 16px !important;
    }

    .birthday-confetti {
        font-size: 24px !important;
        width: 100% !important;
        text-align: center !important;
        letter-spacing: 3px !important;
        line-height: 1.2 !important;
    }

    .birthday-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .birthday-content h3 {
        font-size: 14.5px !important;
        margin: 0 0 8px !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    .birthday-names-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .birthday-person-chip {
        font-size: 13px !important;
        line-height: 1.5 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        background: rgba(245, 158, 11, 0.12) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
    }

    .birthday-person-chip .chip-name {
        font-size: 14px !important;
        color: #b45309 !important;
        font-weight: 800 !important;
    }

    .birthday-person-chip .chip-wish {
        font-size: 12px !important;
        color: #78350f !important;
        opacity: 0.9 !important;
    }

    .birthday-upcoming-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 16px !important;
    }

    .birthday-upcoming-banner .upcoming-banner-text {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        word-break: break-word !important;
    }

    .birthday-upcoming-banner .btn-banner-link {
        width: 100% !important;
        text-align: left !important;
        padding-top: 4px !important;
        font-size: 12.5px !important;
    }

    /* Dashboard Columns Grid & Cards Mobile Containment */
    .dashboard-columns-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-col-main,
    .dashboard-col-side {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .dash-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .dash-card-header {
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .dash-card-title-group {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        gap: 8px !important;
    }

    .dash-card-title-group h2 {
        font-size: 14.5px !important;
        word-break: break-word !important;
    }

    .dash-pills-filter {
        padding: 2px !important;
        flex-shrink: 0 !important;
    }

    .dash-pills-filter .pill {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* Quick Add Task Row - Wraps into clean 2-row layout on mobile */
    .dash-quick-add-task {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-quick-add-task input {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 13.5px !important;
        padding: 8px 12px !important;
    }

    .dash-recurrence-select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 92px) !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .btn-quick-add {
        flex: 0 0 auto !important;
        width: 84px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        text-align: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    .dash-card-body {
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Task Item - Single-line sleek compact row in Dashboard on mobile */
    .dash-task-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-task-label {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 8px !important;
        cursor: pointer !important;
    }

    .dash-task-check {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .dash-task-text-col {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .dash-task-text {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dash-task-desc {
        display: none !important;
    }

    .dash-task-meta {
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .task-category-tag,
    .task-time-tag,
    .dash-recurrence-tag {
        font-size: 9.5px !important;
        padding: 1.5px 5px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .btn-star-task,
    .btn-delete-task {
        width: 22px !important;
        height: 22px !important;
        font-size: 13px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        flex-shrink: 0 !important;
    }

    /* Meetings & Loan Cards Mobile Containment */
    .dash-meetings-list {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-meeting-card {
        padding: 12px !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .meeting-actions-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .btn-dash-join,
    .btn-dash-toggle-meeting {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    .dash-due-alert-box {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
    }

    .dash-loan-card {
        margin: 6px 0 !important;
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-loan-card .btn-pay-now {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 12px !important;
    }

    /* Notes & Checklists Mobile Responsiveness */
    .notes-metrics-grid {
        display: none !important;
    }

    .quick-note-container {
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .quick-note-box {
        padding: 10px 14px !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .quick-note-placeholder {
        font-size: 13.5px !important;
    }

    .notes-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .note-card {
        padding: 0 !important;
        border-radius: 16px !important;
        gap: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .note-card-header {
        padding: 12px 14px 6px !important;
    }

    .note-card-title {
        font-size: 15px !important;
    }

    .note-card-body {
        padding: 6px 14px 12px !important;
        gap: 8px !important;
    }

    .note-card-text {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        max-height: 220px !important;
    }

    .note-card-footer {
        padding: 8px 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .note-date-text {
        font-size: 10.5px !important;
        color: #94a3b8 !important;
    }

    .note-card-actions {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .btn-card-action {
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }

    /* Checklist in Note Card */
    .card-checklist-box {
        padding: 2px 0 !important;
        gap: 6px !important;
    }

    .card-checklist-meta-row {
        font-size: 11px !important;
    }

    .card-checklist-items {
        gap: 4px !important;
    }

    .card-checklist-row {
        padding: 6px 6px !important;
        font-size: 13px !important;
        gap: 8px !important;
        border-radius: 6px !important;
    }

    .card-check-box {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
        border-radius: 5px !important;
    }

    /* Dashboard Pinned Notes */
    .dash-pinned-notes-grid {
        grid-template-columns: 1fr !important;
        padding: 6px 4px !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-mini-note {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-mini-note h5 {
        font-size: 13.5px !important;
    }

    .dash-mini-note p {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .dash-mini-checklist {
        gap: 4px !important;
        margin: 4px 0 !important;
    }

    .dash-mini-check-item {
        font-size: 11.5px !important;
    }

    /* Mobile Toast Alert - Positioned cleanly below header */
    .notif-toast-card {
        position: fixed !important;
        top: 62px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        max-width: calc(100vw - 20px) !important;
        width: auto !important;
        transform: none !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
    }

    /* 9. Mobile Modals, Bottom Sheets & Form Rows */
    .loan-modal-backdrop,
    .calendar-modal-backdrop,
    .holiday-modal-backdrop,
    .notif-modal-backdrop {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        z-index: 200000 !important;
    }

    .delete-modal-backdrop,
    .logout-modal-backdrop {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
        margin: 0 !important;
        background: rgba(15, 23, 42, 0.75) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        z-index: 999999 !important;
    }

    .loan-modal-card,
    .calendar-modal-card,
    .holiday-modal-card,
    .notif-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        max-height: calc(100dvh - 16px) !important;
        height: auto !important;
        border-radius: 24px 24px 0 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 200001 !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35) !important;
        animation: mobileSheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .delete-modal-card,
    .logout-modal-card {
        width: calc(100% - 28px) !important;
        max-width: 420px !important;
        margin: auto 14px 20px 14px !important;
        border-radius: 20px !important;
        z-index: 200001 !important;
    }

    .loan-modal-header,
    .calendar-modal-header,
    .holiday-modal-header,
    .notif-modal-header {
        flex-shrink: 0 !important;
        padding: 14px 18px !important;
    }

    .modal-close-btn,
    .notif-modal-close-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        touch-action: manipulation !important;
    }

    .loan-modal-body,
    .calendar-modal-body,
    .notif-modal-body,
    .note-edit-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 16px !important;
        overscroll-behavior: contain !important;
    }

    .loan-form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .loan-form-group.col-6,
    .loan-form-group.col-8,
    .loan-form-group.col-4 {
        width: 100% !important;
    }

    .loan-modal-footer,
    .calendar-modal-footer,
    .notif-modal-footer {
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        padding: 12px 16px max(16px, env(safe-area-inset-bottom)) 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 10px !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.04) !important;
    }

    [data-theme="dark"] .loan-modal-footer,
    .dark-theme .loan-modal-footer,
    [data-theme="dark"] .calendar-modal-footer,
    .dark-theme .calendar-modal-footer,
    [data-theme="dark"] .notif-modal-footer,
    .dark-theme .notif-modal-footer {
        background: #0f172a !important;
        border-top-color: #1e293b !important;
    }

    .loan-modal-footer .btn-cancel,
    .calendar-modal-footer .btn-cancel,
    .notif-modal-footer .btn-notif-cancel {
        flex: 1 1 35% !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        background: #ffffff !important;
        border: 1.5px solid #cbd5e1 !important;
        color: #475569 !important;
    }

    [data-theme="dark"] .loan-modal-footer .btn-cancel,
    .dark-theme .loan-modal-footer .btn-cancel,
    [data-theme="dark"] .calendar-modal-footer .btn-cancel,
    .dark-theme .calendar-modal-footer .btn-cancel,
    [data-theme="dark"] .notif-modal-footer .btn-notif-cancel,
    .dark-theme .notif-modal-footer .btn-notif-cancel {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #cbd5e1 !important;
    }

    .loan-modal-footer .btn-confirm-save,
    .loan-modal-footer .btn-submit-loan,
    .loan-modal-footer .btn-save-loan,
    .loan-modal-footer .btn-save-note,
    .calendar-modal-footer .btn-submit-loan,
    .calendar-modal-footer .btn-confirm-save,
    .calendar-modal-footer .btn-confirm-close,
    .notif-modal-footer .btn-notif-action {
        flex: 2 1 60% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        background: linear-gradient(135deg, #059669, #047857) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
    }

    .notif-modal-footer .btn-notif-dismiss {
        flex: 1 1 100% !important;
        min-height: 42px !important;
        order: 3 !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }
}

/* Animations for Mobile Bottom Sheets */
@keyframes mobileSheetSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Auto-hide Mobile Bottom Nav and Floating Action Buttons when ANY modal or notification dropdown is active */
body.has-active-modal .mobile-bottom-nav,
body.has-active-modal .mobile-fab-quick-task,
body.has-active-modal .offline-status-banner,
body:has(.loan-modal-backdrop) .mobile-bottom-nav,
body:has(.calendar-modal-backdrop) .mobile-bottom-nav,
body:has(.holiday-modal-backdrop) .mobile-bottom-nav,
body:has(.delete-modal-backdrop) .mobile-bottom-nav,
body:has(.logout-modal-backdrop) .mobile-bottom-nav,
body:has(.notif-modal-backdrop) .mobile-bottom-nav,
body:has(.notif-dropdown-card) .mobile-bottom-nav,
body:has(.image-lightbox-backdrop) .mobile-bottom-nav,
body:has(.trello-modal-backdrop) .mobile-bottom-nav,
body:has(.chat-modal-backdrop) .mobile-bottom-nav,
body:has(.mobile-sheet-backdrop) .mobile-bottom-nav,
body:has(.loan-modal-backdrop) .mobile-fab-quick-task,
body:has(.calendar-modal-backdrop) .mobile-fab-quick-task,
body:has(.holiday-modal-backdrop) .mobile-fab-quick-task,
body:has(.delete-modal-backdrop) .mobile-fab-quick-task,
body:has(.logout-modal-backdrop) .mobile-fab-quick-task,
body:has(.notif-modal-backdrop) .mobile-fab-quick-task,
body:has(.notif-dropdown-card) .mobile-fab-quick-task,
body:has(.image-lightbox-backdrop) .mobile-fab-quick-task,
body:has(.trello-modal-backdrop) .mobile-fab-quick-task,
body:has(.chat-modal-backdrop) .mobile-fab-quick-task,
body:has(.mobile-sheet-backdrop) .mobile-fab-quick-task,
body:has(.loan-modal-backdrop) .offline-status-banner,
body:has(.calendar-modal-backdrop) .offline-status-banner,
body:has(.notif-modal-backdrop) .offline-status-banner {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.has-active-modal,
body:has(.loan-modal-backdrop),
body:has(.calendar-modal-backdrop),
body:has(.holiday-modal-backdrop),
body:has(.delete-modal-backdrop),
body:has(.logout-modal-backdrop),
body:has(.notif-modal-backdrop),
body:has(.image-lightbox-backdrop) {
    overflow: hidden !important;
}

/* Ensure Top Row doesn't clip or under-stack notifications */
.top-row:has(.notif-dropdown-card),
.top-row:has(.notif-modal-backdrop),
.page > main > .top-row:has(.notif-dropdown-card),
.page > main > .top-row:has(.notif-modal-backdrop) {
    z-index: 200000 !important;
}

/* ==========================================================================
   RECURRENCE, IMAGE ATTACHMENTS, EXPORT, LIGHTBOX & OFFLINE PWA STYLES
   ========================================================================== */

/* Recurrence Chip & Badges */
.chip-recurrence-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.22);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12.5px;
}
.chip-recurrence-wrap select {
    background: transparent;
    border: none;
    font-size: 12.5px;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.badge-recurrence {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(124, 58, 237, 0.12)) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(79, 70, 229, 0.25) !important;
    font-weight: 600 !important;
}
.dark-theme .badge-recurrence, [data-theme="dark"] .badge-recurrence {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}
.badge-attachment {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #0284c7 !important;
    border: 1px solid rgba(14, 165, 233, 0.25) !important;
    font-weight: 600 !important;
}
.dark-theme .badge-attachment, [data-theme="dark"] .badge-attachment {
    background: rgba(14, 165, 233, 0.2) !important;
    color: #38bdf8 !important;
    border-color: rgba(14, 165, 233, 0.35) !important;
}

/* Task & Note Image Attachments */
.task-card-image-box {
    margin-top: 8px;
    max-width: 220px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    cursor: zoom-in;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.task-card-image-box:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.task-card-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

/* Note Card Image Banner (Google Keep Style) */
.note-card-image-box {
    width: 100%;
    height: 140px;
    overflow: hidden;
    cursor: zoom-in;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.03);
    transition: opacity 0.2s ease;
}
.note-card-image-box:hover {
    opacity: 0.94;
}
.note-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Modal Thumb Boxes & Upload */
.task-modal-thumb-box, .note-modal-thumb-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.dark-theme .task-modal-thumb-box, [data-theme="dark"] .task-modal-thumb-box,
.dark-theme .note-modal-thumb-box, [data-theme="dark"] .note-modal-thumb-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
.task-modal-thumb, .note-modal-thumb {
    max-height: 180px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.task-thumb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.btn-thumb-view {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.btn-thumb-view:hover {
    background: #4f46e5;
    color: #fff;
}
.btn-remove-thumb {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.btn-remove-thumb:hover {
    background: #ef4444;
    color: #fff;
}
.task-file-upload-box, .note-upload-box {
    border: 2px dashed rgba(79, 70, 229, 0.3);
    background: rgba(79, 70, 229, 0.02);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
}
.task-file-upload-box:hover, .note-upload-box:hover {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.05);
}
.btn-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 6px;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 500;
}
.dark-theme .btn-upload-label, [data-theme="dark"] .btn-upload-label {
    color: #818cf8;
}
.task-file-hidden-input {
    display: none !important;
}
.uploading-spinner {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #d97706;
}

/* Export Modal */
.hero-btn-export {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
}
.hero-btn-export:hover {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    transform: translateY(-1px);
}
.export-modal-card {
    max-width: 540px !important;
}
.export-modal-desc {
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.6;
}
.dark-theme .export-modal-desc, [data-theme="dark"] .export-modal-desc {
    color: #94a3b8;
}
.export-options-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.export-option-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    width: 100%;
}
.dark-theme .export-option-card, [data-theme="dark"] .export-option-card {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
.export-option-card:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12);
}
.dark-theme .export-option-card:hover, [data-theme="dark"] .export-option-card:hover {
    background: #1e3a5f;
    border-color: #60a5fa;
}
.export-opt-icon {
    font-size: 26px;
    line-height: 1;
}
.export-opt-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.export-opt-info strong {
    font-size: 14px;
    color: #1e293b;
}
.dark-theme .export-opt-info strong, [data-theme="dark"] .export-opt-info strong {
    color: #f8fafc;
}
.export-opt-info small {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.4;
}
.dark-theme .export-opt-info small, [data-theme="dark"] .export-opt-info small {
    color: #94a3b8;
}
.export-opt-badge {
    background: #10b981;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ============================================================
   ATTACHMENT PILLS & VIEW BUTTONS (NO LARGE RAW IMAGES)
   ============================================================ */
.attachment-attached-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

[data-theme="dark"] .attachment-attached-box,
.dark-theme .attachment-attached-box {
    background: #1e293b;
    border-color: #334155;
}

.attachment-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.attachment-file-icon {
    font-size: 22px;
    line-height: 1;
}

.attachment-file-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attachment-file-text strong {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

[data-theme="dark"] .attachment-file-text strong,
.dark-theme .attachment-file-text strong {
    color: #f1f5f9;
}

.attachment-file-text small {
    font-size: 11px;
    color: #64748b;
}

[data-theme="dark"] .attachment-file-text small,
.dark-theme .attachment-file-text small {
    color: #94a3b8;
}

.attachment-file-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-attachment-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-attachment-view:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-attachment-delete {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-attachment-delete:hover {
    background: #fecaca;
    color: #b91c1c;
}

[data-theme="dark"] .btn-attachment-delete,
.dark-theme .btn-attachment-delete {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* Card Attachment Pill (on Task cards & Note cards) */
.task-card-attachment-row,
.note-card-attachment-row {
    margin: 8px 0;
    display: flex;
    align-items: center;
}

.btn-card-attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-card-attachment-pill:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);
}

.btn-card-attachment-pill .att-icon {
    font-size: 14px;
}

.btn-card-attachment-pill .att-zoom-icon {
    font-size: 11px;
    opacity: 0.8;
}

[data-theme="dark"] .btn-card-attachment-pill,
.dark-theme .btn-card-attachment-pill {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

[data-theme="dark"] .btn-card-attachment-pill:hover,
.dark-theme .btn-card-attachment-pill:hover {
    background: #3b82f6;
    color: #ffffff;
}

/* Image Lightbox */
.image-lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300000 !important;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: lightboxFadeIn 0.2s ease-out;
}
@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.image-lightbox-card {
    background: #ffffff;
    border-radius: 16px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: lightboxScaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lightboxScaleUp {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.dark-theme .image-lightbox-card, [data-theme="dark"] .image-lightbox-card {
    background: #1e293b;
    color: #f8fafc;
}
.lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.dark-theme .lightbox-header, [data-theme="dark"] .lightbox-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.lightbox-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
}
.dark-theme .lightbox-title, [data-theme="dark"] .lightbox-title {
    color: #e2e8f0;
}
.lightbox-close-btn {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}
.lightbox-close-btn:hover {
    background: #ef4444;
    color: #fff;
}
.lightbox-body {
    padding: 12px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b0f19;
}
.lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
}

/* Offline PWA Status Banner & Notifications */
.offline-status-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: slideUpToast 0.3s ease-out;
}
@keyframes slideUpToast {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.offline-status-banner.is-offline {
    background: rgba(220, 38, 38, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.offline-status-banner.is-online {
    background: rgba(16, 185, 129, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-retry-sync {
    background: #fff;
    color: #dc2626;
    border: none;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.btn-retry-sync:hover {
    background: #fee2e2;
}

/* Screen style: hide printable header by default */
.calendar-print-header {
    display: none !important;
}

/* Clean Media Print Styles for Calendar & Tasks */
@media print {
    @page {
        size: A4 landscape;
        margin: 6mm 8mm;
    }

    /* Hide navigation, sidebars, headers, floating bars, action buttons, heroes */
    header,
    nav,
    aside,
    footer,
    .top-navbar,
    .main-sidebar,
    .sidebar,
    .mobile-bottom-nav,
    .mobile-speed-dial,
    .mobile-task-sheet,
    .mobile-fab,
    .hero-action-btn,
    .hero-btn,
    .tasks-hero-banner,
    .calendar-filters-toolbar,
    .tasks-filter-bar,
    .btn-new-meeting,
    .btn-new-loan,
    .btn-new-note,
    .quick-task,
    .quick-task-panel,
    .quick-note-container,
    .task-card-actions,
    .note-card-actions,
    .calendar-actions,
    .calendar-nav-btn,
    .calendar-today-btn,
    .calendar-hero-controls,
    .offline-status-banner,
    .loan-modal-backdrop,
    .image-lightbox-backdrop,
    .calendar-modal-backdrop,
    .holiday-modal-backdrop,
    .day-detail-modal,
    .todo-toast {
        display: none !important;
    }

    body, html {
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 11pt !important;
        font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .todo-shell, .calendar-board, .notes-page-shell, .content, main {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Isolated Calendar Printable Area */
    .calendar-printable-area {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Clean Printable Calendar Header */
    .calendar-print-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 8px !important;
        margin-bottom: 10px !important;
        border-bottom: 2px solid #0f172a !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .calendar-print-header .print-header-brand {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .calendar-print-header .print-logo-icon {
        font-size: 20pt !important;
        line-height: 1 !important;
    }

    .calendar-print-header .print-calendar-title {
        font-size: 15pt !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .calendar-print-header .print-calendar-subtitle {
        font-size: 8.5pt !important;
        color: #475569 !important;
        display: block !important;
        margin-top: 1px !important;
    }

    .calendar-print-header .print-header-meta {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
    }

    .calendar-print-header .print-meta-badge {
        font-size: 8.5pt !important;
        font-weight: 700 !important;
        background: #e2e8f0 !important;
        color: #1e293b !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
    }

    .calendar-print-header .print-meta-date {
        font-size: 8pt !important;
        color: #64748b !important;
    }

    /* Weekday Headers */
    .calendar-weekdays-row {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
    }

    .calendar-weekday-cell {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        padding: 4px 2px !important;
        font-weight: 700 !important;
        font-size: 8.5pt !important;
        text-align: center !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .calendar-weekday-cell.is-friday {
        background: #fee2e2 !important;
        color: #b91c1c !important;
        border-color: #fca5a5 !important;
    }

    .cal-day-desktop {
        display: inline !important;
    }

    .cal-day-mobile {
        display: none !important;
    }

    /* Month Grid & Day Cards */
    .calendar-month-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        page-break-inside: avoid !important;
    }

    .calendar-day-card {
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 4px 6px !important;
        min-height: 85px !important;
        background: #ffffff !important;
        page-break-inside: avoid !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .calendar-day-card.outside {
        opacity: 0.3 !important;
        background: #f8fafc !important;
    }

    .calendar-day-card.is-holiday {
        background: #fef2f2 !important;
        border-color: #fca5a5 !important;
    }

    .calendar-day-card.is-today {
        border: 2px solid #3b82f6 !important;
    }

    .day-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 2px !important;
        padding-bottom: 2px !important;
        border-bottom: 1px dashed #e2e8f0 !important;
    }

    .day-card-number {
        font-size: 10.5pt !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .calendar-day-card.is-holiday .day-card-number {
        color: #dc2626 !important;
    }

    .today-tag-pill {
        font-size: 6.5pt !important;
        background: #3b82f6 !important;
        color: #fff !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
    }

    .holiday-pill {
        font-size: 7pt !important;
        color: #dc2626 !important;
        font-weight: 600 !important;
    }

    .hol-dot {
        font-size: 5pt !important;
        margin-left: 2px;
    }

    .day-card-chips {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .calendar-chip {
        font-size: 7pt !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.3 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .more-chips-pill {
        font-size: 6.5pt !important;
        color: #64748b !important;
        background: #f1f5f9 !important;
        border-radius: 3px !important;
        padding: 1px 3px !important;
    }

    /* Week / Day view list cards in print */
    .calendar-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .calendar-list-card {
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 6px !important;
        page-break-inside: avoid !important;
    }

    .calendar-event {
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
    }

    /* Tasks list print */
    .task-card {
        page-break-inside: avoid !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        margin-bottom: 8px !important;
    }
}

/* ==========================================================================
   ADMIN PANEL STYLES (مدیریت کلان سامانه، پایش کاربران و لاگ‌های امنیتی)
   ========================================================================== */
.admin-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 0 60px;
    direction: rtl;
}

/* Unauthorized Admin Screen */
.admin-unauthorized-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 65vh;
    padding: 24px;
}

.admin-unauth-card {
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 20px;
    padding: 40px 30px;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.unauth-icon {
    font-size: 54px;
    display: block;
    margin-bottom: 16px;
}

.admin-unauth-card h2 {
    font-size: 20px;
    font-weight: 800;
    color: #991b1b;
    margin-bottom: 10px;
}

.admin-unauth-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.unauth-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-unauth-back {
    display: inline-block;
    background: #0f172a;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-unauth-promote {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

/* Header */
.admin-top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.admin-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-crown-badge {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25);
    border: 1px solid #fcd34d;
    flex-shrink: 0;
}

.admin-main-heading {
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.admin-sub-heading {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-admin-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.2s;
}

.btn-admin-refresh:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.refresh-icon.spinning {
    animation: spin 1s linear infinite;
}

.btn-admin-exit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-admin-exit:hover {
    background: #1e293b;
    color: #ffffff;
}

/* KPI Stat Cards */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.kpi-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

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

.kpi-icon {
    font-size: 26px;
}

.kpi-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.kpi-badge.success {
    background: #ecfdf5;
    color: #059669;
}

.kpi-badge.info {
    background: #eff6ff;
    color: #2563eb;
}

.kpi-badge.warning {
    background: #fffbeb;
    color: #d97706;
}

.kpi-val {
    font-size: 32px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    display: block;
}

.kpi-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
    display: block;
}

.kpi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    color: #64748b;
}

/* Tabs Nav */
.admin-tabs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 22px;
    overflow-x: auto;
}

.admin-tab-btn {
    flex: 1;
    min-width: 170px;
    padding: 12px 18px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
}

.admin-tab-btn:hover {
    color: #0f172a;
    background: #f8fafc;
}

.admin-tab-btn.active {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

/* Toolbar (Search & Filter) */
.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 4px 14px;
    flex: 1;
    min-width: 280px;
    max-width: 500px;
}

.toolbar-search-box .search-icon {
    font-size: 16px;
    color: #94a3b8;
    margin-left: 8px;
}

.toolbar-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    width: 100%;
    padding: 6px 0;
    color: #0f172a;
}

.clear-search-btn {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
}

.toolbar-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:hover {
    border-color: #94a3b8;
}

.filter-pill.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

/* Table Card */
.admin-table-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.admin-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    text-align: right;
    white-space: nowrap;
}

.admin-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.admin-table tr:hover td {
    background: #fafafa;
}

.admin-table tr.row-inactive td {
    background: #fff5f5;
    opacity: 0.85;
}

.admin-table tr.row-admin td {
    background: #fffbeb;
}

/* Table Cells */
.col-id {
    font-weight: 700;
    color: #64748b;
    font-family: monospace;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cell-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: #334155;
    overflow: hidden;
    flex-shrink: 0;
}

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

.cell-avatar.is-emoji span {
    font-size: 20px;
}

.cell-name {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

.cell-id-sub {
    font-size: 11px;
    color: #94a3b8;
}

.contact-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
}

.dates-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: #475569;
}

.dates-cell small {
    color: #94a3b8;
}

.activities-cell-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.chip-item {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.badge-role {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-role.admin {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge-role.user {
    background: #f1f5f9;
    color: #475569;
}

.badge-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-status.active {
    background: #d1fae5;
    color: #065f46;
}

.badge-status.inactive {
    background: #fee2e2;
    color: #991b1b;
}

/* Table Action Buttons */
.action-buttons-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-action-inspect {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action-inspect:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.btn-action-toggle {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.btn-action-toggle.deactivate {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.btn-action-toggle.deactivate:hover {
    background: #ef4444;
    color: #ffffff;
}

.btn-action-toggle.activate {
    background: #d1fae5;
    color: #065f46;
    border-color: #6ee7b7;
}

.btn-action-toggle.activate:hover {
    background: #10b981;
    color: #ffffff;
}

.btn-action-admin-role {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
}

.btn-action-admin-role.promote:hover {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}

.btn-action-admin-role.demote:hover {
    background: #64748b;
    color: #ffffff;
}

/* Overview Tab Specific */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
}

.overview-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

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

.overview-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.btn-link-tab {
    background: transparent;
    border: none;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.activity-bars-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.act-bar-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    margin-bottom: 6px;
}

.act-bar-label-row strong {
    color: #0f172a;
}

.progress-track {
    height: 10px;
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 20px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fill-blue { background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); }
.fill-emerald { background: linear-gradient(90deg, #10b981 0%, #059669 100%); }
.fill-amber { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }
.fill-violet { background: linear-gradient(90deg, #8b5cf6 0%, #7c3aed 100%); }
.fill-pink { background: linear-gradient(90deg, #ec4899 0%, #db2777 100%); }

/* Recent Logins Stream */
.recent-logins-stream {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stream-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.stream-item.revoked {
    border-right: 4px solid #ef4444;
}

.stream-item.active {
    border-right: 4px solid #10b981;
}

.stream-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.stream-details {
    flex: 1;
    min-width: 0;
}

.stream-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 2px;
}

.stream-time {
    font-size: 11px;
    color: #94a3b8;
}

.stream-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #64748b;
}

.stream-sub-row code {
    background: #e2e8f0;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
}

.stream-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.badge-active { background: #d1fae5; color: #065f46; }
.badge-revoked { background: #fee2e2; color: #991b1b; }

/* Inspector Tab */
.inspector-header-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.inspector-picker {
    margin-bottom: 16px;
}

.picker-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.inspector-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
}

.selected-user-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.sel-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    overflow: hidden;
}

.sel-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sel-user-texts h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.sel-user-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
}

.sel-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

.sel-badge.active { background: #d1fae5; color: #065f46; }
.sel-badge.inactive { background: #fee2e2; color: #991b1b; }

.sel-user-quick-actions {
    margin-right: auto;
}

.btn-sel-toggle {
    padding: 8px 18px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sel-toggle.deactivate {
    background: #fee2e2;
    color: #b91c1c;
}

.btn-sel-toggle.deactivate:hover {
    background: #dc2626;
    color: #ffffff;
}

.btn-sel-toggle.activate {
    background: #d1fae5;
    color: #065f46;
}

.btn-sel-toggle.activate:hover {
    background: #059669;
    color: #ffffff;
}

/* Inspector Subtabs */
.inspector-subtabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.subtab-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.subtab-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* Inspector Items Grid */
.inspector-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.user-item-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.item-title {
    flex: 1;
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
}

.item-prio-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
}

.item-desc {
    font-size: 12.5px;
    color: #64748b;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed #f1f5f9;
    padding-top: 8px;
    font-size: 11.5px;
    color: #94a3b8;
}

.item-rec-badge {
    color: #2563eb;
    font-weight: 700;
}

.empty-items-box {
    grid-column: 1 / -1;
    text-align: center;
    padding: 36px;
    color: #94a3b8;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    font-size: 14px;
}

.btn-revoke-sess-item {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.btn-revoke-sess-item:hover {
    background: #dc2626;
    color: #ffffff;
}

/* Admin Alerts */
.admin-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 13.5px;
    font-weight: 700;
}

.admin-alert-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.admin-alert-danger {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.alert-close-btn {
    margin-right: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
}

/* Nav Menu & Top Context Admin styling */
.side-admin-nav-item {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.12) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.side-admin-nav-item .icon-admin {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.side-admin-nav-item .admin-badge {
    background: #f59e0b !important;
    color: #ffffff !important;
}

.topbar-admin-pill {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    font-weight: 800 !important;
}

/* ============================================================
   ADMIN PANEL - DARK THEME OVERRIDES
   ============================================================ */
[data-theme="dark"] .admin-main-heading,
.dark-theme .admin-main-heading,
[data-theme="dark"] .kpi-val,
.dark-theme .kpi-val,
[data-theme="dark"] .overview-card-header h3,
.dark-theme .overview-card-header h3,
[data-theme="dark"] .cell-name,
.dark-theme .cell-name,
[data-theme="dark"] .item-title,
.dark-theme .item-title,
[data-theme="dark"] .inspector-select,
.dark-theme .inspector-select,
[data-theme="dark"] .sel-user-texts h3,
.dark-theme .sel-user-texts h3,
[data-theme="dark"] .toolbar-input,
.dark-theme .toolbar-input {
    color: #f0f6fc !important;
}

[data-theme="dark"] .admin-unauth-card,
.dark-theme .admin-unauth-card,
[data-theme="dark"] .kpi-card,
.dark-theme .kpi-card,
[data-theme="dark"] .admin-tabs-nav,
.dark-theme .admin-tabs-nav,
[data-theme="dark"] .admin-table-card,
.dark-theme .admin-table-card,
[data-theme="dark"] .overview-card,
.dark-theme .overview-card,
[data-theme="dark"] .inspector-header-box,
.dark-theme .inspector-header-box,
[data-theme="dark"] .user-item-card,
.dark-theme .user-item-card,
[data-theme="dark"] .toolbar-search-box,
.dark-theme .toolbar-search-box,
[data-theme="dark"] .filter-pill,
.dark-theme .filter-pill,
[data-theme="dark"] .subtab-btn,
.dark-theme .subtab-btn,
[data-theme="dark"] .btn-admin-refresh,
.dark-theme .btn-admin-refresh,
[data-theme="dark"] .btn-action-admin-role,
.dark-theme .btn-action-admin-role {
    background: #161b22 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .admin-table th,
.dark-theme .admin-table th,
[data-theme="dark"] .admin-table td,
.dark-theme .admin-table td {
    background: #161b22 !important;
    border-color: #21262d !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .admin-table tr:hover td,
.dark-theme .admin-table tr:hover td {
    background: #1c2128 !important;
}

[data-theme="dark"] .admin-table tr.row-inactive td,
.dark-theme .admin-table tr.row-inactive td {
    background: #251214 !important;
}

[data-theme="dark"] .admin-table tr.row-admin td,
.dark-theme .admin-table tr.row-admin td {
    background: #241d13 !important;
}

[data-theme="dark"] .stream-item,
.dark-theme .stream-item,
[data-theme="dark"] .selected-user-card,
.dark-theme .selected-user-card,
[data-theme="dark"] .chip-item,
.dark-theme .chip-item,
[data-theme="dark"] .cell-avatar,
.dark-theme .cell-avatar,
[data-theme="dark"] .sel-user-avatar,
.dark-theme .sel-user-avatar,
[data-theme="dark"] .inspector-select,
.dark-theme .inspector-select {
    background: #21262d !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .admin-tab-btn,
.dark-theme .admin-tab-btn {
    color: #8b949e;
}

[data-theme="dark"] .admin-tab-btn.active,
.dark-theme .admin-tab-btn.active {
    background: #30363d !important;
    color: #f0f6fc !important;
}

[data-theme="dark"] .kpi-sub,
.dark-theme .kpi-sub,
[data-theme="dark"] .kpi-label,
.dark-theme .kpi-label,
[data-theme="dark"] .admin-sub-heading,
.dark-theme .admin-sub-heading,
[data-theme="dark"] .dates-cell small,
.dark-theme .dates-cell small,
[data-theme="dark"] .cell-id-sub,
.dark-theme .cell-id-sub,
[data-theme="dark"] .item-desc,
.dark-theme .item-desc {
    color: #8b949e !important;
}

/* Base Desktop rule: hide mobile bottom nav on screens > 768px */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Mobile Responsive Admin Panel */
@media (max-width: 768px) {
    .admin-container {
        padding: 10px 12px 84px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .admin-top-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }

    .admin-title-group {
        gap: 12px !important;
    }

    .admin-crown-badge {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
        border-radius: 12px !important;
    }

    .admin-main-heading {
        font-size: 17px !important;
        margin: 0 !important;
    }

    .admin-sub-heading {
        font-size: 11.5px !important;
    }

    .admin-header-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .btn-admin-refresh,
    .btn-admin-exit {
        flex: 1 !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    .admin-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .kpi-card {
        padding: 12px 12px !important;
        border-radius: 14px !important;
    }

    .kpi-header {
        margin-bottom: 6px !important;
    }

    .kpi-icon {
        font-size: 20px !important;
    }

    .kpi-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    .kpi-val {
        font-size: 20px !important;
    }

    .kpi-label {
        font-size: 11px !important;
    }

    .kpi-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        font-size: 10.5px !important;
    }

    .admin-tabs-nav {
        gap: 6px !important;
        padding: 4px !important;
        margin-bottom: 16px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
    }

    .admin-tabs-nav::-webkit-scrollbar {
        display: none !important;
    }

    .admin-tab-btn {
        flex: 0 0 auto !important;
        min-width: 130px !important;
        padding: 9px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    .admin-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .toolbar-search-box {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 3px 12px !important;
    }

    .toolbar-filters {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        width: 100% !important;
        scrollbar-width: none !important;
    }

    .toolbar-filters::-webkit-scrollbar {
        display: none !important;
    }

    .filter-pill {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 6px 12px !important;
        font-size: 11.5px !important;
        border-radius: 8px !important;
    }

    /* Table horizontal scroll container to prevent page blowout */
    .admin-table-card {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    }

    .admin-table {
        min-width: 680px !important;
        font-size: 12px !important;
    }

    .admin-table th,
    .admin-table td {
        padding: 10px 12px !important;
    }

    .overview-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .overview-card {
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }

    .inspector-header-box {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }

    .selected-user-card {
        padding: 12px !important;
        gap: 10px !important;
    }

    .inspector-items-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .action-buttons-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    .btn-action-inspect,
    .btn-action-toggle,
    .btn-action-admin-role {
        padding: 5px 8px !important;
        font-size: 11px !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   Profile Admin Management Access Card & Roles
   ========================================================================== */
.profile-admin-quick-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%), #ffffff;
    border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

[data-theme="dark"] .profile-admin-quick-card,
.dark-theme .profile-admin-quick-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(180, 83, 9, 0.06) 100%), #161b22;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.profile-admin-card-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}

.profile-admin-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
    flex-shrink: 0;
}

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

.profile-admin-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.admin-pill-tag {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .admin-pill-tag,
.dark-theme .admin-pill-tag {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

.admin-pill-level {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
}

[data-theme="dark"] .admin-pill-level,
.dark-theme .admin-pill-level {
    color: #94a3b8;
}

.profile-admin-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

[data-theme="dark"] .profile-admin-title,
.dark-theme .profile-admin-title {
    color: #f8fafc;
}

.profile-admin-desc {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

[data-theme="dark"] .profile-admin-desc,
.dark-theme .profile-admin-desc {
    color: #94a3b8;
}

.btn-goto-admin-panel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-goto-admin-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45);
    color: #ffffff !important;
}

.user-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.12) 100%);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 800;
}

[data-theme="dark"] .user-admin-badge,
.dark-theme .user-admin-badge {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

@media (max-width: 768px) {
    .profile-admin-quick-card {
        padding: 16px 14px !important;
        margin-bottom: 16px !important;
    }
    .profile-admin-card-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 12px !important;
    }
    .profile-admin-icon-box {
        margin: 0 auto !important;
    }
    .profile-admin-badge-row {
        justify-content: center !important;
    }
    .profile-admin-title {
        font-size: 15px !important;
    }
    .profile-admin-desc {
        font-size: 12px !important;
    }
    .btn-goto-admin-panel {
        width: 100% !important;
        justify-content: center !important;
        padding: 11px !important;
        font-size: 13.5px !important;
    }
}

/* ==========================================================================
   Mobile Calendar View Polish
   ========================================================================== */
@media (max-width: 768px) {
    .tasks-hero-banner.hero-calendar {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 4px 0 10px !important;
        margin-bottom: 8px !important;
        color: var(--ink, #1e293b) !important;
    }

    .tasks-hero-banner.hero-calendar .tasks-hero-content {
        margin-bottom: 8px !important;
    }

    .tasks-hero-banner.hero-calendar .calendar-hero-controls {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .tasks-hero-banner.hero-calendar .calendar-hero-nav-group {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 6px !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    .tasks-hero-banner.hero-calendar .calendar-hero-views {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 4px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        justify-content: space-between !important;
    }

    [data-theme="dark"] .tasks-hero-banner.hero-calendar .calendar-hero-nav-group,
    [data-theme="dark"] .tasks-hero-banner.hero-calendar .calendar-hero-views,
    .dark-theme .tasks-hero-banner.hero-calendar .calendar-hero-nav-group,
    .dark-theme .tasks-hero-banner.hero-calendar .calendar-hero-views {
        background: #1e293b !important;
        border-color: #334155 !important;
    }

    .tasks-hero-banner.hero-calendar .cal-nav-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        text-align: center !important;
        color: #475569 !important;
    }

    .tasks-hero-banner.hero-calendar .cal-view-pill {
        flex: 1 1 auto !important;
        text-align: center !important;
        font-size: 11.5px !important;
        padding: 6px 6px !important;
        color: #475569 !important;
    }

    .tasks-hero-banner.hero-calendar .cal-add-event-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-top: 4px !important;
    }

    [data-theme="dark"] .tasks-hero-banner.hero-calendar .cal-nav-btn,
    [data-theme="dark"] .tasks-hero-banner.hero-calendar .cal-view-pill,
    .dark-theme .tasks-hero-banner.hero-calendar .cal-nav-btn,
    .dark-theme .tasks-hero-banner.hero-calendar .cal-view-pill {
        color: #cbd5e1 !important;
    }

    .tasks-hero-banner.hero-calendar .cal-nav-btn.today,
    .tasks-hero-banner.hero-calendar .cal-view-pill.active {
        background: #ffffff !important;
        color: #4f46e5 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }

    [data-theme="dark"] .tasks-hero-banner.hero-calendar .cal-nav-btn.today,
    [data-theme="dark"] .tasks-hero-banner.hero-calendar .cal-view-pill.active,
    .dark-theme .tasks-hero-banner.hero-calendar .cal-nav-btn.today,
    .dark-theme .tasks-hero-banner.hero-calendar .cal-view-pill.active {
        background: #0f172a !important;
        color: #818cf8 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    .tasks-hero-banner.hero-calendar .cal-hero-datepicker {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;
    }

    .tasks-hero-banner.hero-calendar .cal-hero-datepicker input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #1e293b !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    [data-theme="dark"] .tasks-hero-banner.hero-calendar .cal-hero-datepicker input,
    .dark-theme .tasks-hero-banner.hero-calendar .cal-hero-datepicker input {
        background: #0f172a !important;
        border-color: #334155 !important;
        color: #f1f5f9 !important;
    }

    .tasks-hero-banner.hero-calendar .cal-print-btn {
        display: none !important;
    }

    /* Calendar Filters Toolbar Containment on Mobile */
    .calendar-filters-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .calendar-filters-group {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 6px !important;
        padding: 2px 2px 6px 2px !important;
        box-sizing: border-box !important;
    }

    .calendar-filters-group::-webkit-scrollbar {
        display: none !important;
    }

    .calendar-filter-pill {
        flex-shrink: 0 !important;
        padding: 5px 10px !important;
        font-size: 11.5px !important;
        gap: 5px !important;
        white-space: nowrap !important;
    }

    .calendar-filters-actions {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Notes Mobile Filter Toolbar Containment */
    .notes-page-shell {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 8px !important;
    }

    .notes-filter-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
        overflow: hidden !important;
    }

    .notes-search-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .notes-filter-tabs {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
        padding: 3px !important;
        gap: 4px !important;
    }

    .notes-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .filter-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 6px 10px !important;
        font-size: 11.5px !important;
    }

    .notes-category-filter,
    .notes-filter-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
    }

    .notes-color-filter-bar {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
        padding: 4px 0 !important;
        gap: 6px !important;
    }

    .notes-color-filter-bar::-webkit-scrollbar {
        display: none !important;
    }

    .color-filter-chip {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    .color-filter-dot {
        flex-shrink: 0 !important;
        width: 22px !important;
        height: 22px !important;
    }

    /* Login Mobile Responsive Containment */
    .auth-page {
        padding: 16px 10px !important;
    }

    .auth-card-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .auth-card {
        padding: 22px 14px !important;
        border-radius: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .btn-features-intro {
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    .auth-tabs-segmented {
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 4px !important;
        padding: 3px !important;
    }

    .auth-seg-tab {
        padding: 8px 4px !important;
        font-size: 11px !important;
        gap: 4px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.25 !important;
    }

    .btn-google-sign-in {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .btn-google-sign-in .btn-sub-text {
        display: none !important;
    }

    .btn-google-sign-in .btn-primary-text {
        font-size: 13px !important;
    }

    .btn-primary-submit {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: 46px !important;
        font-size: 14px !important;
    }

    .auth-form-card,
    .auth-input-wrapper,
    .auth-text-input,
    .quick-email-chips {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   Mobile Tasks Horizontal Views Switcher Track
   ========================================================================== */
.tasks-mobile-views-nav {
    display: none;
    width: 100%;
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .tasks-mobile-views-nav {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
    }

    .tasks-mobile-views-track {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 4px 2px 6px !important;
        direction: rtl !important;
    }

    .tasks-mobile-views-track::-webkit-scrollbar {
        display: none !important;
    }

    .mobile-view-chip {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        border: 1px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
        user-select: none !important;
    }

    [data-theme="dark"] .mobile-view-chip,
    .dark-theme .mobile-view-chip {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #cbd5e1 !important;
    }

    .mobile-view-chip .chip-icon {
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .mobile-view-chip .chip-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        display: inline-block !important;
    }

    .mobile-view-chip .chip-count {
        background: rgba(0, 0, 0, 0.08) !important;
        color: inherit !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        padding: 1px 6px !important;
        border-radius: 999px !important;
    }

    [data-theme="dark"] .mobile-view-chip .chip-count,
    .dark-theme .mobile-view-chip .chip-count {
        background: rgba(255, 255, 255, 0.12) !important;
    }

    /* Active States with Distinct Themes */
    .mobile-view-chip.active {
        color: #ffffff !important;
        border-color: transparent !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
    }

    .mobile-view-chip.active.view-today {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
        box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35) !important;
    }

    .mobile-view-chip.active.view-important {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
    }

    .mobile-view-chip.active.view-planned {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
    }

    .mobile-view-chip.active.view-all {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35) !important;
    }

    .mobile-view-chip.active.view-meetings {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35) !important;
    }

    .mobile-view-chip.active.view-birthdays {
        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
        box-shadow: 0 4px 12px rgba(219, 39, 119, 0.35) !important;
    }

    .mobile-view-chip.active.view-installments {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
    }

    .mobile-view-chip.active.view-cheques {
        background: linear-gradient(135deg, #b45309 0%, #78350f 100%) !important;
        box-shadow: 0 4px 12px rgba(180, 83, 9, 0.35) !important;
    }

    .mobile-view-chip.active.view-custom {
        background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
        box-shadow: 0 4px 12px rgba(30, 41, 59, 0.35) !important;
    }

    .mobile-view-chip.active .chip-count {
        background: rgba(255, 255, 255, 0.28) !important;
        color: #ffffff !important;
    }
}

/* ==========================================================================
   Mobile Navigation Drawer (Offcanvas Menu)
   ========================================================================== */
.btn-mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-inline-end: 8px;
    flex-shrink: 0;
}

[data-theme="dark"] .btn-mobile-menu-toggle,
.dark-theme .btn-mobile-menu-toggle {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

.top-mobile-start {
    display: none;
    align-items: center;
}

@media (max-width: 768px) {
    .top-mobile-start {
        display: flex !important;
        align-items: center !important;
    }

    .btn-mobile-menu-toggle {
        display: inline-flex !important;
    }
}

.mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100000;
    display: flex;
    justify-content: flex-start; /* RTL: Drawer opens from right */
    animation: drawer-fade-in 0.2s ease-out;
}

.mobile-drawer-panel {
    width: 310px;
    max-width: 86vw;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.2);
    animation: drawer-slide-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    direction: rtl;
    overflow: hidden;
}

[data-theme="dark"] .mobile-drawer-panel,
.dark-theme .mobile-drawer-panel {
    background: #0f172a;
    border-left: 1px solid #1e293b;
}

.mobile-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

[data-theme="dark"] .mobile-drawer-top,
.dark-theme .mobile-drawer-top {
    background: #161e2e;
    border-bottom-color: #1e293b;
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.drawer-brand-text {
    display: flex;
    flex-direction: column;
}

.drawer-brand-text strong {
    font-size: 14px;
    color: #0f172a;
}

[data-theme="dark"] .drawer-brand-text strong,
.dark-theme .drawer-brand-text strong {
    color: #f8fafc;
}

.drawer-brand-text small {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    direction: ltr;
    text-align: right;
}

.drawer-close-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
}

[data-theme="dark"] .drawer-close-btn,
.dark-theme .drawer-close-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.mobile-drawer-content {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px 48px !important;
}

.mobile-drawer-content .sidebar-brand-row {
    display: none !important;
}

.mobile-drawer-content .nav-scrollable,
.mobile-drawer-content .side-panel-scrollable {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 0 !important;
}

.mobile-drawer-content .side-panel-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}

.mobile-drawer-content .side-nav-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

.mobile-drawer-content .side-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    color: #1e293b !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: right !important;
    transition: all 0.16s ease !important;
}

[data-theme="dark"] .mobile-drawer-content .side-nav-item,
.dark-theme .mobile-drawer-content .side-nav-item {
    color: #f1f5f9 !important;
}

.mobile-drawer-content .side-nav-item:hover,
.mobile-drawer-content .side-nav-item:active {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="dark"] .mobile-drawer-content .side-nav-item:hover,
[data-theme="dark"] .mobile-drawer-content .side-nav-item:active,
.dark-theme .mobile-drawer-content .side-nav-item:hover,
.dark-theme .mobile-drawer-content .side-nav-item:active {
    background: #1e293b !important;
    color: #ffffff !important;
}

.mobile-drawer-content .side-nav-item.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
}

.mobile-drawer-content .side-nav-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
}

.mobile-drawer-content .side-nav-label {
    display: block !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mobile-drawer-content .side-badge {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: auto !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    flex-shrink: 0 !important;
}

[data-theme="dark"] .mobile-drawer-content .side-badge,
.dark-theme .mobile-drawer-content .side-badge {
    background: #1e293b !important;
    color: #94a3b8 !important;
}

.mobile-drawer-content .side-nav-item.active .side-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.mobile-drawer-content .side-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    padding: 14px 8px 6px !important;
    border-top: 1px dashed #e2e8f0;
    margin-top: 4px;
}

[data-theme="dark"] .mobile-drawer-content .side-section-title,
.dark-theme .mobile-drawer-content .side-section-title {
    color: #94a3b8 !important;
    border-top-color: #1e293b !important;
}

.mobile-drawer-content .side-section-title:first-of-type {
    border-top: none;
    margin-top: 0;
}

.mobile-drawer-content .btn-side-add-cat {
    width: 24px !important;
    height: 24px !important;
    font-size: 15px !important;
}

.mobile-drawer-content .side-custom-categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.mobile-drawer-content .side-cat-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.mobile-drawer-content .side-cat-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    color: #334155 !important;
    font-size: 13.5px !important;
}

[data-theme="dark"] .mobile-drawer-content .side-cat-btn,
.dark-theme .mobile-drawer-content .side-cat-btn {
    color: #cbd5e1 !important;
}

.mobile-drawer-content .side-cat-row:hover,
.mobile-drawer-content .side-cat-row:active {
    background: #f8fafc;
    border-radius: 10px;
}

[data-theme="dark"] .mobile-drawer-content .side-cat-row:hover,
[data-theme="dark"] .mobile-drawer-content .side-cat-row:active,
.dark-theme .mobile-drawer-content .side-cat-row:hover,
.dark-theme .mobile-drawer-content .side-cat-row:active {
    background: #1e293b;
}

.mobile-drawer-content .side-footer-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid #e2e8f0 !important;
}

[data-theme="dark"] .mobile-drawer-content .side-footer-group,
.dark-theme .mobile-drawer-content .side-footer-group {
    border-top-color: #1e293b !important;
}

@keyframes drawer-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes drawer-slide-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ==========================================================================
   Admin System-Wide Holidays Management Styles
   ========================================================================== */
.admin-section-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.03) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 24px;
}

[data-theme="dark"] .admin-section-intro,
.dark-theme .admin-section-intro {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14) 0%, rgba(185, 28, 28, 0.05) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.admin-section-intro .intro-icon {
    font-size: 36px;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
    flex-shrink: 0;
}

.admin-section-intro h3 {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}

[data-theme="dark"] .admin-section-intro h3,
.dark-theme .admin-section-intro h3 {
    color: #f8fafc;
}

.admin-section-intro p {
    font-size: 13.5px;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

[data-theme="dark"] .admin-section-intro p,
.dark-theme .admin-section-intro p {
    color: #94a3b8;
}

.holiday-add-form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 18px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

[data-theme="dark"] .holiday-add-form-grid,
.dark-theme .holiday-add-form-grid {
    background: #161e2e;
    border-color: #1e293b;
}

.holiday-form-field {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.holiday-form-field.flex-2 {
    flex: 2;
    min-width: 280px;
}

.holiday-form-field.btn-field {
    flex: 0 0 auto;
    min-width: auto;
}

.admin-holiday-input {
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    padding: 0 14px !important;
}

.btn-admin-add-holiday {
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: none;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.btn-admin-add-holiday:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

.btn-admin-add-holiday:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.holiday-date-text {
    font-size: 14px;
    color: #0f172a;
}

[data-theme="dark"] .holiday-date-text,
.dark-theme .holiday-date-text {
    color: #f8fafc;
}

.holiday-weekday-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

[data-theme="dark"] .holiday-weekday-badge,
.dark-theme .holiday-weekday-badge {
    background: #1e293b;
    color: #94a3b8;
}

.holiday-occasion-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #dc2626;
}

[data-theme="dark"] .holiday-occasion-name,
.dark-theme .holiday-occasion-name {
    color: #f87171;
}

.badge-status-holiday {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
}

[data-theme="dark"] .badge-status-holiday,
.dark-theme .badge-status-holiday {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.btn-delete-system-holiday {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-delete-system-holiday:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

[data-theme="dark"] .btn-delete-system-holiday,
.dark-theme .btn-delete-system-holiday {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

[data-theme="dark"] .btn-delete-system-holiday:hover,
.dark-theme .btn-delete-system-holiday:hover {
    background: #dc2626;
    color: #ffffff;
}

@media (max-width: 768px) {
    .holiday-add-form-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .holiday-form-field,
    .holiday-form-field.flex-2 {
        min-width: 100%;
        width: 100%;
    }
    .btn-admin-add-holiday {
        width: 100%;
        justify-content: center;
    }
}





/* ============================================================
   CALENDAR DAY-BY-DAY (AGENDA) MONTH VIEW
   ============================================================ */
.calendar-list.is-day-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.calendar-list.is-day-view .calendar-list-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 64px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
    overflow: hidden;
}

.calendar-list.is-day-view .calendar-list-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.calendar-list.is-day-view .calendar-list-card.is-today {
    border: 2px solid #3b82f6 !important;
    background: linear-gradient(100deg, #eff6ff 0%, #ffffff 100%) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.16) !important;
}

.calendar-list.is-day-view .calendar-list-card.is-holiday {
    border-color: #fca5a5 !important;
    background: #fffafb !important;
}

.calendar-list.is-day-view .calendar-date {
    flex: 0 0 145px;
    width: 145px;
    border: none;
    border-left: 1px solid #edf2f7;
    background: transparent;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease;
}

.calendar-list.is-day-view .calendar-date:hover {
    background: rgba(241, 245, 249, 0.6);
}

.calendar-list.is-day-view .cal-date-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.calendar-list.is-day-view .cal-date-main strong {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.calendar-list.is-day-view .cal-date-main .cal-date-dow {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.calendar-list.is-day-view .cal-date-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.calendar-list.is-day-view .cal-date-tags .cal-date-month {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.calendar-list.is-day-view .badge-today-mini {
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.calendar-list.is-day-view .holiday-label {
    font-style: normal;
    background: #fee2e2;
    color: #dc2626;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.2;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.calendar-list.is-day-view .calendar-events {
    flex: 1 1 auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.calendar-list.is-day-view .calendar-event {
    width: 100%;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 7px 10px;
    margin-bottom: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-list.is-day-view .calendar-event:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(-2px);
}

.calendar-list.is-day-view .calendar-empty {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 12px;
    color: #94a3b8;
    font-size: 11.5px;
    border-radius: 7px;
    border: 1px dashed #e2e8f0;
    background: transparent;
    cursor: pointer;
    width: 100%;
    transition: all 0.15s ease;
}

.calendar-list.is-day-view .calendar-empty:hover {
    background: #f8fafc;
    color: #2563eb;
    border-color: #93c5fd;
}

.calendar-list.is-day-view .empty-hol-text {
    color: #ef4444;
    font-weight: 600;
}

/* Mobile Responsiveness for Day-by-Day Calendar */
@media (max-width: 768px) {
    .calendar-list.is-day-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .calendar-list.is-day-view .calendar-list-card {
        flex-direction: column !important;
        min-height: auto !important;
        border-radius: 12px !important;
    }

    .calendar-list.is-day-view .calendar-date {
        width: 100% !important;
        border-left: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 12px !important;
    }

    .calendar-list.is-day-view .cal-date-main {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .calendar-list.is-day-view .cal-date-main strong {
        font-size: 20px !important;
    }

    .calendar-list.is-day-view .cal-date-main .cal-date-dow {
        font-size: 12px !important;
    }

    .calendar-list.is-day-view .cal-date-tags {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .calendar-list.is-day-view .calendar-events {
        padding: 6px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .calendar-list.is-day-view .calendar-empty {
        min-height: 32px !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Dark Theme Support for Day-by-Day Calendar */
[data-theme="dark"] .calendar-list.is-day-view .calendar-list-card,
.dark-theme .calendar-list.is-day-view .calendar-list-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-list-card:hover,
.dark-theme .calendar-list.is-day-view .calendar-list-card:hover {
    border-color: #484f58;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-list-card.is-today,
.dark-theme .calendar-list.is-day-view .calendar-list-card.is-today {
    border-color: #3b82f6 !important;
    background: linear-gradient(100deg, rgba(59, 130, 246, 0.16) 0%, #161b22 100%) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25) !important;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-list-card.is-holiday,
.dark-theme .calendar-list.is-day-view .calendar-list-card.is-holiday {
    border-color: rgba(239, 68, 68, 0.35) !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-date,
.dark-theme .calendar-list.is-day-view .calendar-date {
    border-left-color: #21262d;
    border-bottom-color: #21262d;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-date:hover,
.dark-theme .calendar-list.is-day-view .calendar-date:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .calendar-list.is-day-view .cal-date-main strong,
.dark-theme .calendar-list.is-day-view .cal-date-main strong {
    color: #e6edf3;
}

[data-theme="dark"] .calendar-list.is-day-view .cal-date-main .cal-date-dow,
.dark-theme .calendar-list.is-day-view .cal-date-main .cal-date-dow {
    color: #8b949e;
}

[data-theme="dark"] .calendar-list.is-day-view .cal-date-tags .cal-date-month,
.dark-theme .calendar-list.is-day-view .cal-date-tags .cal-date-month {
    color: #8b949e;
}

[data-theme="dark"] .calendar-list.is-day-view .badge-today-mini,
.dark-theme .calendar-list.is-day-view .badge-today-mini {
    background: #2563eb;
    color: #ffffff;
}

[data-theme="dark"] .calendar-list.is-day-view .holiday-label,
.dark-theme .calendar-list.is-day-view .holiday-label {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-event,
.dark-theme .calendar-list.is-day-view .calendar-event {
    background: #0d1117;
    border-color: #30363d;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-event:hover,
.dark-theme .calendar-list.is-day-view .calendar-event:hover {
    background: #161b22;
    border-color: #484f58;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-empty,
.dark-theme .calendar-list.is-day-view .calendar-empty {
    border-color: #30363d;
    color: #6e7681;
}

[data-theme="dark"] .calendar-list.is-day-view .calendar-empty:hover,
.dark-theme .calendar-list.is-day-view .calendar-empty:hover {
    background: #0d1117;
    border-color: #3b82f6;
    color: #58a6ff;
}

[data-theme="dark"] .calendar-list.is-day-view .empty-hol-text,
.dark-theme .calendar-list.is-day-view .empty-hol-text {
    color: #f87171;
}


/* ==========================================================================
   Occasions & Holidays System Enhancements (Admin & Calendar)
   ========================================================================== */

/* Occasion Type Switcher / Radio Pills */
.occasion-type-toggle-strip {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.occasion-radio-pill {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.occasion-radio-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.occasion-radio-pill .pill-icon {
    font-size: 18px;
    margin-bottom: 4px;
}

.occasion-radio-pill .pill-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 2px;
}

.occasion-radio-pill .pill-desc {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.4;
}

.occasion-radio-pill.is-active.holiday-active {
    border-color: #ef4444;
    background: #fff1f2;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15);
}

.occasion-radio-pill.is-active.holiday-active .pill-title {
    color: #b91c1c;
}

.occasion-radio-pill.is-active.occasion-active {
    border-color: #8b5cf6;
    background: #f5f3ff;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.15);
}

.occasion-radio-pill.is-active.occasion-active .pill-title {
    color: #6d28d9;
}

[data-theme="dark"] .occasion-radio-pill,
.dark-theme .occasion-radio-pill {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .occasion-radio-pill .pill-title,
.dark-theme .occasion-radio-pill .pill-title {
    color: #e6edf3;
}

[data-theme="dark"] .occasion-radio-pill .pill-desc,
.dark-theme .occasion-radio-pill .pill-desc {
    color: #8b949e;
}

[data-theme="dark"] .occasion-radio-pill.is-active.holiday-active,
.dark-theme .occasion-radio-pill.is-active.holiday-active {
    background: rgba(239, 68, 68, 0.14);
    border-color: #ef4444;
}

[data-theme="dark"] .occasion-radio-pill.is-active.occasion-active,
.dark-theme .occasion-radio-pill.is-active.occasion-active {
    background: rgba(139, 92, 246, 0.14);
    border-color: #8b5cf6;
}

.admin-holiday-select {
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 13.5px;
    font-family: inherit;
    background-color: #ffffff;
    min-width: 130px;
}

[data-theme="dark"] .admin-holiday-select,
.dark-theme .admin-holiday-select {
    background: #161b22;
    border-color: #30363d;
    color: #e6edf3;
}

.btn-admin-add-holiday.btn-add-occasion {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

.btn-admin-add-holiday.btn-add-occasion:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* Status Badges */
.badge-status-occasion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
}

[data-theme="dark"] .badge-status-occasion,
.dark-theme .badge-status-occasion {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

.holiday-occasion-name.is-occ {
    color: #7c3aed;
}

[data-theme="dark"] .holiday-occasion-name.is-occ,
.dark-theme .holiday-occasion-name.is-occ {
    color: #c4b5fd;
}

.occasion-category-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
}

[data-theme="dark"] .occasion-category-chip,
.dark-theme .occasion-category-chip {
    background: #1e293b;
    color: #94a3b8;
}

/* Occasion Filters in Admin */
.occasion-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.occasion-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.occasion-search-box {
    position: relative;
    width: 240px;
}

.occasion-search-box .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.occasion-search-box input {
    padding-right: 32px;
    padding-left: 10px;
    font-size: 12.5px;
    border-radius: 8px;
    height: 36px;
}

.occasion-filter-pills,
.modal-filter-pills {
    display: flex;
    gap: 6px;
}

.occasion-filter-pills .filter-pill,
.modal-filter-pills .filter-pill {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.occasion-filter-pills .filter-pill:hover,
.modal-filter-pills .filter-pill:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.occasion-filter-pills .filter-pill.active,
.modal-filter-pills .filter-pill.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.occasion-filter-pills .filter-pill.pill-hol.active,
.modal-filter-pills .filter-pill.pill-hol.active {
    background: #ef4444;
    border-color: #ef4444;
}

.occasion-filter-pills .filter-pill.pill-occ.active,
.modal-filter-pills .filter-pill.pill-occ.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

[data-theme="dark"] .occasion-filter-pills .filter-pill,
[data-theme="dark"] .modal-filter-pills .filter-pill,
.dark-theme .occasion-filter-pills .filter-pill,
.dark-theme .modal-filter-pills .filter-pill {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

/* Mobile responsive cards list */
.mobile-occasions-cards-list {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only-table {
        display: none !important;
    }

    .mobile-occasions-cards-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .admin-occ-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .admin-occ-card.card-holiday {
        border-right: 4px solid #ef4444;
        background: #fffafb;
    }

    .admin-occ-card.card-occasion {
        border-right: 4px solid #8b5cf6;
        background: #faf5ff;
    }

    [data-theme="dark"] .admin-occ-card,
    .dark-theme .admin-occ-card {
        background: #161b22;
        border-color: #30363d;
    }

    .occ-card-top {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .occ-card-date-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        background: #f1f5f9;
        flex-shrink: 0;
    }

    [data-theme="dark"] .occ-card-date-badge,
    .dark-theme .occ-card-date-badge {
        background: #1e293b;
    }

    .occ-card-date-badge .badge-day {
        font-size: 18px;
        font-weight: 800;
        color: #1e293b;
        line-height: 1;
    }

    [data-theme="dark"] .occ-card-date-badge .badge-day,
    .dark-theme .occ-card-date-badge .badge-day {
        color: #e6edf3;
    }

    .occ-card-date-badge .badge-sub {
        font-size: 10.5px;
        font-weight: 600;
        color: #64748b;
        margin-top: 2px;
    }

    .occ-card-main-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .occ-type-tag-row {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .occ-title {
        font-size: 14px;
        font-weight: 800;
        color: #0f172a;
    }

    [data-theme="dark"] .occ-title,
    .dark-theme .occ-title {
        color: #f8fafc;
    }

    .occ-full-date {
        font-size: 11.5px;
        color: #64748b;
    }

    .occasion-search-box {
        width: 100%;
    }
}

/* Calendar Filter Toolbar - Occasion Pill */
.calendar-filter-pill.filter-pill-occasions.is-active,
.filter-pill-occasions.is-active {
    background: #fdf4ff !important;
    border-color: #a855f7 !important;
    color: #7e22ce !important;
}

.filter-pill-occasions.is-active .custom-checkbox,
.filter-pill-occasions input[type="checkbox"]:checked ~ .custom-checkbox {
    background: #a855f7 !important;
    border-color: #a855f7 !important;
}

.filter-pill-occasions.is-active .checkbox-check,
.filter-pill-occasions input[type="checkbox"]:checked ~ .custom-checkbox .checkbox-check {
    display: block !important;
    color: #ffffff !important;
    visibility: visible !important;
}

.filter-pill-occasions .dot-occasions {
    background: #a855f7 !important;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4) !important;
}

/* Dark Mode for Occasions Pill Active */
[data-theme="dark"] .calendar-filter-pill.filter-pill-occasions.is-active,
.dark-theme .calendar-filter-pill.filter-pill-occasions.is-active,
[data-theme="dark"] .filter-pill-occasions.is-active,
.dark-theme .filter-pill-occasions.is-active {
    background: rgba(168, 85, 247, 0.16) !important;
    border-color: #a855f7 !important;
    color: #e9d5ff !important;
}

[data-theme="dark"] .filter-pill-occasions.is-active .custom-checkbox,
.dark-theme .filter-pill-occasions.is-active .custom-checkbox,
[data-theme="dark"] .filter-pill-occasions input[type="checkbox"]:checked ~ .custom-checkbox,
.dark-theme .filter-pill-occasions input[type="checkbox"]:checked ~ .custom-checkbox {
    background: #a855f7 !important;
    border-color: #a855f7 !important;
}

[data-theme="dark"] .filter-pill-occasions.is-active .checkbox-check,
.dark-theme .filter-pill-occasions.is-active .checkbox-check,
[data-theme="dark"] .filter-pill-occasions input[type="checkbox"]:checked ~ .custom-checkbox .checkbox-check,
.dark-theme .filter-pill-occasions input[type="checkbox"]:checked ~ .custom-checkbox .checkbox-check {
    display: block !important;
    color: #ffffff !important;
    visibility: visible !important;
}

.calendar-chip.chip-occasion {
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

[data-theme="dark"] .calendar-chip.chip-occasion,
.dark-theme .calendar-chip.chip-occasion {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.35);
}

.calendar-event.is-occasion-event .occasion-strip {
    background: #8b5cf6;
}

/* Quick Occasion Selection in Day Modal */
.quick-occ-type-row {
    display: flex;
    gap: 8px;
}

.quick-type-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.quick-type-pill input[type="radio"] {
    display: none;
}

.quick-type-pill.active.hol {
    border-color: #ef4444;
    background: #fee2e2;
    color: #dc2626;
}

.quick-type-pill.active.occ {
    border-color: #8b5cf6;
    background: #ede9fe;
    color: #6d28d9;
}

[data-theme="dark"] .quick-type-pill,
.dark-theme .quick-type-pill {
    background: #161b22;
    border-color: #30363d;
    color: #8b949e;
}

[data-theme="dark"] .quick-type-pill.active.hol,
.dark-theme .quick-type-pill.active.hol {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #fca5a5;
}

[data-theme="dark"] .quick-type-pill.active.occ,
.dark-theme .quick-type-pill.active.occ {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8b5cf6;
    color: #c4b5fd;
}

.btn-set-holiday.btn-occ {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35);
}

.btn-submit-holiday.btn-submit-occ {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

.day-occ-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    margin-bottom: 6px;
}

.day-occ-item-row.is-hol {
    border-right: 3px solid #ef4444;
    background: #fffafb;
}

.day-occ-item-row.is-occ {
    border-right: 3px solid #8b5cf6;
    background: #faf5ff;
}

[data-theme="dark"] .day-occ-item-row,
.dark-theme .day-occ-item-row {
    background: #161b22;
    border-color: #30363d;
}

.day-occ-item-row .occ-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.modal-list-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.holiday-item-row.is-occ-row {
    border-color: #ddd6fe;
    border-right: 4px solid #8b5cf6;
}


/* Empty Table State */
.empty-table-cell {
    text-align: center;
    padding: 48px 24px !important;
}

.empty-table-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
}

.empty-table-box span {
    font-size: 32px;
}

.empty-table-box strong {
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}

.empty-table-box p {
    font-size: 13px;
    margin: 0;
    color: #94a3b8;
}

[data-theme="dark"] .empty-table-box strong,
.dark-theme .empty-table-box strong {
    color: #e6edf3;
}

/* Responsive Table Container */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Occasions Table Enhancements */
.occasions-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.occasions-table th {
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    padding: 14px 16px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.occasions-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #edf2f7;
    font-size: 13px;
    vertical-align: middle;
}

.occasions-table tr:hover td {
    background: #f8fafc;
}

.occasions-table tr.row-holiday-item td {
    background: rgba(254, 242, 242, 0.45);
}

.occasions-table tr.row-holiday-item:hover td {
    background: #fee2e2;
}

.occasions-table tr.row-occasion-item td {
    background: rgba(245, 243, 255, 0.45);
}

.occasions-table tr.row-occasion-item:hover td {
    background: #ede9fe;
}

[data-theme="dark"] .occasions-table th,
.dark-theme .occasions-table th {
    background: #161b22 !important;
    border-bottom-color: #30363d !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .occasions-table td,
.dark-theme .occasions-table td {
    border-bottom-color: #21262d !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .occasions-table tr.row-holiday-item td,
.dark-theme .occasions-table tr.row-holiday-item td {
    background: rgba(239, 68, 68, 0.08) !important;
}

[data-theme="dark"] .occasions-table tr.row-holiday-item:hover td,
.dark-theme .occasions-table tr.row-holiday-item:hover td {
    background: rgba(239, 68, 68, 0.16) !important;
}

[data-theme="dark"] .occasions-table tr.row-occasion-item td,
.dark-theme .occasions-table tr.row-occasion-item td {
    background: rgba(139, 92, 246, 0.08) !important;
}

[data-theme="dark"] .occasions-table tr.row-occasion-item:hover td,
.dark-theme .occasions-table tr.row-occasion-item:hover td {
    background: rgba(139, 92, 246, 0.16) !important;
}


/* ==========================================================================
   DEDICATED CELEBRATION BIRTHDAYS VIEW & COMPONENTS
   ========================================================================== */

.birthdays-shell {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 40px;
    box-sizing: border-box;
}

.tasks-hero-banner.hero-birthdays {
    background: linear-gradient(135deg, #be123c 0%, #e11d48 45%, #fb923c 100%) !important;
    box-shadow: 0 14px 34px rgba(225, 29, 72, 0.28) !important;
}

.bday-hero-icon-box {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 0 24px rgba(251, 146, 60, 0.4) !important;
}

.hero-btn-bday {
    background: #ffffff !important;
    color: #be123c !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-btn-bday:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

/* Birthday Metrics Grid */
.birthdays-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metric-bday-today .metric-icon {
    background: rgba(244, 63, 94, 0.12) !important;
    color: #f43f5e !important;
}

.metric-bday-today.has-today-celebration {
    border-color: #f43f5e !important;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(251, 146, 60, 0.08) 100%) !important;
    animation: bdayPulseGlow 2s infinite ease-in-out;
}

.metric-bday-upcoming .metric-icon {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
}

.metric-bday-month .metric-icon {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #7c3aed !important;
}

.metric-bday-total .metric-icon {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
}

/* Quick Birthday Add Bar */
.bday-quick-card {
    background: var(--card-bg, #ffffff);
    border: 1.5px solid rgba(244, 63, 94, 0.2);
    border-radius: 18px;
    padding: 12px 18px;
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.06);
    margin-bottom: 24px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bday-quick-card:focus-within {
    border-color: #f43f5e;
    box-shadow: 0 6px 24px rgba(244, 63, 94, 0.14);
}

.bday-quick-input-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bday-quick-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.bday-quick-input {
    flex: 1;
    min-width: 220px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color, #1e293b);
    font-family: inherit;
}

.bday-quick-date {
    min-width: 170px;
}

.btn-bday-quick-add {
    background: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.btn-bday-quick-add:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4);
}

.btn-bday-quick-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Birthday Filter Tabs & Search */
.birthdays-filter-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.bday-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bday-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.bday-tab-btn:hover {
    border-color: #f43f5e;
    color: #f43f5e;
}

.bday-tab-btn.is-active {
    background: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
}

.bday-badge-num {
    font-size: 11.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
    font-weight: 700;
}

.bday-tab-btn.is-active .bday-badge-num {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.bday-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 250px;
    flex: 0 1 320px;
}

.bday-search-icon {
    position: absolute;
    right: 12px;
    font-size: 14px;
    pointer-events: none;
    opacity: 0.6;
}

.bday-search-input {
    width: 100%;
    padding: 8px 36px 8px 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #1e293b);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.bday-search-input:focus {
    border-color: #f43f5e;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}

.bday-search-clear {
    position: absolute;
    left: 8px;
    background: none;
    border: none;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 4px;
}

/* Celebration Cards Grid */
.birthdays-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 20px;
}

.birthday-card {
    border-radius: 20px;
    padding: 20px 22px;
    background: var(--card-bg, #ffffff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.birthday-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.4);
}

.birthday-card.is-today {
    border: 2px solid #f43f5e !important;
    box-shadow: 0 10px 30px rgba(244, 63, 94, 0.22) !important;
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.05) 0%, var(--card-bg, #ffffff) 100%) !important;
}

.birthday-card.is-tomorrow {
    border: 1.5px solid #fb923c !important;
}

/* Season top accents */
.birthday-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #f43f5e, #fb923c);
}

.birthday-card.season-spring::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.birthday-card.season-summer::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.birthday-card.season-autumn::before {
    background: linear-gradient(90deg, #ea580c, #f97316);
}

.birthday-card.season-winter::before {
    background: linear-gradient(90deg, #0284c7, #38bdf8);
}

/* Card Header */
.bday-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bday-avatar-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.bday-avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #f43f5e;
    cursor: pointer;
    transition: transform 0.2s;
}

.bday-avatar-img:hover {
    transform: scale(1.06);
}

.bday-avatar-emoji {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(251, 146, 60, 0.16) 100%);
    border: 1.5px solid rgba(244, 63, 94, 0.2);
}

.bday-avatar-crown {
    position: absolute;
    top: -8px;
    right: -4px;
    font-size: 18px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

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

.bday-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.bday-person-name {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text-color, #1e293b);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bday-category-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.bday-star-pin {
    color: #f59e0b;
    font-size: 16px;
    margin-right: 4px;
}

/* Date & Zodiac Badges */
.bday-dates-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.bday-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0284c7;
    background: rgba(2, 132, 199, 0.08);
    padding: 4px 10px;
    border-radius: 8px;
}

.bday-zodiac-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    padding: 4px 10px;
    border-radius: 8px;
}

/* Age Row */
.bday-age-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: rgba(100, 116, 139, 0.06);
    padding: 6px 12px;
    border-radius: 10px;
}

.bday-age-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted, #64748b);
}

.bday-age-chip strong {
    color: var(--text-color, #1e293b);
    font-weight: 700;
}

.bday-age-chip.turning strong {
    color: #e11d48;
    font-weight: 800;
}

.age-arrow {
    color: #94a3b8;
    font-size: 11px;
}

/* Countdown Status */
.bday-countdown-row {
    width: 100%;
}

.bday-status-pill {
    width: 100%;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.bday-status-pill.status-today {
    background: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35);
    animation: bdayPulseGlow 2s infinite ease-in-out;
}

.bday-status-pill.status-tomorrow {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

.bday-status-pill.status-soon {
    background: rgba(244, 63, 94, 0.08);
    color: #e11d48;
    border: 1px solid rgba(244, 63, 94, 0.16);
}

.bday-status-pill.status-future {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-muted, #64748b);
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px #fff;
    animation: bdayDotPulse 1.2s infinite;
}

@keyframes bdayDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

@keyframes bdayPulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(244, 63, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* Description / Wish Quotes */
.bday-description-box {
    background: rgba(251, 146, 60, 0.06);
    border: 1px dashed rgba(251, 146, 60, 0.35);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.desc-gift-icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.desc-text {
    margin: 0;
    font-size: 12px;
    color: var(--text-color, #1e293b);
    line-height: 1.6;
    word-break: break-word;
}

.bday-img-action-bar {
    display: flex;
}

.btn-bday-view-photo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0284c7;
    background: rgba(2, 132, 199, 0.08);
    border: 1px solid rgba(2, 132, 199, 0.2);
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-bday-view-photo:hover {
    background: #0284c7;
    color: #ffffff;
}

/* Card Footer */
.bday-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    gap: 10px;
}

.btn-bday-wish {
    background: rgba(244, 63, 94, 0.08);
    color: #e11d48;
    border: 1px solid rgba(244, 63, 94, 0.22);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.btn-bday-wish:hover {
    background: #f43f5e;
    color: #ffffff;
    border-color: #f43f5e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.bday-footer-end-actions {
    display: flex;
    gap: 6px;
}

.bday-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-color, #1e293b);
}

.bday-action-icon:hover {
    background: var(--bg-hover, #f1f5f9);
    border-color: #cbd5e1;
}

.bday-action-icon.btn-bday-del:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Empty State */
.birthdays-empty-card {
    padding: 48px 24px;
    text-align: center;
    border-radius: 20px;
    background: var(--card-bg, #ffffff);
    border: 2px dashed var(--border-color, #e2e8f0);
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bday-empty-icon {
    font-size: 54px;
    line-height: 1;
}

.birthdays-empty-card h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: var(--text-color, #1e293b);
}

.birthdays-empty-card p {
    font-size: 13.5px;
    color: var(--text-muted, #64748b);
    margin: 0;
    max-width: 440px;
    line-height: 1.6;
}

.btn-bday-empty-add {
    margin-top: 8px;
    background: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%);
    color: #ffffff;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
}

/* Birthday Modals */
.bday-modal-card {
    max-width: 540px !important;
}

.bday-modal-header {
    background: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%) !important;
    color: #ffffff !important;
}

.btn-bday-save {
    background: linear-gradient(135deg, #f43f5e 0%, #fb923c 100%) !important;
}

.bday-wish-modal-card {
    max-width: 600px !important;
}

.wish-modal-header {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
}

.wish-modal-subtitle {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin: 0 0 16px;
    line-height: 1.6;
}

.wish-templates-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

.wish-item-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-hover, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s;
}

.wish-item-card:hover {
    border-color: #ec4899;
}

.wish-item-card.is-copied {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}

.wish-item-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-color, #1e293b);
}

.btn-copy-wish {
    align-self: flex-end;
    padding: 7px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12.5px;
    background: #3b82f6;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-copy-wish:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.wish-item-card.is-copied .btn-copy-wish {
    background: #10b981 !important;
}

/* ==========================================================================
   DARK THEME OVERRIDES FOR BIRTHDAYS VIEW
   ========================================================================== */

[data-theme="dark"] .birthdays-shell,
.dark-theme .birthdays-shell {
    color: #c9d1d9;
}

[data-theme="dark"] .bday-quick-card,
.dark-theme .bday-quick-card {
    background: #161b22;
    border-color: rgba(244, 63, 94, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .bday-quick-card:focus-within,
.dark-theme .bday-quick-card:focus-within {
    border-color: #f43f5e;
    box-shadow: 0 6px 24px rgba(244, 63, 94, 0.25);
}

[data-theme="dark"] .bday-quick-input,
.dark-theme .bday-quick-input {
    color: #f0f6fc;
}

[data-theme="dark"] .bday-tab-btn,
.dark-theme .bday-tab-btn {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .bday-badge-num,
.dark-theme .bday-badge-num {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bday-search-input,
.dark-theme .bday-search-input {
    background: #161b22;
    border-color: #30363d;
    color: #f0f6fc;
}

[data-theme="dark"] .birthday-card,
.dark-theme .birthday-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .birthday-card.is-today,
.dark-theme .birthday-card.is-today {
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.12) 0%, #161b22 100%) !important;
    border-color: #f43f5e !important;
}

[data-theme="dark"] .bday-person-name,
.dark-theme .bday-person-name {
    color: #f0f6fc;
}

[data-theme="dark"] .bday-age-bar,
.dark-theme .bday-age-bar {
    background: #21262d;
}

[data-theme="dark"] .bday-age-chip strong,
.dark-theme .bday-age-chip strong {
    color: #f0f6fc;
}

[data-theme="dark"] .bday-description-box,
.dark-theme .bday-description-box {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.3);
}

[data-theme="dark"] .desc-text,
.dark-theme .desc-text {
    color: #e2e8f0;
}

[data-theme="dark"] .bday-status-pill.status-tomorrow,
.dark-theme .bday-status-pill.status-tomorrow {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.3);
    color: #fb923c;
}

[data-theme="dark"] .bday-card-footer,
.dark-theme .bday-card-footer {
    border-top-color: #30363d;
}

[data-theme="dark"] .bday-action-icon,
.dark-theme .bday-action-icon {
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .bday-action-icon:hover,
.dark-theme .bday-action-icon:hover {
    background: #21262d;
    border-color: #484f58;
}

[data-theme="dark"] .birthdays-empty-card,
.dark-theme .birthdays-empty-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .birthdays-empty-card h3,
.dark-theme .birthdays-empty-card h3 {
    color: #f0f6fc;
}

[data-theme="dark"] .wish-item-card,
.dark-theme .wish-item-card {
    background: #21262d;
    border-color: #30363d;
}

[data-theme="dark"] .wish-item-text,
.dark-theme .wish-item-text {
    color: #f0f6fc;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .birthdays-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .bday-quick-card {
        padding: 10px 14px;
    }

    .bday-quick-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .bday-quick-date {
        width: 100%;
    }

    .btn-bday-quick-add {
        justify-content: center;
        width: 100%;
    }

    .birthdays-filter-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .bday-search-box {
        width: 100%;
        min-width: 100%;
    }

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

/* ============================================================
   CALENDAR MODAL UNDER HEADER BUG FIX & HIGH Z-INDEX
   ============================================================ */
.calendar-modal-backdrop,
.day-detail-modal-backdrop,
.loan-modal-backdrop {
    z-index: 500000 !important;
}

.calendar-modal-card,
.day-detail-modal,
.loan-modal-card {
    z-index: 500001 !important;
}

.day-detail-modal {
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: auto !important;
}

body:has(.calendar-modal-backdrop) .top-row,
body:has(.loan-modal-backdrop) .top-row,
body:has(.day-detail-modal) .top-row {
    z-index: 10 !important;
}

/* ============================================================
   OCCASION TYPE PILL STRIP & CELEBRATION CHIPS
   ============================================================ */
.occasion-type-pill-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.occ-type-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: #f1f5f9;
    color: #475569;
    border: 1.5px solid transparent;
    transition: all 0.18s ease;
}

.occ-type-pill-btn:hover {
    background: #e2e8f0;
}

.occ-type-pill-btn.is-active {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.bday-sub-chips-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.bday-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(225, 29, 72, 0.09);
    color: #be123c;
}

.bday-type-chip.type-anniversary {
    background: rgba(147, 51, 234, 0.1);
    color: #7e22ce;
}

.bday-type-chip.type-celebration {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.bday-type-chip.type-other {
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.bday-recur-chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
}

.bday-recur-chip.recurring {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}

.bday-recur-chip.one-time {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.birthday-card.is-past-occ {
    opacity: 0.72;
    filter: grayscale(0.2);
}

.bday-status-pill.status-past {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* ============================================================
   CALENDAR DAY DETAIL QUICK ADD SECTION
   ============================================================ */
.cal-day-quick-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.cal-quick-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.cal-quick-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #2563eb;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
}

.cal-quick-type-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.cal-type-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
    transition: all 0.15s ease;
}

.cal-type-tab:hover {
    border-color: #94a3b8;
}

.cal-type-tab.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.cal-quick-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cal-quick-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cal-quick-sub-row {
    flex-wrap: wrap;
}

.cal-quick-col {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-quick-col.flex-1 {
    flex: 1;
    min-width: 140px;
}

.cal-quick-input {
    width: 100%;
    padding: 9px 13px;
    border-radius: 9px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
}

.cal-time-input {
    width: 110px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12.5px;
}

.cal-select-input {
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12.5px;
}

.cal-quick-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.cal-quick-options-row {
    flex-wrap: wrap;
    justify-content: space-between;
}

.btn-cal-quick-submit {
    padding: 8px 18px;
    border-radius: 9px;
    background: #10b981;
    color: #fff;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    margin-right: auto;
}

.btn-cal-quick-submit:hover:not(:disabled) {
    background: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-cal-quick-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cal-add-event-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cal-add-event-btn:hover {
    filter: brightness(1.08);
}

/* Dark theme overrides */
[data-theme="dark"] .cal-day-quick-card,
.dark-theme .cal-day-quick-card {
    background: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .cal-quick-header,
.dark-theme .cal-quick-header {
    color: #f0f6fc;
}

[data-theme="dark"] .cal-type-tab,
.dark-theme .cal-type-tab {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .cal-type-tab.active,
.dark-theme .cal-type-tab.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

[data-theme="dark"] .cal-quick-input,
[data-theme="dark"] .cal-time-input,
[data-theme="dark"] .cal-select-input,
.dark-theme .cal-quick-input,
.dark-theme .cal-time-input,
.dark-theme .cal-select-input {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .occ-type-pill-btn,
.dark-theme .occ-type-pill-btn {
    background: #161b22;
    color: #c9d1d9;
}

[data-theme="dark"] .occ-type-pill-btn.is-active,
.dark-theme .occ-type-pill-btn.is-active {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    border-color: #8b5cf6;
}

/* ==========================================================================
   Overdue Tasks & Reschedule System (کارهای معوقه و تغییر موعد هوشمند)
   ========================================================================== */

/* 1. Overdue Hero Banner */
.tasks-hero-banner.hero-overdue {
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #f97316 100%);
    box-shadow: 0 14px 34px rgba(220, 38, 38, 0.28);
}

.hero-btn-batch-today {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}
.hero-btn-batch-today:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-1px);
}

.hero-btn-batch-tomorrow {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}
.hero-btn-batch-tomorrow:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    transform: translateY(-1px);
}

/* 2. Side Nav Overdue Alert Badge & Mobile Chip Alert */
.side-nav-overdue .side-badge-alert,
.chip-count-alert {
    background: #ef4444 !important;
    color: #ffffff !important;
    animation: pulseOverdueAlert 2.2s infinite;
}

@keyframes pulseOverdueAlert {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 3. Today's Top Overdue Alert Card */
.today-overdue-alert-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef2f2 100%);
    border: 1.5px solid #fecaca;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.08);
    position: relative;
    overflow: hidden;
}

.today-overdue-alert-card::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #ef4444 0%, #f59e0b 100%);
}

.toac-icon-col {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fee2e2;
    flex-shrink: 0;
}

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

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

.toac-title strong {
    font-size: 14.5px;
    font-weight: 800;
    color: #991b1b;
}

.toac-desc {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: #7f1d1d;
    line-height: 1.4;
}

.toac-actions-col {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-toac-move-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
    transition: all 0.18s ease;
    white-space: nowrap;
}

.btn-toac-move-all:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn-toac-view-overdue {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.btn-toac-view-overdue:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #f87171;
}

/* 4. Task Card Overdue Elements */
.badge-overdue {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    font-weight: 700;
}

.task-card-reschedule-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #94a3b8;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.task-card-reschedule-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.task-card-reschedule-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #fecaca;
    width: 100%;
}

.reschedule-strip-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #b91c1c;
    margin-left: 4px;
}

.btn-reschedule-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.btn-reschedule-chip.chip-today {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.btn-reschedule-chip.chip-today:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.btn-reschedule-chip.chip-tomorrow {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.btn-reschedule-chip.chip-tomorrow:hover {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}

.btn-reschedule-chip.chip-picker {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.btn-reschedule-chip.chip-picker:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* 5. Reschedule Modal Card */
.reschedule-modal-card {
    max-width: 520px !important;
}

.reschedule-task-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 18px;
}

.reschedule-task-preview .preview-icon {
    font-size: 22px;
}

.reschedule-task-preview .preview-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.preview-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #1e293b;
}

.preview-meta {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.preview-curr-date {
    font-weight: 600;
    color: #334155;
}

.preview-overdue-tag {
    background: #fee2e2;
    color: #dc2626;
    padding: 1px 7px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
}

.reschedule-quick-presets {
    margin-bottom: 18px;
}

.reschedule-quick-presets .preset-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

.reschedule-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.btn-reschedule-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-reschedule-preset .pr-icon {
    font-size: 20px;
}

.btn-reschedule-preset .pr-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.btn-reschedule-preset .pr-sub {
    font-size: 11px;
    color: #64748b;
}

.btn-reschedule-preset:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    transform: translateY(-1px);
}

.btn-reschedule-preset.active {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.btn-reschedule-preset.active .pr-title {
    color: #1d4ed8;
}

/* 6. Dark Theme Styles */
[data-theme="dark"] .today-overdue-alert-card,
.dark-theme .today-overdue-alert-card {
    background: linear-gradient(135deg, rgba(69, 10, 10, 0.5) 0%, rgba(67, 20, 7, 0.5) 100%);
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toac-icon-col,
.dark-theme .toac-icon-col {
    background: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .toac-title strong,
.dark-theme .toac-title strong {
    color: #fca5a5;
}

[data-theme="dark"] .toac-desc,
.dark-theme .toac-desc {
    color: #fecaca;
}

[data-theme="dark"] .btn-toac-view-overdue,
.dark-theme .btn-toac-view-overdue {
    background: rgba(255, 255, 255, 0.08);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
}

[data-theme="dark"] .btn-toac-view-overdue:hover,
.dark-theme .btn-toac-view-overdue:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .badge-overdue,
.dark-theme .badge-overdue {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.35);
    color: #f87171;
}

[data-theme="dark"] .task-card-reschedule-btn:hover,
.dark-theme .task-card-reschedule-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .task-card-reschedule-strip,
.dark-theme .task-card-reschedule-strip {
    border-top-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .reschedule-strip-label,
.dark-theme .reschedule-strip-label {
    color: #fca5a5;
}

[data-theme="dark"] .btn-reschedule-chip.chip-today,
.dark-theme .btn-reschedule-chip.chip-today {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .btn-reschedule-chip.chip-tomorrow,
.dark-theme .btn-reschedule-chip.chip-tomorrow {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .btn-reschedule-chip.chip-picker,
.dark-theme .btn-reschedule-chip.chip-picker {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}

[data-theme="dark"] .reschedule-task-preview,
.dark-theme .reschedule-task-preview {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .preview-title,
.dark-theme .preview-title {
    color: #f1f5f9;
}

[data-theme="dark"] .preview-curr-date,
.dark-theme .preview-curr-date {
    color: #cbd5e1;
}

[data-theme="dark"] .preview-overdue-tag,
.dark-theme .preview-overdue-tag {
    background: rgba(220, 38, 38, 0.25);
    color: #fca5a5;
}

[data-theme="dark"] .reschedule-quick-presets .preset-label,
.dark-theme .reschedule-quick-presets .preset-label {
    color: #cbd5e1;
}

[data-theme="dark"] .btn-reschedule-preset,
.dark-theme .btn-reschedule-preset {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .btn-reschedule-preset .pr-title,
.dark-theme .btn-reschedule-preset .pr-title {
    color: #f1f5f9;
}

[data-theme="dark"] .btn-reschedule-preset .pr-sub,
.dark-theme .btn-reschedule-preset .pr-sub {
    color: #94a3b8;
}

[data-theme="dark"] .btn-reschedule-preset:hover,
.dark-theme .btn-reschedule-preset:hover {
    background: #273549;
    border-color: #60a5fa;
}

[data-theme="dark"] .btn-reschedule-preset.active,
.dark-theme .btn-reschedule-preset.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .today-overdue-alert-card {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
    }

    .today-overdue-alert-card .toac-icon-col {
        display: none;
    }

    .today-overdue-alert-card .toac-actions-col {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }

    .btn-toac-move-all,
    .btn-toac-view-overdue {
        width: 100%;
        justify-content: center;
    }

    .reschedule-preset-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   Financial Management Module (مدیریت درآمد و هزینه‌ها)
   ========================================================================== */

/* 1. Hero Banner */
.tasks-hero-banner.hero-finance {
    background: linear-gradient(135deg, #064e3b 0%, #0d9488 45%, #0284c7 100%);
    box-shadow: 0 14px 34px rgba(13, 148, 136, 0.28);
}

.hero-btn-expense {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}
.hero-btn-expense:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-1px);
}

.hero-btn-income {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}
.hero-btn-income:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-1px);
}

.hero-btn-print {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.hero-btn-print:hover {
    background: rgba(255, 255, 255, 0.32) !important;
    transform: translateY(-1px);
}

.finance-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    z-index: 99999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: toastSlideUp 0.25s ease;
}

/* 2. KPI Summary Grid */
.finance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.finance-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.finance-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.finance-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
}

.finance-kpi-card.kpi-income::before { background: #10b981; }
.finance-kpi-card.kpi-expense::before { background: #ef4444; }
.finance-kpi-card.kpi-balance.balance-positive::before { background: #3b82f6; }
.finance-kpi-card.kpi-balance.balance-negative::before { background: #f59e0b; }
.finance-kpi-card.kpi-rate::before { background: #6366f1; }

.kpi-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 24px;
    flex-shrink: 0;
}

.kpi-income .kpi-icon-wrap { background: #ecfdf5; }
.kpi-expense .kpi-icon-wrap { background: #fef2f2; }
.kpi-balance .kpi-icon-wrap { background: #eff6ff; }
.kpi-rate .kpi-icon-wrap { background: #eef2ff; }

.kpi-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.kpi-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.kpi-value {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}

.kpi-value small {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-right: 3px;
}

.text-emerald { color: #059669 !important; }
.text-rose { color: #e11d48 !important; }
.text-blue { color: #2563eb !important; }
.text-indigo { color: #4f46e5 !important; }

.kpi-sub {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 2px;
}

.kpi-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    margin-top: 6px;
    overflow: hidden;
}

.kpi-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #3b82f6);
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* 3. Time Filter Bar */
.finance-period-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 18px;
    margin-bottom: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.period-pills-track {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.period-pill-btn {
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.period-pill-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.period-pill-btn.active {
    background: #0d9488;
    border-color: #0d9488;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(13, 148, 136, 0.28);
}

.custom-date-range-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.custom-range-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-range-item label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}

/* 4. Visual Analytics Section */
.finance-analytics-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}

.analytics-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.analytics-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.analytics-icon {
    font-size: 26px;
}

.analytics-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.analytics-header small {
    font-size: 11.5px;
    color: #64748b;
}

.analytics-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analytics-empty {
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}

.breakdown-row {
    display: grid;
    grid-template-columns: 140px 1fr 120px;
    align-items: center;
    gap: 12px;
}

.breakdown-label-col {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.breakdown-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.breakdown-name {
    font-size: 12.5px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-count {
    font-size: 11px;
    color: #94a3b8;
}

.breakdown-bar-col {
    width: 100%;
}

.breakdown-progress {
    height: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.breakdown-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease;
}

.breakdown-amount-col {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.breakdown-amount-col strong {
    font-size: 12.5px;
    color: #0f172a;
}

.breakdown-amount-col small {
    font-size: 10px;
    color: #64748b;
}

.breakdown-pct {
    font-size: 11px;
    font-weight: 800;
}

/* 5. Transactions List */
.finance-list-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.finance-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.toolbar-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.type-tab-btn {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.type-tab-btn .tab-count {
    background: #e2e8f0;
    color: #334155;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10.5px;
}

.type-tab-btn.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.type-tab-btn.active .tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.type-tab-btn.tab-expense.active {
    background: #e11d48;
    border-color: #e11d48;
}

.type-tab-btn.tab-income.active {
    background: #059669;
    border-color: #059669;
}

.toolbar-search-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrap .search-icon {
    position: absolute;
    right: 12px;
    font-size: 14px;
    color: #94a3b8;
    pointer-events: none;
}

.finance-search-input {
    padding: 7px 34px 7px 30px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 12.5px;
    width: 260px;
    transition: all 0.15s ease;
}

.finance-search-input:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.btn-clear-search {
    position: absolute;
    left: 8px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
}

.btn-sort-toggle {
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.btn-sort-toggle:hover {
    background: #f1f5f9;
}

/* 6. Transaction Row Items */
.finance-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.finance-row-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: all 0.18s ease;
}

.finance-row-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.finance-row-item.is-expense {
    border-right: 4px solid #f43f5e;
}

.finance-row-item.is-income {
    border-right: 4px solid #10b981;
}

.row-category-badge {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.row-main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.row-title-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.row-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
}

.payment-method-pill {
    font-size: 11px;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
}

.row-desc {
    margin: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    color: #94a3b8;
    flex-wrap: wrap;
}

.btn-receipt-view {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.btn-receipt-view:hover {
    background: #dcfce7;
}

.row-amount-col {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.row-amount-num {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
}

.row-amount-num.amount-income {
    color: #059669;
}

.row-amount-num.amount-expense {
    color: #e11d48;
}

.row-amount-num small {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    margin-right: 2px;
}

.amount-words {
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 2px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-actions-col {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-row-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    transition: all 0.15s ease;
}

.btn-row-action.btn-edit:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

.btn-row-action.btn-delete:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* 7. Empty State */
.finance-empty-state {
    padding: 48px 24px;
    text-align: center;
}

.finance-empty-state .empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.finance-empty-state h3 {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
}

.finance-empty-state p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 18px;
}

.empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-empty-expense,
.btn-empty-income {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.btn-empty-expense {
    background: #e11d48;
    color: #fff;
}

.btn-empty-income {
    background: #059669;
    color: #fff;
}

/* 8. Finance Modal Card */
.finance-modal-card {
    max-width: 620px !important;
}

.modal-header-expense {
    border-bottom-color: #fecaca !important;
}

.modal-header-income {
    border-bottom-color: #a7f3d0 !important;
}

.modal-type-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.type-switch-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}

.type-switch-btn.switch-expense.active {
    background: #fef2f2;
    border-color: #f43f5e;
    color: #e11d48;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.2);
}

.type-switch-btn.switch-income.active {
    background: #ecfdf5;
    border-color: #10b981;
    color: #059669;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.amount-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.amount-big-input {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: 0.5px;
    padding-left: 60px !important;
}

.amount-unit-tag {
    position: absolute;
    left: 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: #64748b;
    pointer-events: none;
}

.amount-words-live {
    margin-top: 6px;
    font-size: 12px;
    color: #0d9488;
    background: #f0fdfa;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px dashed #99f6e4;
}

.modal-date-picker-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-date-shortcuts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-date-sc {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}

.btn-date-sc.active {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}

.finance-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
}

.category-picker-chip {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-picker-chip:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.category-picker-chip.selected {
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}

.receipt-preview-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.btn-remove-receipt {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.receipt-upload-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-upload-receipt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    width: 100%;
}

.receipt-hidden-input {
    display: none;
}

.btn-save-expense {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.btn-save-income {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

/* 9. Dashboard Mini Widget */
.dash-finance-mini-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.dash-finance-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.dfs-label {
    color: #64748b;
    font-weight: 600;
}

.dfs-val {
    font-weight: 800;
}

.dfs-balance-row {
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}

.dfs-balance-row .dfs-label {
    color: #0f172a;
    font-weight: 800;
}

/* 10. Dark Theme for Finance Module */
[data-theme="dark"] .finance-kpi-card,
.dark-theme .finance-kpi-card,
[data-theme="dark"] .finance-period-bar,
.dark-theme .finance-period-bar,
[data-theme="dark"] .analytics-card,
.dark-theme .analytics-card,
[data-theme="dark"] .finance-list-container,
.dark-theme .finance-list-container {
    background: #161b22 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .kpi-label,
.dark-theme .kpi-label,
[data-theme="dark"] .analytics-header small,
.dark-theme .analytics-header small,
[data-theme="dark"] .row-desc,
.dark-theme .row-desc,
[data-theme="dark"] .dfs-label,
.dark-theme .dfs-label {
    color: #8b949e !important;
}

[data-theme="dark"] .analytics-title,
.dark-theme .analytics-title,
[data-theme="dark"] .row-title,
.dark-theme .row-title,
[data-theme="dark"] .breakdown-amount-col strong,
.dark-theme .breakdown-amount-col strong,
[data-theme="dark"] .dfs-balance-row .dfs-label,
.dark-theme .dfs-balance-row .dfs-label {
    color: #f0f6fc !important;
}

[data-theme="dark"] .breakdown-name,
.dark-theme .breakdown-name {
    color: #c9d1d9 !important;
}

[data-theme="dark"] .finance-row-item,
.dark-theme .finance-row-item {
    background: #0d1117 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .finance-row-item:hover,
.dark-theme .finance-row-item:hover {
    border-color: #8b949e !important;
}

[data-theme="dark"] .payment-method-pill,
.dark-theme .payment-method-pill {
    background: #21262d !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .period-pill-btn,
.dark-theme .period-pill-btn,
[data-theme="dark"] .type-tab-btn,
.dark-theme .type-tab-btn,
[data-theme="dark"] .btn-sort-toggle,
.dark-theme .btn-sort-toggle,
[data-theme="dark"] .btn-row-action,
.dark-theme .btn-row-action {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .finance-search-input,
.dark-theme .finance-search-input {
    background: #0d1117 !important;
    border-color: #30363d !important;
    color: #f0f6fc !important;
}

[data-theme="dark"] .type-switch-btn,
.dark-theme .type-switch-btn {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .category-picker-chip,
.dark-theme .category-picker-chip {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}

[data-theme="dark"] .kpi-income .kpi-icon-wrap,
.dark-theme .kpi-income .kpi-icon-wrap { background: rgba(16, 185, 129, 0.15) !important; }
[data-theme="dark"] .kpi-expense .kpi-icon-wrap,
.dark-theme .kpi-expense .kpi-icon-wrap { background: rgba(239, 68, 68, 0.15) !important; }
[data-theme="dark"] .kpi-balance .kpi-icon-wrap,
.dark-theme .kpi-balance .kpi-icon-wrap { background: rgba(59, 130, 246, 0.15) !important; }
[data-theme="dark"] .kpi-rate .kpi-icon-wrap,
.dark-theme .kpi-rate .kpi-icon-wrap { background: rgba(99, 102, 241, 0.15) !important; }

[data-theme="dark"] .amount-big-input,
.dark-theme .amount-big-input {
    color: #f0f6fc !important;
}

[data-theme="dark"] .amount-words-live,
.dark-theme .amount-words-live {
    background: rgba(13, 148, 136, 0.15) !important;
    border-color: rgba(13, 148, 136, 0.35) !important;
    color: #2dd4bf !important;
}

/* 11. Mobile Responsiveness */
@media (max-width: 992px) {
    .finance-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .finance-analytics-section {
        grid-template-columns: 1fr;
    }

    .breakdown-row {
        grid-template-columns: 120px 1fr 100px;
    }
}

@media (max-width: 768px) {
    .finance-kpi-grid {
        grid-template-columns: 1fr;
    }

    .finance-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-type-tabs {
        width: 100%;
        justify-content: space-between;
    }

    .toolbar-search-tools {
        width: 100%;
        flex-direction: column;
    }

    .search-input-wrap,
    .finance-search-input {
        width: 100%;
    }

    .finance-row-item {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .row-category-badge {
        align-self: flex-start;
    }

    .row-amount-col {
        align-items: flex-start;
        padding-top: 8px;
        border-top: 1px dashed #e2e8f0;
    }

    .row-actions-col {
        align-self: flex-end;
    }
}

/* ==========================================================================
   High-Tech Non-Blocking Blazor Reconnection & Offline Support
   ========================================================================== */

/* 1. Reconnection Top Pill Banner (Replaces default Blazor full-screen blocking overlay) */
#components-reconnect-modal {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important; /* CRITICAL: Never block user interaction or dim the page */
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: none !important;
    opacity: 1 !important;
    text-align: right !important;
    animation: slideDownPill 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes slideDownPill {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}

/* Hide inactive states inside modal */
#components-reconnect-modal .reconnect-state {
    display: none !important;
}

#components-reconnect-modal.components-reconnect-show .reconnect-show {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-failed {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected {
    display: flex !important;
}

.offline-top-pill {
    pointer-events: auto !important; /* Allow clicking buttons inside the pill */
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 16px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    direction: rtl !important;
    max-width: 94vw !important;
}

.offline-pill-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    flex-shrink: 0 !important;
}

.offline-pill-dot.pulse {
    animation: pillPulse 1.4s infinite !important;
}

@keyframes pillPulse {
    0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.offline-pill-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.btn-offline-pill-action {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}

.btn-offline-pill-action:hover {
    transform: scale(1.04) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}

.btn-offline-pill-retry {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}

.btn-offline-pill-retry:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* 2. Standalone Client-Side Offline Task Modal */
.offline-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    direction: rtl !important;
    animation: offlineFadeIn 0.2s ease-out !important;
}

.offline-modal-backdrop.is-open,
.offline-modal-backdrop.show {
    display: flex !important;
}

@keyframes offlineFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.offline-modal-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 460px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: offlineSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .offline-modal-card,
.dark-theme .offline-modal-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

@keyframes offlineSlideUp {
    from { transform: translateY(30px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.offline-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.03) 100%) !important;
}

[data-theme="dark"] .offline-modal-header,
.dark-theme .offline-modal-header {
    background: #161e2e !important;
    border-bottom-color: #1e293b !important;
}

.offline-modal-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.offline-modal-bolt {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.offline-modal-heading {
    display: block !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

[data-theme="dark"] .offline-modal-heading,
.dark-theme .offline-modal-heading {
    color: #f8fafc !important;
}

.offline-modal-sub {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

[data-theme="dark"] .offline-modal-sub,
.dark-theme .offline-modal-sub {
    color: #94a3b8 !important;
}

.offline-modal-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[data-theme="dark"] .offline-modal-close,
.dark-theme .offline-modal-close {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

.offline-modal-body {
    padding: 18px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

.offline-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.offline-label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

[data-theme="dark"] .offline-label,
.dark-theme .offline-label {
    color: #cbd5e1 !important;
}

.offline-input,
.offline-textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .offline-input,
[data-theme="dark"] .offline-textarea,
.dark-theme .offline-input,
.dark-theme .offline-textarea {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.offline-input:focus,
.offline-textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

.offline-chips-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
}

.offline-chip {
    padding: 8px 4px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-align: center !important;
}

[data-theme="dark"] .offline-chip,
.dark-theme .offline-chip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

.offline-chip:hover {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
}

[data-theme="dark"] .offline-chip:hover,
.dark-theme .offline-chip:hover {
    background: #283347 !important;
}

.offline-chip.active {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3) !important;
}

.offline-checkbox-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    user-select: none !important;
}

[data-theme="dark"] .offline-checkbox-label,
.dark-theme .offline-checkbox-label {
    color: #cbd5e1 !important;
}

.offline-modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

[data-theme="dark"] .offline-modal-footer,
.dark-theme .offline-modal-footer {
    background: #161e2e !important;
    border-top-color: #1e293b !important;
}

.btn-offline-modal-cancel {
    padding: 9px 18px !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

[data-theme="dark"] .btn-offline-modal-cancel,
.dark-theme .btn-offline-modal-cancel {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

.btn-offline-modal-save {
    padding: 9px 20px !important;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.15s ease !important;
}

.btn-offline-modal-save:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
}

/* Offline row badge */
.offline-row-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    background: rgba(245, 158, 11, 0.14) !important;
    color: #d97706 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    white-space: nowrap !important;
}

[data-theme="dark"] .offline-row-tag,
.dark-theme .offline-row-tag {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}