/* ============================================================
   EMS - Asana-Style Design System
   Full redesign to match Asana's visual language
   ============================================================ */

/* --- Asana Color Palette --- */
:root {
    --asana-primary: #0b6056;
    --asana-primary-hover: #0d7a6d;
    --asana-primary-light: #e7f0ed;
    --asana-primary-dark: #084a42;
    /* Visible (non-text-contrast safe) focus halo — was a too-pale 2px ring. */
    --asana-focus-ring: rgba(11, 96, 86, 0.32);
    --asana-accent: #9c7a3c;
    --asana-accent-hover: #876a33;
    --asana-accent-light: #f2ead8;
    --asana-bg: #ffffff;
    --asana-bg-secondary: #f4f1e9;
    --asana-bg-tertiary: #e9e4d8;
    --asana-bg-hover: #ece7db;
    --asana-bg-active: #e4dfd1;
    /* Elevated card/panel surface + soft divider (consumed by sheet.css; both
       map to already-themed tokens so they follow light/dark automatically). */
    --asana-surface: var(--asana-bg);
    --asana-border-light: var(--asana-border);
    --asana-text-primary: #1b1d1a;
    --asana-text-secondary: #565a53;
    --asana-text-tertiary: #646860; /* WCAG-AA (≥4.5:1) on warm paper #f4f1e9 */
    --asana-text-inverse: #ffffff;
    /* Text drawn ON a --asana-primary fill (buttons, avatar, "today" pips).
       White is not universally legible here: a mid-luminance brand colour cannot
       carry white text at WCAG AA, and 10 of the 13 themes measured 2.78–4.47:1
       with white. Each theme therefore declares whichever of white / near-ink
       clears 4.5:1 against BOTH its primary and its primary-hover. Themes that
       pass with white simply inherit this default. */
    --asana-on-primary: #ffffff;
    /* Link/accent text drawn ON a page surface. The same mid-luminance problem as
       --asana-on-primary, mirrored: a brand colour bright enough to work as a FILL
       is often too light to work as TEXT. Themes whose primary measures under
       4.5:1 on their own surfaces point this at a shade that already exists in
       their palette, so no new colours are introduced. */
    --asana-link: var(--asana-primary);
    --asana-border: #e3e0d7;
    --asana-border-strong: #cfcbbe;
    --asana-inbox: #9c7a3c;
    --asana-today: #34698c;
    --asana-upcoming: #7fb05a;
    --asana-completed: #a8a498;
    --asana-flagged: #c25a60;
    --asana-critical: #b23a3a;
    --asana-high: #b5852f;
    --asana-medium: #e2c275;
    --asana-low: #6fa84b;
    --asana-success: #0b6056;
    --asana-success-bg: #e7f0ed;
    --asana-error: #b23a3a;
    --asana-error-bg: #f6e9e7;
    --asana-warning: #b5852f;
    --asana-warning-bg: #f4ecdb;
    --asana-info: #34698c;
    --asana-info-bg: #eaf0f4;
    --asana-success-border: #bfe0d6;
    --asana-error-border: #e6c4c1;
    --asana-warning-border: #e6d4ab;
    --asana-info-border: #c2d4e0;
    --asana-shadow-sm: 0 1px 2px rgba(27,29,26,0.05);
    --asana-shadow-md: 0 2px 8px rgba(27,29,26,0.07);
    --asana-shadow-lg: 0 6px 20px rgba(27,29,26,0.10);
    --asana-shadow-xl: 0 12px 32px rgba(27,29,26,0.14);
    --asana-space-xxs: 2px;
    --asana-space-xs: 4px;
    --asana-space-sm: 8px;
    --asana-space-md: 12px;
    --asana-space-lg: 16px;
    --asana-space-xl: 24px;
    --asana-space-xxl: 32px;
    --asana-space-xxxl: 48px;
    --asana-radius-sm: 3px;
    --asana-radius-md: 6px;
    --asana-radius-lg: 8px;
    --asana-radius-xl: 12px;
    --asana-radius-full: 9999px;
    --asana-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --asana-font-display: 'Spectral', Georgia, 'Times New Roman', serif;
    --asana-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --asana-sidebar-width: 264px;
    --asana-sidebar-collapsed-width: 48px;
    --asana-header-height: 56px;
}

/* --- FOUC / flicker prevention --- */
/* Suppress all transitions while the page loads. board.js removes this class after
   the first two animation frames, so transitions only fire on user interaction. */
html.no-transition *, html.no-transition { transition: none !important; animation: none !important; }

/* Applied by inline script in <head> when localStorage says sidebar was collapsed.
   Mirrors .asana-shell.sidebar-collapsed without needing the DOM element to exist first. */
html.sidebar-pre-collapsed .asana-shell {
    grid-template-columns: var(--asana-sidebar-collapsed-width) 1fr;
}
html.sidebar-pre-collapsed .asana-shell .asana-sidebar .asana-sidebar-workspace span:last-child,
html.sidebar-pre-collapsed .asana-shell .asana-sidebar-nav,
html.sidebar-pre-collapsed .asana-shell .asana-sidebar-footer { display: none; }
html.sidebar-pre-collapsed .asana-shell .asana-sidebar { padding: 8px 0; }
html.sidebar-pre-collapsed .asana-shell .asana-sidebar-workspace { justify-content: center; padding: 12px; }
html.sidebar-pre-collapsed .asana-shell .asana-sidebar-workspace-icon { margin: 0; }

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--asana-font);
    color: var(--asana-text-primary);
    background: var(--asana-bg-secondary);
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}
a { color: var(--asana-link); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--asana-primary-hover); text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
ul, ol { list-style: none; }
input, select, textarea, button { font: inherit; }

/* --- Full App Shell (Sidebar + Header + Content) --- */
.asana-shell {
    display: grid;
    grid-template-columns: var(--asana-sidebar-width) 1fr;
    grid-template-rows: var(--asana-header-height) 1fr;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* --- Top Header Bar --- */
.asana-header {
    grid-column: 2;
    grid-row: 1;
    background: var(--asana-bg);
    border-bottom: 1px solid var(--asana-border);
    display: flex;
    align-items: center;
    padding: 0 var(--asana-space-xl);
    height: var(--asana-header-height);
    z-index: 100;
    gap: var(--asana-space-lg);
}
.asana-header-logo {
    display: flex;
    align-items: center;
    gap: var(--asana-space-sm);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--asana-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.asana-header-logo:hover { color: var(--asana-primary-hover); text-decoration: none; }
.asana-header-logo-icon {
    width: 28px; height: 28px;
    background: var(--asana-primary);
    border-radius: var(--asana-radius-md);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.8rem; font-weight: 700;
}
.asana-header-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.asana-header-nav-item {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-radius: var(--asana-radius-md);
    color: var(--asana-text-secondary);
    font-size: 0.875rem; font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.asana-header-nav-item:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); text-decoration: none; }
.asana-header-nav-item.active { background: var(--asana-bg-tertiary); color: var(--asana-text-primary); font-weight: 600; }
.asana-header-actions { display: flex; align-items: center; gap: var(--asana-space-sm); flex-shrink: 0; }
.asana-header-user {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: var(--asana-radius-md);
    cursor: pointer; color: var(--asana-text-secondary);
    font-size: 0.825rem; text-decoration: none;
    transition: all 0.15s ease;
}
.asana-header-user:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); }
.asana-header-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--asana-primary); color: var(--asana-on-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 600;
}

/* --- Left Sidebar --- */
.asana-sidebar {
    grid-row: 1 / -1;
    grid-column: 1;
    background: var(--asana-bg);
    border-right: 1px solid var(--asana-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 200;
}
.asana-sidebar-workspace {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    font-weight: 600; font-size: 0.95rem;
    color: var(--asana-text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}
.asana-sidebar-workspace:hover { background: var(--asana-bg-hover); text-decoration: none; }
.asana-sidebar-workspace-icon {
    width: 24px; height: 24px;
    background: var(--asana-primary);
    border-radius: var(--asana-radius-md);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.65rem; font-weight: 700; flex-shrink: 0;
}
.asana-sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.asana-sidebar-section { margin-bottom: 4px; }
.asana-sidebar-section-header {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 16px;
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--asana-text-tertiary);
    cursor: pointer; user-select: none;
    transition: color 0.15s ease;
}
.asana-sidebar-section-header:hover { color: var(--asana-text-secondary); }
.asana-sidebar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 16px;
    color: var(--asana-text-secondary);
    font-size: 0.875rem; font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.12s ease;
    margin: 1px 8px;
    border-radius: var(--asana-radius-md);
    white-space: nowrap;
}
.asana-sidebar-item:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); text-decoration: none; }
.asana-sidebar-item.active { background: var(--asana-bg-tertiary); color: var(--asana-text-primary); font-weight: 500; }
.asana-sidebar-item-count {
    margin-left: auto; font-size: 0.72rem;
    color: var(--asana-text-tertiary); font-weight: 500;
}
.asana-sidebar-item-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.asana-sidebar-footer {
    padding: 8px; border-top: 1px solid var(--asana-border);
}
.asana-sidebar-footer a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: var(--asana-radius-md);
    color: var(--asana-text-secondary); font-size: 0.825rem;
    text-decoration: none; transition: all 0.15s ease;
}
.asana-sidebar-footer a:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); text-decoration: none; }
.asana-sidebar-version {
    padding: 4px 12px 8px;
    font-size: 0.72rem; font-weight: 500;
    color: var(--asana-text-tertiary);
    letter-spacing: 0.02em;
    user-select: none;
}

/* --- Main Content --- */
.asana-main {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    background: var(--asana-bg);
    display: flex; flex-direction: column;
}
.asana-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* --- Page Header --- */
.asana-page-header {
    padding: var(--asana-space-xl) var(--asana-space-xxl);
    border-bottom: 1px solid var(--asana-border);
    background: var(--asana-bg);
    flex-shrink: 0;
}
.asana-page-header-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--asana-space-lg); margin-bottom: var(--asana-space-md);
}
.asana-page-title { font-size: 1.5rem; font-weight: 600; color: var(--asana-text-primary); line-height: 1.3; }
.asana-page-subtitle { font-size: 0.875rem; color: var(--asana-text-secondary); margin-top: 4px; }
.asana-page-actions { display: flex; align-items: center; gap: var(--asana-space-sm); flex-shrink: 0; }
.asana-page-breadcrumb {
    font-size: 0.8rem; color: var(--asana-text-tertiary);
    margin-bottom: 4px;
}
.asana-page-breadcrumb a { color: var(--asana-text-secondary); }
.asana-page-breadcrumb a:hover { color: var(--asana-primary); }
.breadcrumb-sep { color: var(--asana-text-secondary, #565a53); font-size: .8rem; }

/* --- Buttons --- */
.asana-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    border: none; border-radius: var(--asana-radius-md);
    font-family: var(--asana-font); font-size: 0.825rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s ease;
    text-decoration: none; white-space: nowrap; line-height: 1.4;
    letter-spacing: .01em;
}
.asana-btn-primary { background: var(--asana-primary); color: var(--asana-on-primary); }
.asana-btn-primary:hover { background: var(--asana-primary-hover); color: var(--asana-on-primary); text-decoration: none; }
.asana-btn-secondary { background: var(--asana-bg); color: var(--asana-text-primary); border: 1px solid var(--asana-border-strong); }
.asana-btn-secondary:hover { background: var(--asana-bg-hover); border-color: var(--asana-text-tertiary); }
.asana-btn-tertiary { background: transparent; color: var(--asana-text-secondary); }
.asana-btn-tertiary:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); }
.asana-btn-danger { background: var(--asana-error); color: white; }
.asana-btn-danger:hover { background: #c42f38; color: white; }
.asana-btn-sm { padding: 4px 10px; font-size: 0.78rem; }
.asana-btn-lg { padding: 10px 20px; font-size: 0.9rem; }
.asana-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--asana-radius-md); }
.asana-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* --- Cards --- */
.asana-card {
    background: var(--asana-bg);
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-lg);
    box-shadow: var(--asana-shadow-sm);
    transition: box-shadow 0.15s ease;
}
.asana-card:hover { box-shadow: var(--asana-shadow-md); }
.asana-card-body { padding: var(--asana-space-lg); }

/* --- Kanban Board (Asana Style) --- */
.asana-board {
    display: flex; gap: var(--asana-space-lg);
    padding: var(--asana-space-lg);
    overflow-x: auto; flex: 1;
    align-items: flex-start;
}
.asana-board-column {
    min-width: 280px; max-width: 280px;
    background: var(--asana-bg-secondary);
    border-radius: var(--asana-radius-lg);
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--asana-header-height) - 140px);
}
.asana-board-column-header {
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.asana-board-column-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.825rem; font-weight: 600; color: var(--asana-text-primary);
}
.asana-board-column-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.asana-board-column-count {
    background: var(--asana-bg-tertiary); color: var(--asana-text-secondary);
    font-size: 0.72rem; font-weight: 600; padding: 2px 8px;
    border-radius: var(--asana-radius-full);
}
.asana-board-column-body {
    flex: 1; overflow-y: auto;
    padding: 0 8px 8px;
}

/* --- Task Cards (Asana Style) --- */
.asana-task-card {
    background: var(--asana-bg);
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-md);
    padding: 12px;
    margin-bottom: 6px;
    cursor: grab;
    transition: all 0.15s ease;
    box-shadow: var(--asana-shadow-sm);
}
.asana-task-card:hover { box-shadow: var(--asana-shadow-md); border-color: var(--asana-border-strong); }
.asana-task-card:active { cursor: grabbing; }
.asana-task-card.dragging { opacity: 0.5; transform: rotate(2deg); }
.asana-task-card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.asana-task-card-checkbox {
    width: 18px; height: 18px; border: 2px solid var(--asana-border-strong);
    border-radius: 3px; flex-shrink: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease; background: transparent;
}
.asana-task-card-checkbox:hover { border-color: var(--asana-primary); }
.asana-task-card-checkbox.checked { background: var(--asana-primary); border-color: var(--asana-primary); }
.asana-task-card-checkbox.checked::after {
    content: '\2713'; color: white; font-size: 0.65rem; font-weight: 700;
}
.asana-task-card-title {
    font-size: 0.875rem; font-weight: 500;
    color: var(--asana-text-primary); line-height: 1.4; flex: 1; min-width: 0;
}
.asana-task-card-title.completed { text-decoration: line-through; color: var(--asana-text-tertiary); }
.asana-task-meta {
    display: flex; align-items: center; gap: var(--asana-space-md);
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--asana-bg-tertiary);
}
.asana-task-meta-item {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.72rem; color: var(--asana-text-tertiary);
}
.asana-task-meta-item.overdue { color: var(--asana-error); }
.asana-task-meta-item.due-today { color: var(--asana-today); font-weight: 500; }
.asana-task-assignee { display: flex; align-items: center; gap: 2px; }
.asana-task-assignee-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--asana-bg-tertiary); color: var(--asana-text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.58rem; font-weight: 600; border: 1px solid var(--asana-border);
}

/* --- List View (Asana Style) --- */
.asana-list { flex: 1; overflow: auto; }
.asana-list-table { width: 100%; border-collapse: collapse; }
.asana-list-table thead { position: sticky; top: 0; z-index: 10; }
.asana-list-table th {
    background: var(--asana-bg);
    border-bottom: 2px solid var(--asana-border);
    padding: 10px 16px; text-align: left;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--asana-text-tertiary);
}
.asana-list-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--asana-border);
    font-size: 0.875rem; color: var(--asana-text-primary);
    vertical-align: top;
}
.asana-list-table tbody tr { transition: background 0.1s ease; }
.asana-list-table tbody tr:hover { background: var(--asana-bg-hover); }
.asana-list-table tbody tr:last-child td { border-bottom: none; }
.asana-list-row { cursor: pointer; }
.asana-list-row-title { font-weight: 500; color: var(--asana-text-primary); }
.asana-list-row-desc { font-size: 0.78rem; color: var(--asana-text-secondary); margin-top: 2px; }
.asana-list-row-checkbox {
    width: 18px; height: 18px; border: 2px solid var(--asana-border-strong);
    border-radius: 3px; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; background: transparent;
    transition: all 0.15s ease;
}
.asana-list-row-checkbox.checked { background: var(--asana-primary); border-color: var(--asana-primary); }
.asana-list-row-checkbox.checked::after {
    content: '\2713'; color: white; font-size: 0.65rem; font-weight: 700;
}

/* --- Task Form Styles (create/update/delete/details in board and list views) --- */
.task-create-form { padding: 8px 0; }
.task-create-grid { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.task-create-title { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--asana-border-strong); border-radius: 6px; font-size: 0.875rem; font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg); }
.task-create-form select, .task-create-form input[type="date"] { padding: 6px 10px; border: 1px solid var(--asana-border-strong); border-radius: 6px; font-size: 0.875rem; font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg); }
.task-create-form button { padding: 6px 14px; background: var(--asana-primary); color: var(--asana-on-primary); border: none; border-radius: 6px; font-size: 0.875rem; cursor: pointer; font-family: var(--asana-font); }
.task-update-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-update-grid { display: inline-flex; gap: 6px; align-items: center; }
.task-update-field { display: inline-flex; flex-direction: column; gap: 2px; font-size: 0.75rem; }
.task-update-field label { font-size: 0.7rem; color: var(--asana-text-tertiary); }
.task-update-form select { padding: 4px 8px; border: 1px solid var(--asana-border-strong); border-radius: 4px; font-size: 0.78rem; font-family: var(--asana-font); background: var(--asana-bg); color: var(--asana-text-primary); }
.task-update-form button { padding: 4px 10px; background: var(--asana-primary); color: var(--asana-on-primary); border: none; border-radius: 4px; font-size: 0.78rem; cursor: pointer; white-space: nowrap; font-family: var(--asana-font); }
.task-details { margin-top: 4px; }
.task-details summary { font-size: 0.78rem; color: var(--asana-text-secondary); cursor: pointer; }
.task-details-form { margin-top: 8px; }
.task-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.task-details-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.task-details-field-full { grid-column: 1 / -1; }
.task-details-field label { font-size: 0.72rem; color: var(--asana-text-secondary); font-weight: 500; }
.task-details-field input, .task-details-field select, .task-details-field textarea { padding: 6px 10px; border: 1px solid var(--asana-border-strong); border-radius: 4px; font-size: 0.82rem; font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg); }
.task-details-field textarea { resize: vertical; min-height: 60px; }
.task-details-form button { padding: 6px 14px; background: var(--asana-primary); color: var(--asana-on-primary); border: none; border-radius: 6px; font-size: 0.82rem; cursor: pointer; font-family: var(--asana-font); }
.task-delete-form { display: inline; margin-left: 4px; }
.task-delete-btn { padding: 4px 10px; background: var(--asana-error); color: #fff; border: none; border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: var(--asana-font); }

/* --- Metrics / Stats Cards (Asana Style) --- */
.asana-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--asana-space-md);
    padding: var(--asana-space-lg) var(--asana-space-xl);
    border-bottom: 1px solid var(--asana-border);
    background: var(--asana-bg);
    flex-shrink: 0;
}
.asana-metric {
    background: var(--asana-bg-secondary);
    border-radius: var(--asana-radius-md);
    padding: var(--asana-space-md) var(--asana-space-lg);
    border: 1px solid var(--asana-border);
}
.asana-metric-value {
    font-size: 1.5rem; font-weight: 700;
    color: var(--asana-text-primary); line-height: 1.2;
}
.asana-metric-label {
    font-size: 0.72rem; color: var(--asana-text-tertiary);
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
    margin-top: 2px;
}

/* --- Filter Bar (Asana Style) --- */
.asana-filters {
    display: flex; align-items: center; gap: var(--asana-space-md);
    padding: var(--asana-space-md) var(--asana-space-xl);
    border-bottom: 1px solid var(--asana-border);
    background: var(--asana-bg);
    flex-wrap: wrap; flex-shrink: 0;
}
.asana-filter-search {
    position: relative; flex: 1; min-width: 200px; max-width: 360px;
}
.asana-filter-search input {
    width: 100%; padding: 8px 12px 8px 36px;
    border: 1px solid var(--asana-border-strong);
    border-radius: var(--asana-radius-md);
    font-size: 0.875rem; color: var(--asana-text-primary);
    background: var(--asana-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.asana-filter-search input:focus {
    outline: none;
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 3px var(--asana-focus-ring);
}
.asana-filter-search input::placeholder { color: var(--asana-text-tertiary); }
.asana-filter-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--asana-text-tertiary); font-size: 0.85rem; pointer-events: none;
}
.asana-filter-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--asana-border-strong);
    border-radius: var(--asana-radius-md);
    font-size: 0.825rem; color: var(--asana-text-primary);
    background: var(--asana-bg); cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2361605e' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.asana-filter-select:focus {
    outline: none;
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 3px var(--asana-focus-ring);
}
.asana-filter-reset {
    font-size: 0.825rem; color: var(--asana-primary);
    text-decoration: none; font-weight: 500;
    padding: 8px 12px; border-radius: var(--asana-radius-md);
    transition: background 0.15s ease;
}
.asana-filter-reset:hover { background: var(--asana-primary-light); text-decoration: none; }

/* --- Forms (Asana Style) --- */
.asana-form { width: 100%; }
.asana-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--asana-space-lg);
}
.asana-form-group { display: flex; flex-direction: column; }
.asana-form-group-full { grid-column: 1 / -1; }
.asana-form-label {
    display: block; margin: 0 0 6px;
    font-size: 0.825rem; font-weight: 500;
    color: var(--asana-text-primary);
}
.asana-form-label .required { color: var(--asana-error); margin-left: 2px; }
.asana-form-input,
.asana-form-select,
.asana-form-textarea {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--asana-border-strong);
    border-radius: var(--asana-radius-md);
    font-size: 0.875rem; color: var(--asana-text-primary);
    background: var(--asana-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.asana-form-input:focus,
.asana-form-select:focus,
.asana-form-textarea:focus {
    outline: none;
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 3px var(--asana-focus-ring);
}
.asana-form-input::placeholder,
.asana-form-textarea::placeholder { color: var(--asana-text-tertiary); }
.asana-form-textarea { min-height: 100px; resize: vertical; }
.asana-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2361605e' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}
/* Dark mode: lighten the inline select-arrow SVG (the baked-in #61605e grey is
   nearly invisible on the dark select background). */
.dark-mode .asana-filter-select,
.dark-mode .asana-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b6b4a8' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
}

.asana-form-error {
    margin-top: 4px; font-size: 0.78rem;
    color: var(--asana-error); font-weight: 400;
}
.asana-form-actions { margin-top: var(--asana-space-lg); display: flex; gap: var(--asana-space-md); }

/* --- Messages / Notices (Asana Style) --- */
.asana-message {
    padding: 12px 16px;
    border-radius: var(--asana-radius-md);
    font-size: 0.875rem;
    display: flex; align-items: center; gap: 10px;
}
.asana-message-notice,
.asana-message-success {
    color: var(--asana-success);
    background: var(--asana-success-bg);
    border: 1px solid var(--asana-success-border);
}
.asana-message-error {
    color: var(--asana-error);
    background: var(--asana-error-bg);
    border: 1px solid var(--asana-error-border);
}
.asana-message-warning {
    color: var(--asana-warning);
    background: var(--asana-warning-bg);
    border: 1px solid var(--asana-warning-border);
}
.asana-message-info {
    color: var(--asana-info);
    background: var(--asana-info-bg);
    border: 1px solid var(--asana-info-border);
}

/* --- Login Page (Asana Style) --- */
.asana-login-wrapper {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--asana-bg-secondary);
    padding: var(--asana-space-xl);
}
.asana-login-card {
    background: var(--asana-bg);
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-xl);
    box-shadow: var(--asana-shadow-lg);
    width: 100%; max-width: 400px;
    padding: var(--asana-space-xxl);
}
.asana-login-card-logo {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: var(--asana-space-xl);
}
.asana-login-card-logo-icon {
    width: 36px; height: 36px;
    background: var(--asana-primary);
    border-radius: var(--asana-radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1rem; font-weight: 700;
}
.asana-login-card-logo-text {
    font-family: var(--asana-font-display);
    font-size: 1.4rem; font-weight: 600; letter-spacing: .01em; color: var(--asana-primary);
}
.asana-login-card h2 {
    font-family: var(--asana-font-display);
    font-size: 1.5rem; font-weight: 600; letter-spacing: .005em;
    color: var(--asana-text-primary);
    text-align: center; margin-bottom: var(--asana-space-sm);
}
.asana-login-card-subtitle {
    text-align: center; color: var(--asana-text-secondary);
    font-size: 0.875rem; margin-bottom: var(--asana-space-xl);
}
.asana-login-card .asana-form-group { margin-bottom: var(--asana-space-lg); }
.asana-login-card .asana-form-input { padding: 10px 14px; font-size: 0.9rem; }
.asana-login-card .asana-btn { width: 100%; padding: 10px; font-size: 0.9rem; margin-top: var(--asana-space-md); }
.asana-login-remember {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.825rem; color: var(--asana-text-secondary);
    margin-top: var(--asana-space-md);
}
.asana-login-remember input { width: auto; }
.asana-login-card-footer {
    text-align: center; margin-top: var(--asana-space-xl);
    padding-top: var(--asana-space-xl);
    border-top: 1px solid var(--asana-border);
}
.asana-login-card-footer p {
    font-size: 0.75rem; color: var(--asana-text-tertiary);
    line-height: 1.6;
}
.asana-login-card-footer a { color: var(--asana-link); }

/* --- Auth Notice --- */
.asana-auth-notice {
    background: var(--asana-info-bg);
    border: 1px solid #b8ddf0;
    border-radius: var(--asana-radius-md);
    padding: 12px 16px;
    margin-bottom: var(--asana-space-xl);
    font-size: 0.8rem;
    color: #0c5fa1;
    line-height: 1.5;
}
.asana-auth-notice strong { display: block; margin-bottom: 4px; color: #0a4d80; }

/* --- Data Table (Asana Style) --- */
.asana-table-wrap {
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-lg);
    overflow: auto; background: var(--asana-bg);
}
.asana-table {
    width: 100%; border-collapse: collapse;
}
.asana-table th {
    background: var(--asana-bg-secondary);
    border-bottom: 2px solid var(--asana-border);
    padding: 10px 14px; text-align: left;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--asana-text-tertiary);
}
.asana-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--asana-border);
    font-size: 0.875rem; color: var(--asana-text-primary);
}
.asana-table tbody tr { transition: background 0.1s ease; }
.asana-table tbody tr:hover { background: var(--asana-bg-hover); }
.asana-table tbody tr:last-child td { border-bottom: none; }

/* --- Section Heading --- */
.asana-section-heading {
    font-size: 1.125rem; font-weight: 600;
    color: var(--asana-text-primary);
    margin-bottom: var(--asana-space-md);
}

/* --- Empty State (Asana Style) --- */
.asana-empty {
    text-align: center; padding: var(--asana-space-xxl);
    background: var(--asana-bg-secondary);
    border: 1px dashed var(--asana-border-strong);
    border-radius: var(--asana-radius-lg);
}
.asana-empty-icon {
    font-size: 2.5rem; margin-bottom: var(--asana-space-md);
    color: var(--asana-text-tertiary);
}
.asana-empty-title {
    font-size: 1rem; font-weight: 600;
    color: var(--asana-text-primary);
    margin-bottom: var(--asana-space-xs);
}
.asana-empty-desc {
    font-size: 0.875rem; color: var(--asana-text-secondary);
    margin-bottom: var(--asana-space-lg);
}

/* --- Badge / Pill --- */
.asana-badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: var(--asana-radius-full);
    font-size: 0.72rem; font-weight: 500;
    white-space: nowrap;
}
.asana-badge-gray { background: var(--asana-bg-tertiary); color: var(--asana-text-secondary); }
.asana-badge-green { background: #d1f5d8; color: #1a7f37; }
.asana-badge-blue { background: #d4e8fc; color: #0c60a6; }
.asana-badge-orange { background: #fde8cc; color: #c2671a; }
.asana-badge-red { background: #fde2e5; color: #c42f38; }
.asana-badge-purple { background: #e8ddf8; color: #6b3fa0; }
.asana-badge-teal { background: #d1f5f0; color: #0a7d6e; }

/* --- Inline Search --- */
.asana-inline-search { margin-bottom: var(--asana-space-lg); }
.asana-inline-search-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Board Grid (for form entries / cards) --- */
.asana-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--asana-space-lg);
}
.asana-board-card {
    background: var(--asana-bg);
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-lg);
    box-shadow: var(--asana-shadow-sm);
    padding: var(--asana-space-lg);
    transition: box-shadow 0.15s ease;
}
.asana-board-card:hover { box-shadow: var(--asana-shadow-md); }
.asana-board-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 8px;
}
.asana-board-card-title { font-size: 1rem; font-weight: 600; color: var(--asana-text-primary); }
.asana-board-card-type {
    padding: 2px 10px; border-radius: var(--asana-radius-full);
    font-size: 0.72rem; font-weight: 500;
    background: #e8ddf8; color: #6b3fa0;
}
.asana-board-card-desc {
    font-size: 0.825rem; color: var(--asana-text-secondary);
    line-height: 1.5;
}
.asana-board-card-meta {
    display: flex; align-items: center; gap: 16px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--asana-border);
    font-size: 0.78rem; color: var(--asana-text-tertiary);
}

/* --- Task Item (legacy card style) --- */
.asana-task-item {
    margin-top: 10px;
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-md);
    padding: 12px;
    background: var(--asana-bg);
    box-shadow: var(--asana-shadow-sm);
}
.asana-task-item-meta {
    margin-top: 6px; color: var(--asana-text-tertiary);
    font-size: 0.8rem;
}

/* --- Footer --- */
.asana-footer {
    padding: var(--asana-space-lg);
    border-top: 1px solid var(--asana-border);
    background: var(--asana-bg);
    text-align: right;
}
.asana-footer-text {
    font-size: 0.78rem; color: var(--asana-text-tertiary);
}

/* --- Skip Link --- */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
    left: 12px; top: 12px; width: auto; height: auto;
    z-index: 9999; background: var(--asana-bg);
    color: var(--asana-text-primary);
    border: 1px solid var(--asana-border-strong);
    border-radius: var(--asana-radius-md);
    padding: 8px 14px; font-size: 0.875rem;
}

/* --- Utility Classes --- */
.text-primary { color: var(--asana-text-primary); }
.text-secondary { color: var(--asana-text-secondary); }
.text-tertiary { color: var(--asana-text-tertiary); }
.text-error { color: var(--asana-error); }
.text-success { color: var(--asana-success); }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--asana-space-sm); }
.mt-md { margin-top: var(--asana-space-md); }
.mt-lg { margin-top: var(--asana-space-lg); }
.mt-xl { margin-top: var(--asana-space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--asana-space-sm); }
.mb-md { margin-bottom: var(--asana-space-md); }
.mb-lg { margin-bottom: var(--asana-space-lg); }
.mb-xl { margin-bottom: var(--asana-space-xl); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--asana-space-sm); }
.gap-md { gap: var(--asana-space-md); }
.gap-lg { gap: var(--asana-space-lg); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }

/* --- Responsive: small phones (finer tweaks; the shell + drawer are handled at ≤900px) --- */
@media (max-width: 768px) {
    .asana-header { padding: 0 var(--asana-space-sm); gap: var(--asana-space-sm); }
    .asana-header-search { min-width: 0; }
    /* Keep just the avatar in the header to save width */
    .asana-header-user span:not(.asana-header-avatar) { display: none; }
    .asana-page-header { padding: var(--asana-space-lg); }
    .asana-page-header-top { flex-wrap: wrap; }
    .asana-form-grid { grid-template-columns: 1fr; }
    .asana-metrics { grid-template-columns: repeat(2, 1fr); }
    .asana-filters { padding: var(--asana-space-md); }
    .sheet-wrap { padding: 16px; }
}

/* --- Scrollbar Styling --- */
.asana-sidebar-nav::-webkit-scrollbar,
.asana-board-column-body::-webkit-scrollbar,
.asana-main::-webkit-scrollbar,
.asana-list::-webkit-scrollbar {
    width: 6px; height: 6px;
}
.asana-sidebar-nav::-webkit-scrollbar-thumb,
.asana-board-column-body::-webkit-scrollbar-thumb,
.asana-main::-webkit-scrollbar-thumb,
.asana-list::-webkit-scrollbar-thumb {
    background: var(--asana-border-strong);
    border-radius: 3px;
}
.asana-sidebar-nav::-webkit-scrollbar-track,
.asana-board-column-body::-webkit-scrollbar-track,
.asana-main::-webkit-scrollbar-track,
.asana-list::-webkit-scrollbar-track {
    background: transparent;
}

/* --- Drag Drop Target --- */
.asana-board-column.is-drop-target {
    border-color: var(--asana-accent);
    box-shadow: 0 0 0 2px var(--asana-accent-light);
}

/* --- Detail Panel / Modal --- */
.asana-panel {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: 560px; max-width: 100vw;
    background: var(--asana-bg);
    box-shadow: var(--asana-shadow-xl);
    z-index: 500;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.asana-panel.is-open { transform: translateX(0); }
.asana-panel-header {
    padding: var(--asana-space-lg) var(--asana-space-xxl);
    border-bottom: 1px solid var(--asana-border);
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--asana-space-md); flex-shrink: 0;
}
.asana-panel-close {
    width: 32px; height: 32px; border-radius: var(--asana-radius-md);
    border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--asana-text-secondary); font-size: 1.2rem;
    transition: all 0.15s ease; flex-shrink: 0;
}
.asana-panel-close:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); }
.asana-panel-body { flex: 1; overflow-y: auto; padding: var(--asana-space-xxl); }
.asana-panel-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 499;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.asana-panel-overlay.is-open { opacity: 1; pointer-events: auto; }
/* ============================================================
   ADDITIONAL ENHANCEMENTS
   ============================================================ */

/* --- Dark Mode Variables (toggle via .dark-mode on <html>) --- */
.dark-mode {
    /* Warm ink neutrals (not flat grey) to match the paper-and-ink identity */
    --asana-bg: #1a1c19;
    --asana-bg-secondary: #23251f;
    --asana-bg-tertiary: #2c2e27;
    --asana-bg-hover: #2c2e27;
    --asana-bg-active: #353830;
    --asana-text-primary: #eceae2;
    --asana-text-secondary: #b6b4a8;
    --asana-text-tertiary: #909286; /* WCAG-AA on warm ink */
    --asana-border: #34372f;
    --asana-border-strong: #51544a;
    /* Lift green + brass so they read on a dark ground */
    --asana-primary: #2f9d8b;
    --asana-primary-hover: #3cb39f;
    --asana-primary-light: rgba(47,157,139,0.16);
    --asana-primary-dark: #1f7a6c;
    --asana-focus-ring: rgba(47, 157, 139, 0.50);
    /* These dark palettes deliberately LIFT primary so it reads on the dark
       ground — which makes white-on-primary worse, not better (2.78-3.32:1).
       Ink is the legible pairing on a lifted fill, and these hovers brighten,
       so ink clears AA in both states with no colour change. */
    --asana-on-primary: #0f1110;
    --asana-accent: #c79a52;
    --asana-accent-hover: #d6ab63;
    --asana-accent-light: rgba(199,154,82,0.16);
    --asana-success: #2f9d8b;
    --asana-error: #d96a6a;
    /* Lift the "today/due-today" blue so it meets AA on the dark ground
       (the light-theme #34698c is only ~2.9:1 on #1a1c19). */
    --asana-today: #7fb8e6;
    --asana-warning: #cd9a45;
    --asana-info: #5a93bd;
    --asana-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --asana-shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --asana-shadow-lg: 0 6px 20px rgba(0,0,0,0.5);
    --asana-shadow-xl: 0 12px 32px rgba(0,0,0,0.6);
    /* Dark-mode border variables for message components */
    --asana-success-border: rgba(47,157,139,0.5);
    --asana-error-border: rgba(217,106,106,0.5);
    --asana-warning-border: rgba(205,154,69,0.5);
    --asana-info-border: rgba(90,147,189,0.5);
    /* Dark-mode backgrounds for message components */
    --asana-success-bg: rgba(47,157,139,0.15);
    --asana-error-bg: rgba(217,106,106,0.13);
    --asana-warning-bg: rgba(205,154,69,0.13);
    --asana-info-bg: rgba(90,147,189,0.13);
}
/* These component overrides predate the warm-ink dark palette above and were
   left on the old FLAT GREY values (#2a2a2a / #252525 / #333333 / #242526 …),
   which is exactly what that palette's comment says it is not. The result was
   cold grey cards, tables and headers sitting on a warm ink page — the two
   halves of dark mode visibly disagreeing. They now use the same tokens as the
   rest of dark mode, chosen to match the greys they replace in luminance so the
   layering (page → raised surface → hover) is unchanged. */
.dark-mode .asana-task-card { background: var(--asana-bg-tertiary); }
.dark-mode .asana-board-card { background: var(--asana-bg-tertiary); }
.dark-mode .asana-card { background: var(--asana-bg-tertiary); }
.dark-mode .asana-login-card { background: var(--asana-bg-tertiary); }
.dark-mode .asana-form-input,
.dark-mode .asana-form-select,
.dark-mode .asana-form-textarea {
    background: var(--asana-bg-tertiary) !important;
    color: var(--asana-text-primary) !important;
    border-color: var(--asana-border-strong) !important;
}
.dark-mode .asana-form-input:focus,
.dark-mode .asana-form-select:focus,
.dark-mode .asana-form-textarea:focus {
    border-color: var(--asana-primary) !important;
    box-shadow: 0 0 0 2px var(--asana-primary-light) !important;
}
.dark-mode .asana-list-table tbody tr:hover { background: var(--asana-bg-active); }
.dark-mode .asana-table tbody tr:hover { background: var(--asana-bg-active); }
.dark-mode .asana-board-column { background: var(--asana-bg-secondary); }
.dark-mode .asana-board-column-body { background: transparent; }
.dark-mode .asana-metric { background: var(--asana-bg-secondary); }
.dark-mode .asana-board-grid { background: transparent; }
.dark-mode .asana-list-table th { background: var(--asana-bg-secondary); }
.dark-mode .asana-table th { background: var(--asana-bg-secondary); }
.dark-mode .asana-board-card-type { background: var(--asana-bg-active); color: var(--asana-text-secondary); }
/* Dark mode: task tag colors */
.dark-mode .asana-task-tag-green  { background: rgba(74,222,128,0.15);  color: #4ade80; }
.dark-mode .asana-task-tag-blue   { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.dark-mode .asana-task-tag-orange { background: rgba(251,146,60,0.15);  color: #fb923c; }
.dark-mode .asana-task-tag-red    { background: rgba(248,113,113,0.15); color: #f87171; }
.dark-mode .asana-task-tag-purple { background: rgba(167,139,250,0.15); color: #a78bfa; }
.dark-mode .asana-task-tag-yellow { background: rgba(250,204,21,0.15);  color: #facc15; }
/* Dark mode: filter inputs */
.dark-mode .asana-filter-search input { background: var(--asana-bg-tertiary); }
.dark-mode .asana-filter-search input:focus { background: var(--asana-bg-secondary); }
/* Single definition — this rule was previously declared twice (the earlier copy
   used flat greys and was silently overridden by this one). */
.dark-mode .asana-filter-select { background: var(--asana-bg-secondary) !important; color: var(--asana-text-primary) !important; border-color: var(--asana-border-strong) !important; }
/* Dark mode: grid cells */
.dark-mode .asana-grid td input,
.dark-mode .asana-grid td select,
.dark-mode .asana-grid td textarea {
    color: var(--asana-text-primary);
    background: transparent;
}
.dark-mode .asana-grid td { border-color: var(--asana-border); }
.dark-mode .asana-grid th { background: var(--asana-bg-secondary) !important; color: var(--asana-text-tertiary) !important; border-color: var(--asana-border) !important; }
/* Dark mode: list view — override hardcoded light backgrounds */
.dark-mode .asana-list { background: var(--asana-bg); }
.dark-mode .asana-list-create {
    background: var(--asana-bg-secondary);
    border-color: var(--asana-border);
}
.dark-mode .asana-list-table { border-color: var(--asana-border); }
.dark-mode .asana-list-table th { border-color: var(--asana-border) !important; }
.dark-mode .asana-list-row-checkbox { border-color: var(--asana-border-strong); }
.dark-mode .task-create-inline {
    background: var(--asana-bg-secondary);
    border-color: var(--asana-border);
}
.dark-mode .asana-metrics { background: var(--asana-bg-secondary); border-color: var(--asana-border); }
.dark-mode .asana-metric { border-color: var(--asana-border); }
/* Dark mode: sidebar toggle/dark-toggle buttons use dark-appropriate hover */
.dark-mode .asana-sidebar-footer .asana-dark-toggle:hover,
.dark-mode .asana-sidebar-footer .asana-dark-toggle:focus {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.9) !important;
}
/* Header page-header & list-create in dark mode */
.dark-mode .asana-page-header { background: var(--asana-bg-secondary); border-color: var(--asana-border); }

/* ============================================================
   COLOR THEMES (light-based palette retints)
   Applied via a theme-* class on <html>. Each block only retints the
   brand/chrome variables (primary, accent, focus ring, tinted surfaces +
   borders); --asana-bg stays white and text stays dark, so these inherit
   the full light component styling above with no per-component overrides.
   Semantic status colors (success/error/warning/info) are intentionally
   left untouched so messages stay meaningful across every theme.
   Keep the keys here in sync with App\Core\View::THEMES and the
   EMS_THEME_CLASSES map in board.js.
   ============================================================ */

/* --- Rose Gold --- */
.theme-rosegold {
    --asana-primary: #b76e79;
    /* Ink on the primary fill measures 4.98:1, but the old hover (#a25c67) was
       DARKER than the resting colour and dropped ink to 3.85:1 — a button that
       passed at rest and failed the moment you pointed at it. With ink text the
       hover has to brighten, not deepen; this lifts it to 4.58:1. The resting
       brand colour is untouched. */
    --asana-primary-hover: #aa6b75;
    --asana-on-primary: #0f1110;
    --asana-primary-dark: #8f4f59;
    --asana-primary-light: #f7e9eb;
    --asana-focus-ring: rgba(183, 110, 121, 0.32);
    --asana-accent: #c08552;
    --asana-accent-hover: #a8754a;
    --asana-accent-light: #f5ebe0;
    --asana-bg-secondary: #fbf3f3;
    --asana-bg-tertiary: #f3e6e7;
    --asana-bg-hover: #f5e9ea;
    --asana-bg-active: #efdcde;
    --asana-border: #ecdcdd;
    --asana-border-strong: #ddc4c6;
    /* Primary as link text measures 3.48:1 on this theme's surfaces; its own
       --asana-primary-dark measures 5.60:1. */
    --asana-link: var(--asana-primary-dark);
}

/* --- Teal --- */
.theme-teal {
    --asana-primary: #0d9488;
    /* Ink on the primary fill measures 5.06:1, but the old hover (#0f766e) was DARKER
       than the resting colour and dropped ink below AA. With ink text the hover
       must brighten, not deepen; this lifts it to 4.66:1. Resting brand colour
       untouched. */
    --asana-primary-hover: #338b84;
    --asana-on-primary: #0f1110;
    --asana-primary-dark: #115e59;
    --asana-primary-light: #d9f2ef;
    --asana-focus-ring: rgba(13, 148, 136, 0.32);
    --asana-accent: #0891b2;
    --asana-accent-hover: #0e7490;
    --asana-accent-light: #ddf2f7;
    --asana-bg-secondary: #f0f7f6;
    --asana-bg-tertiary: #e1efed;
    --asana-bg-hover: #e6f2f0;
    --asana-bg-active: #d8eae7;
    --asana-border: #d9eae7;
    --asana-border-strong: #c0dbd6;
    /* Primary as link text measures 3.45:1 on this theme's surfaces; its own
       --asana-primary-dark measures 6.98:1. */
    --asana-link: var(--asana-primary-dark);
}

/* --- Indigo / Ocean --- */
.theme-indigo {
    --asana-primary: #4f46e5;
    --asana-primary-hover: #4338ca;
    --asana-primary-dark: #3730a3;
    --asana-primary-light: #e7e6fb;
    --asana-focus-ring: rgba(79, 70, 229, 0.32);
    --asana-accent: #0ea5e9;
    --asana-accent-hover: #0284c7;
    --asana-accent-light: #e2f2fc;
    --asana-bg-secondary: #f3f4fb;
    --asana-bg-tertiary: #e6e8f6;
    --asana-bg-hover: #ebedf8;
    --asana-bg-active: #dfe2f2;
    --asana-border: #e1e3f2;
    --asana-border-strong: #c7cae8;
}

/* --- Emerald / Forest --- */
.theme-emerald {
    --asana-primary: #059669;
    /* Ink on the primary fill measures 5.03:1, but the old hover (#047857) was DARKER
       than the resting colour and dropped ink below AA. With ink text the hover
       must brighten, not deepen; this lifts it to 4.59:1. Resting brand colour
       untouched. */
    --asana-primary-hover: #2a8c70;
    --asana-on-primary: #0f1110;
    --asana-primary-dark: #065f46;
    --asana-primary-light: #d7f3e7;
    --asana-focus-ring: rgba(5, 150, 105, 0.32);
    --asana-accent: #65a30d;
    --asana-accent-hover: #4d7c0f;
    --asana-accent-light: #ecf5d8;
    --asana-bg-secondary: #f0f8f3;
    --asana-bg-tertiary: #e0f0e7;
    --asana-bg-hover: #e6f3eb;
    --asana-bg-active: #d6ebdf;
    --asana-border: #d8ecdf;
    --asana-border-strong: #bedccb;
    /* Primary as link text measures 3.49:1 on this theme's surfaces; its own
       --asana-primary-dark measures 7.11:1. */
    --asana-link: var(--asana-primary-dark);
}

/* --- Amethyst / Plum --- */
.theme-amethyst {
    --asana-primary: #7c3aed;
    --asana-primary-hover: #6d28d9;
    --asana-primary-dark: #5b21b6;
    --asana-primary-light: #efe7fc;
    --asana-focus-ring: rgba(124, 58, 237, 0.32);
    --asana-accent: #c026d3;
    --asana-accent-hover: #a21caf;
    --asana-accent-light: #f8e3fb;
    --asana-bg-secondary: #f6f3fb;
    --asana-bg-tertiary: #ece4f6;
    --asana-bg-hover: #f0e9f8;
    --asana-bg-active: #e6daf3;
    --asana-border: #e8def5;
    --asana-border-strong: #d2bdec;
}

/* --- Amber / Sunset --- */
.theme-amber {
    --asana-primary: #d97706;
    /* Ink on the primary fill measures 5.95:1, but the old hover (#b45309) was DARKER
       than the resting colour and dropped ink below AA. With ink text the hover
       must brighten, not deepen; this lifts it to 4.57:1. Resting brand colour
       untouched. */
    --asana-primary-hover: #bc6624;
    --asana-on-primary: #0f1110;
    --asana-primary-dark: #92400e;
    --asana-primary-light: #fbedd5;
    --asana-focus-ring: rgba(217, 119, 6, 0.32);
    --asana-accent: #ea580c;
    --asana-accent-hover: #c2410c;
    --asana-accent-light: #fce8db;
    --asana-bg-secondary: #fbf6ee;
    --asana-bg-tertiary: #f4ead8;
    --asana-bg-hover: #f7efdf;
    --asana-bg-active: #f1e3cd;
    --asana-border: #f0e6d3;
    --asana-border-strong: #e2cfad;
    /* Primary as link text measures 2.96:1 on this theme's surfaces; its own
       --asana-primary-dark measures 6.59:1. */
    --asana-link: var(--asana-primary-dark);
}

/* ============================================================
   DARK THEME VARIANTS
   Each layers on .dark-mode (so it keeps the full dark component
   styling + dark surfaces) and only re-tints the brand/accent
   variables. The double-class selector (.dark-mode.theme-x) is more
   specific than .dark-mode, so these win over the base dark palette.
   Keep keys in sync with App\Core\View::THEMES + board.js.
   ============================================================ */

/* --- Midnight (indigo) --- */
.dark-mode.theme-midnight {
    /* The only theme where NEITHER white (4.47:1) nor ink (4.24:1) cleared AA on
       the resting indigo — it sat right at the crossover. Lifted 5% so ink reads
       at 4.62:1; the hover (#818cf8) already carries ink at 6.35:1. */
    --asana-primary: #6b6ef2;
    --asana-primary-hover: #818cf8;
    --asana-primary-dark: #4f46e5;
    --asana-primary-light: rgba(99, 102, 241, 0.18);
    --asana-focus-ring: rgba(129, 140, 248, 0.50);
    --asana-accent: #38bdf8;
    --asana-accent-hover: #7dd3fc;
    --asana-accent-light: rgba(56, 189, 248, 0.18);
    --asana-on-primary: #0f1110;
    /* Indigo on the dark ground measures 3.79:1 as text — the one dark theme
       whose primary is too DARK to read. Its hover is the lighter step. */
    --asana-link: var(--asana-primary-hover);
}

/* --- Rose Night (rose gold) --- */
.dark-mode.theme-rosenight {
    --asana-primary: #cf7d8a;
    --asana-primary-hover: #dd93a0;
    --asana-primary-dark: #b86573;
    --asana-primary-light: rgba(207, 125, 138, 0.18);
    --asana-focus-ring: rgba(207, 125, 138, 0.50);
    --asana-accent: #d49a63;
    --asana-accent-hover: #e2ad79;
    --asana-accent-light: rgba(212, 154, 99, 0.18);
    --asana-on-primary: #0f1110;
}

/* --- Forest Night (emerald) --- */
.dark-mode.theme-forestnight {
    --asana-primary: #14b07f;
    --asana-primary-hover: #1ec995;
    --asana-primary-dark: #0e8d66;
    --asana-primary-light: rgba(20, 176, 127, 0.18);
    --asana-focus-ring: rgba(30, 201, 149, 0.50);
    --asana-accent: #84cc16;
    --asana-accent-hover: #a3e635;
    --asana-accent-light: rgba(132, 204, 22, 0.18);
    --asana-on-primary: #0f1110;
}

/* --- Plum Night (amethyst) --- */
.dark-mode.theme-plumnight {
    --asana-primary: #9b7ef0;
    --asana-primary-hover: #b29df4;
    --asana-primary-dark: #7c5fe0;
    --asana-primary-light: rgba(155, 126, 240, 0.18);
    --asana-focus-ring: rgba(155, 126, 240, 0.50);
    --asana-accent: #d459e8;
    --asana-accent-hover: #e07cf0;
    --asana-accent-light: rgba(212, 89, 232, 0.18);
    --asana-on-primary: #0f1110;
}

/* --- Ember (amber) --- */
.dark-mode.theme-ember {
    --asana-primary: #d9831a;
    --asana-primary-hover: #ec9426;
    --asana-primary-dark: #b86c12;
    --asana-primary-light: rgba(217, 131, 26, 0.18);
    --asana-focus-ring: rgba(236, 148, 38, 0.50);
    --asana-accent: #ef7d3a;
    --asana-accent-hover: #f59052;
    --asana-accent-light: rgba(239, 125, 58, 0.18);
    --asana-on-primary: #0f1110;
}

/* --- Theme picker (account page + header menu) --- */
.theme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--asana-space-md);
}
.theme-swatch {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--asana-border-strong);
    border-radius: var(--asana-radius-lg);
    background: var(--asana-bg);
    cursor: pointer; text-align: left;
    transition: all 0.15s ease;
    font-family: var(--asana-font);
    font-size: 0.875rem; color: var(--asana-text-primary);
    min-width: 0;
}
.theme-swatch:hover { border-color: var(--asana-primary); box-shadow: var(--asana-shadow-sm); }
.theme-swatch.is-active {
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 2px var(--asana-focus-ring);
}
.theme-swatch-chip {
    width: 28px; height: 28px; border-radius: 50%;
    flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12);
    background: linear-gradient(135deg, var(--chip-a) 0 50%, var(--chip-b) 50% 100%);
}
.theme-swatch-label { flex: 1; min-width: 0; font-weight: 500; }
.theme-swatch-check { color: var(--asana-primary); opacity: 0; flex-shrink: 0; }
.theme-swatch.is-active .theme-swatch-check { opacity: 1; }

/* --- Header theme menu (dropdown) --- */
.asana-theme-menu-wrap { position: relative; }
.asana-theme-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 320px; max-width: 90vw;
    background: var(--asana-bg);
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-lg);
    box-shadow: var(--asana-shadow-lg);
    padding: 10px; z-index: 600;
    display: none;
    max-height: 70vh; overflow-y: auto; overflow-x: hidden;
}
.asana-theme-menu.is-open { display: block; animation: scaleIn 0.12s ease forwards; }
.asana-theme-menu-title {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--asana-text-tertiary);
    padding: 4px 6px 8px;
}
.asana-theme-menu .theme-picker { grid-template-columns: 1fr 1fr; gap: 6px; }
.asana-theme-menu .theme-swatch { padding: 8px 10px; font-size: 0.82rem; }
.asana-theme-menu .theme-swatch-chip { width: 22px; height: 22px; }

/* --- Sidebar Collapse --- */
.asana-shell.sidebar-collapsed {
    grid-template-columns: var(--asana-sidebar-collapsed-width) 1fr;
}
.asana-shell.sidebar-collapsed .asana-sidebar .asana-sidebar-workspace span:last-child,
.asana-shell.sidebar-collapsed .asana-sidebar-nav,
.asana-shell.sidebar-collapsed .asana-sidebar-footer { display: none; }
.asana-shell.sidebar-collapsed .asana-sidebar { padding: 8px 0; }
.asana-shell.sidebar-collapsed .asana-sidebar-workspace { justify-content: center; padding: 12px; }
.asana-shell.sidebar-collapsed .asana-sidebar-workspace-icon { margin: 0; }

/* --- Sidebar Toggle & Dark Mode Toggle Buttons --- */
.asana-sidebar-toggle,
.asana-dark-toggle {
    border: none; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--asana-text-secondary); border-radius: var(--asana-radius-md);
    transition: all 0.15s ease; flex-shrink: 0;
}
.asana-sidebar-toggle { width: 32px; height: 32px; font-size: 1.1rem; }
.asana-dark-toggle    { width: 32px; height: 32px; font-size: 1.1rem; }
.asana-sidebar-toggle:hover,
.asana-dark-toggle:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); }
/* Sidebar footer variant — full-width with label */
.asana-sidebar-footer .asana-dark-toggle {
    width: 100%; justify-content: flex-start;
    gap: 8px; padding: 8px 12px;
    font-size: 0.82rem; border-radius: var(--asana-radius-sm);
}
/* Sidebar is always dark (#1e1f21) so its button hover must use dark-appropriate color */
.asana-sidebar-footer .asana-dark-toggle:hover {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.9) !important;
}

/* --- Global Search Modal --- */
.asana-search-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: flex-start; justify-content: center;
    background: rgba(0,0,0,0.5);
    padding-top: 15vh;
}
.asana-search-modal.is-open { display: flex; }
.asana-search-modal-content {
    width: 560px; max-width: 90vw;
    background: var(--asana-bg); border-radius: var(--asana-radius-lg);
    box-shadow: var(--asana-shadow-xl); overflow: hidden;
}
.asana-search-modal-input {
    width: 100%; padding: 16px 20px;
    border: none; border-bottom: 1px solid var(--asana-border);
    font-size: 1rem; color: var(--asana-text-primary);
    background: transparent; outline: none;
}
/* outline:none removed the only keyboard-focus cue; restore a visible one. */
.asana-search-modal-input:focus {
    border-bottom-color: var(--asana-primary);
    box-shadow: 0 1px 0 0 var(--asana-primary);
}
.asana-search-modal-input::placeholder { color: var(--asana-text-tertiary); }
.asana-search-modal-results {
    max-height: 360px; overflow-y: auto;
    padding: 8px;
}
.asana-search-modal-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--asana-radius-md);
    cursor: pointer; text-decoration: none;
    color: var(--asana-text-primary);
    transition: background 0.1s ease;
}
.asana-search-modal-item:hover { background: var(--asana-bg-hover); }
.asana-search-modal-item-icon {
    width: 28px; height: 28px; border-radius: var(--asana-radius-sm);
    background: var(--asana-bg-tertiary); display: flex;
    align-items: center; justify-content: center;
    color: var(--asana-text-secondary); font-size: 0.85rem; flex-shrink: 0;
}
.asana-search-modal-item-text { font-size: 0.875rem; }
.asana-search-modal-item-meta { font-size: 0.75rem; color: var(--asana-text-tertiary); }
.asana-search-modal-empty {
    padding: 32px; text-align: center;
    color: var(--asana-text-tertiary); font-size: 0.875rem;
}
.asana-search-modal-hint {
    padding: 12px 16px; border-top: 1px solid var(--asana-border);
    font-size: 0.72rem; color: var(--asana-text-tertiary);
    display: flex; gap: 16px;
}
.asana-search-modal-hint kbd {
    background: var(--asana-bg-tertiary); border: 1px solid var(--asana-border);
    border-radius: 3px; padding: 1px 6px; font-size: 0.7rem;
    font-family: var(--asana-font-mono);
}

/* --- Smooth Animations --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.asana-animate-in { animation: fadeInUp 0.2s ease forwards; }
.asana-fade-in { animation: fadeIn 0.2s ease forwards; }

/* --- Notification Bell --- */
.asana-notification-bell {
    position: relative; width: 32px; height: 32px;
    border-radius: var(--asana-radius-md); border: none;
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--asana-text-secondary); font-size: 1.1rem;
    transition: all 0.15s ease;
}
.asana-notification-bell:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); }
/* Unread count pill, anchored to the bell's top-right corner. The border matches
   the header background so the pill reads as separated from the bell glyph. */
.asana-notification-count {
    position: absolute; top: -1px; right: -1px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--asana-radius-full);
    background: var(--asana-error); color: #fff;
    border: 2px solid var(--asana-bg);
    font-size: 0.62rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; pointer-events: none;
}
.asana-notification-badge {
    position: absolute; top: 2px; right: 2px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--asana-error); border: 1px solid var(--asana-bg);
}

/* --- Accessibility: Focus Visible --- */
*:focus-visible {
    outline: 2px solid var(--asana-primary);
    outline-offset: 2px;
}
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--asana-primary);
    outline-offset: 2px;
}
/* Icon-only / borderless controls need an explicit, clearly visible focus ring
   since they have no background of their own to anchor the outline. */
.sheet-rowtools button:focus-visible,
.sheet-col-opts-btn:focus-visible,
.sheet-clip:focus-visible,
.sheet-attach-cell:focus-visible,
.sheet-drawer-x:focus-visible,
.sheet-assignee-x:focus-visible,
.grid-view-cog:focus-visible,
.asana-dark-toggle:focus-visible,
.asana-sidebar-toggle:focus-visible,
button[aria-label]:focus-visible {
    outline: 2px solid var(--asana-primary);
    outline-offset: 1px;
    border-radius: 4px;
}

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Print Styles --- */
@media print {
    .asana-shell, .asana-sidebar, .asana-header, .asana-filters,
    .asana-page-header, .asana-footer, .asana-dark-toggle,
    .asana-notification-bell, .asana-board-column, .asana-board-grid,
    .asana-panel, .asana-panel-overlay, .asana-search-modal {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        overflow: visible !important;
        height: auto !important;
    }
    .asana-main, .asana-content {
        overflow: visible !important;
        height: auto !important;
    }
    .asana-table-wrap, .asana-table {
        border: none !important;
        box-shadow: none !important;
    }
    .asana-table th {
        background: #f0f0f0 !important;
        color: black !important;
        border: 1px solid #ccc !important;
    }
    .asana-table td {
        border: 1px solid #ccc !important;
    }
    a { color: black !important; text-decoration: underline !important; }
}

/* --- High Contrast Mode --- */
/* Bulk Action Toolbar */
.asana-bulk-bar {
    padding: 12px var(--asana-space-xxl);
    background: var(--asana-bg-secondary);
    border-top: 1px solid var(--asana-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.asana-bulk-bar-label {
    font-size: 0.8125rem;
    color: var(--asana-text-secondary);
    font-weight: 500;
}
.asana-bulk-bar-select {
    padding: 6px 10px;
    border: 1px solid var(--asana-border);
    border-radius: 6px;
    background: var(--asana-bg);
    color: var(--asana-text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
}
.asana-bulk-bar-select:focus {
    outline: 2px solid var(--asana-primary);
    outline-offset: 1px;
}
.asana-bulk-bar-count {
    font-size: 0.8125rem;
    color: var(--asana-text-tertiary);
    margin-left: auto;
}

@media (forced-colors: active) {
    .asana-task-card, .asana-board-card, .asana-card,
    .asana-metric, .asana-board-column {
        border: 2px solid ButtonText !important;
    }
    .asana-badge { border: 1px solid ButtonText !important; }
}


/* ============================================================
   ASANA OVERHAUL v2 — Full redesign additions & overrides
   ============================================================ */

/* --- Dark Sidebar --- */
.asana-sidebar {
    background: #1e1f21;
    border-right: none;
    display: flex;
    flex-direction: column;
}
.asana-sidebar-workspace {
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 0 16px;
    height: 56px;
    gap: 10px;
}
.asana-sidebar-workspace-icon {
    background: var(--asana-primary);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.asana-sidebar-workspace span:last-child {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}
.asana-sidebar-new-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 10px 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.asana-sidebar-new-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.asana-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.asana-sidebar-section {
    padding: 4px 0;
}
.asana-sidebar-section-header {
    /* 0.4 alpha measured 3.80:1 on the #1b1d1a rail — under the 4.5:1 AA floor.
       0.55 measures 5.96:1 and still reads as a de-emphasised section header. */
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 18px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.asana-sidebar-section-header span:first-child {
    display: none;
}
.asana-sidebar-item {
    color: rgba(255,255,255,0.78);
    padding: 7px 18px;
    font-size: 0.875rem;
    border-radius: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s ease, color 0.1s ease;
}
.asana-sidebar-item:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.asana-sidebar-item.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-weight: 500;
}
.asana-sidebar-item-icon {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
    flex-shrink: 0;
}
.asana-sidebar-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.asana-sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 10px 10px;
}
.asana-sidebar-footer a {
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    padding: 7px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background 0.1s ease, color 0.1s ease;
}
.asana-sidebar-footer a:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
}

/* --- Header Polish ---
   This block re-declares .asana-header and .asana-header-logo, which are already
   defined near the top of this file, and being later it WINS. It was hardcoding
   background:#fff and a #e8e8e8 border, which is why the header stayed pure white
   under every tinted light theme (rose gold, teal, …) instead of taking the theme
   surface. Only the properties this block actually means to override are kept;
   colour comes from the tokens set in the base rule. */
.asana-header {
    box-shadow: none;
    padding: 0 20px 0 16px;
    gap: 12px;
}
.asana-header-logo {
    color: var(--asana-text-primary);
    font-weight: 700;
    font-size: 1.05rem;
    gap: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.asana-header-logo-icon {
    width: 28px;
    height: 28px;
    background: var(--asana-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.asana-header-search {
    flex: 1;
    max-width: 440px;
    position: relative;
    display: flex;
    align-items: center;
}
.asana-header-search-icon {
    position: absolute;
    left: 10px;
    color: #9e9c9a;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}
.asana-header-search-input {
    width: 100%;
    background: #f1f1f1;
    border: 1.5px solid transparent;
    border-radius: 20px;
    padding: 7px 14px 7px 34px;
    font-size: 0.84rem;
    color: #6d6e6f;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--asana-font);
}
.asana-header-search-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--asana-primary);
    color: var(--asana-text-primary);
    cursor: text;
    box-shadow: 0 0 0 3px var(--asana-focus-ring);
    border-radius: 8px;
}
.asana-header-new-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--asana-primary);
    color: #fff;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.asana-header-new-btn:hover {
    background: #0a5c56;
    transform: scale(1.08);
    color: #fff;
}
.asana-header-nav {
    display: none;
}
.asana-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.asana-header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--asana-text-secondary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.1s ease;
}
.asana-header-user:hover {
    background: var(--asana-bg-hover);
}
.asana-header-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--asana-primary);
    color: var(--asana-on-primary);
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Main content background --- */
.asana-main {
    background: #f8f8f8;
}
.asana-content {
    background: #f8f8f8;
}

/* --- Page header --- */
.asana-page-header {
    background: #fff;
    border-bottom: 1px solid var(--asana-border);
    padding: 20px 28px 16px;
}
.asana-page-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--asana-text-primary);
}

/* --- Task Panel (slide-out from right) --- */
.task-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.task-panel-overlay.is-active {
    opacity: 1;
    visibility: visible;
}
.task-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 520px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 301;
    transform: translateX(110%);
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    box-shadow: var(--asana-shadow-lg);
    display: flex;
    flex-direction: column;
}
.task-panel.is-open {
    transform: translateX(0);
}
.task-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    height: 56px;
    border-bottom: 1px solid var(--asana-border);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    flex-shrink: 0;
}
.task-panel-close {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--asana-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s ease, color 0.1s ease;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}
.task-panel-close:hover {
    background: #f0f0f0;
    color: var(--asana-text-primary);
}
.task-panel-status-badge {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--asana-bg-secondary);
    color: var(--asana-text-secondary);
    font-weight: 500;
    border: 1px solid var(--asana-border);
}
.task-panel-body {
    padding: 28px 28px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.task-panel-title-input {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--asana-text-primary);
    border: none;
    padding: 0 0 12px;
    width: 100%;
    background: transparent;
    font-family: var(--asana-font);
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease;
    line-height: 1.3;
    margin-bottom: 4px;
}
.task-panel-title-input:focus {
    outline: none;
    border-bottom-color: var(--asana-primary);
}
.task-panel-section {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.task-panel-section:last-child {
    border-bottom: none;
}
.task-panel-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--asana-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}
.task-panel-desc-input {
    font-size: 0.875rem;
    color: var(--asana-text-primary);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    min-height: 80px;
    resize: vertical;
    font-family: var(--asana-font);
    background: #fafafa;
    transition: border-color 0.15s ease, background 0.15s ease;
    line-height: 1.5;
}
.task-panel-desc-input:focus {
    outline: none;
    border-color: var(--asana-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--asana-primary-light);
}
.task-panel-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.task-panel-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.task-panel-field select,
.task-panel-field input[type="date"],
.task-panel-field input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--asana-border-strong);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: var(--asana-font);
    color: var(--asana-text-primary);
    background: var(--asana-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.task-panel-field select:focus,
.task-panel-field input[type="date"]:focus,
.task-panel-field input[type="text"]:focus {
    outline: none;
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 3px var(--asana-primary-light);
}
.task-panel-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 8px 0;
}
.task-panel-save-btn {
    width: 100%;
    padding: 11px;
    background: var(--asana-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--asana-font);
    transition: background 0.15s ease;
    margin-top: 4px;
}
.task-panel-save-btn:hover {
    background: #0a5c56;
}
.task-panel-delete-btn {
    width: 100%;
    padding: 9px;
    background: transparent;
    color: var(--asana-error);
    border: 1px solid #fccdd0;
    border-radius: 8px;
    font-size: 0.84rem;
    cursor: pointer;
    font-family: var(--asana-font);
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-top: 8px;
}
.task-panel-delete-btn:hover {
    background: #fde8ea;
    border-color: var(--asana-error);
}

/* --- View toggle (icon buttons) --- */
.asana-view-toggle {
    display: flex;
    gap: 2px;
    background: #ebebeb;
    border-radius: 6px;
    padding: 3px;
    flex-shrink: 0;
}
.asana-view-btn {
    padding: 5px 12px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--asana-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--asana-font);
    font-weight: 500;
    white-space: nowrap;
}
.asana-view-btn.is-active {
    background: #fff;
    color: var(--asana-text-primary);
    box-shadow: var(--asana-shadow-sm);
}
.asana-view-btn:hover:not(.is-active) {
    background: rgba(255,255,255,0.5);
    color: var(--asana-text-primary);
}

/* --- Filter bar --- */
.asana-filters {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.asana-filter-search {
    position: relative;
    display: flex;
    align-items: center;
}
.asana-filter-search-icon {
    position: absolute;
    left: 9px;
    color: #9e9c9a;
    font-size: 1rem;
    pointer-events: none;
}
.asana-filter-search input {
    background: var(--asana-bg-tertiary);
    border: 1.5px solid transparent;
    border-radius: 6px;
    padding: 6px 12px 6px 30px;
    font-size: 0.84rem;
    color: var(--asana-text-primary);
    width: 200px;
    font-family: var(--asana-font);
    transition: all 0.15s ease;
}
.asana-filter-search input:focus {
    outline: none;
    background: var(--asana-bg);
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 3px var(--asana-focus-ring);
    width: 240px;
}
.asana-filter-select {
    padding: 6px 10px;
    border: 1.5px solid var(--asana-border-strong);
    border-radius: 6px;
    background: var(--asana-bg);
    color: var(--asana-text-secondary);
    font-size: 0.82rem;
    font-family: var(--asana-font);
    cursor: pointer;
    transition: border-color 0.12s ease;
}
.asana-filter-select:focus {
    outline: none;
    border-color: var(--asana-primary);
}
.asana-filter-reset {
    font-size: 0.82rem;
    color: var(--asana-text-tertiary);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 4px;
    transition: color 0.1s ease, background 0.1s ease;
}
.asana-filter-reset:hover {
    color: var(--asana-text-primary);
    background: var(--asana-bg-hover);
}
.asana-filter-spacer {
    flex: 1;
}
.asana-filter-add-btn {
    padding: 7px 16px;
    background: var(--asana-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--asana-font);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s ease;
    flex-shrink: 0;
}
.asana-filter-add-btn:hover {
    background: #0a5c56;
    color: #fff;
}

/* --- Board improvements --- */
.asana-board {
    padding: 16px 20px;
    gap: 14px;
    background: #f8f8f8;
}
.asana-board-column {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    min-width: 280px;
    box-shadow: var(--asana-shadow-sm);
}
.asana-board-column-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.asana-board-column-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--asana-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.asana-board-column-count {
    background: #f0f0f0;
    color: var(--asana-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
}
.asana-board-column-body {
    padding: 8px;
    min-height: 80px;
}
.asana-board-column-add {
    padding: 8px 12px 12px;
}
.asana-board-column-add-btn {
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: 1.5px dashed #d0d0d0;
    border-radius: 7px;
    color: var(--asana-text-tertiary);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: var(--asana-font);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.12s ease;
}
.asana-board-column-add-btn:hover {
    border-color: var(--asana-primary);
    color: var(--asana-primary);
    background: var(--asana-primary-light);
}

/* --- Task Cards --- */
.asana-task-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    box-shadow: var(--asana-shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    position: relative;
}
.asana-task-card:hover {
    box-shadow: var(--asana-shadow-md);
    border-color: #d0d0d0;
}
.asana-task-card:last-child {
    margin-bottom: 0;
}
.asana-task-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.asana-task-card-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #c0c0c0;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.12s ease, background 0.12s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.asana-task-card-checkbox:hover {
    border-color: var(--asana-primary);
}
.asana-task-card-checkbox.checked {
    background: var(--asana-primary);
    border-color: var(--asana-primary);
}
.asana-task-card-checkbox.checked::after {
    content: '\2713';
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
}
.asana-task-card-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--asana-text-primary);
    line-height: 1.4;
    flex: 1;
}
.asana-task-card-title.completed {
    text-decoration: line-through;
    color: var(--asana-text-tertiary);
}
.asana-task-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 4px 0;
}
.asana-task-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
}
.asana-task-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 8px;
}
.asana-task-meta-item {
    font-size: 0.75rem;
    color: var(--asana-text-tertiary);
    display: flex;
    align-items: center;
    gap: 3px;
}
.asana-task-meta-item.overdue {
    color: var(--asana-error);
    font-weight: 500;
}
.asana-task-meta-item.due-today {
    color: var(--asana-today);
    font-weight: 500;
}
.asana-task-assignee-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--asana-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hide inline forms inside cards — only drag-drop form stays */
.asana-task-card .task-update-form {
    display: none !important;
}
.asana-task-card .task-details { display: none !important; }
.asana-task-card .task-delete-form { display: none !important; }
/* Same for list rows */
.asana-list-row .task-update-form { display: none !important; }
.asana-list-row .task-details { display: none !important; }
.asana-list-row .task-delete-form { display: none !important; }

/* Show drag-drop update form (needed for JS but hidden visually) */
.task-update-form {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* --- List view improvements --- */
.asana-list {
    padding: 0 20px 20px;
    background: #f8f8f8;
}
.asana-list-table {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    box-shadow: var(--asana-shadow-sm);
    overflow: hidden;
}
.asana-list-table th {
    background: #fafafa;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--asana-text-secondary);
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #ebebeb;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.asana-list-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--asana-border);
    font-size: 0.875rem;
    vertical-align: middle;
}
.asana-list-row {
    cursor: pointer;
    transition: background 0.1s ease;
}
.asana-list-row:hover {
    background: var(--asana-bg-hover);
}
.asana-list-row:last-child td {
    border-bottom: none;
}
.asana-list-row-title {
    font-weight: 500;
    color: var(--asana-text-primary);
}
.asana-list-row-desc {
    font-size: 0.78rem;
    color: var(--asana-text-tertiary);
    margin-top: 2px;
}
.asana-list-row-checkbox {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #c0c0c0;
    display: inline-block;
    cursor: pointer;
    transition: border-color 0.12s ease;
}
.asana-list-row-checkbox:hover {
    border-color: var(--asana-primary);
}

/* --- Add task inline (in board columns) --- */
.task-create-inline {
    display: none;
    margin: 0 8px 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: var(--asana-shadow-md);
}
.task-create-inline.is-open { display: block; }
.task-create-inline-title {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--asana-border-strong);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: var(--asana-font);
    color: var(--asana-text-primary);
    margin-bottom: 8px;
    background: var(--asana-bg);
}
.task-create-inline-title:focus {
    outline: none;
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 3px var(--asana-focus-ring);
}
.task-create-inline-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.task-create-inline select,
.task-create-inline input[type="date"] {
    padding: 5px 8px;
    border: 1.5px solid var(--asana-border);
    border-radius: 5px;
    font-size: 0.8rem;
    font-family: var(--asana-font);
    background: var(--asana-bg);
    color: var(--asana-text-secondary);
    flex: 1;
    min-width: 0;
}
.task-create-inline-submit {
    padding: 5px 14px;
    background: var(--asana-primary);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: var(--asana-font);
    font-weight: 500;
    white-space: nowrap;
}
.task-create-inline-cancel {
    padding: 5px 8px;
    background: transparent;
    color: var(--asana-text-tertiary);
    border: none;
    border-radius: 5px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: var(--asana-font);
}

/* --- List view create task form at top --- */
.asana-list-create {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    padding: 14px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--asana-shadow-sm);
}
.asana-list-create-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-family: var(--asana-font);
    color: var(--asana-text-primary);
    padding: 4px 0;
}
.asana-list-create-input:focus {
    outline: none;
}
.asana-list-create-input::placeholder {
    color: #b0b0b0;
}

/* --- Metrics bar --- */
.asana-metrics {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    padding: 10px 20px;
    gap: 0;
}
.asana-metric {
    padding: 4px 20px;
    border-right: 1px solid #ebebeb;
}
.asana-metric:first-child { padding-left: 0; }
.asana-metric:last-child { border-right: none; }
.asana-metric-value {
    font-size: 1.2rem;
    font-weight: 700;
}
.asana-metric-label {
    font-size: 0.72rem;
    color: var(--asana-text-tertiary);
    margin-top: 0;
}

/* --- Dashboard --- */
.ems-dashboard-greeting {
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--asana-text-primary);
}
.ems-dashboard-subtitle {
    padding: 4px 0 20px;
    font-size: 0.9rem;
    color: var(--asana-text-secondary);
}
.ems-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    padding: 0 28px 28px;
    align-items: start;
}
.ems-dashboard-main {}
.ems-dashboard-sidebar {}
.ems-dashboard-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    box-shadow: var(--asana-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}
.ems-dashboard-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ems-dashboard-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--asana-text-primary);
    margin: 0;
}
.ems-dashboard-card-link {
    font-size: 0.8rem;
    color: var(--asana-link);
    text-decoration: none;
    font-weight: 500;
    /* Standalone card action, not a link inside prose, so the WCAG 2.5.8 inline
       exemption does not apply — it measured 64x19, under the 24px AA floor. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}
.ems-dashboard-card-link:hover { text-decoration: underline; }
.ems-dashboard-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid #f8f8f8;
    cursor: pointer;
    transition: background 0.1s ease;
    text-decoration: none;
    color: inherit;
}
.ems-dashboard-task-row:last-child { border-bottom: none; }
.ems-dashboard-task-row:hover { background: #fafafa; }
.ems-dashboard-task-check {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #c0c0c0;
    flex-shrink: 0;
}
.ems-dashboard-task-title {
    flex: 1;
    font-size: 0.875rem;
    color: var(--asana-text-primary);
    font-weight: 500;
}
.ems-dashboard-task-due {
    font-size: 0.75rem;
    color: var(--asana-text-tertiary);
    white-space: nowrap;
}
.ems-dashboard-task-due.overdue {
    color: var(--asana-error);
    font-weight: 500;
}
.ems-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.ems-stat-item {
    padding: 18px 20px;
    border-right: 1px solid #f0f0f0;
    text-align: center;
}
.ems-stat-item:last-child { border-right: none; }
.ems-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--asana-text-primary);
    display: block;
}
.ems-stat-label {
    font-size: 0.72rem;
    color: var(--asana-text-tertiary);
    margin-top: 2px;
    display: block;
}
.ems-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
}
.ems-quick-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--asana-bg-secondary);
    border: 1px solid var(--asana-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--asana-text-primary);
    font-size: 0.84rem;
    font-weight: 500;
    transition: all 0.12s ease;
}
.ems-quick-link:hover {
    background: var(--asana-bg-hover);
    border-color: var(--asana-primary);
    box-shadow: var(--asana-shadow-md);
}
.ems-quick-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.ems-empty-section {
    padding: 28px 20px;
    text-align: center;
    color: var(--asana-text-tertiary);
    font-size: 0.875rem;
}

/* --- Dark mode shell surfaces ---
   Second batch of the same flat-grey legacy as the block near .dark-mode's token
   definitions: these shell chrome rules (sidebar, header, panels, filters) were
   still on #18191a / #1a1a1b / #242526 / #3a3b3c while the palette above is warm
   ink. Now tokenised, matching the greys they replace in luminance. */
.dark-mode .asana-sidebar {
    background: var(--asana-bg);
}
.dark-mode .asana-main,
.dark-mode .asana-content {
    background: var(--asana-bg);
}
.dark-mode .asana-task-card,
.dark-mode .asana-list-table,
.dark-mode .asana-board-column,
.dark-mode .ems-dashboard-card,
.dark-mode .asana-page-header {
    background: var(--asana-bg-secondary);
    border-color: var(--asana-border);
}
.dark-mode .asana-header {
    background: var(--asana-bg-secondary);
    border-color: var(--asana-border);
}
.dark-mode .task-panel {
    background: var(--asana-bg-secondary);
}
.dark-mode .task-panel-header {
    background: var(--asana-bg-secondary);
    border-color: var(--asana-border);
}
.dark-mode .task-panel-title-input,
.dark-mode .task-panel-desc-input {
    color: var(--asana-text-primary);
    background: var(--asana-bg-tertiary);
}
.dark-mode .asana-filters {
    background: var(--asana-bg-secondary);
    border-color: var(--asana-border);
}

/* Off-canvas drawer scrim — inert on desktop, activated inside the ≤900px query below. */
.asana-sidebar-scrim { display: none; }
/* Home dashboard outer padding wrapper (provides horizontal gutter for greeting + stats). */
.ems-dashboard-head { padding: 24px 28px 0; }

/* --- Responsive: tablet & mobile shell — the sidebar becomes an off-canvas drawer --- */
@media (max-width: 900px) {
    .asana-shell {
        grid-template-columns: 1fr;
        grid-template-rows: var(--asana-header-height) 1fr;
    }
    .asana-header { grid-column: 1; grid-row: 1; }
    .asana-main   { grid-column: 1; grid-row: 2; }

    /* Sidebar slides in from the left, layered over the content */
    .asana-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--asana-sidebar-width);
        max-width: 84vw;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--asana-shadow-xl);
        z-index: 400;
    }
    .asana-shell.sidebar-open .asana-sidebar { transform: translateX(0); }

    /* The desktop "collapsed" state must not apply on mobile — the drawer owns visibility */
    .asana-shell.sidebar-collapsed,
    html.sidebar-pre-collapsed .asana-shell { grid-template-columns: 1fr; }
    .asana-shell.sidebar-collapsed .asana-sidebar,
    html.sidebar-pre-collapsed .asana-shell .asana-sidebar { padding: 0; }
    .asana-shell.sidebar-collapsed .asana-sidebar-nav,
    .asana-shell.sidebar-collapsed .asana-sidebar-footer,
    html.sidebar-pre-collapsed .asana-shell .asana-sidebar-nav,
    html.sidebar-pre-collapsed .asana-shell .asana-sidebar-footer { display: block; }
    .asana-shell.sidebar-collapsed .asana-sidebar-workspace span:last-child,
    html.sidebar-pre-collapsed .asana-shell .asana-sidebar-workspace span:last-child { display: inline; }
    .asana-shell.sidebar-collapsed .asana-sidebar-workspace,
    html.sidebar-pre-collapsed .asana-shell .asana-sidebar-workspace { justify-content: flex-start; padding: 12px 16px; }

    /* Dim scrim behind the open drawer (the element is appended after .asana-shell) */
    .asana-sidebar-scrim {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 399; opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .asana-shell.sidebar-open ~ .asana-sidebar-scrim { opacity: 1; pointer-events: auto; }

    /* Roomier tap targets in the drawer + menu button */
    .asana-sidebar-toggle { width: 40px; height: 40px; font-size: 1.3rem; }
    .asana-sidebar-item { padding-top: 9px; padding-bottom: 9px; }
    .asana-sidebar-footer a,
    .asana-sidebar-footer .asana-dark-toggle { padding-top: 10px; padding-bottom: 10px; }

    /* Home dashboard → single column */
    .ems-dashboard-grid { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
    .ems-dashboard-head { padding-left: 16px; padding-right: 16px; }

    /* Kanban columns wide enough to read one at a time, with a peek of the next */
    .asana-board { padding: 12px; gap: 10px; }
    .asana-board-column { min-width: 82vw; max-width: 82vw; }

    .task-panel { width: 100vw; }
}

/* --- Project sidebar scrolling for many projects --- */
.asana-sidebar-projects { max-height: 320px; overflow-y: auto; }
.asana-sidebar-projects::-webkit-scrollbar { width: 3px; }
.asana-sidebar-projects::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Safety: hide task update forms everywhere except when explicitly shown */
.task-update-form { display: none !important; }

/* --- Subtasks --- */
.asana-list-subtask { background: rgba(0,0,0,0.015); }
.asana-subtask-indent { color: #aaa; margin-right: 6px; font-size: 0.85rem; }
.asana-subtask-count { font-size: 0.72rem; color: #888; background: #f0f0f0; border-radius: 10px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.asana-task-card .asana-subtask-count { font-size: 0.7rem; color: #888; }

.task-panel-subtask-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.task-panel-subtask { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--asana-border); font-size: 0.85rem; }
.task-panel-subtask:hover { background: var(--asana-bg-secondary); }
.task-panel-subtask-check { width: 14px; height: 14px; border: 2px solid #aaa; border-radius: 50%; flex-shrink: 0; }
.task-panel-subtask-check.done { background: #5cb85c; border-color: #5cb85c; }
.task-panel-subtask-title.completed { text-decoration: line-through; color: #aaa; }

/* --- Task panel assignee checkboxes --- */
.task-panel-assignee-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.task-panel-assignee-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; color: var(--asana-text-primary); }
.task-panel-assignee-item:hover { background: var(--asana-bg-secondary); }
.task-panel-assignee-item input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--asana-primary); }
.task-panel-assignee-avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: var(--asana-primary); color: var(--asana-on-primary); font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* --- List view section headers --- */
.asana-list-section-header { background: var(--asana-bg-secondary); }
.asana-list-section-title { padding: 8px 12px; font-size: 0.8rem; font-weight: 600; color: var(--asana-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--asana-border); }
.asana-list-section-title .asana-board-column-count { font-size: 0.75rem; font-weight: 400; color: var(--asana-text-tertiary); background: rgba(0,0,0,0.06); border-radius: 10px; padding: 1px 7px; }

/* --- Project sub-navigation tab bar --- */
.project-subnav {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 var(--asana-space-xl);
    border-bottom: 1px solid var(--asana-border);
    background: var(--asana-bg);
    overflow-x: auto;
    flex-shrink: 0;
}
.project-subnav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--asana-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.project-subnav-item:hover { color: var(--asana-text-primary); }
.project-subnav-item--active {
    color: var(--asana-primary);
    border-bottom-color: var(--asana-primary);
    font-weight: 600;
}
.project-subnav-icon { font-size: 0.9rem; }

/* ─── Workflow kanban columns ──────────────────────────────────────── */
.wf-col {
    min-width: 240px;
    max-width: 280px;
    flex: 1;
    border-right: 1px solid var(--asana-border);
    display: flex;
    flex-direction: column;
    transition: opacity 0.15s;
}
.wf-task-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.wf-task-card {
    background: var(--asana-bg);
    border: 1px solid var(--asana-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: box-shadow 0.1s, border-color 0.1s;
}
.wf-task-card:hover {
    box-shadow: var(--asana-shadow-md);
    border-color: var(--asana-border-strong);
}

/* ─── File cards (Files tab) ───────────────────────────────────────── */
.file-card {
    background: var(--asana-bg);
    border: 1px solid var(--asana-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.1s, border-color 0.1s;
}
.file-card:hover {
    box-shadow: var(--asana-shadow-md);
    border-color: var(--asana-border-strong);
}

/* ─── Comments (task panel) ────────────────────────────────────────── */
.asana-comment {
    background: var(--asana-bg-secondary);
    border: 1px solid var(--asana-border);
    border-radius: 8px;
    padding: 10px 14px;
}
.asana-comment-form textarea:focus {
    outline: none;
    border-color: var(--asana-primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}

/* ── Sidebar project tree (Phase 1: newbie-UX overhaul) ── */
.sidebar-section-label{padding:16px 12px 4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--asana-text-secondary,#565a53);user-select:none}
.sidebar-project{margin:0 4px}
.sidebar-project-toggle{display:flex;align-items:center;gap:4px;width:100%;background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;text-align:left;font-size:.9rem;color:inherit}
.sidebar-project-toggle:hover{background:var(--asana-bg-hover)}
/* ── Inline SVG icon set (P6-2) ──────────────────────────────────────── */
.ems-icon{width:1em;height:1em;vertical-align:-0.125em;flex-shrink:0;color:currentColor}
/* Rotatable carets: default points right; .open rotates to point down. */
.sidebar-expander .ems-icon,
.sheet-collapse-icon .ems-icon{transition:transform .15s ease}
.sidebar-expander.open .ems-icon,
.sheet-collapse-icon.open .ems-icon{transform:rotate(90deg)}
/* Grid group headers toggle .collapsed on the row; rotate the caret to match. */
.sheet-group-header.collapsed .sheet-collapse-icon .ems-icon{transform:rotate(0deg)}
.sheet-group-header:not(.collapsed) .sheet-collapse-icon .ems-icon{transform:rotate(90deg)}
.sidebar-expander{font-size:.7rem;color:var(--asana-text-secondary,#565a53);min-width:10px;display:inline-flex;align-items:center}
.sidebar-project-sheets{padding-left:20px}
.sidebar-project-sheets a{display:block;padding:3px 8px;border-radius:6px;text-decoration:none;font-size:.88rem;color:var(--asana-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-project-sheets a:hover,.sidebar-project-sheets a.active{background:var(--asana-bg-hover)}
/* Folder tree inside a project (sheet_folders) — one indent step per level. */
.sidebar-folder{margin-left:4px}
.sidebar-folder-toggle{display:flex;align-items:center;gap:4px;width:100%;background:none;border:none;cursor:pointer;padding:3px 8px;border-radius:6px;text-align:left;font-size:.88rem;color:var(--asana-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-folder-toggle:hover{background:var(--asana-bg-hover)}
.sidebar-folder-sheets{padding-left:20px}
.sidebar-new-project{display:block;margin:6px 8px 0;padding:4px 8px;font-size:.88rem;color:var(--asana-text-secondary,#565a53);text-decoration:none;border-radius:6px}
.sidebar-new-project:hover{background:var(--asana-bg-hover)}
.sidebar-empty-projects{padding:6px 12px;font-size:.85rem;color:var(--asana-text-secondary,#565a53)}
/* +New dropdown */
.sidebar-new-menu{position:relative}
.sidebar-new-caret{font-size:.7rem;margin-left:2px}
.sidebar-new-dropdown{position:absolute;left:0;top:100%;z-index:200;background:var(--asana-bg);border:1px solid var(--asana-border,#e3e0d7);border-radius:8px;box-shadow:var(--asana-shadow-md);min-width:220px;padding:4px 0}
.sidebar-new-dropdown a{display:block;padding:8px 16px;text-decoration:none;font-size:.9rem;color:var(--asana-text-primary)}
.sidebar-new-dropdown a:hover{background:var(--asana-bg-hover)}
/* Two-line +New entries: bold action, muted plain-English description. */
.sidebar-new-item-title{display:block;font-weight:600}
.sidebar-new-item-desc{display:block;font-size:.75rem;color:var(--asana-text-secondary,#565a53)}
/* Sheet-count badge on a sidebar project row (from listProjects' sheet_count). */
.sidebar-count{margin-left:auto;flex-shrink:0;font-size:.72rem;font-weight:500;color:var(--asana-text-secondary,#565a53);background:var(--asana-bg-hover);border-radius:10px;padding:0 7px;line-height:1.5}

/* Project landing & index */
.project-index-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.project-index-header h1{margin:0}
.project-header{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.project-header h1{margin:0;flex:1}
.project-description{color:var(--asana-text-secondary,#565a53);margin:4px 0 0}
.project-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.proj-rename-form{display:inline-flex;align-items:center;gap:6px}
.proj-rename-form[hidden]{display:none}
.project-new-sheet-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.project-new-folder-form,.project-new-matter-form{display:flex;align-items:center;gap:8px}
.project-new-folder-form .asana-form-input,.project-new-matter-form .asana-form-input{width:200px;padding:6px 10px}
/* Folder sections on the project page */
.project-folder-section{margin-bottom:24px}
.project-folder-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.project-folder-title{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:1.05rem}
.project-folder-head .project-folder-title{margin:0}
.project-folder-count{font-size:.78rem;font-weight:500;color:var(--asana-text-secondary,#565a53);background:var(--asana-bg-hover);border-radius:10px;padding:1px 8px}
.project-folder-empty{color:var(--asana-text-secondary,#565a53);font-size:.9rem;margin:4px 0 0}
.project-sheet-card-wrap{position:relative;display:flex}
.project-sheet-card-wrap .project-sheet-card{flex:1}
.project-sheet-card-move{position:absolute;top:8px;right:8px;font-size:.72rem;padding:2px 8px;border:1px solid var(--asana-border,#e3e0d7);border-radius:6px;background:var(--asana-bg);color:var(--asana-text-secondary,#565a53);cursor:pointer;opacity:0;transition:opacity .15s}
.project-sheet-card-wrap:hover .project-sheet-card-move,.project-sheet-card-move:focus{opacity:1}
.project-sheet-card-move:hover{background:var(--asana-bg-hover)}
.project-sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.project-sheet-card{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--asana-border,#e3e0d7);border-radius:10px;text-decoration:none;color:inherit;background:var(--asana-bg);transition:box-shadow .15s}
.project-sheet-card:hover{box-shadow:var(--asana-shadow-md)}
.project-sheet-card-icon{font-size:1.8rem;margin-bottom:4px}
.project-sheet-card-title{font-weight:600;font-size:.95rem}
.project-sheet-card-meta{font-size:.8rem;color:var(--asana-text-secondary,#565a53)}
.project-sheet-card-date{font-size:.75rem;color:var(--asana-text-secondary,#565a53)}
/* Matter badge inside a card + the sibling "Open workspace" link */
.matter-badge{display:inline-block;vertical-align:middle;font-size:.66rem;font-weight:600;line-height:1.4;padding:1px 7px;border-radius:10px;background:#e8ddf8;color:#6b3fa0}
.project-sheet-card-workspace{position:absolute;left:16px;bottom:10px;font-size:.75rem;font-weight:600;color:var(--asana-primary);text-decoration:none}
.project-sheet-card-workspace:hover{text-decoration:underline}
/* Give matter cards room for the workspace link pinned to the bottom-left */
.project-sheet-card-wrap:has(.project-sheet-card-workspace) .project-sheet-card{padding-bottom:34px}
/* Estate reports strip — quick links under the project header */
.project-estate-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:8px 12px;border:1px solid var(--asana-border,#e3e0d7);border-radius:8px;background:var(--asana-bg-hover);font-size:.85rem}
.project-estate-strip-label{font-weight:600;color:var(--asana-text-secondary,#565a53)}
.project-estate-strip a{color:var(--asana-primary);text-decoration:none}
.project-estate-strip a:hover{text-decoration:underline}
/* New-project form: Blank vs Estate starter set */
.project-type-option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--asana-border,#e3e0d7);border-radius:8px;margin-top:8px;cursor:pointer}
.project-type-option:hover{background:var(--asana-bg-hover)}
.project-type-option input{margin-top:3px}
.project-type-option:has(input:checked){border-color:var(--asana-primary);background:var(--asana-primary-light,var(--asana-bg-hover))}
.project-type-hint{display:block;font-size:.82rem;font-weight:400;color:var(--asana-text-secondary,#565a53)}
/* Color swatch picker */
.project-color-swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.project-color-swatch-label{cursor:pointer}
.project-color-swatch{display:block;width:28px;height:28px;border-radius:50%;border:3px solid transparent;transition:border-color .1s}
.project-color-swatch-label input:checked+.project-color-swatch{border-color:var(--asana-text-primary)}
.project-color-swatch-label:hover .project-color-swatch{opacity:.85}
/* Screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* My Tasks page */
/* My Tasks — reuses the dashboard card pattern; this just constrains width
   and matches the dashboard's horizontal padding. */
.my-tasks-wrap{padding:0 28px 28px;max-width:920px}
@media (max-width:768px){.my-tasks-wrap{padding-left:16px;padding-right:16px}}

/* ------------------------------------------------------------------ */
/* Toast notifications (window.Toast)                                  */
/* ------------------------------------------------------------------ */
#ems-toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.ems-toast{display:flex;align-items:center;gap:10px;min-width:240px;max-width:380px;padding:12px 14px;border-radius:8px;box-shadow:var(--asana-shadow-md);font-size:.9rem;pointer-events:all;opacity:0;transform:translateX(24px);transition:opacity .25s ease,transform .25s ease}
.ems-toast.ems-toast-visible{opacity:1;transform:translateX(0)}
.ems-toast.ems-toast-hiding{opacity:0;transform:translateX(24px)}
/* Per-type accents */
.ems-toast-success{background:var(--asana-success-bg,#e7f0ed);color:var(--asana-success,#0b6056);border:1px solid var(--asana-success-border,#bfe0d6)}
.ems-toast-error{background:var(--asana-error-bg,#f6e9e7);color:var(--asana-error,#b23a3a);border:1px solid var(--asana-error-border,#e6c4c1)}
.ems-toast-info{background:var(--asana-info-bg,#eaf0f4);color:var(--asana-info,#34698c);border:1px solid var(--asana-info-border,#c2d4e0)}
.ems-toast-msg{flex:1}
.ems-toast-action{background:none;border:none;cursor:pointer;font-size:.88rem;font-weight:600;color:inherit;text-decoration:underline;padding:0}
.ems-toast-close{background:none;border:none;cursor:pointer;font-size:1.1rem;line-height:1;color:inherit;opacity:.6;padding:0 2px}
.ems-toast-close:hover{opacity:1}
/* Dark mode */
.dark-mode .ems-toast-success{background:rgba(12,110,103,.18);border-color:rgba(12,110,103,.4)}
.dark-mode .ems-toast-error{background:rgba(222,57,66,.15);border-color:rgba(222,57,66,.4)}
.dark-mode .ems-toast-info{background:rgba(20,126,212,.15);border-color:rgba(20,126,212,.4)}

/* ------------------------------------------------------------------ */
/* Modal dialogs (window.UI.confirm / window.UI.modal)                 */
/* ------------------------------------------------------------------ */
.ems-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10000;display:flex;align-items:center;justify-content:center}
.ems-modal{background:var(--asana-bg,#fff);border-radius:10px;box-shadow:var(--asana-shadow-lg);max-width:520px;width:calc(100% - 48px);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}
.ems-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--asana-border,#e3e0d7)}
.ems-modal-title{margin:0;font-size:1.05rem;font-weight:600;color:var(--asana-text-primary,#1b1d1a)}
.ems-modal-close-x{background:none;border:none;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--asana-text-secondary,#565a53);padding:0 4px}
.ems-modal-close-x:hover{color:var(--asana-text-primary,#1b1d1a)}
.ems-modal-body{padding:18px 20px;overflow-y:auto;flex:1}
.ems-modal-body-text{margin:0;color:var(--asana-text-primary,#1b1d1a);line-height:1.55}
.ems-modal-error{margin:10px 0 0;padding:8px 12px;border-radius:6px;font-size:.88rem;background:var(--asana-error-bg,#f6e9e7);color:var(--asana-error,#b23a3a);border:1px solid var(--asana-error-border,#e6c4c1)}
.ems-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--asana-border,#e3e0d7)}
/* Field groups inside modal */
.ems-field-group{margin-bottom:14px}
.ems-field-group label{display:block;margin-bottom:4px;font-size:.88rem;font-weight:500;color:var(--asana-text-secondary,#565a53)}
.ems-field-input{width:100%;padding:7px 10px;border:1px solid var(--asana-border-strong,#cfcbbe);border-radius:6px;font-size:.92rem;background:var(--asana-bg,#fff);color:var(--asana-text-primary,#1b1d1a);box-sizing:border-box}
.ems-field-input:focus{outline:none;border-color:var(--asana-primary,#0b6056);box-shadow:0 0 0 3px rgba(12,110,103,.15)}
textarea.ems-field-input{min-height:80px;resize:vertical}
/* Shared button styles */
.ems-btn{padding:8px 18px;border-radius:7px;font-size:.9rem;font-weight:500;cursor:pointer;border:none;transition:background .15s,color .15s}
.ems-btn-primary{background:var(--asana-primary,#0b6056);color:#fff}
.ems-btn-primary:hover:not(:disabled){background:var(--asana-primary-hover,#0d7a6d)}
.ems-btn-primary:disabled{opacity:.55;cursor:not-allowed}
.ems-btn-secondary{background:var(--asana-bg-tertiary,#e9e4d8);color:var(--asana-text-primary,#1b1d1a);border:1px solid var(--asana-border,#e3e0d7)}
.ems-btn-secondary:hover{background:var(--asana-bg-hover,#ece7db)}
.ems-btn-danger{background:var(--asana-error,#b23a3a);color:#fff}
.ems-btn-danger:hover:not(:disabled){background:#c42f38}
/* Dark mode for modals */
.dark-mode .ems-modal{background:var(--asana-bg,#1a1c19)}
.dark-mode .ems-field-input{background:var(--asana-bg-secondary,#23251f)}
/* Compact data tables (matter registers, billing, audit, contacts…) */
.ems-table{width:100%;border-collapse:collapse;margin-bottom:12px}
/* Data tables scroll instead of being clipped on a narrow/touch screen.
   Measured: the audit log rendered a 580px table inside a 377px column and
   /report a 436px one inside 369px. Neither parent scrolled, so the right-hand
   columns (Detail, IP) were cut off with no way to reach them — worse than a
   scrollbar, because nothing indicated content was missing. display:block turns
   the table into its own scroll container; text still wraps first, so this only
   engages when the table genuinely cannot shrink further. Covers all 22
   .ems-table/.report-tbl call sites at once rather than wrapping each by hand. */
@media (max-width: 640px), (pointer: coarse) {
    .ems-table, .report-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Native checkboxes/radios render ~13x13. At desktop that is a user-agent
       default and exempt from WCAG 2.5.8, but on a finger it is simply hard to
       hit, so form controls get a real target on coarse pointers only. */
    .asana-form-group input[type="checkbox"],
    .asana-form-group input[type="radio"],
    .asana-form-label input[type="checkbox"],
    .asana-form-label input[type="radio"] {
        width: 24px; height: 24px; vertical-align: middle;
    }
}
.ems-table th{padding:6px;text-align:left;border-bottom:2px solid var(--asana-border-strong,#ccc);font-size:12px;color:var(--asana-text-secondary)}
.ems-table td{padding:6px;border-bottom:1px solid var(--asana-border,#eee)}
/* Archived rows — show-archived toggle */
.sheet-row-archived { opacity: .55; }
.sheet-archived-toggle { margin-left: 4px; }

/* --- Mobile tap targets for core shell flows (Phase 6 P6-1) ---------
   Additive to the existing 768px/900px rules — bumps hit areas to ≥40px
   on phones so header/nav/sub-nav controls are comfortably tappable. */
@media (max-width: 640px) {
    .asana-header-nav-item {
        min-height: 40px;
        padding: 10px 12px;
    }
    .project-subnav-item {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
    .asana-btn, .asana-btn-sm {
        min-height: 40px;
    }
    /* iOS Safari zooms the viewport whenever a focused field is <16px. Force a
       16px minimum on every text-entry control so tapping any input on a phone
       never triggers the jarring auto-zoom. (The sheet grid already does this.) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Reveal hover-only affordances on touch devices, where :hover never fires. */
@media (hover: none) {
    .project-sheet-card-move,
    .sheet-group-edit {
        opacity: 1;
    }
}

/* ============================================================
   "Fiduciary" identity — display serif titles + brass letterhead
   rule (the case-caption signature) + tabular figures.
   Appended last so it layers over the base component rules.
   ============================================================ */

/* Display serif on page-level titles only (h1 tier) — section h2s stay Inter
   for a clean two-tier hierarchy. */
.asana-page-title,
.sheet-h1,
.asana-content > h1,
.project-header h1,
.help-article h1,
.help-page h1,
.asana-login-card-logo-text {
    font-family: var(--asana-font-display);
    font-weight: 600;
    letter-spacing: .005em;
}

/* ============================================================
   HELP / GUIDE PAGE
   ============================================================ */
.help-page {
    max-width: 920px;
    padding: var(--asana-space-xl) var(--asana-space-xxl) var(--asana-space-xxxl);
}
.help-lead {
    font-size: 0.95rem; color: var(--asana-text-secondary);
    line-height: 1.6; margin: 4px 0 var(--asana-space-xl);
    max-width: 70ch;
}
.help-toc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--asana-space-sm);
    margin-bottom: var(--asana-space-xxl);
}
.help-toc a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-md);
    background: var(--asana-bg-secondary);
    color: var(--asana-text-secondary);
    font-size: 0.825rem; font-weight: 500; text-decoration: none;
    transition: all 0.15s ease;
}
.help-toc a:hover {
    border-color: var(--asana-primary);
    color: var(--asana-text-primary);
    text-decoration: none;
}
.help-toc a .help-toc-num {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%; background: var(--asana-primary-light);
    color: var(--asana-primary); font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.help-section { margin-bottom: var(--asana-space-xxl); scroll-margin-top: 16px; }
.help-section > h2 {
    font-size: 1.2rem; color: var(--asana-text-primary);
    margin-bottom: 6px; display: flex; align-items: baseline; gap: 10px;
}
.help-section > h2 .help-section-num {
    font-family: var(--asana-font-display);
    color: var(--asana-accent); font-size: 1.1rem; font-weight: 600;
}
.help-section > p { color: var(--asana-text-secondary); line-height: 1.6; margin-bottom: var(--asana-space-md); max-width: 72ch; }
.help-card {
    border: 1px solid var(--asana-border);
    border-radius: var(--asana-radius-lg);
    background: var(--asana-bg);
    padding: var(--asana-space-lg) var(--asana-space-xl);
    box-shadow: var(--asana-shadow-sm);
}
.help-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--asana-space-md); margin-top: var(--asana-space-sm);
}
.help-grid .help-card h3 { font-size: 0.95rem; margin-bottom: 4px; color: var(--asana-text-primary); }
.help-grid .help-card p { font-size: 0.85rem; color: var(--asana-text-secondary); line-height: 1.55; margin: 0; }
.help-steps, .help-list { margin: 0 0 var(--asana-space-md) 0; padding-left: 0; }
.help-steps { counter-reset: help-step; }
.help-steps li, .help-list li {
    position: relative; list-style: none;
    padding: 8px 0 8px 34px;
    color: var(--asana-text-secondary); line-height: 1.55;
    border-bottom: 1px solid var(--asana-border);
}
.help-steps li:last-child, .help-list li:last-child { border-bottom: none; }
.help-steps li strong, .help-list li strong { color: var(--asana-text-primary); }
.help-steps li::before {
    counter-increment: help-step; content: counter(help-step);
    position: absolute; left: 0; top: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--asana-primary); color: var(--asana-on-primary);
    font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.help-list li::before {
    content: ""; position: absolute; left: 10px; top: 16px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--asana-accent);
}
.help-tip {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--asana-info-bg);
    border: 1px solid var(--asana-info-border);
    border-radius: var(--asana-radius-md);
    padding: 12px 14px; margin: var(--asana-space-md) 0;
    font-size: 0.85rem; color: var(--asana-text-secondary); line-height: 1.55;
}
.help-tip strong { color: var(--asana-text-primary); }
.help-admin-note {
    display: inline-block; font-size: 0.68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--asana-accent); background: var(--asana-accent-light);
    padding: 2px 8px; border-radius: var(--asana-radius-full);
    margin-left: 6px; vertical-align: middle;
}
.help-page kbd {
    background: var(--asana-bg-tertiary); border: 1px solid var(--asana-border-strong);
    border-bottom-width: 2px; border-radius: 4px;
    padding: 1px 6px; font-family: var(--asana-font-mono);
    font-size: 0.78rem; color: var(--asana-text-primary);
}
.help-footer {
    margin-top: var(--asana-space-xxl); padding-top: var(--asana-space-lg);
    border-top: 1px solid var(--asana-border);
    font-size: 0.82rem; color: var(--asana-text-tertiary);
}

/* The signature: a short brass "case-caption" rule beneath the page title. */
.asana-page-title::after,
.sheet-h1::after,
.asana-content > h1::after,
.project-header h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-top: 8px;
    background: var(--asana-accent);
    border-radius: 1px;
}

/* Tabular figures wherever numbers line up (grids, dates, stats, badges). */
.sheet-grid,
.sheet-cell,
.ems-dashboard-card-value,
.ems-dashboard-stat-value,
.sheet-pill,
.sheet-num,
.fid-num {
    font-variant-numeric: tabular-nums;
}

/* Distinctive-but-accessible focus: brass ring on paper/ink. */
*:focus-visible {
    outline: 2px solid var(--asana-accent) !important;
    outline-offset: 2px;
}

/* ============================================================
   Dark sidebar rail — legibility fixes. The rail is a fixed
   ink surface regardless of light/dark mode, so its text must
   be light-on-dark (the project tree was authored for a light
   bg and went near-invisible here). Appended last to win.
   ============================================================ */
.asana-sidebar { background: #1b1d1a; }

.asana-sidebar-footer a { color: rgba(255,255,255,0.74); }
.asana-sidebar-footer a:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* 0.42 alpha measured 4.05:1 on the #1b1d1a rail — under the 4.5:1 AA floor for
   body text. 0.55 measures 5.96:1 and still reads as a de-emphasised label. */
.sidebar-section-label { color: rgba(255,255,255,0.55); }

/* Missed by this rail pass: the version label still used --asana-text-tertiary,
   which is a DARK grey under a light theme, leaving it at 2.98:1 on the rail
   (the rail is ink-coloured in both modes, so a light-theme token cannot work
   here). It needs the same light-on-dark treatment as its siblings. */
.asana-sidebar-version { color: rgba(255,255,255,0.55); }
.sidebar-project-toggle,
.sidebar-project-toggle a { color: rgba(255,255,255,0.86); }
.sidebar-project-toggle a.active { color: #fff; }
.sidebar-project-toggle:hover { background: rgba(255,255,255,0.08); }
.sidebar-expander { color: rgba(255,255,255,0.5); }
.sidebar-project-sheets a { color: rgba(255,255,255,0.66); }
.sidebar-project-sheets a:hover,
.sidebar-project-sheets a.active { background: rgba(255,255,255,0.10); color: #fff; }
.sidebar-folder-toggle { color: rgba(255,255,255,0.78); }
.sidebar-folder-toggle:hover { background: rgba(255,255,255,0.08); }
.sidebar-new-project,
.sidebar-empty-projects { color: rgba(255,255,255,0.55); }
.sidebar-empty-projects a { color: var(--asana-accent-hover); }
.sidebar-new-project:hover { background: rgba(255,255,255,0.08); color: #fff; }