/* ================================================================
   VN-TRACKING DASHBOARD — ULTRA-PREMIUM DESIGN SYSTEM (LIGHT/DARK)
   Crafted with Senior UI/UX Precision (Linear & Apple Aesthetic)
   ================================================================ */

/* ======================== 1. DESIGN TOKENS ======================== */
:root {
    /* LIGHT THEME (Porcelain & Slate Elegance) */
    --bg-page: #f8fafc;
    --bg-mesh: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
               radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.05) 0px, transparent 50%),
               radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.04) 0px, transparent 50%);
    --sidebar-bg: rgba(255, 255, 255, 0.9);
    --sidebar-border: rgba(226, 232, 240, 0.8);
    --surface: #ffffff;
    --surface-hover: #f1f5f9;
    --surface-card: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.8);
    --border: #e2e8f0;
    --border-subtle: #edf2f7;
    --border-focus: rgba(99, 102, 241, 0.4);

    /* Brand Accents */
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-glow: rgba(79, 70, 229, 0.25);
    --primary-bg: #eef2ff;
    --primary-text: #3730a3;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

    --accent-purple: #8b5cf6;
    --accent-cyan: #0ea5e9;
    --accent-emerald: #10b981;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;

    /* Typography */
    --text: #090d16;
    --text-2: #334155;
    --text-3: #64748b;
    --text-4: #94a3b8;

    /* Radius System */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* Elevation & Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 20px 35px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
    --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
    --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.2);

    /* Card Statuses Light */
    --card-not-started-bg: #ffffff;
    --card-not-started-border: #e2e8f0;
    --card-not-started-text: #475569;
    --card-not-started-glow: rgba(148, 163, 184, 0.15);

    --card-in-progress-bg: #fffbf5;
    --card-in-progress-border: #fed7aa;
    --card-in-progress-text: #9a3412;
    --card-in-progress-glow: rgba(245, 158, 11, 0.18);

    --card-delivered-bg: #f5fdf8;
    --card-delivered-border: #bbf7d0;
    --card-delivered-text: #166534;
    --card-delivered-glow: rgba(16, 185, 129, 0.18);

    --sidebar-w: 260px;
    --font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-spring: 400ms cubic-bezier(0.16, 1, 0.3, 1);
    --ux-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
    --ux-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Toast Container (Top Right) */
.toast-container { position: fixed; top: 24px; right: 24px; z-index: 100000; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast {
    pointer-events: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px;
    max-width: 440px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: slideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.toast:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.toast-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; box-shadow: var(--shadow-xs); }
.toast-success { border-color: rgba(16, 185, 129, 0.4); background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, var(--surface) 100%); }
.toast-success .toast-icon { background: var(--accent-emerald); color: #fff; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); }
.toast-error { border-color: rgba(244, 63, 94, 0.4); background: linear-gradient(90deg, rgba(244, 63, 94, 0.08) 0%, var(--surface) 100%); }
.toast-error .toast-icon { background: var(--accent-rose); color: #fff; box-shadow: 0 2px 6px rgba(244, 63, 94, 0.3); }
.toast-warning { border-color: rgba(245, 158, 11, 0.4); background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, var(--surface) 100%); }
.toast-warning .toast-icon { background: var(--accent-amber); color: #fff; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3); }
.toast-info { border-color: rgba(99, 102, 241, 0.4); background: linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0%, var(--surface) 100%); }
.toast-info .toast-icon { background: var(--primary); color: #fff; box-shadow: 0 2px 6px var(--primary-glow); }
.toast-msg { flex: 1; font-weight: 600; font-size: 0.9rem; color: var(--text); line-height: 1.45; }
.toast-close { flex-shrink: 0; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 1.15rem; padding: 2px 6px; margin-left: auto; border-radius: var(--radius-xs); transition: all var(--t-fast); }
.toast-close:hover { color: var(--text); background: var(--surface-hover); }

/* Task/chat notification toast: nền sáng ở light theme, chữ tương phản rõ. */
.task-toast-task { color: #b45309; }
html.dark-theme .task-toast-task,
html:has(body.dark-theme) .task-toast-task,
body.dark-theme .task-toast-task { color: #fbbf24; }
.task-toast-close { color: var(--text-3); }
.task-toast-close:hover { color: var(--text); }

@keyframes slideInRight { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

html.dark-theme, html:has(body.dark-theme), body.dark-theme {
    color-scheme: dark;
    /* DARK THEME (Obsidian Space & Neon Slate) */
    --bg-page: #080c14;
    --bg-mesh: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
               radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.08) 0px, transparent 50%),
               radial-gradient(at 50% 100%, rgba(168, 85, 247, 0.07) 0px, transparent 60%);
    --sidebar-bg: rgba(13, 18, 31, 0.92);
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --surface: #111726;
    --surface-hover: #192238;
    --surface-card: #121929;
    --surface-glass: rgba(17, 23, 38, 0.85);
    --border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-focus: rgba(129, 140, 248, 0.5);

    --primary: #6366f1;
    --primary-hover: #818cf8;
    --primary-glow: rgba(99, 102, 241, 0.35);
    --primary-bg: rgba(99, 102, 241, 0.15);
    --primary-text: #e0e7ff;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

    --accent-purple: #a855f7;
    --accent-cyan: #38bdf8;
    --accent-emerald: #34d399;
    --accent-amber: #fbbf24;
    --accent-rose: #fb7185;

    --text: #f8fafc;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;
    --text-4: #64748b;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, 0.75), 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 30px 60px -12px rgba(0, 0, 0, 0.9);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.3);

    /* Card Statuses Dark */
    --card-not-started-bg: #121929;
    --card-not-started-border: rgba(255, 255, 255, 0.08);
    --card-not-started-text: #cbd5e1;
    --card-not-started-glow: rgba(148, 163, 184, 0.1);

    --card-in-progress-bg: rgba(234, 88, 12, 0.08);
    --card-in-progress-border: rgba(245, 158, 11, 0.3);
    --card-in-progress-text: #fdba74;
    --card-in-progress-glow: rgba(245, 158, 11, 0.18);

    --card-delivered-bg: rgba(16, 185, 129, 0.08);
    --card-delivered-border: rgba(16, 185, 129, 0.3);
    --card-delivered-text: #86efac;
    --card-delivered-glow: rgba(16, 185, 129, 0.18);
}

/* ======================== 2. RESET & BASE ======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font-size: 14px;
    scroll-behavior: smooth;
    background: var(--bg-page);
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
}
body { 
    font-family: var(--font); 
    background: var(--bg-page); 
    background-image: var(--bg-mesh);
    background-attachment: scroll;
    color: var(--text); 
    line-height: 1.55; 
    min-height: 100vh; 
    zoom: 0.92;
    transition: background-color var(--t-smooth), color var(--t-smooth);
    overflow-x: hidden;
}
input, button, select, textarea { font-family: inherit; }
a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-hover); }
select option { background: var(--surface); color: var(--text); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); }

/* ======================== APPLE 120Hz PROMOTION SMOOTH SCROLL & GPU ACCELERATION ======================== */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* Tạm dừng các animation trang trí nặng trong lúc cuộn; tự chạy tiếp khi dừng. */
html.is-scrolling .hero-filmstrip-track,
html.is-scrolling .honor-cloud-band,
html.is-scrolling .honor-cloud-item,
html.is-scrolling .weather-3d-float,
html.is-scrolling .weather-3d-sun::after,
html.is-scrolling .weather-3d-sun-rays {
    animation-play-state: paused !important;
}

/* GPU Hardware Acceleration for 120fps Silky Rendering */
.kanban-board,
.kanban-column,
.task-card,
.stat-card,
.info-banner,
.filter-bar,
.sidebar,
.profile-panel,
.pet-flyout-panel,
.table-section,
.modal-overlay,
.modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Apple ProMotion Spring Hover Responses */
.stat-card,
.task-card,
.nav-item,
.btn-primary,
.btn-outline,
.mobile-icon-btn,
.mobile-menu-btn {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ======================== 3. SIDEBAR (LUCIAN #040 EXPANDING SPRING RAIL) ======================== */
.sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--sidebar-w); bottom: 0;
    background: var(--sidebar-bg);
    display: flex; flex-direction: column;
    z-index: 100;
    padding: 20px 14px;
    border-right: 1px solid var(--sidebar-border);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--t-smooth), border-color var(--t-smooth);
    will-change: auto;
    transform: translateZ(0);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04);
}
.sidebar::-webkit-scrollbar {
    display: none;
}

/* Sidebar Top & Logo */
.sidebar-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    margin-bottom: 24px;
}
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    user-select: none;
    min-width: 0;
}
.sidebar-logo-icon {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 9px;
    background: transparent !important;
    display: grid;
    place-items: center;
    box-shadow: none !important;
    transition: transform 0.25s ease;
}
.sidebar-logo:hover .sidebar-logo-icon {
    transform: scale(1.08);
}
.sidebar-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-brand-name {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.2;
}

/* Lucian #040 Rail Collapse Toggle Button */
.sidebar-rail-tog {
    position: absolute;
    right: -11px;
    top: 22px;
    width: 24px;
    height: 30px;
    border: 1px solid var(--border);
    padding: 0;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s, transform 0.25s ease;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sidebar:hover .sidebar-rail-tog,
.sidebar-rail-tog:focus-visible {
    opacity: 1;
}
.sidebar-rail-tog:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--primary-glow);
    transform: scale(1.08);
}
.sidebar-rail-tog svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
body.sidebar-collapsed .sidebar-rail-tog svg {
    transform: rotate(180deg);
}

.version-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: var(--primary-hover) !important;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
    margin-top: 2px;
}

.nav-label {
    font-size: 0.68rem; font-weight: 800; color: var(--text-4);
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0 12px; margin-bottom: 8px; margin-top: 18px;
    white-space: nowrap;
    overflow: hidden;
    max-height: 24px;
    transition: opacity 0.2s ease, max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), margin 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light theme: nhãn MAIN/TOOLS/SETTINGS dùng --text-4 (#94a3b8) quá nhạt.
   Trên macOS/Safari, -webkit-font-smoothing: antialiased làm chữ mảnh càng nhạt
   nên gần như trắng trên nền sidebar trắng. Tối lại cho đủ tương phản. */
body:not(.dark-theme) .nav-label {
    color: #64748b;
}

/* Lucian #040 Navigation List & Sliding Highlight Pill */
.sidebar-nav {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-hl {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 48px;
    border-radius: 15px;
    background: var(--primary-bg);
    border: 1px solid rgba(99, 102, 241, 0.2);
    transform: translateY(var(--y, 0));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s ease, opacity 0.2s;
    pointer-events: none;
    z-index: 0;
}
.sidebar-hl::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    bottom: 11px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--primary-gradient);
    box-shadow: 0 0 10px var(--primary-glow);
}
[data-theme="dark"] .sidebar-hl {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.nav-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 15px;
    background: none;
    color: var(--text-2);
    opacity: 0.68;
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
    user-select: none;
    box-sizing: border-box;
    overflow: hidden;
}
.nav-item:hover {
    opacity: 1;
    color: var(--text);
}
.nav-item.active {
    opacity: 1;
    color: var(--primary);
    font-weight: 700;
}
[data-theme="dark"] .nav-item.active {
    color: #fff;
}
.nav-item-content {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    transition: gap 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease, stroke 0.2s ease;
}
.nav-item:hover svg,
.nav-item.active svg {
    stroke: var(--primary);
    transform: scale(1.08);
}
[data-theme="dark"] .nav-item.active svg {
    stroke: #818cf8;
}
.nav-item span {
    font-size: 14.5px;
    font-weight: 650;
    white-space: nowrap;
    opacity: 1;
    transform: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-ext-icon {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.nav-item:hover .nav-ext-icon {
    opacity: 1;
    transform: translate(2px, -2px);
}

/* Badges */
.sidebar-bd, .nav-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #FF5A6E;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-style: normal;
    box-shadow: 0 2px 8px rgba(255, 90, 110, 0.4);
    transition: transform 0.4s var(--ux-spring);
}

/* Custom Language Dropdown */
.custom-lang-select {
    position: relative;
    font-size: 0.82rem;
    font-weight: 700;
}
.lang-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}
.lang-trigger:hover, .custom-lang-select.open .lang-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}
.custom-lang-select.open .lang-arrow {
    transform: rotate(180deg);
}
.lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 72px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all var(--t-fast);
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.custom-lang-select.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.lang-option {
    padding: 8px 14px;
    cursor: pointer;
    text-align: center;
    color: var(--text-2);
    font-weight: 600;
    transition: all var(--t-fast);
}
.lang-option:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.lang-option.active {
    background: var(--primary-gradient);
    color: white;
    font-weight: 700;
}

/* User Card (Lucian #040 Bottom Profile Bar) */
.user-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 12px;
    border-radius: 16px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.45s var(--ux-spring), box-shadow 0.3s var(--ux-ease), border-color 0.25s;
    box-sizing: border-box;
}
.user-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 20px -4px var(--primary-glow);
}
.user-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 750;
    font-size: 0.95rem;
    box-shadow: 0 2px 10px var(--primary-glow);
    overflow: hidden;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-avatar::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--surface);
    box-shadow: 0 0 6px #10b981;
}
.user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.25s var(--ux-ease);
}
.user-name {
    font-size: 13.5px;
    font-weight: 750;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.user-role {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

/* ======================== COLLAPSED STATE (LUCIAN #040 RAIL) ======================== */
body.sidebar-collapsed {
    --sidebar-w: 78px;
}
body.sidebar-collapsed .sidebar {
    padding: 20px 14px;
}
body.sidebar-collapsed .sidebar-top {
    padding: 0;
}
body.sidebar-collapsed .sidebar-logo {
    gap: 0;
}
body.sidebar-collapsed .sidebar-logo-text {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}
body.sidebar-collapsed .nav-label {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    margin-top: 4px;
    margin-bottom: 0;
    overflow: hidden;
}
body.sidebar-collapsed .nav-item {
    padding: 0 14px;
}
body.sidebar-collapsed .nav-item-content {
    gap: 0;
}
body.sidebar-collapsed .nav-item span {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}
body.sidebar-collapsed .nav-ext-icon {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .sidebar-bd {
    position: absolute;
    top: 6px;
    right: 6px;
}
body.sidebar-collapsed .user-card {
    padding: 0;
    justify-content: center;
    gap: 0;
}
body.sidebar-collapsed .user-info,
body.sidebar-collapsed .profile-chevron {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
    width: 0;
    height: 0;
    overflow: hidden;
    white-space: nowrap;
}
body.sidebar-collapsed .sidebar-pet-panel {
    opacity: 0;
    pointer-events: none;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    transform: scale(0.94) translateY(8px);
    overflow: hidden;
    visibility: hidden;
}
body.sidebar-collapsed .custom-lang-select {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

/* Khi thu gọn rail: ẩn LSA Music giống pet (nhạc vẫn phát, chỉ ẩn UI) */
body.sidebar-collapsed #lofi-radio-widget,
body.sidebar-collapsed #radio-participants-marquee {
    display: none !important;
}

/* Giảm chi phí style/paint trong lúc đóng-mở rail */
body.sidebar-is-animating .sidebar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: layout paint style;
    will-change: width;
}
body.sidebar-is-animating .main-area {
    will-change: margin-left;
}
body.sidebar-is-animating #lofi-radio-widget,
body.sidebar-is-animating #radio-participants-marquee,
body.sidebar-is-animating .sidebar-pet-panel {
    display: none !important;
}
body.sidebar-is-animating .sidebar-hl,
body.sidebar-is-animating #sidebar-tools-hl {
    opacity: 0 !important;
    transition: none !important;
}

/* Animation lock: disable pointer events & isolate layout during sidebar toggle for 60fps smoothness */
body.sidebar-is-animating .sidebar,
body.sidebar-is-animating .main-area {
    pointer-events: none !important;
}
body.sidebar-is-animating .main-area {
    contain: layout paint !important;
}
body.sidebar-is-animating #tasks-table,
body.sidebar-is-animating .table-responsive,
body.sidebar-is-animating .tasks-table-container {
    contain: strict !important;
}
body.sidebar-is-animating * {
    user-select: none !important;
}

/* ======================== 4. MAIN AREA & HEADER ======================== */
.main-area {
    margin-left: var(--sidebar-w);
    padding: 32px 40px;
    min-height: 100vh;
    transition: margin-left 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: auto;
    transform: translateZ(0);
}

.top-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 32px;
}
.header-left .welcome { font-size: 0.88rem; color: var(--text-3); margin-bottom: 4px; font-weight: 600; letter-spacing: 0.02em; }
.header-left h1 { font-size: 1.9rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }

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

/* Theme Toggle Button — Lucian Labs Glass Tactile */
.theme-toggle {
    background: var(--surface-glass, rgba(255, 255, 255, 0.75));
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: none;
    box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-2);
    transition: transform 0.45s var(--ux-spring),
                box-shadow 0.3s var(--ux-ease),
                background 0.3s var(--ux-ease),
                color 0.2s ease;
}
.theme-toggle:hover {
    background: var(--surface-hover);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--border-focus), 0 8px 18px -6px var(--primary-glow);
    transform: translateY(-1.5px) rotate(15deg) scale(1.06);
}
.theme-toggle:active {
    transform: scale(0.92);
    transition-duration: 0.15s;
}
.theme-toggle svg { width: 20px; height: 20px; }

/* ================================================================
   LUCIAN LABS BUTTON SYSTEM: LIQUID GLASS & SPRING MICRO-INTERACTIONS
   ================================================================ */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 20px; border-radius: var(--radius-full);
    font-weight: 650; font-size: 0.85rem; font-family: var(--font);
    letter-spacing: -0.01em; cursor: pointer; border: none; outline: none;
    transition: transform 0.45s var(--ux-spring),
                box-shadow 0.3s var(--ux-ease),
                background-color 0.3s var(--ux-ease),
                color 0.2s ease;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover {
    transform: translateY(-1.5px);
}
.btn:active {
    transform: scale(0.94);
    transition-duration: 0.12s;
}

/* Secondary / Outline — Lucian Frosted Liquid Glass */
.btn-outline {
    background: var(--surface-glass, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--border), 0 2px 8px -2px var(--shadow-xs);
}
.btn-outline:hover {
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text-3), 0 8px 20px -6px var(--shadow-sm);
    transform: translateY(-1.5px);
}
.btn-outline:active {
    transform: scale(0.94);
    box-shadow: inset 0 0 0 1px var(--text-3), 0 2px 6px -2px var(--shadow-xs);
    transition-duration: 0.12s;
}

/* Primary — Lucian Liquid Glass Vibrant Gradient & Rim Light */
.btn-primary { 
    background: var(--primary-gradient); 
    color: #ffffff; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
                0 8px 22px -6px var(--primary-glow),
                0 2px 6px rgba(0, 0, 0, 0.08);
}
.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                0 12px 28px -6px var(--primary-glow),
                0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    color: #ffffff;
}
.btn-primary:hover::before {
    opacity: 1;
}
.btn-primary:active {
    transform: scale(0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                0 4px 12px -2px var(--primary-glow);
    transition-duration: 0.12s;
}

/* Button Small */
.btn-sm {
    height: 32px;
    padding: 0 14px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ----------------------------------------------------------------
   HERO CONTROLS — FROSTED BLUR
   Clean frosted buttons (no border, no rim highlight): the hero
   backdrop is simply blurred behind a soft veil. Applied to the
   online user cluster, notification bell, theme toggle (round) and
   the filter (indigo) / album (gold) pills in dashboard.html.
   ---------------------------------------------------------------- */
.liquid-glass {
    position: relative;
    backdrop-filter: blur(16px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(165%) !important;
    background: rgba(255, 255, 255, 0.26) !important;
    border: none !important;
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.3) !important;
    color: #0f172a !important;
    transition: transform 0.45s var(--ux-spring),
                box-shadow 0.3s var(--ux-ease),
                background 0.3s var(--ux-ease),
                color 0.2s ease;
}
.liquid-glass:hover {
    background: rgba(255, 255, 255, 0.38) !important;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.38) !important;
}
.liquid-glass:active {
    box-shadow: 0 3px 10px -6px rgba(15, 23, 42, 0.32) !important;
}

/* Tinted variants keep their accent colour through the blur */
.liquid-glass.glass-indigo {
    background: rgba(99, 102, 241, 0.4) !important;
    color: #1e1b4b !important;
}
.liquid-glass.glass-indigo:hover {
    background: rgba(99, 102, 241, 0.54) !important;
}
.liquid-glass.glass-gold {
    background: rgba(245, 158, 11, 0.38) !important;
    color: #78350f !important;
}
.liquid-glass.glass-gold:hover {
    background: rgba(245, 158, 11, 0.52) !important;
}
.liquid-glass.glass-gold i {
    color: #92400e !important;
}

/* Dark theme: deeper veil, light text */
body.dark-theme .liquid-glass {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.55) !important;
}
body.dark-theme .liquid-glass:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
body.dark-theme .liquid-glass.glass-indigo {
    background: rgba(99, 102, 241, 0.32) !important;
    color: #e0e7ff !important;
}
body.dark-theme .liquid-glass.glass-indigo:hover {
    background: rgba(99, 102, 241, 0.44) !important;
}
body.dark-theme .liquid-glass.glass-gold {
    background: rgba(245, 158, 11, 0.26) !important;
    color: #fef3c7 !important;
}
body.dark-theme .liquid-glass.glass-gold:hover {
    background: rgba(245, 158, 11, 0.38) !important;
}
body.dark-theme .liquid-glass.glass-gold i {
    color: #fbbf24 !important;
}

/* ======================== 5. TABS & CONTROLS ======================== */
.dashboard-controls {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 18px;
    position: relative;
    z-index: 40;
}

.tab-bar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-glass, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    padding: 4px;
    border-radius: var(--radius-full);
    border: none;
    box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
}
.tab-btn {
    padding: 7px 18px;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text-3);
    cursor: pointer;
    position: relative;
    transition: transform 0.45s var(--ux-spring),
                background-color 0.3s var(--ux-ease),
                color 0.2s ease,
                box-shadow 0.3s var(--ux-ease);
}
.tab-btn:hover:not(.active) {
    color: var(--text);
    background: var(--surface-hover);
    transform: translateY(-1px);
}
.tab-btn:active {
    transform: scale(0.95);
    transition-duration: 0.12s;
}
.tab-btn.active {
    background: var(--primary-gradient);
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px -2px var(--primary-glow);
    transform: none;
}

.info-banner { display: flex; align-items: center; gap: 16px; font-size: 0.85rem; color: var(--text-3); font-weight: 600; }
.deadline-badge { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(244, 63, 94, 0.25)); 
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171; 
    padding: 6px 16px; 
    border-radius: var(--radius-full); 
    font-weight: 800; 
    letter-spacing: 0.05em; 
    text-transform: uppercase; 
    font-size: 0.75rem; 
    display: inline-flex;
    align-items: center;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
    transition: all var(--t-fast);
}
.deadline-badge:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 24px rgba(239, 68, 68, 0.45);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
}
.deadline-badge:active {
    transform: translateY(0);
}

.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }

/* ======================== 6. KANBAN BOARD ======================== */
.kanban-board {
    display: flex; gap: 24px;
    overflow-x: auto; padding-bottom: 28px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    /* Chỉ chặn overscroll ngang (tránh back/forward gesture); cuộn dọc vẫn để Lenis xử lý */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

.kanban-column {
    flex: 1; min-width: 310px;
    display: flex; flex-direction: column; gap: 16px;
    background: rgba(255, 255, 255, 0.015);
    border-radius: var(--radius-xl);
    padding: 12px;
    border: 1px solid transparent;
    transition: background 0.2s;
}

.kanban-header {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 800; color: var(--text); font-size: 0.88rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 4px 8px;
}
.kanban-header::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.kanban-column[data-status="not-started"] .kanban-header::before {
    background: #94a3b8;
    box-shadow: 0 0 8px rgba(148, 163, 184, 0.6);
}
.kanban-column[data-status="in-progress"] .kanban-header::before {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
    animation: statusPulse 2s infinite ease-in-out;
}
.kanban-column[data-status="delivered"] .kanban-header::before {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}
@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.kanban-header .count {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-3);
    box-shadow: var(--shadow-xs);
}

.kanban-cards { 
    display: grid; 
    /* Responsive: tự chia 2-3-4 cột theo độ rộng (màn ~1920px -> 3/hàng; 
       hẹp dần -> 2 rồi 1, tablet/mobile có media query riêng ở dưới). */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 14px; 
}

.job-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin: 14px 0 6px;
    grid-column: 1 / -1;
}
.job-group-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Premium Card Styles (Apple 120Hz ProMotion Tactile Feel) */
.progress-card {
    border-radius: var(--radius-lg); padding: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    position: relative;
    background: var(--surface-card);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease,
                background-color 0.2s ease;
}

.progress-card:hover { 
    transform: translateY(-4px) translateZ(0); 
    box-shadow: var(--shadow-lg); 
    border-color: var(--primary);
}
.progress-card:active {
    transform: translateY(-1px) scale(0.978) translateZ(0);
    box-shadow: var(--shadow-xs);
    transition-duration: 0.08s;
}
.progress-card.status-in-progress:hover {
    box-shadow: var(--shadow-lg), 0 0 20px var(--card-in-progress-glow);
    border-color: rgba(245, 158, 11, 0.5);
}
.progress-card.status-in-progress:active {
    box-shadow: var(--shadow-xs), 0 0 10px var(--card-in-progress-glow);
}
.progress-card.status-delivered:hover {
    box-shadow: var(--shadow-lg), 0 0 20px var(--card-delivered-glow);
    border-color: rgba(16, 185, 129, 0.5);
}
.progress-card.status-delivered:active {
    box-shadow: var(--shadow-xs), 0 0 10px var(--card-delivered-glow);
}

.progress-card.status-not-started { background: var(--card-not-started-bg); border-color: var(--card-not-started-border); color: var(--card-not-started-text); }
.progress-card.status-in-progress { background: var(--card-in-progress-bg); border-color: var(--card-in-progress-border); color: var(--card-in-progress-text); }
.progress-card.status-delivered { background: var(--card-delivered-bg); border-color: var(--card-delivered-border); color: var(--card-delivered-text); }

.card-tags { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 12px; 
}
.tag {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    letter-spacing: 0.03em;
    box-shadow: var(--shadow-xs);
}

.card-comment-alarm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f59e0b;
    font-size: 0.78rem;
    padding: 3px 8px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--radius-full);
    animation: cardAlarmPulse 2.5s infinite ease-in-out;
    margin-left: auto;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.card-comment-alarm:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.7);
    transform: scale(1.1);
}

.card-comment-alarm .alarm-count-badge {
    font-size: 0.65rem;
    font-weight: 800;
    color: #f59e0b;
}

@keyframes cardAlarmPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); }
}

.card-title {
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.45;
    color: var(--text);
    letter-spacing: -0.01em;
}
/* Phiên âm tên tác phẩm - hiện nhỏ dưới tiêu đề thẻ kanban */
.card-reading {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-3);
    margin-top: -8px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-worker { 
    font-size: 0.82rem; font-weight: 600; color: var(--text-3); margin-bottom: 14px; 
    display: flex; align-items: center; gap: 8px; 
}
.worker-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-hover); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 800;
    border: 2px solid var(--surface-card);
    box-shadow: var(--shadow-xs);
}

.progress-info {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.72rem; font-weight: 800; margin-bottom: 6px;
    color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em;
}
.progress-track {
    height: 6px;
    background: rgba(148, 163, 184, 0.18);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.status-not-started .progress-fill { background: #94a3b8; }
.status-in-progress .progress-fill { background: linear-gradient(90deg, #f59e0b, #ea580c); box-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
.status-delivered .progress-fill { background: linear-gradient(90deg, #10b981, #059669); box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }

/* ======================== 7. FILTER DRAWER ======================== */
.drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 2000; opacity: 0; visibility: hidden; transition: all var(--t-base);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.filter-drawer {
    position: fixed; top: 0; right: 0;
    width: 400px; max-width: 100vw; height: 100vh;
    background: var(--surface); z-index: 2001;
    padding: 32px; border-left: 1px solid var(--border);
    transform: translateX(105%) translateZ(0);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.filter-drawer.open {
    transform: translateX(0) translateZ(0);
}

.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.drawer-header h2 { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.close-btn, .modal-close {
    background: var(--surface-glass, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: none;
    box-shadow: inset 0 0 0 1px var(--border);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-2);
    font-size: 1.15rem;
    transition: transform 0.45s var(--ux-spring),
                box-shadow 0.3s var(--ux-ease),
                background 0.3s var(--ux-ease),
                color 0.2s ease;
}
.close-btn:hover, .modal-close:hover {
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text-3), 0 4px 12px -2px var(--shadow-sm);
    transform: rotate(90deg) scale(1.06);
}
.close-btn:active, .modal-close:active {
    transform: scale(0.92);
    transition-duration: 0.12s;
}

.filter-group { margin-bottom: 28px; }
.filter-group-title { font-weight: 700; font-size: 0.8rem; color: var(--text-3); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }

.filter-option {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    cursor: pointer; transition: background var(--t-fast);
    font-weight: 500; font-size: 0.95rem; color: var(--text-2);
}
.filter-option:hover { background: var(--surface-hover); color: var(--text); }
.filter-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; border-radius: 4px; }

/* ======================== 8. DATA TABLE ======================== */
.table-section {
    margin-top: 40px;
    background: var(--surface-card);
    border-radius: var(--radius-2xl);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.table-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; cursor: pointer; user-select: none;
}
.table-header h3 {
    font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 12px;
    color: var(--text); letter-spacing: -0.02em;
}
.table-header h3 svg { stroke: var(--primary); }
.table-wrapper {
    overflow-x: auto; display: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}
.table-wrapper.open { display: block; animation: fadeIn 0.3s ease; margin-top: 20px; }

.data-table {
    width: 100%; border-collapse: collapse; font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.data-table th {
    text-align: left; padding: 14px 18px;
    background: var(--surface-hover);
    color: var(--text-3); font-weight: 800;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em;
    position: sticky; top: 0; z-index: 1;
}
.data-table td {
    padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
    color: var(--text-2); max-width: 260px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500; transition: background 0.15s;
}
.data-table tbody tr:hover td {
    background: var(--surface-hover);
    color: var(--text);
}

/* ======================== 9. MODALS & CHECKLISTS ======================== */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 12, 20, 0.72);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    z-index: 50000;
    display: flex;
    align-items: center; justify-content: center; padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Bỏ layout/paint của các overlay đang đóng (có hàng chục task-detail rất nặng),
       tránh Recalculate Style toàn bộ khi sidebar đổi width */
    content-visibility: hidden;
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
}
.modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    content-visibility: visible;
}

/* ======================== TASK DETAIL FULL-PAGE VIEW (NO POPUP) ======================== */
.modal-overlay.task-detail-page-view {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    background: var(--bg-page);
    background-image: var(--bg-mesh);
    background-attachment: scroll;
    z-index: 95;
    display: block !important;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(18px);
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.45s var(--ux-spring);
    scrollbar-gutter: stable;
}

body.sidebar-collapsed .modal-overlay.task-detail-page-view {
    left: 72px;
}

@media (max-width: 1024px) {
    .modal-overlay.task-detail-page-view {
        left: 0 !important;
        top: 56px;
    }
}

.modal-overlay.task-detail-page-view.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.task-page-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 32px 80px;
    box-sizing: border-box;
}

/* ======================== TOOL FULL-PAGE VIEWS (LIKE TASK DETAIL) ======================== */
.modal-overlay.task-detail-page-view.tool-page-view {
    overflow: hidden;
    background: #0b0f19 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#page-view-drive,
#page-view-drive .tool-page-container {
    background: #0b0f19 !important;
    background-color: #0b0f19 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#page-view-drive .tool-iframe-wrapper,
#page-view-drive iframe {
    background: #0b0f19 !important;
    background-color: #0b0f19 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#leave-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 99998 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#leave-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

#leave-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    background: #111827;
    width: 95%;
    max-width: 680px;
    height: 88vh;
    max-height: 820px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl), 0 25px 60px -15px rgba(0,0,0,0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 99999 !important;
    display: none;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border);
    overflow: hidden;
}
#leave-modal.active {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Calendar Subnav Tabs */
.calendar-subnav-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.7);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.calendar-subnav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-3);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.calendar-subnav-pill:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
.calendar-subnav-pill.active {
    color: #fff;
    background: #6366f1;
    box-shadow: 0 3px 12px rgba(99, 102, 241, 0.35);
}

.calendar-subview-panel {
    display: none;
    width: 100%;
    height: 100%;
}
.calendar-subview-panel.active {
    display: flex;
    flex-direction: column;
}

.leave-subpage-container {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Multi-step Leave Request UI */
.leave-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: rgba(15, 23, 42, 0.7);
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.leave-step-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-3);
    cursor: default;
    transition: all 0.2s ease;
    user-select: none;
}
.leave-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.2s ease;
}
.leave-step-item.active {
    color: #818cf8;
}
.leave-step-item.active .leave-step-num {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}
.leave-step-item.completed {
    color: #34d399;
}
.leave-step-item.completed .leave-step-num {
    background: #10b981;
    color: #fff;
}
.leave-step-sep {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    min-width: 10px;
    border-radius: 2px;
}
.leave-step-sep.completed {
    background: #10b981;
}

.leave-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 32px;
    scroll-behavior: smooth;
}
.leave-modal-body::-webkit-scrollbar {
    width: 6px;
}
.leave-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.leave-step-pane {
    display: none;
    animation: leaveFadeIn 0.25s ease forwards;
}
.leave-step-pane.active {
    display: block;
}
@keyframes leaveFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.leave-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.leave-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.leave-card-sub {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-bottom: 10px;
    line-height: 1.4;
}
.leave-card-guide {
    font-size: 0.78rem;
    color: var(--text-2);
    margin-bottom: 12px;
    background: rgba(99, 102, 241, 0.07);
    padding: 9px 12px;
    border-radius: 8px;
    border-left: 3px solid #6366f1;
    line-height: 1.45;
}

.leave-policy-content {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-2);
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    margin-bottom: 16px;
}
.leave-policy-content h4 {
    margin: 12px 0 6px;
    font-size: 0.9rem;
    color: #e2e8f0;
    font-weight: 700;
}
.leave-policy-content p, .leave-policy-content ul {
    margin: 4px 0 10px;
}
.leave-policy-content ul {
    padding-left: 20px;
}

.leave-radio-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.leave-radio-option:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
}
.leave-radio-option input[type="radio"] {
    accent-color: #6366f1;
    cursor: pointer;
    width: 17px;
    height: 17px;
    margin: 0;
}

.leave-upload-box {
    border: 2px dashed rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.04);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.leave-upload-box:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.09);
}

.tool-page-view .tool-page-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 16px 28px 24px;
    box-sizing: border-box;
}

.tool-page-view .tool-page-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.tool-page-view .tool-iframe-wrapper {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.tool-page-view .tool-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Lịch sử task: ưu tiên diện tích hiển thị nên viền ngoài mỏng hơn các tool khác.
   Dùng height:100% (thay vì 100vh) để trang phủ hết đáy cửa sổ: body có zoom .92
   nên 100vh bị hụt ~8% và chừa một khoảng trống ở dưới. */
#page-view-history .tool-page-container {
    height: 100%;
    padding: 10px 12px 10px;
}

#page-view-history .tool-page-nav-bar {
    padding-bottom: 9px;
    margin-bottom: 9px;
}

@media (max-width: 1024px) {
    .tool-page-view .tool-page-container {
        height: calc(100vh - 56px);
        padding: 12px 14px 18px;
    }
    #page-view-history .tool-page-container {
        height: 100%;
        padding: 10px 10px 10px;
    }
}

/* Breadcrumb Navigation Bar */
.task-page-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.task-page-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    flex-wrap: wrap;
}

.task-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-xs);
}
.task-back-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(-3px);
}
.task-back-btn:active {
    transform: scale(0.96);
}

.task-crumb-sep {
    color: var(--text-4);
    font-size: 0.9rem;
    font-weight: 600;
}

.task-crumb-root {
    color: var(--text-3);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}
.task-crumb-root:hover {
    color: var(--primary);
}

.task-crumb-current {
    font-weight: 800;
    background: var(--primary-bg);
    color: var(--primary);
    padding: 3px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.task-page-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-page-top-actions .export-project-btn,
.task-page-top-actions .export-btn,
.task-page-close-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-xs);
}
.task-page-top-actions .export-project-btn:hover {
    color: #10b981;
    border-color: #10b981;
    transform: scale(1.08);
}
.task-page-top-actions .export-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.08);
}
.task-page-close-btn:hover {
    background: rgba(244, 63, 94, 0.12);
    border-color: var(--accent-rose);
    color: var(--accent-rose);
    transform: scale(1.08);
}

/* Task Page Hero Title */
.task-page-header {
    margin-bottom: 22px;
}
.task-page-main-title {
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin-bottom: 10px;
}
.task-title-reading {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: 0;
}
.task-page-worker-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.task-page-worker-name {
    font-weight: 700;
    color: var(--text-2);
    font-size: 0.95rem;
}

/* ============ TASK MASTER LAYOUT (WORKFLOW CANVAS + CONTROL DECK) ============ */
.task-master-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 22px;
    align-items: stretch;
    min-height: calc(100vh - 190px);
    margin-top: 16px;
}

@media (max-width: 1240px) {
    .task-master-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* LEFT MAIN COLUMN: Workflow & Collaboration */
.task-main-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    height: 100%;
}

/* 1. Compact Work Links Toolbar */
.task-main-col .task-links-box {
    margin-bottom: 0;
    padding: 14px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
}

.task-main-col .task-links-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.task-main-col .task-links-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}

.task-main-col .task-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 768px) {
    .task-main-col .task-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.task-main-col .task-link-card {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    min-height: 52px;
    gap: 10px;
}

.task-main-col .task-link-icon {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
    border-radius: 7px;
}

.task-main-col .task-link-name {
    font-size: 0.88rem;
    font-weight: 800;
}

.task-main-col .task-link-status {
    font-size: 0.76rem;
}

/* 2. Checklist Grid: Balanced 3-Column Stepper */
.task-main-col .checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 0;
    align-items: stretch;
}

@media (max-width: 900px) {
    .task-main-col .checklist-grid {
        grid-template-columns: 1fr;
    }
}

.task-main-col .step-col {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 18px 16px 16px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.task-main-col .step-header {
    margin-bottom: 12px;
}

.task-main-col .step-title {
    font-size: 0.96rem;
}

.task-main-col .step-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.task-main-col .task-row {
    padding: 8px 10px;
}

.task-main-col .platform-badge {
    font-size: 0.74rem;
    padding: 3px 8px;
}

.task-main-col .check-label {
    font-size: 0.92rem;
}

.task-main-col .msg-template-card {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

.task-main-col .msg-template-label {
    font-size: 0.82rem;
}

.task-main-col .btn-copy-action {
    font-size: 0.82rem;
}

.task-main-col .msg-template-body {
    font-size: 0.88rem;
    line-height: 1.45;
}

.task-main-col .step-hint-box {
    margin-top: auto;
    padding: 10px 12px;
    font-size: 0.82rem;
}

/* 3. Collaboration & Comments Timeline */
.task-main-col .task-handover-box {
    margin-top: 0;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 18px 20px;
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 380px;
}

.task-main-col .handover-title {
    font-size: 1.02rem;
}

.task-main-col .handover-partner-badge {
    font-size: 0.84rem;
}

.task-main-col .quick-handover-label {
    font-size: 0.82rem;
}

.task-main-col .btn-quick-tag {
    font-size: 0.82rem;
    padding: 4px 10px;
}

.task-main-col .handover-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.task-main-col .handover-comments-list {
    flex: 1;
    min-height: 220px;
    max-height: none;
    overflow-y: auto;
    margin: 10px 0;
    padding-right: 6px;
    font-size: 0.9rem;
}

.task-main-col .handover-input {
    font-size: 0.92rem;
}

.task-main-col .btn-handover-send {
    font-size: 0.92rem;
}

/* RIGHT SIDEBAR: Control Deck (Stopwatch + Logtime) */
.task-side-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    height: 100%;
}

/* Time Tracker Card (2/5 height) */
.task-side-col .time-tracker-box {
    margin-top: 0;
    flex: 2 1 0 !important;
    min-height: 0 !important;
    background: linear-gradient(145deg, rgba(30, 32, 48, 0.75), rgba(20, 22, 34, 0.85));
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: var(--radius-xl);
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.task-side-col .time-tracker-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), #818cf8, transparent);
}

.task-side-col .tracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.task-side-col .tracker-header label {
    font-size: 0.88rem;
}

.task-side-col .tracker-controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.task-side-col .btn-tracker {
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.task-side-col .btn-tracker.start {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.35));
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
}
.task-side-col .btn-tracker.start:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(5, 150, 105, 0.45));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.task-side-col .btn-tracker.end {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(225, 29, 72, 0.25));
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #fda4af;
}
.task-side-col .btn-tracker.end:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.28), rgba(225, 29, 72, 0.38));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25);
}
.task-side-col .btn-tracker.end:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.task-side-col .tracker-time {
    font-size: 1.55rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 0.05em;
    color: var(--primary);
    background: var(--primary-bg);
    padding: 7px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(99, 102, 241, 0.3);
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
    text-align: center;
}

.task-side-col .tracker-inputs {
    display: flex;
    gap: 8px;
    margin: 0;
}

.task-side-col .tracker-note {
    flex: 1;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.92rem;
    transition: all 0.2s ease;
}
.task-side-col .tracker-note:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.task-side-col .btn-tracker.save {
    padding: 10px 18px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.92rem;
}
.task-side-col .btn-tracker.save:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Tracker History Section (Below Controls) */
.task-side-col .tracker-history-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.task-side-col .tracker-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.task-side-col .tracker-history-list {
    flex: 1;
    min-height: 50px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 4px;
}

.task-side-col .tracker-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
}

.task-side-col .tracker-history-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    margin-right: 8px;
}

.task-side-col .tracker-history-note {
    color: var(--text);
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-side-col .tracker-history-time {
    color: var(--text-3);
    font-size: 0.78rem;
}

.task-side-col .tracker-history-dur {
    font-weight: 700;
    color: #34d399;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.12);
    white-space: nowrap;
}

.task-side-col .tracker-history-empty {
    margin: auto;
    color: var(--text-3);
    font-size: 0.84rem;
    text-align: center;
    font-style: italic;
    opacity: 0.6;
    padding: 6px 0;
}

/* Logtime Card (3/5 height) */
.task-side-col .task-page-logtime-card {
    margin-top: 0;
    background: linear-gradient(145deg, rgba(30, 32, 48, 0.75), rgba(20, 22, 34, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 20px 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    flex: 3 1 0 !important;
    min-height: 0 !important;
    justify-content: space-between;
}

.task-side-col .task-page-logtime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.task-side-col .task-page-logtime-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-side-col .task-page-logtime-card .logtime-form {
    border-top: none;
    padding-top: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.task-side-col .task-page-logtime-card .logtime-form form {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

.task-side-col .form-row.cols-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
    margin-bottom: 0;
}

.task-side-col .task-page-logtime-card .logtime-form form > .form-row + .form-row {
    margin-top: 10px !important;
}

.task-side-col .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-side-col .form-group label {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-3);
    margin-bottom: 3px;
}

.task-side-col .form-group select,
.task-side-col .form-group input {
    width: 100%;
    padding: 10px 13px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.task-side-col .form-group select:focus,
.task-side-col .form-group input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.task-side-col .logtime-submit-row {
    margin-top: auto !important;
    padding-top: 12px;
}

.task-side-col .btn-primary {
    width: 100%;
    padding: 13px 20px;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    cursor: pointer;
    border: none;
    color: #fff;
    transition: all 0.2s ease;
}
.task-side-col .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

/* Fallback generic Task Chat Timer Grid */
.task-chat-timer-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}
@media (max-width: 1024px) {
    .task-chat-timer-grid {
        grid-template-columns: 1fr;
    }
}

.logtime-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--primary-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.modal-content {
    background: var(--surface);
    border-radius: var(--radius-2xl);
    width: 95%; max-width: 1280px; max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
    border: 1px solid var(--border);
    transform: scale(0.955) translateY(12px) translateZ(0);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.modal-overlay.open .modal-content {
    transform: scale(1) translateY(0) translateZ(0);
    opacity: 1;
}

.modal-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: flex-start;
    position: sticky; top: 0; background: var(--surface);
    z-index: 10;
}
.modal-title { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; color: var(--text); letter-spacing: -0.02em; }
.modal-worker { color: var(--text-3); font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 32px; }

/* Checklist Grid */
.checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    align-items: stretch;
}

.step-col {
    background: var(--surface-card);
    padding: 18px 18px 16px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--t-fast);
}
.step-col:hover {
    border-color: var(--border-focus);
}

/* Step Header */
.step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}
.step-badge-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.step-num {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.step-meta {
    display: flex;
    flex-direction: column;
}
.step-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}
.step-sub {
    font-size: 0.7rem;
    color: var(--text-3);
    font-weight: 500;
    margin-top: 2px;
    line-height: 1.2;
}
.step-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-hover);
    color: var(--text-3);
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all var(--t-fast);
}
.step-count.complete {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.35);
}

/* Thin Progress Bar per Column */
.step-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    margin-bottom: 14px;
    overflow: hidden;
}
.step-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-col[data-step="1"] .step-progress-fill { background: linear-gradient(90deg, #6366f1, #818cf8); }
.step-col[data-step="2"] .step-progress-fill { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.step-col[data-step="3"] .step-progress-fill { background: linear-gradient(90deg, #10b981, #34d399); }

/* Task Items Container */
.step-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Individual Task Row */
.task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast), border-color var(--t-fast);
    border: 1px solid transparent;
}
.task-row:hover {
    background: var(--surface-hover);
    border-color: rgba(255, 255, 255, 0.04);
}

/* Refined Platform Badges */
.platform-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: var(--radius-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

/* Checklist: badge cùng bề rộng để checkbox của mọi dòng thẳng hàng dọc. */
.task-row .platform-badge {
    width: 74px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.platform-badge.notion {
    background: rgba(255, 255, 255, 0.08);
    color: #f4f4f5;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.platform-badge.sheet {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.platform-badge.asana {
    background: rgba(244, 63, 94, 0.12);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.25);
}
.platform-badge.mikan {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Check Label & Input */
.check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
    transition: color var(--t-fast);
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
    flex: 1;
}
.check-label:hover { color: var(--text); }
.check-label input {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
    border-radius: 5px;
    flex-shrink: 0;
}
.check-label .checkmark { display: none; pointer-events: none; }
.check-label input:checked ~ .action-text {
    text-decoration: line-through;
    color: var(--text-4);
    opacity: 0.7;
    transition: all var(--t-fast);
}

/* Modern Embedded Message Template Card */
.msg-template-card {
    margin: 4px 0 8px 8px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.msg-template-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(99, 102, 241, 0.3);
}
.msg-template-card.nested {
    margin: 0;
    border-color: rgba(56, 189, 248, 0.3);
}
.msg-template-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}
.msg-template-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.02em;
}
.btn-copy-action {
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--radius-xs);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all var(--t-fast);
}
.btn-copy-action:hover {
    background: var(--primary-bg);
    color: var(--primary);
    border-color: var(--primary);
}
.btn-copy-action.copied {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
.msg-template-body {
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text);
    white-space: pre-wrap;
    user-select: all;
    opacity: 0.92;
}

/* Expandable Ask Task Accordion */
.ask-task-accordion {
    margin: 4px 0 8px 8px;
}
.ask-task-trigger {
    font-size: 0.74rem;
    font-weight: 700;
    color: #38bdf8;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--t-fast);
}
.ask-task-trigger:hover {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(56, 189, 248, 0.35);
}
.ask-task-trigger .arrow-icon {
    font-size: 0.62rem;
    transition: transform 0.2s ease;
}
.ask-task-accordion.open .arrow-icon {
    transform: rotate(180deg);
}
.ask-task-panel {
    display: none;
    margin-top: 6px;
}
.ask-task-accordion.open .ask-task-panel {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Step 1 Helpful Hint Box */
.step-hint-box {
    margin-top: auto;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    font-size: 0.73rem;
    color: var(--text-3);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}
.step-hint-box i {
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Logtime Form */
.logtime-form { border-top: 1px solid var(--border); padding-top: 32px; }
.form-row { display: grid; gap: 20px; margin-bottom: 20px; }
.form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 2fr; }
.form-group label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 800;
    color: var(--text-3); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.form-group label i {
    font-size: 0.85rem;
    color: var(--text-3);
    opacity: 0.9;
}
#calendar-popup {
    z-index: 999 !important;
}
.form-group input, .form-group select {
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text); border-radius: var(--radius-md);
    font-family: var(--font); font-size: 0.92rem;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}
.form-group input:focus, .form-group select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-bg);
}

/* Custom Tag Colors */
.tag-lettering {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.tag-retouch {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #0ea5e9 !important;
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
}
.tag-correction {
    background: rgba(244, 63, 94, 0.12) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
}
.tag-prep {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.tag-lettering-retouch {
    background: rgba(168, 85, 247, 0.12) !important;
    color: #a855f7 !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

/* ======================== 10. CHART SECTION & METRICS ======================== */
.chart-section {
    background: var(--surface);
    border-radius: var(--radius-2xl);
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    width: 100%;
    position: relative;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.chart-section:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg);
}
.chart-section.rain-wet-rim::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.45) 20%, rgba(224, 242, 254, 0.8) 50%, rgba(147, 197, 253, 0.45) 80%, transparent);
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(147, 197, 253, 0.5);
    z-index: 2;
    animation: wetRimPulse 3s ease-in-out infinite alternate;
}
@keyframes wetRimPulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

.chart-section.snow-frost-rim::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15px;
    right: 15px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(224, 242, 254, 0.5) 15%, rgba(255, 255, 255, 0.95) 50%, rgba(224, 242, 254, 0.5) 85%, transparent);
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 0 16px rgba(224, 242, 254, 0.8), 0 0 4px #ffffff;
    z-index: 2;
    animation: frostRimPulse 4s ease-in-out infinite alternate;
}
@keyframes frostRimPulse {
    0% { opacity: 0.65; }
    100% { opacity: 1; }
}

.chart-section.sun-warm-rim::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.4) 20%, rgba(253, 224, 71, 0.9) 50%, rgba(251, 191, 36, 0.4) 80%, transparent);
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
    z-index: 2;
    animation: sunRimPulse 3.5s ease-in-out infinite alternate;
}
@keyframes sunRimPulse {
    0% { opacity: 0.5; }
    100% { opacity: 0.95; }
}

/* Weather Hero FX Layer */
.weather-fx-sun {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.weather-fx-thunder {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(224, 242, 254, 0.32);
    opacity: 0;
    z-index: 3;
    transition: opacity 0.05s ease-out;
}
.weather-fx-thunder.flash {
    opacity: 1;
}

/* ================== HONOR PHONE STYLE ATMOSPHERIC CLOUDS & WEATHER ================== */
.honor-clouds-container {
    position: absolute;
    inset: -30px -40px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    transition: opacity 1.5s ease;
}

/* Seamless Looping Drift Bands (Slow, Majestic, Leisurely "Lững lờ") */
.honor-cloud-band {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}

/* Layer Depths (Parallax) */
.honor-cloud-band.band-back {
    top: -20px;
    animation: honorDriftBack 180s linear infinite;
    z-index: 1;
    opacity: 0.18;
    filter: blur(3px);
}
.honor-cloud-band.band-mid {
    top: -10px;
    animation: honorDriftMid 130s linear infinite;
    z-index: 2;
    opacity: 0.28;
    filter: blur(1px);
}
.honor-cloud-band.band-front {
    top: 2px;
    animation: honorDriftFront 90s linear infinite;
    z-index: 3;
    opacity: 0.38;
}

/* Infinite Seamless Looping: Moves exactly 50% so second half seamlessly replaces first half */
@keyframes honorDriftBack {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes honorDriftMid {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes honorDriftFront {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Cloud Item Container & Weightless Undulating Wave ("Lờ lững / Lững lờ") */
.honor-cloud-item {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.honor-cloud-item.float-slow {
    animation-name: honorCloudFloatSlow;
    animation-duration: 22s;
}
.honor-cloud-item.float-med {
    animation-name: honorCloudFloatMed;
    animation-duration: 17s;
}
.honor-cloud-item.float-fast {
    animation-name: honorCloudFloatFast;
    animation-duration: 13s;
}

@keyframes honorCloudFloatSlow {
    0%   { transform: translateY(0px) scale(1); }
    50%  { transform: translateY(-5px) scale(1.015); }
    100% { transform: translateY(0px) scale(1); }
}
@keyframes honorCloudFloatMed {
    0%   { transform: translateY(-3px) scale(1.01); }
    50%  { transform: translateY(4px) scale(0.99); }
    100% { transform: translateY(-3px) scale(1.01); }
}
@keyframes honorCloudFloatFast {
    0%   { transform: translateY(2px) scale(0.995); }
    50%  { transform: translateY(-4px) scale(1.015); }
    100% { transform: translateY(2px) scale(0.995); }
}

/* Photorealistic Cloud Image Sprite with Screen Blending */
.honor-cloud-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: screen;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
    transition: filter 1.5s ease, opacity 1.5s ease;
}

/* ================== WEATHER ATMOSPHERIC THEMES ================== */

/* RAIN: Moody dark slate storm clouds */
.honor-clouds-theme-rain .honor-cloud-img {
    filter: brightness(0.70) contrast(1.1) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
}

/* THUNDER: Tumultuous near-black thunderclouds */
.honor-clouds-theme-thunder .honor-cloud-img {
    filter: brightness(0.55) contrast(1.15) drop-shadow(0 16px 36px rgba(0, 0, 0, 0.65));
}

/* CLOUDS / OVERCAST: Bright voluminous silver-white cumulus */
.honor-clouds-theme-clouds .honor-cloud-img {
    filter: brightness(1.05) contrast(1.02) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.25));
}

/* SUN: Golden-warmed glowing fair-weather clouds */
.honor-clouds-theme-sun .honor-cloud-img {
    filter: brightness(1.12) sepia(0.2) saturate(1.2) drop-shadow(0 15px 30px rgba(217, 119, 6, 0.25));
}

/* SNOW: Crisp glacial icy white-cyan clouds */
.honor-clouds-theme-snow .honor-cloud-img {
    filter: brightness(1.15) hue-rotate(185deg) saturate(0.7) drop-shadow(0 14px 28px rgba(14, 165, 233, 0.30));
}

/* NIGHT: Deep moonlit ethereal midnight violet clouds */
.honor-clouds-theme-clear_night .honor-cloud-img {
    filter: brightness(0.48) hue-rotate(220deg) saturate(0.85) drop-shadow(0 14px 28px rgba(30, 27, 75, 0.50));
}

/* FOG: Soft misty rolling vapor */
.honor-clouds-theme-fog .honor-cloud-img {
    filter: brightness(0.95) blur(5px) drop-shadow(0 10px 20px rgba(71, 85, 105, 0.25));
}

/* Lightning flash: Clouds illuminate brilliantly with internal lightning flash */
.honor-clouds-container.flash .honor-cloud-img {
    filter: brightness(2.8) contrast(1.35) drop-shadow(0 0 55px rgba(254, 240, 138, 0.95)) !important;
    transition: none !important;
}

/* Weather Simulation Controls Bar */
.weather-sim-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.weather-sim-btn:hover {
    background: rgba(255, 255, 255, 0.20);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}
.weather-sim-btn.active {
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.45);
    transform: translateY(-1px);
}

/* Sun Radiant Ambient Glow (Honor Phone Sunlight Aura) - Soft, Radiant, Warm */
.weather-fx-sun-godrays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 78% 25%, rgba(251, 191, 36, 0.14) 0%, rgba(245, 158, 11, 0.06) 35%, transparent 65%);
    opacity: 0.85;
    animation: sunAuraGlow 7s ease-in-out infinite alternate;
}
@keyframes sunAuraGlow {
    0%   { transform: scale(1); opacity: 0.65; }
    100% { transform: scale(1.06); opacity: 0.95; }
}

/* Glass Rain Streaks (Honor Phone wet glass effect) */
.honor-rain-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 25% 35%, rgba(186, 230, 253, 0.12) 0%, transparent 40%),
                radial-gradient(circle at 70% 65%, rgba(186, 230, 253, 0.10) 0%, transparent 45%);
    backdrop-filter: contrast(1.05);
}

.weather-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: livePulse 2s infinite;
    margin-right: 4px;
}
@keyframes livePulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.6; }
}

.weather-metrics-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.weather-metric-pill {
    transition: transform var(--t-fast), filter var(--t-fast);
    cursor: default;
    user-select: none;
}
.weather-metric-pill:hover {
    transform: translateY(-1px);
    filter: brightness(1.2);
}
@media (max-width: 1024px) {
    .weather-metrics-cluster {
        display: none !important;
    }
}

/* ======================== HERO MOCKUP FORMAT LAYOUT ======================== */
.hero-filmstrip-scrim {
    display: none !important;
}

/* Localized Left Focus Scrim: slightly blurs & softens album photos only in the Title/Weather zone */
.hero-left-focus-scrim {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 480px;
    max-width: 42%;
    background: linear-gradient(90deg, rgba(11, 17, 32, 0.68) 0%, rgba(11, 17, 32, 0.38) 72%, transparent 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .hero-left-focus-scrim {
        width: 100%;
        max-width: 100%;
        background: linear-gradient(180deg, rgba(11, 17, 32, 0.72) 0%, rgba(11, 17, 32, 0.4) 65%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    }
}

.hero-welcome-text {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-brand-title {
    font-size: 2.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

.weather-mockup-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    user-select: none;
    cursor: pointer;
    max-width: 100%;
}

.weather-mockup-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-mockup-main .weather-3d-scene {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: scale(0.68);
    transform-origin: center center;
    margin-right: -4px;
}

.weather-mockup-temp {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.weather-mockup-temp sup {
    font-size: 0.9rem;
    font-weight: 600;
    vertical-align: super;
    opacity: 0.85;
}

.weather-mockup-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.weather-mockup-condition {
    font-size: 0.84rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.weather-mockup-range {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.weather-mockup-pills {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    max-width: 100%;
}

.weather-mockup-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 0.72rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.weather-mockup-pill:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
}

.weather-mockup-pill span {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.weather-mockup-pill strong {
    color: #ffffff;
    font-weight: 700;
}

/* Glassmorphic Album Button with Blur & Glow like Filter Button */
.hero-album-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.32));
    border: 1px solid rgba(245, 158, 11, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fef3c7;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.25);
    transition: transform 0.45s var(--ux-spring),
                box-shadow 0.3s var(--ux-ease),
                background 0.3s var(--ux-ease);
    white-space: nowrap;
}

.hero-album-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.36), rgba(217, 119, 6, 0.48));
    border-color: rgba(245, 158, 11, 0.8);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.45);
    transform: translateY(-1.5px);
}

.hero-album-btn:active {
    transform: scale(0.94);
    transition-duration: 0.12s;
}

.hero-album-btn i {
    font-size: 0.9rem;
    color: #fbbf24;
}

@media (max-width: 1024px) {
    .weather-mockup-pills {
        gap: 6px;
    }
    .hero-brand-title {
        font-size: 1.8rem;
    }
}
@media (max-width: 768px) {
    .weather-mockup-pills {
        display: none !important;
    }
}

/* Dynamic Glare Shimmer Layer */
.weather-card-glare {
    display: none !important;
}

/* 3D Visual Icon Container */
.weather-3d-scene {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transform: translateZ(32px);
    flex-shrink: 0;
}

/* Floating animation */
.weather-3d-float {
    animation: weatherFloat3D 4s ease-in-out infinite alternate;
    transform-style: preserve-3d;
}

@keyframes weatherFloat3D {
    0% {
        transform: translateY(0px) rotateX(2deg) rotateY(-2deg);
    }
    100% {
        transform: translateY(-7px) rotateX(-3deg) rotateY(4deg);
    }
}

/* --- 3D SUN --- */
.weather-3d-sun {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fde047 30%, #f59e0b 70%, #d97706 100%);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.8), inset -2px -4px 6px rgba(180, 83, 9, 0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.85);
    transform-style: preserve-3d;
}

.weather-3d-sun::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.45) 0%, transparent 70%);
    animation: sunHaloPulse 3s ease-in-out infinite alternate;
}

@keyframes sunHaloPulse {
    0% { transform: scale(0.92); opacity: 0.6; }
    100% { transform: scale(1.18); opacity: 1; }
}

.weather-3d-sun-rays {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px dashed rgba(253, 224, 71, 0.55);
    animation: sunRaysSpin 18s linear infinite;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

@keyframes sunRaysSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- 3D CLOUD (Claymation style) --- */
.weather-3d-cloud {
    position: relative;
    width: 50px;
    height: 30px;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 65%, #94a3b8 100%);
    border-radius: 20px;
    box-shadow: 0 8px 16px -2px rgba(15, 23, 42, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 4px rgba(71, 85, 105, 0.5);
    transform-style: preserve-3d;
}

.weather-3d-cloud::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 8px;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 70%, #cbd5e1 100%);
    border-radius: 50%;
    box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.9), inset -1px -2px 3px rgba(100, 116, 139, 0.3);
}

.weather-3d-cloud::after {
    content: '';
    position: absolute;
    top: -16px;
    right: 8px;
    width: 25px;
    height: 25px;
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 70%, #cbd5e1 100%);
    border-radius: 50%;
    box-shadow: inset 1px 2px 2px rgba(255, 255, 255, 0.9), inset -1px -2px 3px rgba(100, 116, 139, 0.3);
}

/* Dark storm cloud variation */
.weather-3d-cloud.storm {
    background: linear-gradient(180deg, #64748b 0%, #334155 65%, #1e293b 100%);
    box-shadow: 0 8px 18px -2px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(148, 163, 184, 0.6), inset 0 -3px 4px rgba(15, 23, 42, 0.8);
}
.weather-3d-cloud.storm::before,
.weather-3d-cloud.storm::after {
    background: linear-gradient(180deg, #94a3b8 0%, #475569 70%, #334155 100%);
}

/* Combined Sun + Cloud */
.weather-3d-sun-cloud {
    position: relative;
    width: 58px;
    height: 52px;
    transform-style: preserve-3d;
}
.weather-3d-sun-cloud .weather-3d-sun {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 28px;
    height: 28px;
    transform: translateZ(10px);
}
.weather-3d-sun-cloud .weather-3d-cloud {
    position: absolute;
    bottom: 2px;
    left: 2px;
    transform: translateZ(26px);
}

/* --- 3D RAINDROPS --- */
.weather-3d-rain {
    position: absolute;
    bottom: -10px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-around;
    transform: translateZ(36px);
}
.weather-3d-drop {
    width: 3px;
    height: 10px;
    background: linear-gradient(180deg, #67e8f9 0%, #38bdf8 100%);
    border-radius: 3px;
    filter: drop-shadow(0 2px 4px rgba(56, 189, 248, 0.6));
    animation: rainDropAnim 1s linear infinite;
}
.weather-3d-drop:nth-child(2) { animation-delay: 0.3s; height: 12px; }
.weather-3d-drop:nth-child(3) { animation-delay: 0.6s; height: 9px; }

@keyframes rainDropAnim {
    0% { transform: translateY(-4px) skewX(-12deg); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: translateY(12px) skewX(-12deg); opacity: 0; }
}

/* --- 3D LIGHTNING BOLT --- */
.weather-3d-bolt {
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 14px;
    height: 20px;
    filter: drop-shadow(0 0 10px #facc15);
    animation: boltFlash 2s infinite;
    transform: translateZ(40px);
}
@keyframes boltFlash {
    0%, 90%, 100% { opacity: 0.9; transform: translateZ(40px) scale(1); }
    92% { opacity: 1; transform: translateZ(40px) scale(1.15); filter: drop-shadow(0 0 16px #ffffff); }
    95% { opacity: 0.7; }
    97% { opacity: 1; filter: drop-shadow(0 0 16px #facc15); }
}

/* --- 3D MOON & STARS --- */
.weather-3d-moon {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset -9px 3px 0 0 #f1f5f9;
    filter: drop-shadow(0 0 12px rgba(226, 232, 240, 0.7));
    transform-style: preserve-3d;
}
.weather-3d-star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px #ffffff;
    animation: starTwinkle 2s infinite alternate;
}
@keyframes starTwinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* 3D Content Layout */
.weather-3d-content {
    display: flex;
    align-items: center;
    gap: 12px;
    transform-style: preserve-3d;
}
.weather-3d-temp {
    font-size: 2.8rem;
    font-weight: 300;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateZ(24px);
}
.weather-3d-temp sup {
    font-size: 1.15rem;
    font-weight: 500;
    vertical-align: super;
    opacity: 0.9;
}
.weather-3d-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateZ(16px);
}
.weather-3d-city {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.weather-3d-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    margin-bottom: 2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.weather-3d-range {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.68);
    font-weight: 500;
}

/* 3D Badges Cluster (Row 2 below main weather info) */
.weather-3d-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    transform: translateZ(14px);
    margin-left: 0;
    margin-top: 2px;
}
@media (max-width: 768px) {
    .weather-3d-pills {
        display: none !important;
    }
}

/* ================== 3D FORECAST MODAL (GAPSY / DRIBBLE SHOWCASE) ================== */
.weather-forecast-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 9, 18, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px;
}
.weather-forecast-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.weather-forecast-modal {
    position: relative;
    width: 100%;
    max-width: 680px;
    /* Theme-aware tokens for the JS-rendered body: dark values live here,
       light values are set in the body:not(.dark-theme) override block. */
    --wf-title: #ffffff;
    --wf-text: rgba(255, 255, 255, 0.85);
    --wf-text-muted: rgba(255, 255, 255, 0.62);
    --wf-text-faint: rgba(255, 255, 255, 0.5);
    --wf-surface: rgba(255, 255, 255, 0.04);
    --wf-surface-strong: rgba(255, 255, 255, 0.05);
    --wf-border: rgba(255, 255, 255, 0.1);
    --wf-border-soft: rgba(255, 255, 255, 0.08);
    --wf-chip: rgba(255, 255, 255, 0.08);
    --wf-chip-border: rgba(255, 255, 255, 0.15);
    --wf-chip-hover: rgba(255, 255, 255, 0.16);
    --wf-accent: #38bdf8;
    --wf-accent-soft: rgba(56, 189, 248, 0.15);
    --wf-metric-1: #bae6fd;
    --wf-metric-2: #fed7aa;
    --wf-metric-3: #fef08a;
    --wf-metric-4: #e2e8f0;
    --wf-icon-1: #38bdf8;
    --wf-icon-2: #fb923c;
    --wf-icon-3: #facc15;
    --wf-icon-4: #cbd5e1;
    --wf-emoji-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 35px rgba(56, 189, 248, 0.18);
    padding: 28px;
    color: #fff;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.weather-forecast-modal-backdrop.open .weather-forecast-modal {
    transform: scale(1) translateY(0);
}
.weather-modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wf-chip);
    border: 1px solid var(--wf-chip-border);
    color: var(--wf-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.weather-modal-close-btn:hover {
    background: var(--wf-chip-hover);
    color: var(--wf-title);
    transform: rotate(90deg);
}

.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 20px;
}
@media (max-width: 640px) {
    .weather-forecast-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.forecast-day-card {
    background: var(--wf-surface-strong);
    border: 1px solid var(--wf-border-soft);
    border-radius: 16px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.25s ease;
}
.forecast-day-card:hover {
    background: var(--wf-chip-hover);
    border-color: var(--wf-accent);
    transform: translateY(-3px);
}
.forecast-day-card.today {
    background: linear-gradient(180deg, var(--wf-accent-soft) 0%, rgba(56, 189, 248, 0.06) 100%);
    border-color: var(--wf-accent);
}

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

.chart-title {
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.chart-title svg {
    color: var(--primary);
    filter: drop-shadow(0 0 6px var(--primary-glow));
}

.custom-chart-legend {
    display: none;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
    margin-left: auto;
    margin-right: 20px;
}

.chart-time-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-card);
    padding: 4px 6px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.chart-time-controls .btn,
.chart-time-controls button {
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border: 1px solid transparent;
    color: var(--text-2);
    background: transparent;
    cursor: pointer;
    transition: all var(--t-fast);
    line-height: 1.2;
}

.chart-time-controls .btn:hover,
.chart-time-controls button:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.chart-time-controls .btn.active,
.chart-time-controls .btn.btn-primary,
.chart-time-controls button.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 10px var(--primary-glow);
}

.chart-canvas-wrapper {
    position: relative;
    height: 450px;
    width: 100%;
}

.chart-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    z-index: 10;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Metrics Row */
.metrics-row { display: flex; gap: 20px; margin-bottom: 32px; }
.metric-card {
    flex: 1; background: var(--surface-card);
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    padding: 24px; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 10px;
    position: relative; overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover);
}
.metric-card::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 90px; height: 90px;
    background: radial-gradient(circle, var(--primary-bg) 0%, transparent 70%);
    pointer-events: none;
}
.metric-title {
    font-size: 0.78rem; font-weight: 800; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.metric-value {
    font-size: 2.6rem; font-weight: 800; color: var(--primary);
    line-height: 1; font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

/* Header Redesign */
.header-left { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.header-left .header-title { font-size: 1.1rem; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.header-left .weather-time { font-size: 0.95rem; color: var(--text-3); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.header-left h1 { font-size: 2.2rem; font-weight: 900; background: linear-gradient(135deg, var(--primary), #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; line-height: 1.2; padding-top: 4px; }

/* Avatar styling */
.avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-avatar { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.worker-avatar { overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Common Modal (.cp- prefix modals: Prepare PSD, Drive, Calendar, Password, Roles) */
.cp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 20, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cp-overlay.active {
    display: block;
    opacity: 1;
}

.cp-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    background: var(--surface);
    width: 90%;
    max-width: 480px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border);
    overflow: hidden;
}
.cp-modal.active {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cp-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.cp-modal .modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cp-modal .modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    font-size: 1.1rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--t-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.cp-modal .modal-close:hover {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--border-hover);
    transform: rotate(90deg);
}
.cp-modal .modal-body {
    padding: 28px;
}
.cp-modal .modal-footer {
    padding: 18px 28px;
    border-top: 1px solid var(--border);
    background: var(--surface-card);
}

/* Modal Form Inputs */
.cp-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-card);
    color: var(--text);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: all var(--t-fast);
}
.cp-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
    background: var(--surface);
}
.cp-input::placeholder {
    color: var(--text-3);
    opacity: 0.7;
}

.cp-modal .form-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

/* Softer border-radius for task modals */
.modal-content {
    border-radius: var(--radius-xl);
}

/* ======================== PROFILE FLYOUT POPOVER ======================== */
.profile-popover-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 100004;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.profile-popover-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.profile-panel {
    position: fixed;
    left: calc(var(--sidebar-w) + 14px);
    bottom: 18px;
    width: 290px;
    max-width: calc(100vw - 32px);
    z-index: 100005;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-10px) scale(0.96) translateZ(0);
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.profile-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1) translateZ(0);
}

/* Little triangle indicator pointing to user card on desktop */
.profile-panel::before {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 24px;
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
    border-bottom-left-radius: 3px;
    z-index: 3;
}

.profile-panel-inner {
    position: relative;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px 18px 18px;
    box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.profile-panel-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--surface-hover);
    color: var(--text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 4;
}
.profile-panel-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    transform: scale(1.08);
}

.profile-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.profile-panel-avatar-wrap {
    position: relative;
    flex: none;
}
.profile-panel-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    /* 2px padding = viền gradient tím đều quanh ảnh; border trắng bao ngoài.
       Trước đây container bo 16px nhưng ảnh bo tròn 50% -> viền tím lệch/góc vuông. */
    padding: 2px;
    box-sizing: border-box;
    background: var(--primary-gradient);
    color: white;
    font-size: 1.35rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 16px var(--primary-glow);
    border: 2px solid var(--surface);
}
.profile-panel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.profile-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #10b981;
    border: 2.5px solid var(--surface);
    box-shadow: 0 0 6px #10b981;
}

/* Đổi avatar ngay trong panel thông tin */
.profile-panel-avatar.clickable { cursor: pointer; }
.profile-panel-avatar.clickable::after {
    content: '\f030';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.55);
    color: #fff;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.profile-panel-avatar.clickable:hover::after { opacity: 1; }
.profile-panel-avatar.uploading { opacity: .55; pointer-events: none; }
.profile-panel-avatar.uploading::after {
    content: '\f110';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    opacity: 1;
    animation: spin 1s linear infinite;
}
.profile-avatar-edit {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 8px var(--primary-glow);
    pointer-events: none;
}

.profile-panel-meta {
    flex: 1;
    min-width: 0;
}
.profile-panel-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}
.profile-panel-username {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-bottom: 6px;
    font-weight: 600;
}
.profile-panel-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--primary-bg);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.profile-panel-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.profile-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.84rem;
}
.profile-detail-item:not(:last-child) {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}
.profile-detail-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-3);
    font-weight: 600;
}
.profile-detail-val {
    color: var(--text);
    font-weight: 750;
}

.profile-panel-actions {
    display: flex;
    gap: 8px;
}
.profile-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 650;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s var(--ux-spring);
    user-select: none;
}
.profile-action-btn:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px var(--primary-glow);
}
.profile-action-btn:active {
    transform: scale(0.95);
}
.profile-action-logout {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}
.profile-action-logout:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.profile-chevron {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-chevron.rotated {
    transform: rotate(180deg);
}

/* Tablet & Mobile Screens */
@media (max-width: 1024px) {
    .profile-panel {
        left: 16px !important;
        right: 16px !important;
        bottom: 24px !important;
        width: auto !important;
        max-width: 400px !important;
        margin: 0 auto;
        transform: translateY(20px) scale(0.96);
    }
    .profile-panel.open {
        transform: translateY(0) scale(1);
    }
    .profile-panel::before {
        display: none;
    }
}

/* ======================== PET FLYOUT POPOVER ======================== */
.pet-popover-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 100004;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.pet-popover-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.pet-flyout-popover {
    position: fixed;
    left: calc(var(--sidebar-w) + 14px);
    width: 320px;
    max-width: calc(100vw - 32px);
    z-index: 100005;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-10px) scale(0.96) translateZ(0);
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.pet-flyout-popover.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1) translateZ(0);
}
.pet-flyout-popover::before {
    content: "";
    position: absolute;
    left: -7px;
    top: var(--pet-arrow-top, 28px);
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
    border-bottom-left-radius: 3px;
    z-index: 3;
    transition: top 0.15s ease;
}
.pet-flyout-inner {
    position: relative;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px 18px 18px;
    box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.pet-flyout-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--surface-hover);
    color: var(--text-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 4;
}
.pet-flyout-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    transform: scale(1.08);
}
.pet-flyout-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pet-lb-container-flyout {
    margin-top: 10px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}

@media (max-width: 1024px) {
    .pet-flyout-popover {
        left: 16px !important;
        right: 16px !important;
        bottom: 24px !important;
        width: auto !important;
        max-width: 400px !important;
        margin: 0 auto;
        transform: translateY(20px) scale(0.96);
    }
    .pet-flyout-popover.open {
        transform: translateY(0) scale(1);
    }
    .pet-flyout-popover::before {
        display: none;
    }
}

/* ======================== 11. RESPONSIVE (MOBILE & TABLET) ======================== */
/* Mobile Topbar Base */
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.mobile-menu-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}
.mobile-menu-btn:hover {
    background: var(--surface-hover);
}
.mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
}
.mobile-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mobile-icon-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
}
.mobile-icon-btn:hover {
    background: var(--surface-hover);
}
.mobile-unread-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--surface);
}
.mobile-avatar-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--border);
}
.mobile-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sidebar Backdrop & Drawer */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.sidebar-backdrop.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
.sidebar-mobile-close {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.15s ease;
}
.sidebar-mobile-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
body.sidebar-locked {
    overflow: hidden !important;
}

/* Tablet & Mobile Screens (<= 1024px) */
@media (max-width: 1024px) {
    .mobile-topbar {
        display: flex;
    }
    .sidebar {
        transform: translateX(-100%);
        width: 300px;
        z-index: 10001;
        box-shadow: var(--shadow-xl);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    .sidebar-mobile-close {
        display: flex;
    }
    .main-area {
        margin-left: 0 !important;
        padding: 16px 20px !important;
        padding-top: 72px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .hero-banner {
        margin-bottom: 20px !important;
    }
    .hero-banner > div:last-child {
        padding: 18px 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    .hero-banner .header-left h1 {
        font-size: 1.65rem !important;
    }
    .hero-banner .header-center {
        margin-right: 0 !important;
        width: 100% !important;
        min-width: auto !important;
    }
    .hero-banner > div:last-child > div[style*="width: 1px"] {
        display: none !important;
    }
    .hero-banner .header-right {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .checklist-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .metrics-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .modal-content {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 90vh !important;
        border-radius: var(--radius-xl) !important;
    }
    .modal-header {
        padding: 16px 20px !important;
    }
    .modal-body {
        padding: 18px !important;
    }
    .kanban-column { flex: 0 0 100%; min-width: 100%; }
    .kanban-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Mobile Screens (<= 768px) */
@media (max-width: 768px) {
    .main-area {
        padding: 12px !important;
        padding-top: 68px !important;
    }
    .hero-banner {
        border-radius: 16px !important;
    }
    .hero-banner > div:last-child {
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .hero-banner .header-left h1 {
        font-size: 1.35rem !important;
    }
    .metrics-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .form-row.cols-4, .form-row.cols-3, .form-row.cols-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .task-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .quick-handover-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .btn-quick-tag {
        font-size: 0.72rem !important;
        padding: 5px 8px !important;
    }
    .modal-content {
        width: 98vw !important;
        max-width: 98vw !important;
        max-height: 94vh !important;
        border-radius: var(--radius-lg) !important;
    }
    .modal-header {
        padding: 14px 16px !important;
    }
    .modal-body {
        padding: 14px 12px !important;
    }
    .kanban-cards {
        grid-template-columns: 1fr !important;
    }
    .data-table-container, .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    .data-table th, .data-table td {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
    }
    .duo-card {
        padding: 16px 18px 20px !important;
    }
    #duolingo-lottie-anim {
        width: 220px !important;
        height: 220px !important;
    }
    .duo-title {
        font-size: 1.25rem !important;
    }
    .chat-drawer {
        width: 100% !important;
        max-width: 100vw !important;
    }
    #radio-video-wrapper.is-popped-out {
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
        right: 12px !important;
        bottom: 12px !important;
    }
}

/* Small Phones (<= 480px) */
@media (max-width: 480px) {
    .task-links-grid {
        grid-template-columns: 1fr !important;
    }
    .modal-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .modal-header .close-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
    }
}

/* ======================== 12. LOGIN PAGE & LOADER ======================== */
/* Loader overlay when submitting login */
.loader-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(8, 12, 20, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.loader-overlay.active {
    display: flex !important;
    animation: fadeIn 0.3s ease;
}

body:has(.login-page) {
    zoom: 1 !important;
    overflow: hidden !important;
}

.login-page {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-page);
    background-image: radial-gradient(at 50% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 60%),
                      radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.12) 0%, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(56, 189, 248, 0.12) 0%, transparent 50%);
    overflow: hidden;
    z-index: 1;
}
.login-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orb {
    position: absolute; border-radius: 50%;
    filter: blur(100px); opacity: 0.45;
    animation: orbFloat 14s infinite alternate ease-in-out;
}
.orb-1 { width: 480px; height: 480px; background: rgba(99, 102, 241, 0.35); top: -100px; left: -100px; animation-duration: 16s; }
.orb-2 { width: 420px; height: 420px; background: rgba(236, 72, 153, 0.25); bottom: -60px; right: -60px; animation-duration: 20s; }
.orb-3 { width: 360px; height: 360px; background: rgba(56, 189, 248, 0.25); top: 45%; left: 45%; transform: translate(-50%, -50%); animation-duration: 18s; }
@keyframes orbFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(30px) scale(1.08); }
}

.login-settings {
    position: absolute;
    top: 24px;
    right: 28px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 50;
}
.login-settings .custom-lang-select .lang-trigger {
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    font-size: 0.85rem;
    font-weight: 700;
}
.login-settings .theme-toggle {
    background: var(--surface) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border) !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    box-shadow: var(--shadow-xs) !important;
}

.login-card {
    position: relative; z-index: 10;
    background: var(--surface);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    padding: 44px 40px;
    border-radius: var(--radius-2xl);
    width: 100%; max-width: 430px;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 60px -15px rgba(99, 102, 241, 0.2);
    border: 1px solid var(--border);
    text-align: center;
    animation: modalFadeSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-icon {
    width: 68px; height: 68px; margin: 0 auto 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
    transition: transform var(--t-fast);
}
.login-card:hover .login-icon {
    transform: scale(1.05);
}
.login-card h1 {
    font-size: 1.85rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.025em; margin-bottom: 4px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-subtitle { font-size: 0.88rem; color: var(--text-3); font-weight: 500; margin-bottom: 28px; }
.login-error {
    background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444; padding: 12px; border-radius: var(--radius-md);
    font-weight: 700; font-size: 0.85rem; margin-bottom: 20px;
}
.login-card .form-group { text-align: left; margin-bottom: 18px; }
.login-card .form-group label {
    display: block; font-size: 0.78rem; font-weight: 800;
    color: var(--text-3); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.login-card .form-group input,
.login-card .custom-select-trigger {
    width: 100%; padding: 13px 18px; border: 1px solid var(--border);
    background: var(--surface-card); color: var(--text);
    border-radius: var(--radius-lg); font-size: 0.95rem; font-weight: 500;
    transition: all var(--t-fast); outline: none;
}
.login-card .form-group input:focus,
.login-card .custom-select-trigger:hover,
.login-card .custom-select-container.open .custom-select-trigger {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.login-btn-submit {
    width: 100%; padding: 14px; margin-top: 16px;
    border-radius: var(--radius-lg); border: none;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff; font-size: 0.92rem; font-weight: 700;
    letter-spacing: 0.03em; cursor: pointer;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
    transition: all var(--t-fast);
}
.login-btn-submit:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.55);
}
.login-btn-submit:active {
    transform: translateY(0) scale(0.98);
}
.w-full { width: 100%; display: block; text-align: center; }

/* ============ ONLINE USERS CLUSTER ============ */
.online-users-cluster {
    display: flex;
    align-items: center;
    margin-right: 16px;
    height: 100%;
}
.online-users-cluster:empty {
    display: none;
}
.online-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--bg-page);
    margin-left: -10px;
    object-fit: cover;
    background-color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    position: relative;
    cursor: default;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.online-avatar:first-child {
    margin-left: 0;
}
.online-avatar:hover {
    transform: translateY(-2px);
    z-index: 10;
}
.online-avatar-counter {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--surface-hover);
    border: 2px solid var(--bg-page);
    margin-left: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-2);
    font-weight: 600;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ======================== 9. WEATHER WIDGET ======================== */
.ios-weather-widget {
    position: relative;
    width: 100%;
    border-radius: 20px;
    background-color: #1e293b;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: background-image 0.8s ease-in-out;
    overflow: hidden;
}
.ios-weather-widget::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
}
.ios-weather-widget-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.iww-loc { font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 4px; opacity: 0.95; }
.iww-temp { font-size: 3.5rem; font-weight: 300; margin: 4px 0 0 0; line-height: 1.1; letter-spacing: -1px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.iww-desc { font-size: 1rem; font-weight: 500; margin-bottom: auto; text-shadow: 0 1px 2px rgba(0,0,0,0.2); text-transform: capitalize; }
.iww-highlow { font-size: 0.85rem; font-weight: 500; opacity: 0.95; margin-bottom: 2px; }
.iww-feels { font-size: 0.8rem; font-weight: 500; opacity: 0.85; }

/* ======================== TEAM CHAT — PREMIUM UI ======================== */

/* Chat Bubble Button */
.chat-bubble-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
    color: white; border: none;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45), 0 0 0 0 rgba(99, 102, 241, 0.3);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-bubble-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.55);
}
.chat-bubble-btn.has-unread {
    animation: chatPulse 2s ease-in-out infinite;
}
@keyframes chatPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45), 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45), 0 0 0 12px rgba(99, 102, 241, 0); }
}
.chat-badge {
    position: absolute; top: -4px; right: -4px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: white; font-size: 11px; font-weight: 700;
    min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
    display: none; align-items: center; justify-content: center;
    border: 2px solid var(--bg-page, #0f172a);
    animation: badgePop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Chat Panel */
.chat-panel {
    position: fixed; bottom: 76px; right: 20px;
    width: min(440px, calc(100vw - 40px));
    height: min(680px, calc(100vh - 96px));
    background: var(--surface, #1e293b);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    overflow: hidden; display: flex; flex-direction: column;
    z-index: 10001;
    opacity: 0; transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-panel.open {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Chat Header */
.chat-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 14px 16px; color: white;
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
.chat-header-left {
    display: flex; align-items: center; gap: 10px;
}
.chat-header-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
}
.chat-header-info h3 {
    margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
}
.chat-header-info .chat-online-count {
    font-size: 11px; opacity: 0.8; font-weight: 400; margin-top: 1px;
}
.chat-close-btn {
    background: rgba(255,255,255,0.15); border: none; color: white;
    cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.chat-close-btn:hover { background: rgba(255,255,255,0.28); }

/* Chat Messages */
.chat-messages {
    flex: 1; padding: 12px 14px; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.3) transparent;
}
.chat-messages::-webkit-scrollbar { width: 5px; height: 0; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 10px; }

.chat-welcome {
    text-align: center; color: var(--text-3, #94a3b8);
    font-size: 12px; margin: 8px 0 4px;
    padding: 8px 16px; border-radius: 12px;
    background: rgba(139, 92, 246, 0.06);
    border: 1px dashed rgba(139, 92, 246, 0.15);
}

/* Message Bubbles */
.chat-msg-row {
    display: flex; gap: 8px; animation: msgSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-msg-row.me { flex-direction: row-reverse; }

@keyframes msgSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.chat-msg-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; background: var(--surface, #1e293b);
    border: 2px solid rgba(139, 92, 246, 0.2);
}
.chat-msg-content {
    display: flex; flex-direction: column; max-width: 72%;
}
.chat-msg-row.me .chat-msg-content { align-items: flex-end; }
.chat-msg-meta {
    font-size: 10px; color: var(--text-4, #64748b);
    margin-bottom: 3px; padding: 0 4px;
    display: flex; align-items: center; gap: 4px;
}
.chat-msg-meta .msg-sender { font-weight: 600; color: var(--text-3, #94a3b8); }
.chat-msg-bubble {
    padding: 8px 13px; border-radius: 16px;
    word-wrap: break-word; overflow-wrap: break-word;
    font-size: 13px; line-height: 1.45;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.chat-msg-bubble.other {
    background: var(--surface-hover, #1e293b);
    color: var(--text, #e2e8f0);
    border-bottom-left-radius: 4px;
}
.chat-msg-bubble.me {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: white;
    border-bottom-right-radius: 4px;
}
.chat-msg-bubble img {
    max-width: 100%; border-radius: 10px; cursor: pointer;
    transition: transform 0.2s;
}
.chat-msg-bubble img:hover { transform: scale(1.02); }
.chat-msg-bubble .file-link {
    color: inherit; text-decoration: none; display: flex;
    align-items: center; gap: 6px; padding: 6px 10px;
    background: rgba(255,255,255,0.1); border-radius: 8px;
    font-size: 12px; transition: background 0.2s;
}
.chat-msg-bubble .file-link:hover { background: rgba(255,255,255,0.18); }
.chat-msg-bubble .msg-only-emoji {
    font-size: 32px; line-height: 1.3; background: none !important;
    box-shadow: none !important; padding: 2px 0 !important;
}
.chat-typing-indicator {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text-3, #94a3b8);
    display: flex;
    align-items: center;
    gap: 4px;
}
.typing-dots span {
    animation: typing 1.4s infinite;
    animation-fill-mode: both;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}
.chat-msg-read-avatars {
    display: none;
    justify-content: flex-end;
    gap: -4px;
    margin-top: 2px;
    min-height: 14px;
}
.chat-msg-read-avatars.has-read { display: flex; }
.chat-msg-read-avatars img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bg-panel, #0f172a);
    margin-left: -6px;
    z-index: 1;
}
.chat-msg-row.me .chat-msg-read-avatars {
    justify-content: flex-end;
}
.chat-msg-row:not(.me) .chat-msg-read-avatars {
    justify-content: flex-start;
}
/* Read receipt chỉ hiện 1 lần ở tin cuối của mỗi cụm, không lặp từng tin. */
.chat-group-messages .chat-msg:not(:last-child) .chat-msg-read-avatars { display: none; }

/* ---- Message groups (gộp tin liên tiếp của cùng 1 người) ---- */
.chat-group {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: msgSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-group.me { flex-direction: row-reverse; }
.chat-group + .chat-group { margin-top: 8px; }
.chat-group-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface, #1e293b);
    border: 2px solid rgba(139, 92, 246, 0.2);
    margin-top: 1px;
}
.chat-group-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 78%;
}
.chat-group.me .chat-group-body { align-items: flex-end; }
.chat-group-meta {
    font-size: 10px;
    color: var(--text-4, #64748b);
    margin: 0 0 3px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.chat-group-meta .msg-sender {
    font-weight: 600;
    color: var(--text-3, #94a3b8);
}
.chat-group-messages {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    align-items: flex-start;
}
.chat-group.me .chat-group-messages { align-items: flex-end; }
.chat-group-messages .chat-msg { max-width: 100%; min-width: 0; }
.chat-group-messages .chat-msg-bubble { max-width: 100%; }

/* ---- Per-message hover actions (reaction + reply) ---- */
.chat-msg { position: relative; display: flex; flex-direction: column; }
.chat-msg-actions {
    position: absolute;
    top: -12px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    border-radius: 999px;
    background: var(--surface, #1e293b);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 6;
}
.chat-group.me .chat-msg-actions { right: 4px; left: auto; }
.chat-msg:hover .chat-msg-actions,
.chat-msg:focus-within .chat-msg-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.chat-msg-action {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-2, #cbd5e1);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
}
.chat-msg-action:hover {
    background: rgba(99, 102, 241, 0.18);
    transform: scale(1.12);
}
.chat-msg-action.reply { font-size: 14px; }

/* ---- Reactions ---- */
.chat-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
    padding: 0 2px;
}
.chat-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.25);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-2, #334155);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.chat-reaction-chip:hover { transform: translateY(-1px); border-color: rgba(139, 92, 246, 0.5); }
.chat-reaction-chip.mine {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.55);
    color: var(--text, #090d16);
}
.chat-reaction-chip span { font-weight: 700; }

/* ---- Reply quote inside bubble ---- */
.chat-reply-quote {
    display: block;
    margin-bottom: 5px;
    padding: 4px 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 11px;
    line-height: 1.35;
    cursor: pointer;
}
.chat-msg-bubble.other .chat-reply-quote {
    border-left-color: #818cf8;
    background: rgba(99, 102, 241, 0.09);
}
.chat-reply-quote-name {
    display: block;
    font-weight: 700;
    opacity: 0.95;
    margin-bottom: 1px;
}
.chat-reply-quote-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
    opacity: 0.85;
}
.chat-msg.is-flashing .chat-msg-bubble {
    animation: chatMsgFlash 1.2s ease;
}
@keyframes chatMsgFlash {
    0% { box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.8); }
    100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
}

/* ---- Reply preview above input ---- */
.chat-reply-preview {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-left: 3px solid #818cf8;
    border-radius: 10px;
    animation: msgSlideIn 0.2s ease;
}
.chat-reply-preview.active { display: flex; }
.chat-reply-preview-body { flex: 1; min-width: 0; }
.chat-reply-preview-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #a5b4fc;
}
.chat-reply-arrow { font-size: 13px; }
.chat-reply-preview-text {
    font-size: 11px;
    color: var(--text-3, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.chat-reply-cancel {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-3, #94a3b8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    border-radius: 4px;
}
.chat-reply-cancel:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); }

/* Ảnh xem trước khi dán/chọn file */
.chat-file-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Mobile: không có hover -> hiện nút thao tác dưới bong bóng */
@media (hover: none) {
    .chat-msg-actions {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 2px;
        align-self: flex-end;
    }
}

/* Chat Input Area */
.chat-input-area {
    padding: 10px 12px; flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: var(--bg-page, #0f172a);
}
.chat-input-row {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface, #1e293b);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px; padding: 4px 6px 4px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input-row:focus-within {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.chat-input-field {
    flex: 1; border: none; background: transparent;
    color: var(--text, #e2e8f0); font-size: 13px;
    outline: none; padding: 7px 0;
    font-family: inherit;
}
.chat-input-field::placeholder { color: var(--text-4, #64748b); }

.chat-input-btn {
    background: transparent; border: none; color: var(--text-4, #64748b);
    cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.chat-input-btn:hover { color: var(--text-2, #cbd5e1); background: rgba(255,255,255,0.06); }
.chat-send-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white; border: none; cursor: pointer;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.chat-send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

/* File preview strip */
.chat-file-preview {
    display: none; align-items: center; gap: 8px;
    padding: 6px 10px; margin-bottom: 6px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px; font-size: 12px;
    color: var(--text-2, #cbd5e1);
    animation: msgSlideIn 0.2s ease;
}
.chat-file-preview.active { display: flex; }
.chat-file-preview .file-icon { flex-shrink: 0; color: #8b5cf6; }
.chat-file-preview .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-preview .file-remove {
    background: transparent; border: none; color: var(--text-4);
    cursor: pointer; padding: 2px; display: flex; border-radius: 4px;
    transition: color 0.2s;
}
.chat-file-preview .file-remove:hover { color: #ef4444; }

/* Emoji Picker */
.emoji-picker-container {
    position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px;
    background: var(--surface, #1e293b);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    padding: 10px;
    display: none; flex-direction: column; gap: 8px;
    z-index: 10;
    animation: emojiFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.emoji-picker-container.open { display: flex; }
@keyframes emojiFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.emoji-picker-search {
    width: 100%; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; background: rgba(0,0,0,0.2);
    color: var(--text, #e2e8f0); font-size: 12px; outline: none;
    font-family: inherit;
}
.emoji-picker-search::placeholder { color: var(--text-4); }
.emoji-picker-search:focus {
    border-color: rgba(99, 102, 241, 0.4);
}
.emoji-tabs {
    display: flex; gap: 2px; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
    background: transparent; border: none; padding: 4px 8px;
    border-radius: 8px; cursor: pointer; font-size: 16px;
    transition: background 0.15s; flex-shrink: 0;
    opacity: 0.6;
}
.emoji-tab:hover, .emoji-tab.active { background: rgba(99, 102, 241, 0.15); opacity: 1; }
.emoji-grid {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 2px; max-height: 180px; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.2) transparent;
}
.emoji-grid::-webkit-scrollbar { width: 4px; }
.emoji-grid::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.2); border-radius: 4px; }
.emoji-item {
    width: 100%; aspect-ratio: 1; display: flex;
    align-items: center; justify-content: center;
    font-size: 20px; border-radius: 8px; border: none;
    background: transparent; cursor: pointer;
    transition: all 0.15s;
}
.emoji-item:hover {
    background: rgba(99, 102, 241, 0.12);
    transform: scale(1.2);
}

/* Date separator */
.chat-date-sep {
    text-align: center; font-size: 10px; color: var(--text-4, #64748b);
    margin: 6px 0; position: relative;
    display: flex; align-items: center; gap: 8px;
}
.chat-date-sep::before, .chat-date-sep::after {
    content: ''; flex: 1; height: 1px;
    background: rgba(255,255,255,0.06);
}

/* Uploading state */
.chat-uploading {
    display: none; align-items: center; gap: 8px;
    padding: 8px 14px; font-size: 12px;
    color: var(--text-3); animation: msgSlideIn 0.2s;
}
.chat-uploading.active { display: flex; }
.chat-uploading .spinner {
    width: 14px; height: 14px; border: 2px solid rgba(139,92,246,0.2);
    border-top-color: #8b5cf6; border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Custom Tag Colors */
.tag-lettering { background: #dcfce7 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.tag-prep { background: #ffedd5 !important; color: #c2410c !important; border-color: #fed7aa !important; }
.tag-retouch { background: #dbeafe !important; color: #1e40af !important; border-color: #bfdbfe !important; }
.tag-correction { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }
.tag-lettering-retouch { background: #ede9fe !important; color: #5b21b6 !important; border-color: #ddd6fe !important; }

.dark-theme .tag-lettering { background: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; border-color: rgba(34, 197, 94, 0.3) !important; }
.dark-theme .tag-prep { background: #ffedd5 !important; color: #c2410c !important; border-color: #fed7aa !important; }
.dark-theme .tag-retouch { background: rgba(59, 130, 246, 0.2) !important; color: #60a5fa !important; border-color: rgba(59, 130, 246, 0.3) !important; }
.dark-theme .tag-correction { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.3) !important; }
.dark-theme .tag-lettering-retouch { background: rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; border-color: rgba(139, 92, 246, 0.3) !important; }

.job-group-header { grid-column: 1 / -1; width: 100%; font-size: 0.85rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin: 16px 0 8px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* --- Notion-style Controls --- */
.notion-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
}
.kanban-sort-btn {
    position: relative;
    z-index: 101;
}
.notion-icon-btn {
    color: var(--text-3);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.notion-icon-btn:hover {
    background: var(--surface);
    color: var(--text-1);
}
.notion-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full) !important;
    padding: 6px 14px;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}
.notion-search-wrapper:hover, .notion-search-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}
.notion-search-wrapper i {
    color: var(--text-3);
    font-size: 0.85rem;
}
.notion-search-input {
    border: none;
    background: transparent;
    outline: none;
    color: var(--text);
    width: 100%;
    font-size: 0.86rem;
    font-weight: 500;
}
.notion-search-input::placeholder {
    color: var(--text-4);
}

.notion-icon-btn {
    border-radius: var(--radius-full) !important;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}
.notion-icon-btn:hover {
    background-color: var(--surface-hover);
    color: var(--text);
    border-color: var(--border-focus);
    transform: translateY(-1px);
}

.notion-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 9999;
    min-width: 200px;
    padding: 8px 0;
    font-family: var(--font);
    font-size: 0.84rem;
    color: var(--text-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: modalFadeSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.notion-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 500;
    transition: all var(--t-fast);
}
.notion-dropdown-item:hover {
    background-color: var(--surface-hover);
    color: var(--text);
}
.notion-dropdown-item.active {
    color: var(--primary);
    font-weight: 700;
    background: var(--primary-bg);
}
.notion-dropdown-item .fa-check {
    display: none;
    color: var(--primary);
    font-size: 0.75rem;
}
.notion-dropdown-item.active .fa-check {
    display: inline-block;
}
.notion-dropdown-divider {
    height: 1px;
    background-color: var(--border-subtle);
    margin: 6px 0;
}

/* ========== POPUP FLATPICKR — Premium Glassmorphism ========== */
.flatpickr-calendar {
    background: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    border-radius: 16px !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
    padding: 12px !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    overflow: visible !important;
    min-width: 320px !important;
    z-index: 100005 !important;
}

/* Hide ugly arrows */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none !important;
}

/* Month header */
.flatpickr-calendar .flatpickr-months {
    margin-bottom: 4px !important;
}

.flatpickr-calendar .flatpickr-month {
    height: 36px !important;
}

.flatpickr-calendar .flatpickr-current-month {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
    letter-spacing: 0.02em !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    border: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

/* Nav arrows */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    padding: 6px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
}

.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
    background: rgba(99, 102, 241, 0.15) !important;
}

.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    fill: #94a3b8 !important;
    transition: fill 0.2s ease !important;
}

.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: #818cf8 !important;
}

/* Weekday headers */
.flatpickr-calendar .flatpickr-weekday {
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.flatpickr-calendar .flatpickr-weekdays {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
}

/* Day cells */
.flatpickr-calendar .flatpickr-day {
    color: #cbd5e1 !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    transition: all 0.15s ease !important;
    height: 36px !important;
    line-height: 36px !important;
}

.flatpickr-calendar .flatpickr-day:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #e2e8f0 !important;
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: rgba(99, 102, 241, 0.5) !important;
    color: #818cf8 !important;
    font-weight: 700 !important;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4) !important;
}

.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #334155 !important;
}

/* Time picker section */
.flatpickr-calendar .flatpickr-time {
    border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    height: 46px !important;
    max-height: none !important;
    overflow: visible !important;
}

.flatpickr-calendar .flatpickr-time input {
    color: #e2e8f0 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    background: rgba(30, 41, 59, 0.6) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    transition: all 0.2s ease !important;
    margin: 0 2px !important;
}

.flatpickr-calendar .flatpickr-time input:hover,
.flatpickr-calendar .flatpickr-time input:focus {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

.flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown {
    border: none !important;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowUp::after {
    border-bottom-color: #94a3b8 !important;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper span.arrowDown::after {
    border-top-color: #94a3b8 !important;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper:hover span.arrowUp::after {
    border-bottom-color: #818cf8 !important;
}

.flatpickr-calendar .flatpickr-time .numInputWrapper:hover span.arrowDown::after {
    border-top-color: #818cf8 !important;
}

/* ==========================================================================
   TASK HANDOVER & COMMENTS (RETOUCH ⇄ LETTERING)
   ========================================================================== */
.task-handover-box {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.handover-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.handover-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
}

.handover-volume-name {
    color: #fbbf24;
    font-weight: 700;
    margin-left: 4px;
}

.handover-partner-badge {
    font-size: 0.75rem;
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 2px 8px;
    border-radius: 6px;
}

.quick-handover-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
}

.quick-handover-label {
    font-size: 0.75rem;
    color: var(--text-3);
    font-weight: 500;
    margin-right: 2px;
}

.btn-quick-tag {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-2);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-quick-tag:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text);
}

.btn-quick-tag.done-retouch {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #34d399;
}
.btn-quick-tag.done-retouch:hover {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
}

.btn-quick-tag.in-progress {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}
.btn-quick-tag.in-progress:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.4);
}

.btn-quick-tag.note {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}
.btn-quick-tag.note:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
}

.handover-comments-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
    margin: 4px 0;
}

.handover-empty {
    font-size: 0.8rem;
    color: var(--text-4);
    font-style: italic;
    padding: 8px 0;
}

.handover-comment-item {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.2s ease;
    position: relative;
}

.handover-comment-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(99, 102, 241, 0.4);
}

.comment-avatar-fallback {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4f46e5;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.comment-user {
    font-size: 0.8rem;
    font-weight: 600;
    color: #818cf8;
}

.comment-tag {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 4px;
}
.comment-tag.handover {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
.comment-tag.progress {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
.comment-tag.warning {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.comment-time {
    font-size: 0.68rem;
    color: var(--text-4);
    margin-left: auto;
}

.btn-delete-comment {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    opacity: 0.85;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.btn-delete-comment:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.15);
    transform: scale(1.1);
}

.comment-text {
    font-size: 0.84rem;
    color: var(--text);
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.comment-psd-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
    margin-left: 2px;
}

.handover-input-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.handover-count-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    animation: fadeIn 0.2s ease;
}

.handover-count-bar .count-badge {
    font-size: 0.8rem;
    font-weight: 800;
    color: #818cf8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.handover-count-bar .count-hint {
    font-size: 0.72rem;
    color: var(--text-3);
    font-style: italic;
}

.handover-input-group {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.handover-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: none;
    min-height: 38px;
    max-height: 130px;
    overflow-y: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.handover-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.btn-handover-send {
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-handover-send:hover {
    background: #4f46e5;
    transform: translateY(-1px);
}

@keyframes toastSlideIn {
    0% { transform: translateY(-20px) scale(0.95); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ==========================================================================
   NOTIFICATION CENTER (TOP RIGHT ALARM)
   ========================================================================== */
.notification-center-wrapper {
    position: relative;
    display: inline-block;
}

.notification-bell-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    font-size: 1.1rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.notification-bell-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-1px);
}

.notification-bell-btn.has-unread {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
}

.notification-bell-btn.ringing {
    animation: bellRing 0.8s ease;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(15deg); }
    40%, 80% { transform: rotate(-15deg); }
}

.notification-unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #0f172a;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notification-dropdown-panel {
    position: absolute;
    top: 50px;
    right: 0;
    width: 380px;
    max-width: 90vw;
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 24px rgba(99, 102, 241, 0.18);
    backdrop-filter: blur(20px);
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notifSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notifSlideDown {
    0% { opacity: 0; transform: translateY(-10px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.notification-panel-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
}

.notification-header-actions {
    display: flex;
    gap: 6px;
}

.btn-notif-action {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-notif-action:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.btn-notif-action.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.notification-items-list {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 6px;
}

.notification-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
    margin-bottom: 3px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
}

.notification-item:hover {
    background: var(--surface-hover);
    border-color: var(--border);
}

.notification-item.unread {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
}

.notif-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.notif-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.notif-user-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark-theme .notif-user-name {
    color: #a5b4fc;
}

.notif-time {
    font-size: 0.7rem;
    color: var(--text-3);
    flex-shrink: 0;
    margin-left: 6px;
    white-space: nowrap;
}

.notif-task-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #b45309;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

body.dark-theme .notif-task-title {
    color: #fbbf24;
}

.notif-message-text {
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.35;
    word-break: break-word;
}

.btn-notif-dismiss {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    align-self: flex-start;
}

.btn-notif-dismiss:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.notification-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 16px;
    color: var(--text-3);
    font-size: 0.82rem;
    text-align: center;
}

.notification-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.btn-notif-close-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-notif-close-panel:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* ======================== 24. TASK RESOURCE LINKS WIDGET ======================== */
.task-links-box {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.task-links-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.task-links-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
}

.btn-manage-links {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-manage-links:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: #818cf8;
    color: #c7d2fe;
    transform: translateY(-1px);
}

.task-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 600px) {
    .task-links-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.task-link-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.task-link-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.task-link-card:hover .task-link-icon {
    transform: scale(1.1);
}

.task-link-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.task-link-name {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.task-link-status {
    font-size: 0.65rem;
    font-weight: 600;
    margin-top: 1px;
    white-space: nowrap;
    opacity: 0.85;
}

.task-link-edit-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    opacity: 0;
    transition: all 0.15s ease;
}

.task-link-card:hover .task-link-edit-btn {
    opacity: 0.9;
}

.task-link-edit-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    transform: scale(1.15);
}

/* Tool specific themes */
.task-link-card.mikan.empty {
    background: rgba(249, 115, 22, 0.05);
    border-color: rgba(249, 115, 22, 0.2);
    color: var(--text-3);
}
.task-link-card.mikan.empty .task-link-icon {
    background: rgba(249, 115, 22, 0.12);
    color: rgba(249, 115, 22, 0.7);
}
.task-link-card.mikan.has-url {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.45);
    color: #fdba74;
}
.task-link-card.mikan.has-url .task-link-icon {
    background: rgba(249, 115, 22, 0.25);
    color: #f97316;
}
.task-link-card.mikan:hover {
    background: rgba(249, 115, 22, 0.22);
    border-color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.task-link-card.notion.empty {
    background: rgba(99, 102, 241, 0.05);
    border-color: rgba(99, 102, 241, 0.2);
    color: var(--text-3);
}
.task-link-card.notion.empty .task-link-icon {
    background: rgba(99, 102, 241, 0.12);
    color: rgba(99, 102, 241, 0.7);
}
.task-link-card.notion.has-url {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.45);
    color: #c7d2fe;
}
.task-link-card.notion.has-url .task-link-icon {
    background: rgba(99, 102, 241, 0.25);
    color: #818cf8;
}
.task-link-card.notion:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: #818cf8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.task-link-card.asana.empty {
    background: rgba(244, 63, 94, 0.05);
    border-color: rgba(244, 63, 94, 0.2);
    color: var(--text-3);
}
.task-link-card.asana.empty .task-link-icon {
    background: rgba(244, 63, 94, 0.12);
    color: rgba(244, 63, 94, 0.7);
}
.task-link-card.asana.has-url {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.45);
    color: #fecdd3;
}
.task-link-card.asana.has-url .task-link-icon {
    background: rgba(244, 63, 94, 0.25);
    color: #f43f5e;
}
.task-link-card.asana:hover {
    background: rgba(244, 63, 94, 0.22);
    border-color: #f43f5e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25);
}

.task-link-card.dropbox.empty {
    background: rgba(0, 97, 254, 0.05);
    border-color: rgba(0, 97, 254, 0.2);
    color: var(--text-3);
}
.task-link-card.dropbox.empty .task-link-icon {
    background: rgba(0, 97, 254, 0.12);
    color: rgba(0, 97, 254, 0.7);
}
.task-link-card.dropbox.has-url {
    background: rgba(0, 97, 254, 0.12);
    border-color: rgba(0, 97, 254, 0.45);
    color: #93c5fd;
}
.task-link-card.dropbox.has-url .task-link-icon {
    background: rgba(0, 97, 254, 0.25);
    color: #3b82f6;
}
.task-link-card.dropbox:hover {
    background: rgba(0, 97, 254, 0.22);
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 97, 254, 0.25);
}

/* Edit Task Links Modal */
.task-links-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn 0.2s ease;
}

.task-links-modal-card {
    width: 100%;
    max-width: 500px;
    background: var(--surface, #1e1e2d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: zoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.task-links-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.task-links-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.task-links-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.task-links-modal-subtitle {
    font-size: 0.75rem;
    color: var(--text-3);
    display: block;
    margin-top: 2px;
}

.task-links-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 70vh;
    overflow-y: auto;
}

.task-link-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-link-input-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-2);
}

.tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 4px;
}

.tool-badge.mikan { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.tool-badge.notion { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
.tool-badge.asana { background: rgba(244, 63, 94, 0.15); color: #fda4af; }
.tool-badge.dropbox { background: rgba(0, 97, 254, 0.15); color: #93c5fd; }

.input-hint {
    font-size: 0.7rem;
    color: var(--text-4);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.task-link-input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.task-link-input:focus {
    outline: none;
    border-color: #818cf8;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.btn-paste-link {
    position: absolute;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}

.btn-paste-link:hover {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
}

.task-links-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.btn-links-cancel {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-3);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-links-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.btn-links-save {
    padding: 7px 18px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.btn-links-save:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

/* ================== WEATHER 35MM CINEMA FILMSTRIP ALBUM ================== */
.hero-filmstrip-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: auto;
    z-index: 1;
    display: flex;
    align-items: stretch;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.hero-filmstrip-container.disabled {
    display: none !important;
}

.hero-filmstrip-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: max-content;
    will-change: transform;
    animation: filmstripScroll 45s linear infinite;
}

.hero-filmstrip-track.speed-slow {
    animation-duration: 75s;
}
.hero-filmstrip-track.speed-normal {
    animation-duration: 45s;
}
.hero-filmstrip-track.speed-fast {
    animation-duration: 25s;
}
.hero-filmstrip-track.paused {
    animation-play-state: paused;
}

.hero-filmstrip-container:hover .hero-filmstrip-track {
    animation-play-state: paused;
}

@keyframes filmstripScroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.hero-film-item {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin: 0;
    overflow: hidden;
    user-select: none;
    transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    background: #0f172a;
    cursor: pointer;
    pointer-events: auto;
}

.hero-film-item:hover {
    transform: scale(1.035);
    z-index: 10;
    filter: brightness(1.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Authentic White Sprocket Holes Backlight - Makes the 35mm Filmstrip POP */
.film-sprocket-backlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        to bottom,
        #f8fafc 0%,
        #f8fafc 15.2%,
        transparent 15.2%,
        transparent 84.8%,
        #f8fafc 84.8%,
        #f8fafc 100%
    );
}

.hero-film-photo {
    position: absolute;
    left: 6%;
    top: 15.2%;
    width: 88%;
    height: 70.2%;
    object-fit: cover;
    border-radius: 2px;
    background: #0f172a;
    filter: brightness(1.08) contrast(1.04);
    z-index: 1;
    transition: transform 0.3s ease;
}

.hero-film-overlay-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/images/film_frame_clean.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

.hero-film-caption {
    position: absolute;
    bottom: 18%;
    left: 10%;
    right: 10%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: #f8fafc;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 3px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.2s ease;
    z-index: 3;
    pointer-events: none;
}

.hero-film-item:hover .hero-film-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Hide dark vignette overlay to keep album 100% prominent & bright */
.hero-filmstrip-vignette {
    display: none !important;
}

/* Hide cloud layers and weather FX overlays to highlight album only */
.honor-clouds-container {
    display: none !important;
}
.weather-fx-sun, .weather-fx-sun-godrays, .weather-fx-thunder {
    display: none !important;
}

/* Button to trigger Album Modal */
.hero-film-album-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #e2e8f0;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all 0.25s ease;
}

.hero-film-album-btn:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.hero-film-album-btn i {
    color: #f59e0b;
}

.weather-film-pill-btn:hover {
    background: rgba(245, 158, 11, 0.38) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}

/* Modal for Filmstrip Album */
.filmstrip-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    overscroll-behavior: contain;
    will-change: opacity;
}

.filmstrip-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.filmstrip-modal-card {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.97) 0%, rgba(15, 23, 42, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(245, 158, 11, 0.15);
    width: 90%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(10px) translateZ(0);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
    will-change: transform;
}

.filmstrip-modal-backdrop.open .filmstrip-modal-card {
    transform: scale(1) translateY(0) translateZ(0);
}

.filmstrip-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filmstrip-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filmstrip-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filmstrip-modal-close:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.filmstrip-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.filmstrip-dropzone {
    border: 2px dashed rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.05);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filmstrip-dropzone:hover, .filmstrip-dropzone.dragover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

.filmstrip-dropzone-icon {
    font-size: 2rem;
    color: #f59e0b;
    margin-bottom: 8px;
}

.filmstrip-settings-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.filmstrip-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}

.filmstrip-thumb-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.filmstrip-thumb-photo {
    position: absolute;
    left: 6%;
    top: 15.2%;
    width: 88%;
    height: 70.2%;
    object-fit: cover;
}

.filmstrip-thumb-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/images/film_frame_clean.png');
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.filmstrip-thumb-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.filmstrip-thumb-item:hover .filmstrip-thumb-delete {
    opacity: 1;
    transform: scale(1.05);
}

.filmstrip-thumb-delete:disabled {
    cursor: not-allowed;
    background: rgba(100, 116, 139, 0.8) !important;
}

.filmstrip-thumb-item.deleting {
    opacity: 0.4;
    filter: grayscale(0.85);
    pointer-events: none;
    transform: scale(0.96);
    transition: all 0.25s ease;
}

/* Thumbnail Photo Name / Caption */
.filmstrip-thumb-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 6px 4px 6px;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.85) 40%, rgba(15, 23, 42, 0.98) 100%);
    color: #f8fafc;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    z-index: 5;
    pointer-events: none;
    backdrop-filter: blur(2px);
    letter-spacing: -0.2px;
}

/* Filmstrip Upload Progress UI */
.filmstrip-upload-progress {
    margin-top: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(30, 41, 59, 0.88);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    animation: fadeInProgress 0.25s ease-out;
}

@keyframes fadeInProgress {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.filmstrip-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.filmstrip-progress-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f8fafc;
    font-weight: 600;
}

.filmstrip-progress-title i {
    color: #f59e0b;
}

.filmstrip-progress-percent {
    font-weight: 700;
    color: #fbbf24;
    font-size: 0.82rem;
}

.filmstrip-progress-bar-bg {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.filmstrip-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.filmstrip-progress-current-file {
    margin-top: 6px;
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filmstrip modal copy + controls (theme-aware; the dark values are the
   defaults, the light theme overrides them further down the file). */
.filmstrip-dropzone-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.filmstrip-dropzone-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.filmstrip-settings-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.filmstrip-speed-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.filmstrip-enable-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
}

.filmstrip-count-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.filmstrip-reset-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filmstrip-empty-msg {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    padding: 30px;
}

/* ================== FILMSTRIP LIGHTBOX (Xem ảnh kích thước lớn) ================== */
.filmstrip-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 22, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.filmstrip-lightbox-backdrop.active {
    opacity: 1;
}

.filmstrip-lightbox-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 95vw;
    max-height: 94vh;
    width: fit-content;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(245, 158, 11, 0.12);
    overflow: hidden;
    transform: scale(0.94);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.filmstrip-lightbox-backdrop.active .filmstrip-lightbox-dialog {
    transform: scale(1);
}

/* Topbar */
.filmstrip-lightbox-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 16px;
    z-index: 2;
}

.filmstrip-lightbox-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.filmstrip-lightbox-badge {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.filmstrip-lightbox-title {
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 450px;
}

.filmstrip-lightbox-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.filmstrip-lightbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.filmstrip-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: translateY(-1px);
}

.filmstrip-lightbox-btn.close-btn:hover {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(239, 68, 68, 0.9);
    color: #fff;
}

/* Stage Area */
.filmstrip-lightbox-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 64px;
    min-height: 280px;
    max-height: calc(82vh - 80px);
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.5) 0%, rgba(10, 15, 29, 0.9) 100%);
}

.filmstrip-lightbox-media-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(82vh - 80px);
    max-width: calc(90vw - 128px);
}

.filmstrip-lightbox-img {
    max-width: 100%;
    max-height: calc(82vh - 80px);
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
    user-select: none;
    animation: fadeInImg 0.2s ease-out;
}

@keyframes fadeInImg {
    from { opacity: 0.4; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Nav Buttons */
.filmstrip-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    z-index: 5;
}

.filmstrip-lightbox-nav:hover {
    background: rgba(245, 158, 11, 0.85);
    border-color: rgba(245, 158, 11, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.filmstrip-lightbox-nav.prev {
    left: 12px;
}

.filmstrip-lightbox-nav.next {
    right: 12px;
}

/* Bottom Caption Bar */
.filmstrip-lightbox-caption-bar {
    padding: 8px 18px;
    background: rgba(15, 23, 42, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .filmstrip-lightbox-stage {
        padding: 8px 40px;
    }
    .filmstrip-lightbox-media-container {
        max-width: 100%;
    }
    .filmstrip-lightbox-nav {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .filmstrip-lightbox-nav.prev { left: 4px; }
    .filmstrip-lightbox-nav.next { right: 4px; }
    .filmstrip-lightbox-title { max-width: 200px; }
}

/* ================== BUTTERY 120Hz UNIVERSAL THEME TRANSITIONS & HARMONIZATION ================== */
body,
.sidebar,
.main-area,
.card,
.progress-card,
.chart-section,
.table-section,
.data-table-container,
.hero-banner,
#hero-weather-bg,
.modal-content,
.cp-modal,
.notification-dropdown-panel,
.filmstrip-modal-card,
.weather-forecast-modal,
.ai-insights-bar,
.task-back-btn,
.filters-container,
.controls-bar {
    transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 1. Hero Banner Dynamic Sky & Contrast */
#hero-weather-bg {
    background: linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
    transition: background 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.dark-theme #hero-weather-bg {
    background: #0b1120 !important;
}

/* Hero Scrim and Typography */
body:not(.dark-theme) .hero-left-focus-scrim {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 55%, rgba(255, 255, 255, 0.15) 85%, transparent 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body:not(.dark-theme) .hero-brand-title {
    color: #0f172a !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.8) !important;
}
body:not(.dark-theme) .hero-welcome-text {
    color: #1e293b !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}
body.dark-theme .hero-brand-title {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9) !important;
}
body.dark-theme .hero-welcome-text {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Hero Action Controls & Inline Weather Bar */
/* (kept off `.liquid-glass` elements — those get the glass treatment instead) */
body:not(.dark-theme) .online-users-cluster:not(.liquid-glass),
body:not(.dark-theme) #notification-bell-btn:not(.liquid-glass),
body:not(.dark-theme) .theme-toggle:not(.liquid-glass) {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
body:not(.dark-theme) #notification-bell-btn i,
body:not(.dark-theme) .theme-toggle svg {
    color: #334155 !important;
    stroke: #334155 !important;
}
body:not(.dark-theme) #notification-bell-btn:not(.liquid-glass):hover,
body:not(.dark-theme) .theme-toggle:not(.liquid-glass):hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px);
}
#inline-weather-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Weather Typography & Pills in Light Mode */
body:not(.dark-theme) .weather-mockup-temp {
    color: #0f172a !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}
body:not(.dark-theme) .weather-mockup-temp sup {
    color: #334155 !important;
    font-weight: 700 !important;
}
body:not(.dark-theme) .weather-mockup-condition,
body:not(.dark-theme) .weather-mockup-condition span {
    color: #0f172a !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}
body:not(.dark-theme) #weather-sync-icon {
    color: #475569 !important;
}
body:not(.dark-theme) .weather-mockup-range {
    color: #334155 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
body:not(.dark-theme) .weather-mockup-pill {
    background: rgba(255, 255, 255, 0.34) !important;
    border: none !important;
    box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.28) !important;
    backdrop-filter: blur(16px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(165%) !important;
}
body:not(.dark-theme) .weather-mockup-pill span {
    color: #334155 !important;
    font-weight: 700 !important;
}
body:not(.dark-theme) .weather-mockup-pill strong {
    color: #0f172a !important;
    font-weight: 900 !important;
}

body:not(.dark-theme) .hero-album-btn:not(.liquid-glass) {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #b45309 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.14) !important;
}
body:not(.dark-theme) .hero-album-btn:not(.liquid-glass) i {
    color: #d97706 !important;
}

/* 3. AI Insights Bar in Light Mode */
body:not(.dark-theme) .ai-insights-bar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-top: 1px solid #e2e8f0 !important;
}
body:not(.dark-theme) .ai-insights-track {
    mask-image: linear-gradient(to right, transparent 0%, black 1.5%, black 98.5%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5%, black 98.5%, transparent 100%) !important;
}
body:not(.dark-theme) .ai-insight-item {
    color: #0f172a !important;
    font-weight: 700 !important;
}
body:not(.dark-theme) .ai-insight-dot {
    background: #0284c7 !important;
    box-shadow: 0 0 6px #0284c7 !important;
}
body:not(.dark-theme) .ai-insights-label {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.35)) !important;
    border: 1.5px solid rgba(217, 119, 6, 0.6) !important;
    color: #92400e !important;
    font-weight: 900 !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2) !important;
}

/* 4. Notification Dropdown Panel */
body:not(.dark-theme) .notification-dropdown-panel {
    background: var(--surface-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 24px rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-theme) .notification-panel-header {
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
}
body:not(.dark-theme) .notification-panel-title {
    color: var(--text) !important;
}
body:not(.dark-theme) .btn-notif-action {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-2) !important;
}
body:not(.dark-theme) .btn-notif-action:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}
body:not(.dark-theme) .notification-panel-footer {
    border-top: 1px solid var(--border) !important;
    background: var(--surface) !important;
}
body:not(.dark-theme) .btn-notif-close-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-2) !important;
}
body:not(.dark-theme) .notification-item {
    background: var(--surface) !important;
    border-color: var(--border-subtle) !important;
}
body:not(.dark-theme) .notification-item:hover {
    background: var(--surface-hover) !important;
}
body:not(.dark-theme) .notification-item.unread {
    background: rgba(99, 102, 241, 0.10) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}
body:not(.dark-theme) .notif-task-title {
    color: #b45309 !important;
}
body:not(.dark-theme) .notif-message-text {
    color: var(--text-2) !important;
}
body:not(.dark-theme) .notif-time {
    color: var(--text-3) !important;
}
body:not(.dark-theme) .notification-empty-state,
body:not(.dark-theme) .btn-notif-dismiss {
    color: var(--text-3) !important;
}

/* 5. Tool Full Page Views (Calendar, Drive, PSD, Role) */
body:not(.dark-theme) .modal-overlay.task-detail-page-view.tool-page-view,
body:not(.dark-theme) #page-view-drive,
body:not(.dark-theme) #page-view-drive .tool-page-container,
body:not(.dark-theme) #page-view-drive .tool-iframe-wrapper,
body:not(.dark-theme) #page-view-calendar,
body:not(.dark-theme) #page-view-calendar .tool-page-container,
body:not(.dark-theme) #page-view-psd,
body:not(.dark-theme) #page-view-role {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .calendar-subnav-tabs {
    background: #e2e8f0 !important;
}
body:not(.dark-theme) .calendar-subnav-pill {
    color: #475569 !important;
}
body:not(.dark-theme) .calendar-subnav-pill:hover {
    color: #0f172a !important;
    background: rgba(0, 0, 0, 0.05) !important;
}
body:not(.dark-theme) .calendar-subnav-pill.active {
    color: #ffffff !important;
    background: var(--primary) !important;
}
body:not(.dark-theme) #page-view-calendar iframe {
    filter: none !important;
}
body.dark-theme #page-view-calendar iframe {
    filter: invert(0.9) hue-rotate(180deg) contrast(0.9) brightness(0.95);
}

/* 6. Modals & Popovers (Album, Forecast, Pet) */
body:not(.dark-theme) .filmstrip-modal-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .filmstrip-modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
}
body:not(.dark-theme) .filmstrip-modal-header h3 {
    color: #0f172a !important;
}
body:not(.dark-theme) .filmstrip-modal-close {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
body:not(.dark-theme) .filmstrip-modal-body {
    color: #334155 !important;
}
body:not(.dark-theme) .filmstrip-dropzone {
    border-color: rgba(217, 119, 6, 0.45) !important;
    background: rgba(245, 158, 11, 0.08) !important;
}
body:not(.dark-theme) .filmstrip-dropzone:hover,
body:not(.dark-theme) .filmstrip-dropzone.dragover {
    border-color: #d97706 !important;
    background: rgba(245, 158, 11, 0.15) !important;
}
body:not(.dark-theme) .filmstrip-dropzone-title {
    color: #0f172a !important;
}
body:not(.dark-theme) .filmstrip-dropzone-sub {
    color: #64748b !important;
}
body:not(.dark-theme) .filmstrip-settings-bar {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
body:not(.dark-theme) .filmstrip-settings-label {
    color: #334155 !important;
}
body:not(.dark-theme) .filmstrip-speed-select {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .filmstrip-enable-label {
    color: #334155 !important;
}
body:not(.dark-theme) .filmstrip-count-label {
    color: #475569 !important;
}
body:not(.dark-theme) .filmstrip-reset-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}
body:not(.dark-theme) .filmstrip-reset-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .filmstrip-empty-msg {
    color: #94a3b8 !important;
}
body:not(.dark-theme) .filmstrip-upload-progress {
    background: #f8fafc !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}
body:not(.dark-theme) .filmstrip-progress-title {
    color: #0f172a !important;
}
body:not(.dark-theme) .filmstrip-progress-percent {
    color: #b45309 !important;
}
body:not(.dark-theme) .filmstrip-progress-bar-bg {
    background: #e2e8f0 !important;
}
body:not(.dark-theme) .filmstrip-progress-current-file {
    color: #64748b !important;
}

/* ---- Admin "leave notification email" modal ----
   The markup hardcodes dark hex values but mixes in theme tokens
   (var(--bg-page), var(--border)), so in light mode boxes went white while the
   text stayed white (invisible). These overrides make the whole modal follow
   the active theme; dark mode keeps its original hardcoded look. */
#admin-leave-email-input::placeholder {
    color: #94a3b8 !important;
}
body:not(.dark-theme) #admin-leave-email-modal {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--border) !important;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.18) !important;
}
body:not(.dark-theme) #admin-leave-email-header,
body:not(.dark-theme) #admin-leave-email-footer {
    background: #f8fafc !important;
}
body:not(.dark-theme) #admin-leave-email-title,
body:not(.dark-theme) #admin-leave-email-autotitle {
    color: #0f172a !important;
}
body:not(.dark-theme) #admin-leave-email-subtitle,
body:not(.dark-theme) #admin-leave-email-autosub,
body:not(.dark-theme) #admin-leave-email-hint {
    color: #64748b !important;
}
body:not(.dark-theme) #admin-leave-email-list-label {
    color: #334155 !important;
}
body:not(.dark-theme) #admin-leave-email-count {
    background: rgba(79, 70, 229, 0.12) !important;
    color: #4338ca !important;
}
body:not(.dark-theme) #admin-leave-email-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
body:not(.dark-theme) #admin-leave-email-tags > span {
    background: rgba(79, 70, 229, 0.1) !important;
    border-color: rgba(79, 70, 229, 0.3) !important;
    color: #4338ca !important;
}
body:not(.dark-theme) #admin-leave-email-tags > span i {
    color: #6366f1 !important;
}
body:not(.dark-theme) #admin-leave-email-autobox {
    background: #f8fafc !important;
}
body:not(.dark-theme) #admin-leave-email-header > div > div:first-child {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #b45309 !important;
}
body:not(.dark-theme) #admin-leave-email-header button {
    color: #64748b !important;
}
body:not(.dark-theme) #btn-admin-leave-email-test {
    border-color: rgba(217, 119, 6, 0.45) !important;
    color: #b45309 !important;
}

body:not(.dark-theme) .weather-forecast-modal {
    --wf-title: #0f172a;
    --wf-text: #1e293b;
    --wf-text-muted: #475569;
    --wf-text-faint: #64748b;
    --wf-surface: #f8fafc;
    --wf-surface-strong: #f1f5f9;
    --wf-border: #e2e8f0;
    --wf-border-soft: #e2e8f0;
    --wf-chip: #f1f5f9;
    --wf-chip-border: #cbd5e1;
    --wf-chip-hover: #e2e8f0;
    --wf-accent: #0284c7;
    --wf-accent-soft: rgba(2, 132, 199, 0.12);
    --wf-metric-1: #0369a1;
    --wf-metric-2: #c2410c;
    --wf-metric-3: #a16207;
    --wf-metric-4: #475569;
    --wf-icon-1: #0284c7;
    --wf-icon-2: #ea580c;
    --wf-icon-3: #ca8a04;
    --wf-icon-4: #64748b;
    --wf-emoji-shadow: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.18));
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12) !important;
}
body:not(.dark-theme) .weather-forecast-modal h2,
body:not(.dark-theme) .weather-forecast-modal h3,
body:not(.dark-theme) .weather-forecast-modal p,
body:not(.dark-theme) .weather-forecast-modal span {
    color: inherit;
}

body:not(.dark-theme) .pet-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}
body:not(.dark-theme) .pet-panel-header {
    border-bottom-color: #e2e8f0 !important;
}
body:not(.dark-theme) .pet-panel-title {
    color: #0f172a !important;
}
body:not(.dark-theme) .pet-hero-stage {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-color: #cbd5e1 !important;
}

/* 7. Flatpickr Calendar Theming */
body:not(.dark-theme) .flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .flatpickr-calendar .flatpickr-current-month,
body:not(.dark-theme) .flatpickr-calendar .flatpickr-current-month input.cur-year,
body:not(.dark-theme) .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: #0f172a !important;
}
body:not(.dark-theme) .flatpickr-calendar .flatpickr-day {
    color: #334155 !important;
}
body:not(.dark-theme) .flatpickr-calendar .flatpickr-weekday {
    color: #64748b !important;
}
body:not(.dark-theme) .flatpickr-calendar .flatpickr-time input {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

/* 9. Sidebar Virtual Pet Panel */
body:not(.dark-theme) .sidebar-pet-panel {
    background: linear-gradient(165deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 16px rgba(139, 92, 246, 0.05) !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .sidebar-pet-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body:not(.dark-theme) .sidebar-pet-name {
    color: #1e293b !important;
}
body:not(.dark-theme) .sidebar-pet-name:hover {
    color: #7c3aed !important;
}
body:not(.dark-theme) .sidebar-pet-action-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #64748b !important;
}
body:not(.dark-theme) .sidebar-pet-action-btn:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #7c3aed !important;
}
body:not(.dark-theme) .sidebar-pet-status-row {
    color: #64748b !important;
}
body:not(.dark-theme) .sidebar-pet-action-bar {
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}
body:not(.dark-theme) .pet-stat-item {
    color: #334155 !important;
}
body:not(.dark-theme) #pet-speech-bubble,
body:not(.dark-theme) .pet-speech-bubble {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
body:not(.dark-theme) #pet-speech-bubble::before,
body:not(.dark-theme) .pet-speech-bubble::before {
    border-color: transparent rgba(255, 255, 255, 0.98) transparent transparent !important;
}
body:not(.dark-theme) #pet-speech-text,
body:not(.dark-theme) .pet-speech-text {
    color: #0f172a !important;
}

/* 9.1 Pet leaderboard + stage badge — light mode readability */
.pet-lb-rank.rank-1 { color: #fbbf24; }
.pet-lb-rank.rank-2 { color: #cbd5e1; }
.pet-lb-rank.rank-3 { color: #d97706; }
.pet-lb-rank.rank-4,
.pet-lb-rank.rank-5 { color: #64748b; }

body:not(.dark-theme) .pet-lb-header { color: #64748b !important; }
body:not(.dark-theme) .pet-lb-user { color: #1e293b !important; }
body:not(.dark-theme) .pet-lb-level { color: #6d28d9 !important; }
body:not(.dark-theme) .pet-lb-track { background: rgba(15, 23, 42, 0.08) !important; }
body:not(.dark-theme) .pet-lb-fill { background: linear-gradient(90deg, #6366f1, #8b5cf6) !important; }
body:not(.dark-theme) .pet-lb-rank.rank-1 { color: #b45309 !important; }
body:not(.dark-theme) .pet-lb-rank.rank-2 { color: #475569 !important; }
body:not(.dark-theme) .pet-lb-rank.rank-3 { color: #9a3412 !important; }
body:not(.dark-theme) .pet-lb-rank.rank-4,
body:not(.dark-theme) .pet-lb-rank.rank-5 { color: #64748b !important; }

body:not(.dark-theme) .pet-stage-badge {
    background: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #6d28d9 !important;
}
body:not(.dark-theme) .sidebar-pet-reset-btn {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #dc2626 !important;
}

/* 10. Team Calendar - Attendance Subpage */
body:not(.dark-theme) .leave-subpage-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}
body:not(.dark-theme) .leave-stepper {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body:not(.dark-theme) .leave-step-item {
    color: #64748b !important;
}
body:not(.dark-theme) .leave-step-item.active {
    color: #4f46e5 !important;
}
body:not(.dark-theme) .leave-step-num {
    background: #e2e8f0 !important;
    color: #64748b !important;
}
body:not(.dark-theme) .leave-step-sep {
    background: #e2e8f0 !important;
}
body:not(.dark-theme) .leave-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
body:not(.dark-theme) .leave-card-title {
    color: #0f172a !important;
}
body:not(.dark-theme) .leave-card-sub {
    color: #64748b !important;
}
body:not(.dark-theme) .leave-policy-content {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
body:not(.dark-theme) .leave-policy-content h4 {
    color: #4338ca !important;
}
body:not(.dark-theme) .leave-radio-option {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .leave-radio-option:hover {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}
body:not(.dark-theme) .leave-subpage-header,
body:not(.dark-theme) .leave-subpage-footer {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
body:not(.dark-theme) .leave-confirm-box {
    background: rgba(99, 102, 241, 0.06) !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
}
body:not(.dark-theme) .leave-confirm-title {
    color: #312e81 !important;
}
body:not(.dark-theme) .leave-confirm-text {
    color: #1e293b !important;
}
/* Bước 4 (Xác nhận): các ô dùng màu chữ sáng của theme tối -> đổi sang tông đậm cho light */
body:not(.dark-theme) .leave-name-rule-guide {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #92400e !important;
}
body:not(.dark-theme) .leave-name-rule-code {
    background: #fef3c7 !important;
    color: #92400e !important;
}
body:not(.dark-theme) .leave-name-rule-example {
    color: #047857 !important;
}
body:not(.dark-theme) #leave-upload-required-notice {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #92400e !important;
}
body:not(.dark-theme) .leave-admin-email-btn {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #92400e !important;
}
body:not(.dark-theme) #leave-file-preview-card {
    background: #f8fafc !important;
}

/* 11. Global Card Variable Mapping */
:root {
    --bg-card: var(--surface);
}
body:not(.dark-theme) {
    --bg-card: #ffffff;
}
body.dark-theme {
    --bg-card: #141926;
}


/* ================================================================
   13. LSA MUSIC WIDGET — LIGHT MODE
   The radio widget is authored white-on-dark through inline styles,
   so in the light theme it stayed a dark slab inside a bright
   sidebar. Light mode remaps it to a light card (background, ink,
   seek track, switch, DJ panels); the dark theme keeps its original
   look because the --radio-track fallbacks still resolve to the
   authored translucent white.
   ================================================================ */
body:not(.dark-theme) .lsa-music-card {
    --radio-track: rgba(15, 23, 42, 0.16);
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 26px -18px rgba(15, 23, 42, 0.3) !important;
}

/* 13.1  The blurred album cover becomes a pastel light-wash. */
body:not(.dark-theme) .lsa-music-card #radio-bg-blur {
    filter: blur(28px) brightness(1.5) saturate(1.2) !important;
    opacity: 0.5 !important;
}

/* 13.2  Ink: labels + track meta. */
body:not(.dark-theme) .lsa-music-card #radio-header-title,
body:not(.dark-theme) .lsa-music-card #radio-dj-label {
    color: #64748b !important;
}
body:not(.dark-theme) .lsa-music-card #radio-track-name {
    color: #0f172a !important;
    text-shadow: none !important;
}
body:not(.dark-theme) .lsa-music-card #radio-dj-name {
    color: #475569 !important;
    text-shadow: none !important;
}
body:not(.dark-theme) .lsa-music-card #radio-next-track {
    color: #64748b !important;
}
body:not(.dark-theme) .lsa-music-card #radio-video-toggle,
body:not(.dark-theme) .lsa-music-card #radio-video-popout-icon {
    color: #94a3b8 !important;
}
body:not(.dark-theme) .lsa-music-card #radio-video-toggle:hover,
body:not(.dark-theme) .lsa-music-card #radio-video-popout-icon:hover {
    color: #334155 !important;
}

/* 13.3  Transport controls (play button keeps its indigo disc). */
body:not(.dark-theme) .lsa-music-card .radio-ctrl-btn,
body:not(.dark-theme) .lsa-music-card #radio-volume-btn {
    color: #334155 !important;
}
body:not(.dark-theme) .lsa-music-card #radio-volume-btn:hover {
    color: #0f172a !important;
}
body:not(.dark-theme) .lsa-music-card #radio-time-current,
body:not(.dark-theme) .lsa-music-card #radio-time-total,
body:not(.dark-theme) .lsa-music-card #radio-volume-label {
    color: #475569 !important;
}

/* 13.4  Mute state keeps its red accent in both themes. */
.lsa-music-card #radio-volume-label.is-muted,
.lsa-music-card #radio-volume-btn.is-muted {
    color: #ef4444 !important;
}
body:not(.dark-theme) .lsa-music-card #radio-volume-label.is-muted,
body:not(.dark-theme) .lsa-music-card #radio-volume-btn.is-muted {
    color: #dc2626 !important;
}

/* 13.5  DJ switch: light track, iOS green when engaged. */
body:not(.dark-theme) .lsa-music-card .switch .slider {
    background-color: rgba(15, 23, 42, 0.16) !important;
}
body:not(.dark-theme) .lsa-music-card .switch input:checked + .slider {
    background-color: #34c759 !important;
}

/* 13.6  Sliders. */
body:not(.dark-theme) .lsa-music-card #radio-progress::-webkit-slider-runnable-track {
    background: rgba(15, 23, 42, 0.14) !important;
}
body:not(.dark-theme) .lsa-music-card #radio-progress:hover::-webkit-slider-runnable-track {
    background: rgba(15, 23, 42, 0.24) !important;
}
body:not(.dark-theme) .lsa-music-card #radio-progress::-webkit-slider-thumb {
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35), 0 0 5px rgba(99, 102, 241, 0.45) !important;
}
body:not(.dark-theme) .lsa-music-card #radio-progress[disabled]::-webkit-slider-thumb {
    background: #94a3b8 !important;
    box-shadow: none !important;
}
body:not(.dark-theme) .lsa-music-card #radio-volume-slider::-webkit-slider-thumb,
body:not(.dark-theme) .lsa-music-card #radio-volume-slider::-moz-range-thumb {
    background: #ffffff !important;
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.35), 0 0 4px rgba(99, 102, 241, 0.45) !important;
}

/* 13.7  DJ-only inputs (DJ panel appears only for the DJ). */
body:not(.dark-theme) .lsa-music-card #radio-yt-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
body:not(.dark-theme) .lsa-music-card #radio-yt-input::placeholder {
    color: #94a3b8 !important;
}
body:not(.dark-theme) .lsa-music-card .radio-mini-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
body:not(.dark-theme) .lsa-music-card .radio-mini-btn:hover {
    background: #e2e8f0 !important;
}
body:not(.dark-theme) .lsa-music-card #radio-mixing-label span {
    color: #dc2626 !important;
}

/* 13.8  DJ-only rows (toggle labels + queue) and the "+N" listener chip. */
body:not(.dark-theme) .lsa-music-card .dj-toggle-label {
    color: #475569 !important;
}
body:not(.dark-theme) .lsa-music-card #radio-queue-list .queue-empty {
    color: #64748b !important;
}
body:not(.dark-theme) .lsa-music-card #radio-queue-list .queue-item {
    background: rgba(15, 23, 42, 0.05) !important;
}
body:not(.dark-theme) .lsa-music-card #radio-queue-list .queue-item-title {
    color: #1e293b !important;
}
body:not(.dark-theme) .lsa-music-card #radio-queue-list .queue-drag-handle {
    color: #94a3b8 !important;
}
body:not(.dark-theme) .lsa-music-card #radio-queue-list .queue-remove-btn {
    color: #ef4444 !important;
}
body:not(.dark-theme) .lsa-music-card .radio-listener-more {
    background: rgba(15, 23, 42, 0.12) !important;
    color: #334155 !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

/* ===================== INLINE LOGTIME HISTORY (dưới form logtime) ===================== */
/* Cho khối logtime giãn dài theo nội dung (không cuộn nội bộ) */
.task-side-col {
    height: auto;
}
.task-side-col .task-page-logtime-card,
.task-side-col .time-tracker-box {
    flex: 0 0 auto !important;
    overflow: visible;
}
.task-side-col .tracker-history-list {
    max-height: 300px;
    overflow-y: auto;
}
.logtime-history-inline {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.logtime-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.logtime-history-title {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.logtime-history-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.logtime-history-total {
    font-size: 0.74rem;
    font-weight: 800;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.logtime-history-count {
    font-size: 0.72rem;
    color: var(--text-3);
    white-space: nowrap;
}
.logtime-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.logtime-history-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.logtime-history-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(99, 102, 241, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.logtime-history-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.logtime-history-card-date {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text);
}
.logtime-history-card-hours {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 0.86rem;
    color: #3b82f6;
    white-space: nowrap;
}
.logtime-history-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.logtime-history-field {
    font-size: 0.76rem;
    color: var(--text);
    overflow-wrap: anywhere;
}
.logtime-history-field b {
    color: var(--text-3);
    font-weight: 700;
    margin-right: 4px;
}
.logtime-history-field.full {
    flex-basis: 100%;
}
.logtime-history-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.14);
    font-weight: 600;
    font-size: 0.74rem;
}
.logtime-history-empty {
    font-size: 0.8rem;
    color: var(--text-3);
    font-style: italic;
    text-align: center;
    padding: 8px 0;
    opacity: 0.7;
}
.logtime-report-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(16, 185, 129, 0.45);
}
.logtime-report-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #10b981;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: all;
}
.logtime-report-copy {
    flex-shrink: 0;
    border: 1px solid rgba(16, 185, 129, 0.5);
    background: transparent;
    color: #10b981;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.logtime-report-copy:hover {
    background: rgba(16, 185, 129, 0.15);
}
body:not(.dark-theme) .logtime-report-line {
    background: rgba(16, 185, 129, 0.08);
}

/* ===================== ROLE PAGE: AVATAR + NÚT XÓA THÀNH VIÊN ===================== */
.role-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
}
.role-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.role-delete-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    cursor: pointer;
    transition: all 0.15s ease;
}
.role-delete-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.6);
}
.role-delete-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
body:not(.dark-theme) .role-delete-btn {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.06);
}
body:not(.dark-theme) .role-delete-btn:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.55);
}

/* ===================== ADD MEMBER MODAL ===================== */
.am-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 100200;
}
.am-overlay.open { opacity: 1; visibility: visible; }

.am-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(.97);
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 100201;
    overflow: hidden;
}
.am-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.am-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.am-head-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.am-head-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
    font-size: 1rem;
}
.am-head-title h3 { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--text); }
.am-head-title p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-3); }
.am-close {
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 1rem;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s ease;
}
.am-close:hover { background: var(--surface-2); color: var(--text); }

.am-body {
    padding: 18px 20px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.am-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.am-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.am-span2 { grid-column: 1 / -1; }
.am-label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.am-label b { color: #ef4444; }
.am-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--bg-page);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.am-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
.am-input::placeholder { color: var(--text-3); opacity: .75; }

.am-error {
    margin: 14px 0 4px;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 0.84rem;
    font-weight: 500;
}

.am-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.am-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s ease;
    border: 1px solid transparent;
}
.am-btn:disabled { opacity: .65; cursor: default; }
.am-btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-2);
}
.am-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.am-btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.28);
}
.am-btn-primary:hover { filter: brightness(1.07); }

body:not(.dark-theme) .am-overlay { background: rgba(15, 23, 42, 0.38); }
body:not(.dark-theme) .am-modal { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }

@media (max-width: 560px) {
    .am-grid { grid-template-columns: 1fr; }
    .am-span2 { grid-column: auto; }
    .am-modal { width: calc(100vw - 20px); max-height: calc(100vh - 24px); }
}

/* ---- Avatar: upload từ máy (lưu DB) ---- */
.am-avatar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.am-avatar-preview {
    position: relative;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.am-avatar-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.am-avatar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.am-hint { font-size: 0.75rem; color: var(--text-3); flex-basis: 100%; }
.am-btn-sm { padding: 7px 12px; font-size: 0.82rem; }

.role-avatar.clickable { cursor: pointer; }
.role-avatar.clickable::after {
    content: '\f030';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.58);
    color: #fff;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.role-avatar.clickable:hover::after { opacity: 1; }
.role-avatar.uploading { opacity: .55; }
.role-avatar.uploading::after {
    content: '\f110';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    opacity: 1;
    animation: spin 1s linear infinite;
}

/* ==========================================================================
   TASK DETAIL PAGE v2 (2026-10)
   Mục tiêu: gọn mắt — 1 màu nhấn, không gradient/đổ bóng, mọi bề mặt dùng
   biến theme nên tự đúng ở cả light và dark.
   Phạm vi: .task-page-container (modal task ở dashboard + trang /history)
   ========================================================================== */

.task-page-container {
    --tp-card: var(--surface-card);
    --tp-line: var(--border);
    --tp-line-soft: var(--border-subtle);
    --tp-radius: 12px;
    --tp-radius-sm: 8px;
}

/* ---------- 1. Thanh điều hướng trên cùng ---------- */
.task-page-container .task-page-nav-bar {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--tp-line-soft);
    gap: 12px;
}
.task-page-container .task-page-breadcrumbs {
    font-size: 0.78rem;
    gap: 8px;
}
.task-page-container .task-crumb-root {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-3);
}
.task-page-container .task-crumb-root:hover {
    color: var(--primary);
}
.task-page-container .task-crumb-sep {
    font-size: 0.78rem;
    color: var(--text-4);
}
.task-page-container .task-crumb-current {
    background: transparent;
    color: var(--text-2);
    padding: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}
.task-page-container .task-page-top-actions {
    gap: 6px;
}
.task-page-container .task-page-top-actions .export-project-btn,
.task-page-container .task-page-top-actions .export-btn,
.task-page-container .task-page-close-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--tp-radius-sm);
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    color: var(--text-2);
    box-shadow: none;
}
.task-page-container .task-page-top-actions .export-project-btn:hover,
.task-page-container .task-page-top-actions .export-btn:hover {
    background: var(--surface-hover);
    border-color: var(--tp-line);
    color: var(--text);
    transform: none;
}
.task-page-container .task-page-close-btn:hover {
    background: var(--surface-hover);
    border-color: var(--tp-line);
    color: var(--accent-rose);
    transform: none;
}

/* ---------- 2. Tiêu đề task ---------- */
.task-page-container .task-page-header {
    margin-bottom: 16px;
}
.task-page-container .task-page-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 8px;
}
.task-page-container .task-title-reading {
    font-size: 0.8em;
    font-weight: 400;
    color: var(--text-3);
    letter-spacing: 0;
}
.task-page-container .task-page-worker-row {
    gap: 10px;
}
.task-page-container .task-page-worker-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

/* ---------- 3. Bố cục chung ---------- */
.task-page-container .task-master-layout {
    grid-template-columns: minmax(0, 3fr) minmax(380px, 2fr);
    gap: 18px;
    align-items: start;
    min-height: 0;
    margin-top: 0;
}
.task-page-container .task-main-col {
    gap: 18px;
    height: auto;
}
.task-page-container .task-side-col {
    gap: 18px;
    height: auto;
}

/* Thẻ dùng chung */
.task-page-container .task-links-box,
.task-page-container .checklist-card,
.task-page-container .task-handover-box,
.task-page-container .time-tracker-box,
.task-page-container .task-page-logtime-card {
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius);
    box-shadow: none;
}

/* ---------- 4. Liên kết làm việc ---------- */
.task-page-container .task-links-box {
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
}
.task-page-container .task-links-header {
    padding: 13px 16px 10px;
    margin-bottom: 0;
}
.task-page-container .task-links-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
.task-page-container .task-links-title i {
    display: none;
}
.task-page-container .btn-manage-links {
    background: transparent;
    border: 0;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 2px 0;
    gap: 5px;
}
.task-page-container .btn-manage-links i {
    display: none;
}
.task-page-container .btn-manage-links:hover {
    background: transparent;
    border: 0;
    color: var(--primary-hover);
    transform: none;
}
.task-page-container .task-main-col .task-links-grid {
    gap: 10px;
    padding: 0 16px 14px;
}
.task-page-container .task-link-card {
    background: var(--tp-card);
    border: 1px solid var(--tp-line-soft);
    border-radius: var(--tp-radius-sm);
    padding: 12px 14px;
    min-height: 68px;
    color: var(--text);
    transform: none;
    box-shadow: none;
}
.task-page-container .task-link-card:hover {
    background: var(--surface-hover);
    border-color: var(--tp-line);
    transform: none;
    box-shadow: none;
}
/* Bỏ nền màu theo từng tool: giữ màu ở icon, thẻ vẫn trắng */
.task-page-container .task-link-card.mikan,
.task-page-container .task-link-card.notion,
.task-page-container .task-link-card.asana,
.task-page-container .task-link-card.dropbox,
.task-page-container .task-link-card.mikan.empty,
.task-page-container .task-link-card.notion.empty,
.task-page-container .task-link-card.asana.empty,
.task-page-container .task-link-card.dropbox.empty,
.task-page-container .task-link-card.mikan.has-url,
.task-page-container .task-link-card.notion.has-url,
.task-page-container .task-link-card.asana.has-url,
.task-page-container .task-link-card.dropbox.has-url {
    background: var(--tp-card);
    border-color: var(--tp-line-soft);
    color: var(--text);
}
.task-page-container .task-link-card.mikan:hover,
.task-page-container .task-link-card.notion:hover,
.task-page-container .task-link-card.asana:hover,
.task-page-container .task-link-card.dropbox:hover {
    background: var(--surface-hover);
    border-color: var(--tp-line);
}
.task-page-container .task-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1rem;
    background: var(--surface-hover);
    color: var(--text-2);
}
.task-page-container .task-link-card:hover .task-link-icon {
    transform: none;
}
.task-page-container .task-link-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
}
.task-page-container .task-link-status {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-3);
    opacity: 1;
    margin-top: 3px;
}
.task-page-container .task-link-card.has-url .task-link-status {
    color: var(--primary);
}
.task-page-container .task-link-edit-btn {
    top: 4px;
    right: 4px;
    background: var(--surface-hover);
    color: var(--text-3);
    border-radius: 5px;
    opacity: 0;
}
.task-page-container .task-link-card:hover .task-link-edit-btn {
    opacity: 1;
}
.task-page-container .task-link-edit-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: none;
}
.task-page-container .task-link-card.mikan .task-link-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}
.task-page-container .task-link-card.notion .task-link-icon {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}
.task-page-container .task-link-card.asana .task-link-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}
.task-page-container .task-link-card.dropbox .task-link-icon {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
body.dark-theme .task-page-container .task-link-card.mikan .task-link-icon {
    color: #fbbf24;
}
body.dark-theme .task-page-container .task-link-card.notion .task-link-icon {
    color: #94a3b8;
}
body.dark-theme .task-page-container .task-link-card.asana .task-link-icon {
    color: #f87171;
}
body.dark-theme .task-page-container .task-link-card.dropbox .task-link-icon {
    color: #60a5fa;
}

/* ---------- 5. Checklist ---------- */
.task-page-container .checklist-card {
    margin-bottom: 0;
    overflow: hidden;
}
.task-page-container .checklist-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px 10px;
}
.task-page-container .checklist-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.task-page-container .checklist-total {
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.task-page-container .checklist-card-bar {
    height: 2px;
    background: var(--tp-line-soft);
    margin: 0 16px;
    border-radius: 2px;
    overflow: hidden;
}
.task-page-container .checklist-card-bar i {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.task-page-container .checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.task-page-container .step-col {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 18px 16px;
    min-width: 0;
}
.task-page-container .step-col + .step-col {
    border-left: 1px solid var(--tp-line-soft);
}
.task-page-container .step-col:hover {
    border-color: var(--tp-line-soft);
}
.task-page-container .step-header {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.task-page-container .step-badge-wrap {
    align-items: flex-start;
    gap: 8px;
}
.task-page-container .step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--tp-line);
    color: var(--text-3);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
}
.task-page-container .step-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--text);
}
.task-page-container .step-sub {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-3);
    margin-top: 2px;
}
.task-page-container .step-count {
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 2px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.task-page-container .step-count.complete {
    background: transparent;
    border: 0;
    color: #0f9d76;
}
body.dark-theme .task-page-container .step-count.complete {
    color: #34d399;
}
.task-page-container .step-progress-bar {
    display: none;
}
.task-page-container .step-items {
    gap: 0;
    flex: 1;
}
.task-page-container .task-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
}
.task-page-container .task-row:hover {
    background: transparent;
    border: 0;
}
.task-page-container .task-row .platform-badge {
    width: 74px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    flex-shrink: 0;
}
/* Light theme: badge màu như bản cũ (dark theme dùng màu gốc bên dưới) */
body:not(.dark-theme) .task-page-container .task-row .platform-badge.notion {
    background: #eef1f6;
    color: #334155;
    border: 1px solid #dbe3ec;
}
body:not(.dark-theme) .task-page-container .task-row .platform-badge.sheet {
    background: rgba(5, 150, 105, 0.14);
    color: #047857;
    border: 1px solid rgba(5, 150, 105, 0.36);
}
body:not(.dark-theme) .task-page-container .task-row .platform-badge.asana {
    background: rgba(190, 18, 60, 0.13);
    color: #be123c;
    border: 1px solid rgba(190, 18, 60, 0.34);
}
body:not(.dark-theme) .task-page-container .task-row .platform-badge.mikan {
    background: rgba(180, 83, 9, 0.14);
    color: #92400e;
    border: 1px solid rgba(180, 83, 9, 0.36);
}
.task-page-container .check-label {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
}
.task-page-container .check-label input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    border-radius: 4px;
}
.task-page-container .check-label .checkmark {
    display: none;
}
.task-page-container .check-label input:checked ~ .action-text {
    color: var(--text-4);
    opacity: 1;
    text-decoration: line-through;
    text-decoration-color: var(--text-4);
}
.task-page-container .ask-task-accordion {
    margin: 1px 0 1px 84px;
}
.task-page-container .ask-task-trigger {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 2px 0;
    color: var(--text-3);
    font-size: 0.82rem;
    font-weight: 600;
    gap: 5px;
}
.task-page-container .ask-task-trigger:hover {
    background: transparent;
    border: 0;
    color: var(--primary);
}
.task-page-container .ask-task-trigger .arrow-icon {
    font-size: 0.55rem;
    color: var(--text-4);
}
.task-page-container .ask-task-panel {
    margin-top: 6px;
}
.task-page-container .msg-template-card,
.task-page-container .msg-template-card.nested {
    margin: 6px 0 6px 84px;
    background: var(--bg-page);
    border: 1px solid var(--tp-line-soft);
    border-radius: var(--tp-radius-sm);
    box-shadow: none;
    padding: 9px 11px;
}
.task-page-container .msg-template-card:hover {
    background: var(--bg-page);
    border-color: var(--tp-line);
}
.task-page-container .ask-task-panel .msg-template-card,
.task-page-container .ask-task-panel .msg-template-card.nested {
    margin-left: 0;
}
.task-page-container .msg-template-header {
    margin-bottom: 5px;
}.task-page-container .msg-template-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0;
}
.task-page-container .msg-template-label i {
    color: var(--text-4);
}
.task-page-container .msg-template-body {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-2);
    opacity: 1;
}
.task-page-container .btn-copy-action {
    background: transparent;
    border: 1px solid var(--tp-line);
    border-radius: 6px;
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 7px;
    gap: 4px;
}
.task-page-container .btn-copy-action:hover {
    background: var(--surface-hover);
    border-color: var(--tp-line);
    color: var(--text);
}
.task-page-container .step-hint-box {
    margin-top: auto;
    background: transparent;
    border: 0;
    border-top: 1px dashed var(--tp-line-soft);
    border-radius: 0;
    padding: 9px 0 0;
    font-size: 0.82rem;
    color: var(--text-3);
    gap: 7px;
    line-height: 1.45;
}
.task-page-container .step-hint-box i {
    color: var(--text-4);
    font-size: 0.7rem;
    margin-top: 1px;
}

/* Mẫu tin nhắn giao hàng: full width dưới 3 giai đoạn */
.task-page-container .checklist-deliver {
    padding: 2px 16px 14px;
}
.task-page-container .checklist-deliver .msg-template-card,
.task-page-container .checklist-deliver .msg-template-card:hover {
    margin: 0;
}

/* ---------- 6. Comment / bàn giao ---------- */
.task-page-container .task-handover-box {
    padding: 0;
    gap: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}
.task-page-container .handover-header {
    padding: 13px 16px 0;
}
.task-page-container .handover-title-row {
    gap: 10px;
}
.task-page-container .handover-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.task-page-container .handover-title i {
    color: var(--text-4);
    margin-right: 6px !important;
}
.task-page-container .handover-volume-name {
    color: var(--text-2);
    font-weight: 600;
    margin-left: 4px;
}
.task-page-container .handover-partner-badge {
    font-size: 0.82rem;
    color: var(--text-2);
    background: var(--surface-hover);
    border: 1px solid var(--tp-line-soft);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}
.task-page-container .handover-body {
    gap: 0;
}
.task-page-container .quick-handover-actions {
    padding: 10px 16px 0;
    gap: 6px;
}
.task-page-container .quick-handover-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-3);
}
.task-page-container .btn-quick-tag {
    background: transparent;
    border: 1px solid var(--tp-line);
    border-radius: 6px;
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 3px 10px;
}
.task-page-container .btn-quick-tag:hover {
    background: var(--surface-hover);
    border-color: var(--tp-line);
    color: var(--text);
}
.task-page-container .btn-quick-tag.done-retouch,
.task-page-container .btn-quick-tag.in-progress,
.task-page-container .btn-quick-tag.note {
    background: transparent;
    border-color: var(--tp-line);
    color: var(--text-2);
}
.task-page-container .btn-quick-tag.done-retouch:hover,
.task-page-container .btn-quick-tag.in-progress:hover,
.task-page-container .btn-quick-tag.note:hover {
    background: var(--surface-hover);
    border-color: var(--tp-line);
    color: var(--text);
}
.task-page-container .handover-comments-list {
    margin: 8px 0 0;
    padding: 0 16px;
    max-height: none;
    min-height: 0;
    overflow: visible;
    gap: 0;
}
.task-page-container .handover-comment-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--tp-line-soft);
    border-radius: 0;
    padding: 11px 0;
    gap: 9px;
}
.task-page-container .handover-comment-item:hover {
    background: transparent;
    border-color: var(--tp-line-soft);
}
.task-page-container .comment-avatar-img {
    width: 26px;
    height: 26px;
    border: 0;
}
.task-page-container .comment-avatar-fallback {
    width: 26px;
    height: 26px;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.7rem;
}
.task-page-container .comment-meta {
    gap: 7px;
    margin-bottom: 2px;
}
.task-page-container .comment-user {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}
.task-page-container .comment-tag,
.task-page-container .comment-tag.handover,
.task-page-container .comment-tag.progress,
.task-page-container .comment-tag.warning {
    background: var(--surface-hover);
    color: var(--text-2);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 5px;
}
.task-page-container .comment-time {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-left: auto;
}
.task-page-container .comment-text {
    font-size: 0.95rem;
    color: var(--text-2);
    line-height: 1.5;
}
.task-page-container .comment-psd-badge {
    background: var(--surface-hover);
    border: 0;
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 1px 6px;
}
.task-page-container .btn-delete-comment {
    color: var(--text-3);
    opacity: 1;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 5px;
}
.task-page-container .handover-comment-item:hover .btn-delete-comment {
    opacity: 1;
}
.task-page-container .btn-delete-comment:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-rose);
    transform: none;
}
.task-page-container .handover-empty {
    color: var(--text-3);
    font-style: normal;
    font-size: 0.85rem;
}
.task-page-container .handover-input-container {
    margin: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--tp-line-soft);
    gap: 6px;
}
.task-page-container .handover-count-bar {
    background: var(--primary-bg);
    border: 0;
    border-radius: 6px;
    padding: 4px 9px;
}
.task-page-container .handover-count-bar .count-badge {
    color: var(--primary);
    font-size: 0.72rem;
}
.task-page-container .handover-count-bar .count-hint {
    font-size: 0.68rem;
    color: var(--text-3);
    font-style: normal;
}
.task-page-container .handover-input {
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    padding: 8px 11px;
    min-height: 40px;
}
.task-page-container .handover-input::placeholder {
    color: var(--text-4);
}
.task-page-container .handover-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-bg);
}
.task-page-container .btn-handover-send {
    background: var(--primary);
    border-radius: var(--tp-radius-sm);
    height: 40px;
    padding: 0 16px;
    font-size: 0.92rem;
    font-weight: 600;
}
.task-page-container .btn-handover-send:hover {
    background: var(--primary-hover);
    transform: none;
}

/* ---------- 7. Sidebar: theo dõi thời gian ---------- */
.task-page-container .time-tracker-box,
.task-page-container .task-page-logtime-card {
    padding: 0;
    overflow: hidden;
    gap: 0;
    height: auto;
}
.task-page-container .time-tracker-box::before {
    display: none;
}
.task-page-container .tracker-header {
    padding: 14px 16px 2px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.task-page-container .tracker-header label {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.task-page-container .tracker-header label input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--primary);
}
.task-page-container .tracker-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 0;
    margin: 0;
}
.task-page-container .tracker-time {
    order: -1;
    flex: 0 0 100%;
    background: transparent;
    border: 0;
    padding: 0 0 2px;
    text-align: left;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--text);
    text-shadow: none;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.task-page-container .btn-tracker {
    flex: 1 1 0;
    padding: 10px 16px;
    border-radius: var(--tp-radius-sm);
    border: 1px solid var(--tp-line);
    background: transparent;
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 600;
    box-shadow: none;
    transform: none;
}
.task-page-container .btn-tracker.start {
    background: var(--primary-bg);
    border-color: transparent;
    color: var(--primary);
}
.task-page-container .btn-tracker.start:hover {
    background: var(--primary-bg);
    border-color: transparent;
    color: var(--primary);
    transform: none;
    box-shadow: none;
}
.task-page-container .btn-tracker.end {
    background: transparent;
    border-color: var(--tp-line);
    color: var(--text-2);
}
.task-page-container .btn-tracker.end:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--tp-line);
    color: var(--text);
    transform: none;
    box-shadow: none;
}
.task-page-container .btn-tracker.end:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.task-page-container .tracker-inputs {
    padding: 12px 16px 14px;
    gap: 8px;
    margin: 0;
}
.task-page-container .tracker-note {
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-sm);
    color: var(--text);
    font-size: 1rem;
    padding: 9px 12px;
}
.task-page-container .tracker-note::placeholder {
    color: var(--text-4);
}
.task-page-container .tracker-note:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-bg);
    background: var(--tp-card);
}
.task-page-container .btn-tracker.save {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--tp-line);
    color: var(--text-2);
    font-size: 1rem;
    padding: 9px 16px;
}
.task-page-container .btn-tracker.save:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--tp-line);
    transform: none;
}
.task-page-container .tracker-history-section {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--tp-line-soft);
}
.task-page-container .tracker-history-header {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 8px;
}
.task-page-container .tracker-history-list {
    gap: 6px;
    min-height: 0;
    max-height: 300px;
    overflow-y: auto;
}
.task-page-container .tracker-history-item {
    background: var(--tp-card);
    border: 1px solid var(--tp-line-soft);
    border-radius: var(--tp-radius-sm);
    padding: 8px 11px;
}
.task-page-container .tracker-history-note {
    font-size: 0.95rem;
    color: var(--text);
}
.task-page-container .tracker-history-time {
    font-size: 0.85rem;
    color: var(--text-3);
}
.task-page-container .tracker-history-dur {
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
}
.task-page-container .tracker-history-empty {
    color: var(--text-3);
    font-style: normal;
    opacity: 1;
    font-size: 0.9rem;
    padding: 8px 0;
}

/* ---------- 8. Sidebar: nhập logtime ---------- */
.task-page-container .task-page-logtime-header {
    padding: 13px 16px 10px;
    margin: 0;
    border-bottom: 1px solid var(--tp-line-soft);
}
.task-page-container .task-page-logtime-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    gap: 7px;
}
.task-page-container .logtime-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}
.task-page-container .task-page-logtime-card .logtime-form {
    padding: 12px 16px 14px;
    border: 0;
}
.task-page-container .task-page-logtime-card .logtime-form form {
    gap: 0;
}
.task-page-container .form-row.cols-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 0;
}
.task-page-container .task-page-logtime-card .logtime-form form > .form-row + .form-row {
    margin-top: 10px !important;
}
.task-page-container .task-side-col .form-group {
    gap: 4px;
}
.task-page-container .form-group label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0;
}
.task-page-container .form-group label span {
    color: var(--accent-rose) !important;
    margin-left: 2px;
}
.task-page-container .form-group select,
.task-page-container .form-group input {
    width: 100%;
    height: 44px;
    padding: 0 11px;
    background: var(--tp-card);
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius-sm);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}
.task-page-container .form-group select:focus,
.task-page-container .form-group input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--tp-card);
    box-shadow: 0 0 0 2px var(--primary-bg);
}
.task-page-container .logtime-submit-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px !important;
    padding-top: 0;
}
.task-page-container .logtime-submit-row > button {
    min-width: 0 !important;
    width: auto !important;
    height: 44px;
    padding: 0 16px !important;
    border-radius: var(--tp-radius-sm) !important;
    font-size: 1rem !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent !important;
    border: 1px solid var(--tp-line) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
}
.task-page-container .logtime-submit-row > button:hover {
    background: var(--surface-hover) !important;
    transform: none !important;
}
.task-page-container .logtime-submit-row > .btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    padding: 0 20px !important;
}
.task-page-container .logtime-submit-row > .btn-primary:hover {
    background: var(--primary-hover) !important;
}
.task-page-container .logtime-history-inline {
    margin: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--tp-line-soft);
    gap: 8px;
}
.task-page-container .logtime-history-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-2);
}
.task-page-container .logtime-history-total {
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 2px 8px;
}
.task-page-container .logtime-history-count {
    font-size: 0.82rem;
    color: var(--text-3);
}
.task-page-container .logtime-history-card {
    background: var(--tp-card);
    border: 1px solid var(--tp-line-soft);
    border-radius: var(--tp-radius-sm);
    padding: 9px 11px;
}
.task-page-container .logtime-history-card-date {
    font-size: 1rem;
}
.task-page-container .logtime-history-card-hours {
    font-size: 1rem;
}
.task-page-container .logtime-history-field {
    font-size: 0.92rem;
}
.task-page-container .logtime-history-pill {
    font-size: 0.88rem;
}
.task-page-container .logtime-history-empty {
    font-size: 0.9rem;
}
.task-page-container .logtime-history-card-hours {
    color: var(--primary);
}
.task-page-container .logtime-history-field b {
    color: var(--text-3);
}
.task-page-container .logtime-report-line {
    margin-top: 0;
    padding: 8px 10px;
    border-radius: var(--tp-radius-sm);
    background: rgba(16, 185, 129, 0.07);
    border: 1px dashed rgba(16, 185, 129, 0.4);
}
.task-page-container .logtime-report-text {
    font-size: 1rem;
    color: #0f9d76;
}
body.dark-theme .task-page-container .logtime-report-text {
    color: #34d399;
}
.task-page-container .logtime-report-copy {
    border: 1px solid rgba(16, 185, 129, 0.42);
    color: #0f9d76;
    border-radius: 6px;
    padding: 4px 7px;
}
body.dark-theme .task-page-container .logtime-report-copy {
    color: #34d399;
}
.task-page-container .logtime-report-copy:hover {
    background: rgba(16, 185, 129, 0.12);
}

/* ---------- 9. Responsive ---------- */
@media (max-width: 1280px) {
    .task-page-container .task-master-layout { grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr); }
}
@media (max-width: 1100px) {
    .task-page-container .task-master-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .task-page-container .checklist-grid { grid-template-columns: 1fr; }
    .task-page-container .step-col + .step-col { border-left: 0; border-top: 1px solid var(--tp-line-soft); }
    .task-page-container .ask-task-accordion,
    .task-page-container .msg-template-card,
    .task-page-container .msg-template-card.nested { margin-left: 0; }
}
@media (max-width: 640px) {
    .task-page-container { padding: 14px 14px 60px; }
    .task-page-container .task-page-main-title { font-size: 1.2rem; }
    .task-page-container .task-main-col .task-links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   TASK LINKS MODAL v2 + CONFIRM DIALOG (2026-10)
   Cùng ngôn ngữ thiết kế với trang Task: 1 màu nhấn, viền 1px, không gradient.
   ========================================================================== */

/* ---------- 1. Modal "Liên kết công việc" ---------- */
#edit-task-links-modal.task-links-modal-overlay {
    background: rgba(9, 13, 22, 0.48);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 20px;
}
#edit-task-links-modal .task-links-modal-card {
    max-width: 540px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 60px -24px rgba(9, 13, 22, 0.45);
}
#edit-task-links-modal .task-links-modal-header {
    padding: 16px 20px 14px;
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
}
#edit-task-links-modal .task-links-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary-bg);
    color: var(--primary);
    font-size: 0.9rem;
}
#edit-task-links-modal .task-links-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
#edit-task-links-modal .task-links-modal-subtitle {
    font-size: 0.82rem;
    color: var(--text-3);
    margin-top: 3px;
}
#edit-task-links-modal .btn-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
#edit-task-links-modal .btn-modal-close:hover {
    background: var(--surface-hover);
    color: var(--text);
}
#edit-task-links-modal .task-links-modal-body {
    padding: 18px 20px;
    gap: 16px;
}
#edit-task-links-modal .task-link-input-group {
    gap: 7px;
}
#edit-task-links-modal .task-link-input-group label {
    font-size: 0.86rem;
    gap: 12px;
}
#edit-task-links-modal .tool-badge {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    gap: 6px;
}
#edit-task-links-modal .input-hint {
    font-size: 0.82rem;
    color: var(--text-3);
    text-align: right;
}
#edit-task-links-modal .input-with-icon {
    position: relative;
}
#edit-task-links-modal .task-link-input {
    width: 100%;
    height: 42px;
    padding: 0 44px 0 12px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
}
#edit-task-links-modal .task-link-input::placeholder {
    color: var(--text-4);
}
#edit-task-links-modal .task-link-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface-card);
    box-shadow: 0 0 0 3px var(--primary-bg);
}
#edit-task-links-modal .btn-paste-link {
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: var(--text-3);
    font-size: 0.82rem;
}
#edit-task-links-modal .btn-paste-link:hover {
    background: var(--surface-hover);
    color: var(--primary);
}
#edit-task-links-modal .task-links-modal-footer {
    padding: 14px 20px;
    background: transparent;
    border-top: 1px solid var(--border-subtle);
    gap: 8px;
}
#edit-task-links-modal .btn-links-cancel {
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font-size: 0.92rem;
    font-weight: 600;
}
#edit-task-links-modal .btn-links-cancel:hover {
    background: var(--surface-hover);
    color: var(--text);
}
#edit-task-links-modal .btn-links-save {
    height: 38px;
    padding: 0 18px;
    border-radius: 8px;
    border: 0;
    background: var(--primary);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none;
}
#edit-task-links-modal .btn-links-save:hover {
    background: var(--primary-hover);
    transform: none;
    box-shadow: none;
}

/* Màu badge tool: light = màu đậm, dark = màu sáng */
body:not(.dark-theme) #edit-task-links-modal .tool-badge.mikan  { background: rgba(245, 158, 11, 0.14); color: #b45309; }
body:not(.dark-theme) #edit-task-links-modal .tool-badge.notion { background: #eef1f6; color: #334155; }
body:not(.dark-theme) #edit-task-links-modal .tool-badge.asana  { background: rgba(190, 18, 60, 0.12); color: #be123c; }
body:not(.dark-theme) #edit-task-links-modal .tool-badge.dropbox{ background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
body.dark-theme #edit-task-links-modal .tool-badge.mikan  { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
body.dark-theme #edit-task-links-modal .tool-badge.notion { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
body.dark-theme #edit-task-links-modal .tool-badge.asana  { background: rgba(244, 63, 94, 0.12); color: #fb7185; }
body.dark-theme #edit-task-links-modal .tool-badge.dropbox{ background: rgba(59, 130, 246, 0.14); color: #93c5fd; }

/* ---------- 2. Hộp thoại xác nhận dùng chung ---------- */
.vn-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(9, 13, 22, 0.48);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: vnFadeIn 0.16s ease;
}
.vn-confirm-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 24px 60px -24px rgba(9, 13, 22, 0.45);
    animation: vnZoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.vn-confirm-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vn-confirm-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.vn-confirm-icon.safe {
    background: var(--primary-bg);
    color: var(--primary);
}
.vn-confirm-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}
.vn-confirm-msg {
    font-size: 0.95rem;
    color: var(--text-2);
    line-height: 1.5;
    margin-top: 4px;
}
.vn-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.vn-confirm-btn {
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}
.vn-confirm-btn.cancel {
    background: transparent;
    border-color: var(--border);
    color: var(--text-2);
}
.vn-confirm-btn.cancel:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.vn-confirm-btn.danger {
    background: #ef4444;
    color: #fff;
}
.vn-confirm-btn.danger:hover {
    background: #dc2626;
}
.vn-confirm-btn.primary {
    background: var(--primary);
    color: #fff;
}
.vn-confirm-btn.primary:hover {
    background: var(--primary-hover);
}
@keyframes vnFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vnZoomIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
    #edit-task-links-modal .task-links-modal-card { max-width: 100%; }
    .vn-confirm-card { max-width: 100%; }
}

/* ================= Mềm hoá select trong form Logtime ================= */
/* Mũi tên tự vẽ (bỏ mũi tên native) — menu xổ xuống do vn-select.js dựng */
.task-page-container .task-page-logtime-card .logtime-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    cursor: pointer;
}
.task-page-container .task-page-logtime-card .logtime-form select.vn-select-open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}
.vn-select-menu {
    position: fixed;
    z-index: 10040;
    box-sizing: border-box;
    padding: 6px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(9, 13, 22, 0.4);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: vnMenuIn 0.14s ease;
}
.vn-select-option {
    position: relative;
    display: block;
    padding: 9px 30px 9px 11px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vn-select-option:hover,
.vn-select-option.active {
    background: var(--surface-hover);
}
.vn-select-option.selected {
    color: var(--primary);
    font-weight: 600;
}
.vn-select-option.selected::after {
    content: "\2713";
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--primary);
}
.vn-select-option.disabled {
    color: var(--text-4);
    cursor: default;
}
.vn-select-option.disabled:hover {
    background: transparent;
}
@keyframes vnMenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}