/* ==========================================================================
   1. GLOBAL RESETS & COMPONENT DESIGN SYSTEM TOKENS
   ========================================================================== */
:root {
    --bg-gradient: linear-gradient(135deg, rgba(7, 13, 25, 0.72), rgba(10, 24, 44, 0.7));
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    --glass-bg-strong: rgba(8, 15, 30, 0.58);
    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-glow: 0 22px 56px rgba(2, 8, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --surface-highlight: rgba(125, 211, 252, 0.16);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    --prio-high: #ef4444;
    --prio-med: #f59e0b;
    --prio-low: #10b981;

    --panel-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(9, 14, 27, 0.92));
    --input-bg: rgba(15, 23, 42, 0.55);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background: var(--bg-gradient), url('Tech-bg.jpg') center/cover no-repeat fixed;
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(7, 13, 25, 0.45), rgba(2, 6, 18, 0.55)), radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 36%);
    pointer-events: none;
    z-index: 0;
}

.portal-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ==========================================================================
   2. SIDEBAR WITH TOOLTIP INTERACTIONS
   ========================================================================== */
.sidebar-nav {
    width: 72px;
    background: linear-gradient(180deg, rgba(10, 17, 32, 0.86), rgba(7, 12, 24, 0.74));
    border-right: 1px solid var(--glass-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    z-index: 10;
    box-shadow: 12px 0 30px rgba(2, 8, 23, 0.22);
}

.nav-top, .nav-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: center;
}

.nav-icon {
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.3rem;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-link:hover .nav-icon, .nav-link.active .nav-icon {
    color: #38bdf8;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(96, 165, 250, 0.12));
    border-color: rgba(125, 211, 252, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(56, 189, 248, 0.18);
}

.nav-icon.logo { color: #f43f5e; margin-bottom: 12px; }

/* Global Interactive Tooltip Engine — a single shared element (created and positioned by
   setupGlobalTooltip() in script.js) rather than a per-element ::after. That's what makes it
   possible to actually keep tooltips on-screen: position:fixed plus JS-computed coordinates
   means it's never clipped by an ancestor's overflow:hidden and never has to guess whether
   it'll run off an edge — every show event recalculates and clamps to the viewport. */
.global-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    background: #0f172a;
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transform: scale(0.85);
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.global-tooltip.visible { opacity: 1; transform: scale(1); }

/* ==========================================================================
   3. WORKSPACE CORE FRAMEWORK & TOP BAR
   ========================================================================== */
.main-workspace { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.top-bar {
    height: 70px;
    background: linear-gradient(90deg, rgba(12, 20, 33, 0.78), rgba(8, 14, 24, 0.66));
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.brand-title {
    font-size: 1.35rem;
    font-weight: 700;
    background: linear-gradient(to right, #ffffff, #9ed7ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bar-right { display: flex; align-items: center; gap: 20px; }
.team-switcher-select { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); font-size: 0.85rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); cursor: pointer; }
.board-search-input { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); font-size: 0.85rem; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); min-width: 160px; }
.board-search-input::placeholder { color: var(--text-secondary); }
.team-switcher-select option { background: #1e293b; color: var(--text-primary); }
.notification-bell-wrap { position: relative; }
.notification-btn { background: none; border: none; color: var(--text-secondary); font-size: 1.25rem; cursor: pointer; position: relative; }
.notification-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; background: #f43f5e; border-radius: 999px; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; color: #fff; line-height: 1; }
.notification-panel {
    position: fixed;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    z-index: 9000;
}
.notification-panel.hidden { display: none; }
.notification-panel-header { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; margin-bottom: 10px; }
.notification-list { display: flex; flex-direction: column; gap: 8px; }
.notification-row { padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 2px; }
.notification-row.notification-row-clickable { cursor: pointer; transition: background 0.15s; }
.notification-row.notification-row-clickable:hover { background: rgba(255,255,255,0.08); }
.notification-details { font-size: 0.82rem; color: var(--text-primary); }
.notification-meta { font-size: 0.7rem; color: var(--text-secondary); }

@keyframes activityHighlightPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
    15%, 65% { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.55); }
}
.activity-highlight-flash { animation: activityHighlightPulse 1.4s ease-in-out 2; border-radius: inherit; }
.user-profile-ctrl { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.08); padding: 6px 14px; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.user-name-display { color: var(--text-primary); font-size: 0.85rem; font-weight: 600; }
.logout-btn-nav { background: transparent; border: none; color: #f43f5e; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.logout-btn-nav:hover { opacity: 0.8; }

/* Settings button + popup panel (bottom-left of sidebar, opens upward/rightward) */
.settings-btn-nav { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, color 0.2s; }
.settings-btn-nav:hover { opacity: 0.8; color: var(--text-primary); }
.settings-panel {
    position: fixed;
    width: 280px;
    max-height: min(480px, calc(100vh - 40px));
    overflow-y: auto;
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-panel.hidden { display: none; }
.settings-panel-item {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}
.settings-panel-item i { width: 16px; text-align: center; color: var(--text-secondary); }
.settings-panel-item:hover { background: rgba(255, 255, 255, 0.06); }
.settings-panel-item.disabled { opacity: 0.45; cursor: default; }
.settings-panel-item.disabled:hover { background: transparent; }
.settings-panel-item.active-client { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }
.settings-panel-item.active-client i { color: #7dd3fc; }
.settings-theme-row { cursor: default; justify-content: space-between; }
.settings-theme-row .settings-row-label { display: flex; align-items: center; gap: 12px; }
.settings-panel-divider { height: 1px; background: var(--glass-border); margin: 4px 6px; }
.task-modal-divider { height: 1px; background: var(--glass-border); margin: 4px 24px 20px; }

.theme-toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.theme-toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.theme-toggle-switch .track { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.14); border: 1px solid var(--glass-border); border-radius: 999px; transition: background 0.2s ease; }
.theme-toggle-switch .track::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 0.2s ease; }
.theme-toggle-switch input:checked + .track { background: rgba(56, 189, 248, 0.55); }
.theme-toggle-switch input:checked + .track::before { transform: translateX(16px); }

/* Account Settings modal avatar picker */
.account-avatar-picker { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; }
.account-avatar-preview, .account-avatar-placeholder {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--glass-border); background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #38bdf8;
}

.view-content { flex: 1; padding: 32px; overflow: hidden; }
.page-view { height: 100%; width: 100%; }

/* ==========================================================================
   4. HOME PAGE GRID SYMMETRY (Proportional Fill)
   ========================================================================== */
.portal-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    height: 100%;
}

.dashboard-stack-third {
    grid-column: span 4;
    grid-row: span 2; 
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.dashboard-stack-third .glass-window {
    flex: 1;
    height: calc(50% - 12px);
}

.dashboard-stack-two-thirds {
    grid-column: span 8;
    height: 100%;
}

.dashboard-bottom-row-split {
    grid-column: span 8;
    display: grid;
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
    gap: 24px;
    height: 100%;
}

.dashboard-social-card, .dashboard-analytics-card {
    min-width: 0;
}

.glass-window {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-glow);
    border-radius: 18px;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.glass-window::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 45%, rgba(255,255,255,0.04));
    pointer-events: none;
}

.window-header { padding: 20px 24px; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.header-title { display: flex; align-items: center; gap: 12px; }
.header-title h3 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.window-body { padding: 20px 24px; flex: 1; overflow-y: auto; }

.action-circle-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border);
    color: var(--text-secondary); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s;
}
.action-circle-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); }
.action-circle-btn.danger-circle-btn { color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.action-circle-btn.danger-circle-btn:hover { color: #fca5a5; background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.45); }
.action-circle-btn.hidden { display: none; }

/* General Glass list item blocks */
.scrollable-list { display: flex; flex-direction: column; gap: 8px; }
.glass-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.glass-item:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)); }
.comms-channel-delete-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.glass-item:hover .comms-channel-delete-btn { display: flex; }
.comms-channel-delete-btn:hover { background: rgba(239, 68, 68, 0.3); }
.item-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 1.15rem; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; }
.item-icon i { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); }
.file-pdf { color: #fca5a5; background: rgba(248, 113, 113, 0.2); border-color: rgba(248, 113, 113, 0.4); }
.file-sheet { color: #6ee7b7; background: rgba(52, 211, 153, 0.2); border-color: rgba(52, 211, 153, 0.4); }
.file-img { color: #93c5fd; background: rgba(96, 165, 250, 0.2); border-color: rgba(96, 165, 250, 0.4); }
.file-code { color: #c4b5fd; background: rgba(167, 139, 250, 0.2); border-color: rgba(167, 139, 250, 0.4); }
.file-video { color: #fda4af; background: rgba(251, 113, 133, 0.2); border-color: rgba(251, 113, 133, 0.4); }
.file-adobe { color: #fdba74; background: rgba(251, 146, 60, 0.2); border-color: rgba(251, 146, 60, 0.4); }
.file-doc { color: #7dd3fc; background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.4); }
.file-zip { color: var(--text-primary); background: rgba(226, 232, 240, 0.18); border-color: rgba(226, 232, 240, 0.35); }
.item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.main-txt { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-txt { font-size: 0.75rem; color: var(--text-secondary); }

/* Coming Soon UI Component Layout card */
.coming-soon-card { display: flex; justify-content: center; align-items: center; text-align: center; padding: 20px; background: rgba(15, 23, 42, 0.3); border: 1px dashed rgba(255,255,255,0.15); }
.coming-soon-content { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 380px; }
.coming-soon-icon { font-size: 1.8rem; color: #818cf8; margin-bottom: 2px; }
.coming-soon-content h3 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.coming-soon-content p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }
.status-tag-soon { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; color: #818cf8; background: rgba(129, 140, 248, 0.12); padding: 4px 10px; border-radius: 6px; margin-top: 4px; }

/* Social platform items structure */
.social-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-content: start;
}
.social-pill { 
    display: flex; 
    align-items: center; 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid var(--glass-border); 
    border-radius: 10px; 
    padding: 0 12px; 
    height: 42px; 
    cursor: pointer; 
    transition: background 0.2s, transform 0.15s; 
}
.social-pill:hover { 
    background: rgba(255, 255, 255, 0.05); 
    transform: translateY(-1px);
}
.social-platform-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-content: start;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
/* Compact variant of .social-platform-card for the dashboard's multi-column preview —
   trims padding/gaps so 2-3 cards fit per row without touching font sizes, which stay
   shared with the full-size cards on socialmedia.html's Analytics grid. */
.social-platform-list .social-platform-card {
    gap: 8px;
    padding: 10px 12px 12px;
    min-height: 0;
}
.social-platform-list .social-stat-grid { gap: 6px; }
.social-platform-list .social-stat-tile { gap: 2px; padding: 6px 8px; }
.social-platform-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.social-platform-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}
.social-platform-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #86efac;
    background: rgba(16, 185, 129, 0.14);
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.social-platform-status.connected { color: #86efac; background: rgba(16, 185, 129, 0.14); }
.social-platform-status.not-connected { color: var(--text-secondary); background: rgba(148, 163, 184, 0.16); }
.social-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.social-connect-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stacked variant (icon+name on top, status+connect below) — used in the Social Media Hub's
   platform grid, where cards are narrower than the .social-platform-item row it was designed
   for and don't have room to fit name + status + button on one line. */
.social-platform-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 18px;
    min-height: 280px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.social-platform-card .social-platform-name { font-size: 0.95rem; }
.social-platform-card .social-icon { font-size: 1.3rem; width: auto; }
.social-platform-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.social-platform-last-posted { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-secondary); }
.social-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.social-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
}
.social-stat-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; }
.social-stat-value-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.social-stat-value-row strong { font-size: 0.95rem; color: var(--text-primary); }
.social-stat-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; font-weight: 700; }
.social-stat-trend.up { color: #4ade80; }
.social-stat-trend.down { color: #f87171; }
.social-platform-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.social-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.social-post-btn:hover { background: rgba(56, 189, 248, 0.28); }
.social-icon { font-size: 1.1rem; width: 18px; text-align: center; }
.social-icon.insta { color: #e1306c; }
.social-icon.fb { color: #1877f2; }
.social-icon.tiktok { color: #25f4ee; }
.social-icon.x-corp { color: var(--text-primary); }
.social-icon.linkedin { color: #0a66c2; }
.social-icon.youtube { color: #ff0000; }
.social-icon.threads { color: var(--text-primary); }
.social-icon.gmb { color: #4285f4; }
.social-icon.pinterest { color: #bd081c; }
.social-icon.snapchat { color: #fffc00; }
.social-icon.reddit { color: #ff4500; }
.social-icon.google-ads { color: #fbbc04; }
.social-icon.meta-ads { color: #0081fb; }
.social-icon.tiktok-ads { color: #ff0050; }
.social-icon.linkedin-ads { color: #0a66c2; }

.social-title { font-size: 0.8rem; margin-left: 10px; flex: 1; font-weight: 500; }
.live-status-tag { display: flex; align-items: center; gap: 4px; background: rgba(16, 185, 129, 0.08); padding: 3px 6px; border-radius: 20px; flex-shrink: 0; }
.pulse-dot { width: 5px; height: 5px; background: #10b981; border-radius: 50%; }
.status-text { font-size: 0.6rem; font-weight: 700; color: #34d399; text-transform: uppercase; letter-spacing: 0.3px; }

/* Social Media Hub page (client-scoped platform connections) */
.social-hub-page { display: flex; flex-direction: column; gap: 20px; height: auto; }
.social-hub-section { height: auto; }

.dashboard-task-manager-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    height: 100%;
}
.dashboard-task-column-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.dashboard-task-column-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.compact-task-list {
    display: grid;
    grid-auto-rows: minmax(44px, min-content);
    align-content: start;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.compact-task-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    flex-shrink: 0;
}
.compact-task-line.overdue { border-color: rgba(239, 68, 68, 0.4); }
.compact-task-line.overdue .task-line-meta { color: #f87171; }
.task-line-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.task-line-priority.high { background: #ef4444; }
.task-line-priority.med { background: #f59e0b; }
.task-line-priority.low { background: #10b981; }
.task-line-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.task-line-title {
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-line-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compact-dashboard-item {
    padding: 8px 10px;
}
.analytics-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

/* Dashboard "Team Activity" momentum chart — aggregate tasks-completed-per-day, deliberately
   never attributes a count to a person (see loadDashboardMomentum in script.js). */
.momentum-summary { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.momentum-summary-value { font-size: 1.7rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.momentum-summary-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7dd3fc;
    font-weight: 700;
}
.momentum-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 1;
    min-height: 90px;
}
.momentum-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}
.momentum-bar-count { font-size: 0.68rem; font-weight: 700; color: var(--text-primary); min-height: 1em; }
.momentum-bar-track {
    width: 100%;
    max-width: 26px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}
.momentum-bar {
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
    border-radius: 6px 6px 0 0;
}
.momentum-bar-label { font-size: 0.65rem; color: var(--text-secondary); }

/* ==========================================================================
   5. MESSAGING HUB CONSOLE FRAMEWORK (2/3 Left Chat, 1/3 Right Directory)
   ========================================================================== */
.comms-split-layout {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 24px;
    height: calc(100vh - 140px);
}

.comms-roster-panel { height: 100%; }
.comms-roster-scroll { max-height: calc(100vh - 240px); overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 10px; }
.comms-roster-scroll .glass-item { margin: 0; }
.new-chat-btn { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 999px; padding: 7px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.new-chat-options { display: grid; gap: 12px; }
.new-chat-option { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: var(--text-primary); cursor: pointer; text-align: left; }
.new-chat-option i { font-size: 1.1rem; color: #7dd3fc; }
.new-chat-option span { font-weight: 700; }
.new-chat-option small { color: var(--text-secondary); }

.roster-top-line { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 8px; }
.comms-tab-switcher { display: flex; gap: 4px; padding: 12px 24px 0; flex-shrink: 0; }
.comms-tab-btn { flex: 1; padding: 8px 12px; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--text-secondary); font-weight: 700; font-size: 0.78rem; cursor: pointer; white-space: nowrap; }
.comms-tab-btn:hover { color: var(--text-primary); }
.comms-tab-btn.active { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }
.badge-dept { font-size: 0.65rem; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; color: var(--text-secondary); font-weight: 500; }
.active-chat-selection { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.04); }

/* Chat engine workspace viewport */
.comms-chat-viewport { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.chat-header-identity { padding: 20px 24px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; background: rgba(15, 23, 42, 0.1); }
.chat-header-identity h4 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }

.chat-task-context-banner { padding: 14px 24px; border-bottom: 1px solid var(--glass-border); background: rgba(56, 189, 248, 0.07); display: flex; flex-direction: column; gap: 4px; }
.chat-task-context-banner.hidden { display: none; }
.chat-task-context-title { font-size: 0.85rem; font-weight: 700; color: #38bdf8; display: flex; align-items: center; gap: 8px; }
.chat-task-context-description { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; white-space: pre-wrap; }

.chat-history-scroll { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; background: rgba(10, 15, 30, 0.15); }

/* ==========================================================================
   5b. NOTES WORKSPACE (1/3 Left Note Selector, 2/3 Right Note Editor)
   ========================================================================== */
.notes-split-layout { display: grid; grid-template-columns: 4fr 8fr; grid-template-rows: minmax(0, 1fr); gap: 24px; height: calc(100vh - 140px); }
.notes-list-panel { height: 100%; }
.notes-list-scroll { display: flex; flex-direction: column; gap: 10px; }
.notes-empty-list-state { padding: 24px 8px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }

.note-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
}
.note-list-item:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)); }
.note-list-item.active-note { border-color: rgba(250, 204, 21, 0.5); background: rgba(250, 204, 21, 0.08); }
.note-list-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-list-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-list-date { font-size: 0.68rem; color: var(--text-secondary); flex-shrink: 0; }
.note-list-snippet { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-list-delete-btn {
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
    border: none; background: rgba(239, 68, 68, 0.15); color: #f87171; display: none; align-items: center; justify-content: center; cursor: pointer;
}
.note-list-item:hover .note-list-delete-btn { display: flex; }
.note-list-delete-btn:hover { background: rgba(239, 68, 68, 0.3); }

.notes-editor-panel { height: 100%; display: flex; flex-direction: column; position: relative; }
.notes-editor-header { padding: 16px 24px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(15, 23, 42, 0.1); flex-shrink: 0; }
.notes-title-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 1.15rem; font-weight: 700; }
.notes-editor-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.notes-updated-label { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
.notes-content-textarea {
    flex: 1;
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    background: rgba(10, 15, 30, 0.15);
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.6;
    padding: 24px;
    font-family: inherit;
}
.notes-content-display {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    background: rgba(10, 15, 30, 0.15);
    font-size: 0.92rem;
    line-height: 1.6;
    padding: 24px;
    cursor: text;
}
.notes-content-display .note-line { min-height: 1.6em; white-space: pre-wrap; word-break: break-word; }
.notes-content-display-placeholder { color: var(--text-muted); }
.notes-share-banner { padding: 8px 24px; border-bottom: 1px solid var(--glass-border); font-size: 0.76rem; color: var(--text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: rgba(255, 255, 255, 0.03); flex-shrink: 0; }
.notes-share-banner.hidden { display: none; }
.note-share-owner-dot, .note-share-member-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.note-share-member-tag { font-weight: 600; }
.notes-empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px; z-index: 2; background: var(--glass-bg-strong); }
.notes-empty-state.hidden,
.notes-title-input.hidden,
.notes-content-textarea.hidden,
.notes-content-display.hidden,
.notes-editor-actions .hidden { display: none; }

.share-note-user-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.share-note-user-name { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-primary); }
.share-note-user-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.chat-date-divider { text-align: center; margin: 12px 0; position: relative; }
.chat-date-divider::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: rgba(255,255,255,0.04); z-index: 1; }
.chat-date-divider span { position: relative; z-index: 2; background: #161933; padding: 4px 14px; border-radius: 20px; font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; border: 1px solid var(--glass-border); }

.chat-message-row { display: flex; width: 100%; }
.msg-row-left { justify-content: flex-start; }
.msg-row-right { justify-content: flex-end; }

.chat-bubble-container { max-width: 70%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--glass-border); line-height: 1.4; }
.bubble-left { background: rgba(255,255,255,0.03); border-top-left-radius: 2px; }
.bubble-right { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.25); border-top-right-radius: 2px; }
.bubble-meta { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 4px; }
.bubble-text-content { font-size: 0.88rem; color: var(--text-primary); }

.chat-input-dock { padding: 16px 24px; border-top: 1px solid var(--glass-border); display: flex; gap: 14px; background: rgba(15, 23, 42, 0.2); }
.chat-input-dock input { flex: 1; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); border-radius: 10px; padding: 0 16px; color: var(--text-primary); font-size: 0.9rem; outline: none; }
.chat-input-dock input:focus { border-color: rgba(56, 189, 248, 0.4); }
.chat-send-btn { width: 42px; height: 42px; border-radius: 10px; border: none; background: #6366f1; color: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.2s; }
.chat-send-btn:hover { background: #4f46e5; }

/* ==========================================================================
   5c. TIME & ATTENDANCE (HR workspace: PTO, probation, holidays, team-off
   calendar, absences, policies, delegation, manager dashboard)
   ========================================================================== */
.attendance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 24px; }
.attendance-card-wide { grid-column: span 2; }
@media (max-width: 900px) { .attendance-card-wide { grid-column: span 1; } }

/* Grid rows stretch to the tallest item by default (the calendar card, now that its
   Upcoming Holidays list is gone) — these two rules make the stacked columns' cards
   proportionally fill that same height instead of sitting short with dead space below. */
.attendance-stack-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; height: 100%; }
.attendance-stack-col .glass-window { flex: 1; min-height: 0; }
.attendance-card-half .attendance-list { max-height: 310px; }
.attendance-card-compact .window-body { padding: 14px 24px; }
/* .window-body sets overflow-y:auto with overflow-x left implicit — per spec that silently
   promotes the x-axis to auto too, so any 1px of sub-pixel overflow shows a horizontal
   scrollbar nothing actually needs. Scoped to this page's cards rather than the shared
   .window-body rule to avoid touching other pages. */
.attendance-card .window-body { overflow-x: hidden; }

.pto-balance-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pto-balance-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); }
.pto-balance-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.pto-balance-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }

.attendance-subheading { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 18px 0 10px; }
.attendance-subheading:first-child { margin-top: 0; }

.attendance-list { display: flex; flex-direction: column; gap: 8px; max-height: 450px; overflow-y: auto; overflow-x: hidden; }
.attendance-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--glass-border); border-left: 3px solid transparent; background: rgba(255, 255, 255, 0.03); }
.attendance-list-row.status-approved, .attendance-list-row.status-excused { border-left-color: #34d399; }
.attendance-list-row.status-rejected, .attendance-list-row.status-upheld { border-left-color: #f87171; }
.attendance-list-row.status-pending, .attendance-list-row.status-flagged, .attendance-list-row.status-disputed { border-left-color: #fbbf24; }
.attendance-list-row.status-cancelled { border-left-color: #64748b; }
.attendance-list-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.attendance-list-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.attendance-decision-note { font-style: italic; }
.attendance-file-link { color: #38bdf8; text-decoration: none; }
.attendance-file-link:hover { text-decoration: underline; }
.attendance-inline-btn { padding: 4px 12px; height: auto; font-size: 0.76rem; flex: none; }
.attendance-inline-input { width: 64px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-border); border-radius: 6px; color: var(--text-primary); padding: 4px 8px; font-size: 0.85rem; }

/* The calendar card's window-body becomes a flex column so the day-cell grid (flex:1, with
   1fr auto-rows) stretches to fill whatever height the card ends up with — otherwise, now
   that the Upcoming Holidays list is gone, a short month leaves dead space below the grid.
   The weekday header is a separate fixed-height row (see .mini-calendar-weekday-row) so it
   doesn't get stretched along with the day rows. */
.attendance-card-wide .window-body { display: flex; flex-direction: column; }
.mini-calendar-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; flex-shrink: 0; }
.mini-calendar-label { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); min-width: 150px; text-align: center; }
.mini-calendar-weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex-shrink: 0; margin-bottom: 6px; }
.mini-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 4px; flex: 1; }
.mini-calendar-weekday { text-align: center; font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; padding-bottom: 4px; }
.mini-calendar-cell { min-height: 116px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 5px 2px; font-size: 0.76rem; color: var(--text-secondary); position: relative; }
.mini-calendar-cell.empty { background: transparent; }
.mini-calendar-cell.has-holiday { background: rgba(244, 63, 94, 0.12); color: var(--text-primary); }
.mini-calendar-cell.has-people-off { background: rgba(167, 139, 250, 0.1); }
.mini-calendar-cell.has-holiday.has-people-off { background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(167, 139, 250, 0.1)); }
.mini-calendar-daynum { font-weight: 600; flex-shrink: 0; }
.mini-calendar-holiday-name { font-size: 0.58rem; line-height: 1.2; text-align: center; color: #fca5a5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 1px; word-break: break-word; }
.mini-calendar-holiday-delete { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border: none; border-radius: 50%; background: rgba(239, 68, 68, 0.25); color: #fca5a5; font-size: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mini-calendar-holiday-delete:hover { background: rgba(239, 68, 68, 0.45); }
.mini-calendar-person-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: auto; }
.mini-calendar-person-dot { width: 6px; height: 6px; border-radius: 50%; }

.attendance-policy-item { border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 14px; background: rgba(255, 255, 255, 0.03); }
.attendance-policy-item + .attendance-policy-item { margin-top: 8px; }
.attendance-policy-item summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.attendance-policy-item summary::-webkit-details-marker { display: none; }
.attendance-policy-actions { display: flex; gap: 4px; }
.attendance-policy-content { margin-top: 10px; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; }

.attendance-manager-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.attendance-manager-column { display: flex; flex-direction: column; min-width: 0; }

.glass-window.hidden, .task-add-btn.hidden { display: none; }

/* ==========================================================================
   6. TASK MASTER MATRIX BOARD ACTIONS
   ========================================================================== */
.task-center-expanded-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; height: calc(100vh - 240px); overflow-y: auto; padding-bottom: 20px; }
.task-grid-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: fit-content;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.16);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.task-grid-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 30px rgba(0,0,0,0.24);
}
.task-grid-card.border-high { border-left: 4px solid var(--prio-high); }
.task-grid-card.border-med { border-left: 4px solid var(--prio-med); }
.task-grid-card.border-low { border-left: 4px solid var(--prio-low); }

.task-card-meta { display: flex; justify-content: space-between; align-items: center; }
.priority-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
.priority-tag.high { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.priority-tag.med { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.priority-tag.low { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.task-card-date { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.task-card-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }

/* Collapsed summary row; the chevron toggles .task-grid-card.expanded to reveal
   .task-card-expanded-view in place — clicking the rest of the card still opens the task
   modal (see handleTaskCardClick). */
.task-card-collapsed-view { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-card-collapsed-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.task-card-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.task-card-expand-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; flex-shrink: 0; }
.task-card-expand-btn:hover { color: var(--text-primary); }
.task-card-expand-btn i { font-size: 0.7rem; transition: transform 0.2s ease; }
.task-grid-card.expanded .task-card-expand-btn i { transform: rotate(180deg); }
.task-card-status-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.status-pill { display: inline-flex; justify-self: start; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.status-pill.critical { background: rgba(239, 68, 68, 0.24); color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); }
.status-pill.active { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.45); }
.status-pill.inactive { background: rgba(148, 163, 184, 0.18); color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); }
.task-grid-card.inactive { opacity: 0.6; }

.task-card-expanded-view { display: none; flex-direction: column; gap: 10px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--glass-border); }
.task-grid-card.expanded .task-card-expanded-view { display: flex; }
.task-card-description { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; white-space: pre-wrap; }
.task-card-expanded-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.task-card-assignee { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.task-card-assignee i { font-size: 0.7rem; }

.tray-btn { flex: 1; height: 32px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: 0.72rem; font-weight: 700; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 4px; text-transform: uppercase; transition: all 0.15s ease; background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.btn-complete { background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.12)); border-color: rgba(16, 185, 129, 0.28); color: #dcfce7; }
.btn-complete:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.34), rgba(5, 150, 105, 0.2)); color: #f0fdf4; }
.btn-assist { background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(59, 130, 246, 0.12)); border-color: rgba(56, 189, 248, 0.28); color: #dbeafe; }
.btn-assist:hover { background: linear-gradient(135deg, rgba(56, 189, 248, 0.32), rgba(59, 130, 246, 0.2)); color: #f8fbff; }
.btn-delete { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #f87171; }
.btn-delete:hover { background: #ef4444; color: #fff; }

.task-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.task-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255,255,255,0.2);
    white-space: nowrap;
}
.task-add-btn i { font-size: 1rem; }
.task-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.task-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); }
.task-toggle-btn.active { background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.5); color: #7dd3fc; }
.task-toggle-btn.hidden { display: none; }
#boardClientFilterChip { background: rgba(56, 189, 248, 0.2); border-color: rgba(56, 189, 248, 0.5); color: #7dd3fc; }
.task-form { display: flex; flex-direction: column; gap: 12px; }
.task-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.task-form-field { display: flex; flex-direction: column; gap: 6px; }
.task-form-field label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; }
.task-form-field input,
.task-form-field select,
.task-form-field textarea {
    width: 100%; border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 12px; background: rgba(15, 23, 42, 0.55); color: var(--text-primary); outline: none;
}
.task-form-field input:focus,
.task-form-field select:focus,
.task-form-field textarea:focus { border-color: rgba(56, 189, 248, 0.45); }
.task-form-checkbox-label { display: flex; align-items: center; gap: 8px; text-transform: none; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.task-form-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #38bdf8; cursor: pointer; }
.task-modal-title-row { display: flex; align-items: center; gap: 16px; }
.task-modal-active-toggle { flex-shrink: 0; }
.task-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.task-form-field.hidden, .task-form-actions.hidden { display: none; }
.page-access-mode-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.page-access-mode-option { display: flex; align-items: center; gap: 6px; text-transform: none; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.page-access-mode-option input[type="radio"] { accent-color: #38bdf8; cursor: pointer; }
.page-access-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(15, 23, 42, 0.4); }
.page-access-checkbox-grid.hidden { display: none; }
.page-access-checkbox-grid label { display: flex; align-items: center; gap: 6px; text-transform: none; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.page-access-checkbox-grid input[type="checkbox"] { width: 15px; height: 15px; accent-color: #38bdf8; cursor: pointer; }
.user-credentials-body { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.user-credentials-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(15, 23, 42, 0.55); }
.user-credentials-row .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; }
.user-credentials-row .value { font-family: monospace; font-size: 0.9rem; color: var(--text-primary); word-break: break-all; }
.user-credentials-row button { flex-shrink: 0; }
.tray-btn.hidden { display: none; }
.task-board-scroll-wrapper { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; }
.task-board-shell { display: flex; gap: 16px; min-width: fit-content; width: max-content; padding-bottom: 6px; }
.task-category-group {
    width: 280px;
    min-width: 280px;
    max-height: calc(100vh - 320px);
    background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.16);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.task-category-group.ghost-column {
    border: 1px dashed rgba(255,255,255,0.2);
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    cursor: pointer;
    justify-content: center;
    align-items: center;
}
.task-category-group.ghost-column:hover { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.05); }
.task-category-group.drag-over { border-color: rgba(56, 189, 248, 0.6); }
.task-column-header { display: flex; justify-content: space-between; align-items: center; cursor: grab; touch-action: none; }
.task-column-header h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.task-count { display: inline-flex; justify-content: center; align-items: center; min-width: 28px; height: 28px; background: rgba(56, 189, 248, 0.12); color: #a5f3fc; border-radius: 999px; font-size: 0.78rem; font-weight: 700; padding: 0 8px; }
.task-column-cards { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 2px; }
.task-column-header .column-actions { display: flex; align-items: center; gap: 6px; }
/* Not scoped to .task-column-header — this button also appears in the List and Timeline
   views' group/row headers (see renderTaskListView / renderTaskTimelineView), and needs the
   same look in all three so the collapse chevron reads as one consistent control. */
.column-action-btn { background: transparent; border: none; color: var(--text-primary); cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.column-collapse-btn i { transition: transform 0.2s ease; display: block; }

/* Collapsing shrinks the column to a narrow strip (title rotated, edit actions hidden) rather
   than just hiding its cards, so collapsing the columns you don't care about actually frees up
   horizontal room for the one(s) you do — the whole point of the toggle. */
.task-category-group.collapsed { width: 56px; min-width: 56px; padding: 16px 8px; align-items: center; }
.task-category-group.collapsed .task-column-cards { display: none; }
.task-category-group.collapsed .column-edit-only { display: none; }
.task-category-group.collapsed .task-column-header { flex-direction: column; justify-content: flex-start; height: 100%; gap: 16px; cursor: default; }
.task-category-group.collapsed .task-column-header h4 { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: calc(100vh - 420px); }
.task-category-group.collapsed .column-actions { flex-direction: column; }
.task-category-group.collapsed .column-collapse-btn i { transform: rotate(180deg); }
.ghost-column-label { color: var(--text-primary); font-size: 0.9rem; text-align: center; font-weight: 600; }
.task-drag-ghost {
    position: fixed;
    z-index: 5000;
    pointer-events: none;
    margin: 0;
    opacity: 1;
    background: #1e293b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}
.task-grid-card.drop-hover { outline: 2px dashed #38bdf8; outline-offset: 2px; }
.task-column-cards.drop-hover { background: rgba(56, 189, 248, 0.06); border-radius: 10px; }
.task-category-group.drop-hover { outline: 2px dashed #38bdf8; outline-offset: 2px; }
.list-view-row.drop-hover { outline: 2px dashed #38bdf8; outline-offset: 2px; }
.list-view-rows.drop-hover { background: rgba(56, 189, 248, 0.06); border-radius: 10px; }
.column-drag-ghost {
    position: fixed;
    z-index: 5000;
    pointer-events: none;
    margin: 0;
    background: #1e293b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 14px;
}
/* Touch-only "picked up" cue — added once a long-press arms a drag (see armTouchDrag in
   script.js), removed on release. Never applied on mouse input. */
.task-grid-card.touch-drag-armed,
.list-view-row.touch-drag-armed,
.task-category-group.touch-drag-armed {
    transform: scale(1.02);
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.task-grid-card.completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.08));
    border-color: rgba(16, 185, 129, 0.34);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.16), 0 10px 24px rgba(0,0,0,0.16);
}
.task-grid-card.completed .task-card-title { text-decoration: line-through; color: #dcfce7; }
.task-grid-card.overdue {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(220, 38, 38, 0.06));
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.18), 0 10px 24px rgba(0,0,0,0.16);
}
.task-grid-card.overdue .task-card-meta .task-card-date { color: #f87171; font-weight: 700; }
.overdue-date { color: #f87171; font-weight: 700; }
.task-card-client-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; color: #a78bfa; background: rgba(167, 139, 250, 0.15); padding: 2px 8px; border-radius: 4px; }

/* Same purple as the "DevOps Lead" badge — marks any control or panel that only the DevOps
   Lead account can see, so its visually obvious at a glance which UI is platform-operator-only. */
.devops-only-border { border-color: #a78bfa !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35); }
.empty-task-state { border: 1px dashed rgba(255,255,255,0.12); border-radius: 10px; padding: 12px; color: var(--text-secondary); font-size: 0.8rem; text-align: center; }
.empty-task-state.hidden { display: none; }

.task-participants-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.task-participant-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: #7dd3fc; background: rgba(56, 189, 248, 0.15); padding: 4px 8px 4px 10px; border-radius: 999px; }
.task-participant-chip button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: inherit; font-size: 0.75rem; line-height: 1; cursor: pointer; padding: 0; }
.task-participant-chip button:hover { background: rgba(255,255,255,0.24); }

/* Board / List / Timeline view switcher */
.task-view-switcher { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--glass-border); border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.task-view-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); font-weight: 700; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.task-view-toggle-btn:hover { color: var(--text-primary); }
.task-view-toggle-btn.active { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }

/* List view — tasks broken down by list (column) as compact rows instead of cards. Uses the
   same glass-card recipe as the rest of the app (.glass-window / .task-grid-card: translucent
   gradient + var(--glass-border) + var(--glass-glow) + backdrop blur) instead of ad-hoc colors,
   so it reads as part of the same system rather than a flat table bolted on top. */
/* The shared board wrapper (.task-board-scroll-wrapper) clips vertical overflow — the Board
   view gets away with that because each column scrolls internally, but the List view can grow
   arbitrarily tall, so it needs its own bounded, scrollable area the same way. */
.list-view-shell { display: flex; flex-direction: column; gap: 20px; max-height: calc(100vh - 320px); overflow-y: auto; padding-right: 4px; }
.list-view-group {
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    overflow: hidden;
    /* Without this, flexbox treats this card's auto min-height as 0 (because it has
       overflow:hidden) and crushes it to fit inside .list-view-shell's capped max-height
       instead of letting the shell scroll — which is what silently ate every task row. */
    flex-shrink: 0;
}
.list-view-group-header { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--glass-border); cursor: pointer; }
.list-view-group-header h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.list-view-group-header .column-actions { display: flex; align-items: center; gap: 10px; }
.list-view-group.collapsed .list-view-group-header { border-bottom: none; }
.list-view-group.collapsed .list-view-columns-header,
.list-view-group.collapsed .list-view-rows { display: none; }
.list-view-group.collapsed .column-collapse-btn i { transform: rotate(180deg); }
.list-view-columns-header {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 110px 140px 140px 92px 156px;
    gap: 12px;
    padding: 10px 20px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--glass-border);
}
.list-view-rows { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.list-view-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 110px 140px 140px 92px 156px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border);
    border-left: 4px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 20px rgba(0,0,0,0.16);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: transform 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.list-view-row:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.3); }
.list-view-row.border-high { border-left-color: var(--prio-high); }
.list-view-row.border-med { border-left-color: var(--prio-med); }
.list-view-row.border-low { border-left-color: var(--prio-low); }
.list-view-row.completed { opacity: 0.65; }
.list-view-row.completed .list-view-title-text { text-decoration: line-through; color: var(--text-secondary); }
.list-view-row.overdue .list-view-deadline { color: #f87171; font-weight: 700; }
.list-view-row.inactive { opacity: 0.6; }
.list-view-title-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.list-view-priority-dot { width: 9px; height: 9px; min-width: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
.list-view-priority-dot.border-high { background: var(--prio-high); }
.list-view-priority-dot.border-med { background: var(--prio-med); }
.list-view-priority-dot.border-low { background: var(--prio-low); }
.list-view-title-text { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-view-deadline { font-size: 0.8rem; color: var(--text-primary); opacity: 0.85; font-weight: 700; }
.list-view-assignee, .list-view-client { font-size: 0.8rem; color: var(--text-primary); opacity: 0.8; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-view-actions { display: flex; gap: 8px; }
.list-view-actions .tray-btn { height: 30px; padding: 0 12px; flex: none; }

/* Timeline (Gantt-style) view — rows are lists, columns are days, bars run from a task's
   creation date to its deadline. A task with no deadline that isn't completed yet gets an
   open-ended bar (see .timeline-bar.open-ended) instead; only undated *completed* tasks are
   dropped from the chart and just counted in the toolbar badge. Uses the same glass-card
   recipe as the rest of the app (see .glass-window / .list-view-group) rather than one-off
   colors, and a slim spacer row between lists (see the JS's rowSizes) gives each list the same
   breathing room the Board view's column cards get from their gap. */
.timeline-view-shell { display: flex; flex-direction: column; gap: 12px; }
.timeline-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.timeline-nodate-badge { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.timeline-panel {
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    padding: 16px;
}
/* Bounded + scrollable in both directions, same pattern as .list-view-shell, so lists/groups
   past the visible height can be reached instead of being silently clipped. */
.timeline-scroll-area { width: 100%; max-height: calc(100vh - 320px); overflow: auto; }
.timeline-grid { display: grid; position: relative; width: max-content; }
.timeline-month-cell { grid-row: 1; display: flex; align-items: center; padding-left: 6px; font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--glass-border); }
.timeline-day-cell { grid-row: 2; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--text-secondary); border-bottom: 1px solid var(--glass-border); border-right: 1px solid rgba(255,255,255,0.03); }
.timeline-day-cell.is-weekend { background: rgba(255,255,255,0.03); border-radius: 4px; }
.timeline-day-cell.is-today { color: #7dd3fc; font-weight: 700; }
/* Sits behind the label + bars of one list, spanning the full width (label column included) —
   this is what makes each list read as its own distinct section, matching the Board view's
   column cards, with the spacer rows between groups acting as the gap between them. */
.timeline-group-backdrop {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border-radius: 14px;
    z-index: 0;
}
.timeline-row-label {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
    position: sticky;
    left: 0;
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px 0 0 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    z-index: 2;
}
.timeline-row-label .column-actions { display: flex; align-items: center; gap: 10px; }
.timeline-row-label.collapsed .column-collapse-btn i {
    transform: rotate(180deg);
}
.timeline-bar {
    margin: 5px 2px;
    padding: 0 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    border-left: 3px solid transparent;
    background: rgba(245, 158, 11, 0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    z-index: 1;
    position: relative;
}
.timeline-bar.border-high { background: rgba(239, 68, 68, 0.28); border-left-color: var(--prio-high); }
.timeline-bar.border-med { background: rgba(245, 158, 11, 0.28); border-left-color: var(--prio-med); }
.timeline-bar.border-low { background: rgba(16, 185, 129, 0.28); border-left-color: var(--prio-low); }
.timeline-bar.completed { opacity: 0.6; }
.timeline-bar.overdue { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.5); }
/* Open-ended = no deadline yet and not done — the bar has no known end, so it's cut off with a
   dashed edge and a chevron rather than a rounded/closed end, and keeps running to the edge of
   the visible chart until a deadline is set or the task is completed. */
.timeline-bar.open-ended { border-radius: 8px 2px 2px 8px; border-right: 2px dashed rgba(255, 255, 255, 0.55); padding-right: 22px; }
.timeline-bar.open-ended::after { content: '»'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-weight: 900; opacity: 0.85; }
.timeline-bar-avatar { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; }
.timeline-bar-title { overflow: hidden; text-overflow: ellipsis; }
.timeline-today-line { grid-row: 1 / -1; width: 2px; background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); justify-self: center; pointer-events: none; z-index: 1; }

.task-modal-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.78); display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 2000; }
.task-modal-backdrop.hidden { display: none; }
.task-modal {
    width: min(620px, 100%);
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.task-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.task-modal-close { border: none; background: transparent; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }


.deleted-tasks-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.activity-log-list { display: flex; flex-direction: column; gap: 10px; }
.deleted-task-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.deleted-task-info { display: flex; flex-direction: column; gap: 4px; }
.deleted-task-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.deleted-task-meta { font-size: 0.72rem; color: var(--text-secondary); }

.task-activity-log { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-border); }
.task-activity-heading { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; margin-bottom: 4px; }
.activity-log-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); }
.activity-log-row.notification-row-clickable { cursor: pointer; transition: background 0.15s; }
.activity-log-row.notification-row-clickable:hover { background: rgba(255,255,255,0.08); }
.activity-log-details { font-size: 0.82rem; color: var(--text-primary); }
.activity-log-meta { font-size: 0.7rem; color: var(--text-secondary); }

/* ===== Glass tab row (Details / Discussion / Files) — used by the task modal AND the
   inline expanded board card, same "liquid glass" recipe as .tray-btn / .task-toggle-btn. ===== */
.task-modal-tabs {
    display: flex; gap: 6px; padding: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    margin-bottom: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.task-modal-tabs.hidden { display: none; }
.task-modal-tabs .tab-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 700;
    padding: 9px 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.task-modal-tabs .tab-btn:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.07)); color: var(--text-primary); }
.task-modal-tabs .tab-btn.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.26), rgba(99, 102, 241, 0.16));
    border-color: rgba(125, 211, 252, 0.45);
    color: #7dd3fc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(56, 189, 248, 0.2);
}
.task-modal-tabs .tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: rgba(255, 255, 255, 0.14); color: inherit;
    border-radius: 999px; font-size: 0.68rem; font-weight: 800;
}
.task-modal-tabs .tab-btn.active .tab-count { background: rgba(56, 189, 248, 0.3); }
.task-modal-tabs .tab-count.hidden { display: none; }

.task-modal-panel.hidden { display: none; }

/* ===== Discussion panel (task modal + reused for Add Files layout) ===== */
.discuss-meta-line { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 10px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); flex-shrink: 0; }
#taskModalPanelDiscussion .chat-history-scroll { max-height: 280px; padding: 4px 2px 12px; margin: 0 0 12px; }
#taskModalPanelDiscussion .chat-input-dock { border-top: none; padding: 0; background: transparent; }
.empty-task-state { padding: 18px 4px; color: var(--text-muted); font-size: 0.82rem; text-align: center; }

/* @mention autocomplete — anchored above the discussion input */
.chat-input-dock { position: relative; }
.mention-menu {
    position: absolute; left: 0; right: 48px; bottom: calc(100% + 8px);
    max-height: 180px; overflow-y: auto;
    background: var(--panel-bg); border: 1px solid var(--glass-border); border-radius: 12px;
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    padding: 6px; z-index: 30;
}
.mention-menu.hidden { display: none; }
.mention-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-primary); }
.mention-option i { color: #7dd3fc; font-size: 0.85rem; }
.mention-option:hover, .mention-option.active { background: rgba(56, 189, 248, 0.16); }
.mention-empty { padding: 8px 10px; color: var(--text-muted); font-size: 0.8rem; }
.mention-tag { color: #7dd3fc; font-weight: 700; }

/* ===== Desktop-notification opt-in banner — injected by maybeShowChatNotifyPermissionBanner
   in script.js, appears on any page (not scoped to comms.html), so it lives here rather than
   in a per-page <div>. Same glass-panel recipe as .task-modal / .mention-menu. ===== */
.chat-notify-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, calc(100vw - 40px));
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--panel-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-glow);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    color: var(--text-primary);
    font-size: 0.85rem;
    animation: fadeInUp 0.25s ease;
}
.chat-notify-banner i { color: #7dd3fc; font-size: 1rem; flex-shrink: 0; }
.chat-notify-banner span { flex: 1; }
.chat-notify-banner .tray-btn { flex-shrink: 0; padding: 6px 12px; font-size: 0.78rem; }

/* ===== Task files panel ===== */
.task-files-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.task-files-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.task-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.task-file-row .item-icon { width: 34px; height: 34px; font-size: 0.95rem; flex-shrink: 0; }
.task-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-file-name { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-file-meta { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.file-visibility-tag { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; letter-spacing: 0.02em; }
.file-visibility-tag.public { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.file-visibility-tag.private { background: rgba(148, 163, 184, 0.18); color: var(--text-secondary); }
.task-file-detach { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 6px; flex-shrink: 0; }
.task-file-detach:hover { color: #f87171; background: rgba(239, 68, 68, 0.1); }

/* ===== Add Files modal ===== */
.add-files-repo-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.add-files-repo-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 10px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.add-files-repo-row:hover { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.06); }
.add-files-repo-row.attached { opacity: 0.5; cursor: default; }
.add-files-repo-row.selected { border-color: #38bdf8; background: rgba(56, 189, 248, 0.1); }
.social-asset-selected-check { color: #38bdf8; font-size: 1rem; flex-shrink: 0; }
#socialPostConfirmBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.add-files-repo-row .item-icon { width: 34px; height: 34px; font-size: 0.95rem; flex-shrink: 0; }
.visibility-toggle-row { display: flex; flex-direction: column; gap: 8px; }
.visibility-option { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; cursor: pointer; }

/* ===== Task card collapsed-view discussion pill ===== */
.card-chat-affordance { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700; color: #7dd3fc; }
.card-chat-affordance.hidden { display: none; }

/* ===== Comms: new chat picker ===== */
.new-chat-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.new-chat-hint { font-size: 0.78rem; color: var(--text-secondary); }
.new-chat-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding: 2px; }
.new-chat-user-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.new-chat-user-card:hover { transform: translateY(-2px); border-color: rgba(125, 211, 252, 0.4); background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)); }
.new-chat-user-card.selected { border-color: rgba(56, 189, 248, 0.6); background: rgba(56, 189, 248, 0.12); }
.new-chat-user-card.static { cursor: default; }
.new-chat-user-card.static:hover { transform: none; border-color: var(--glass-border); background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)); }
.new-chat-user-remove {
    position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(248, 113, 113, 0.14); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3);
    font-size: 0.62rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.new-chat-user-remove:hover { background: #f87171; color: #fff; }
.new-chat-user-tag { font-size: 0.62rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }

.team-picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.team-picker-option {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 10px 14px; border-radius: 10px; border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04); color: var(--text-primary);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.team-picker-option:hover { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.4); }
.team-picker-option i { color: var(--text-secondary); }
.new-chat-user-avatar {
    position: relative;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(56, 189, 248, 0.3));
    color: #fff; font-size: 1rem; font-weight: 700;
    flex-shrink: 0;
}
.new-chat-user-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.new-chat-user-check {
    position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%;
    background: #38bdf8; color: #0f172a; font-size: 0.62rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.new-chat-user-card.selected .new-chat-user-check { opacity: 1; transform: scale(1); }

/* ===== Comms: channel list task tag + preview ===== */
.channel-task-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: #7dd3fc; background: rgba(56, 189, 248, 0.14); border: 1px solid rgba(125, 211, 252, 0.3);
    padding: 1px 7px; border-radius: 999px;
}
.comms-channel-last-msg { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.management-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.management-team-card {
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.management-team-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.management-team-card-title { display: flex; align-items: center; gap: 6px; }
.management-icon-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.78rem; padding: 2px 4px; transition: color 0.15s; }
.management-icon-btn:hover { color: var(--text-primary); }
.management-icon-btn.danger:hover { color: #f87171; }
.management-team-card-section-title { display: flex; justify-content: space-between; align-items: center; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); font-weight: 700; }
.management-mini-list { display: flex; flex-direction: column; gap: 6px; }
.management-mini-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 0.8rem; }
.management-mini-name { font-weight: 600; color: var(--text-primary); }
.management-mini-meta { font-size: 0.7rem; color: var(--text-secondary); display: block; }
.management-mini-empty { font-size: 0.75rem; color: var(--text-secondary); padding: 2px; }
.management-tray-btn-sm { flex: none; height: 24px; padding: 0 8px; font-size: 0.66rem; }
.new-team-members-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.new-team-member-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.new-team-member-row input[type="checkbox"] { flex: none; }
.new-team-member-row span { flex: 1; }

.users-management-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.users-management-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: 10px 8px; border-bottom: 1px solid var(--glass-border); overflow-wrap: break-word; }
.users-management-table td { padding: 12px 8px; border-bottom: 1px solid var(--glass-border); font-size: 0.88rem; color: var(--text-primary); overflow: hidden; }
.users-management-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.users-management-table .fa-check { color: #34d399; }
.users-management-table select { max-width: 100%; background: rgba(255, 255, 255, 0.08); color: var(--text-primary); border: 1px solid var(--glass-border); border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; cursor: pointer; }
.users-management-table select option { background: #1e293b; color: var(--text-primary); }
.user-email-input { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 6px; color: var(--text-primary); font-size: 0.85rem; padding: 6px 10px; width: 100%; min-width: 0; box-sizing: border-box; }
.user-email-input:focus { outline: none; border-color: rgba(56, 189, 248, 0.5); }

/* ==========================================================================
   6b. ACCOUNTING (client payments, salaries, company expenses)
   ========================================================================== */
.accounting-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.accounting-stat-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--glass-border); background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.accounting-stat-card strong { font-size: 1.3rem; font-weight: 700; }
.accounting-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; }

.accounting-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.accounting-breakdown-col h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.accounting-breakdown-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.82rem; }
.accounting-breakdown-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accounting-breakdown-bar-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.accounting-breakdown-bar-fill { height: 100%; border-radius: 999px; }
.accounting-breakdown-amount { font-weight: 700; color: var(--text-primary); white-space: nowrap; }

.accounting-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.accounting-search-input { flex: 1; min-width: 220px; }
.accounting-table th, .accounting-table td { white-space: nowrap; }
.accounting-table .accounting-desc-cell { white-space: normal; min-width: 180px; max-width: 320px; color: var(--text-secondary); }
.accounting-table .accounting-actions-cell { white-space: nowrap; }
.amount-positive { color: #34d399; font-weight: 700; }
.amount-negative { color: #f87171; font-weight: 700; }

.status-pill.accounting-status-paid { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.45); }
.status-pill.accounting-status-pending { background: rgba(251, 191, 36, 0.2); color: #fcd34d; border-color: rgba(251, 191, 36, 0.4); }
.status-pill.accounting-status-overdue { background: rgba(239, 68, 68, 0.24); color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); }
.status-pill.accounting-status-cancelled { background: rgba(148, 163, 184, 0.18); color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); }

.accounting-category-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; overflow-x: hidden; margin: 14px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03); }
.accounting-category-list .empty-task-state { border: none; padding: 8px; }
.accounting-category-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04); font-size: 0.85rem; }
.accounting-category-row:hover { background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   7. CLOUD ASSET RESPONSIVE RIBBONS OVERRIDE (Overhauled For Dual Grid Matrix)
   ========================================================================== */
.file-repository-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    height: 70px;
    min-height: 70px;
    box-sizing: border-box;
    flex-direction: row;
}
.file-repository-toolbar.glass-window {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.file-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0 8px;
    min-width: 0;
    height: 50px;
    overflow: hidden;
}
.file-toolbar-group.search-group {
    flex: 0 0 50%;
    max-width: 50%;
}
/* Social Media Hub's client picker is the toolbar's only control besides the status
   tag, so it gets a wider desktop basis than the file repository's type filter — a
   same-specificity single class (not compounded with .file-toolbar-group) so the
   mobile .file-toolbar-group rule further down this file still overrides it on the
   cascade instead of losing to it on specificity. */
.filter-group-wide {
    flex: 0 1 260px;
}
.file-toolbar-group.filter-group {
    flex: 0 1 180px;
}
.file-toolbar-group input,
.file-toolbar-group select {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    outline: none;
    width: 100%;
    font-size: 1rem;
    line-height: 1;
    padding: 0 8px;
    height: 100%;
    border-radius: 6px;
}
.file-toolbar-group select option {
    background: #0f172a;
    color: #ffffff;
}
.file-toolbar-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    line-height: 1;
}
.file-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.16);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.28);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.78rem;
    white-space: nowrap;
    height: 50px;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .file-repository-toolbar {
        height: auto;
        min-height: 70px;
        flex-wrap: wrap;
    }
    .file-toolbar-group.search-group {
        flex: 1 1 100%;
    }
    .file-toolbar-group.filter-group {
        flex: 1 1 140px;
    }
    .file-upload-btn {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .file-repository-toolbar {
        width: 100%;
    }
    .file-toolbar-group {
        flex: 1 1 180px;
    }
}
.file-repository-vertical-stack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    height: calc(100vh - 320px);
    overflow-y: auto;
    padding: 4px 2px 20px;
}

.file-item-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 220px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    justify-content: space-between;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    position: relative;
}
.file-item-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%, rgba(255,255,255,0.05));
    pointer-events: none;
}
.file-item-row:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.32);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.compact-file-bar {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 140px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box;
}
.compact-file-bar .item-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    width: 100%;
}
.file-type-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.file-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.file-card-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.file-action-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.ribbon-btn {
    flex: 1 1 0;
    height: 36px;
    min-width: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    position: relative;
}
.ribbon-btn:hover { transform: translateY(-1px); color: #fff; }

@media (max-width: 1200px) {
    .file-repository-vertical-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .file-repository-vertical-stack {
        grid-template-columns: 1fr;
    }
}

.btn-dl:hover { background: rgba(56, 189, 248, 0.2); border-color: #38bdf8; color: #38bdf8; }
.btn-sh:hover { background: rgba(192, 132, 252, 0.2); border-color: #c084fc; color: #c084fc; }
.btn-ed:hover { background: rgba(251, 191, 36, 0.2); border-color: #fbbf24; color: #fbbf24; }
.btn-del:hover { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #ef4444; }
.btn-obs:hover { background: rgba(148, 163, 184, 0.2); border-color: #94a3b8; color: #94a3b8; }

/* ==========================================================================
   8. COMPONENT MODAL INTERFACES & OVERLAYS
   ========================================================================== */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(2, 8, 23, 0.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 100; justify-content: center; align-items: center; }
.modal-content { background: var(--panel-bg); border: 1px solid var(--glass-border); border-radius: 18px; width: 480px; padding: 32px; position: relative; box-shadow: var(--glass-glow); }
.close-btn { position: absolute; top: 20px; right: 24px; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; }
#modalTitle { font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; color: var(--text-primary); }
#modalBody { font-size: 0.95rem; color: var(--text-secondary); }

/* ==========================================================================
   9. LOGIN INTERFACE FRAMEWORK
   ========================================================================== */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
}
.login-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-glow);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.login-header-group {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-logo {
    font-size: 2.2rem;
    color: #f43f5e;
}
.login-header-group h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.input-wrapper label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.input-field-core {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    height: 46px;
    padding: 0 16px;
    color: var(--text-primary);
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s;
}
.input-field-core:focus {
    border-color: #38bdf8;
}
.login-action-btn {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 10px;
    height: 46px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    margin-top: 8px;
}
.login-action-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
}
.login-error-pane {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    text-align: center;
    display: none;
}
.login-form.hidden { display: none; }
.login-switch-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-align: center;
    cursor: pointer;
    padding: 4px;
}
.login-switch-link:hover {
    color: #38bdf8;
}

/* ===== Liquid-glass scrollbar — same gradient + border + inset-highlight recipe
   as .tray-btn / .task-modal-tabs, applied globally so every scrollable area matches. ===== */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.16));
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   9a. LOGIN / LOGOUT / PAGE-SWITCH TRANSITIONS
   ========================================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes shakeError {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.main-workspace {
    animation: fadeInUp 0.35s ease-out;
}

.login-card {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-transitioning .main-workspace,
body.page-transitioning .login-card {
    animation: fadeOutPage 0.18s ease-in forwards;
}

.login-error-pane.shake {
    animation: shakeError 0.4s ease-in-out;
}

/* ==========================================================================
   10. LIGHT THEME OVERRIDES
   Applied via [data-theme="light"] on <html>, toggled from the Settings popup.
   Most text/border colors flip automatically through the :root variable
   overrides below (var(--text-primary) etc. are used pervasively already).
   The rest of this block re-targets surfaces that hardcode a dark-canvas
   "lighten" tint directly, since those would otherwise make cards vanish
   into a light background instead of standing out from it.
   ========================================================================== */
:root[data-theme="light"] {
    --bg-gradient: linear-gradient(135deg, rgba(241, 245, 249, 0.92), rgba(226, 232, 240, 0.88));
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
    --glass-bg-strong: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(15, 23, 42, 0.12);
    --glass-glow: 0 22px 56px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --surface-highlight: rgba(37, 99, 235, 0.08);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --panel-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
    --input-bg: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] body { background: var(--bg-gradient), url('tech-bg-light.png') center/cover no-repeat fixed; }
[data-theme="light"] body::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(241, 245, 249, 0.5)), radial-gradient(circle at top right, rgba(37, 99, 235, 0.06), transparent 40%); }

[data-theme="light"] .sidebar-nav { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.85)); box-shadow: 12px 0 30px rgba(15, 23, 42, 0.08); }
[data-theme="light"] .top-bar { background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.85)); box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.06); }
[data-theme="light"] .brand-title { background: linear-gradient(to right, #0f172a, #2563eb); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .nav-icon { background: rgba(15, 23, 42, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }

[data-theme="light"] .glass-window { background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); }
[data-theme="light"] .glass-window::before { background: linear-gradient(135deg, rgba(15, 23, 42, 0.05), transparent 45%, rgba(15, 23, 42, 0.02)); }
[data-theme="light"] .glass-item,
[data-theme="light"] .social-platform-item,
[data-theme="light"] .dashboard-task-column-card,
[data-theme="light"] .momentum-bar-track,
[data-theme="light"] .task-category-group,
[data-theme="light"] .accounting-stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45));
}
[data-theme="light"] .accounting-breakdown-bar-track { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .accounting-category-list { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .accounting-category-row { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .accounting-category-row:hover { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .glass-item:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); }
[data-theme="light"] .item-icon { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .action-circle-btn { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .action-circle-btn:hover { background: rgba(15, 23, 42, 0.1); }
[data-theme="light"] .coming-soon-card { background: rgba(226, 232, 240, 0.5); border-color: rgba(15, 23, 42, 0.15); }
[data-theme="light"] .social-pill { background: rgba(255, 255, 255, 0.5); }
[data-theme="light"] .social-pill:hover { background: rgba(255, 255, 255, 0.75); }
[data-theme="light"] .compact-task-line { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); }

[data-theme="light"] .new-chat-option { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .badge-dept { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .chat-date-divider::before { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .chat-date-divider span { background: #f1f5f9; }
[data-theme="light"] .chat-header-identity { background: rgba(226, 232, 240, 0.4); }
[data-theme="light"] .chat-task-context-banner { background: rgba(37, 99, 235, 0.06); }
[data-theme="light"] .chat-history-scroll { background: rgba(241, 245, 249, 0.4); }
[data-theme="light"] .bubble-left { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .chat-input-dock { background: rgba(226, 232, 240, 0.5); }
[data-theme="light"] .chat-input-dock input { background: rgba(255, 255, 255, 0.9); }

[data-theme="light"] .task-grid-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); }
[data-theme="light"] .task-grid-card:hover { border-color: rgba(15, 23, 42, 0.18); }
[data-theme="light"] .task-category-group.ghost-column { border-color: rgba(15, 23, 42, 0.2); background: linear-gradient(135deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0.01)); }
[data-theme="light"] .tray-btn { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); }
[data-theme="light"] .task-toggle-btn { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .task-toggle-btn:hover { background: rgba(15, 23, 42, 0.1); }
[data-theme="light"] .social-connect-btn { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .task-count { background: rgba(56, 189, 248, 0.16); color: #0369a1; }

[data-theme="light"] .task-modal-tabs { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .task-modal-tabs .tab-btn { background: rgba(15, 23, 42, 0.04); color: var(--text-secondary); box-shadow: none; }
[data-theme="light"] .task-modal-tabs .tab-btn:hover { background: rgba(15, 23, 42, 0.08); color: var(--text-primary); }
[data-theme="light"] .task-modal-tabs .tab-btn.active {
    background: rgba(56, 189, 248, 0.18);
    border-color: rgba(56, 189, 248, 0.4);
    color: #0369a1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .task-modal-tabs .tab-count { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .task-modal-tabs .tab-btn.active .tab-count { background: rgba(56, 189, 248, 0.25); color: #0369a1; }
[data-theme="light"] .mention-tag,
[data-theme="light"] .mention-option i { color: #0369a1; }
[data-theme="light"] .task-form-field input,
[data-theme="light"] .task-form-field select,
[data-theme="light"] .task-form-field textarea,
[data-theme="light"] .user-email-input,
[data-theme="light"] .input-field-core {
    background: var(--input-bg);
}
[data-theme="light"] .empty-task-state { border-color: rgba(15, 23, 42, 0.15); }
[data-theme="light"] .task-view-toggle-btn.active { background: rgba(56, 189, 248, 0.18); color: #0369a1; }
[data-theme="light"] .list-view-group { background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); }
[data-theme="light"] .list-view-row { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .list-view-row:hover { background: rgba(15, 23, 42, 0.09); }
[data-theme="light"] .timeline-panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); }
[data-theme="light"] .timeline-group-backdrop { background: rgba(15, 23, 42, 0.04); }
[data-theme="light"] .timeline-row-label { border-color: rgba(15, 23, 42, 0.12); }
[data-theme="light"] .deleted-task-row,
[data-theme="light"] .activity-log-row {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .file-repository-toolbar { background: rgba(255, 255, 255, 0.5); }
[data-theme="light"] .file-toolbar-group { background: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .file-toolbar-group input,
[data-theme="light"] .file-toolbar-group select {
    background: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .file-item-row { background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); border-color: rgba(15, 23, 42, 0.14); }
[data-theme="light"] .file-item-row::before { background: linear-gradient(135deg, rgba(15, 23, 42, 0.05), transparent 50%, rgba(15, 23, 42, 0.02)); }
[data-theme="light"] .file-item-row:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7)); border-color: rgba(15, 23, 42, 0.22); }
[data-theme="light"] .file-action-ribbon { background: rgba(15, 23, 42, 0.03); border-top-color: rgba(15, 23, 42, 0.1); }
[data-theme="light"] .ribbon-btn { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.14); }

[data-theme="light"] .notification-row,
[data-theme="light"] .settings-panel-item:hover {
    background: rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .theme-toggle-switch .track { background: rgba(15, 23, 42, 0.14); }

[data-theme="light"] .team-switcher-select,
[data-theme="light"] .board-search-input,
[data-theme="light"] .user-profile-ctrl {
    background: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .team-switcher-select option,
[data-theme="light"] .users-management-table select option {
    background: #f8fafc;
}
[data-theme="light"] .users-management-table select {
    background: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .account-avatar-preview,
[data-theme="light"] .account-avatar-placeholder {
    background: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] { scrollbar-color: rgba(15, 23, 42, 0.28) transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.32), rgba(15, 23, 42, 0.14));
    background-clip: padding-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.44), rgba(15, 23, 42, 0.2));
    background-clip: padding-box;
}
[data-theme="light"] .management-team-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45)); }
[data-theme="light"] .management-mini-row { background: rgba(15, 23, 42, 0.04); }

[data-theme="light"] .note-list-item { background: rgba(15, 23, 42, 0.05); }
[data-theme="light"] .note-list-item:hover { background: rgba(15, 23, 42, 0.09); }
[data-theme="light"] .note-list-item.active-note { background: rgba(250, 204, 21, 0.14); }
[data-theme="light"] .notes-editor-header { background: rgba(226, 232, 240, 0.4); }
[data-theme="light"] .notes-content-textarea { background: rgba(241, 245, 249, 0.4); }
[data-theme="light"] .notes-content-display { background: rgba(241, 245, 249, 0.4); }

/* ==========================================================================
   11. MOBILE NAV SHELL (sidebar drawer, top bar reflow, anchored panels)
   Everything here is scoped to the mobile breakpoint or hidden by default,
   so desktop layout above 768px is untouched.
   ========================================================================== */
.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-right: 8px;
}
.mobile-nav-backdrop { display: none; }
.mobile-panel-back-btn { display: none; }

@media (max-width: 768px) {
    .view-content { padding: 14px; }

    .mobile-nav-toggle { display: flex; }

    .mobile-nav-backdrop.visible {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 18, 0.55);
        z-index: 1999;
    }

    /* Sidebar becomes an off-canvas drawer instead of a permanent 72px rail. */
    .sidebar-nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 240px;
        justify-content: flex-start;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 2000;
    }
    .sidebar-nav.mobile-nav-open { transform: translateX(0); }

    .nav-top, .nav-bottom { gap: 6px; }

    /* Icons get room to show their existing data-tooltip text as a real label,
       since hover tooltips don't work on touch. */
    .nav-link { justify-content: flex-start; }
    .nav-icon {
        width: 100%;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 14px;
        border-radius: 10px;
    }
    .nav-icon::after {
        content: attr(data-tooltip);
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav-icon.logo { margin-bottom: 4px; }

    .top-bar { padding: 0 14px; }
    .brand-title {
        font-size: 0.95rem;
        max-width: 38vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bar-right { gap: 10px; }
    .team-switcher-select { max-width: 108px; padding: 6px 10px; font-size: 0.78rem; }
    .board-search-input { min-width: 0; width: 120px; }

    .notification-panel {
        width: min(320px, calc(100vw - 24px));
    }

    /* Settings panel is anchored via JS-computed inline left/bottom off the gear
       button (see toggleSettingsPanel in script.js). Once the sidebar is an
       off-canvas drawer, that math can place it off-screen, so pin it to a safe
       bottom-sheet position instead — the !important overrides the inline
       positioning JS sets on open. */
    .settings-panel {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 16px !important;
        width: auto !important;
    }

    /* Task-board client menu (toggleTaskBoardClientMenu) keeps JS's inline `top`
       so it opens level with the Task Board icon, same as desktop — only `left`
       is unsafe once the sidebar is an off-canvas drawer (rect.right off the open
       drawer can push it past the right edge), so anchor to the right edge and
       cap the width instead of letting `left` place it off-screen. */
    #taskBoardClientMenu {
        left: auto !important;
        right: 12px !important;
        width: min(240px, calc(100vw - 24px)) !important;
        max-height: min(400px, calc(100vh - 32px));
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .user-name-display { display: none; }
    .brand-title { max-width: 30vw; }
}
[data-theme="light"] .notes-share-banner { background: rgba(15, 23, 42, 0.03); }

/* ==========================================================================
   12. MOBILE CARD SHELL + DASHBOARD LAYOUT
   ========================================================================== */
@media (max-width: 768px) {
    /* Applies to every glass-window card across all pages — more usable width
       on a phone-size screen, purely a padding reduction. Wrap lets a long
       title and an action button (e.g. "Request Time Off") drop to their own
       line instead of overflowing when they can't both fit on a phone width. */
    .window-header, .window-body { padding: 14px 16px; }
    .window-header { flex-wrap: wrap; gap: 8px; row-gap: 10px; }

    /* Dashboard: the desktop grid is exactly viewport-height (2 fixed rows of
       fixed-height cards). On a phone that squashes 5 cards unreadably small,
       so it becomes a single scrollable column of naturally-sized cards instead. */
    .view-content:has(.portal-dashboard-grid) { overflow-y: auto; overflow-x: hidden; }
    .portal-dashboard-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 16px;
    }
    .dashboard-stack-third { height: auto; }
    .dashboard-stack-third .glass-window { height: auto; min-height: 240px; }
    .dashboard-stack-two-thirds { height: auto; min-height: 320px; }
    .dashboard-bottom-row-split { display: flex; flex-direction: column; height: auto; }
    .dashboard-social-card, .dashboard-analytics-card { height: auto; min-height: 200px; }
    .dashboard-task-manager-shell { grid-template-columns: 1fr; height: auto; }
    .dashboard-task-column-card { min-height: 160px; }

    /* Attendance: the desktop grid's 380px/300px auto-fit minimums are wider
       than a phone viewport, which would force a horizontal scrollbar — drop
       to a single column instead. The stacked columns also stop stretching to
       match the calendar card's height (that was a desktop dead-space fix). */
    .attendance-grid { grid-template-columns: 1fr; }
    .attendance-stack-col { height: auto; }
    .attendance-manager-dashboard { grid-template-columns: 1fr; }
    .mini-calendar-cell { min-height: 64px; }

    /* Shared modal shell (task modal, add-files, deleted-tasks, account settings, PTO/holiday/
       policy modals, etc.) centers with no scroll or height cap — fine on desktop, but on a
       short phone viewport a modal taller than the screen becomes partly unreachable (its
       Save/Cancel row can end up below the fold with no way to scroll to it). Anchoring to the
       top and letting the backdrop itself scroll fixes that for every modal at once. */
    .task-modal-backdrop { align-items: flex-start; overflow-y: auto; padding: 16px 12px; }
    .task-modal { padding: 16px; margin: 0 auto; }

    /* Task board List view: the row/header grid has fixed-width columns (deadline, assignee,
       client, etc.) that add up to more than a phone's width. Rather than squeezing them
       unreadably, let the group scroll horizontally — same pattern the Board and Timeline
       views already use — by stopping the flex column from stretching rows to its width. */
    .list-view-group { overflow-x: auto; }
    .list-view-rows { align-items: flex-start; }
    .list-view-columns-header, .list-view-row { width: max-content; min-width: 100%; }

    /* Task board Board view: each column's height was a fixed calc(100vh - 320px) guess
       tuned for desktop's fixed-height toolbar. On mobile the toolbar wraps to a variable
       number of rows (see .task-toolbar-actions flex-wrap) and mobile 100vh doesn't reliably
       match the visible viewport once the browser chrome collapses/expands, so that guess
       left columns taller than what was actually visible with no way to reach the rest of
       their cards. Filling the real remaining flex space instead (page-view -> scroll-wrapper
       -> shell -> column, each properly bounded) needs no guessing and adapts to however tall
       the toolbar actually wraps to. Scoped to .task-board-page-view (see taskboard.html) so
       this only touches the task board, not every .page-view on every other page. */
    .task-board-page-view { height: 100%; }
    .task-board-page-view .task-board-scroll-wrapper { flex: 1 1 auto; min-height: 0; }
    .task-board-page-view .task-board-shell { height: 100%; }
    .task-board-page-view .task-category-group { max-height: 100%; }

    /* A press-and-hold to pick up a card/column (see armTouchDrag in script.js) is the exact
       same gesture the browser uses to select text / show its own copy-callout menu — without
       suppressing that, the two collide: the card starts dragging while the OS also tries to
       select whatever text is under the finger. Scoped to .touch-drag-armed (added by JS only
       once the hold actually arms a drag, not for the whole time a finger is on the card) —
       applying user-select:none unconditionally for the entire touch, including the pending/
       still-deciding-if-this-is-a-scroll window, is a known way to make mobile browsers stop
       recognizing a scroll gesture on that element at all, which was the cause of scrolling
       only working in the gaps between cards. Armed still fires well before iOS's own callout
       timer (roughly 500ms+) since our hold threshold is 350ms, so it still wins the race. */
    .task-grid-card.touch-drag-armed,
    .list-view-row.touch-drag-armed,
    .task-category-group.touch-drag-armed {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* Hover tooltips don't exist on touch, so the full name (available via
       data-tooltip) is otherwise unreachable — keep a 1-line truncated label
       instead of the 2-line clamp, since there's no room for two lines here. */
    .mini-calendar-holiday-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: unset;
    }

    /* Comms and Notes: the desktop two-column (roster/list + detail) layout becomes two
       full-width screens, one visible at a time, like a typical mobile messaging app.
       .mobile-show-chat / .mobile-show-detail (toggled by script.js — see loadChatThread/
       commsMobileShowRoster and selectNote/notesMobileShowList) pick which one shows;
       the default (no class yet) shows the list, matching first-load with nothing selected. */
    .comms-split-layout, .notes-split-layout {
        grid-template-columns: 1fr;
        height: calc(100vh - 110px);
    }
    .comms-split-layout .comms-chat-viewport,
    .notes-split-layout .notes-editor-panel {
        display: none;
    }
    .comms-split-layout.mobile-show-chat .comms-chat-viewport,
    .notes-split-layout.mobile-show-detail .notes-editor-panel {
        display: flex;
    }
    .comms-split-layout.mobile-show-chat .comms-roster-panel,
    .notes-split-layout.mobile-show-detail .notes-list-panel {
        display: none;
    }
    .mobile-panel-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 1.1rem;
        cursor: pointer;
    }

    /* Management & Accounting: the admin tables (users/permissions grid, accounting
       ledger — both share .users-management-table) use table-layout:fixed at 100% width,
       which crams a dozen columns unreadably small instead of overflowing. Letting the
       table size to its natural content width inside a horizontally-scrolling container
       fixes that — Accounting already wraps its table in an overflow-x:auto div; the
       Management users table gets the same treatment on its container. */
    .users-management-table { width: max-content; min-width: 100%; table-layout: auto; }
    #usersManagementContainer { overflow-x: auto; }
    .management-team-grid { grid-template-columns: 1fr; }
}