/* === Space Grotesk — Local @font-face === */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/SpaceGrotesk-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/SpaceGrotesk-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* === Tier 1: Primitives === */
    --obsidian: #0e0e0e;
    --machine-grey: #131313;
    --steel-dark: #1a1a1a;
    --steel-mid: #2a2a2a;
    --steel-light: #3a3a3a;
    --hairline: #333333;
    --hairline-light: #444444;
    --cool-white: #f2f2f2;
    --cool-white-muted: #b0b0b0;
    --cool-white-dim: #888888;
    --safety-orange: #fc9430;
    --safety-orange-hover: #e8862a;
    --system-green: #4CAF50;
    --warning-amber: #FFC107;
    --emergency-red: #F44336;

    /* === Tier 2: Semantic === */
    --color-surface: var(--obsidian);
    --color-surface-secondary: var(--machine-grey);
    --color-surface-elevated: var(--steel-dark);
    --color-border: var(--hairline);
    --color-border-light: var(--hairline-light);
    --color-text: var(--cool-white);
    --color-text-secondary: var(--cool-white-muted);
    --color-text-muted: var(--cool-white-dim);
    --color-accent: var(--safety-orange);
    --color-accent-hover: var(--safety-orange-hover);
    --color-hover: rgba(255, 255, 255, 0.05);
    --color-primary: var(--safety-orange);

    /* Status */
    --color-success: var(--system-green);
    --color-warning: var(--warning-amber);
    --color-danger: var(--emergency-red);
    --color-info: #3b82f6;

    /* Status tints */
    --success-light: rgba(76, 175, 80, 0.12);
    --danger-light: rgba(244, 67, 54, 0.12);
    --warning-light: rgba(255, 193, 7, 0.12);
    --info-light: rgba(59, 130, 246, 0.12);

    /* === Tier 3: Component === */
    --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    --focus-ring: 0 0 0 3px rgba(252, 148, 48, 0.35);

    /* Legacy aliases — maps old V1 token names to Industrial Core */
    --primary-color: var(--color-accent);
    --primary-dark: var(--color-accent-hover);
    --primary-light: rgba(252, 148, 48, 0.08);
    --secondary-color: var(--color-text-secondary);
    --success-color: var(--color-success);
    --danger-color: var(--color-danger);
    --warning-color: var(--color-warning);
    --border-color: var(--color-border);
    --bg-light: var(--color-surface-secondary);
    --bg-white: var(--color-surface);
    --text-dark: var(--color-text);
    --text-light: var(--color-text-secondary);
    --accent-color: var(--color-accent);
    --bg-primary: var(--color-surface);
    --bg-secondary: var(--color-surface-secondary);
    --bg-hover: var(--color-hover);
    --bg-tertiary: var(--color-surface-elevated);
    --bg-card: var(--color-surface-secondary);
    --border-light: var(--color-border);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-medium: var(--color-text-secondary);
    --primary: var(--color-accent);
    --danger: var(--color-danger);
    --warning: var(--color-warning);
    --success: var(--color-success);
    --info: var(--color-info);
    --border: var(--color-border);
    --background: var(--color-surface-secondary);
    --surface: var(--color-surface-secondary);
    --card-bg: var(--color-surface-secondary);
    --text: var(--color-text);
    --secondary-hover: var(--steel-light);
    --success-hover: #43A047;
    --danger-hover: #E53935;
    --warning-hover: #FFB300;
    --info-color: var(--color-info);
    --info-hover: #2563eb;
    --admin-color: #7c3aed;
    --admin-hover: #6d28d9;

    /* Project task colors */
    --project-bg: #9BB1FF;
    --project-bg-hover: #8aa2f0;
    --project-border: #7088d4;
    --project-text: #1a2a4a;

    /* Mind Map Galaxy Colors (Sprint 8D) */
    --mindmap-complete: #4CAF50;
    --mindmap-in-progress: #FFC107;
    --mindmap-not-started: #2196F3;
    --mindmap-overdue: #FF5722;
    --mindmap-project: #9C27B0;
    --mindmap-leaf-complete: #81C784;
    --mindmap-leaf-in-progress: #FFD54F;
    --mindmap-leaf-not-started: #64B5F6;
    --mindmap-leaf-overdue: #FF8A65;
}

/* === Daylight (Light) Theme === */
[data-theme="daylight"] {
    --color-surface: #f7f7f7;
    --color-surface-secondary: #ffffff;
    --color-surface-elevated: #f0f0f0;
    --color-border: #e0e0e0;
    --color-border-light: #eeeeee;
    --color-text: #1a1a1a;
    --color-text-secondary: #555555;
    --color-text-muted: #888888;
    --color-accent: #e67e22;
    --color-accent-hover: #d35400;
    --color-hover: rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
    --focus-ring: 0 0 0 3px rgba(230, 126, 34, 0.35);
    --success-light: #ecfdf5;
    --danger-light: #fef2f2;
    --warning-light: #fffbeb;
    --info-light: #eff6ff;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

/* Industrial Core typography — uppercase headings */
h1, h2, h3, h4 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Global scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* ==================== Industrial Core: Table Styling ====================
   Uppercase headers, horizontal-only borders, instant row hover.
   ======================================================================= */

table thead th,
.data-table thead th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    border-left: none;
    border-right: none;
}

table td,
.data-table tbody td {
    border-bottom: 1px solid var(--color-border);
    border-left: none;
    border-right: none;
}

table tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--color-hover);
    transition: background 0s;
}

/* ==================== Industrial Core: Plate-on-Plate Cards ====================
   Left border stripe accent on elevated surfaces.
   =============================================================================== */

.card, .panel, .widget-card, .info-card {
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
}

.card::before, .panel::before,
.widget-card::before, .info-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-border);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* ==================== Industrial Core: Zero-Duration Transitions ====================
   Instant state changes — no animation lag on interactive elements.
   ==================================================================================== */

button, .btn, a, input, select, textarea,
[role="button"], [role="tab"], [role="menuitem"] {
    transition: background 0s, color 0s, border-color 0s;
}

/* ==================== Focus-Visible (Keyboard Accessibility) ====================
   Shows a clear focus ring ONLY for keyboard navigation, not mouse clicks.
   Safety Orange focus ring for Industrial Core.
   ================================================================================ */

button:focus-visible, .btn:focus-visible,
a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Buttons and interactive elements */
.btn:focus-visible,
.tab-btn:focus-visible,
.vertical-tab-btn:focus-visible,
.filter-select:focus-visible,
.tree-item:focus-visible,
.nav-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Form inputs — upgrade :focus to :focus-visible */
.form-control:focus-visible,
.search-input:focus-visible,
.inline-edit-select:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* Links */
a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Close buttons */
.modal-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* App Container */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background-color: var(--bg-white);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header h1 {
    font-size: 24px;
    color: var(--primary-color);
}

.sidebar-logo {
    max-width: 100%;
    height: auto;
    max-height: 45px;
    object-fit: contain;
}

.sidebar-section {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-section h2 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    margin-bottom: 12px;
}

/* Collapsible sidebar section */
.sidebar-section-collapsible {
    padding: 12px 20px;
}

.sidebar-section-collapsible h2 {
    margin-bottom: 0;
}

.collapsible-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.collapsible-header:hover {
    color: var(--text-color);
}

.collapse-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.sidebar-section-collapsible.expanded .collapse-icon {
    transform: rotate(90deg);
}

.collapsible-content {
    margin-top: 12px;
}

.quick-ref-group {
    margin-bottom: 12px;
}

.quick-ref-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 6px;
    opacity: 0.8;
}

.sidebar-list.compact-list {
    max-height: 120px;
    font-size: 13px;
}

.sidebar-list.compact-list .sidebar-item {
    padding: 4px 8px;
}

.org-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
}

.sidebar-list {
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.sidebar-list .placeholder {
    color: var(--text-light);
    font-size: 13px;
    text-align: center;
    padding: 10px;
}

.sidebar-item {
    padding: 8px 12px;
    margin-bottom: 4px;
    background-color: var(--bg-light);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-item:hover {
    background-color: var(--primary-color);
    color: white;
}

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

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top-bar {
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar h1 {
    font-size: 28px;
    color: var(--text-dark);
}

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

/* Search Box */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-light);
    font-size: 14px;
    pointer-events: none;
}

.search-input {
    padding: 8px 32px 8px 36px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    min-width: 250px;
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.clear-search {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

/* Filter Controls */
.filter-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    background-color: var(--bg-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-select:hover {
    border-color: var(--primary-color);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.clear-search:hover {
    color: var(--text-dark);
}

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Task Tree */
.task-tree-container {
    background-color: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.task-tree-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

#bulkModeToggle {
    transition: all 0.2s;
}

#bulkModeToggle.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

#bulkModeToggle.active:hover {
    background-color: var(--primary-dark);
}

.task-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-node {
    display: block;
    margin-bottom: 4px;
}

.task-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    background-color: var(--bg-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.task-item:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Ensure all child elements inherit white text on hover */
.task-item:hover .task-node-title,
.task-item:hover .task-node-meta,
.task-item:hover .task-node-date,
.task-item:hover .task-node-priority,
.task-item:hover .task-id-badge,
.task-item:hover .task-node-toggle,
.task-item:hover .task-node-assignments,
.task-item:hover .drag-handle {
    color: white;
}

/* Status badges should maintain contrast on hover - use semi-transparent bg */
.task-item:hover .task-node-status {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

.task-item.selected {
    background-color: var(--primary-color);
    color: white;
}

/* Same inheritance for selected state */
.task-item.selected .task-node-title,
.task-item.selected .task-node-meta,
.task-item.selected .task-node-date,
.task-item.selected .task-node-priority,
.task-item.selected .task-id-badge,
.task-item.selected .task-node-toggle,
.task-item.selected .task-node-assignments,
.task-item.selected .drag-handle {
    color: white;
}

.task-item.selected .task-node-status {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Project-level tasks (root tasks) */
.task-item-project {
    background: var(--project-bg);
    color: var(--project-text);
    font-weight: 500;
    border-left: 4px solid var(--project-border);
    box-shadow: var(--shadow-sm);
}

.task-item-project:hover {
    background: var(--project-bg-hover);
    box-shadow: var(--shadow-md);
}

.task-item-project.selected {
    background: var(--project-bg-hover);
    box-shadow: var(--shadow-lg);
    border-left-color: var(--project-border);
}

.task-item-project .task-node-title {
    font-weight: 600;
    font-size: 15px;
}

.task-item-project .task-node-meta {
    opacity: 0.95;
}

.task-item-project .task-node-status {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
    font-weight: 500;
}

.task-item-project .task-node-assignments {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.task-node-toggle {
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    cursor: pointer;
    font-size: 12px;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s, color 0.15s;
}

.task-node-toggle:hover {
    background-color: var(--bg-hover);
    color: var(--primary-color);
}

.task-expand-all-btn {
    background: none;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    cursor: pointer;
    font-size: 10px;
    color: var(--text-light);
    transition: color 0.2s, transform 0.2s, background-color 0.2s;
    border-radius: 3px;
}

.task-expand-all-btn:hover {
    color: var(--primary-color);
    background-color: var(--bg-light);
    transform: scale(1.1);
}

.task-expand-all-btn:active {
    transform: scale(0.95);
}

/* White icon on root-level (project) tasks */
.task-item-project .task-expand-all-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
}

.task-item-project .task-expand-all-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transform: scale(1.1);
}

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

.task-node-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.task-node-breadcrumb {
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.6;
    margin-bottom: 4px;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.task-item-project .task-node-breadcrumb {
    color: rgba(255, 255, 255, 0.7);
}

.task-id-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
    font-family: 'Courier New', monospace;
}

.task-item-project .task-id-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.task-node-meta {
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    gap: 12px;
}

.task-node-status {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.task-node-status.status-not-started {
    background-color: var(--secondary-color);
    color: white;
}

.task-node-status.status-in-progress {
    background-color: var(--warning-color);
    color: white;
}

.task-node-status.status-complete {
    background-color: var(--success-color);
    color: white;
}


.task-node-assignments {
    padding: 2px 6px;
    background-color: rgba(37, 99, 235, 0.1);
    border-radius: 3px;
    font-size: 11px;
    color: var(--primary-color);
}

/* Integrated dependency indicators (Sprint 6C) */
.task-node-dependencies {
    padding: 2px 6px;
    background-color: rgba(168, 85, 247, 0.1);
    border-radius: 3px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.task-node-dependencies i {
    font-size: 11px;
    transition: all 0.2s ease;
}

/* Link icon - this task depends on others */
.task-node-dependencies .dependency-in {
    color: #7c3aed;
}

/* Bullseye icon - other tasks depend on this (clickable) */
.task-node-dependencies .dependency-out {
    color: var(--warning-color);
    cursor: pointer;
}

.task-node-dependencies .dependency-out:hover {
    color: #ff6b35;
    transform: scale(1.2);
}

/* Legacy support */
.task-node-dependency {
    padding: 2px 6px;
    background-color: rgba(168, 85, 247, 0.1);
    border-radius: 3px;
    font-size: 11px;
    color: #7c3aed;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.task-node-dependency i {
    font-size: 10px;
}

/* Sprint 5K: Project Phase Badges */
.task-node-phase {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-node-phase.phase-draft {
    background-color: rgba(107, 114, 128, 0.2);
    color: #4b5563;
    border: 1px solid #9ca3af;
}

.task-node-phase.phase-proposal {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--primary-color);
    border: 1px solid #60a5fa;
}

.task-node-phase.phase-under-review {
    background-color: rgba(245, 158, 11, 0.2);
    color: #d97706;
    border: 1px solid #fbbf24;
}

.task-node-phase.phase-approved {
    background-color: rgba(16, 185, 129, 0.2);
    color: #059669;
    border: 1px solid #34d399;
}

.task-node-phase.phase-active {
    background-color: rgba(139, 92, 246, 0.2);
    color: #7c3aed;
    border: 1px solid #a78bfa;
}

.task-node-phase.phase-complete {
    background-color: rgba(34, 197, 94, 0.2);
    color: #16a34a;
    border: 1px solid #4ade80;
}

.task-node-phase.phase-archived {
    background-color: rgba(156, 163, 175, 0.2);
    color: var(--text-secondary);
    border: 1px solid #d1d5db;
}

.task-node-phase.phase-cancelled {
    background-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
    border: 1px solid #f87171;
}

/* Custom Field Badges */
.task-node-priority {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.task-node-priority.priority-low {
    background-color: #e0e7ff;
    color: #3730a3;
}

.task-node-priority.priority-medium {
    background-color: #fef3c7;
    color: #92400e;
}

.task-node-priority.priority-high {
    background-color: #fed7aa;
    color: #9a3412;
}

.task-node-priority.priority-critical {
    background-color: var(--danger-color);
    color: white;
    font-weight: 700;
}

.task-node-date {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: #d1fae5;
    color: #065f46;
}

.task-node-date.task-node-overdue {
    background-color: #fee2e2;
    color: #991b1b;
    font-weight: 700;
}

.task-node-tags {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: #e9d5ff;
    color: #6b21a8;
}

.task-node-cost {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: #dcfce7;
    color: #166534;
}

.task-node-cost-incomplete {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.task-node-warning {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background-color: #fff3cd;
    color: #856404;
}

/* Better contrast when task is selected (blue background) */
.task-node.selected .task-node-priority.priority-low {
    background-color: #818cf8;
    color: white;
}

.task-node.selected .task-node-priority.priority-medium {
    background-color: #fbbf24;
    color: #78350f;
}

.task-node.selected .task-node-priority.priority-high {
    background-color: #fb923c;
    color: #7c2d12;
}

.task-node.selected .task-node-priority.priority-critical {
    background-color: var(--danger-color);
    color: white;
}

.task-node.selected .task-node-date {
    background-color: #6ee7b7;
    color: #064e3b;
}

.task-node.selected .task-node-date.task-node-overdue {
    background-color: #fca5a5;
    color: #7f1d1d;
}

.task-node.selected .task-node-tags {
    background-color: #c084fc;
    color: white;
}

/* Project nodes (purple gradient background) - keep white badges */
.task-node-project .task-node-priority,
.task-node-project .task-node-date,
.task-node-project .task-node-tags {
    background-color: rgba(255, 255, 255, 0.9);
    color: #4c1d95;
    font-weight: 700;
}

.task-node-project .task-node-priority.priority-critical {
    background-color: var(--danger-color);
    color: white;
}

.task-node-project .task-node-date.task-node-overdue {
    background-color: var(--danger-color);
    color: white;
}

.task-node-loading {
    opacity: 0.6;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 600;
}

.empty-state p {
    font-size: 14px;
    max-width: 400px;
    line-height: 1.6;
}

/* Forms and Buttons */
.btn {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

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

.btn-primary:hover {
    background-color: var(--primary-dark);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--secondary-hover);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: var(--danger-hover);
}

.btn-small {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-xs {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
}

.btn-xs i {
    font-size: 11px;
}

/* ==================== Button Standards (Sprint 5.9) ====================
   Standardized button categories and size aliases
   ======================================================================== */

/* Size alias - .btn-small and .btn-sm are equivalent */
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* Large button */
.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
    justify-content: center;
}

/* Success button */
.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-success:hover {
    background-color: var(--success-hover);
}

/* Warning button — dark text for contrast on amber background */
.btn-warning {
    background-color: var(--warning-color);
    color: var(--text-primary);
}

.btn-warning:hover {
    background-color: var(--warning-hover);
}

/* Info button */
.btn-info {
    background-color: var(--info-color);
    color: white;
}

.btn-info:hover {
    background-color: var(--info-hover);
}

/* Outline button variants */
.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

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

.btn-outline-secondary:hover {
    background-color: var(--secondary-color);
    color: white;
}

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

.btn-outline-danger:hover {
    background-color: var(--danger-color);
    color: white;
}

/* Generic outline button — neutral border, no fill */
.btn-outline {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    background-color: var(--bg-hover);
    border-color: var(--secondary-color);
}

/* Outline info variant */
.btn-outline-info {
    background-color: transparent;
    border: 1px solid var(--info-color);
    color: var(--info-color);
}

.btn-outline-info:hover {
    background-color: var(--info-color);
    color: white;
}

/* Text/link button - no background, just text */
.btn-text {
    background: none;
    border: none;
    color: var(--primary-color);
    padding: 4px 8px;
}

.btn-text:hover {
    background-color: var(--bg-hover);
    text-decoration: underline;
}

/* Ghost button - minimal styling */
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-medium);
    padding: 6px 10px;
}

.btn-ghost:hover {
    background-color: var(--bg-hover);
    color: var(--text-dark);
}

/* Icon-only button - use when button has no text */
.btn-icon-only {
    padding: 8px;
    width: 36px;
    height: 36px;
    justify-content: center;
}

.btn-icon-only.btn-sm {
    width: 28px;
    height: 28px;
    padding: 4px;
}

.btn-icon-only.btn-xs {
    width: 24px;
    height: 24px;
    padding: 2px;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Modal Overlay — Phase 11+ naming convention (same behavior as .modal) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Modal Container — Phase 11+ naming convention (same behavior as .modal-content) */
.modal-container {
    background-color: var(--bg-white);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.modal-container.modal-sm { max-width: 500px; }
.modal-container.modal-md { max-width: 600px; }
.modal-container.modal-lg { max-width: 800px; }

/* Smooth entrance for all modals (plays when modal goes from display:none to visible) */
.modal > .modal-content,
.modal-overlay > .modal-container {
    animation: modalSlideIn 0.2s ease both;
}

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

/* Sprint 7.12 modals must stack above taskDetailModal (both z-index: 1000, but taskDetailModal wins by DOM order) */
#createLayerModal,
#editLayerModal,
#importLayerModal,
#setLocationModal,
#importLocationsModal {
    z-index: 1050;
}

/* Sprint 8H: Vendor picker stacks above detail modal, form stacks above picker */
#vendorPickerModal,
#fixedCostModal {
    z-index: 1050;
}

/* Change password modal stacks above profile modal */
#changePasswordModal {
    z-index: 1050;
}
#vendorFormModal {
    z-index: 1060;
}

/* Equipment sub-modals stack above equipment library modal */
#equipmentModal,
#equipmentDetailModal,
#maintenanceModal,
#assignEquipmentModal {
    z-index: 1050;
}

/* Resource import modal stacks above library modals (material, vendor, equipment) */
#resourceImportModal {
    z-index: 1050;
}

/* Daily log edit + entry modals stack above detail modal */
#dailyLogModal,
#dailyLogEntryModal {
    z-index: 1050;
}

/* Resource Import — Column Mapping Layout */
.res-import-mapping-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.res-import-mapping-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    transition: border-color 0.15s, background 0.15s;
}

.res-import-mapping-row.mapped {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 5%, var(--bg-primary));
}

.res-import-mapping-row.unmapped {
    opacity: 0.7;
}

.res-import-csv-col {
    flex: 1;
    min-width: 0;
}

.res-import-csv-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.res-import-sample {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: monospace;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.res-import-sample em {
    font-family: inherit;
    font-style: italic;
    opacity: 0.5;
}

.res-import-arrow {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    font-size: 13px;
}

.res-import-target {
    flex: 1.2;
    min-width: 0;
}

.res-import-target select {
    width: 100%;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
}

.modal-content {
    background-color: var(--bg-white);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, var(--bg-white), var(--bg-light));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-header h2 {
    font-size: 20px;
    color: var(--text-dark);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: 1.3;
}

.modal-header h3 i {
    font-size: 16px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-light);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.modal-close:hover {
    color: var(--text-dark);
    background-color: var(--bg-hover);
    transform: scale(1.05);
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--bg-light);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ==================== Modal Size Standards (Sprint 5.9) ====================
   Standard modal sizes - use these instead of inline styles
   Apply to .modal-content element: <div class="modal-content modal-md">
   ========================================================================== */

/* Extra Small - Confirmations, simple inputs */
.modal-content.modal-xs {
    max-width: 400px;
}

/* Modal sizes — both naming conventions supported (modal-sm = modal-small, etc.) */
.modal-content.modal-sm,
.modal-content.modal-small {
    max-width: 500px;
}

.modal-content.modal-md,
.modal-content.modal-medium {
    max-width: 600px;
}

.modal-content.modal-lg,
.modal-content.modal-large {
    max-width: 800px;
}

.modal-content.modal-xl {
    max-width: 900px;
}

.modal-content.modal-xxl {
    max-width: 1100px;
}

/* ==================== Standard Modal Layout Pattern ====================
   Use .modal-flex for modals that need fixed header/footer with scrolling body
   This matches the task detail modal pattern
   ======================================================================== */

.modal-content.modal-flex {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

.modal-flex .modal-header {
    flex-shrink: 0;
}

.modal-flex .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-flex .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--bg-light);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
    z-index: 10;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Fixed height variants for flex modals */
.modal-content.modal-flex.modal-height-sm {
    height: 50vh;
    max-height: 50vh;
}

.modal-content.modal-flex.modal-height-md {
    height: 70vh;
    max-height: 70vh;
}

.modal-content.modal-flex.modal-height-lg {
    height: 85vh;
    max-height: 85vh;
}

/* Tab bar inside modal-flex (sits between header and body, doesn't scroll) */
.modal-tab-bar {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-white);
    flex-shrink: 0;
}

/* Form Controls */
.form-group {
    margin-bottom: 16px;
}

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

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-dark);
}

.required {
    color: var(--danger-color);
    margin-left: 2px;
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-light);
}

.form-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.form-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text-dark);
}

/* Subtasks List */
.subtasks-list {
    background-color: var(--bg-light);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    min-height: 40px;
}

.subtask-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin-bottom: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

.subtask-item:hover {
    background-color: var(--bg-light);
    border-color: var(--primary-color);
}

.subtask-item:last-child {
    margin-bottom: 0;
}

.subtask-name {
    font-weight: 500;
}

.subtask-status {
    padding: 2px 8px;
    background-color: var(--secondary-color);
    color: white;
    border-radius: 3px;
    font-size: 11px;
}

.subtask-status.status-not-started {
    background-color: var(--secondary-color);
}

.subtask-status.status-in-progress {
    background-color: var(--warning-color);
}

.subtask-status.status-complete {
    background-color: var(--success-color);
}

/* Members List */
.members-list {
    background-color: var(--bg-light);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    min-height: 40px;
}

.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    font-size: 14px;
    transition: background-color 0.15s, border-color 0.15s;
}

.member-item:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
}

.member-item:last-child {
    margin-bottom: 0;
}

.member-remove {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s, color 0.15s;
}

.member-remove:hover {
    background-color: var(--danger-light);
    color: var(--danger-hover);
}

.member-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.member-selector select {
    flex: 1;
}

.member-count {
    font-size: 12px;
    color: var(--text-light);
}

/* Assignment List */
.assignments-list {
    background-color: var(--bg-light);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    min-height: 40px;
}

.assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin-bottom: 6px;
    font-size: 14px;
}

.assignment-item:last-child {
    margin-bottom: 0;
}

.assignment-remove {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s, color 0.15s;
}

.assignment-remove:hover {
    background-color: var(--danger-light);
    color: var(--danger-hover);
}

.assignment-selector {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.assignment-selector select {
    flex: 1;
}

/* Comments List */
.comments-list {
    background-color: var(--bg-light);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.comment-item {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 8px;
}

.comment-item:last-child {
    margin-bottom: 0;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.comment-author {
    font-weight: 600;
    color: var(--text-dark);
}

.comment-type {
    background-color: var(--warning-color);
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.comment-type.system {
    background-color: var(--secondary-color);
}

.comment-date {
    color: var(--text-light);
    font-size: 12px;
}

.comment-text {
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.5;
}

.comment-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-input textarea {
    resize: vertical;
}

/* Markdown Toolbar */
.markdown-toolbar {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    align-items: center;
}

.toolbar-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    font-size: 14px;
}

.toolbar-btn:hover {
    background: var(--bg-hover);
    border-color: var(--secondary-color);
    color: var(--text-dark);
}

.toolbar-btn:active {
    background: var(--bg-tertiary);
}

.toolbar-btn i {
    font-size: 13px;
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 4px;
}

.markdown-toolbar + textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        width: 250px;
    }
}

@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .sidebar-section {
        display: inline-block;
        min-width: 250px;
        padding: 15px;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
    }

    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .task-node {
        font-size: 14px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .sidebar-header {
        padding: 12px;
    }

    .sidebar-header h1 {
        font-size: 20px;
    }

    .top-bar {
        padding: 12px;
    }

    .top-bar h1 {
        font-size: 20px;
    }

    .content-area {
        padding: 12px;
    }

    .modal-footer {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}

/* User and Work Unit Badges */
.user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    font-size: 11px;
    font-weight: 600;
    margin-right: 10px;
    flex-shrink: 0;
}

.workunit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-color: var(--success-color);
    color: white;
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

.sidebar-item-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.sidebar-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

/* Loading & Empty States */
.loading-spinner {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.loading-spinner i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.empty-state i {
    display: block;
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 14px;
    margin: 4px 0;
}

.empty-state.small {
    padding: 16px 12px;
}

.empty-state.small i {
    font-size: 24px;
    margin-bottom: 8px;
}

/* Data card — compact info card for detail views */
.data-card {
    background: var(--bg-light);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.data-card label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 300px;
    padding: 16px 20px;
    background-color: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

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

.toast.info {
    border-left: 4px solid var(--primary-color);
}

/* Sprint 6D-3: Warning toast */
.toast.warning {
    border-left: 4px solid #e67e22;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast.success .toast-icon {
    color: var(--success-color);
}

.toast.error .toast-icon {
    color: var(--danger-color);
}

.toast.info .toast-icon {
    color: var(--primary-color);
}

/* Sprint 6D-3: Warning toast icon */
.toast.warning .toast-icon {
    color: #e67e22;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    color: var(--text-dark);
}

.toast-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    color: var(--text-dark);
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

.loading-overlay .spinner {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* Keyboard Shortcuts Help */
.shortcuts-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.shortcuts-help {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    cursor: default;
}

.shortcuts-help h3 {
    margin: 0 0 20px 0;
    font-size: 24px;
    color: var(--text-dark);
}

.shortcuts-help ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shortcuts-help li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.shortcuts-help li:last-child {
    border-bottom: none;
}

.shortcuts-help kbd {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    min-width: 120px;
    text-align: center;
}

.shortcuts-help li span {
    flex: 1;
    margin-left: 20px;
    font-size: 14px;
    color: var(--text-dark);
}

/* Sprint 4E: Enhanced keyboard shortcuts help */
.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 16px;
}

.shortcut-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color, #007bff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shortcuts-hint {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--border-color);
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* User Indicator Styles */
.user-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background-color: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-right: 12px;
}

.user-indicator i.fa-user-circle {
    font-size: 20px;
    color: var(--primary-color);
}

.user-indicator span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

.btn-logout {
    color: var(--text-light);
}

.btn-logout:hover {
    background-color: var(--danger-color);
    color: white;
}

/* Change Password Modal */
.modal-small .modal-content {
    max-width: 450px;
}

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
}

.error-message {
    padding: 10px 12px;
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
    color: #c33;
    font-size: 13px;
    margin-top: 12px;
}

.success-message {
    padding: 10px 12px;
    background-color: #efe;
    border: 1px solid #cfc;
    border-radius: 4px;
    color: #373;
    font-size: 13px;
    margin-top: 12px;
}

/* User Management Styles */
.btn-admin {
    background-color: var(--admin-color);
    color: white;
    width: 100%;
}

.btn-admin:hover {
    background-color: var(--admin-hover);
}

.modal-large {
    max-width: 1000px;
}

.modal-medium {
    max-width: 600px;
}

.user-management-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
}

.search-box-inline {
    position: relative;
    flex: 1;
    max-width: 300px;
}

.search-box-inline i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.search-input-inline {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-primary);
}

.users-table thead {
    background-color: var(--bg-light);
    border-bottom: 2px solid var(--border-color);
}

.users-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.users-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.users-table tbody tr:hover {
    background-color: var(--bg-light);
}

.loading-cell {
    text-align: center;
    color: var(--text-light);
    padding: 40px !important;
}

.user-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.user-status-active {
    background-color: #d1fae5;
    color: #065f46;
}

.user-status-inactive {
    background-color: #fee2e2;
    color: #991b1b;
}

.user-role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.user-role-admin {
    background-color: #ddd6fe;
    color: #5b21b6;
}

.user-role-manager {
    background-color: #dbeafe;
    color: var(--color-accent-hover);
}

.user-role-user {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.user-role-viewer {
    background-color: #f3f4f6;
    color: var(--text-secondary);
}

/* ==========================================================================
   Permission Groups Styles
   ========================================================================== */

/* Card Grid Layout */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.pg-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pg-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.pg-card.pg-card-system {
    border-left: 3px solid var(--primary-color);
}

.pg-card-header {
    padding: 14px 16px 10px;
}

.pg-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pg-card-name .pg-system-icon {
    font-size: 12px;
    color: var(--primary-color);
}

.pg-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pg-card-meta {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.pg-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pg-card-stat i {
    font-size: 11px;
    opacity: 0.6;
}

.pg-scope-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.pg-scope-global {
    background: #eff6ff;
    color: var(--color-accent-hover);
}

.pg-scope-org {
    background: #f5f3ff;
    color: #6d28d9;
}

.pg-card-actions {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.pg-card-actions .btn {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 5px 8px;
}

.pg-card-actions .btn-icon-action {
    flex: 0 0 auto;
    width: 30px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.pg-empty-state i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.pg-empty-state p {
    margin: 4px 0;
    font-size: 14px;
}

/* Permission Picker (Create/Edit Form) */
.permission-picker {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-light);
}

.permission-category {
    margin-bottom: 12px;
}

.permission-category:last-child {
    margin-bottom: 0;
}

/* Dual-List User Picker (Assign Modal) */
.dual-list-container {
    display: flex;
    gap: 8px;
    align-items: stretch;
    min-height: 260px;
}

.dual-list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-white);
    overflow: hidden;
}

.dual-list-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.dual-list-count {
    background: var(--primary-color);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}

.dual-list-search {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.dual-list-search input {
    font-size: 12px;
    padding: 4px 8px;
    height: 28px;
}

.dual-list-items {
    flex: 1;
    overflow-y: auto;
    min-height: 180px;
    max-height: 260px;
}

.dual-list-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
    user-select: none;
}

.dual-list-item:last-child {
    border-bottom: none;
}

.dual-list-item:hover {
    background: var(--bg-hover);
}

.dual-list-item.selected {
    background: var(--primary-light, #e8f0fe);
    border-left: 3px solid var(--primary-color);
    padding-left: 9px;
}

.dual-list-item-name {
    font-weight: 500;
    color: var(--text-primary);
}

.dual-list-item-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
}

.dual-list-item-already {
    font-size: 10px;
    color: var(--warning-color, #e67e22);
    margin-left: auto;
    font-style: italic;
}

.dual-list-arrows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 2px;
}

.dual-list-arrows .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.dual-list-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Scope selector (Assign Modal) */
.scope-cascade-group {
    margin-top: 4px;
    padding: 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.scope-cascade-group .form-group {
    margin-bottom: 10px;
}

.scope-cascade-group .form-group:last-child {
    margin-bottom: 0;
}

/* Group Users table */
.pg-users-table {
    width: 100%;
    border-collapse: collapse;
}

.pg-users-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.pg-users-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.pg-users-table tbody tr:last-child td {
    border-bottom: none;
}

.pg-users-table tbody tr:hover {
    background: var(--bg-hover);
}

/* Worker badges */
.worker-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
}

.worker-badge-yes {
    background: #ecfdf5;
    color: #065f46;
}

.worker-badge-no {
    background: #fef2f2;
    color: #991b1b;
}

/* Effective permissions display */
.effective-perm-section {
    margin-bottom: 16px;
}

.effective-perm-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.effective-perm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.effective-perm-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
}

.effective-perm-tag.from-role {
    background: #dbeafe;
    color: var(--color-accent-hover);
}

.effective-perm-tag.from-group {
    background: #f3e8ff;
    color: #6d28d9;
}

/* Permission count badge in user management */
.perm-group-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* User role viewer badge */
.user-role-viewer {
    background: var(--bg-hover);
    color: #475569;
}

.user-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.user-action-btn {
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-dark);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-action-btn:hover {
    background-color: var(--bg-light);
}

.user-action-btn i {
    margin-right: 4px;
}

.user-action-edit:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.user-action-deactivate:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.user-action-activate:hover {
    color: var(--success-color);
    border-color: var(--success-color);
}

/* Icon-only action buttons (compact) */
.user-action-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.user-action-icon-btn:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.user-action-icon-btn.user-action-reset:hover {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.user-action-icon-btn.user-action-deactivate:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.user-action-icon-btn.user-action-activate:hover {
    color: var(--success-color);
    border-color: var(--success-color);
}

.form-group label .required {
    color: var(--danger-color);
}

#usersTableContainer {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Organization Management Styles */
.org-assignment-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.current-orgs h4,
.add-org-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.org-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.org-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
}

.org-item:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
}

.org-name {
    font-weight: 500;
    color: var(--text-dark);
    flex: 1;
}

.org-date {
    font-size: 12px;
    color: var(--text-light);
    margin: 0 12px;
}

.add-org-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.add-org-form select {
    flex: 1;
}

.add-org-form button {
    flex-shrink: 0;
}

.no-data {
    padding: 16px;
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    background-color: var(--bg-light);
    border: 1px dashed var(--border-color);
    border-radius: 6px;
}

.user-action-org {
    color: var(--primary-color);
}

.user-action-org:hover {
    color: #6c63ff;
    border-color: #6c63ff;
    background-color: rgba(108, 99, 255, 0.1);
}

.user-action-reset {
    color: #ff9800;
}

.user-action-reset:hover {
    color: #f57c00;
    border-color: #f57c00;
    background-color: rgba(255, 152, 0, 0.1);
}

.btn-admin {
    background-color: var(--admin-color);
    color: white;
    border-color: var(--admin-color);
}

.btn-admin:hover {
    background-color: var(--admin-hover);
    border-color: var(--admin-hover);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* Team Directory Styles */
.directory-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding: 4px;
}

.directory-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.2s;
}

.directory-card:hover {
    box-shadow: var(--shadow-md);
}

.directory-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.directory-card-avatar {
    font-size: 48px;
    color: var(--primary-color);
}

.directory-card-info {
    flex: 1;
}

.directory-card-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-dark);
}

.directory-card-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 60px;
}

.directory-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-light);
}

.directory-detail i {
    width: 16px;
    color: var(--secondary-color);
}

/* Profile Modal Styles */
.modal-small {
    max-width: 500px;
}

.modal-medium {
    max-width: 600px;
}

.modal-large {
    max-width: 800px;
}

/* Role Badge Styles in Directory */
.role-admin {
    background-color: var(--danger-color);
}

.role-manager {
    background-color: var(--primary-color);
}

.role-user {
    background-color: var(--success-color);
}

/* Form Text Helper */
.form-text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-light);
}

/* Checkbox Filter Styles */
.checkbox-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.checkbox-filter:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-light);
}

.checkbox-filter input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.checkbox-filter input[type="checkbox"]:checked + span {
    color: var(--primary-color);
    font-weight: 600;
}

.checkbox-filter span {
    font-size: 14px;
    color: var(--text-dark);
}

/* Task highlighting for My Tasks filter */
.task-item.my-task {
    background-color: #eff6ff;
    border-left: 3px solid var(--primary-color);
}

.task-item.not-my-task {
    opacity: 0.5;
}


/* ===== Drag & Drop Styles (Sprint 2A) ===== */

/* Drag Handle */
.drag-handle {
    cursor: grab;
    padding: 0 8px;
    color: var(--text-light);
    opacity: 0.4;
    transition: opacity 0.2s;
    user-select: none;
    display: flex;
    align-items: center;
}

.drag-handle:hover {
    opacity: 1;
    color: var(--primary-color);
}

.drag-handle:active {
    cursor: grabbing;
}

/* Children Container */
.task-children {
    padding-left: 24px;
}

/* Dragging States */
.task-ghost {
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 2px 0 !important;
}

.task-ghost::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

.task-ghost * {
    display: none !important;
}

.task-dragging {
    opacity: 0.3;
}

.task-chosen {
    opacity: 1;
    background-color: var(--bg-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Fallback drag element (the one following the cursor) */
.sortable-fallback {
    opacity: 0.9 !important;
    background-color: var(--bg-white) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    transform: rotate(3deg) !important;
    cursor: grabbing !important;
}

/* Drop Zone Indicator */
.is-dragging .task-children {
    min-height: 40px;
    background-color: #f0f9ff;
    border: 2px dashed var(--border-color);
    border-radius: 4px;
    transition: all 0.2s;
}

.is-dragging .task-children:empty::before {
    content: 'Drop here';
    display: block;
    text-align: center;
    color: var(--text-light);
    padding: 10px;
    font-size: 14px;
}

/* Prevent selection during drag */
.is-dragging {
    user-select: none;
}

/* Hide drag handle on very small screens */
@media (max-width: 640px) {
    .drag-handle {
        padding: 0 4px;
    }
}

/* Drop target highlighting when dragging over task items */
.is-dragging .task-item:hover {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    background-color: #eff6ff !important;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08);
}

.is-dragging .task-item-project:hover {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.15);
}

/* Drop target class when dragging */
.task-item.drop-target {
    transition: all 0.15s ease;
}

.task-item.drop-target:hover {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    background-color: #eff6ff !important;
}

.task-item-project.drop-target:hover {
    background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%) !important;
    border: 2px dashed rgba(255, 255, 255, 0.5);
}

/* ===== Inline Editing Styles (Sprint 2B) ===== */

/* Make editable fields show cursor pointer */
.task-node-title,
.task-node-status,
.task-node-priority,
.task-node-date {
    cursor: pointer;
    transition: background-color 0.15s;
}

.task-node-title:hover {
    background-color: rgba(37, 99, 235, 0.05);
    border-radius: 2px;
}

.task-node-status:hover,
.task-node-priority:hover,
.task-node-date:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Inline edit inputs */
.inline-edit-input,
.inline-edit-select {
    font-family: inherit;
    font-size: inherit;
    padding: 4px 8px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    outline: none;
    background-color: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    width: 100%;
    max-width: 300px;
}

.inline-edit-title {
    font-weight: 600;
    font-size: 15px;
    min-width: 200px;
}

.inline-edit-select {
    cursor: pointer;
    padding: 2px 6px;
    min-width: 120px;
    transition: border-color 0.15s;
}

.inline-edit-select:hover {
    border-color: var(--primary-color);
}

.inline-edit-date {
    min-width: 150px;
}

.inline-edit-input:focus,
.inline-edit-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Visual hint that fields are editable */
.task-node-content {
    position: relative;
}

.task-node-title::after {
    content: '✏️';
    opacity: 0;
    margin-left: 8px;
    font-size: 12px;
    transition: opacity 0.2s;
}

.task-item:hover .task-node-title::after {
    opacity: 0.3;
}

/* ===== Bulk Operations Styles (Sprint 2B) ===== */

/* Checkbox styling */
.task-checkbox {
    margin: 0 8px 0 4px;
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: none; /* Hidden by default */
}

/* Show checkboxes when bulk mode is active */
.bulk-mode-active .task-checkbox {
    display: block;
}

.task-checkbox:hover {
    transform: scale(1.1);
}

/* Bulk actions bar */
.bulk-actions-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, var(--primary-color) 0%, #4f46e5 100%);
    color: white;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

.bulk-actions-bar.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.bulk-actions-bar.loading {
    opacity: 0.6;
    pointer-events: none;
}

.bulk-actions-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bulk-selected-count {
    font-weight: 600;
    font-size: 15px;
    min-width: 100px;
}

.bulk-actions-buttons {
    display: flex;
    gap: 8px;
    flex: 1;
}

.bulk-actions-buttons .btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 12px;
    font-size: 13px;
    transition: all 0.2s;
}

.bulk-actions-buttons .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.bulk-actions-buttons .btn-danger {
    background: rgba(220, 38, 38, 0.8);
    border-color: rgba(220, 38, 38, 1);
}

.bulk-actions-buttons .btn-danger:hover {
    background: rgba(220, 38, 38, 1);
}

.bulk-actions-buttons .btn-text {
    background: transparent;
    border: none;
    color: white;
    opacity: 0.8;
}

.bulk-actions-buttons .btn-text:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* Bulk dialog overlay */
.bulk-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s;
}

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

.bulk-dialog {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 24px;
    min-width: 400px;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
}

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

.bulk-dialog h3 {
    margin: 0 0 8px 0;
    color: var(--text-dark);
    font-size: 20px;
}

.bulk-dialog p {
    margin: 0 0 16px 0;
    color: var(--text-light);
    font-size: 14px;
}

.bulk-dialog .form-control {
    width: 100%;
    margin-bottom: 20px;
}

.bulk-dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.bulk-dialog-buttons .btn {
    min-width: 80px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bulk-actions-content {
        flex-direction: column;
        align-items: stretch;
    }

    .bulk-actions-buttons {
        flex-wrap: wrap;
    }

    .bulk-dialog {
        min-width: 90%;
        margin: 0 16px;
    }
}

/* ===============================
   Template Manager Styles
   =============================== */

/* Template dialog overlay */
.template-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease-out;
}

/* Template save dialog */
.template-dialog {
    background-color: var(--bg-white);
    border-radius: 8px;
    padding: 24px;
    min-width: 450px;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

.template-dialog h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-dialog h3 i {
    color: var(--primary-color);
}

.template-dialog > p {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 14px;
}

.template-dialog-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.template-info {
    background-color: var(--bg-light);
    border-left: 3px solid var(--primary-color);
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.template-info i {
    color: var(--primary-color);
}

/* Template library dialog */
.template-library-overlay {
    align-items: flex-start;
    padding-top: 40px;
}

.template-library-dialog {
    background-color: var(--bg-white);
    border-radius: 8px;
    min-width: 700px;
    max-width: 900px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

.template-library-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.template-library-header h3 {
    font-size: 20px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.template-library-header i {
    color: var(--primary-color);
}

.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.btn-close:hover {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.template-library-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.template-search {
    margin-bottom: 20px;
}

.template-search input {
    width: 100%;
}

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

.template-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.template-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.template-empty p {
    font-size: 16px;
    margin-bottom: 8px;
}

.template-empty small {
    font-size: 14px;
}

/* Template card */
.template-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.template-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.template-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.template-card-header h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
}

.template-card-badges {
    display: flex;
    gap: 6px;
}

.badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--radius-xl);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-public {
    background-color: #dbeafe;
    color: var(--color-accent-hover);
}

.badge-private {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-count {
    background-color: var(--bg-light);
    color: var(--text-light);
}

.template-card-description {
    color: var(--text-light);
    font-size: 14px;
    margin: 8px 0;
    line-height: 1.5;
}

.template-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.template-card-date {
    font-size: 12px;
    color: var(--text-light);
}

.template-card-actions {
    display: flex;
    gap: 8px;
}

.template-use-btn {
    padding: 6px 12px;
    font-size: 13px;
}

.template-delete-btn {
    padding: 6px 10px;
}

.template-library-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* Animations — fadeIn defined once near line 3338 */

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

/* Responsive */
@media (max-width: 768px) {
    .template-library-dialog {
        min-width: 90%;
        max-width: 95%;
        max-height: 85vh;
    }

    .template-dialog {
        min-width: 90%;
        max-width: 95%;
    }

    .template-card-header {
        flex-direction: column;
        gap: 8px;
    }

    .template-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===============================
   Dependency Manager Styles
   =============================== */

.dependency-dialog {
    background-color: var(--bg-white);
    border-radius: 8px;
    padding: 24px;
    min-width: 600px;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease-out;
}

.dependency-dialog h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dependency-dialog h3 i {
    color: var(--primary-color);
}

.dependency-task-name {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 24px;
    display: block;
}

.dependency-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.dependency-section:last-of-type {
    border-bottom: none;
}

.dependency-section h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.dependency-help {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.dependency-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.dependency-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
}

.dependency-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dependency-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.dependency-info .dependency-task-name {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 14px;
    margin: 0;
}

.dependency-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}

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

.dependency-note {
    font-size: 12px;
    color: var(--text-light);
    font-style: italic;
}

.dependency-empty {
    color: var(--text-light);
    font-style: italic;
    padding: 12px;
    text-align: center;
}

.dependency-status-widget {
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
}

.dependency-status-widget.blocked {
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.dependency-status-widget.ready {
    background-color: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

.dependency-status-widget i {
    margin-right: 6px;
}

/* Dependency indicator in tree view */
.task-dependency-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 6px;
}

.task-dependency-indicator.blocked {
    background-color: #fee2e2;
    color: #991b1b;
}

.task-dependency-indicator.ready {
    background-color: #dcfce7;
    color: #166534;
}

.task-dependency-indicator i {
    margin-right: 3px;
    font-size: 10px;
}

/* ============================================
   VIEW SWITCHER STYLES
   ============================================ */

.view-switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.view-tabs {
    display: flex;
    gap: 8px;
}

.view-tab {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-white);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.view-tab:hover:not(:disabled) {
    background-color: var(--bg-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

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

.view-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--text-light);
}

.view-tab i {
    font-size: 16px;
}

.project-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-filter label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================
   GANTT VIEW STYLES
   ============================================ */

.gantt-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white);
    overflow: hidden;
}

.gantt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.gantt-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gantt-zoom-controls label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    margin-right: 8px;
}

.zoom-btn {
    padding: 6px 16px;
    font-size: 13px;
}

.zoom-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.gantt-chart {
    flex: 1;
    overflow: auto;
    padding: 24px;
    background-color: #fafafa;
}

/* Gantt Empty State */
.gantt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-light);
}

.gantt-empty-state h3 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.gantt-empty-state p {
    font-size: 14px;
    max-width: 400px;
    line-height: 1.6;
}

/* Frappe Gantt Customizations */
.gantt .bar {
    fill: var(--primary-color);
    stroke: var(--primary-dark);
    stroke-width: 1;
}

.gantt .bar-progress {
    fill: var(--primary-dark);
}

.gantt .bar.gantt-project {
    fill: #7c3aed;
    stroke: #6d28d9;
}

.gantt .bar.gantt-milestone {
    fill: #f59e0b;
    stroke: #d97706;
}

.gantt .bar.gantt-complete {
    fill: var(--success-color);
    stroke: #059669;
}

.gantt .bar.gantt-in-progress {
    fill: var(--primary-color);
    stroke: var(--primary-dark);
}

.gantt .bar.gantt-high-priority {
    fill: var(--danger-color);
    stroke: #dc2626;
}

.gantt .bar-label {
    fill: white;
    font-weight: 500;
    font-size: 12px;
}

/* Gantt Popup Styles */
.gantt-popup {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0;
    min-width: 280px;
    max-width: 350px;
}

.gantt-popup-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-light);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gantt-popup-header strong {
    font-size: 14px;
    color: var(--text-dark);
    flex: 1;
}

.gantt-popup-body {
    padding: 12px 16px;
}

.gantt-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-dark);
}

.gantt-popup-row:last-child {
    margin-bottom: 0;
}

.gantt-popup-row i {
    color: var(--text-light);
    width: 16px;
    text-align: center;
}

.gantt-popup-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-light);
    border-radius: 0 0 8px 8px;
}

.gantt-popup-footer small {
    font-size: 11px;
    color: var(--text-light);
}

/* View Container */
.view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Override Frappe Gantt default styles */
.gantt-container .gantt {
    overflow: visible !important;
}

.gantt .grid-header {
    fill: var(--bg-light);
    stroke: var(--border-color);
}

.gantt .grid-row {
    fill: transparent;
}

.gantt .grid-row:nth-child(even) {
    fill: rgba(0, 0, 0, 0.02);
}

.gantt .today-highlight {
    fill: rgba(37, 99, 235, 0.1);
}

.gantt .arrow {
    stroke: var(--primary-color);
    stroke-width: 1.5;
    fill: none;
}

.gantt .handle {
    fill: var(--primary-color);
    cursor: ew-resize;
    opacity: 0;
}

.gantt .bar-wrapper:hover .handle {
    opacity: 1;
}
/* ===================================
   Kanban Board Styles
   =================================== */

.kanban-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-light);
}

.kanban-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.kanban-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-filters label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 24px;
    height: calc(100% - 60px);
    overflow-x: auto;
}

.kanban-column {
    background-color: var(--bg-white);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 100%;
}

.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 2px solid var(--border-color);
    background-color: var(--bg-light);
    border-radius: 8px 8px 0 0;
}

.kanban-column-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark);
}

.kanban-column-count {
    background-color: var(--primary-color);
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}

.kanban-column-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    min-height: 100px;
}

.kanban-column-body.drag-over {
    background-color: rgba(37, 99, 235, 0.05);
    border: 2px dashed var(--primary-color);
    border-radius: 4px;
}

.kanban-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: grab;
    transition: box-shadow 0.2s, transform 0.2s;
}

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

.kanban-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.kanban-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
    line-height: 1.4;
}

.kanban-card-id {
    font-size: 12px;
    color: var(--text-light);
    background-color: var(--bg-light);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.kanban-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.kanban-card-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kanban-card-badge.priority-high {
    background-color: #fee;
    color: #c00;
}

.kanban-card-badge.priority-medium {
    background-color: #ffefd5;
    color: #ff8c00;
}

.kanban-card-badge.priority-low {
    background-color: #e0f2fe;
    color: #0369a1;
}

.kanban-card-badge.assignment {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.kanban-card-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.kanban-card-progress-bar {
    flex: 1;
    height: 4px;
    background-color: var(--bg-light);
    border-radius: 2px;
    overflow: hidden;
}

.kanban-card-progress-fill {
    height: 100%;
    background-color: var(--success-color);
    transition: width 0.3s;
}

.kanban-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-size: 14px;
}

/* ===================================
   Dual Board Layout (Parent + Leaf)
   =================================== */

.kanban-section {
    margin-bottom: 20px;
}

.kanban-section-header {
    padding: 12px 24px;
    background-color: var(--bg-white);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban-section-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-section-header h2 i {
    color: var(--primary-color);
}

.kanban-section-subtitle {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 400;
}

/* Parent Board Specific Styles */
.kanban-parent-board {
    min-height: 200px;
    max-height: 300px;
    background-color: rgba(249, 250, 251, 0.5);
}

.kanban-parent-board .kanban-column {
    min-height: 150px;
    max-height: 250px;
}

.kanban-parent-column-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    min-height: 100px;
}

/* Parent cards are read-only */
.kanban-parent-card {
    cursor: pointer;
    background-color: #fafbfc;
    border-left: 4px solid var(--primary-color);
}

.kanban-parent-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.kanban-parent-card .kanban-card-title {
    color: var(--text-dark);
    font-weight: 500;
}

.kanban-parent-card .kanban-card-title i {
    color: var(--primary-color);
    margin-right: 4px;
}

/* Leaf Board Specific Styles */
.kanban-leaf-board {
    flex: 1;
    height: auto;
    min-height: 400px;
}

.kanban-leaf-board .kanban-column {
    min-height: 400px;
}

.kanban-leaf-column-body {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    min-height: 200px;
}

.kanban-leaf-column-body.drag-over {
    background-color: rgba(37, 99, 235, 0.05);
    border: 2px dashed var(--primary-color);
    border-radius: 4px;
}

/* Leaf cards are draggable */
.kanban-leaf-card {
    cursor: grab;
    background-color: var(--bg-white);
}

.kanban-leaf-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.kanban-leaf-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* Child count badge for parent cards */
.kanban-card-badge.child-count {
    background-color: #e0e7ff;
    color: #4338ca;
    font-size: 11px;
}

/* Adjust container to fit dual boards */
.kanban-container {
    overflow-y: auto;
    height: 100%;
}

/* Update board height to accommodate both sections */
.kanban-board {
    height: auto;
}

/* Financial Section Styles */
.financial-list {
    background: var(--bg-primary);
    max-height: 300px;
    overflow-y: auto;
}

.financial-list-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-light);
    font-style: italic;
}

.financial-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.financial-item:last-child {
    border-bottom: none;
}

.financial-item:hover {
    background-color: var(--bg-light);
}

.financial-item-content {
    flex: 1;
}

.financial-item-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.financial-item-meta {
    font-size: 12px;
    color: var(--text-light);
}

.financial-item-amount {
    font-weight: 600;
    font-size: 14px;
    margin-right: 10px;
}

.financial-item-actions {
    display: flex;
    gap: 5px;
}

.invoice-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.invoice-status-badge.pending {
    background-color: #fef3c7;
    color: #92400e;
}

.invoice-status-badge.paid {
    background-color: #d1fae5;
    color: #065f46;
}

.invoice-status-badge.overdue {
    background-color: #fee2e2;
    color: #991b1b;
}

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

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

/* Task tree inline icon buttons */
.task-row .btn-icon {
    padding: 4px 8px;
    border-radius: 3px;
}

.btn-icon:hover .fa-trash {
    color: var(--danger-color);
}

.btn-icon:hover .fa-edit {
    color: var(--primary-color);
}

.btn-icon .fa-chevron-right,
.btn-icon .fa-chevron-down {
    transition: transform 0.2s;
    font-size: 12px;
}

.btn-icon:hover .fa-chevron-right,
.btn-icon:hover .fa-chevron-down {
    color: var(--primary-color);
}

/* ===== Dashboard Styles (Sprint 3C) ===== */

.dashboard-container {
    padding: 20px;
    background-color: var(--bg-secondary);
    overflow-y: auto;
}

.dashboard-header {
    max-width: 1600px;
    margin: 0 auto 20px auto;
    padding: 0 0 15px 0;
    border-bottom: 2px solid var(--border-color);
}

.dashboard-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 600;
}

.dashboard-header h2 i {
    color: var(--primary-color);
    margin-right: 10px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Dashboard Widgets */
.dashboard-widget {
    background: var(--bg-primary);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.widget-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.widget-body {
    padding: 20px;
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 250px;
    margin-bottom: 16px;
}

.widget-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

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

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Task Lists in Widgets */
.task-list {
    max-height: 300px;
    overflow-y: auto;
}

.task-list-item {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.task-list-item:hover {
    background-color: var(--bg-secondary);
    cursor: pointer;
}

.task-list-item:last-child {
    border-bottom: none;
}

.task-list-item.task-overdue {
    background-color: #fee2e2;
}

.task-list-item.task-overdue:hover {
    background-color: #fecaca;
}

.task-list-info {
    flex: 1;
}

.task-list-title {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.task-list-meta {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    gap: 12px;
    align-items: center;
}

.task-list-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.badge-overdue {
    background-color: var(--danger-color);
    color: white;
}

.badge-unassigned {
    background-color: #fef3c7;
    color: #d97706;
}

.badge-blocked {
    background-color: #dbeafe;
    color: var(--primary-color);
}

.badge-warning {
    background-color: #fef3c7;
    color: #d97706;
}

.badge-high-priority {
    background-color: #fee2e2;
    color: #dc2626;
}

/* Pending Votes Widget (Sprint 5K-3) */
.pending-votes-container {
    max-height: 400px;
    overflow-y: auto;
}

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

.pending-vote-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

.pending-vote-actions .btn-sm {
    white-space: nowrap;
}

/* Deadline Tabs */
.deadline-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.deadline-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.deadline-tab:hover {
    background-color: var(--bg-secondary);
}

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

/* Workload Bars */
.workload-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.workload-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.workload-user-name {
    font-weight: 500;
    color: var(--text-dark);
}

.workload-hours {
    color: var(--text-light);
    font-size: 12px;
}

.workload-bar-bg {
    height: 24px;
    background-color: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.workload-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #667eea);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    transition: width 0.3s ease;
}

.workload-bar-fill.overallocated {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.workload-bar-fill.at-capacity {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

/* Cost Summary */
.cost-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.cost-item:last-child {
    border-bottom: none;
    padding-top: 12px;
    border-top: 2px solid var(--border-color);
}

.cost-label {
    font-size: 13px;
    color: var(--text-light);
}

.cost-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.cost-item.variance .cost-value {
    color: #059669;
}

.cost-item.variance .cost-value.negative {
    color: #dc2626;
}

/* Milestone Container */
.milestone-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.milestone-item {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.milestone-item:hover {
    background-color: #f3f4f6;
    border-color: var(--primary-color);
}

.milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.milestone-name {
    font-weight: 500;
    color: var(--text-dark);
}

.milestone-date {
    font-size: 12px;
    color: var(--text-light);
}

.milestone-progress {
    height: 8px;
    background-color: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.milestone-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #667eea);
    transition: width 0.3s ease;
}

.milestone-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-light);
}

/* Empty State */
.widget-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
}

.widget-empty i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 200px;
    }
}

/* ========================================
   Financial Report View
   ======================================== */

.financial-container {
    padding: 20px;
    background-color: var(--bg-secondary);
    overflow-y: auto;
}

.financial-header {
    max-width: 1600px;
    margin: 0 auto 20px auto;
    padding: 0 0 15px 0;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.financial-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 600;
}

.financial-header h2 i {
    color: var(--primary-color);
    margin-right: 10px;
}

.financial-actions {
    display: flex;
    gap: 10px;
}

.financial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.financial-card {
    background: var(--bg-primary);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.financial-card.full-width {
    grid-column: 1 / -1;
}

.card-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
    color: white;
}

.card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.card-header h3 i {
    margin-right: 8px;
}

.card-body {
    padding: 20px;
}

/* Budget Comparison */
.budget-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.budget-chart-container {
    height: 300px;
}

.budget-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.budget-line {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.budget-line.variance-line {
    font-weight: 600;
    border: 2px solid var(--border-color);
}

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

.budget-value {
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 600;
}

.budget-value.variance {
    font-size: 18px;
}

.budget-value.variance.positive {
    color: var(--success-color);
}

.budget-value.variance.negative {
    color: #dc2626;
}

/* Charts */
.chart-container {
    height: 250px;
    margin-bottom: 15px;
}

.chart-container-large {
    height: 350px;
}

/* Fixed Costs List */
.costs-list {
    max-height: 200px;
    overflow-y: auto;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.cost-item:last-child {
    border-bottom: none;
}

.cost-description {
    color: var(--text-dark);
    font-weight: 500;
}

.cost-amount {
    color: var(--primary-color);
    font-weight: 600;
}

/* Invoice Summary Stats */
.invoice-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.stat-box {
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 8px;
    text-align: center;
}

.stat-box.stat-pending {
    background: #fef3c7;
}

.stat-box.stat-paid {
    background: #d1fae5;
}

.stat-box.stat-overdue {
    background: #fee2e2;
}

.stat-label {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 8px;
}

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

/* Invoice Timeline */
.invoice-timeline {
    max-height: 250px;
    overflow-y: auto;
}

.timeline-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-left: 3px solid var(--border-color);
    margin-bottom: 10px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--border-color);
}

.timeline-item.status-paid {
    border-left-color: var(--success-color);
}

.timeline-item.status-paid::before {
    background: var(--success-color);
}

.timeline-item.status-pending {
    border-left-color: var(--warning-color);
}

.timeline-item.status-pending::before {
    background: var(--warning-color);
}

.timeline-item.status-overdue {
    border-left-color: #dc2626;
}

.timeline-item.status-overdue::before {
    background: #dc2626;
}

.timeline-content {
    flex: 1;
    padding-left: 15px;
}

.timeline-date {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 4px;
}

.timeline-description {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.timeline-amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.timeline-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.timeline-status.status-paid {
    background: #d1fae5;
    color: #059669;
}

.timeline-status.status-pending {
    background: #fef3c7;
    color: #d97706;
}

.timeline-status.status-overdue {
    background: #fee2e2;
    color: #dc2626;
}

/* Invoice Table */
.invoice-table {
    overflow-x: auto;
}

.invoice-table table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-table th {
    background: var(--bg-secondary);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-dark);
    border-bottom: 2px solid var(--border-color);
}

.invoice-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

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

.invoice-table tr:hover {
    background: var(--bg-secondary);
}

.invoice-actions {
    display: flex;
    gap: 8px;
}

.invoice-actions button {
    padding: 4px 8px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.invoice-actions .btn-mark-paid {
    background: var(--success-color);
    color: white;
}

.invoice-actions .btn-mark-paid:hover {
    background: #059669;
}

.invoice-actions .btn-edit {
    background: var(--color-info);
    color: white;
}

.invoice-actions .btn-edit:hover {
    background: var(--primary-color);
}

.invoice-actions .btn-delete {
    background: #dc2626;
    color: white;
}

.invoice-actions .btn-delete:hover {
    background: #b91c1c;
}

/* Responsive */
@media (max-width: 1200px) {
    .financial-grid {
        grid-template-columns: 1fr;
    }

    .financial-card.full-width {
        grid-column: 1;
    }

    .budget-comparison {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .financial-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

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

/* Invoice row clickable styling */
.invoice-table .invoice-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.invoice-table .invoice-row:hover {
    background-color: #f3f4f6 !important;
}

/* ===== Saved Views Styling ===== */
.saved-views-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.saved-views-controls select {
    min-width: 200px;
}

.manage-views-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manage-view-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.manage-view-item:hover {
    background: var(--bg-hover);
    border-color: #cbd5e1;
}

.view-info {
    flex: 1;
}

.view-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 14px;
}

.view-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.view-actions {
    display: flex;
    gap: 5px;
}

/* Bordered icon buttons for saved views & toolbars */
.view-actions .btn-icon {
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    border-radius: 6px;
}

.view-actions .btn-icon:hover {
    border-color: var(--secondary-color);
}

.view-actions .btn-icon.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.view-actions .btn-icon.active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

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

.btn-icon.btn-delete:hover {
    background: #fee2e2;
    border-color: var(--danger-color);
}

.badge-default {
    background: #fef3c7;
    color: #92400e;
}

.badge-public {
    background: #dbeafe;
    color: var(--color-accent-hover);
}

.badge-shared {
    background: #e0e7ff;
    color: #4338ca;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    cursor: pointer;
}

.checkbox-label span {
    font-size: 14px;
}

/* ===========================
   Task History Timeline Styles
   =========================== */

.history-timeline {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
}

.timeline {
    position: relative;
}

.timeline-date-group {
    margin-bottom: 20px;
}

.timeline-date-header {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-date-header i {
    font-size: 12px;
}

.timeline-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-left: 8px;
}

.timeline-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.timeline-content {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 12px;
    border: 1px solid var(--border-color);
    transition: border-color 0.15s;
}

.timeline-item:hover .timeline-content {
    border-color: var(--primary-color);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.timeline-description {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
}

.timeline-description strong {
    font-weight: 600;
    color: var(--text-dark);
}

.timeline-time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.field-name {
    font-weight: 600;
    color: var(--text-secondary);
}

.value-change {
    margin-top: 6px;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.old-value {
    color: var(--danger-color);
    text-decoration: line-through;
    opacity: 0.7;
}

.new-value {
    color: var(--success-color);
    font-weight: 600;
}

.value-change i {
    color: var(--text-muted);
    font-size: 12px;
}

.history-comment {
    margin-top: 8px;
    padding: 8px;
    background: var(--warning-light);
    border-left: 3px solid var(--warning-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #856404;
    display: flex;
    align-items: start;
    gap: 8px;
}

.history-comment i {
    margin-top: 2px;
    font-size: 12px;
}

/* Scrollbar styling for history timeline */
.history-timeline::-webkit-scrollbar {
    width: 8px;
}

.history-timeline::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.history-timeline::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.history-timeline::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ===========================
   Collapsible Section Styles
   =========================== */

.collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.collapsible-header:hover {
    color: var(--primary-color, #007bff);
}

.collapse-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.collapsible-header:not(.collapsed) .collapse-icon {
    transform: rotate(90deg);
}

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* ===========================
   History View Styles
   =========================== */

.history-container {
    padding: 20px;
    background: var(--bg-white);
    height: 100%;
    overflow-y: auto;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
}

.history-header h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-actions {
    display: flex;
    gap: 10px;
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.stat-card:nth-child(2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card:nth-child(3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card:nth-child(4) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

.activity-timeline {
    max-width: 1200px;
}

.activity-date-group {
    margin-bottom: 30px;
}

.activity-date-header {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.activity-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: normal;
}

.activity-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-left: 15px;
}

.activity-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.activity-content {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: 15px;
    border: 1px solid var(--border-light);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.activity-description {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
}

.activity-description strong {
    font-weight: 600;
    color: var(--text-dark);
}

.activity-time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.task-link {
    color: var(--primary-color, #007bff);
    text-decoration: none;
    font-weight: 600;
}

.task-link:hover {
    text-decoration: underline;
}

.value-change-inline {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.activity-comment {
    margin-top: 10px;
    padding: 10px;
    background: var(--warning-light);
    border-left: 3px solid var(--warning-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #856404;
    display: flex;
    align-items: start;
    gap: 8px;
}

.activity-comment i {
    margin-top: 2px;
    font-size: 12px;
}

.view-loading, .view-empty, .view-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.view-empty h3, .view-error h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.view-empty p, .view-error p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ===========================
   History View Tabs (Sprint 6A)
   =========================== */

/* Base nav-tabs styling */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--border-color);
}

.nav-tabs .nav-item {
    margin-bottom: -2px;
    list-style: none;
}

.nav-tabs .nav-link {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    border: none;
    background: transparent;
}

/* History-specific tabs */
.history-tabs {
    margin-bottom: 0;
    border-bottom: 2px solid var(--border-color);
}

.history-tabs .nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    padding: 12px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.history-tabs .nav-link:hover {
    color: var(--primary-color);
    border-bottom-color: rgba(13, 110, 253, 0.3);
    background: transparent;
}

.history-tabs .nav-link.active {
    color: var(--primary-color);
    background: transparent;
    border-bottom-color: var(--primary-color);
}

.history-tab-content {
    padding: 20px 0;
}

.history-tab-pane {
    width: 100%;
}

/* ===========================
   Daily Timesheet Styles
   =========================== */

.timesheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
}

.timesheet-header h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.timesheet-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.timesheet-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.timesheet-entries {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.timesheet-entry {
    display: grid;
    grid-template-columns: 100px 1fr 120px 200px 100px 100px;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

.timesheet-entry:last-child {
    border-bottom: none;
}

.timesheet-entry.timesheet-header {
    background: var(--bg-light);
    border-bottom: 2px solid var(--border-color);
}

.timesheet-entry:not(.timesheet-header):hover {
    background: var(--bg-light);
}

.task-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
}

.task-group-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-group-total {
    color: var(--primary-color);
    font-size: 15px;
}

/* ===========================
   Time Summary Styles
   =========================== */

.time-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
    flex-wrap: wrap;
    gap: 15px;
}

.time-summary-header h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.time-summary-controls {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.period-selector {
    display: flex;
    gap: 8px;
    align-items: center;
}

.period-selector label {
    margin: 0;
    font-weight: 500;
    color: var(--text-secondary);
}

.period-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.period-btn:hover {
    background: var(--bg-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.period-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.date-range-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-by-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-by-selector label {
    margin: 0;
    font-weight: 500;
    color: var(--text-secondary);
}

.time-summary-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.summary-table {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr 150px 150px 150px;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
}

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

.summary-row.header {
    background: var(--bg-light);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-secondary);
}

.summary-row:not(.header):hover {
    background: var(--bg-light);
}

.task-hierarchy {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-indent {
    width: 20px;
    border-left: 2px solid var(--border-color);
}

/* Progress bar styling for time summary */
.summary-row .progress {
    height: 24px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: 24px;
}

.summary-row .progress-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--primary-color);
    transition: width 0.6s ease;
    font-weight: 600;
}

/* Loading, empty, and error states for timesheet views */
.loading-container,
.empty-state,
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state h3,
.error-state h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.empty-state p,
.error-state p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ===== Enhanced Comments Styles ===== */

/* Comment items */
.comment-item {
    padding: 12px;
    margin-bottom: 10px;
    border-left: 3px solid transparent;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.comment-item.pinned {
    background: var(--warning-light);
    border-left-color: var(--warning-color);
}

.comment-item:hover {
    background: var(--bg-hover);
}

.comment-item.pinned:hover {
    background: #ffe69c;
}

/* Comment badges */
.comment-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 3px;
    margin-left: 5px;
    font-weight: 600;
}

.pinned-badge {
    background: #ffc107;
    color: #000;
}

.edited-badge {
    background: var(--secondary-color);
    color: #fff;
}

.system-badge {
    background: var(--info-color);
    color: #fff;
}

.user-badge {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

/* Comment Author Badge (Circular Initials) */
.comment-author-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    cursor: default;
    flex-shrink: 0;
}

/* @Mentions */
.mention {
    color: #0066cc;
    font-weight: 600;
    cursor: pointer;
    background-color: #e7f3ff;
    padding: 2px 4px;
    border-radius: 3px;
    font-style: italic;
}

.mention:hover {
    text-decoration: underline;
    color: #004999;
    background-color: #d0e7ff;
}

/* Reactions */
.comment-reactions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.reaction-group {
    display: inline-block;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.reaction-group:hover {
    background: var(--border-color);
    border-color: #adb5bd;
    transform: scale(1.05);
}

.reaction-group:active {
    transform: scale(0.95);
}

/* Reaction Picker */
.reaction-picker {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    display: flex;
    gap: 4px;
    animation: fadeInUp 0.2s;
}

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

.reaction-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.reaction-btn:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
}

.reaction-btn:active {
    transform: scale(0.95);
}

/* Mention Autocomplete */
.mention-autocomplete {
    position: fixed;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    min-width: 150px;
    animation: fadeIn 0.2s;
}

.mention-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.mention-item:hover,
.mention-item.selected {
    background: var(--bg-hover);
}

.mention-item.selected {
    background: var(--primary-color);
    color: white;
}

/* Comment Actions */
.comment-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Comment action buttons (standalone btn-sm without .btn base) */
.comment-actions .btn-sm {
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-actions .btn-sm:hover {
    background: var(--border-color);
    transform: translateY(-1px);
}

.comment-actions .btn-sm:active {
    transform: translateY(0);
}

.comment-actions .btn-sm i {
    font-size: 11px;
}

/* Markdown in comments */
.comment-text {
    line-height: 1.6;
    margin-top: 6px;
}

.comment-text code {
    background: var(--bg-light);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #d63384;
}

.comment-text strong {
    font-weight: 600;
}

.comment-text em {
    font-style: italic;
}

.comment-text blockquote {
    border-left: 3px solid var(--border-color);
    margin: 8px 0;
    color: var(--text-secondary);
    font-style: italic;
    background: var(--bg-light);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

/* ===================================
   Notifications (Sprint 4D)
   =================================== */

.notification-bell {
    position: relative;
    margin-right: 15px;
}

/* Canonical .btn-icon — used for icon-only buttons (notifications, toolbars, inline actions) */
.btn-icon {
    background: none;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    position: relative;
    color: var(--text-light);
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-icon:hover {
    background-color: var(--bg-hover);
    color: var(--text-dark);
}

/* Larger icon buttons for header/toolbar areas */
.notification-bell .btn-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: var(--danger-color);
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

.notification-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    width: 380px;
    max-height: 500px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
}

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

.notification-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
}

.btn-link:hover {
    text-decoration: underline;
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: var(--bg-light);
}

.notification-item.unread {
    background-color: var(--info-light);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.notification-item {
    position: relative;
    padding-left: 24px;
}

.notification-type {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}

.notification-message {
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.notification-time {
    font-size: 12px;
    color: var(--text-light);
}

.notification-list .placeholder {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
}

/* ===================================
   Quill Rich Text Editor Styling
   =================================== */

.quill-editor {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 10px;
}

.quill-editor .ql-container {
    font-size: 14px;
    font-family: inherit;
    min-height: 100px;
}

.quill-editor .ql-editor {
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
}

.quill-editor .ql-editor.ql-blank::before {
    color: var(--text-light);
    font-style: normal;
}

/* Quill toolbar styling */
.quill-editor .ql-toolbar {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    border-radius: 4px 4px 0 0;
}

.quill-editor .ql-toolbar button {
    width: 28px;
    height: 28px;
}

.quill-editor .ql-toolbar button:hover,
.quill-editor .ql-toolbar button.ql-active {
    color: var(--primary-color);
}

.quill-editor .ql-toolbar .ql-stroke {
    stroke: var(--text-dark);
}

.quill-editor .ql-toolbar button:hover .ql-stroke,
.quill-editor .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--primary-color);
}

.quill-editor .ql-toolbar .ql-fill {
    fill: var(--text-dark);
}

.quill-editor .ql-toolbar button:hover .ql-fill,
.quill-editor .ql-toolbar button.ql-active .ql-fill {
    fill: var(--primary-color);
}

/* Mention dropdown styling */
.ql-mention-list-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
}

.ql-mention-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ql-mention-list-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.ql-mention-list-item:last-child {
    border-bottom: none;
}

.ql-mention-list-item:hover,
.ql-mention-list-item.selected {
    background-color: var(--bg-light);
}

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

.mention-item strong {
    color: var(--text-dark);
    font-size: 14px;
}

.mention-item small {
    color: var(--text-light);
    font-size: 12px;
    margin-top: 2px;
}

/* Mention rendering in comments */
.ql-editor .mention {
    background-color: #e7f3ff;
    color: #0066cc;
    padding: 2px 4px;
    border-radius: 3px;
    font-style: italic;
    font-weight: 600;
    cursor: pointer;
}

.ql-editor .mention:hover {
    background-color: #d0e7ff;
    text-decoration: underline;
}

/* Adjust comment form layout */
.comment-form {
    margin-top: 15px;
}

.comment-form .quill-editor {
    width: 100%;
}

/* Make Quill content match our existing comment styling */
.comment-text .ql-editor {
    padding: 0;
    border: none;
}

.comment-text .ql-editor strong {
    font-weight: 600;
}

.comment-text .ql-editor em {
    font-style: italic;
}

.comment-text .ql-editor code {
    background-color: var(--bg-light);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.comment-text .ql-editor blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: 12px;
    margin: 8px 0;
    color: var(--text-light);
}

.comment-text .ql-editor a {
    color: var(--primary-color);
    text-decoration: none;
}

.comment-text .ql-editor a:hover {
    text-decoration: underline;
}

/* Ensure proper spacing in task modal */
#taskDetailsModal .comment-form {
    margin-top: 15px;
}


/* ===================================
   Custom Quill Mention Dropdown
   =================================== */

.quill-mention-dropdown {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
    min-width: 250px;
}

.quill-mention-dropdown .mention-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.quill-mention-dropdown .mention-item:last-child {
    border-bottom: none;
}

.quill-mention-dropdown .mention-item:hover,
.quill-mention-dropdown .mention-item.selected {
    background-color: var(--bg-light);
}

.quill-mention-dropdown .mention-item strong {
    color: var(--text-dark);
    font-size: 14px;
}

.quill-mention-dropdown .mention-item small {
    color: var(--text-light);
    font-size: 12px;
    margin-top: 2px;
}


/* ===================================
   THEME SWITCHER
   =================================== */

.theme-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 200px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    padding: 4px 0;
}

.theme-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-dark);
}

.theme-option:hover {
    background: var(--bg-light);
}

.theme-option.active {
    background: var(--bg-light);
    color: var(--primary-color);
    font-weight: 500;
}

/* Theme menu group labels (Sprint DM) */
.theme-menu-group {
    padding: 0;
}

.theme-menu-group + .theme-menu-group {
    border-top: 1px solid var(--border-color);
}

.theme-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 10px 16px 4px;
}

/* Color mode toggle button (Sprint DM) */
#colorModeBtn {
    position: relative;
    font-size: 16px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

#colorModeBtn:hover {
    color: var(--primary-color);
}

/* ===================================
   SECONDARY BAR - VIEW & FILTERS
   =================================== */

.secondary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    gap: 20px;
}

.secondary-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.secondary-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* View Selector Compact */
.view-selector-compact {
    position: relative;
}

.view-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.2s;
}

.view-selector-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-light);
}

.view-selector-btn i:first-child {
    color: var(--primary-color);
}

.view-selector-btn i:last-child {
    font-size: 12px;
    color: var(--text-light);
    transition: transform 0.2s;
}

.view-selector-btn.open i:last-child {
    transform: rotate(180deg);
}

.view-selector-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    padding: 6px 0;
    overflow: visible;
}

.view-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-dark);
}

.view-option:hover {
    background: var(--bg-light);
}

.view-option.active {
    background: var(--bg-light);
    color: var(--primary-color);
    font-weight: 500;
}

.view-option i {
    width: 16px;
    text-align: center;
    color: var(--text-light);
}

.view-option.active i {
    color: var(--primary-color);
}

/* ── View Menu: Grouped Submenus ──────────────────────────────── */

.view-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 6px 12px;
}

.view-menu-group {
    position: relative;
}

.view-menu-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.01em;
}

.view-menu-group-toggle:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

.view-menu-group-toggle.open {
    background: var(--bg-light);
    color: var(--primary-color);
}

.view-menu-group-toggle i:first-child {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
}

.view-menu-group-toggle.open i:first-child {
    opacity: 1;
    color: var(--primary-color);
}

.view-menu-chevron {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.2s, opacity 0.2s;
}

.view-menu-group-toggle.open .view-menu-chevron {
    transform: rotate(90deg);
    opacity: 0.8;
}

.view-menu-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 210px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 4px 0;
    margin-left: 2px;
    z-index: 1001;
    animation: submenuSlideIn 0.15s ease both;
}

@keyframes submenuSlideIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.view-menu-submenu .view-option {
    font-size: 13px;
    padding: 8px 14px;
    gap: 10px;
}

/* Project Filter Inline */
.project-filter-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-filter-inline label {
    font-size: 14px;
    color: var(--text-medium);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-filter-inline label i {
    color: var(--primary-color);
}

/* Filter Panel (Collapsible) */
.filter-panel {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 24px;
    overflow: visible;
    position: relative;
    z-index: 100;
}

.filter-panel-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.search-box-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 250px;
}

.search-box-inline i {
    color: var(--text-light);
    font-size: 14px;
}

.search-box-inline .search-input {
    border: none;
    background: none;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: var(--text-dark);
}

.search-box-inline .clear-search {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-light);
    padding: 0 4px;
    line-height: 1;
}

.search-box-inline .clear-search:hover {
    color: var(--text-dark);
}

.filter-controls-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* Task Type Filter Popover */
.type-filter-wrapper {
    position: relative;
    display: inline-block;
}

.type-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.type-filter-btn.filter-active {
    border-color: var(--primary-color);
    background-color: var(--primary-light, rgba(37, 99, 235, 0.08));
    color: var(--primary-color);
    font-weight: 600;
}

.type-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.type-filter-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    width: 280px;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

.type-filter-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-color);
}

.type-filter-checkboxes {
    padding: 8px 0;
}

.type-filter-group {
    padding: 0 4px;
}

.type-filter-group + .type-filter-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}

.type-filter-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 10px;
}

.type-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-dark);
    border-radius: 4px;
    transition: background-color 0.15s;
}

.type-filter-checkbox:hover {
    background-color: var(--bg-light, #f5f5f5);
}

.type-filter-checkbox input[type="checkbox"] {
    cursor: pointer;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.type-filter-checkbox input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: default;
}

.type-filter-checkbox i {
    width: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.type-filter-checkbox input[type="checkbox"]:checked ~ i {
    color: var(--primary-color);
}

.type-filter-actions {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-top: 1px solid var(--border-color);
    gap: 8px;
}

/* Task Type Pill Badge (for non-standard types in views) */
.task-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.4;
}

.task-type-pill i {
    font-size: 10px;
}

/* =============================================================================
   SPRINT 5A: TICKETS & QUESTIONS TAB STYLES
   ============================================================================= */

/* Tickets Section Header */
.tickets-header {
    margin-bottom: 20px;
}

.tickets-create-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tickets-create-buttons .btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Sprint 5.7: Create Type Picker Modal */
.create-type-picker-content {
    max-width: 400px;
    width: 90%;
}

.create-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.create-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--bg-light, #f8f9fa);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.create-type-btn:hover {
    background: var(--bg-primary);
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.create-type-btn i {
    font-size: 24px;
    color: var(--primary-color);
}

.create-type-btn span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}

/* Empty State */
.tickets-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.tickets-empty-state p:first-child {
    font-size: 16px;
    margin-bottom: 8px;
}

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

/* Tickets List */
.tickets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* Individual Ticket Item */
.ticket-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-color, #fff);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ticket-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.ticket-icon {
    font-size: 20px;
    color: var(--primary-color);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.ticket-details {
    flex: 1;
    min-width: 0;
}

.ticket-title {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    font-size: 15px;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.ticket-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.ticket-status.status-not-started {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.ticket-status.status-in-progress {
    background: #cfe2ff;
    color: #084298;
}

.ticket-status.status-complete {
    background: #d1e7dd;
    color: #0f5132;
}

.ticket-assignee {
    color: var(--text-secondary);
}

.ticket-date {
    color: var(--text-light);
    font-size: 12px;
}

/* Badge count variant — primary background for count indicators */
.badge-count {
    background: var(--primary-color);
    color: white;
    margin-left: 8px;
}

/* Inline Ticket Modal */
.modal-content-inline {
    max-width: 700px;
}

.inline-modal-header {
    border-bottom: 2px solid var(--border-color);
}

.ticket-meta-inline {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ticket-meta-inline span {
    font-size: 14px;
}

.ticket-meta-inline strong {
    color: var(--text-dark);
}

/* Create Ticket Modal — fixed header/footer, scrollable body (matches taskDetailModal pattern) */
#createTicketModal .modal-content {
    max-width: 600px;
    height: auto;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#createTicketModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

#createTicketModal .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-white);
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

#createTicketModal .form-row {
    display: flex;
    gap: 16px;
}

#createTicketModal .form-row .form-group {
    flex: 1;
}

/* Collapsible Header for Tickets */
.collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.collapsible-header .collapse-icon {
    transition: transform 0.2s ease;
}

.collapsible-header:not(.collapsed) .collapse-icon {
    transform: rotate(90deg);
}

.collapsible-content {
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .tickets-create-buttons {
        flex-direction: column;
    }

    .tickets-create-buttons .btn {
        width: 100%;
    }

    .ticket-meta {
        flex-direction: column;
        gap: 6px;
    }
}

/* =============================================================================
   SPRINT 5A: TICKET DETAIL MODAL STYLES
   ============================================================================= */

/* Assignee Search Dropdown */
.assignee-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);  /* Add small gap below input */
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;  /* Higher z-index to ensure it's above other content */
}

.assignee-search-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.assignee-search-item:hover {
    background: var(--bg-light);
}

.assignee-search-item:last-child {
    border-bottom: none;
}

.assignee-search-item.selected {
    background: #e3f2fd;
    font-weight: 600;
}

.assignee-search-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Ticket Detail Modal — fixed header/footer, scrollable body (matches taskDetailModal pattern) */
#ticketDetailModal .modal-content {
    max-width: 900px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#ticketDetailModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
}

#ticketDetailModal .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-white);
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

#ticketDetailModal .form-row {
    display: flex;
    gap: 16px;
}

#ticketDetailModal .form-row .form-group {
    flex: 1;
}

#ticketDetailModal .comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

#ticketDetailModal .comment-item {
    padding: 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

#ticketDetailModal .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

#ticketDetailModal .comment-author {
    font-weight: 600;
    color: var(--text-dark);
}

#ticketDetailModal .comment-date {
    color: var(--text-muted);
    font-size: 12px;
}

#ticketDetailModal .comment-body {
    color: var(--text-dark);
    line-height: 1.5;
}

/* Quill editor content in comments */
#ticketDetailModal .comment-body p {
    margin: 0 0 8px 0;
}

#ticketDetailModal .comment-body p:last-child {
    margin-bottom: 0;
}

#ticketDetailModal .comment-date {
    font-size: 12px;
    color: var(--text-light);
    margin-left: 8px;
}

#ticketDetailModal .comment-text {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===================================
   MY WORK VIEW - Sprint 5B
   =================================== */

.mywork-container {
    padding: 24px;
    overflow-y: auto;
}

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

.mywork-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
}

.mywork-actions {
    display: flex;
    gap: 8px;
}

/* Controls */
.mywork-controls {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.mywork-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Sprint 5B: Quick Filters */
.mywork-quick-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.quick-filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-filter-btn:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.quick-filter-btn[data-active="true"] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.quick-filter-btn i {
    font-size: 13px;
}

/* Summary Stats */
.mywork-summary {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.summary-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

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

.summary-stat-label {
    font-size: 14px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sections */
.mywork-section {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.mywork-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.mywork-section-header:hover {
    background: var(--bg-hover);
}

.mywork-section-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mywork-section-count {
    background: var(--primary-color);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.mywork-section-body {
    padding: 0;
}

/* Work Items List */
.mywork-list {
    padding: 16px;
}

.mywork-item {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.mywork-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.mywork-item:last-child {
    margin-bottom: 0;
}

/* Priority borders */
.mywork-item.priority-critical {
    border-left: 4px solid #dc2626;
}

.mywork-item.priority-high {
    border-left: 4px solid var(--warning-color);
}

.mywork-item.priority-medium {
    border-left: 4px solid var(--color-info);
}

.mywork-item.priority-low {
    border-left: 4px solid var(--secondary-color);
}

.mywork-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 16px;
}

.mywork-item-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
    line-height: 1.4;
}

.mywork-item-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mywork-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.mywork-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--text-light);
}

.mywork-item-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mywork-item-meta i {
    font-size: 12px;
}

.mywork-item-assignees {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Circular avatar badges for assignees */
.badge-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
}

.mywork-quick-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Quick Comment Modal */
.quick-comment-modal {
    position: absolute;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    padding: 0;
}

.quick-comment-content {
    background: var(--bg-primary);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 400px;
    max-width: 90vw;
}

.quick-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.quick-comment-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-comment-header .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.quick-comment-header .close-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.quick-comment-body {
    padding: 20px;
}

.quick-comment-body .task-name {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.quick-comment-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 16px;
    transition: border-color 0.2s;
}

.quick-comment-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.quick-comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.quick-comment-actions .btn {
    padding: 8px 16px;
    font-size: 14px;
}

/* Adjust quick action button with text */
.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.quick-action-btn {
    flex: 1;
    max-width: 150px;
}

/* Priority Badges */
.badge-priority {
    font-size: 11px;
    padding: 3px 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-priority.priority-critical {
    background: #dc2626;
    color: white;
}

.badge-priority.priority-high {
    background: var(--warning-color);
    color: white;
}

.badge-priority.priority-medium {
    background: var(--color-info);
    color: white;
}

.badge-priority.priority-low {
    background: var(--secondary-color);
    color: white;
}

/* Status Badges */
.badge-status {
    font-size: 11px;
    padding: 3px 8px;
    font-weight: 600;
}

.badge-status.status-not-started {
    background: var(--bg-tertiary);
    color: #4b5563;
}

.badge-status.status-in-progress {
    background: #dbeafe;
    color: var(--color-accent-hover);
}

.badge-status.status-complete {
    background: #d1fae5;
    color: #065f46;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    padding: 3px 8px;
    font-weight: 600;
}

/* Empty States */
.mywork-list .placeholder {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-light);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .mywork-container {
        padding: 16px;
    }

    .mywork-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mywork-item-details {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-stats {
        gap: 16px;
    }

    .mywork-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .mywork-filters .filter-select,
    .mywork-filters .checkbox-filter {
        width: 100%;
    }

    .mywork-quick-actions {
        flex-wrap: wrap;
    }

    .quick-action-btn {
        flex: 1 1 auto;
        min-width: 100px;
    }
}

/* ===========================
   Attachments Section (Sprint 5C)
   =========================== */

/* File Upload Area */
.file-upload-area {
    margin-bottom: 20px;
}

.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background-color: var(--background-color);
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-light);
}

.upload-zone.drag-over {
    border-color: var(--primary-color);
    background-color: #e3f2fd;
    transform: scale(1.02);
}

.upload-zone p {
    margin: 10px 0;
    color: var(--text-light);
    font-size: 14px;
}

.upload-hint {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-top: 15px !important;
}

.upload-progress {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--bg-light);
    border-radius: var(--radius-sm);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
    width: 0%;
}

#uploadStatus {
    font-size: 13px;
    color: var(--text-light);
}

/* Attachments List */
.attachments-list {
    margin-top: 20px;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.attachment-item:hover {
    background-color: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

.attachment-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* For text truncation */
}

.attachment-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    border-radius: 6px;
    margin-right: 12px;
    font-size: 20px;
    flex-shrink: 0;
}

.attachment-icon.image { color: #4CAF50; }
.attachment-icon.pdf { color: #F44336; }
.attachment-icon.word { color: #2196F3; }
.attachment-icon.excel { color: #4CAF50; }
.attachment-icon.powerpoint { color: #FF9800; }
.attachment-icon.archive { color: #9C27B0; }
.attachment-icon.text { color: #607D8B; }
.attachment-icon.default { color: var(--text-muted); }

.attachment-details {
    flex: 1;
    min-width: 0;
}

.attachment-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
    word-break: break-word;
}

.attachment-meta {
    font-size: 12px;
    color: var(--text-light);
}

.attachment-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

.attachment-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.attachment-btn.download {
    background-color: var(--primary-color);
    color: white;
}

.attachment-btn.download:hover {
    background-color: #0056b3;
}

.attachment-btn.delete {
    background-color: transparent;
    color: #dc3545;
}

.attachment-btn.delete:hover {
    background-color: #dc3545;
    color: white;
}

.attachment-btn.preview {
    background-color: transparent;
    color: var(--primary-color);
}

.attachment-btn.preview:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Image Preview Thumbnails */
.attachment-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.attachment-thumbnail:hover {
    transform: scale(1.05);
}

/* Lightbox for Image Preview */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 36px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-close:hover {
    color: #ccc;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    font-size: 24px;
    padding: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.lightbox-nav:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.lightbox-nav.prev {
    left: 20px;
}

.lightbox-nav.next {
    right: 20px;
}

.lightbox-caption {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    color: white;
    text-align: center;
    font-size: 14px;
}

/* Empty state for attachments */
.attachments-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
    font-size: 14px;
    font-style: italic;
}

/* ===========================
   Entity Attachments — Reusable inline section (Sprint 5C-2)
   =========================== */

.entity-attachments {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-secondary, #f9fafb);
}

.entity-attachments-header h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.entity-attachments-header .badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--info);
    color: #fff;
}

.entity-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 8px;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

.entity-drop-zone:hover,
.entity-drop-zone.drag-over {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.05);
}

.entity-drop-zone i {
    display: block;
    font-size: 20px;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.entity-drop-zone .entity-browse-link {
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}

.entity-upload-progress {
    margin-bottom: 8px;
}

.entity-upload-progress .progress-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.entity-upload-progress .progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s;
    width: 0%;
}

.entity-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Compact variant for inline uploads */
.entity-attachments.compact .entity-drop-zone {
    padding: 8px;
    font-size: 12px;
}

.entity-attachments.compact .entity-drop-zone i {
    font-size: 14px;
    display: inline;
    margin-right: 4px;
    margin-bottom: 0;
}

.entity-attachments.compact .entity-attachments-header h4 {
    font-size: 12px;
}

/* ===========================
   Comment Attachments (Sprint 5C)
   =========================== */

/* Attachment preview in comment editor */
.comment-attachment-preview {
    margin-top: 10px;
    padding: 12px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.comment-attachments-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.comment-attachments-header i {
    color: var(--primary-color);
    margin-right: 4px;
}

.comment-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 13px;
}

.comment-attachment-item i:first-child {
    color: var(--text-muted);
    width: 16px;
    text-align: center;
}

.comment-attachment-name {
    flex: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-attachment-size {
    color: var(--text-light);
    font-size: 11px;
}

.comment-attachment-remove {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.comment-attachment-remove:hover {
    background-color: #dc3545;
    color: white;
}

/* Custom attachment button in Quill toolbar */
.ql-toolbar .ql-attachment {
    width: 28px !important;
}

.ql-toolbar .ql-attachment i {
    font-size: 14px;
}

/* Attachments in rendered comments */
.comment-attachments {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.comment-attachments-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 6px;
}

.comment-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.comment-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.comment-attachment:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.comment-attachment i {
    font-size: 14px;
}

.comment-attachment-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-top: 8px;
}

.comment-attachment-image:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* ===========================
   Fix Quill Editor Modal Overflow
   =========================== */

/* Ensure Quill tooltips stay within modal bounds */
#taskDetailModal .ql-container {
    position: relative;
}

#taskDetailModal .ql-tooltip {
    position: absolute !important;
    z-index: 10001 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

/* Prevent Quill link input from overflowing modal */
#taskDetailModal .ql-editing {
    left: 0 !important;
    right: auto !important;
}

/* Ensure modal content can scroll if needed */
.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

/* ========================================
   Reports View (Sprint 5H - UI Refactor)
   ======================================== */

.reports-container {
    background: var(--bg-secondary);
    height: 100%;
    overflow-y: auto;
}

.reports-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.reports-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.reports-header h2 i {
    margin-right: 8px;
    color: var(--accent-color);
}

.reports-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reports-unit-selector {
    min-width: 200px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.reports-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.reports-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 60px; /* Below the header */
    z-index: 9;
}

.reports-type-buttons {
    display: flex;
    gap: 8px;
}

.reports-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reports-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.reports-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.reports-btn i {
    font-size: 0.875rem;
}

.reports-export-buttons {
    display: flex;
    gap: 8px;
}

.reports-content {
    padding: 24px;
}

.reports-placeholder,
.reports-loading,
.reports-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-light);
}

.reports-placeholder i,
.reports-loading i,
.reports-error i {
    font-size: 48px;
    margin-bottom: 16px;
}

.reports-error {
    color: var(--danger-color);
}

/* Report Content Styles */
.report-content {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 24px;
}

.report-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.report-header-row h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.report-header-row h3 i {
    margin-right: 8px;
    color: var(--accent-color);
}

.report-date {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Summary Cards */
.report-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.summary-card.card-danger {
    border-color: var(--danger-color);
    background: rgba(var(--danger-rgb), 0.1);
}

.summary-icon {
    font-size: 24px;
    color: var(--accent-color);
    margin-bottom: 8px;
}

.summary-card.card-danger .summary-icon {
    color: var(--danger-color);
}

.summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.summary-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Report Sections */
.report-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.report-section h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.report-section h4 i {
    margin-right: 8px;
    color: var(--accent-color);
}

/* Report Footnote */
.report-footnote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: 6px;
    border-left: 3px solid var(--accent-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.report-footnote i {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Unit/Team Cards */
.unit-cards,
.team-cards,
.child-units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.unit-card,
.team-card,
.cascade-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.unit-card-header,
.team-card-header,
.cascade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.unit-name,
.team-name,
.cascade-name {
    font-weight: 600;
    color: var(--text-primary);
}

.unit-card-stats,
.team-card-body,
.cascade-metrics {
    padding: 16px;
}

.unit-card-stats .stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.unit-card-stats .stat i {
    color: var(--text-light);
    width: 16px;
}

.team-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.team-stat-row:last-child {
    border-bottom: none;
}

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

.stat-label i {
    margin-right: 6px;
    color: var(--text-light);
}

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

.team-card-footer {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Cascade Metrics */
.cascade-metrics {
    display: flex;
    gap: 16px;
}

.cascade-metric {
    flex: 1;
    text-align: center;
}

.cascade-metric .metric-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.cascade-metric .metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cascading-summary {
    margin-bottom: 24px;
}

.child-card {
    background: var(--bg-primary);
}

/* Health Badges */
.health-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Unit Type Badges */
.unit-type-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.unit-type-structural {
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary-color);
}

.unit-type-logical {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.cascade-card.logical-unit {
    border-left: 3px solid #8b5cf6;
}

.health-healthy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
}

.health-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-color);
}

.health-critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

/* Workload Badges */
.workload-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.workload-low {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
}

.workload-normal {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
}

.workload-high {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-color);
}

/* Report Metrics Row */
.report-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.metric-block {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.metric-block h4 {
    margin: 0 0 16px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.metric-block h4 i {
    margin-right: 6px;
}

.metric-display {
    display: flex;
    justify-content: center;
}

.progress-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(var(--accent-color) calc(var(--progress, 0) * 3.6deg), var(--bg-tertiary) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-ring::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-secondary);
}

.progress-value {
    position: relative;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.time-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.time-stat {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.time-stat:last-child {
    border-bottom: none;
}

.time-label {
    color: var(--text-secondary);
}

.time-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* Workload Table */
.workload-table-container {
    overflow-x: auto;
}

.workload-table {
    width: 100%;
    border-collapse: collapse;
}

.workload-table th,
.workload-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.workload-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.workload-table td {
    color: var(--text-primary);
}

.workload-table .member-name {
    font-weight: 500;
}

.workload-table .member-name i {
    margin-right: 8px;
    color: var(--text-light);
}

/* Empty Report */
.empty-report {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-light);
}

.empty-report .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-report h3 {
    margin: 0 0 8px 0;
    color: var(--text-secondary);
}

.empty-report p {
    margin: 0;
}

/* Text Colors */
.text-danger {
    color: var(--danger-color) !important;
}

/* Activity List */
.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
    border-bottom: none;
}

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

.activity-date {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* ========================================
   My Teams Sidebar (Sprint 5H - UI Refactor)
   ======================================== */

.my-teams-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-teams-group {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 10px;
}

.my-teams-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 6px;
}

.my-teams-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.my-team-item {
    padding: 2px 0;
}

.team-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.team-item-content:hover {
    background: var(--bg-hover);
}

.team-item-content.working-group {
    padding-left: 10px;
}

.team-icon {
    color: var(--accent-color);
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.team-name {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--accent-color);
    color: white;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

#myTeamsSection .placeholder {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
    padding: 4px 0;
}

#manageMyTeamsBtn {
    margin-top: 8px;
}

/* ========================================
   Mind Map View (Sprint 8D - Project Galaxy)
   ======================================== */

.mindmap-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1629 100%);
    overflow: hidden;
    z-index: 1; /* Ensure modals (z-index: 1000) appear on top */
}

.mindmap-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.mindmap-container canvas:active {
    cursor: grabbing;
}

/* Mind Map Controls */
.mindmap-controls {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
    pointer-events: none;
}

.mindmap-controls > * {
    pointer-events: auto;
}

.mindmap-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.mindmap-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.mindmap-control-btn:active {
    transform: translateY(0);
}

.mindmap-info {
    flex: 1;
    text-align: center;
    color: white;
    font-size: 24px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #64B5F6, #42A5F5, #2196F3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Node Tooltip */
.mindmap-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    pointer-events: none;
    z-index: 1000;
    max-width: 300px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mindmap-tooltip-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 16px;
}

.mindmap-tooltip-details {
    font-size: 12px;
    opacity: 0.8;
    line-height: 1.4;
}

/* Loading State */
.mindmap-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 50;
}

.mindmap-loading i {
    font-size: 48px;
    margin-bottom: 16px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mindmap-loading-text {
    font-size: 18px;
    opacity: 0.8;
}

/* Help Overlay */
.mindmap-help {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 16px;
    border-radius: 8px;
    font-size: 12px;
    max-width: 250px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.mindmap-help-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.mindmap-help-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.mindmap-help-item i {
    width: 16px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .mindmap-controls {
        top: 10px;
        left: 10px;
        right: 10px;
        gap: 8px;
    }

    .mindmap-info {
        font-size: 18px;
    }

    .mindmap-help {
        display: none;
    }
}

/* ===========================
   SPRINT 6A: TIME TRACKING
   =========================== */

/* Timer Display */
.timer-display-large {
    font-size: 32px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    color: var(--primary-color);
    padding: 10px 20px;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    border: 2px solid var(--primary-color);
    min-width: 200px;
    text-align: center;
}

.timer-display-large.running {
    background: var(--primary-color);
    color: white;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Time Entry Items */
.time-entries-summary {
    background: #e7f3ff;
    padding: 12px;
    border-radius: 4px;
    border-left: 4px solid var(--primary-color);
    margin-bottom: 15px;
}

.time-entry-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
}

.time-entry-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.time-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.time-entry-user {
    font-weight: 600;
    color: var(--text-primary);
}

.time-entry-duration {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
}

.time-entry-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.time-entry-description {
    background: var(--bg-light);
    padding: 8px;
    border-radius: var(--radius-sm);
    margin: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.time-entry-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.time-entry-actions .btn {
    font-size: 12px;
    padding: 4px 8px;
}

/* Daily Timesheet View */
.timesheet-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

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

.timesheet-date-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.timesheet-date-display {
    font-size: 20px;
    font-weight: 600;
    min-width: 200px;
    text-align: center;
}

.timesheet-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.timesheet-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}

.timesheet-card-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.timesheet-card-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--primary-color);
    font-family: 'Courier New', Courier, monospace;
}

.timesheet-entries {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.timesheet-entry {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 15px;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.timesheet-entry:last-child {
    border-bottom: none;
}

.timesheet-entry:hover {
    background: var(--bg-light);
}

.timesheet-entry-time {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: var(--text-muted);
}

.timesheet-entry-task {
    font-weight: 500;
}

.timesheet-entry-duration {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
}

/* Weekly Summary View */
.weekly-summary-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.weekly-chart-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 30px;
}

.weekly-task-breakdown {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.weekly-task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.weekly-task-item:last-child {
    border-bottom: none;
}

.weekly-task-name {
    flex: 1;
    font-weight: 500;
}

.weekly-task-hours {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
    margin-right: 15px;
}

.weekly-task-count {
    font-size: 12px;
    color: var(--text-muted);
}

/* Responsive Design for Time Tracking */
@media (max-width: 768px) {
    .timer-display-container {
        flex-direction: column;
        gap: 10px !important;
    }

    .timer-display-large {
        font-size: 24px;
        min-width: 150px;
    }

    .timesheet-date-nav {
        flex-direction: column;
        gap: 10px;
    }

    .timesheet-entry {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .weekly-task-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ========================================
   Sprint 4G: Tag System Styles
   ======================================== */

/* Tag Badge */
.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: white;
    margin: 2px;
    white-space: nowrap;
}

.tag-badge .tag-text {
    line-height: 1;
}

.tag-badge .remove-tag-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 2px;
    margin-left: 2px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.tag-badge .remove-tag-btn:hover {
    opacity: 1;
}

/* Tag Selector in Modal */
.tag-selector {
    margin-bottom: 15px;
}

.tag-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tag-selector-header label {
    font-weight: 600;
    color: var(--text-dark);
}

.current-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 32px;
    padding: 8px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 8px;
}

.no-tags-text {
    color: var(--text-light);
    font-size: 13px;
    font-style: italic;
}

/* Tag Dropdown */
.tag-dropdown {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

.tag-dropdown #tagSearchInput {
    width: 100%;
    margin-bottom: 8px;
}

.tag-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.tag-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.tag-option:hover {
    background: var(--bg-light);
}

.tag-color-preview {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-name {
    font-size: 14px;
    color: var(--text-dark);
}

.no-tags {
    padding: 16px;
    text-align: center;
    color: var(--text-light);
    font-style: italic;
}

/* Tag Filter in Views */
.tag-filter {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.tag-filter label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.tag-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.tag-filter-checkbox:hover {
    background: var(--bg-primary);
}

.tag-filter-input {
    margin-right: 4px;
    cursor: pointer;
}

/* Tag Management Page (Future: Sprint 4G expansion) */
.tag-management-container {
    padding: 20px;
}

.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.tag-card {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    transition: box-shadow 0.2s;
}

.tag-card:hover {
    box-shadow: var(--shadow-md);
}

.tag-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tag-card-actions {
    display: flex;
    gap: 4px;
}

.tag-card-actions button {
    padding: 4px 8px;
    font-size: 12px;
}

.tag-task-count {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 8px;
}

/* ==================== Task Modal Tabs (Grouped) ==================== */
.modal-tabs {
    background: var(--bg-light);
    padding: 0;
    flex-shrink: 0; /* Don't shrink tabs when modal is at fixed height */
}

/* Primary row: Tab group buttons */
.tab-group-list {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.tab-group-btn {
    flex: 1;
    padding: 9px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab-group-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

.tab-group-btn.active {
    background: var(--bg-light);
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-group-btn i {
    font-size: 13px;
}

/* Secondary row: Child tab buttons within active group */
.tab-child-list {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    background: var(--bg-light);
    border-bottom: 2px solid var(--border-color);
}

/* Legacy .tab-list support (org settings etc.) */
.tab-list {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
}

.tab-btn {
    flex: 1;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
}

.tab-btn.active {
    background: var(--bg-primary);
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-btn i {
    font-size: 14px;
}

/* ==================== Material Library Modal ==================== */
#materialLibraryModal .modal-content {
    max-width: 1000px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#materialLibraryModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Organization Settings Modal - Vertical Stacked Tabs Layout */
#orgSettingsModal .modal-content {
    max-width: 1000px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.org-settings-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.org-settings-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.vertical-tab-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.vertical-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.vertical-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--primary-color, #3498db);
}

.vertical-tab-btn.active {
    background: var(--bg-primary);
    color: var(--primary-color, #3498db);
    border-left-color: var(--primary-color, #3498db);
    font-weight: 500;
}

.vertical-tab-btn i {
    width: 18px;
    text-align: center;
    font-size: 14px;
}

.vertical-tab-btn span {
    flex: 1;
}

.org-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 0;
}

.tab-content {
    display: none;
}

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

/* Adjust modal body padding for tabs */
/* Task Detail Modal - Fixed height with sticky footer */
#taskDetailModal .modal-content {
    max-width: 1000px;
    height: 85vh;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#taskDetailModal .modal-body {
    padding-top: 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

#taskDetailModal .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-white);
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

/* ==================== Tag Cloud Widget (Sprint 4G) ==================== */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.tag-cloud-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid;
}

.tag-cloud-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tag-cloud-item.active {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    transform: scale(1.05);
}

.tag-cloud-item .tag-count {
    margin-left: 6px;
    opacity: 0.8;
    font-size: 11px;
}

#tagFilterInline {
    min-width: 150px;
}

/* Tag color preview in filter dropdown */
#tagFilterInline option {
    padding-left: 8px;
}

/* ============================================================================
   CSV IMPORT WIZARD
   ============================================================================ */

.import-wizard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}

.import-wizard-modal[style*="display: block"] {
    display: flex;
}

.import-wizard-container {
    background: var(--bg-primary, #ffffff);
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    margin: auto;
    position: relative;
}

.import-wizard-header {
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.import-wizard-header h2 {
    margin: 0;
    color: var(--text-primary, #333);
}

.import-wizard-header .modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-wizard-header .modal-close:hover {
    color: var(--text-primary);
}

/* Step Indicators */
.step-indicators {
    display: flex;
    justify-content: space-between;
    padding: 30px 50px 20px;
    position: relative;
}

.step-indicators::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 100px;
    right: 100px;
    height: 2px;
    background: var(--border-color, #e0e0e0);
    z-index: 1;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary, #999);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid var(--border-color, #e0e0e0);
}

.step-indicator.active .step-number {
    background: var(--primary-color, #4A90E2);
    color: white;
    border-color: var(--primary-color, #4A90E2);
}

.step-indicator.completed .step-number {
    background: var(--success-color, #28a745);
    color: white;
    border-color: var(--success-color, #28a745);
}

.step-label {
    font-size: 12px;
    color: var(--text-secondary, #666);
    text-align: center;
}

.step-indicator.active .step-label {
    color: var(--primary-color, #4A90E2);
    font-weight: 600;
}

/* Wizard Content */
.import-wizard-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
}

.import-step h3 {
    margin: 0 0 10px;
    color: var(--text-primary, #333);
}

.import-step > p {
    margin: 0 0 20px;
    color: var(--text-secondary, #666);
}

/* CSV Drop Zone */
.csv-drop-zone {
    border: 2px dashed var(--border-color, #ccc);
    border-radius: 8px;
    padding: 60px 40px;
    text-align: center;
    background: var(--bg-secondary, #f9f9f9);
    cursor: pointer;
    transition: all 0.3s ease;
}

.csv-drop-zone:hover,
.csv-drop-zone.drag-over {
    border-color: var(--primary-color, #4A90E2);
    background: var(--primary-bg-light, #e3f2fd);
}

.drop-zone-content svg {
    margin: 0 auto 20px;
    color: var(--text-secondary, #999);
}

.drop-zone-content p {
    margin: 10px 0;
    color: var(--text-secondary, #666);
}

.drop-zone-content .or-text {
    font-size: 12px;
    color: var(--text-tertiary, #999);
    margin: 20px 0;
}

.upload-status {
    margin-top: 20px;
}

.upload-progress p {
    margin: 0 0 10px;
    color: var(--text-secondary, #666);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary, #e0e0e0);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color, #4A90E2);
    /* Width is set inline based on actual progress percentage */
    transition: width 0.3s ease;
}

/* Loading animation only for upload/indeterminate progress bars */
.progress-fill.loading {
    width: 0%;
    animation: progressAnimation 1.5s ease-in-out infinite;
}

@keyframes progressAnimation {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

.upload-success {
    padding: 20px;
    background: var(--success-bg, #d4edda);
    border: 1px solid var(--success-border, #c3e6cb);
    border-radius: 4px;
    color: var(--success-text, #155724);
}

.upload-error {
    padding: 20px;
    background: var(--error-bg, #f8d7da);
    border: 1px solid var(--error-border, #f5c6cb);
    border-radius: 4px;
    color: var(--error-text, #721c24);
}

/* Column Mapping */
.column-mapping-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-color, #e0e0e0);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    overflow: hidden;
}

.mapping-header {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.5fr;
    gap: 1px;
    background: var(--bg-tertiary, #f0f0f0);
    font-weight: 600;
    font-size: 13px;
}

.mapping-header > div {
    padding: 12px;
    background: var(--bg-secondary, #fafafa);
}

.mapping-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.5fr;
    gap: 1px;
    background: var(--border-color, #e0e0e0);
}

.mapping-row > div {
    padding: 10px 12px;
    background: var(--bg-primary, #ffffff);
    display: flex;
    align-items: center;
}

.csv-column {
    font-weight: 500;
    color: var(--text-primary, #333);
}

.target-field select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-primary, #ffffff);
    font-size: 13px;
}

.sample-data {
    font-size: 12px;
    color: var(--text-secondary, #666);
    font-family: monospace;
}

.validation-message {
    margin-top: 20px;
    padding: 12px;
    border-radius: 4px;
}

.validation-message p {
    margin: 0;
    font-size: 14px;
}

.validation-message.error p,
.validation-message .error {
    color: var(--error-text, #721c24);
    background: var(--error-bg, #f8d7da);
    padding: 12px;
    border-radius: 4px;
}

.validation-message.success p,
.validation-message .success {
    color: var(--success-text, #155724);
    background: var(--success-bg, #d4edda);
    padding: 12px;
    border-radius: 4px;
}

.validation-message.warning p,
.validation-message .warning {
    color: var(--warning-text, #856404);
    background: var(--warning-bg, #fff3cd);
    padding: 12px;
    border-radius: 4px;
}

/* Project Split */
.project-split-info {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 4px;
}

.project-split-info p {
    margin: 5px 0;
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.project-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.project-split-item {
    padding: 15px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-primary, #ffffff);
    display: flex;
    align-items: center;
    gap: 15px;
}

.project-name-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    font-size: 14px;
}

.row-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.row-input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    text-align: center;
}

/* User Mapping */
.user-mapping-info {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 4px;
}

.user-mapping-info p {
    margin: 5px 0;
    font-size: 14px;
}

.user-mapping-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.user-mapping-item {
    padding: 15px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--bg-primary, #ffffff);
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    align-items: start;
}

.user-initials {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary, #333);
    padding-top: 8px;
}

.user-mapping-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-action-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    font-size: 14px;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    font-size: 14px;
}

.new-user-input {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    font-size: 14px;
}

.new-user-input + .new-user-input {
    margin-top: 8px;
}

.hint-text {
    font-size: 12px;
    color: var(--text-secondary, #888);
    margin: 6px 0 0 0;
}

.skip-message {
    font-size: 13px;
    color: var(--text-secondary, #666);
    font-style: italic;
}

/* Review */
.review-summary {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.summary-section h4 {
    margin: 0 0 12px;
    color: var(--text-primary, #333);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    padding-bottom: 8px;
}

.summary-section p {
    margin: 5px 0;
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.summary-section ul {
    margin: 10px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.summary-section li {
    margin: 5px 0;
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.import-progress {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
}

.import-progress .spinner {
    border: 3px solid var(--border-color, #f3f3f3);
    border-top: 3px solid var(--primary-color, #4A90E2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

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

.import-success {
    background: var(--success-bg, #d4edda);
    border: 1px solid var(--success-border, #c3e6cb);
    padding: 30px;
    border-radius: 8px;
}

.import-success h3 {
    color: var(--success-text, #155724);
    margin: 0 0 20px;
}

.import-success p {
    margin: 8px 0;
    color: var(--success-text, #155724);
}

.import-error {
    background: var(--error-bg, #f8d7da);
    border: 1px solid var(--error-border, #f5c6cb);
    padding: 30px;
    border-radius: 8px;
}

.import-error h3 {
    color: var(--error-text, #721c24);
    margin: 0 0 20px;
}

.import-error p {
    margin: 8px 0;
    color: var(--error-text, #721c24);
}

/* Wizard Footer */
.import-wizard-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.import-wizard-footer button {
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.import-wizard-footer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===========================================
   SPRINT 5F: Organization Settings Styles
   =========================================== */

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.stat-card {
    background: var(--card-bg, #f5f7fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color, #3498db);
}

.stat-label {
    font-size: 12px;
    color: var(--text-light, #888);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Members List */
.members-list {
    max-height: 400px;
    overflow-y: auto;
}

.member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.member-item:last-child {
    border-bottom: none;
}

.member-item:hover {
    background: var(--hover-bg, #f5f7fa);
}

.member-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color, #3498db);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.member-details {
    display: flex;
    flex-direction: column;
}

.member-name {
    font-weight: 500;
    color: var(--text-color, #333);
}

.member-meta {
    font-size: 12px;
    color: var(--text-light, #888);
    display: flex;
    gap: 8px;
}

.member-role {
    background: var(--badge-bg, #e8f4fd);
    color: var(--primary-color, #3498db);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.member-actions {
    display: flex;
    gap: 8px;
}

.btn-danger-icon:hover {
    background: #fce4e4;
    color: var(--danger-color);
}

/* Workflows List */
.workflows-list {
    max-height: 400px;
    overflow-y: auto;
}

.workflow-group {
    margin-bottom: 20px;
}

.workflow-group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light, #888);
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.workflow-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.workflow-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.2s ease;
}

.workflow-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.workflow-card.workflow-default {
    border-color: var(--primary-color, #3498db);
}

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

.workflow-name {
    font-weight: 500;
    color: var(--text-color, #333);
}

.workflow-card-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-light, #888);
    margin-bottom: 12px;
}

.workflow-card-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.workflow-card-actions {
    display: flex;
    gap: 8px;
}

/* Workflow Editor */
#workflowEditorContainer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--primary-color, #3498db);
}

#workflowEditorCanvas {
    margin: 16px 0;
    min-height: 400px;
}

.workflow-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Permission Matrix */
.permission-matrix-wrapper {
    overflow-x: auto;
    margin-top: 16px;
}

.permission-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.permission-matrix th,
.permission-matrix td {
    padding: 10px;
    text-align: left;
    border: 1px solid var(--border-color, #e0e0e0);
}

.permission-matrix th {
    background: var(--header-bg, #f5f7fa);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.permission-matrix .role-header {
    text-align: center;
    min-width: 80px;
}

.permission-matrix .category-row {
    background: var(--category-bg, #ecf0f1);
}

.permission-matrix .category-label {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-light, #666);
}

.permission-matrix .permission-row:hover {
    background: var(--hover-bg, #f9fafb);
}

.permission-matrix .permission-name {
    min-width: 200px;
}

.permission-matrix .permission-cell {
    text-align: center;
}

.permission-matrix .permission-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Placeholder Message */
.placeholder-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light, #888);
}

.placeholder-message i {
    display: block;
    margin-bottom: 16px;
}

.placeholder-message p {
    margin: 8px 0;
}

/* Help Text */
.help-text {
    display: block;
    font-size: 12px;
    color: var(--text-light, #888);
    margin-top: 4px;
    line-height: 1.4;
}

.badge-primary {
    background: var(--primary-color, #3498db);
    color: white;
}

/* Toast Animations */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #f5f7fa);
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h3,
.section-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark, #333);
}

/* Organization Settings Modal Button Fixes */
#orgSettingsModal .btn-primary,
#addOrgMemberModal .btn-primary,
#createWorkflowModal .btn-primary,
#editStatusModal .btn-primary,
#editTransitionModal .btn-primary {
    background-color: var(--primary-color, #3498db);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

#orgSettingsModal .btn-primary:hover,
#addOrgMemberModal .btn-primary:hover,
#createWorkflowModal .btn-primary:hover,
#editStatusModal .btn-primary:hover,
#editTransitionModal .btn-primary:hover {
    background-color: var(--primary-hover, #2980b9);
}

#orgSettingsModal .btn-secondary,
#addOrgMemberModal .btn-secondary,
#createWorkflowModal .btn-secondary,
#editStatusModal .btn-secondary,
#editTransitionModal .btn-secondary {
    background-color: var(--secondary-bg, #f0f0f0);
    color: var(--text-color, #333);
    border: 1px solid var(--border-color, #ccc);
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}

#orgSettingsModal .btn-secondary:hover,
#addOrgMemberModal .btn-secondary:hover,
#createWorkflowModal .btn-secondary:hover,
#editStatusModal .btn-secondary:hover,
#editTransitionModal .btn-secondary:hover {
    background-color: var(--hover-bg, #e0e0e0);
}

#orgSettingsModal .btn-danger,
#editStatusModal .btn-danger,
#editTransitionModal .btn-danger {
    background-color: var(--danger-color, #e74c3c);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

#orgSettingsModal .btn-danger:hover,
#editStatusModal .btn-danger:hover,
#editTransitionModal .btn-danger:hover {
    background-color: var(--danger-hover, #c0392b);
}

/* ===============================================
   Sprint 5H: Org Chart Styles
   =============================================== */

/* Org Chart Container */
.org-chart-container {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

/* Tree View Styles */
.org-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.org-tree ul {
    list-style: none;
    padding-left: 24px;
    margin: 0;
    border-left: 1px dashed var(--border-color, #ccc);
    margin-left: 12px;
}

.org-tree-item {
    position: relative;
    padding: 4px 0;
}

.org-tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: 1px solid transparent;
}

.org-tree-node:hover {
    background-color: var(--hover-bg, #f0f4f8);
}

.org-tree-node.selected {
    background-color: var(--primary-light, #e3f2fd);
    border-color: var(--primary-color, #3498db);
}

.org-tree-node .node-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.org-tree-node .node-name {
    font-weight: 500;
    color: var(--text-color, #333);
    flex-grow: 1;
}

.org-tree-node .node-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    background-color: var(--secondary-bg, #e8e8e8);
    color: var(--text-muted, #666);
}

.org-tree-node .node-badge.manager {
    background-color: var(--warning-light, #fff3cd);
    color: var(--warning-dark, #856404);
}

.org-tree-node .node-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #666);
    cursor: pointer;
}

.org-tree-node .node-toggle:hover {
    color: var(--primary-color, #3498db);
}

/* Unit Details Panel */
.unit-details-panel {
    background: var(--card-bg, #f9f9f9);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.unit-details-panel .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.unit-details-panel .section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark, #333);
}

.unit-details-content {
    margin-top: 12px;
}

/* Unit Members List in Details Panel */
.unit-members-section .members-list {
    max-height: 200px;
    overflow-y: auto;
}

.unit-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    margin-bottom: 6px;
}

.unit-member-item:last-child {
    margin-bottom: 0;
}

.unit-member-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unit-member-info .member-name {
    font-weight: 500;
}

.unit-member-info .member-title {
    font-size: 12px;
    color: var(--text-muted, #666);
    padding: 2px 8px;
    background-color: var(--secondary-bg, #e8e8e8);
    border-radius: 10px;
}

.unit-member-info .member-title.is-manager {
    background-color: var(--warning-light, #fff3cd);
    color: var(--warning-dark, #856404);
}

.unit-member-actions {
    display: flex;
    gap: 4px;
}

.unit-member-actions button {
    padding: 4px 8px;
    font-size: 12px;
}

/* Empty State */
.org-chart-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #666);
}

.org-chart-empty i {
    font-size: 48px;
    color: var(--border-color, #ccc);
    margin-bottom: 16px;
}

.org-chart-empty p {
    margin: 8px 0;
}

/* Add Unit Member Modal */
#addUnitMemberModal .modal-content {
    max-width: 400px;
}

/* ===============================================
   Sprint 5H-2: Org Chart Visual Editor Styles
   =============================================== */

/* Visual Editor Container */
.org-chart-visual {
    position: relative;
    width: 100%;
    min-height: 450px;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color, #e0e0e0);
}

/* Control Buttons */
.org-chart-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    background: rgba(255,255,255,0.9);
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.org-chart-controls .control-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color, #ddd);
    background: var(--bg-primary);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color, #333);
    transition: all 0.15s ease;
}

.org-chart-controls .control-btn:hover {
    background: var(--primary-light, #e3f2fd);
    border-color: var(--primary-color, #2196f3);
    color: var(--primary-color, #2196f3);
}

.org-chart-controls .zoom-level {
    font-size: 12px;
    color: var(--text-muted, #666);
    min-width: 40px;
    text-align: center;
}

/* SVG Wrapper */
.org-chart-svg-wrapper {
    overflow: hidden;
    user-select: none;
}

/* Node Styles (SVG) */
.org-chart-node {
    transition: opacity 0.2s ease;
}

.org-chart-node:hover {
    opacity: 0.95;
}

/* View Toggle Buttons */
.view-toggle-group {
    display: inline-flex;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    overflow: hidden;
    margin-left: 12px;
}

.view-toggle-btn {
    padding: 6px 12px;
    border: none;
    background: var(--secondary-bg, #f5f5f5);
    color: var(--text-color, #333);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.view-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--border-color, #ddd);
}

.view-toggle-btn:hover {
    background: var(--hover-bg, #e8e8e8);
}

.view-toggle-btn.active {
    background: var(--primary-color, #2196f3);
    color: white;
}

/* Visual Editor specific container */
#orgChartVisualContainer {
    min-height: 400px;
    margin-top: 12px;
}

/* Drag cursor states */
.org-chart-visual.dragging {
    cursor: grabbing !important;
}

.org-chart-visual.dragging * {
    cursor: grabbing !important;
}

/* ===============================================
   Sprint 5H-4: Manager Dashboard Styles
   =============================================== */

/* Manager Dashboard Section */
.manager-dashboard {
    padding: 8px 0;
}

/* Summary Stats Row */
.manager-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.manager-stat {
    flex: 1;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.manager-stat .stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color, #3498db);
}

.manager-stat .stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-top: 2px;
}

.manager-stat.alert .stat-value {
    color: var(--danger-color, #e74c3c);
}

/* Managed Units List */
.managed-units-list {
    max-height: 150px;
    overflow-y: auto;
}

.managed-unit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.managed-unit-item:hover {
    background: var(--hover-bg, #f5f5f5);
}

.managed-unit-item .unit-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 8px;
    flex-shrink: 0;
}

.managed-unit-item .unit-name {
    flex-grow: 1;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.managed-unit-item .unit-stats {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted, #666);
}

.managed-unit-item .unit-stats .overdue {
    color: var(--danger-color, #e74c3c);
    font-weight: 600;
}

/* Team Workload Modal */
#teamWorkloadModal .modal-content {
    max-width: 800px;
}

.workload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.workload-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
}

.workload-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.workload-card-header .unit-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 8px;
}

.workload-card-header h4 {
    margin: 0;
    font-size: 14px;
    flex-grow: 1;
}

.workload-progress {
    margin-top: 10px;
}

.workload-progress-bar {
    height: 6px;
    background: var(--border-color, #e0e0e0);
    border-radius: 3px;
    overflow: hidden;
}

.workload-progress-fill {
    height: 100%;
    background: var(--success-color, #27ae60);
    transition: width 0.3s ease;
}

.workload-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted, #666);
}

/* ==================== */
/* Working Groups (Sprint 5H - Logical Units) */
/* ==================== */

.working-groups-container {
    margin-top: 16px;
    min-height: 200px;
}

.working-groups-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-muted, #666);
    text-align: center;
}

.working-groups-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.working-groups-empty p {
    margin: 4px 0;
    max-width: 400px;
}

.working-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.working-group-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.working-group-card:hover {
    border-color: var(--primary-color, #4a90d9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.working-group-card.selected {
    border-color: var(--primary-color, #4a90d9);
    background: rgba(74, 144, 217, 0.05);
}

.working-group-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.working-group-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
}

.working-group-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #333);
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.working-group-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.working-group-description {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #666);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.working-group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted, #888);
}

.working-group-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.working-group-meta .meta-item.manager {
    color: var(--primary-color, #4a90d9);
    font-weight: 500;
}

.working-group-oversight {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted, #888);
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #eee);
}

.working-group-oversight i {
    opacity: 0.6;
}

/* ==================== */
/* Approval Boards (Sprint 5K-3) */
/* ==================== */

.approval-boards-container {
    margin-top: 16px;
    min-height: 200px;
}

.approval-board-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.approval-board-card:hover {
    border-color: var(--primary-color, #4a90d9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.board-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.badge-level {
    background: var(--primary-color, #4a90d9);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.board-details {
    margin-bottom: 12px;
}

.board-description {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--text-secondary, #666);
}

.board-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.board-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meeting-schedule {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: var(--text-muted, #888);
    font-style: italic;
}

.board-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #eee);
}

/* Submission Cards */
.submission-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.submission-card.pending {
    border-left: 4px solid var(--warning-color, #f0ad4e);
}

.submission-card.underreview {
    border-left: 4px solid var(--info-color, #5bc0de);
}

.submission-card.approved {
    border-left: 4px solid var(--success-color, #5cb85c);
}

.submission-card.rejected {
    border-left: 4px solid var(--danger-color, #d9534f);
}

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

.submission-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.submission-details {
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin-bottom: 12px;
}

.submission-details p {
    margin: 4px 0;
}

.submission-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #eee);
}

/* Project Approval Status in Task Modal */
.approval-submissions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.approval-submission-item {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    padding: 12px;
}

.approval-submission-item.approved {
    border-left: 3px solid var(--success-color, #5cb85c);
}

.approval-submission-item.rejected {
    border-left: 3px solid var(--danger-color, #d9534f);
}

.approval-submission-item.pending,
.approval-submission-item.underreview {
    border-left: 3px solid var(--warning-color, #f0ad4e);
}

.submission-board {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.submission-info {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-bottom: 8px;
}

.submission-info span {
    margin-right: 16px;
}

.submission-votes {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.vote-count {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.vote-count.approve {
    background: rgba(92, 184, 92, 0.15);
    color: var(--success-color, #5cb85c);
}

.vote-count.reject {
    background: rgba(217, 83, 79, 0.15);
    color: var(--danger-color, #d9534f);
}

.vote-count.pending {
    background: rgba(240, 173, 78, 0.15);
    color: var(--warning-color, #f0ad4e);
}

.final-decision {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #eee);
    font-size: 13px;
}

.decision-notes {
    margin: 4px 0 0 0;
    font-style: italic;
    color: var(--text-secondary, #666);
}

/* Members Table */
.members-table {
    width: 100%;
    border-collapse: collapse;
}

.members-table th,
.members-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.members-table th {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary, #666);
    background: var(--bg-secondary, #f8f9fa);
}

.members-table td {
    font-size: 14px;
}

.member-role-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 13px;
}

/* ==================== */
/* Hierarchical Reports (Sprint 5H-5) */
/* ==================== */

.hierarchical-reports-container {
    margin-top: 16px;
}

.reports-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-muted, #666);
    text-align: center;
}

.reports-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.reports-toolbar {
    margin-bottom: 16px;
}

.report-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-type-buttons button {
    flex: 0 0 auto;
}

.report-options {
    background: var(--surface-bg, #f5f5f5);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.report-options .checkbox-group {
    display: flex;
    align-items: center;
    padding-top: 24px;
}

.report-options .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.report-content {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 20px;
    min-height: 300px;
}

.report-export {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.report-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-timestamp {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 13px;
}

.report-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.report-stats-grid .stat-card {
    background: var(--surface-bg, #f5f5f5);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.report-stats-grid .stat-card.warning .stat-value {
    color: var(--warning-color, #f39c12);
}

.report-section {
    margin-bottom: 24px;
}

.report-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.metric-card {
    background: var(--surface-bg, #f5f5f5);
    padding: 12px;
    border-radius: 6px;
    text-align: center;
}

.metric-card.danger .metric-value {
    color: var(--danger-color, #e74c3c);
}

.metric-card .metric-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color, #4a90d9);
}

.metric-card .metric-label {
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-top: 4px;
}

.time-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.time-metric {
    display: flex;
    gap: 8px;
}

.time-metric .label {
    color: var(--text-muted, #888);
}

.time-metric .value {
    font-weight: 600;
}

.time-metric.over-budget .value {
    color: var(--danger-color, #e74c3c);
}

.time-metric.under-budget .value {
    color: var(--success-color, #27ae60);
}

.workload-distribution {
    display: flex;
    gap: 12px;
}

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

.workload-badge.high {
    background: #fce4ec;
    color: #c62828;
}

.workload-badge.normal {
    background: #e3f2fd;
    color: #1565c0;
}

.workload-badge.low {
    background: #e8f5e9;
    color: #2e7d32;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.report-table th,
.report-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.report-table th {
    background: var(--surface-bg, #f5f5f5);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-muted, #666);
}

.report-table .text-danger {
    color: var(--danger-color, #e74c3c);
    font-weight: 600;
}

.cascade-tree {
    padding: 12px 0;
}

.cascade-node {
    margin-bottom: 8px;
    padding: 12px;
    background: var(--surface-bg, #f5f5f5);
    border-radius: 6px;
    border-left: 4px solid var(--border-color, #ccc);
}

.cascade-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.health-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.health-indicator.healthy {
    background: var(--success-color, #27ae60);
}

.health-indicator.warning {
    background: var(--warning-color, #f39c12);
}

.health-indicator.critical {
    background: var(--danger-color, #e74c3c);
}

.cascade-node .node-name {
    font-weight: 600;
    flex-grow: 1;
}

.cascade-node .node-manager {
    font-size: 12px;
    color: var(--text-muted, #888);
}

.health-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.health-badge.healthy {
    background: #e8f5e9;
    color: #2e7d32;
}

.health-badge.warning {
    background: #fff8e1;
    color: #f57c00;
}

.health-badge.critical {
    background: #ffebee;
    color: #c62828;
}

.cascade-node-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.cascade-node-stats .text-danger {
    color: var(--danger-color, #e74c3c);
}

.cascade-children {
    margin-top: 8px;
}

.unit-summary-card {
    background: var(--surface-bg, #f5f5f5);
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.unit-summary-card h5 {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.unit-summary-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.unit-summary-stats .text-danger {
    color: var(--danger-color, #e74c3c);
}

/* ================================================
   ESCALATION & MEETING STYLES (Sprint 5H-6)
   ================================================ */

/* Tab header with description and action button */
.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.tab-header .tab-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Escalation Rules List */
.escalation-rules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.escalation-rule-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.escalation-rule-item.inactive {
    opacity: 0.6;
}

.escalation-rule-item .rule-info {
    flex: 1;
}

.escalation-rule-item .rule-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.escalation-rule-item .rule-days {
    font-weight: 600;
    color: var(--text-primary);
}

.escalation-rule-item .rule-message {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.rule-type-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.rule-type-badge.type-manager {
    background: #dbeafe;
    color: var(--color-accent-hover);
}

.rule-type-badge.type-parent {
    background: #fef3c7;
    color: #92400e;
}

.rule-type-badge.type-assignee {
    background: #d1fae5;
    color: #065f46;
}

.inactive-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--danger-color);
    color: white;
}

.rule-actions {
    display: flex;
    gap: 5px;
}

/* Meetings List */
.meetings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meeting-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.meeting-item .meeting-info {
    flex: 1;
}

.meeting-item .meeting-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.meeting-item .meeting-title {
    font-weight: 600;
    color: var(--text-primary);
}

.meeting-item .meeting-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.meeting-item .meeting-details i {
    margin-right: 4px;
    opacity: 0.7;
}

.meeting-item .meeting-location {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.meeting-type-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-transform: capitalize;
}

.meeting-type-badge.type-standup {
    background: #d1fae5;
    color: #065f46;
}

.meeting-type-badge.type-planning {
    background: #dbeafe;
    color: var(--color-accent-hover);
}

.meeting-type-badge.type-retro {
    background: #fef3c7;
    color: #92400e;
}

.meeting-type-badge.type-review {
    background: #e0e7ff;
    color: #3730a3;
}

.meeting-type-badge.type-oneonone {
    background: #fce7f3;
    color: #9d174d;
}

.meeting-type-badge.type-allhands {
    background: #f3e8ff;
    color: #6b21a8;
}

.meeting-type-badge.small {
    font-size: 10px;
    padding: 1px 6px;
}

.meeting-actions {
    display: flex;
    gap: 5px;
}

/* Escalated Items (Dashboard) */
.escalated-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--warning-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.escalated-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.escalated-item-header .task-title {
    font-weight: 600;
    color: var(--primary-color);
}

.escalated-item-header .task-title:hover {
    text-decoration: underline;
}

.days-overdue-badge {
    background: var(--danger-color);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.escalated-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.escalated-item-meta i {
    margin-right: 4px;
    opacity: 0.7;
}

.escalated-item-actions {
    display: flex;
    gap: 8px;
}

/* Upcoming Meetings (Sidebar) */
.meeting-date-group {
    margin-bottom: 12px;
}

.meeting-date-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.upcoming-meeting-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.upcoming-meeting-item:hover {
    background: var(--bg-hover);
}

.upcoming-meeting-item .meeting-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 50px;
}

.upcoming-meeting-item .meeting-info {
    flex: 1;
    min-width: 0;
}

.upcoming-meeting-item .meeting-title {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-meeting-item .meeting-unit {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
}

/* Meeting Details Modal */
.meeting-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.meeting-details-grid .detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meeting-details-grid .detail-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.meeting-details-grid .detail-label i {
    margin-right: 4px;
}

.video-link-section {
    margin: 12px 0;
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    text-align: center;
}

.video-link-section a {
    color: var(--primary-color);
    font-weight: 500;
}

.video-link-section a i {
    margin-right: 6px;
}

.description-text {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: pre-wrap;
}

.attendees-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

.attendee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 13px;
}

.attendee-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
}

.attendee-status.status-accepted {
    background: #d1fae5;
    color: #065f46;
}

.attendee-status.status-declined {
    background: #fee2e2;
    color: #991b1b;
}

.attendee-status.status-tentative {
    background: #fef3c7;
    color: #92400e;
}

.attendee-status.status-pending {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.response-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

/* Modal size variants */
.modal-content.modal-lg {
    max-width: 700px;
}

.modal-content.modal-sm {
    max-width: 450px;
}

/* Form help text */
.form-help {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Empty state styling */
.empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state p {
    margin: 4px 0;
}

.empty-state.small {
    padding: 15px 10px;
}

.empty-state.small i {
    font-size: 24px;
    margin-bottom: 8px;
}

.empty-state.small p {
    font-size: 12px;
}

/* Resolved items list */
.resolved-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.resolved-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--success-color);
    font-size: 13px;
}

.resolved-item .task-title {
    font-weight: 500;
    color: var(--text-primary);
}

.resolved-item .resolved-date {
    color: var(--text-secondary);
    font-size: 12px;
}

.resolved-item .resolution-notes {
    width: 100%;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Card warning style */
.summary-card.card-warning {
    border-color: var(--warning-color);
    background: #fffbeb;
}

.summary-card.card-warning .summary-icon {
    color: var(--warning-color);
}

/* Badge styling */
.reports-btn .badge {
    display: inline-block;
    background: var(--danger-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
}

.section-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: normal;
}

.upcoming-meetings-sidebar {
    max-height: 250px;
    overflow-y: auto;
}

/* ==================== Sprint 5N: Agenda Items ==================== */

/* Meeting Modal Tab Panes */
.meeting-modal-tab-pane {
    display: none;
}

.meeting-modal-tab-pane.active {
    display: block;
}

/* Agenda Section */
.agenda-section {
    padding: 10px 0;
}

.agenda-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.agenda-section .section-header h4 {
    margin: 0;
    font-size: 16px;
    color: var(--text-color);
}

/* Agenda Item Form */
.agenda-item-form {
    background: var(--background-light);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
}

.agenda-item-form h5 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.agenda-item-form .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* Agenda Summary */
.agenda-summary {
    display: flex;
    gap: 20px;
    padding: 10px 15px;
    background: var(--background-light);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.agenda-summary i {
    margin-right: 5px;
    color: var(--primary-color);
}

/* Agenda Items List */
.agenda-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.agenda-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.agenda-item-drag {
    color: var(--text-muted);
    cursor: grab;
    padding: 4px;
}

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

.agenda-item.dragging {
    opacity: 0.5;
    border: 2px dashed var(--primary-color);
    background: var(--primary-bg);
}

.agenda-item-drag:active {
    cursor: grabbing;
}

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

.agenda-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.agenda-item-title {
    font-weight: 500;
    color: var(--text-color);
}

.agenda-item-type {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--background-light);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agenda-item-type.type-discussion {
    background: #e3f2fd;
    color: #1976d2;
}

.agenda-item-type.type-taskreview {
    background: #e8f5e9;
    color: #388e3c;
}

.agenda-item-type.type-decision {
    background: #fff3e0;
    color: #f57c00;
}

.agenda-item-type.type-update {
    background: #f3e5f5;
    color: #7b1fa2;
}

.agenda-item-type.type-actionitem {
    background: #fce4ec;
    color: #c2185b;
}

.agenda-item-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: var(--text-secondary);
}

.agenda-item-meta i {
    margin-right: 4px;
    color: var(--text-muted);
}

.agenda-linked-task {
    color: var(--primary-color);
    cursor: pointer;
}

.agenda-linked-task:hover {
    text-decoration: underline;
}

.agenda-item-description {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.agenda-item-actions {
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.agenda-item:hover .agenda-item-actions {
    opacity: 1;
}

/* Section header actions (multiple buttons) */
.section-header-actions {
    display: flex;
    gap: 8px;
}

/* ==================== Occurrence Browser Styles ==================== */

.occurrence-browser-controls {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.occurrence-browser-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.occurrence-browser-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.occurrence-browser-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-bg);
}

.occurrence-browser-item-info {
    flex: 1;
}

.occurrence-browser-item-date {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.occurrence-browser-item-time {
    font-size: 13px;
    color: var(--text-muted);
}

.occurrence-browser-item-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.occurrence-browser-item-status.upcoming {
    background: var(--primary-bg);
    color: var(--primary-color);
}

.occurrence-browser-item-status.past {
    background: var(--secondary-bg);
    color: var(--text-muted);
}

.occurrence-browser-item-actions {
    display: flex;
    gap: 8px;
}

/* ==================== Sprint 5N-5: Meeting Notes Styles ==================== */

/* Notes section in meeting modal */
.notes-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.notes-section .section-header h4 {
    margin: 0;
    color: var(--text-color);
}

/* Occurrence Cards */
.notes-occurrences-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 500px;
    overflow-y: auto;
}

.occurrence-card {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
}

.occurrence-card.status-completed {
    border-left: 3px solid #4caf50;
}

.occurrence-card.status-inprogress {
    border-left: 3px solid #ff9800;
}

.occurrence-card.status-cancelled {
    border-left: 3px solid #f44336;
    opacity: 0.7;
}

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

.occurrence-date {
    font-weight: 500;
    color: var(--text-color);
}

.occurrence-date i {
    margin-right: 8px;
    color: var(--primary-color);
}

.occurrence-status-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
}

.occurrence-status-badge.status-scheduled {
    background: #e3f2fd;
    color: #1976d2;
}

.occurrence-status-badge.status-inprogress {
    background: #fff3e0;
    color: #f57c00;
}

.occurrence-status-badge.status-completed {
    background: #e8f5e9;
    color: #388e3c;
}

.occurrence-status-badge.status-cancelled {
    background: #ffebee;
    color: #c62828;
}

.occurrence-facilitator,
.occurrence-attendees,
.occurrence-duration {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.occurrence-facilitator i,
.occurrence-attendees i,
.occurrence-duration i {
    width: 18px;
    margin-right: 5px;
    color: var(--text-muted);
}

.occurrence-summary {
    margin-top: 12px;
    padding: 10px;
    background: var(--background-color);
    border-radius: 6px;
}

.occurrence-summary strong {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--text-secondary);
}

.occurrence-summary p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.occurrence-decisions,
.occurrence-action-items,
.occurrence-notes {
    margin-top: 12px;
}

.occurrence-decisions strong,
.occurrence-action-items strong,
.occurrence-notes strong {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.occurrence-decisions ul,
.occurrence-action-items ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
}

.occurrence-decisions li,
.occurrence-action-items li {
    margin-bottom: 5px;
    line-height: 1.4;
}

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

.occurrence-action-items .assignee {
    font-weight: 500;
    color: var(--primary-color);
}

.occurrence-action-items .due-date {
    font-size: 11px;
    color: var(--text-muted);
}

.notes-content {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--background-color);
    padding: 10px;
    border-radius: 6px;
}

.occurrence-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* Occurrence Details Modal */
.occurrence-details-full {
    padding: 10px 0;
}

.occurrence-details-full .details-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.occurrence-details-full .details-header h3 {
    margin: 0 0 5px;
}

.occurrence-details-full .details-header .details-date {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.details-section {
    margin-bottom: 20px;
}

.details-section h4 {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.details-section h4 i {
    color: var(--primary-color);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 14px;
}

.topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-tag {
    padding: 4px 12px;
    background: var(--background-light);
    border-radius: 15px;
    font-size: 12px;
    color: var(--text-secondary);
}

.decisions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.decision-item {
    padding: 12px;
    background: var(--background-light);
    border-radius: 6px;
    border-left: 3px solid #ff9800;
}

.decision-item .decision-text {
    font-weight: 500;
    margin-bottom: 5px;
}

.decision-item .decision-by,
.decision-item .decision-time {
    font-size: 12px;
    color: var(--text-muted);
}

.action-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-items-list .action-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--background-light);
    border-radius: 6px;
}

.action-items-list .action-item.completed {
    opacity: 0.7;
}

.action-items-list .action-item.completed .action-text {
    text-decoration: line-through;
}

.action-items-list .action-content {
    flex: 1;
}

.action-items-list .action-meta {
    display: flex;
    gap: 15px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.notes-content-full {
    background: var(--background-light);
    padding: 15px;
    border-radius: 6px;
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
}

.details-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* Notes Editor Styles */
.notes-section {
    margin-bottom: 20px;
}

.notes-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.decision-row,
.action-item-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.decision-text-input,
.action-text-input {
    flex: 2;
}

.decision-by-input,
.action-assignee-input {
    flex: 1;
}

.action-due-input {
    width: 140px;
}

/* Modal Large */
.modal-large .modal-content {
    max-width: 900px;
}

/* Modal XLarge - for comprehensive submission details */
.modal-xlarge {
    max-width: 1100px;
    width: 95%;
}

/* ==================== Submission Details Modal (Sprint 5K-3) ==================== */

.submission-details-body {
    max-height: 70vh;
    overflow-y: auto;
}

.submission-detail-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.submission-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.submission-detail-section h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.submission-detail-section h4 i {
    color: var(--primary-color);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item label {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
}

.detail-item span {
    font-size: 0.95rem;
    color: var(--text-dark);
}

.executive-summary-text {
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.team-section {
    margin-top: 16px;
}

.team-section label {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.team-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-member-badge {
    background: var(--primary-color-light, #e3f2fd);
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
}

.financial-value {
    font-weight: 600;
    font-size: 1.1rem;
}

.financial-value.highlight {
    color: var(--primary-color);
}

.checklist-progress-container {
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.progress-bar-container {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-bar.complete {
    background: var(--success-color, #28a745);
}

.progress-bar.incomplete {
    background: var(--warning-color, #ffc107);
}

.warning-text {
    color: var(--warning-color, #ffc107);
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.attachments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.attachment-item i {
    font-size: 1.2rem;
    color: var(--primary-color);
    width: 24px;
    text-align: center;
}

.attachment-name {
    flex: 1;
    color: var(--text-dark);
}

.attachment-size {
    color: var(--text-light);
    font-size: 0.85rem;
}

.votes-table {
    width: 100%;
    border-collapse: collapse;
}

.votes-table th,
.votes-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.votes-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-light);
}

.final-decision-section {
    text-align: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.final-decision-badge {
    display: inline-block;
    padding: 12px 32px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    margin-bottom: 12px;
}

.badge-Approved, .badge-success {
    background: var(--success-color, #28a745);
    color: white;
}

.badge-Rejected, .badge-danger {
    background: var(--danger-color, #dc3545);
    color: white;
}

.badge-Pending, .badge-info {
    background: var(--info-color, #17a2b8);
    color: white;
}

.badge-Deferred, .badge-warning {
    background: var(--warning-color, #ffc107);
    color: var(--text-primary);
}

.badge-secondary {
    background: var(--secondary-color);
    color: white;
}

.decision-notes {
    color: var(--text-dark);
    margin: 8px 0;
}

.reviewed-date {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
}

/* ==================== Sprint 5N-2: Meeting Run Mode Styles ==================== */

.meeting-run-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color, #f5f7fa);
    background-color: #f5f7fa; /* Solid fallback to ensure opacity */
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

/* Header Bar */
.run-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    gap: 20px;
}

.run-mode-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.run-mode-header-left h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.run-mode-timer {
    font-size: 2rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.run-mode-timer i {
    font-size: 1.5rem;
}

.run-mode-timer .timer-toggle {
    opacity: 0.5;
    transition: opacity 0.2s;
    margin-left: 5px;
}

.run-mode-timer .timer-toggle:hover {
    opacity: 1;
}

.run-mode-timer .timer-toggle i {
    font-size: 0.9rem;
}

.run-mode-header-right {
    display: flex;
    gap: 10px;
}

/* Main Content Grid */
.run-mode-content {
    flex: 1;
    display: grid;
    grid-template-columns: 300px 1fr 350px;
    gap: 0;
    overflow: hidden;
}

/* Left Panel: Agenda */
.run-mode-agenda {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.run-mode-agenda .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.run-mode-agenda .panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.run-mode-agenda-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.run-agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: var(--background-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.run-agenda-item:hover {
    background: var(--background-color);
}

.run-agenda-item.current {
    border-color: var(--primary-color);
    background: var(--primary-color-light, rgba(59, 130, 246, 0.1));
}

.run-agenda-item.completed {
    opacity: 0.6;
}

.run-agenda-item.completed .agenda-item-title {
    text-decoration: line-through;
}

.run-agenda-item.skipped {
    opacity: 0.5;
}

.agenda-item-status {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.agenda-item-status .item-number {
    width: 24px;
    height: 24px;
    background: var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.agenda-item-status i.fa-check-circle {
    color: #4caf50;
    font-size: 20px;
}

.agenda-item-status i.fa-forward {
    color: #ff9800;
    font-size: 18px;
}

.agenda-item-status i.fa-arrow-right {
    color: var(--primary-color);
    font-size: 18px;
}

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

.agenda-item-info .agenda-item-title {
    display: block;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-item-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.agenda-progress {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.agenda-progress .progress-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.agenda-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width 0.3s ease;
}

#agendaProgressText {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Center Panel: Current Item */
.run-mode-current {
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.current-item-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.current-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.current-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.item-timer {
    font-size: 1.5rem;
    font-family: 'Courier New', monospace;
    color: var(--primary-color);
}

.current-item-content {
    background: var(--background-light);
    border-radius: 12px;
    padding: 30px;
    min-height: 200px;
}

.current-item-content .current-item-type {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.current-item-content .current-item-title {
    font-size: 1.8rem;
    margin: 0 0 15px;
}

.current-item-content .current-item-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 15px;
}

.current-item-content .current-item-presenter,
.current-item-content .current-item-task {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.current-item-content .current-item-task {
    color: var(--primary-color);
}

.current-item-estimate {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 20px;
}

.no-current-item,
.all-items-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
}

.no-current-item i,
.all-items-complete i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.all-items-complete i {
    color: #4caf50;
}

.all-items-complete h2 {
    margin: 0 0 10px;
    color: var(--text-color);
}

.current-item-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.current-item-actions .btn-large {
    padding: 15px 30px;
    font-size: 1rem;
}

/* Decisions Section */
.current-item-decisions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.current-item-decisions h4 {
    margin: 0 0 15px;
    color: var(--text-secondary);
}

.decisions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.decision-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: #fff3e0;
    border-radius: 20px;
    font-size: 14px;
    color: #f57c00;
}

.decision-chip i {
    font-size: 12px;
}

.decision-input-row {
    display: flex;
    gap: 10px;
}

.decision-input-row input {
    flex: 1;
}

/* Run Mode Tasks Section */
.run-mode-tasks {
    margin-top: 30px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.run-mode-tasks .tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.run-mode-tasks .tasks-header h4 {
    margin: 0;
    font-size: 1rem;
}

.run-mode-tasks .tasks-header select {
    font-size: 12px;
    padding: 4px 8px;
}

.run-mode-tasks-list {
    max-height: 300px;
    overflow-y: auto;
}

.run-mode-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--background-light, #f8f9fa);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.run-mode-task:hover {
    background: var(--background-hover, #e9ecef);
}

.run-mode-task .task-main {
    flex: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.run-mode-task .task-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.run-mode-task .task-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.run-mode-task .task-quick-actions {
    display: flex;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.run-mode-task:hover .task-quick-actions {
    opacity: 1;
}

.btn-tiny {
    padding: 4px 6px;
    font-size: 11px;
}

.btn-tiny i {
    font-size: 10px;
}

.notes-actions {
    display: flex;
    gap: 5px;
}

/* Right Sidebar */
.run-mode-sidebar {
    background: var(--sidebar-bg);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.run-mode-sidebar .sidebar-section {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.run-mode-sidebar .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.run-mode-sidebar .panel-header h3 {
    margin: 0;
    font-size: 1rem;
}

.run-mode-sidebar .badge {
    background: var(--primary-color);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* Attendees */
.attendees-section {
    max-height: 200px;
    overflow-y: auto;
}

.run-attendee {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.run-attendee:last-child {
    border-bottom: none;
}

.run-attendee label {
    flex: 1;
    cursor: pointer;
}

.run-attendee.checked-in {
    background: rgba(40, 167, 69, 0.1);
    border-radius: 4px;
    padding-left: 8px;
    margin-left: -8px;
}

.run-attendee.checked-in label {
    color: var(--success-color, #28a745);
    font-weight: 500;
}

.attendee-response {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.attendee-response.response-accepted {
    background: #e8f5e9;
    color: #388e3c;
}

.attendee-response.response-declined {
    background: #ffebee;
    color: #c62828;
}

.attendee-response.response-tentative {
    background: #fff3e0;
    color: #f57c00;
}

/* Notes Section */
.notes-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-textarea {
    flex: 1;
    width: 100%;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    min-height: 150px;
}

/* Meeting Minutes Log (Sprint 5N) */
.minutes-log {
    flex: 1;
    overflow-y: auto;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.5;
    min-height: 200px;
    max-height: 300px;
}

.minutes-log .minutes-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.minutes-log .minutes-header h4 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: var(--text-color);
}

.minutes-log .minutes-header .meeting-date {
    font-size: 11px;
    color: var(--text-muted);
}

.minutes-log .attendees-list {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

.minutes-entry {
    padding: 4px 0;
    display: flex;
    gap: 8px;
}

.minutes-entry .timestamp {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 65px;
}

.minutes-entry .entry-type {
    font-weight: 500;
    white-space: nowrap;
}

.minutes-entry .entry-type.agenda { color: #3498db; }
.minutes-entry .entry-type.action { color: #e74c3c; }
.minutes-entry .entry-type.task-link { color: #9b59b6; }
.minutes-entry .entry-type.task-action { color: #27ae60; }
.minutes-entry .entry-type.decision { color: #f39c12; }
.minutes-entry .entry-type.note { color: #7f8c8d; }

.minutes-entry .entry-content {
    flex: 1;
    word-break: break-word;
}

.add-note-section {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.add-note-section input {
    flex: 1;
}

/* Action Items */
.action-items-section {
    max-height: 250px;
    overflow-y: auto;
}

.action-item-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--background-light);
    border-radius: 8px;
    margin-bottom: 8px;
}

.action-item-chip i {
    color: var(--primary-color);
}

.action-item-chip .action-text {
    flex: 1;
}

.action-item-chip .action-assignee {
    font-weight: 500;
    color: var(--primary-color);
}

.action-item-input {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.action-item-input input:first-child {
    flex: 1;
}

/* Empty Agenda */
.empty-agenda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.empty-agenda i {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .run-mode-content {
        grid-template-columns: 250px 1fr 300px;
    }
}

@media (max-width: 992px) {
    .run-mode-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .run-mode-agenda {
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .run-mode-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-color);
        flex-direction: row;
        flex-wrap: wrap;
    }

    .run-mode-sidebar .sidebar-section {
        flex: 1;
        min-width: 200px;
    }
}

/* ============================================
   CALENDAR EXPORT MENU
   ============================================ */

.calendar-export-menu {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 8px 0;
    animation: dropdownFadeIn 0.15s ease-out;
}

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

.calendar-export-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
    transition: background 0.15s;
}

.calendar-export-menu .dropdown-item:hover {
    background: var(--bg-light);
}

.calendar-export-menu .dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--text-light);
}

.calendar-export-menu .dropdown-item:hover i {
    color: var(--primary-color);
}

/* Google brand color */
.calendar-export-menu .dropdown-item .fa-google {
    color: #4285F4;
}

/* Microsoft brand color */
.calendar-export-menu .dropdown-item .fa-microsoft {
    color: #00A4EF;
}

/* Export All Button in meetings section */
.meetings-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-export-all {
    font-size: 12px;
    padding: 6px 12px;
}

/* Agenda Item Modal - Occurrence Info Banner */
.occurrence-info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    margin-bottom: 16px;
    color: #0369a1;
}

.occurrence-info-banner i {
    font-size: 18px;
    color: #0284c7;
}

.occurrence-info-banner strong {
    color: #0c4a6e;
}

/* Help text for forms */
.help-text {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Agenda Item Badges */
.agenda-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 8px;
}

.agenda-item-badge.recurring {
    background: #e0f2fe;
    color: #0369a1;
}

.agenda-item-badge.one-off {
    background: #fef3c7;
    color: #92400e;
}

.agenda-item-badge i {
    font-size: 10px;
}

/* Agenda Summary with Filter */
.agenda-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.agenda-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.agenda-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.agenda-stat-recurring {
    color: #0369a1 !important;
}

.agenda-stat-oneoff {
    color: #92400e !important;
}

.agenda-filter select {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 130px;
}

/* Visual distinction for one-off items in list */
.agenda-item.one-off {
    border-left: 3px solid var(--warning-color);
}

.agenda-item.recurring {
    border-left: 3px solid #0ea5e9;
}

/* Agenda View Selector */
.agenda-view-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    margin-bottom: 12px;
}

.agenda-view-selector label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #166534;
    white-space: nowrap;
}

.agenda-view-selector select {
    flex: 1;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #86efac;
    background: var(--bg-primary);
}

.agenda-view-selector .btn-icon {
    padding: 6px 8px;
}

/* Occurrence View Header */
.agenda-occurrence-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    margin-bottom: 12px;
}

.agenda-occurrence-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #166534;
    font-size: 13px;
}

.agenda-occurrence-info i {
    font-size: 16px;
    color: #22c55e;
}

/* Occurrence View - show order numbers instead of drag handles */
.agenda-items-list.occurrence-view .agenda-item {
    cursor: default;
}

.agenda-items-list.occurrence-view .agenda-item-drag {
    display: none;
}

.agenda-item-order {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding-right: 12px;
}

.agenda-item-order .order-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

/* In occurrence view, items aren't editable inline */
.agenda-items-list.occurrence-view .agenda-item-actions {
    display: none;
}

/* ==================== Sprint MTG-E: Meeting Enhancements ==================== */

/* Meeting Template Selector Grid */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 8px 0;
}

.template-card {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

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

.template-card.selected {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.template-card .template-icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--primary-color);
}

.template-card .template-name {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.template-card .template-desc {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.template-card .template-meta {
    font-size: 0.8em;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
}

.template-card .template-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.template-card:hover .template-delete {
    opacity: 1;
}

/* Standup Round-Robin */
.standup-round-robin {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.standup-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.standup-progress .member-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.standup-progress .member-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.3s;
}

.standup-progress .member-dot.completed {
    background: var(--success-color);
}

.standup-progress .member-dot.current {
    background: var(--primary-color);
    animation: standup-pulse 1.5s infinite;
}

.standup-progress .member-dot.skipped {
    background: var(--text-muted);
}

@keyframes standup-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.standup-current-card {
    flex: 1;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    background: var(--bg-primary);
}

.standup-current-card .member-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.standup-current-card .member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
}

.standup-current-card .member-name {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--text-primary);
}

.standup-field {
    margin-bottom: 16px;
}

.standup-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.standup-field label.blocker-label {
    color: var(--danger-color);
}

.standup-field textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

.standup-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.standup-completed-list {
    max-height: 200px;
    overflow-y: auto;
}

.standup-completed-item {
    padding: 8px 12px;
    border-left: 3px solid var(--success-color);
    margin-bottom: 4px;
    font-size: 0.9em;
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
}

.standup-completed-item .blocker-flag {
    color: var(--danger-color);
    font-weight: 600;
}

/* Previous Action Items (Run Mode Center Panel) */
.previous-action-items {
    margin-bottom: 16px;
    border: 1px solid var(--warning-color);
    border-radius: 8px;
    overflow: hidden;
}

.previous-action-items .section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(245, 158, 11, 0.1);
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}

.previous-action-items .section-toggle .badge {
    background: var(--warning-color);
    color: white;
}

.previous-action-items.collapsed .action-item-list {
    display: none;
}

.previous-action-items .action-item-list {
    padding: 8px 16px;
}

.previous-action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

.previous-action-item:last-child {
    border-bottom: none;
}

.previous-action-item .item-info {
    flex: 1;
    min-width: 0;
}

.previous-action-item .item-name {
    font-weight: 500;
    color: var(--text-primary);
}

.previous-action-item .item-meta {
    font-size: 0.85em;
    color: var(--text-muted);
}

.previous-action-item .item-age {
    color: var(--danger-color);
    font-weight: 600;
}

/* Run Mode Popovers */
.run-mode-popover {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    max-width: 300px;
    z-index: 10001;
}

.run-mode-popover .popover-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: var(--text-primary);
}

.run-mode-popover .status-option {
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    font-size: 0.9em;
}

.run-mode-popover .status-option:hover {
    background: var(--bg-hover);
}

.run-mode-popover .status-option.current {
    background: var(--primary-color);
    color: white;
}

.run-mode-popover .popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.run-mode-popover textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

.run-mode-popover select {
    width: 100%;
    margin-bottom: 8px;
}

/* Inline Agenda Input (replaces prompt()) */
.inline-agenda-input {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--border-color);
}

.inline-agenda-input input {
    flex: 1;
    min-width: 0;
}

/* Meeting Recap */
.meeting-recap {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.recap-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.recap-header h2 {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.recap-header .recap-date {
    color: var(--text-muted);
    font-size: 0.95em;
}

.recap-header .recap-meta {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 8px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.recap-section {
    margin-bottom: 20px;
}

.recap-section h3 {
    font-size: 1.05em;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.recap-section h3 i {
    margin-right: 6px;
    color: var(--primary-color);
}

.recap-agenda-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    gap: 8px;
}

.recap-agenda-item .status-icon {
    width: 20px;
    text-align: center;
}

.recap-agenda-item .status-icon.completed {
    color: var(--success-color);
}

.recap-agenda-item .status-icon.skipped {
    color: var(--text-muted);
}

.recap-agenda-item .time-spent {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-left: auto;
}

.recap-decision {
    padding: 8px 12px;
    border-left: 3px solid var(--primary-color);
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
}

.recap-action-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.recap-action-item:last-child {
    border-bottom: none;
}

.recap-standup-entry {
    padding: 10px 12px;
    border-left: 3px solid var(--primary-color);
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
}

.recap-standup-entry strong {
    display: block;
    margin-bottom: 4px;
}

.recap-standup-entry .blocker-flag {
    color: var(--danger-color);
    font-weight: 600;
}

/* Print-friendly recap */
@media print {
    .meeting-recap {
        max-height: none;
        overflow: visible;
    }
    .modal-header,
    .modal-footer,
    .modal-close {
        display: none !important;
    }
    .modal-content {
        box-shadow: none !important;
        border: none !important;
    }
}

/* ==================== Sprint 6C: Impact Radius Visualization ==================== */

/* Ripple effect on impacted nodes */
.impact-ripple {
    position: relative;
    transition: all 0.3s ease-out;
    background: var(--impact-bg) !important;
    border-left: 4px solid var(--impact-border) !important;
    border-radius: 4px;
    box-shadow: 0 0 20px var(--impact-glow),
                0 0 40px var(--impact-glow),
                inset 0 0 30px var(--impact-glow);
    animation: impact-pulse 2s ease-in-out infinite;
}

.impact-ripple::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--impact-border);
    border-radius: 4px 0 0 4px;
    animation: impact-glow 1.5s ease-in-out infinite;
}

/* Source task (the one you selected) */
.impact-source {
    position: relative;
    background: rgba(37, 99, 235, 0.25) !important;
    border-left: 5px solid var(--primary-color) !important;
    border-radius: 4px;
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.6),
                0 0 50px rgba(37, 99, 235, 0.4),
                inset 0 0 35px rgba(37, 99, 235, 0.3);
}

.impact-source::after {
    content: '●';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 10px;
    animation: source-pulse 1s ease-in-out infinite;
}

/* Distance-based intensity (closer = more intense) */
.impact-distance-1 {
    animation-duration: 1.2s;
}

.impact-distance-2 {
    animation-duration: 1.6s;
}

.impact-distance-3 {
    animation-duration: 2s;
}

.impact-distance-4 {
    animation-duration: 2.5s;
}

.impact-distance-5 {
    animation-duration: 3s;
}

/* Animations */
@keyframes impact-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.005);
    }
}

@keyframes impact-glow {
    0%, 100% {
        box-shadow: 0 0 8px var(--impact-glow),
                    0 0 16px var(--impact-glow);
    }
    50% {
        box-shadow: 0 0 20px var(--impact-glow),
                    0 0 40px var(--impact-glow);
    }
}

@keyframes source-pulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-50%) scale(1.3);
    }
}

/* When impact radius is active, dim non-impacted items slightly */
.impact-radius-active .task-node:not(.impact-ripple):not(.impact-source) {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.impact-radius-active .task-node:not(.impact-ripple):not(.impact-source):hover {
    opacity: 0.8;
}

/* Impact Summary Panel */
.impact-summary-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 280px;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    transform: translateX(320px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.impact-summary-panel.visible {
    transform: translateX(0);
    opacity: 1;
}

.impact-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ff6b35, #ff9f1c);
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.impact-summary-header i:first-child {
    font-size: 16px;
}

.impact-close-btn {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.impact-close-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.impact-summary-content {
    padding: 16px;
}

.impact-source-name {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.impact-source-name i {
    color: var(--primary-color);
}

.impact-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.impact-stat {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    background: var(--bg-light);
    border-radius: 8px;
}

.impact-stat .stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #ff6b35;
    line-height: 1.2;
}

.impact-stat .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
}

.impact-breakdown {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

.breakdown-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 10px;
}

.impact-level {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
}

.impact-level .level-indicator {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid var(--level-color);
}

.impact-level .level-label {
    color: var(--text-dark);
    font-weight: 500;
}

.impact-level .level-count {
    margin-left: auto;
    color: var(--text-light);
    font-size: 12px;
}

.no-impact {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    padding: 20px;
}

/* Impact radius button in tree view */
.impact-radius-btn {
    opacity: 0;
    transition: opacity 0.2s;
    padding: 4px 6px;
    border: none;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 4px;
}

.tree-node:hover .impact-radius-btn {
    opacity: 1;
}

.impact-radius-btn:hover {
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
}

.impact-radius-btn.active {
    opacity: 1;
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.15);
}

/* ============================================================================
   Sprint 5K-2: Proposal Checklist Styles
   ============================================================================ */

/* Checklist Container */
#proposalChecklistContainer {
    min-height: 200px;
}

.checklist-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 2px dashed var(--border-color);
}

.checklist-empty-state .empty-icon {
    font-size: 48px;
    color: var(--text-light);
    margin-bottom: 16px;
}

.checklist-empty-state h4 {
    margin: 0 0 8px;
    color: var(--text-dark);
}

.checklist-empty-state p {
    color: var(--text-light);
    margin: 0 0 16px;
}

/* Checklist Header */
.checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.checklist-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checklist-title h4 {
    margin: 0;
    font-size: 16px;
    color: var(--text-dark);
}

.checklist-template-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Progress Bar */
.checklist-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar-container {
    width: 120px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
}

/* Checklist Status */
.checklist-status {
    padding: 12px 16px;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.checklist-status.ready {
    background: #d4edda;
    color: #155724;
}

.checklist-status.pending {
    background: #fff3cd;
    color: #856404;
}

/* Checklist Items */
.checklist-items {
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    transition: background 0.15s ease;
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-item:hover {
    background: var(--bg-hover);
}

.checklist-item.complete {
    background: #f8fff8;
}

.checklist-item.complete .checklist-item-title {
    text-decoration: line-through;
    color: var(--text-light);
}

/* Checkbox */
.checklist-item-checkbox {
    flex-shrink: 0;
    margin-top: 2px;
}

.checklist-item-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--success-color);
}

.checklist-item-checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Item Content */
.checklist-item-content {
    flex: 1;
    min-width: 0;
}

.checklist-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.required-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    background: #dc3545;
    color: white;
    border-radius: 8px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.checklist-item-description {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
    line-height: 1.4;
}

.checklist-item-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.checklist-item-meta .completed-by {
    color: var(--success-color);
}

.checklist-item-notes {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-dark);
}

/* Item Actions */
.checklist-item-actions {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.checklist-item:hover .checklist-item-actions {
    opacity: 1;
}

.checklist-item-actions .btn-icon {
    padding: 6px;
    border: none;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 4px;
}

.checklist-item-actions .btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--primary-color);
}

/* Empty Checklist */
.checklist-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-light);
    font-style: italic;
}

/* Checklist Actions */
.checklist-actions {
    margin-top: 20px;
    text-align: center;
}

/* Template Management (Org Settings) */
.template-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.template-management-header h4 {
    margin: 0;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-item {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

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

.template-item-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.default-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--success-color);
    color: white;
    border-radius: 8px;
    text-transform: uppercase;
}

.template-item-actions {
    display: flex;
    gap: 4px;
}

.template-items-preview {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 6px;
}

/* Loading spinner */
#proposalChecklistContainer .loading-spinner {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
}

#proposalChecklistContainer .loading-spinner i {
    font-size: 24px;
    margin-right: 10px;
}

/* ============================================================================
   Sprint 5K: Project Phase UI Styles
   ============================================================================ */

/* Phase Selector */
.phase-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Phase Badge (shared style) */
.phase-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Phase-specific colors */
.phase-badge.phase-draft,
.phase-draft {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.phase-badge.phase-proposal,
.phase-proposal {
    background: #fff3cd;
    color: #856404;
}

.phase-badge.phase-under-review,
.phase-underreview {
    background: #cce5ff;
    color: #004085;
}

.phase-badge.phase-approved,
.phase-approved {
    background: #d4edda;
    color: #155724;
}

.phase-badge.phase-active,
.phase-active {
    background: #d1ecf1;
    color: #0c5460;
}

.phase-badge.phase-complete,
.phase-complete {
    background: #28a745;
    color: white;
}

.phase-badge.phase-archived,
.phase-archived {
    background: #6c757d;
    color: white;
}

.phase-badge.phase-cancelled,
.phase-cancelled {
    background: #dc3545;
    color: white;
}

/* Phase Lock Banner */
.phase-lock-banner {
    background: var(--bg-tertiary, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-left: 4px solid #6c757d;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary, #6c757d);
    display: flex;
    align-items: center;
    gap: 8px;
}

.phase-lock-banner i {
    font-size: 15px;
    opacity: 0.8;
}

/* Phase Change Modal */
#phaseChangeModal .phase-badge {
    font-size: 14px;
    padding: 6px 16px;
}

#projectPhaseSection {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-tertiary) 100%);
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    margin-top: 10px;
    border: 1px solid var(--border-color);
}

#projectPhaseSection label {
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

#projectPhaseSection label i {
    color: var(--primary-color);
}

/* Phase not set */
.phase-badge.phase-none,
.phase-none {
    background: #f8d7da;
    color: #721c24;
    border: 1px dashed #f5c6cb;
}

/* ============================================================================
   Sprint 5K-UX: Phase Stepper
   ============================================================================ */

.phase-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-tertiary) 100%);
    border-bottom: 1px solid var(--border-color);
    gap: 0;
}

.phase-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 70px;
    position: relative;
    cursor: default;
}

.phase-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    color: var(--text-light);
    font-size: 14px;
    transition: all 0.3s ease;
}

.phase-step-label {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.phase-step-connector {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    min-width: 20px;
    max-width: 40px;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

/* Completed phases */
.phase-step.completed .phase-step-icon {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.phase-step.completed .phase-step-label {
    color: var(--success-color);
}

.phase-step.completed + .phase-step-connector {
    background: var(--success-color);
}

/* Current phase */
.phase-step.current .phase-step-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
    animation: pulse-phase 2s infinite;
}

.phase-step.current .phase-step-label {
    color: var(--primary-color);
    font-weight: 600;
}

@keyframes pulse-phase {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(0, 123, 255, 0.1); }
}

/* Special states */
.phase-step.cancelled .phase-step-icon,
.phase-step.archived .phase-step-icon {
    background: var(--text-light);
    border-color: var(--text-light);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .phase-stepper {
        padding: 12px 10px;
        overflow-x: auto;
    }

    .phase-step {
        min-width: 50px;
    }

    .phase-step-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .phase-step-label {
        font-size: 9px;
    }

    .phase-step-connector {
        min-width: 10px;
        max-width: 20px;
    }
}

/* =============================================================================
   Sprint 5K-UX: Phase Action Buttons
   ============================================================================ */

#phaseActionsContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    padding-right: 16px;
}

.phase-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.phase-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.phase-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.phase-action-btn i {
    font-size: 12px;
}

/* Responsive - stack buttons vertically on small screens */
@media (max-width: 600px) {
    #phaseActionsContainer {
        flex-direction: column;
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
    }

    .phase-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   Sprint 5K-4: Baseline Comparison Tab
   ============================================================================ */

/* Variance badges */
.variance-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.variance-badge.under-budget {
    background: rgba(40, 167, 69, 0.15);
    color: var(--success-color);
}

.variance-badge.over-budget {
    background: rgba(220, 53, 69, 0.15);
    color: var(--danger-color);
}

.variance-badge.on-track {
    background: rgba(13, 110, 253, 0.15);
    color: var(--primary-color);
}

.variance-badge.at-risk {
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
}

/* Baseline cards */
.baseline-card {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s ease;
}

.baseline-card:last-child {
    margin-bottom: 0;
}

/* Compliance/certification notice box */
.compliance-notice {
    background: var(--warning-light);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
}

.baseline-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Progress bar colors */
.baseline-card .progress-under {
    background: var(--success-color) !important;
}

.baseline-card .progress-over {
    background: var(--danger-color) !important;
}

.baseline-card .progress-at-risk {
    background: var(--warning-color) !important;
}

/* Value colors */
.value-positive {
    color: var(--success-color) !important;
}

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

.value-neutral {
    color: var(--text-primary) !important;
}

/* ===========================================
   Sprint 5L: Formal Timesheet Styles
   =========================================== */

/* Timesheet Summary Cards */
.timesheet-summary-cards {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.timesheet-summary-cards .summary-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.timesheet-summary-cards .summary-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.timesheet-summary-cards .summary-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.timesheet-summary-cards .status-draft {
    border-color: var(--text-secondary);
}

.timesheet-summary-cards .status-submitted {
    border-color: var(--info-color);
    background: rgba(13, 202, 240, 0.05);
}

.timesheet-summary-cards .status-approved {
    border-color: var(--success-color);
    background: rgba(40, 167, 69, 0.05);
}

.timesheet-summary-cards .status-rejected {
    border-color: var(--danger-color);
    background: rgba(220, 53, 69, 0.05);
}

/* Timesheet Status Banners */
.timesheet-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.timesheet-banner.banner-rejected {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.timesheet-banner.banner-approved {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.timesheet-banner.banner-submitted {
    background: rgba(13, 202, 240, 0.1);
    border: 1px solid var(--info-color);
    color: var(--info-color);
}

/* ==========================================================================
   Formal Timesheet Grid - Horizontal Scrolling with Sticky Columns
   ========================================================================== */

/* Grid Wrapper - enables horizontal AND vertical scrolling */
.timesheet-grid-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-width: 100%;
    max-height: 70vh;
    margin: 20px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    position: relative;
}

/* Legacy container - keep for backwards compatibility */
.timesheet-grid-container {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.timesheet-grid {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    background: var(--bg-card, #ffffff);
    border-radius: 8px;
    font-size: 14px;
}

/* Sticky Header Row */
.timesheet-grid thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-secondary);
}

.timesheet-grid th,
.timesheet-grid td {
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--border-light);
}

.timesheet-grid th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Legacy code-column - keep for backwards compatibility */
.timesheet-grid .code-column {
    text-align: left;
    min-width: 200px;
    padding-left: 1rem;
}

/* Sticky First Column (Row Labels) - SOLID backgrounds to prevent show-through */
.timesheet-grid .row-label-column {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--bg-card, #ffffff);
    min-width: 200px;
    max-width: 280px;
    text-align: left;
    padding-left: 1rem;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

.timesheet-grid thead .row-label-column {
    background: var(--bg-secondary, #f8f9fa);
    z-index: 30; /* Higher than both sticky column and sticky header */
}

.timesheet-grid .section-header .row-label-column,
.timesheet-grid .subtotal-row .row-label-column,
.timesheet-grid .daily-totals-row .row-label-column {
    background: var(--bg-tertiary, #e9ecef);
}

/* Editable row label columns need solid background */
.timesheet-grid .editable-row .row-label-column {
    background: var(--bg-card, #ffffff);
}

.timesheet-grid .project-row .row-label-column {
    background: #f0f7ff; /* Slightly blue tint for projects */
}

/* Row Label Content */
.timesheet-grid .row-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timesheet-grid .row-label i {
    flex-shrink: 0;
}

/* Sticky Last Column (Totals) - SOLID backgrounds */
.timesheet-grid .sticky-right {
    position: sticky;
    right: 0;
    z-index: 10;
    background: var(--bg-secondary, #f8f9fa);
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
}

.timesheet-grid thead .sticky-right {
    z-index: 30; /* Higher than both sticky column and sticky header */
}

/* Row-specific sticky-right backgrounds */
.timesheet-grid .editable-row .sticky-right,
.timesheet-grid .timesheet-row .sticky-right {
    background: var(--bg-secondary, #f8f9fa);
}

.timesheet-grid .project-row .sticky-right {
    background: #e8f0fe; /* Blue tint matching project rows */
}

.timesheet-grid .subtotal-row .sticky-right {
    background: var(--bg-tertiary, #e9ecef);
    font-weight: 600;
}

.timesheet-grid .day-column {
    min-width: 60px;
    background: var(--bg-card, #ffffff);
}

.timesheet-grid .day-column.weekend {
    background: rgba(0, 0, 0, 0.03);
}

/* Ensure editable cells have visible background */
.timesheet-grid .editable-row .day-column {
    background: var(--bg-card, #ffffff);
}

.timesheet-grid .editable-row .day-column.weekend {
    background: rgba(0, 0, 0, 0.03);
}

.timesheet-grid .total-column {
    min-width: 70px;
    background: var(--bg-secondary);
    font-weight: 600;
}

.timesheet-grid .day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.timesheet-grid .day-name {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.timesheet-grid .day-date {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Section Headers - Collapsible */
.timesheet-grid .section-header td {
    background: var(--bg-tertiary, #e9ecef);
    text-align: left;
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.timesheet-grid .section-header {
    cursor: pointer;
    user-select: none;
}

.timesheet-grid .section-header:hover td {
    background: var(--bg-hover, #dee2e6);
}

.timesheet-grid .section-header i.section-icon {
    margin-right: 0.5rem;
}

.timesheet-grid .section-header .collapse-icon {
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
    width: 12px;
    display: inline-block;
}

.timesheet-grid .section-header.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

/* Section Subtitle (e.g., "Read-only - from task time tracker") */
.timesheet-grid .section-subtitle {
    font-weight: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 10px;
    font-style: italic;
}

/* Section Subtotal Row */
.timesheet-grid .section-header .section-subtotal {
    float: right;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-right: 1rem;
}

/* Subtotal Row */
.timesheet-grid .subtotal-row td {
    background: var(--bg-tertiary, #e9ecef);
    font-weight: 500;
    font-size: 0.85rem;
    border-top: 2px solid var(--border-color);
}

.timesheet-grid .subtotal-row .row-label-column {
    padding-left: 2rem;
    font-style: italic;
}

/* Hidden rows when section is collapsed */
.timesheet-grid .section-content.collapsed {
    display: none;
}

/* Timesheet Row Types */
.timesheet-grid .timesheet-row td {
    vertical-align: middle;
}

.timesheet-grid .project-row td {
    background: rgba(13, 110, 253, 0.02);
}

.timesheet-grid .project-row .row-label-column {
    background: rgba(13, 110, 253, 0.04);
}

.timesheet-grid .project-row .sticky-right {
    background: rgba(13, 110, 253, 0.06);
}

.timesheet-grid .editable-row:hover td {
    background: rgba(13, 110, 253, 0.04);
}

.timesheet-grid .editable-row:hover .row-label-column {
    background: rgba(13, 110, 253, 0.06);
}

.timesheet-grid .read-only-badge {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.timesheet-grid .add-code-btn {
    float: right;
    padding: 0;
    font-size: 0.8rem;
}

/* Code Info */
.timesheet-grid .code-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timesheet-grid .code-badge {
    background: var(--primary-color);
    color: white;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.timesheet-grid .project-name,
.timesheet-grid .code-name {
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* Entry Rows */
.timesheet-grid .code-row td {
    vertical-align: middle;
}

.timesheet-grid .code-row.project-row td {
    background: rgba(13, 110, 253, 0.02);
}

.timesheet-grid .read-only {
    color: var(--text-secondary);
}

.timesheet-grid .no-entries-row td {
    text-align: left;
    padding: 1rem;
    font-style: italic;
}

/* Hours Input */
.timesheet-grid .hours-input {
    width: 50px;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-align: center;
    font-size: 0.85rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.timesheet-grid .hours-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.timesheet-grid .hours-input::placeholder {
    color: var(--text-muted);
}

/* Daily Totals Row */
.timesheet-grid .daily-totals-row {
    background: var(--bg-secondary);
}

.timesheet-grid .daily-totals-row td {
    font-weight: 600;
}

/* Timesheet Actions */
.timesheet-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.timesheet-actions .action-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.timesheet-actions .export-buttons {
    margin-left: auto;
}

.timesheet-actions .export-buttons .btn {
    padding: 0.375rem 0.75rem;
}

/* Timesheet Notes */
.timesheet-notes {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.timesheet-notes label {
    display: block;
    margin-bottom: 0.5rem;
}

.timesheet-notes textarea {
    resize: vertical;
    min-height: 60px;
}

.timesheet-notes .approver-notes {
    background: var(--bg-tertiary);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Period Navigation */
.period-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.period-navigation #currentPeriodLabel {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 200px;
    text-align: center;
}

/* Dark Mode Overrides */
[data-theme="dark"] .timesheet-grid .day-column {
    background: var(--bg-card, #1e1e1e);
}

[data-theme="dark"] .timesheet-grid .day-column.weekend {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .timesheet-grid .editable-row .day-column {
    background: var(--bg-card, #1e1e1e);
}

[data-theme="dark"] .timesheet-grid .editable-row .day-column.weekend {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .timesheet-grid .hours-input {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Dark mode - Solid backgrounds for sticky columns */
[data-theme="dark"] .timesheet-grid .row-label-column {
    background: var(--bg-card, #1e1e1e);
}

[data-theme="dark"] .timesheet-grid thead .row-label-column {
    background: var(--bg-secondary, #2d2d2d);
}

[data-theme="dark"] .timesheet-grid .section-header .row-label-column,
[data-theme="dark"] .timesheet-grid .subtotal-row .row-label-column,
[data-theme="dark"] .timesheet-grid .daily-totals-row .row-label-column {
    background: var(--bg-tertiary, #383838);
}

[data-theme="dark"] .timesheet-grid .project-row .row-label-column {
    background: #1a2733;
}

[data-theme="dark"] .timesheet-grid .sticky-right {
    background: var(--bg-secondary, #2d2d2d);
}

[data-theme="dark"] .timesheet-grid .project-row .sticky-right {
    background: #1e3045;
}

[data-theme="dark"] .timesheet-grid .subtotal-row .sticky-right {
    background: var(--bg-tertiary, #383838);
}

[data-theme="dark"] .timesheet-grid .section-header:hover td {
    background: var(--bg-hover, #404040);
}

/* ========================================
   SPRINT 5L: Timesheet Settings Styles
   ======================================== */

/* Setting Groups */
.setting-group {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.setting-group h4 {
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    color: var(--text-primary);
}

/* Setting Row (label + toggle/control) */
.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

.setting-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-row:first-child {
    padding-top: 0;
}

.setting-info {
    flex: 1;
    padding-right: 1rem;
}

.setting-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    display: block;
}

.setting-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.setting-control {
    flex-shrink: 0;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-primary);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Small toggle variant */
.toggle-switch.toggle-sm {
    width: 36px;
    height: 20px;
}

.toggle-switch.toggle-sm .toggle-slider:before {
    height: 14px;
    width: 14px;
}

.toggle-switch.toggle-sm input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

/* Time Code Categories */
.time-code-category {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.time-code-category.category-disabled {
    opacity: 0.6;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.category-name {
    font-weight: 600;
    color: var(--text-primary);
}

.category-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Time Codes List */
.time-codes-list {
    padding: 0.5rem;
}

.time-code-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    transition: background 0.2s;
}

.time-code-item:hover {
    background: var(--bg-secondary);
}

.time-code-item.code-disabled {
    opacity: 0.5;
}

.code-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.code-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
}

.code-name {
    font-weight: 500;
    color: var(--text-primary);
}

.code-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Badge variants */
.badge-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 3px;
}

.badge-outline-primary {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 3px;
}

.badge-success {
    background: var(--success-color);
    color: white;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 3px;
}

.badge-warning {
    background: var(--warning-color);
    color: white;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 3px;
}

.badge-info {
    background: var(--info-color, #17a2b8);
    color: white;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 3px;
}

.badge-secondary {
    background: var(--text-secondary);
    color: white;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 3px;
}

/* Icon button in time code actions */
.time-code-item .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.time-code-item .btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.time-code-item .btn-icon.btn-danger-icon:hover {
    background: var(--danger-light, #ffebee);
    color: var(--danger-color);
}

.time-code-item .btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Dark mode adjustments */
[data-theme="dark"] .setting-group {
    background: var(--bg-secondary);
}

[data-theme="dark"] .time-code-category {
    background: var(--bg-secondary);
}

[data-theme="dark"] .category-header {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .time-code-item:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .time-code-item .btn-icon.btn-danger-icon:hover {
    background: rgba(244, 67, 54, 0.2);
}

/* =============================================================================
   Sprint 5P: Phase Template Manager Styles
   ============================================================================ */

/* Phase Progress Container */
.phase-progress-container {
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-tertiary) 100%);
    border-bottom: 1px solid var(--border-color);
}

/* Phase Progress Bar */
.phase-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
}

.phase-progress-bar .phase-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.phase-progress-bar .phase-step:hover {
    transform: scale(1.05);
}

.phase-progress-bar .phase-step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 2px solid #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.phase-progress-bar .phase-step-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
    max-width: 60px;
}

.phase-progress-bar .phase-connector {
    flex: 0 0 40px;
    height: 3px;
    background: var(--border-color);
    margin: 0;
    margin-bottom: 20px;
    transition: background 0.3s ease;
}

/* Completed steps */
.phase-progress-bar .phase-step.complete .phase-step-indicator {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.phase-progress-bar .phase-step.complete .phase-step-label {
    color: var(--success-color);
}

.phase-progress-bar .phase-connector.complete {
    background: var(--success-color);
}

/* Current step */
.phase-progress-bar .phase-step.current .phase-step-indicator {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
}

.phase-progress-bar .phase-step.current .phase-step-label {
    color: var(--primary-color);
    font-weight: 600;
}

/* Phase Progress Info */
.phase-progress-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.phase-progress-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.phase-progress-meter {
    width: 120px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.phase-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #4dabf7);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.phase-progress-percent {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 35px;
}

/* Template Selection Modal */
.template-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-primary);
}

.template-option:hover {
    border-color: var(--primary-color);
    background: #f8f9ff;
}

.template-option input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.template-option input[type="radio"]:checked + .template-option-content {
    color: var(--primary-color);
}

.template-option:has(input:checked) {
    border-color: var(--primary-color);
    background: #f0f6ff;
}

.template-option.recommended {
    border-color: var(--success-color);
    background: #f0fff4;
}

.template-option.recommended:hover {
    background: #e6ffe6;
}

.template-option.no-template {
    border-style: dashed;
    opacity: 0.8;
}

.template-option.no-template:hover {
    opacity: 1;
}

.template-option-content {
    flex: 1;
}

.template-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

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

.template-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--success-color);
    color: white;
    border-radius: 10px;
}

.template-industry {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--secondary-color);
    color: white;
    border-radius: 10px;
}

.template-description {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.template-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #868e96;
}

.template-meta i {
    margin-right: 4px;
    opacity: 0.7;
}

.template-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.template-empty-state h4 {
    color: var(--text-secondary);
    margin: 10px 0;
}

.template-empty-state p {
    color: #868e96;
    max-width: 400px;
    margin: 0 auto;
}

/* Phase Details Panel */
.phase-details-content {
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.phase-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-tertiary) 100%);
    border-bottom: 1px solid var(--border-color);
}

.phase-details-header h4 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.phase-details-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phase-details-meta .phase-progress {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.phase-ready-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-bottom: 1px solid #28a745;
    color: #155724;
}

.phase-ready-banner i {
    font-size: 18px;
}

.phase-ready-banner span {
    flex: 1;
    font-weight: 500;
}

/* Phase Sections */
.phase-sections {
    padding: 0;
}

.phase-section {
    border-bottom: 1px solid var(--border-color);
}

.phase-section:last-child {
    border-bottom: none;
}

.phase-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.phase-section-header:hover {
    background: var(--bg-light);
}

.phase-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text-dark);
}

.phase-section-title i {
    color: var(--text-muted);
    width: 16px;
}

.required-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: #dc3545;
    color: white;
    border-radius: 8px;
    text-transform: uppercase;
}

.phase-section-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mini-progress-bar {
    width: 60px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    background: var(--success-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.phase-section-progress span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 35px;
    text-align: right;
}

/* Phase Items */
.phase-section-items {
    padding: 0 20px 16px 20px;
}

.phase-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.phase-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.phase-item:hover {
    background: var(--bg-light);
}

.phase-item-checkbox {
    flex-shrink: 0;
    padding-top: 2px;
}

.phase-item-checkbox i {
    font-size: 16px;
    color: #ced4da;
}

.phase-item.complete .phase-item-checkbox i {
    color: var(--success-color);
}

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

.phase-item-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-dark);
}

.phase-item-name i {
    color: var(--text-muted);
    font-size: 12px;
}

.phase-item.complete .phase-item-name {
    color: var(--text-muted);
    text-decoration: line-through;
}

.required-indicator {
    color: #dc3545;
    font-weight: bold;
}

.phase-item-description {
    font-size: 12px;
    color: #868e96;
    margin: 4px 0 0 0;
}

.phase-data-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.phase-data-field .form-control-sm {
    max-width: 200px;
}

.phase-data-field .save-field-btn {
    padding: 4px 8px;
}

.phase-details-empty,
.phase-no-template {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.phase-details-empty p,
.phase-no-template p {
    margin-bottom: 16px;
}

/* Dark Mode Support */
[data-theme="dark"] .phase-progress-container {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-color: var(--border-color);
}

[data-theme="dark"] .phase-progress-bar .phase-step-indicator {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .phase-progress-bar .phase-step-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .phase-progress-bar .phase-connector {
    background: var(--border-color);
}

[data-theme="dark"] .phase-progress-meter {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .template-option {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .template-option:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .template-name {
    color: var(--text-primary);
}

[data-theme="dark"] .template-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .phase-details-content {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .phase-details-header {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    border-color: var(--border-color);
}

[data-theme="dark"] .phase-section {
    border-color: var(--border-color);
}

[data-theme="dark"] .phase-section-header:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .phase-section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .phase-item:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .phase-item-name {
    color: var(--text-primary);
}

[data-theme="dark"] .phase-item-description {
    color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .phase-progress-bar {
        flex-wrap: wrap;
        gap: 5px;
    }

    .phase-progress-bar .phase-connector {
        flex: 0 0 20px;
    }

    .phase-progress-bar .phase-step-indicator {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .phase-progress-bar .phase-step-label {
        font-size: 10px;
        max-width: 50px;
    }

    .phase-details-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .phase-ready-banner {
        flex-wrap: wrap;
    }

    .template-option {
        padding: 12px;
    }

    .template-meta {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* =====================================================
   Sprint 5.5A: Feature Configuration System
   ===================================================== */

/* Elements hidden by feature flags */
.feature-disabled {
    display: none !important;
}

/* Alternative: fade out instead of hiding (for debugging) */
.feature-disabled-debug {
    opacity: 0.3;
    pointer-events: none;
    position: relative;
}

.feature-disabled-debug::after {
    content: 'Feature Disabled';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
}

/* Feature toggle in settings */
.feature-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-toggle-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.feature-toggle-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.feature-toggle-item.disabled {
    opacity: 0.7;
    background: var(--bg-light);
}

.feature-toggle-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
}

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

.feature-toggle-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.feature-toggle-name {
    font-weight: 600;
    color: var(--text-dark);
}

.feature-toggle-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-light);
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-toggle-badge.default {
    background: #e0f2fe;
    color: #0369a1;
}

.feature-toggle-description {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
}

.feature-toggle-deps {
    font-size: 11px;
    color: var(--warning-color);
    margin-top: 4px;
}

.feature-toggle-deps i {
    margin-right: 4px;
}

.feature-toggle-switch {
    flex-shrink: 0;
}

/* Toggle switch styling */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-primary);
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Feature category groups */
.feature-category {
    margin-bottom: 24px;
}

.feature-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.feature-category-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.feature-category-count {
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg-light);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ============================================
   Sprint 5.6D: Task Type Configuration
   ============================================ */

.task-type-category {
    margin-bottom: 24px;
}

.task-type-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.task-type-category-header > i {
    font-size: 20px;
    color: var(--primary-color);
    width: 32px;
}

.task-type-category-header .category-info {
    flex: 1;
}

.task-type-category-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.task-type-category-header .category-description {
    font-size: 12px;
    color: var(--text-light);
    margin: 2px 0 0 0;
}

.task-type-category-count {
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg-light);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.task-type-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-type-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.task-type-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.task-type-item.disabled {
    opacity: 0.6;
    background: var(--bg-light);
}

.task-type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 18px;
    flex-shrink: 0;
}

.task-type-item.disabled .task-type-icon {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

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

.task-type-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.task-type-name {
    font-weight: 600;
    color: var(--text-dark);
}

.task-type-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-light);
    color: var(--text-light);
}

.task-type-badge.customized {
    background: #e3f2fd;
    color: #1976d2;
}

/* Sprint 8-DT: Auto-managed construction subtypes */
.task-type-badge.auto-managed {
    background: var(--status-info-bg, #e8f4fd);
    color: var(--status-info, #0288d1);
    font-style: italic;
}
.task-type-badge.auto-managed i {
    margin-right: 3px;
    font-size: 9px;
}

.toggle-managed {
    opacity: 0.5;
    cursor: not-allowed;
}
.toggle-managed .toggle-slider {
    cursor: not-allowed;
}

.task-type-original {
    font-size: 11px;
    color: var(--text-light);
    font-style: italic;
}

.task-type-description {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.4;
    margin-bottom: 8px;
}

.task-type-actions {
    margin-top: 4px;
}

.task-type-actions .btn-link {
    padding: 0;
    font-size: 12px;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
}

.task-type-actions .btn-link:hover {
    text-decoration: underline;
}

.task-type-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* ============================================
   Sprint 5.5C: Setup Wizard
   ============================================ */

.setup-wizard-modal .wizard-modal-content {
    max-width: 700px;
    width: 95%;
}

.wizard-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.wizard-header h2 {
    color: white;
}

.wizard-header .modal-close {
    color: white;
}

/* Progress bar */
.wizard-progress {
    padding: 20px 24px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.wizard-progress-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin-bottom: 16px;
    overflow: hidden;
}

.wizard-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}

.wizard-progress-steps {
    display: flex;
    justify-content: space-between;
}

.wizard-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.wizard-progress-step.active,
.wizard-progress-step.completed {
    opacity: 1;
}

.wizard-progress-step .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.wizard-progress-step.active .step-number {
    background: var(--primary-color);
    color: white;
}

.wizard-progress-step.completed .step-number {
    background: var(--success-color);
    color: white;
}

.wizard-progress-step .step-label {
    font-size: 12px;
    color: var(--text-light);
}

.wizard-progress-step.active .step-label {
    color: var(--primary-color);
    font-weight: 500;
}

/* Wizard body */
.wizard-body {
    padding: 24px;
    min-height: 350px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Welcome step */
.wizard-welcome {
    text-align: center;
    padding: 20px 0;
}

.wizard-welcome .welcome-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.wizard-welcome .welcome-icon i {
    font-size: 36px;
    color: white;
}

.wizard-welcome h3 {
    margin: 0 0 16px;
    color: var(--text-dark);
}

.wizard-welcome p {
    color: var(--text-color);
    margin: 0 0 16px;
}

.wizard-welcome .welcome-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.wizard-welcome .welcome-list li {
    padding: 8px 0;
    color: var(--text-color);
}

.wizard-welcome .welcome-list i {
    color: var(--success-color);
    margin-right: 8px;
}

.wizard-welcome .welcome-note {
    background: var(--bg-light);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.wizard-welcome .welcome-note i {
    color: var(--primary-color);
    margin-right: 6px;
}

/* Template selection */
.wizard-template-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.template-card:hover {
    border-color: var(--primary-light);
    background: var(--bg-light);
}

.template-card.selected {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.template-card .template-icon {
    width: 48px;
    height: 48px;
    background: var(--bg-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.template-card .template-icon i {
    font-size: 20px;
    color: var(--primary-color);
}

.template-card.selected .template-icon {
    background: var(--primary-color);
}

.template-card.selected .template-icon i {
    color: white;
}

.template-card .template-info {
    flex: 1;
}

.template-card .template-info h4 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--text-dark);
}

.template-card .template-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.4;
}

.template-card .template-check {
    opacity: 0;
    transition: opacity 0.2s;
}

.template-card .template-check i {
    font-size: 24px;
    color: var(--primary-color);
}

.template-card.selected .template-check {
    opacity: 1;
}

/* Feature selection */
.wizard-feature-container {
    max-height: 400px;
    overflow-y: auto;
}

.wizard-feature-category {
    margin-bottom: 20px;
}

.wizard-feature-category h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.wizard-feature-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.wizard-feature-item:hover {
    background: var(--bg-hover);
}

.wizard-feature-item input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.wizard-feature-item .feature-name {
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
}

.wizard-feature-item .feature-name i {
    color: var(--primary-color);
    width: 16px;
}

.wizard-feature-item .feature-desc {
    flex: 1;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.4;
}

/* Sprint 5.6E: Wizard Subtype Selection */
.wizard-subtype-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.wizard-subtype-category {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 16px;
}

.wizard-subtype-category h5 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.wizard-subtype-category .category-help {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-light);
}

.wizard-subtype-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.wizard-subtype-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.wizard-subtype-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.wizard-subtype-item.unchecked {
    opacity: 0.6;
    background: var(--bg-light);
}

.wizard-subtype-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.wizard-subtype-item .subtype-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 6px;
    color: var(--primary-color);
    font-size: 14px;
    flex-shrink: 0;
}

.wizard-subtype-item.unchecked .subtype-icon {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.wizard-subtype-item .subtype-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-subtype-item .subtype-name {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 13px;
}

.wizard-subtype-item .subtype-desc {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Summary */
.wizard-summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wizard-summary .summary-section {
    background: var(--bg-light);
    padding: 16px;
    border-radius: 8px;
}

.wizard-summary .summary-section h5 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-summary .summary-section h5 i {
    color: var(--primary-color);
}

.wizard-summary .summary-section p {
    margin: 0;
    font-size: 15px;
    color: var(--text-dark);
    font-weight: 500;
}

.summary-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.summary-feature {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
}

.summary-feature-list.enabled .summary-feature {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
}

.summary-feature-list.disabled .summary-feature {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-light);
}

.wizard-summary .summary-note {
    background: var(--bg-light);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-light);
    margin-top: 8px;
}

.wizard-summary .summary-note i {
    color: var(--primary-color);
    margin-right: 6px;
}

/* Footer */
.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.wizard-footer .btn-link {
    background: none;
    border: none;
    color: var(--text-light);
    padding: 8px 16px;
    cursor: pointer;
}

.wizard-footer .btn-link:hover {
    color: var(--text-color);
    text-decoration: underline;
}

.wizard-nav-buttons {
    display: flex;
    gap: 12px;
}

/* ============================================================================
   Sprint 6B: Analytics Dashboard Styles
   ============================================================================ */

.analytics-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 20px 0;
}

@media (max-width: 1200px) {
    .analytics-dashboard {
        grid-template-columns: 1fr;
    }
}

.analytics-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.analytics-section h3 {
    margin: 0 0 16px 0;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analytics-section h3 i {
    color: var(--primary-color);
}

.analytics-section h3 .period-selector {
    margin-left: auto;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-color);
}

/* Capacity Overview */
.capacity-overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.capacity-gauge-container {
    display: flex;
    justify-content: center;
}

.capacity-gauge {
    text-align: center;
    position: relative;
    width: 200px;
}

.capacity-gauge .gauge-svg {
    width: 100%;
    height: auto;
}

.capacity-gauge .gauge-value {
    font-size: 2rem;
    font-weight: 700;
    margin-top: -10px;
}

.capacity-gauge .gauge-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Capacity Gauge - Clean Speedometer Design */
.pressure-gauge-container {
    display: flex;
    justify-content: center;
    padding: 0;
    margin-bottom: 12px;
}

.pressure-gauge {
    text-align: center;
    position: relative;
    width: 240px;
}

.pressure-gauge .gauge-svg {
    width: 100%;
    height: auto;
    display: block;
}

.pressure-gauge .gauge-readout {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 0;
}

.pressure-gauge .gauge-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.pressure-gauge .gauge-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-weight: 600;
}

.pressure-gauge .gauge-value.utilization-healthy { color: #16a34a; }
.pressure-gauge .gauge-value.utilization-low { color: var(--color-info); }
.pressure-gauge .gauge-value.utilization-warning { color: #d97706; }
.pressure-gauge .gauge-value.utilization-danger { color: #dc2626; }

.capacity-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-card {
    text-align: center;
    padding: 12px;
    background: var(--bg-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 4px;
}

.stat-card.trend-up .stat-value {
    color: var(--success-color);
}

.stat-card.trend-down .stat-value {
    color: var(--danger-color);
}

.stat-card.trend-stable .stat-value {
    color: var(--text-light);
}

.capacity-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.indicator-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.indicator-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.indicator-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.indicator-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

/* User Workload Grid */
.workload-section {
    grid-column: span 2;
}

@media (max-width: 1200px) {
    .workload-section {
        grid-column: span 1;
    }
}

.workload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.workload-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.2s;
}

.workload-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.workload-card.status-danger {
    border-left: 4px solid var(--danger-color);
}

.workload-card.status-warning {
    border-left: 4px solid var(--warning-color);
}

.workload-card.status-info {
    border-left: 4px solid var(--color-info);
}

.workload-card.status-healthy {
    border-left: 4px solid var(--success-color);
}

.workload-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.workload-header .user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workload-header .user-name {
    font-weight: 600;
    color: var(--text-color);
}

.workload-header .status-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.workload-header .status-badge.status-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.workload-header .status-badge.status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.workload-header .status-badge.status-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.workload-header .status-badge.status-healthy {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.workload-header .task-count {
    font-size: 0.85rem;
    color: var(--text-light);
}

.workload-bar-container {
    height: 20px;
    background: var(--border-color);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.workload-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.workload-bar.status-danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.workload-bar.status-warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.workload-bar.status-info {
    background: linear-gradient(90deg, var(--color-info), var(--color-accent));
}

.workload-bar.status-healthy {
    background: linear-gradient(90deg, #10b981, #059669);
}

.workload-percent {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-color);
}

.workload-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.workload-details i {
    margin-right: 4px;
}

.task-preview {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.task-preview .task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    font-size: 0.8rem;
    margin: 2px 0;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.task-preview .task-item.clickable {
    cursor: pointer;
}

.task-preview .task-item.clickable:hover {
    background: var(--bg-hover);
}

.task-preview .task-name {
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    flex: 1;
}

.task-preview .task-hours {
    color: var(--text-light);
    font-weight: 500;
    margin-left: 8px;
}

.task-preview .task-overlap {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-left: 4px;
}

.task-preview .task-link-icon {
    color: #94a3b8;
    font-size: 0.7rem;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.task-preview .task-item:hover .task-link-icon {
    opacity: 1;
}

/* Task list toggle */
.task-preview .task-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--primary-color);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.task-preview .task-toggle:hover {
    background: #e0e7ff;
}

.task-preview .task-toggle .toggle-icon {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.task-preview.expanded .task-toggle .toggle-icon {
    transform: rotate(180deg);
}

.task-preview .more-tasks {
    font-size: 0.75rem;
    color: var(--primary-color);
    margin-top: 4px;
}

/* Velocity Section */
.velocity-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.velocity-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .velocity-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.velocity-chart-container {
    background: var(--bg-color);
    border-radius: 8px;
    padding: 16px;
    min-height: 220px;
}

.velocity-chart-container canvas {
    width: 100% !important;
    max-height: 200px;
}

.forecast-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-color);
}

.forecast-info i {
    color: var(--color-info);
    margin-top: 2px;
}

/* Alerts Section */
.alerts-section {
    grid-column: span 2;
}

@media (max-width: 1200px) {
    .alerts-section {
        grid-column: span 1;
    }
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.alert:last-child {
    margin-bottom: 0;
}

.alert i {
    margin-top: 2px;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-left: 3px solid var(--danger-color);
}

.alert-warning {
    background: var(--warning-light);
    color: #92400e;
    border: 1px solid var(--warning-color);
    border-left: 3px solid var(--warning-color);
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-accent-hover);
    border-left: 3px solid var(--color-info);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border-left: 3px solid var(--success-color);
}

/* Suggestions Section */
.suggestions-section {
    margin-top: 20px;
}

.suggestions-section h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggestions-section h4 i {
    color: var(--primary-color);
}

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

.suggestion-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}

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

.suggestion-task strong {
    color: var(--text-color);
}

.suggestion-task .hours-badge {
    background: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.suggestion-transfer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--card-bg);
    border-radius: 6px;
}

.suggestion-transfer .from-user,
.suggestion-transfer .to-user {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.suggestion-transfer .from-user {
    color: #dc2626;
}

.suggestion-transfer .to-user {
    color: #059669;
}

.suggestion-transfer .utilization {
    font-size: 0.8rem;
    opacity: 0.8;
}

.suggestion-transfer .transfer-arrow {
    color: var(--text-light);
}

.suggestion-reason {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.suggestion-reason i {
    margin-top: 2px;
}

/* Utilization colors */
.utilization-danger {
    color: var(--danger-color) !important;
}

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

.utilization-low {
    color: var(--color-info) !important;
}

.utilization-healthy {
    color: var(--success-color) !important;
}

/* Analytics loading/error states */
.analytics-dashboard .loading-container,
.analytics-dashboard .error-container {
    grid-column: span 2;
    text-align: center;
    padding: 60px 20px;
}

.analytics-dashboard .error-container i {
    color: var(--danger-color);
    margin-bottom: 16px;
}

.analytics-dashboard .error-container h3 {
    margin: 0 0 8px 0;
}

.analytics-dashboard .error-container p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.empty-message {
    color: var(--text-light);
    text-align: center;
    padding: 20px;
}

/* ============================================================================
   Sprint 6B-2: Period-Based Analytics Dashboard v2 Styles
   ============================================================================ */

/* Period Controls */
.period-section {
    grid-column: span 2;
}

.period-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.period-dates {
    display: flex;
    gap: 12px;
    align-items: center;
}

.period-dates label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.period-dates label span {
    color: var(--text-light);
}

.period-dates input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.period-quick-btns {
    display: flex;
    gap: 6px;
}

.period-quick-btns .btn {
    padding: 4px 12px;
    font-size: 0.75rem;
}

.period-options {
    display: flex;
    gap: 16px;
    margin-left: auto;
}

.period-options .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-medium);
    cursor: pointer;
}

/* Admin Hours Slider Control */
.admin-hours-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.admin-hours-label {
    font-size: 0.875rem;
    color: var(--text-medium);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-hours-label i {
    color: #6366f1;
}

#adminHoursValue {
    font-weight: 600;
    color: #6366f1;
    min-width: 30px;
    text-align: center;
}

#adminHoursSlider {
    width: 100px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #e2e8f0 0%, #6366f1 100%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

#adminHoursSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #6366f1;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.4);
    transition: transform 0.15s ease;
}

#adminHoursSlider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

#adminHoursSlider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #6366f1;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.4);
}

/* Admin overhead stat card */
.stat-card.admin-overhead {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
}

@media (max-width: 900px) {
    .period-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    .period-options {
        margin-left: 0;
    }
}

/* v2 Capacity Overview enhancements */
.capacity-v2 .capacity-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

/* Base stat card styling for capacity-v2 */
.capacity-v2 .stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    min-width: 90px;
}

.capacity-v2 .stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.capacity-v2 .stat-card .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Individual stat card colors */
.capacity-v2 .stat-card.stat-team {
    background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-tertiary) 100%);
    border: 1px solid #cbd5e1;
}

.capacity-v2 .stat-card.stat-team .stat-value {
    color: var(--text-primary);
}

.capacity-v2 .stat-card.stat-team .stat-label {
    color: var(--text-secondary);
}

.capacity-v2 .stat-card.stat-gross {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
}

.capacity-v2 .stat-card.stat-gross .stat-value {
    color: #166534;
}

.capacity-v2 .stat-card.stat-gross .stat-label {
    color: #15803d;
}

.capacity-v2 .stat-card.stat-timeoff {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
}

.capacity-v2 .stat-card.stat-timeoff .stat-value {
    color: var(--color-accent-hover);
}

.capacity-v2 .stat-card.stat-timeoff .stat-label {
    color: #1d4ed8;
}

.capacity-v2 .stat-card.stat-logged {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border: 1px solid #f9a8d4;
}

.capacity-v2 .stat-card.stat-logged .stat-value {
    color: #9d174d;
}

.capacity-v2 .stat-card.stat-logged .stat-label {
    color: #be185d;
}

.capacity-v2 .stat-card.stat-admin {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border: 1px solid #a5b4fc;
}

.capacity-v2 .stat-card.stat-admin .stat-value {
    color: #4338ca;
}

.capacity-v2 .stat-card.stat-admin .stat-label {
    color: #4f46e5;
}

.capacity-v2 .stat-card.stat-net,
.capacity-v2 .stat-card.highlight {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-accent) 100%);
    color: white;
    border: none;
}

.capacity-v2 .stat-card.stat-net .stat-value,
.capacity-v2 .stat-card.highlight .stat-value {
    color: white;
}

.capacity-v2 .stat-card.stat-net .stat-label,
.capacity-v2 .stat-card.highlight .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.capacity-v2 .stat-card.stat-allocated {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
}

.capacity-v2 .stat-card.stat-allocated .stat-value {
    color: #92400e;
}

.capacity-v2 .stat-card.stat-allocated .stat-label {
    color: #b45309;
}

.capacity-v2 .stat-card.stat-allocated.danger,
.capacity-v2 .stat-card.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
}

.capacity-v2 .stat-card.stat-allocated.danger .stat-value,
.capacity-v2 .stat-card.danger .stat-value {
    color: white;
}

.capacity-v2 .stat-card.stat-allocated.danger .stat-label,
.capacity-v2 .stat-card.danger .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
    .capacity-v2 .capacity-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* v2 Workload Card with breakdown */
.workload-v2 .workload-card {
    min-height: auto;
}

.capacity-breakdown {
    font-size: 0.8rem;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.capacity-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.capacity-item .label {
    color: var(--text-light);
}

.capacity-item .value {
    font-weight: 500;
}

.capacity-item.time-off .label,
.capacity-item.logged .label,
.capacity-item.admin .label {
    padding-left: 12px;
}

.capacity-item.admin .label {
    color: #6366f1;
}

.capacity-item.admin .value {
    color: #6366f1;
}

.capacity-item.net {
    font-weight: 600;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 6px;
}

.capacity-item.allocated {
    margin-top: 8px;
}

.capacity-item.allocated.danger .value {
    color: var(--danger-color);
    font-weight: 700;
}

/* Task with no dates warning */
.task-item.no-dates {
    opacity: 0.8;
}

.task-item.no-dates .task-name i {
    color: var(--warning-color);
    margin-right: 4px;
    font-size: 0.75rem;
}

.task-overlap {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: normal;
}

/* Time off preview */
.time-off-preview {
    font-size: 0.75rem;
    color: var(--text-light);
    padding: 8px;
    background: #fef3c7;
    border-radius: var(--radius-sm);
    margin-top: 8px;
}

.time-off-preview i {
    color: var(--warning-color);
    margin-right: 6px;
}

/* Alerts v2 */
.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    align-items: flex-start;
}

.alert-item.alert-high {
    background: #fef2f2;
    border-left: 4px solid var(--danger-color);
}

.alert-item.alert-high .alert-icon {
    color: var(--danger-color);
}

.alert-item.alert-medium {
    background: #fffbeb;
    border-left: 4px solid var(--warning-color);
}

.alert-item.alert-medium .alert-icon {
    color: var(--warning-color);
}

.alert-item.alert-low {
    background: #eff6ff;
    border-left: 4px solid var(--color-info);
}

.alert-item.alert-low .alert-icon {
    color: var(--color-info);
}

.alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-message {
    font-weight: 500;
    margin-bottom: 4px;
}

.alert-suggestions {
    margin: 8px 0 0 0;
    padding-left: 20px;
    font-size: 0.875rem;
    color: var(--text-medium);
}

.alert-suggestions li {
    margin-bottom: 4px;
}

/* =========================================================================
   Sprint 6B-2+: View Toggle, Work Unit Filter, Project View
   ========================================================================= */

/* Controls Section */
.controls-section {
    margin-bottom: 12px;
}

.view-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* View Toggle Buttons */
.view-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-light);
    padding: 4px;
    border-radius: var(--radius-md);
}

.view-toggle .btn {
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    transition: all 0.15s ease;
}

.view-toggle .btn:not(.active) {
    background: transparent;
    color: var(--text-medium);
}

.view-toggle .btn:not(.active):hover {
    background: rgba(0,0,0,0.05);
}

.view-toggle .btn.active {
    background: var(--primary-color);
    color: white;
}

.view-toggle .btn i {
    margin-right: 6px;
}

/* Work Unit Filter */
.work-unit-filter {
    display: flex;
    align-items: center;
}

.work-unit-filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-medium);
}

.work-unit-filter i {
    color: var(--primary-color);
}

.work-unit-filter select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    font-size: 0.875rem;
    min-width: 180px;
}

.work-unit-filter select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Project View Styles */
.project-workload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
}

.project-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 16px;
}

.project-card .workload-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.project-card .project-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-card .project-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark);
}

.project-card .phase-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #e0e7ff;
    color: #4f46e5;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-card .project-dates {
    font-size: 0.75rem;
    color: var(--text-light);
}

.project-card .no-dates {
    color: var(--warning-color);
    font-style: italic;
}

/* Project Stats */
.project-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.project-stats .stat {
    display: flex;
    gap: 4px;
    font-size: 0.8rem;
}

.project-stats .stat .label {
    color: var(--text-light);
}

.project-stats .stat .value {
    font-weight: 600;
    color: var(--text-dark);
}

.project-stats .stat.unassigned .value {
    color: var(--warning-color);
}

/* Assigned Users */
.assigned-users {
    margin-top: 12px;
}

.assigned-users .users-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.assigned-users .users-label i {
    margin-right: 4px;
}

.assigned-users .users-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.user-chip {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-hover);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-medium);
}

.user-chip:hover {
    background: #e2e8f0;
}

.more-users {
    color: var(--text-light);
    font-size: 0.75rem;
    padding: 4px 8px;
}

.assigned-users.no-users {
    color: var(--danger-color);
    font-size: 0.8rem;
    font-style: italic;
}

.assigned-users.no-users i {
    margin-right: 6px;
}

/* Top Tasks in Project Card */
.top-tasks {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.top-tasks .tasks-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 6px;
}

.top-tasks .task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8rem;
}

.top-tasks .task-name {
    flex: 1;
    color: var(--text-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-tasks .task-hours {
    font-weight: 500;
    color: var(--text-dark);
}

.top-tasks .task-status {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-hover);
    color: var(--text-light);
}

.top-tasks .task-status.in-progress,
.top-tasks .task-status.in_progress {
    background: #dbeafe;
    color: var(--primary-color);
}

.top-tasks .task-status.not-started,
.top-tasks .task-status.not_started {
    background: var(--bg-hover);
    color: var(--text-light);
}

/* Project Card Status Colors */
.project-card.status-danger {
    border-left: 4px solid var(--danger-color);
}

.project-card.status-warning {
    border-left: 4px solid var(--warning-color);
}

.project-card.status-healthy {
    border-left: 4px solid var(--success-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .view-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .view-toggle {
        justify-content: center;
    }

    .work-unit-filter select {
        width: 100%;
    }

    .project-workload-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   Project Tree View (Sprint 6B-2++ Enhancement)
   ================================================================= */

.project-tree {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Tree Node Base */
.tree-node {
    border-bottom: 1px solid var(--border);
}

.tree-node:last-child {
    border-bottom: none;
}

.tree-node.project-node {
    background: var(--bg-primary);
}

.tree-node.task-node {
    background: #fafbfc;
    margin-left: 24px;
    border-left: 2px solid var(--border-color);
    border-bottom: none;
}

/* Tree Row (clickable header) */
.tree-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tree-row:hover {
    background: var(--bg-secondary);
}

.project-row:hover {
    background: var(--bg-hover);
}

/* Expand/Collapse Icon */
.tree-expand {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tree-expand .expand-icon {
    color: var(--text-light);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.tree-node.expanded .expand-icon {
    color: var(--primary-color);
}

/* Tree Icon */
.tree-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-right: 12px;
    flex-shrink: 0;
}

.tree-icon.project-icon {
    background: #e0e7ff;
    color: #4f46e5;
}

.tree-node.expanded .tree-icon.project-icon {
    background: #4f46e5;
    color: white;
}

.tree-icon.task-icon {
    background: var(--bg-hover);
    color: var(--text-light);
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

/* Tree Content */
.tree-content {
    flex: 1;
    min-width: 0;
}

.tree-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tree-main .project-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.tree-main .task-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-medium);
}

.tree-main .phase-badge {
    padding: 2px 8px;
    background: #e0e7ff;
    color: #4f46e5;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tree-main .status-indicator {
    font-size: 0.8rem;
}

.tree-main .status-indicator.status-danger {
    color: var(--danger-color);
}

.tree-main .status-indicator.status-warning {
    color: var(--warning-color);
}

.tree-main .status-indicator.status-healthy {
    color: var(--success-color);
}

.tree-main .task-status-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--bg-hover);
    color: var(--text-light);
}

.tree-main .task-status-badge.in-progress,
.tree-main .task-status-badge.in_progress {
    background: #dbeafe;
    color: var(--primary-color);
}

.tree-main .task-status-badge.not-started,
.tree-main .task-status-badge.not_started {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* Tree Meta (stats line) */
.tree-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.tree-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-light);
}

.tree-meta .meta-item i {
    font-size: 0.7rem;
}

.tree-meta .meta-item.hours {
    font-weight: 600;
    color: var(--text-medium);
}

/* Mini Progress Bar */
.tree-bar {
    width: 100px;
    flex-shrink: 0;
    margin-left: 12px;
}

.mini-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.mini-bar-fill.status-healthy {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.mini-bar-fill.status-warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.mini-bar-fill.status-danger {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Tree Actions */
.tree-actions {
    flex-shrink: 0;
    margin-left: 8px;
}

.tree-actions .btn-xs {
    padding: 4px 8px;
    font-size: 0.75rem;
}

.tree-actions .btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 4px;
}

.tree-actions .btn-ghost:hover {
    background: #e2e8f0;
    color: var(--primary-color);
}

/* Tree Children (expanded content) */
.tree-children {
    border-top: 1px solid var(--border-color);
    background: #fafbfc;
    padding: 8px 0;
}

.tree-empty {
    padding: 16px 24px;
    color: var(--text-light);
    font-size: 0.875rem;
    font-style: italic;
}

.tree-empty i {
    margin-right: 6px;
}

/* Task Assignees Section */
.task-assignees-section {
    margin-left: 60px;
    padding: 8px 16px 12px;
    border-top: 1px dashed var(--border-color);
}

.assignees-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assignee-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
}

.assignee-avatar {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    border-radius: 50%;
    color: var(--text-light);
    font-size: 0.7rem;
}

.assignee-name {
    flex: 1;
    color: var(--text-medium);
    font-weight: 500;
}

.assignee-hours {
    font-weight: 600;
    color: var(--text-dark);
    padding: 2px 8px;
    background: var(--bg-hover);
    border-radius: 4px;
}

.assignee-util {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
}

.assignee-util.high {
    background: #fef3c7;
    color: #92400e;
}

.assignee-util.over-allocated {
    background: #fee2e2;
    color: #b91c1c;
}

.assignee-logged {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #dbeafe;
    color: var(--color-accent-hover);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.assignee-logged i {
    font-size: 0.65rem;
}

.no-assignees {
    color: var(--warning-color);
    font-size: 0.8rem;
    font-style: italic;
    padding: 4px 0;
}

.no-assignees i {
    margin-right: 6px;
}

/* Project Node Status Borders */
.tree-node.project-node.status-danger {
    border-left: 4px solid var(--danger-color);
}

.tree-node.project-node.status-warning {
    border-left: 4px solid var(--warning-color);
}

.tree-node.project-node.status-healthy {
    border-left: 4px solid var(--success-color);
}

/* Tree View Responsive */
@media (max-width: 768px) {
    .tree-bar {
        display: none;
    }

    .tree-meta {
        gap: 8px;
    }

    .task-assignees-section {
        margin-left: 40px;
    }
}

/* ====================================================================================
   Sprint 6D: Financial Velocity Tracking Styles
   ==================================================================================== */

/* Burndown Chart Container */
.burndown-chart-container {
    position: relative;
    height: 320px;
    width: 100%;
}

.burndown-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Velocity Trends Grid */
.velocity-trends-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: center;
}

.velocity-sparkline-wrapper {
    position: relative;
    height: 80px;
}

.velocity-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.velocity-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.velocity-stat:last-child {
    border-bottom: none;
}

.velocity-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.velocity-stat-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.velocity-trend-indicator small {
    font-weight: 400;
    opacity: 0.8;
    margin-left: 4px;
}

/* No Data State for Velocity Sections */
.velocity-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    min-height: 150px;
}

.velocity-no-data i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.velocity-no-data p {
    margin: 0;
    font-size: 0.9rem;
    max-width: 300px;
    line-height: 1.5;
}

/* Forecast Cards */
.forecast-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.forecast-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.forecast-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.forecast-card-icon {
    font-size: 1.4rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.forecast-card-content {
    min-width: 0;
}

.forecast-card-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.forecast-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 500;
}

/* Financial Alerts */
.financial-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
}

.financial-alert:last-child {
    margin-bottom: 0;
}

.financial-alert-critical {
    background: rgba(239, 68, 68, 0.08);
    border-left: 4px solid var(--danger-color);
}

.financial-alert-critical .financial-alert-icon {
    color: var(--danger-color);
}

.financial-alert-warning {
    background: rgba(245, 158, 11, 0.08);
    border-left: 4px solid var(--warning-color);
}

.financial-alert-warning .financial-alert-icon {
    color: var(--warning-color);
}

.financial-alert-info {
    background: rgba(59, 130, 246, 0.08);
    border-left: 4px solid var(--color-info);
}

.financial-alert-info .financial-alert-icon {
    color: var(--color-info);
}

.financial-alert-success {
    background: rgba(16, 185, 129, 0.08);
    border-left: 4px solid var(--success-color);
}

.financial-alert-success .financial-alert-icon {
    color: var(--success-color);
}

.financial-alert-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

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

.financial-alert-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.financial-alert-message {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
}

.financial-alert-dismiss {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.85rem;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.financial-alert-dismiss:hover {
    color: #475569;
    background: rgba(0, 0, 0, 0.05);
}

/* Cost Recommendations */
.recommendation-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    margin-bottom: 12px;
}

.recommendation-card:last-child {
    margin-bottom: 0;
}

.recommendation-icon {
    font-size: 1.2rem;
    color: var(--warning-color);
    flex-shrink: 0;
    margin-top: 2px;
}

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

.recommendation-reason {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.4;
}

.recommendation-action {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 6px;
}

.recommendation-action strong {
    color: #334155;
}

.recommendation-impact {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
}

.recommendation-impact i {
    color: var(--warning-color);
    margin-right: 4px;
}

.recommendation-empty {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
}

.recommendation-empty i {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
    color: var(--success-color);
}

.recommendation-empty p {
    font-size: 0.85rem;
    margin: 0;
}

/* Responsive: Financial Velocity */
@media (max-width: 1024px) {
    .forecast-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .velocity-trends-grid {
        grid-template-columns: 1fr;
    }

    .velocity-sparkline-wrapper {
        height: 60px;
    }
}

@media (max-width: 640px) {
    .forecast-cards {
        grid-template-columns: 1fr;
    }

    .burndown-chart-container {
        height: 240px;
    }
}

/* Period Selector (inside burndown card header) */
.velocity-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.velocity-card-header h3 {
    margin: 0;
}

.velocity-period-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.period-label {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.85;
    color: inherit;
}

.period-select {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

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

.period-range-label {
    font-size: 0.72rem;
    opacity: 0.7;
    font-style: italic;
    white-space: nowrap;
}

.custom-range-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.period-date-input {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 4px;
    width: 130px;
}

.period-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.period-date-sep {
    font-size: 0.75rem;
    opacity: 0.7;
}

.period-apply-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.15s ease;
}

.period-apply-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
    .velocity-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .velocity-period-selector {
        width: 100%;
    }

    .period-range-label {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Sprint 6E: Advanced Reports — Baseline Comparison, Drift, etc.
   ══════════════════════════════════════════════════════════════════ */

/* Baseline Comparison Table */
.baseline-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.baseline-comparison-table th {
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #64748b);
    border-bottom: 2px solid var(--border-color, #e2e8f0);
}

.baseline-comparison-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.baseline-comparison-table td.number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.baseline-comparison-table tr.current-version {
    background: rgba(59, 130, 246, 0.05);
    font-weight: 500;
}

.baseline-comparison-table tr.severity-red td:nth-child(5),
.baseline-comparison-table tr.severity-red td:nth-child(7) {
    color: var(--danger-color, #ef4444);
}

.baseline-comparison-table tr.severity-amber td:nth-child(5),
.baseline-comparison-table tr.severity-amber td:nth-child(7) {
    color: var(--warning-color, #f59e0b);
}

/* Delta coloring */
.delta-red { color: var(--danger-color, #ef4444) !important; font-weight: 600; }
.delta-amber { color: var(--warning-color, #f59e0b) !important; font-weight: 500; }
.delta-green { color: var(--success-color, #10b981) !important; }

/* Trigger reason badges */
.trigger-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}

.trigger-approval { background: rgba(16, 185, 129, 0.12); color: #059669; }
.trigger-re-baseline { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.trigger-manual { background: rgba(59, 130, 246, 0.12); color: var(--primary-color); }
.trigger-current { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }

/* Baseline report section headers */
.baseline-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.baseline-table-header h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary, #1e293b);
}

.baseline-table-header h4 i {
    margin-right: 0.4rem;
    color: var(--text-secondary, #64748b);
}

/* No-data state */
.baseline-no-data {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary, #64748b);
}

.baseline-no-data i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.baseline-no-data h3 {
    margin: 0 0 0.5rem;
    color: var(--text-primary, #1e293b);
}

.baseline-no-data.error i {
    color: var(--danger-color, #ef4444);
}

/* Drift Indicator Banner */
.drift-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.drift-banner.drift-amber {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
}

.drift-banner.drift-red {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #991b1b;
}

.drift-banner.drift-green {
    display: none;
}

.drift-banner i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.drift-banner .drift-message {
    flex: 1;
}

.drift-banner .drift-action {
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    flex-shrink: 0;
}

/* Advanced Reports Container Layout */
.advanced-reports-section {
    margin-bottom: 1.5rem;
}

.advanced-reports-section h3 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

.advanced-reports-section h3 i {
    margin-right: 0.4rem;
    color: var(--accent-color, #3b82f6);
}

/* ─────────────────────────────────────────────────────────────────
   Sprint 6E-2: Scope Burndown & Schedule Variance
   ───────────────────────────────────────────────────────────────── */

.burndown-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.burndown-stat-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
}

.burndown-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    line-height: 1.2;
}

.burndown-stat-card .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

.burndown-stat-card .stat-detail {
    font-size: 0.7rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 0.25rem;
}

/* Status indicator colors for variance cards */
.stat-value.status-good { color: var(--success-color); }
.stat-value.status-warn { color: var(--warning-color); }
.stat-value.status-bad { color: var(--danger-color); }

/* Schedule variance table enhancements */
.schedule-variance-table .task-name-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-variance-table .date-cell {
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Schedule status badges */
.schedule-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.schedule-status-badge.variance-on-time {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.schedule-status-badge.variance-at-risk {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.schedule-status-badge.variance-late {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.schedule-status-badge.variance-completed {
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-secondary);
}

.schedule-status-badge.variance-unknown {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

/* Variance row highlighting */
.schedule-variance-table tr.variance-late {
    background: rgba(239, 68, 68, 0.04);
}

.schedule-variance-table tr.variance-at-risk {
    background: rgba(245, 158, 11, 0.04);
}

.schedule-variance-table tr.variance-completed {
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────
   Sprint 6E-3: Earned Value Management (EVM)
   ───────────────────────────────────────────────────────────────── */

.evm-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.evm-metric-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
}

.evm-metric-card.evm-highlight {
    border-color: var(--accent-color, #3b82f6);
    background: rgba(59, 130, 246, 0.04);
}

.evm-metric-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.evm-metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0.15rem 0;
    font-variant-numeric: tabular-nums;
}

.evm-metric-desc {
    font-size: 0.65rem;
    color: var(--text-muted, #94a3b8);
}

/* Variance row */
.evm-variance-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.evm-variance-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.evm-var-label {
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

.evm-var-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.evm-var-value.positive { color: var(--success-color); }
.evm-var-value.negative { color: var(--danger-color); }

/* Gauges grid */
.evm-gauges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.evm-gauge-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
}

.evm-gauge-header {
    margin-bottom: 0.5rem;
}

.evm-gauge-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.evm-gauge-subtitle {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted, #94a3b8);
}

.evm-gauge-value {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0.25rem 0;
}

.evm-index-good { color: var(--success-color); }
.evm-index-warn { color: var(--warning-color); }
.evm-index-bad { color: var(--danger-color); }

.evm-gauge-interpretation {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
}

/* Gauge bar visualization */
.evm-gauge-bar-container {
    margin: 0.5rem 0;
}

.evm-gauge-bar-bg {
    position: relative;
    height: 8px;
    background: var(--bg-tertiary, #e2e8f0);
    border-radius: 4px;
    overflow: visible;
}

.evm-gauge-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.evm-gauge-bar-target {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: var(--text-primary, #1e293b);
    border-radius: 1px;
}

.evm-gauge-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 0.15rem;
}

/* Forecast grid */
.evm-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.evm-forecast-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
}

.evm-forecast-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.evm-forecast-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0.2rem 0;
}

.evm-forecast-detail {
    font-size: 0.65rem;
    color: var(--text-muted, #94a3b8);
}

/* Health badge colors */
.evm-forecast-card.evm-health-green { border-color: var(--success-color); }
.evm-forecast-card.evm-health-amber { border-color: var(--warning-color); }
.evm-forecast-card.evm-health-red { border-color: var(--danger-color); }

.evm-health-green .evm-health-badge { color: var(--success-color); }
.evm-health-amber .evm-health-badge { color: var(--warning-color); }
.evm-health-red .evm-health-badge { color: var(--danger-color); }

/* Interpretation box */
.evm-interpretation {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-primary, #1e293b);
}

.evm-interpretation i {
    color: var(--color-info);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.evm-interpretation p {
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Sprint 6E-4: Time Analysis & Approval Governance
   ───────────────────────────────────────────────────────────────── */

/* Approval status badges */
.approval-status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.approval-status-underreview {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-color);
}

.approval-status-approved {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.approval-status-rejected {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.approval-status-deferred,
.approval-status-revisionsrequired {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
}

.approval-status-withdrawn {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
}

/* Time analysis responsive grid */
@media (max-width: 768px) {
    .time-analysis-charts {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   Sprint 8-TR: Time Report Sub-Tabs & Breakdown
   ======================================== */

/* Sub-tab bar within Time Analysis report */
.time-report-tabs {
    display: flex;
    gap: 4px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--border-primary, #e5e7eb);
    margin-bottom: 16px;
}

.time-report-tab {
    padding: 6px 16px;
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-report-tab:hover {
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-primary, #111827);
}

.time-report-tab.active {
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    border-color: var(--accent-primary, #3b82f6);
}

.time-report-tab i {
    font-size: 0.75rem;
}

/* Collapsible breakdown groups */
.time-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.time-breakdown-group {
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-primary, #fff);
}

.time-breakdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease;
}

.time-breakdown-header:hover {
    background: var(--bg-secondary, #f9fafb);
}

.time-breakdown-expand {
    width: 16px;
    flex-shrink: 0;
    color: var(--text-tertiary, #9ca3af);
    transition: transform 0.15s ease;
}

.time-breakdown-group.expanded .time-breakdown-expand {
    transform: rotate(90deg);
}

.time-breakdown-name {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
}

.time-breakdown-name i {
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
}

.time-breakdown-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-breakdown-parent {
    color: var(--text-tertiary, #9ca3af);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.time-breakdown-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    font-size: 0.8125rem;
}

.time-breakdown-hours {
    font-weight: 600;
    color: var(--text-primary, #111827);
    min-width: 48px;
    text-align: right;
}

.time-breakdown-bar-container {
    width: 80px;
    height: 6px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 3px;
    overflow: hidden;
}

.time-breakdown-bar {
    display: block;
    height: 100%;
    background: var(--accent-primary, #3b82f6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.time-breakdown-billable {
    min-width: 80px;
    text-align: right;
}

.time-breakdown-cost {
    min-width: 60px;
    text-align: right;
    color: var(--text-secondary, #6b7280);
}

.time-breakdown-count {
    min-width: 70px;
    text-align: right;
    color: var(--text-tertiary, #9ca3af);
}

/* Nested detail table (hidden until expanded) */
.time-breakdown-details {
    display: none;
    padding: 0 14px 12px 38px;
    border-top: 1px solid var(--border-primary, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.time-breakdown-group.expanded .time-breakdown-details {
    display: block;
}

.time-breakdown-table {
    font-size: 0.8125rem;
}

.time-breakdown-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-tertiary, #9ca3af);
}

.task-type-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: capitalize;
}

/* Responsive: stack stats on narrow screens */
@media (max-width: 768px) {
    .time-breakdown-header {
        flex-wrap: wrap;
    }
    .time-breakdown-stats {
        width: 100%;
        padding-left: 24px;
        margin-top: 4px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .time-breakdown-bar-container {
        display: none;
    }
    .time-breakdown-details {
        padding-left: 14px;
    }
}

/* ========================================
   Sprint 7A: Permits & Compliance Tracker
   ======================================== */

/* --- Permits Main View Container --- */
.permits-container {
    padding: 24px;
    overflow-y: auto;
    height: 100%;
}

/* --- Dashboard Layout --- */
.permits-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.permits-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.permits-dashboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.permits-dashboard-actions {
    display: flex;
    gap: 8px;
}

/* --- Stat Cards Row --- */
.permits-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.permit-stat-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.permit-stat-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-color: var(--border-medium, #cbd5e1);
}

.permit-stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    line-height: 1.2;
}

.permit-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.permit-stat-card.stat-warning .stat-value {
    color: #d97706;
}

.permit-stat-card.stat-danger .stat-value {
    color: #dc2626;
}

.permit-stat-card.stat-success .stat-value {
    color: #059669;
}

/* --- Compliance Score --- */
.compliance-score-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}

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

.compliance-score-fill.score-high {
    background: linear-gradient(90deg, #059669, #10b981);
}

.compliance-score-fill.score-medium {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.compliance-score-fill.score-low {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* --- Permit Cards Grid --- */
.permits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.permit-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.permit-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--border-medium, #cbd5e1);
    transform: translateY(-1px);
}

.permit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
}

.permit-card.status-active::before { background: #059669; }
.permit-card.status-draft::before { background: #94a3b8; }
.permit-card.status-applied::before { background: var(--color-info); }
.permit-card.status-underreview::before { background: var(--warning-color); }
.permit-card.status-approved::before,
.permit-card.status-approvedconditional::before { background: var(--success-color); }
.permit-card.status-expiringsoon::before { background: #d97706; }
.permit-card.status-expired::before { background: #dc2626; }
.permit-card.status-rejected::before { background: var(--danger-color); }
.permit-card.status-suspended::before { background: #f97316; }
.permit-card.status-revoked::before { background: #991b1b; }
.permit-card.status-cancelled::before { background: #6b7280; }
.permit-card.status-renewed::before { background: #8b5cf6; }
.permit-card.status-conditionsmet::before { background: #059669; }

.permit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.permit-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #1e293b);
    line-height: 1.3;
}

.permit-card-number {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    font-family: 'SF Mono', 'Consolas', monospace;
    margin-top: 2px;
}

.permit-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.permit-card-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
}

.permit-card-info i {
    width: 16px;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
}

.permit-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light, #e2e8f0);
}

.permit-card-cost {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #1e293b);
}

.permit-card-expiry {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.permit-card-expiry.expiry-safe {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.permit-card-expiry.expiry-warning {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.permit-card-expiry.expiry-danger {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.permit-card-expiry.expiry-expired {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    font-weight: 600;
}

/* --- Blocks Work Badge --- */
.permit-blocks-work {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

.permit-blocks-work i {
    font-size: 0.7rem;
}

/* --- Status Badges --- */
.permit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.permit-status-badge.status-draft {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
}

.permit-status-badge.status-applied {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-color);
}

.permit-status-badge.status-underreview {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.permit-status-badge.status-approved {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.permit-status-badge.status-approvedconditional {
    background: rgba(16, 185, 129, 0.1);
    color: #0d9488;
    border: 1px dashed rgba(13, 148, 136, 0.3);
}

.permit-status-badge.status-conditionsmet {
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
}

.permit-status-badge.status-active {
    background: rgba(5, 150, 105, 0.15);
    color: #047857;
}

.permit-status-badge.status-expiringsoon {
    background: rgba(217, 119, 6, 0.15);
    color: #b45309;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

.permit-status-badge.status-expired {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

.permit-status-badge.status-rejected {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.permit-status-badge.status-suspended {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.permit-status-badge.status-revoked {
    background: rgba(153, 27, 27, 0.15);
    color: #991b1b;
}

.permit-status-badge.status-cancelled {
    background: rgba(107, 114, 128, 0.12);
    color: var(--text-secondary);
}

.permit-status-badge.status-renewed {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

/* --- Permit Detail View --- */
.permit-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.permit-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.permit-detail-title-section {
    flex: 1;
}

.permit-detail-title-section h3 {
    margin: 0 0 4px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.permit-detail-number {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.permit-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.permit-detail-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.permit-detail-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.permit-detail-field.full-width {
    grid-column: 1 / -1;
}

.permit-detail-label {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.permit-detail-value {
    font-size: 0.92rem;
    color: var(--text-primary, #1e293b);
    font-weight: 500;
}

/* --- Permit Tabs (within detail) --- */
.permit-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-light, #e2e8f0);
}

.permit-detail-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}

.permit-detail-tab:hover {
    color: var(--text-primary, #1e293b);
}

.permit-detail-tab.active {
    color: var(--accent, #3b82f6);
    border-bottom-color: var(--accent, #3b82f6);
}

.permit-detail-tab-content {
    padding: 16px 0;
}

/* --- Checklist Styles --- */
.permit-checklist-section {
    margin-bottom: 16px;
}

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

.permit-checklist-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.permit-checklist-progress {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.permit-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.permit-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: background 0.15s;
}

.permit-checklist-item:hover {
    background: var(--bg-hover, #f1f5f9);
}

.permit-checklist-item.completed {
    opacity: 0.7;
}

.permit-checklist-item.completed .permit-checklist-item-name {
    text-decoration: line-through;
    color: var(--text-muted, #64748b);
}

.permit-checklist-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #059669;
    cursor: pointer;
}

.permit-checklist-item-name {
    flex: 1;
    font-size: 0.88rem;
    color: var(--text-primary, #1e293b);
}

.permit-checklist-item-required {
    font-size: 0.7rem;
    font-weight: 600;
    color: #dc2626;
    text-transform: uppercase;
}

.permit-checklist-item-date {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

/* --- Document List --- */
.permit-documents-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.permit-document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 6px;
    border: 1px solid var(--border-light, #e2e8f0);
}

.permit-document-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.permit-document-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.permit-document-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.permit-document-type {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.permit-document-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
}

.permit-document-status.received {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.permit-document-status.pending {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.permit-document-status.required {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* --- Activity Timeline --- */
.permit-activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 24px;
}

.permit-activity-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border-light, #e2e8f0);
}

.permit-activity-item {
    position: relative;
    padding: 10px 0;
    padding-left: 12px;
}

.permit-activity-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent, #3b82f6);
    border: 2px solid var(--card-bg, #fff);
    z-index: 1;
}

.permit-activity-item.activity-status-change::before {
    background: #059669;
}

.permit-activity-item.activity-created::before {
    background: var(--color-info);
}

.permit-activity-item.activity-updated::before {
    background: var(--warning-color);
}

.permit-activity-description {
    font-size: 0.88rem;
    color: var(--text-primary, #1e293b);
    margin-bottom: 2px;
}

.permit-activity-meta {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.permit-activity-change {
    font-size: 0.8rem;
    color: var(--text-secondary, #475569);
    margin-top: 4px;
    padding: 4px 8px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 4px;
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* =====================================================================
   Extension Section Styles (Sprint 7.1)
   Shared styles for permit extension sections: checklists, calendar,
   documents, empty states, template selector.
   ===================================================================== */

/* --- Extension Empty State --- */
.extension-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    border: 2px dashed var(--border-light, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-secondary, #f8fafc);
}

.extension-empty-state i {
    font-size: 1.75rem;
    margin-bottom: 10px;
    color: var(--text-muted, #9ca3af);
    opacity: 0.6;
}

.extension-empty-state p {
    margin: 0 0 14px 0;
    font-size: 0.88rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

/* --- Permit Template Selector --- */
.permit-template-selector label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    margin-bottom: 6px;
}

.permit-template-selector label i {
    margin-right: 4px;
    color: var(--primary-color, #2563eb);
}

.permit-template-selector .form-text {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}

/* --- Calendar Entry Form --- */
.calendar-entry-form {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    padding: 14px;
    margin-top: 10px;
    background: var(--bg-secondary, #f8fafc);
}

.calendar-entry-form .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.calendar-entry-form .form-row > * {
    flex: 1;
}

.calendar-entry-form .form-row .date-field {
    width: 150px;
    flex: none;
}

.calendar-entry-form .form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
}

/* --- Calendar Entry Card --- */
.calendar-entry-card {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--card-bg, #fff);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.calendar-entry-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.calendar-entry-card.entry-overdue {
    background: #fef2f2;
    border-color: #fca5a5;
    border-left: 3px solid var(--danger-color);
}

.calendar-entry-card.entry-due-soon {
    background: #fffbeb;
    border-color: #fcd34d;
    border-left: 3px solid var(--warning-color);
}

.calendar-entry-card.entry-completed {
    opacity: 0.6;
    background: var(--bg-secondary, #f8fafc);
}

.calendar-entry-card .entry-info {
    flex: 1;
    min-width: 0;
}

.calendar-entry-card .entry-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
}

.calendar-entry-card .entry-title i {
    font-size: 0.8rem;
    flex-shrink: 0;
}

.calendar-entry-card .entry-icon-complete {
    color: var(--success-color, #10b981);
}

.calendar-entry-card .entry-icon-default {
    color: var(--text-muted, #94a3b8);
}

.calendar-entry-card .entry-title-completed {
    text-decoration: line-through;
    color: var(--text-muted, #94a3b8);
}

.calendar-entry-card .entry-meta {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    margin-top: 3px;
}

.calendar-entry-card .entry-meta a {
    color: var(--primary-color, #2563eb);
    text-decoration: none;
    font-weight: 500;
}

.calendar-entry-card .entry-meta a:hover {
    text-decoration: underline;
}

.calendar-entry-card .entry-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

.entry-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.entry-badge.badge-complete {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.entry-badge.badge-overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.entry-badge.badge-due-soon {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.entry-badge.badge-upcoming {
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary-color);
}

.entry-type-badge {
    font-size: 0.65rem;
    padding: 2px 7px;
    background: var(--bg-tertiary, #e2e8f0);
    color: var(--text-secondary, #64748b);
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* --- Attachment Card (permit documents) --- */
.permit-attachment-card {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    background: var(--card-bg, #fff);
}

.permit-attachment-card:hover {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.permit-attachment-card .attachment-preview {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-hover) 100%);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.permit-attachment-card .attachment-preview i {
    font-size: 1.6rem;
    color: var(--text-muted, #94a3b8);
}

.permit-attachment-card .attachment-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.permit-attachment-card .attachment-details {
    padding: 10px;
}

.permit-attachment-card .attachment-name {
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1e293b);
}

.permit-attachment-card .attachment-meta {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 3px;
}

/* --- Checklist Styles --- */
.checklist-group {
    margin-bottom: 16px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    padding: 14px;
    background: var(--card-bg, #fff);
}

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

.checklist-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
}

.checklist-progress {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    font-weight: 600;
    background: var(--bg-secondary, #f1f5f9);
    padding: 2px 10px;
    border-radius: 12px;
}

.checklist-progress-bar {
    height: 5px;
    background: var(--bg-tertiary, #e2e8f0);
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: hidden;
}

.checklist-progress-bar .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checklist-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    gap: 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.checklist-item:hover {
    background: var(--bg-secondary, #f8fafc);
}

.checklist-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--success-color, #10b981);
    cursor: pointer;
    flex-shrink: 0;
}

.checklist-item .item-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
    line-height: 1.4;
}

.checklist-item .item-label.completed {
    text-decoration: line-through;
    color: var(--text-muted, #9ca3af);
}

.checklist-item .required-marker {
    color: var(--danger-color);
    font-weight: 700;
    font-size: 0.85rem;
}

.checklist-item .completed-info {
    font-size: 0.7rem;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
}

.checklist-item .btn-icon {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.checklist-item:hover .btn-icon {
    opacity: 0.6;
}

.checklist-item .btn-icon:hover {
    opacity: 1 !important;
    color: var(--danger-color, #ef4444);
    background: rgba(239, 68, 68, 0.08);
}

.checklist-add {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light, #e2e8f0);
    align-items: center;
}

.checklist-add input[type="text"] {
    flex: 1;
    font-size: 0.85rem;
}

.checklist-add label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    cursor: pointer;
}

/* --- Section Action Button Override ---
   Use outline-primary for extension section action buttons instead of
   the heavy secondary grey. This gives a cleaner, more intentional look. */
.extension-empty-state .btn,
.checklist-add .btn,
.task-calendar-section > .btn,
#permitDocumentsSection .btn {
    background: transparent;
    border: 1px solid var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
    font-weight: 500;
}

.extension-empty-state .btn:hover,
.checklist-add .btn:hover,
.task-calendar-section > .btn:hover,
#permitDocumentsSection .btn:hover {
    background: var(--primary-color, #2563eb);
    color: white;
}

/* Calendar entry complete button stays subtle */
.calendar-entry-card .btn {
    background: transparent;
    border: 1px solid var(--border-light, #cbd5e1);
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

.calendar-entry-card .btn:hover {
    background: var(--success-color, #10b981);
    border-color: var(--success-color, #10b981);
    color: white;
}

/* --- Regulatory Calendar --- */
.regulatory-calendar {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.regulatory-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.regulatory-calendar-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.regulatory-calendar-nav {
    display: flex;
    gap: 8px;
}

.regulatory-calendar-nav button {
    padding: 4px 10px;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--card-bg, #fff);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.regulatory-calendar-nav button:hover {
    background: var(--bg-hover, #f1f5f9);
}

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

.calendar-day-header {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
}

.calendar-day {
    min-height: 80px;
    padding: 4px;
    border-right: 1px solid var(--border-light, #e2e8f0);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    position: relative;
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day.other-month {
    background: var(--bg-secondary, #f8fafc);
    opacity: 0.5;
}

.calendar-day.today {
    background: rgba(59, 130, 246, 0.04);
}

.calendar-day .day-number {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    padding: 2px 4px;
}

.calendar-day.today .day-number {
    color: #fff;
    background: var(--color-info);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-event {
    font-size: 0.68rem;
    padding: 2px 4px;
    border-radius: 3px;
    margin: 1px 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    transition: opacity 0.15s;
}

.calendar-event:hover {
    opacity: 0.85;
}

.calendar-event.event-expiration {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.calendar-event.event-renewal {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.calendar-event.event-inspection {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-color);
}

.calendar-event.event-deadline {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.calendar-event.event-reminder {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
}

/* --- Create/Edit Permit Modal --- */
.permit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.permit-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.permit-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.permit-form-group.full-width {
    grid-column: 1 / -1;
}

.permit-form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
}

.permit-form-group input,
.permit-form-group select,
.permit-form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text-primary, #1e293b);
    background: var(--card-bg, #fff);
    transition: border-color 0.15s;
}

.permit-form-group input:focus,
.permit-form-group select:focus,
.permit-form-group textarea:focus {
    outline: none;
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* --- Status Transition Buttons --- */
.permit-transitions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.permit-transition-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.permit-transition-btn:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

.permit-transition-btn.transition-positive {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    border-color: rgba(5, 150, 105, 0.3);
}

.permit-transition-btn.transition-neutral {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    border-color: rgba(59, 130, 246, 0.3);
}

.permit-transition-btn.transition-negative {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.2);
}

.permit-transition-btn.transition-warning {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.3);
}

/* --- Permits Tab (inside task modal) --- */
#permitsTabContainer {
    padding: 4px 0;
}

.permits-tab-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--border-light, #e2e8f0);
}

.permits-tab-count {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.permits-tab-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Upcoming Deadlines --- */
.permit-deadlines-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.permit-deadline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 8px;
    transition: box-shadow 0.15s;
}

.permit-deadline-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.permit-deadline-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.permit-deadline-icon.deadline-urgent {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.permit-deadline-icon.deadline-warning {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.permit-deadline-icon.deadline-normal {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-info);
}

.permit-deadline-info {
    flex: 1;
}

.permit-deadline-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.permit-deadline-date {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
}

.permit-deadline-countdown {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.permit-deadline-countdown.countdown-urgent {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.permit-deadline-countdown.countdown-warning {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.permit-deadline-countdown.countdown-safe {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

/* --- Permits Section Headers --- */
.permits-section {
    margin-bottom: 24px;
}

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

.permits-section-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

/* --- Permit Empty State --- */
.permits-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted, #64748b);
}

.permits-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.permits-empty h3 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: var(--text-secondary, #475569);
}

.permits-empty p {
    margin: 0;
    font-size: 0.88rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .permits-grid {
        grid-template-columns: 1fr;
    }

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

    .permit-detail-body {
        grid-template-columns: 1fr;
    }

    .permit-form-row {
        grid-template-columns: 1fr;
    }

    .permits-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==============================================
   Sprint 7.1: Permit Expiration Badges (Ticket List)
   ============================================== */

.permit-expiration-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    margin-left: 8px;
    white-space: nowrap;
}

.permit-badge-expired {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.permit-badge-expiring {
    background: #fff7ed;
    color: #f97316;
    border: 1px solid #fed7aa;
}

.permit-badge-active {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Sprint 7.1: Permit Template Selector */
.permit-template-selector {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.permit-template-selector label {
    font-weight: 600;
    font-size: 13px;
    color: #334155;
    margin-bottom: 6px;
    display: block;
}

.permit-template-selector select {
    width: 100%;
}

/* ============================================================================
   Sprint 7.4: RFI (Request for Information) Styles
   ============================================================================ */

/* Status Pipeline */
.rfi-status-pipeline {
    display: flex;
    align-items: center;
    padding: 12px 0;
    gap: 0;
}

.rfi-pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.rfi-pipeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border-color, #D1D5DB);
    transition: all 0.2s ease;
}

.rfi-pipeline-step.past .rfi-pipeline-dot {
    background: var(--success-color, #10B981);
}

.rfi-pipeline-label {
    font-size: 11px;
    color: var(--text-muted, #9CA3AF);
    white-space: nowrap;
}

.rfi-pipeline-step.active .rfi-pipeline-label {
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.rfi-pipeline-step.past .rfi-pipeline-label {
    color: var(--text-secondary, #6B7280);
}

.rfi-pipeline-connector {
    flex: 1;
    height: 2px;
    background: var(--border-color, #D1D5DB);
    min-width: 20px;
    margin: 0 4px;
    margin-bottom: 22px;
}

.rfi-pipeline-connector.past {
    background: var(--success-color, #10B981);
}

/* Ball in Court Indicator */
.rfi-ball-in-court {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.rfi-ball-in-court.responder {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
}

.rfi-ball-in-court.requestor {
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    color: #92400E;
}

.rfi-bic-label {
    font-weight: 500;
}

.rfi-bic-status {
    color: inherit;
    opacity: 0.7;
    font-size: 13px;
}

/* Overdue Banner */
.rfi-overdue-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    color: #991B1B;
    font-size: 14px;
    margin-bottom: 16px;
}

.rfi-due-soon-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    color: #92400E;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Question & Response sections */
.rfi-question-section,
.rfi-response-section {
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-secondary, #F9FAFB);
}

.rfi-response-editable {
    background: var(--bg-tertiary, #F3F4F6);
    border: 1px dashed var(--border-color, #D1D5DB);
}

.rfi-response-pending {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted, #9CA3AF);
}

.rfi-section-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted, #9CA3AF);
}

.rfi-section-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary, #111827);
    white-space: pre-wrap;
}

/* Reference section items */
.rfi-ref-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rfi-ref-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #9CA3AF);
}

.rfi-ref-value {
    font-size: 14px;
    color: var(--text-primary, #111827);
}

/* RFI Log View */
.rfi-log-container {
    padding: 16px;
}

.rfi-log-summary-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rfi-log-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--bg-secondary, #F9FAFB);
    border: 1px solid var(--border-color, #E5E7EB);
    min-width: 100px;
}

.rfi-log-summary-card .count {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #111827);
    line-height: 1;
}

.rfi-log-summary-card .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #9CA3AF);
    margin-top: 4px;
}

.rfi-log-summary-card.overdue {
    background: #FEF2F2;
    border-color: #FECACA;
}

.rfi-log-summary-card.overdue .count {
    color: #DC2626;
}

.rfi-log-filters {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.rfi-log-filters select,
.rfi-log-filters input {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #D1D5DB);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111827);
}

.rfi-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rfi-log-table th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #9CA3AF);
    border-bottom: 2px solid var(--border-color, #E5E7EB);
    cursor: pointer;
    user-select: none;
}

.rfi-log-table th:hover {
    color: var(--text-primary, #111827);
}

.rfi-log-table th .sort-icon {
    margin-left: 4px;
    opacity: 0.4;
}

.rfi-log-table th .sort-icon.active {
    opacity: 1;
}

.rfi-log-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    vertical-align: middle;
}

.rfi-log-table tr:hover {
    background: var(--bg-secondary, #F9FAFB);
    cursor: pointer;
}

.rfi-log-table tr.overdue {
    background: #FEF2F2;
}

.rfi-log-table tr.overdue:hover {
    background: #FEE2E2;
}

.rfi-log-overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #FEE2E2;
    color: #DC2626;
}

.rfi-log-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.rfi-log-bic-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.rfi-log-bic-badge i {
    font-size: 10px;
}

/* RFI Log export button */
.rfi-log-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-color, #D1D5DB);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111827);
    font-size: 13px;
    cursor: pointer;
}

.rfi-log-export-btn:hover {
    background: var(--bg-secondary, #F9FAFB);
}

/* ================================================================
   Sprint 7.6: Submittal Styles
   ================================================================ */

/* Submittal info grid */
.submittal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

/* Submittal review action badge colors */
.submittal-review-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.submittal-review-badge.no-exceptions { background: #D1FAE5; color: #065F46; }
.submittal-review-badge.corrections { background: #FEF3C7; color: #92400E; }
.submittal-review-badge.revise { background: #FFEDD5; color: #9A3412; }
.submittal-review-badge.rejected { background: #FEE2E2; color: #991B1B; }
.submittal-review-badge.info-only { background: #F3F4F6; color: #4B5563; }

/* Submittal revision banner */
.submittal-revision-banner {
    background: #FFF7ED;
    border: 1px solid #F97316;
    border-radius: 6px;
    padding: 12px;
    margin-top: 16px;
}

.submittal-revision-banner .btn {
    margin-top: 8px;
}

/* =====================================================
   Sprint 7.7: Weather-Aware Scheduling Styles
   ===================================================== */

/* Weather Dashboard */
.weather-dashboard {
    padding: 4px 0;
}

.weather-location-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 16px;
}

.weather-location-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.weather-location-name {
    font-weight: 600;
}

.weather-location-coords {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.weather-location-actions {
    display: flex;
    gap: 4px;
}

/* Weather Radar Map */
#weatherDashboardMap {
    border: 1px solid var(--border-primary, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Weather Section Titles */
.weather-section {
    margin-bottom: 20px;
}

.weather-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--text-primary, #111827);
}

.weather-subsection-title {
    font-size: 13px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    color: var(--text-secondary, #374151);
}

.weather-no-data {
    font-size: 13px;
    color: var(--text-muted, #9ca3af);
    padding: 8px 0;
    margin: 0;
}

/* 14-Day Forecast Strip */
.weather-forecast-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.forecast-day-card {
    flex-shrink: 0;
    width: 80px;
    padding: 10px 6px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s;
}

.forecast-day-card:hover {
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.forecast-day-card.today {
    border-color: var(--accent-color, #6366f1);
    background: var(--accent-bg, #eef2ff);
}

.forecast-day-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #374151);
    text-transform: uppercase;
}

.forecast-day-date {
    font-size: 10px;
    color: var(--text-muted, #6b7280);
    margin-bottom: 6px;
}

.forecast-day-icon {
    font-size: 20px;
    margin: 4px 0;
}

.forecast-day-temps {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    margin-bottom: 4px;
}

.temp-high {
    font-weight: 700;
    color: var(--text-primary, #111827);
}

.temp-low {
    color: var(--text-muted, #6b7280);
}

.forecast-day-details {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted, #6b7280);
}

.forecast-day-details i {
    font-size: 9px;
}

/* Conflict Badge */
.weather-conflict-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}

.weather-conflict-badge.high {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.weather-conflict-badge.medium {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fcd34d;
}

.weather-conflict-badge.none {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Conflict Table */
.weather-conflict-table-wrap {
    overflow-x: auto;
}

.weather-conflict-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.weather-conflict-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.weather-conflict-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}

.weather-conflict-table tr.severity-high td {
    background: #fef2f2;
}

.weather-conflict-table tr.severity-medium td {
    background: #fffbeb;
}

.conflict-task-name {
    font-weight: 500;
}

.conflict-violations {
    font-size: 12px;
    color: var(--text-secondary, #374151);
}

/* Severity Badges */
.weather-severity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.weather-severity-badge.severity-high {
    background: #fef2f2;
    color: #dc2626;
}

.weather-severity-badge.severity-medium {
    background: #fffbeb;
    color: #d97706;
}

.weather-severity-badge.severity-low {
    background: #f0fdf4;
    color: #16a34a;
}

/* Delay Summary Grid */
.weather-delay-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.delay-stat {
    text-align: center;
    padding: 16px;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

.delay-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-color, #6366f1);
}

.delay-stat-label {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Delay Condition Bars */
.delay-condition-bars {
    margin-top: 12px;
}

.delay-condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
}

.delay-condition-name {
    width: 120px;
    flex-shrink: 0;
    color: var(--text-secondary, #374151);
    font-weight: 500;
}

.delay-condition-bar-track {
    flex: 1;
    height: 8px;
    background: var(--surface-tertiary, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
}

.delay-condition-bar-fill {
    height: 100%;
    background: var(--accent-color, #6366f1);
    border-radius: 4px;
    transition: width 0.3s;
}

.delay-condition-hours {
    width: 40px;
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary, #374151);
}

/* Monthly Chart Bars */
.weather-monthly-chart {
    margin-top: 8px;
}

.monthly-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
}

.monthly-label {
    width: 60px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text-secondary, #374151);
}

.monthly-bar-track {
    flex: 1;
    height: 12px;
    background: var(--surface-tertiary, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}

.monthly-bar-fill {
    height: 100%;
    background: var(--warning-color);
    border-radius: 6px;
    transition: width 0.3s;
}

.monthly-hours {
    width: 40px;
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary, #374151);
}

/* Weather Analysis Table */
.weather-analysis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
}

.weather-analysis-table th {
    text-align: left;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.weather-analysis-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}

/* Task Weather Section */
.weather-task-section {
    padding: 4px 0;
}

.weather-outdoor-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 12px;
}

.weather-outdoor-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.toggle-switch-inline {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch-inline input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-sm {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.2s;
    border-radius: 20px;
}

.toggle-slider-sm:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--bg-primary);
    transition: 0.2s;
    border-radius: 50%;
}

.toggle-switch-inline input:checked + .toggle-slider-sm {
    background-color: var(--accent-color, #6366f1);
}

.toggle-switch-inline input:checked + .toggle-slider-sm:before {
    transform: translateX(16px);
}

.weather-task-location {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin-bottom: 12px;
}

.weather-task-alerts {
    margin-bottom: 12px;
}

.weather-mini-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.weather-alert-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 12px;
}

.weather-alert-item.severity-high {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
}

.weather-alert-item.severity-medium {
    background: #fffbeb;
    border-left: 3px solid var(--warning-color);
}

.weather-alert-item.severity-low {
    background: #f0fdf4;
    border-left: 3px solid #22c55e;
}

.weather-alert-date {
    font-weight: 600;
    min-width: 48px;
}

.weather-alert-text {
    color: var(--text-secondary, #374151);
}

/* Weather Delay Table (task detail) */
.weather-delay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.weather-delay-table th {
    text-align: left;
    padding: 6px 8px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.weather-delay-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}

.delay-notes-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Weather Task Icon (tree/table views) */
.weather-task-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    font-size: 12px;
    color: #6366f1;
}

/* Location Modal */
.geocode-result-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
    font-size: 13px;
    transition: background 0.15s;
}

.geocode-result-item:hover {
    background: var(--surface-secondary, #f8fafc);
}

.selected-location-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

/* Threshold Configuration */
.weather-threshold-panel {
    margin-top: 8px;
    padding: 20px;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
}

.threshold-card {
    padding: 16px;
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}

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

.threshold-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.threshold-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    margin-bottom: 4px;
}

.threshold-value-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.threshold-input {
    font-size: 13px !important;
    padding: 6px 8px !important;
    width: 100%;
}

.threshold-unit {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    flex-shrink: 0;
}

.threshold-override-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--surface-primary, #fff);
}

.override-name {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
}

.override-values {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin-right: 12px;
}

.override-values i {
    margin-right: 2px;
}

.override-actions {
    display: flex;
    gap: 4px;
}

/* Forecast Conflict Highlighting */
.forecast-day-card.forecast-conflict-high {
    border-color: var(--danger-color);
    background: #fef2f2;
    box-shadow: 0 0 0 1px #fca5a5;
}

.forecast-day-card.forecast-conflict-medium {
    border-color: var(--warning-color);
    background: #fffbeb;
    box-shadow: 0 0 0 1px #fde68a;
}

.forecast-day-card.forecast-conflict-low {
    border-color: var(--color-info);
    background: #eff6ff;
}

.forecast-day-card.forecast-rain {
    border-color: #eab308;
    background: #fefce8;
}

.forecast-conflict-indicator {
    font-size: 10px;
    color: var(--danger-color);
    margin-top: 2px;
}

.forecast-conflict-medium .forecast-conflict-indicator {
    color: var(--warning-color);
}

.forecast-conflict-low .forecast-conflict-indicator {
    color: var(--color-info);
}

.forecast-rain-indicator {
    font-size: 10px;
    color: #a58416;
    margin-top: 2px;
}

/* Outdoor Task Schedule */
.outdoor-task-schedule {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.outdoor-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 4px solid var(--success-color);
    background: var(--surface-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-left: 4px solid var(--success-color);
    transition: background 0.15s;
}

.outdoor-task-row:hover {
    background: var(--surface-secondary, #f8fafc);
}

.outdoor-task-row.outdoor-task-high {
    border-left-color: var(--danger-color);
    background: #fef2f2;
}

.outdoor-task-row.outdoor-task-medium {
    border-left-color: var(--warning-color);
    background: #fffbeb;
}

.outdoor-task-row.outdoor-task-low {
    border-left-color: var(--color-info);
    background: #eff6ff;
}

.outdoor-task-row.outdoor-task-rain {
    border-left-color: #eab308;
    background: #fefce8;
}

.outdoor-task-row.outdoor-task-nodate {
    border-left-color: var(--text-muted);
    background: var(--surface-secondary, #f8fafc);
}

.outdoor-task-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.outdoor-task-name {
    font-size: 13px;
    font-weight: 500;
}

.outdoor-task-name a {
    color: var(--text-primary, #111827);
    text-decoration: none;
}

.outdoor-task-name a:hover {
    color: var(--accent-color, #6366f1);
    text-decoration: underline;
}

.outdoor-task-dates {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: 5px;
}

.outdoor-task-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-left: 12px;
}

.outdoor-task-status-text {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.outdoor-task-high .outdoor-task-status-text { color: #dc2626; }
.outdoor-task-medium .outdoor-task-status-text { color: #d97706; }
.outdoor-task-low .outdoor-task-status-text { color: var(--primary-color); }
.outdoor-task-rain .outdoor-task-status-text { color: #a58416; }
.outdoor-task-clear .outdoor-task-status-text { color: #059669; }
.outdoor-task-nodate .outdoor-task-status-text { color: var(--text-muted); }

/* Conflict detail pills under each task */
.outdoor-task-conflict-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 14px 8px 22px;
}

.outdoor-conflict-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
}

.outdoor-conflict-pill.severity-high {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.outdoor-conflict-pill.severity-medium {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.outdoor-conflict-pill.severity-low {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.outdoor-conflict-pill.rain-day {
    background: #fefce8;
    border: 1px solid #fde68a;
}

.outdoor-conflict-date {
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.outdoor-conflict-summary {
    color: var(--text-secondary, #374151);
}

/* =====================================================
   Sprint 7.8: Material Procurement Pipeline
   ===================================================== */

/* Material Library Config */
.material-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.material-library-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.material-library-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 16px;
}

.material-lib-tab {
    padding: 6px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.material-lib-tab:hover {
    background: var(--bg-tertiary, #e5e7eb);
}

.material-lib-tab.active {
    background: var(--bg-surface, #ffffff);
    color: var(--text-primary, #111827);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.material-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.material-search-row {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.material-search-row input,
.material-search-row select {
    max-width: 240px;
}

.material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.material-card {
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 10px;
    padding: 14px;
    background: var(--bg-surface, #ffffff);
    transition: box-shadow 0.15s ease;
}

.material-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.material-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.material-category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--accent-bg, #eff6ff);
    color: var(--accent-text, #1e40af);
}

.material-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    margin-bottom: 4px;
}

.material-card-sku {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}

.material-card-details {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary, #374151);
    margin-bottom: 4px;
}

.material-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-secondary, #f3f4f6);
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    background: var(--bg-secondary, #f9fafb);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary, #374151);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--border-primary, #e5e7eb);
}

.data-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
}

.data-table tbody tr:hover {
    background: var(--bg-hover, #f9fafb);
}

.data-table.compact-table thead th {
    padding: 6px 8px;
    font-size: 11px;
}

.data-table.compact-table tbody td {
    padding: 6px 8px;
    font-size: 12px;
}

.data-table .total-row td {
    border-top: 2px solid var(--border-primary, #e5e7eb);
    font-weight: 600;
    background: var(--bg-secondary, #f9fafb);
}

/* BOM Status Badges */
.bom-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-gray { background: #f3f4f6; color: var(--text-primary); }
.badge-blue { background: #dbeafe; color: var(--color-accent-hover); }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-yellow { background: #fefce8; color: #854d0e; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-dark-green { background: #bbf7d0; color: #14532d; }
.badge-red { background: #fee2e2; color: #991b1b; }

.badge-inactive {
    background: #f3f4f6;
    color: var(--text-muted);
    font-size: 10px;
    padding: 1px 6px;
}

.badge-preferred {
    background: #fef3c7;
    color: #b45309;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.btn-danger-outline {
    color: var(--danger-color);
    border-color: #fecaca;
}

.btn-danger-outline:hover {
    background: #fef2f2;
    border-color: var(--danger-color);
}

/* BOM Toolbar */
.bom-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.bom-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.bom-actions {
    display: flex;
    gap: 8px;
}

/* Project Material Dashboard */
.material-alerts-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.material-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.material-alert-badge.alert-overdue { background: #fee2e2; color: #991b1b; }
.material-alert-badge.alert-urgent { background: #fef3c7; color: #92400e; }
.material-alert-badge.alert-approaching { background: #fefce8; color: #854d0e; }

.material-summary-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.material-summary-stats .stat-card {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-primary, #e5e7eb);
    border-radius: 8px;
    text-align: center;
}

.material-summary-stats .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #111827);
}

.material-summary-stats .stat-label {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}

.alert-row-overdue td { background: rgba(254, 226, 226, 0.3); }
.alert-row-urgent td { background: rgba(254, 243, 199, 0.3); }
.alert-row-approaching td { background: rgba(254, 252, 232, 0.3); }

/* PO Info Grid */
.po-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.po-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.po-info-item label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
    letter-spacing: 0.3px;
}

.po-info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.po-info-value.po-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary, #2563eb);
}

.po-notes {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary, #374151);
}

.po-notes label { font-weight: 600; margin-right: 4px; }

.po-total-display {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary, #2563eb);
    padding: 8px 0;
}

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

.delivery-header h4 { margin: 0; font-size: 15px; }

.delivery-qty-input {
    width: 80px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
}

.po-link {
    color: var(--accent-primary, #2563eb);
    text-decoration: none;
    font-weight: 500;
}

.po-link:hover { text-decoration: underline; }

.star-rating { color: #f59e0b; font-size: 12px; }
.star-rating .far.fa-star { color: #d1d5db; }
.star-rating .rating-number {
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    margin-left: 4px;
}

.text-success { color: #059669; }
.text-warning { color: #d97706; }
.text-danger { color: #dc2626; }
.text-muted { color: var(--text-secondary, #6b7280); }

/* ===========================================
   Service Provider Manager (Sprint 7.9)
   =========================================== */

.service-provider-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    padding-bottom: 0;
}

.sp-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, border-color 0.2s;
}

.sp-tab:hover {
    color: var(--text-primary, #1f2937);
}

.sp-tab.active {
    color: var(--primary, #3b82f6);
    border-bottom-color: var(--primary, #3b82f6);
}

.sp-form-container {
    padding: 16px;
    background: var(--card-bg, #fff);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
}

/* ===========================================
   Contract & Vendor Invoice Lists (Sprint 7.9)
   =========================================== */

.contract-list-item,
.vendor-invoice-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.contract-list-item:hover,
.vendor-invoice-list-item:hover {
    background: var(--hover-bg, #f9fafb);
    border-color: var(--primary, #3b82f6);
}

.contract-list-item .item-info,
.vendor-invoice-list-item .item-info {
    flex: 1;
    min-width: 0;
}

.contract-list-item .item-title,
.vendor-invoice-list-item .item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contract-list-item .item-meta,
.vendor-invoice-list-item .item-meta {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
}

.contract-list-item .item-amount,
.vendor-invoice-list-item .item-amount {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-left: 12px;
    white-space: nowrap;
}

/* Contract status badges */
.contract-status {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 8px;
}

.contract-status.draft { background: #f3f4f6; color: var(--text-secondary); }
.contract-status.active { background: #dcfce7; color: #16a34a; }
.contract-status.completed { background: #dbeafe; color: var(--primary-color); }
.contract-status.terminated { background: #fef2f2; color: #dc2626; }
.contract-status.on-hold { background: #fef3c7; color: #d97706; }

/* Vendor invoice status badges */
.vi-status {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 8px;
}

.vi-status.received { background: #f3f4f6; color: var(--text-secondary); }
.vi-status.under-review { background: #fef3c7; color: #d97706; }
.vi-status.approved { background: #dbeafe; color: var(--primary-color); }
.vi-status.paid { background: #dcfce7; color: #16a34a; }
.vi-status.disputed { background: #fef2f2; color: #dc2626; }

/* ========================================
   Contract Billing Progress (Sprint 8G)
   ======================================== */

.billing-progress-bar {
    height: 6px;
    background: var(--bg-tertiary, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.billing-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    min-width: 0;
}

.billing-invoice-detail td {
    border-top: none !important;
}

.billing-invoice-detail table {
    border-collapse: collapse;
}

.billing-invoice-detail table th {
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    font-size: 10px;
    padding-bottom: 4px;
}

/* Contract picker in vendor invoice form (Sprint 8G) */
.contract-allocation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.contract-allocation-table th {
    background: var(--bg-secondary, #f9fafb);
    padding: 6px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.contract-allocation-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.contract-allocation-table input[type="number"] {
    width: 90px;
    text-align: right;
}

.contract-allocation-table input[type="number"]:disabled {
    background: var(--bg-tertiary, #f3f4f6);
    opacity: 0.5;
}

.allocation-total-row {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

/* Financial subsection in Work & Budget */
.financial-subsection {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.financial-subsection h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.financial-subsection h4 i {
    color: var(--primary, #3b82f6);
    font-size: 14px;
}

/* Construction Register tab styles */
.construction-category-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    padding-bottom: 0;
}

.category-tab-btn {
    padding: 8px 14px;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, border-color 0.2s;
}

.category-tab-btn:hover {
    color: var(--text-primary, #1f2937);
}

.category-tab-btn.active {
    color: var(--primary, #3b82f6);
    border-bottom-color: var(--primary, #3b82f6);
}

/* ===========================================
   Task Detail Modal Header Redesign (Sprint 7.9)
   =========================================== */

.task-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px !important;
}

.task-header-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-header-main h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary, #3b82f6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-type-badge i {
    font-size: 10px;
}

.task-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border-color, #e5e7eb);
    white-space: nowrap;
}

.meta-pill i {
    font-size: 11px;
}

.meta-pill.status-pill {
    font-weight: 600;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted, #9ca3af);
}

.status-dot.not-started { background: #9ca3af; }
.status-dot.in-progress { background: var(--color-info); }
.status-dot.complete { background: #16a34a; }
.status-dot.on-hold { background: #d97706; }
.status-dot.cancelled { background: #dc2626; }

.meta-pill.priority-high { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.meta-pill.priority-critical { color: #991b1b; border-color: #fca5a5; background: #fee2e2; }
.meta-pill.priority-medium { color: #d97706; border-color: #fde68a; background: #fef3c7; }
.meta-pill.priority-low { color: #16a34a; border-color: #bbf7d0; background: #dcfce7; }

.meta-pill.date-overdue { color: #dc2626; border-color: #fecaca; background: #fef2f2; }

/* ============================================================================
   TASK DETAIL MODAL — POLISH PASS (Sprint 7.9)
   Refined utilitarian aesthetic: reduce visual weight, unify surfaces,
   improve spacing rhythm, contemporary SaaS feel.
   CSS-only — no HTML/ID/class changes.
   ============================================================================ */

/* --- Modal Shell ---
   Softer shadow, slightly rounded corners, smoother backdrop */
#taskDetailModal .modal-content {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
    border: none;
}

/* --- Header ---
   Cleaner separation, better vertical rhythm, refined close button */
#taskDetailModal .modal-header.task-detail-header {
    padding: 20px 24px 16px !important;
    border-bottom: none;
    background: var(--bg-white);
    gap: 16px;
}

#taskDetailModal .task-header-main {
    gap: 6px;
}

#taskDetailModal .task-header-main h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-dark);
}

#taskDetailModal .task-type-badge {
    font-size: 10px;
    letter-spacing: 0.8px;
    opacity: 0.7;
}

/* Meta pills — lighter, more refined */
#taskDetailModal .task-header-meta {
    gap: 6px;
}

#taskDetailModal .meta-pill {
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    transition: background 0.15s ease;
}

#taskDetailModal .meta-pill i {
    font-size: 10px;
    opacity: 0.7;
}

/* Close button — subtle circle hover */
#taskDetailModal .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
    color: var(--text-light);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

#taskDetailModal .modal-close:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* --- Phase Stepper ---
   Flatten the gradient, reduce visual weight */
#taskDetailModal .phase-stepper {
    background: var(--bg-light);
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-color);
}

#taskDetailModal .phase-step-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
    border-width: 1.5px;
}

#taskDetailModal .phase-step-label {
    font-size: 10px;
}

#taskDetailModal .phase-step-connector {
    height: 1.5px;
    margin-bottom: 18px;
}

/* --- Tab Navigation ---
   Connected tab-panel design: active group tab flows into
   the child tab bar below. Inspired by department-store navigation. */
#taskDetailModal .modal-tabs {
    background: #eef0f4;
    border-bottom: 2px solid var(--primary-dark);
    padding: 10px 16px 0;
}

/* Level 1: Tab Groups (Core / Planning / Construction)
   Top-level tabs sit on the gray surface, indented to align
   with the child bar's left edge. */
#taskDetailModal .tab-group-list {
    background: transparent;
    border-bottom: none;
    padding: 0 0 0 16px;
    gap: 0;
    display: flex;
    position: relative;
    z-index: 2;
}

#taskDetailModal .tab-group-btn {
    flex: 0 0 auto;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-light);
    background: #e1e4ea;
    border: 1px solid #d0d4dc;
    border-bottom: 1px solid #d0d4dc;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    margin-right: -1px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    position: relative;
    text-transform: uppercase;
}

#taskDetailModal .tab-group-btn:hover {
    background: #e8eaef;
    color: var(--text-dark);
}

#taskDetailModal .tab-group-btn.active {
    background: var(--primary-dark);
    color: #ffffff;
    border-color: var(--primary-dark);
    z-index: 3;
}

#taskDetailModal .tab-group-btn i {
    font-size: 12px;
}

#taskDetailModal .tab-group-btn.active i {
    opacity: 1;
}

/* Level 2: Child Tabs (Details / Work & Budget / etc.)
   Colored bar that connects to the active group tab above.
   Rounded top corners, slightly inset so group bg peeks over edges. */
#taskDetailModal .tab-child-list {
    background: var(--primary-dark);
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 3px 3px 0;
    gap: 0;
    display: flex;
    margin: 0 4px;
    position: relative;
    z-index: 1;
}

#taskDetailModal .tab-btn {
    flex: 0 1 auto;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    transition: all 0.15s ease;
    position: relative;
}

#taskDetailModal .tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

#taskDetailModal .tab-btn.active {
    background: var(--bg-white);
    color: var(--text-dark);
    font-weight: 500;
}

/* Pointed tab indicator on active child tab */
#taskDetailModal .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 6px solid var(--bg-white);
    z-index: 4;
}

#taskDetailModal .tab-btn i {
    font-size: 12px;
    opacity: 0.75;
}

#taskDetailModal .tab-btn.active i {
    opacity: 1;
}

/* Level 3: Construction category sub-tabs (Documents / Field / etc.)
   Compact pill bar inside the content area */
.construction-category-tabs {
    display: flex !important;
    background: #eef0f4 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 3px !important;
    gap: 2px !important;
    margin-bottom: 16px !important;
}

.category-tab-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.category-tab-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-dark);
}

.category-tab-btn.active {
    background: var(--primary-dark);
    color: #ffffff;
}

/* --- Modal Body ---
   Better padding, smoother scroll, spacing for tab arrow */
#taskDetailModal .modal-body {
    padding: 24px;
    padding-top: 28px;
    background: var(--bg-white);
}

/* --- Form Sections ---
   Lighter dividers, better heading style */
#taskDetailModal .form-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f4;
}

#taskDetailModal .form-section h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 16px;
}

/* --- Form Controls ---
   Softer borders, refined focus state */
#taskDetailModal .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 5px;
}

#taskDetailModal .form-control {
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13.5px;
    border-color: #e0e4ea;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#taskDetailModal .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* --- Data Tables (inside modal) ---
   Cleaner, less heavy headers */
#taskDetailModal .data-table th {
    background: var(--bg-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-light);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

#taskDetailModal .data-table td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f8;
}

#taskDetailModal .data-table tr:last-child td {
    border-bottom: none;
}

#taskDetailModal .data-table tr:hover td {
    background: #fafbfd;
}

/* --- Footer ---
   Cleaner separation, less shadow weight */
#taskDetailModal .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    box-shadow: none;
    background: var(--bg-light);
    gap: 8px;
}

#taskDetailModal .modal-footer .btn {
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 16px;
}

/* --- Extension Sections (Checklist, Approval, etc.) ---
   Cards within tabs get subtle elevation */
#taskDetailModal .extension-section-header h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-light);
}

/* --- Financial Subsections --- */
#taskDetailModal .financial-subsection {
    border-radius: 8px;
}

/* ============================================================================
   SERVICE PROVIDER LIBRARY MODAL — POLISH (Sprint 7.9)
   ============================================================================ */

#serviceProviderLibraryModal .modal-content {
    max-width: 960px;
    height: 80vh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

#serviceProviderLibraryModal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

#serviceProviderLibraryModal .modal-header h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

#serviceProviderLibraryModal .modal-header h2 i {
    color: var(--primary-color);
    margin-right: 4px;
}

#serviceProviderLibraryModal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
}

#serviceProviderLibraryModal .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
    transition: all 0.15s ease;
}

#serviceProviderLibraryModal .modal-close:hover {
    background: var(--bg-light);
}

/* SP Library Tabs — pill-style like Material Library */
.sp-library-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 20px;
}

.sp-lib-tab {
    padding: 7px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    transition: all 0.15s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-lib-tab:hover {
    background: var(--bg-tertiary, #e5e7eb);
}

.sp-lib-tab.active {
    background: var(--bg-white, #ffffff);
    color: var(--text-primary, #111827);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sp-lib-tab i {
    font-size: 13px;
    opacity: 0.7;
}

.sp-lib-tab.active i {
    opacity: 1;
}

/* ============================================================================
   MATERIAL LIBRARY MODAL — POLISH ALIGNMENT (Sprint 7.9)
   Keep consistent with task detail modal refinements
   ============================================================================ */

#materialLibraryModal .modal-content {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

#materialLibraryModal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

#materialLibraryModal .modal-header h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

#materialLibraryModal .modal-header h2 i {
    color: var(--primary-color);
    margin-right: 4px;
}

#materialLibraryModal .modal-body {
    padding: 20px 24px;
}

#materialLibraryModal .modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
    transition: all 0.15s ease;
}

#materialLibraryModal .modal-close:hover {
    background: var(--bg-light);
}

/* ============================================================
   Sprint 7.10: Task Deliverables
   ============================================================ */

/* Header */
.deliverables-header {
    margin-bottom: 16px;
}

.deliverables-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.deliverables-title-row h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Progress bar */
.deliverables-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.progress-bar-container {
    flex: 1;
    height: 8px;
    background: var(--bg-light, #e9ecef);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--success-color, #28a745);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    white-space: nowrap;
}

/* Table */
.deliverables-table-wrapper {
    overflow-x: auto;
}

.deliverable-row.overdue-row {
    background: rgba(220, 53, 69, 0.05);
}

.deliverable-name.clickable {
    color: var(--primary-color, #0066cc);
    cursor: pointer;
    font-weight: 500;
}

.deliverable-name.clickable:hover {
    text-decoration: underline;
}

.deliverable-desc {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 2px;
}

.action-cell {
    white-space: nowrap;
}

.action-cell .btn-xs {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1;
    min-width: 0;
    border-radius: 3px;
}

/* Type badges */
.deliverable-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary, #666);
}

.deliverable-type-badge i {
    font-size: 10px;
}

/* Waived badge: strikethrough */
.badge-muted {
    background: var(--bg-light, #e9ecef);
    color: var(--text-muted, #999);
    text-decoration: line-through;
}

/* Summary stats row (project view) */
.deliverable-summary-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.deliverable-summary-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.deliverable-summary-stats .stat-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary, #333);
}

.deliverable-summary-stats .stat-label {
    font-size: 11px;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deliverable-summary-stats .stat-danger .stat-value {
    color: var(--danger-color, #dc3545);
}

.deliverable-summary-stats .stat-warning .stat-value {
    color: var(--warning-color, #ffc107);
}

.summary-row {
    background: var(--bg-light, #f8f9fa);
    border-top: 2px solid var(--border-color, #dee2e6);
}

/* Badge large variant */
.badge-lg {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
}

/* Detail view grid */
.deliverable-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.deliverable-detail-grid .detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deliverable-detail-grid .detail-full {
    grid-column: 1 / -1;
}

.deliverable-detail-grid .detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #666);
}

.deliverable-description-section,
.deliverable-review-section,
.deliverable-actions-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #dee2e6);
}

.deliverable-description-section h4,
.deliverable-review-section h4,
.deliverable-actions-section h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary, #666);
}

.deliverable-actions-section .action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Font helpers */
.font-bold {
    font-weight: 600;
}

/* Required asterisk */
.text-danger {
    color: var(--danger-color, #dc3545);
}

.fa-asterisk.text-danger {
    font-size: 8px;
    vertical-align: super;
}

/* ===================================================
   Sprint 7.11: Test Plan Styles
   =================================================== */

/* Status Banner */
.test-plan-status-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.test-plan-status-banner.status-not-tested {
    background: var(--bg-secondary, #f0f0f0);
    color: var(--text-muted, #6c757d);
}

.test-plan-status-banner.status-in-progress {
    background: #e8f4fd;
    color: #0077b6;
}

.test-plan-status-banner.status-pass {
    background: #d4edda;
    color: #155724;
}

.test-plan-status-banner.status-fail {
    background: #f8d7da;
    color: #721c24;
}

.test-plan-status-banner.status-conditional {
    background: #fff3cd;
    color: #856404;
}

.test-plan-status-banner.status-waived {
    background: var(--bg-secondary, #f0f0f0);
    color: var(--text-muted, #6c757d);
    font-style: italic;
}

/* Header */
.test-plan-header {
    margin-bottom: 16px;
}

.test-plan-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.test-plan-title-row h3 {
    margin: 0;
    font-size: 16px;
}

.test-plan-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.test-plan-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted, #6c757d);
    margin-bottom: 10px;
}

.test-plan-meta i {
    margin-right: 4px;
}

/* Summary Bar */
.test-plan-summary-bar {
    display: flex;
    gap: 16px;
    padding: 8px 12px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 4px;
    font-size: 13px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.summary-pass { color: #28a745; }
.summary-fail { color: #dc3545; }
.summary-pending { color: var(--text-muted, #6c757d); }

/* Conditions Table */
.test-plan-conditions-table {
    margin-top: 12px;
}

.test-plan-conditions-table .data-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.condition-row {
    transition: background 0.15s;
}

.condition-row:hover {
    background: var(--bg-secondary, #f8f9fa);
}

.condition-fail-row {
    background: #fff5f5 !important;
}

.condition-name {
    font-weight: 500;
}

.condition-desc {
    font-size: 12px;
    margin-top: 2px;
}

.threshold-type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-secondary, #e9ecef);
    color: var(--text-secondary, #495057);
}

/* Range Bar Visualization */
.range-bar-row td {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    border-top: none !important;
}

.range-bar-visual {
    position: relative;
    height: 32px;
    max-width: 400px;
}

.range-bar-track {
    position: relative;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin-top: 4px;
}

.range-bar-acceptable {
    position: absolute;
    height: 100%;
    background: #c3e6cb;
    border-radius: 4px;
}

.range-bar-expected {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    background: var(--text-secondary);
    transform: translateX(-50%);
}

.range-bar-observed {
    position: absolute;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translateX(-50%);
    z-index: 1;
}

.range-bar-observed.observed-pass {
    background: #28a745;
}

.range-bar-observed.observed-fail {
    background: #dc3545;
}

.range-bar-labels {
    position: relative;
    height: 18px;
    font-size: 10px;
    color: var(--text-muted, #6c757d);
    margin-top: 2px;
}

.range-bar-labels > span {
    position: absolute;
    transform: translateX(-50%);
}

.range-bar-labels .observed-label {
    font-weight: 600;
    font-size: 11px;
    top: -2px;
}

.range-bar-labels .label-pass { color: #28a745; }
.range-bar-labels .label-fail { color: #dc3545; }

/* Record Observation Form */
.record-condition-info {
    padding: 12px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 6px;
    margin-bottom: 16px;
}

.record-condition-info h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
}

.record-expected-info {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary, #495057);
    margin-top: 8px;
}

.pass-fail-toggle {
    display: flex;
    gap: 8px;
}

.pass-fail-toggle button {
    flex: 1;
    padding: 10px;
    font-size: 14px;
}

.numeric-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.numeric-input-row .form-control {
    flex: 1;
}

.input-unit {
    font-size: 13px;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
}

.range-hint {
    font-size: 12px;
    color: var(--text-muted, #6c757d);
    margin-top: 4px;
}

.range-hint i {
    margin-right: 4px;
    color: #0077b6;
}

/* Project Summary Stats */
.test-plan-project-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.test-plan-project-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 6px;
    min-width: 70px;
}

.test-plan-project-stats .stat-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.test-plan-project-stats .stat-label {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.test-plan-project-stats .stat-pass .stat-value { color: #28a745; }
.test-plan-project-stats .stat-fail .stat-value { color: #dc3545; }
.test-plan-project-stats .stat-conditional .stat-value { color: #ffc107; }

.test-plan-project-table {
    margin-top: 16px;
}

/* Failing Conditions Section */
.test-plan-failing-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, #dee2e6);
}

.test-plan-failing-section h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #dc3545;
}

.test-plan-failing-section h4 i {
    margin-right: 6px;
}

/* Review Notes */
.test-plan-review-notes {
    margin-top: 16px;
    padding: 12px;
    background: #fffde7;
    border-radius: 6px;
    border-left: 3px solid #ffc107;
}

.test-plan-review-notes h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #856404;
}

.test-plan-review-notes p {
    margin: 0;
    font-size: 13px;
}

/* Italic text helper */
.italic {
    font-style: italic;
}

/* =============================================
   Sprint 7.11b: Observation History & Failure Reports
   ============================================= */

/* Observation History Panel */
.observation-history-row td {
    padding: 0 !important;
}

.observation-history-panel {
    background: var(--bg-secondary, #f8f9fa);
    border-left: 3px solid #0077b6;
    padding: 8px 12px;
    margin: 4px 0;
}

.observation-history-table {
    font-size: 12px;
}

.observation-history-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Condition Indicators (lock / warning icons) */
.condition-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: pointer;
    font-size: 13px;
    vertical-align: middle;
}

.condition-indicator.condition-blocked {
    color: #dc3545;
}

.condition-indicator.condition-blocked:hover {
    color: #a71d2a;
}

.condition-indicator.condition-warning {
    color: #e67e22;
}

.condition-indicator.condition-warning:hover {
    color: #c0641a;
}

/* Failure Report Card */
.failure-report-card {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.failure-report-card .fr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.failure-report-card.severity-critical .fr-header {
    background: #fdf0f0;
    border-left: 4px solid #dc3545;
}

.failure-report-card.severity-major .fr-header {
    background: #fff8e1;
    border-left: 4px solid #ffc107;
}

.failure-report-card.severity-minor .fr-header {
    background: #e8f4fd;
    border-left: 4px solid #0077b6;
}

.fr-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fr-severity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fr-severity-badge.severity-critical {
    background: #dc3545;
    color: #fff;
}

.fr-severity-badge.severity-major {
    background: #ffc107;
    color: var(--text-primary);
}

.fr-severity-badge.severity-minor {
    background: #0077b6;
    color: #fff;
}

.fr-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-secondary, #e9ecef);
    color: var(--text-secondary, #495057);
}

.fr-blocking-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #dc3545;
    color: #fff;
}

.fr-id {
    font-size: 12px;
    color: var(--text-muted, #6c757d);
    font-weight: 500;
}

.fr-body {
    padding: 14px;
}

.fr-field {
    margin-bottom: 10px;
}

.fr-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted, #6c757d);
    margin-bottom: 3px;
}

.fr-field p {
    margin: 0;
    font-size: 13px;
}

.fr-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fr-meta {
    font-size: 12px;
    margin-top: 6px;
}

.fr-meta i {
    margin-right: 4px;
}

.fr-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color, #dee2e6);
    background: var(--bg-secondary, #f8f9fa);
}

.form-control-sm {
    font-size: 13px;
    padding: 4px 8px;
}

/* =============================================
   Sprint 7.11c: Action Items in Failure Reports
   ============================================= */

.fr-action-items-section {
    margin-top: 12px;
    border-top: 1px dashed var(--border-color, #dee2e6);
    padding-top: 10px;
}

.fr-action-items-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.fr-action-items-header label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted, #6c757d);
    margin: 0;
    flex: 1;
}

.fr-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    background: var(--bg-secondary, #f8f9fa);
    margin-bottom: 4px;
    font-size: 13px;
}

.fr-ai-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 60px;
    text-align: center;
}

.fr-ai-status.ai-status-resolved {
    background: #28a745;
    color: #fff;
}

.fr-ai-status.ai-status-active {
    background: #0077b6;
    color: #fff;
}

.fr-ai-status.ai-status-open {
    background: var(--bg-secondary, #e9ecef);
    color: var(--text-secondary, #495057);
}

.fr-ai-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-ai-name-link {
    color: var(--primary, #4a90d9);
    text-decoration: none;
    cursor: pointer;
}

.fr-ai-name-link:hover {
    color: var(--primary-dark, #357abd);
    text-decoration: underline;
}

.fr-ai-type {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
}

.fr-ai-assignee {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
}

.fr-ai-assignee i {
    margin-right: 2px;
}

/* Linkable task picker */
.fr-linkable-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.fr-linkable-task:hover {
    background: var(--bg-hover, #e9ecef);
}

/* Gate override modal styles */
.modal-header-warning {
    background: #fff3cd;
    border-bottom-color: #ffc107;
}

.gate-warning-message {
    background: #fff8e1;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.gate-warning-text {
    color: #856404;
    font-weight: 500;
}

.gate-warning-text i {
    margin-right: 4px;
    color: #e67e22;
}

/* Override history */
.fr-override-history {
    margin-top: 10px;
    border-top: 1px dashed var(--border-color, #dee2e6);
    padding-top: 8px;
}

.fr-override-history > label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #e67e22;
    margin-bottom: 4px;
}

.fr-override-entry {
    display: flex;
    gap: 8px;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px dotted var(--border-color, #dee2e6);
}

.fr-override-transition {
    font-weight: 600;
    color: #856404;
    min-width: 120px;
}

.fr-override-reason {
    flex: 1;
    color: var(--text-secondary, #495057);
}

.fr-override-date {
    color: var(--text-muted, #6c757d);
    font-size: 11px;
    white-space: nowrap;
}

/* ============================================================
   Sprint 7.12: Org Map View & Project Locations
   ============================================================ */

/* Map View Container */
.map-view-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    min-height: 500px;
}

.map-view-layout {
    display: flex;
    flex: 1;
    gap: 0;
    height: 100%;
    overflow: hidden;
}

/* Map Sidebar */
.map-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--card-bg, #fff);
    border-right: 1px solid var(--border-color, #dee2e6);
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.map-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-sidebar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #495057);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-filter-radios {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-radio-label,
.map-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary, #212529);
    cursor: pointer;
    padding: 2px 0;
}

.map-radio-label input,
.map-checkbox-label input {
    margin: 0;
    cursor: pointer;
}

.map-no-location-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.map-no-location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    font-size: 12px;
    background: var(--bg-light, #f8f9fa);
    border-radius: 4px;
}

.map-no-location-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.map-no-location-item .btn {
    font-size: 11px;
    padding: 2px 6px;
    flex-shrink: 0;
    margin-left: 6px;
}

/* Map Main Area */
.map-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.org-map-container {
    flex: 1;
    min-height: 400px;
    z-index: 1;
}

.map-status-bar {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-secondary, #495057);
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border-color, #dee2e6);
}

/* Map Marker Pin */
.map-project-marker {
    background: transparent;
    border: none;
}

.map-marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.map-marker-pin i {
    transform: rotate(45deg);
}

/* Site Map Project Location Marker */
.site-map-project-marker {
    background: transparent;
    border: none;
}

.site-map-project-pin {
    width: 30px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e53935;
    font-size: 30px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Map Popup */
.map-popup {
    min-width: 200px;
    max-width: 280px;
    font-size: 13px;
}

.map-popup-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #212529);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.map-popup-row {
    display: flex;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
}

.map-popup-label {
    font-weight: 600;
    color: var(--text-secondary, #495057);
    min-width: 60px;
}

.map-popup-status {
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
}

.map-popup-status.in-progress {
    background: #e3f2fd;
    color: #1565c0;
}

.map-popup-status.complete {
    background: #e8f5e9;
    color: #2e7d32;
}

.map-popup-status.not-started {
    background: #fff3e0;
    color: #e65100;
}

.map-popup-actions {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color, #dee2e6);
    display: flex;
    gap: 6px;
}

/* Set Location Modal */
.location-search-results {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    margin-bottom: 12px;
}

.location-search-loading,
.location-search-empty {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #495057);
}

.location-search-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    transition: background 0.15s;
}

.location-search-item:last-child {
    border-bottom: none;
}

.location-search-item:hover {
    background: var(--bg-hover, #f0f4f8);
}

.location-search-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #212529);
}

.location-search-item-name i {
    color: var(--primary-color, #4a90d9);
    margin-right: 6px;
}

.location-search-item-coords {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    margin-top: 2px;
    margin-left: 22px;
}

.location-map-preview {
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--border-color, #dee2e6);
}

.location-selected-info {
    padding: 8px 12px;
    background: var(--bg-light, #f8f9fa);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary, #495057);
    margin-bottom: 12px;
}

.location-selected-info::before {
    content: '\f3c5';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 6px;
    color: var(--primary-color, #4a90d9);
}

/* Leaflet.markercluster overrides for theme consistency */
.marker-cluster-small {
    background-color: rgba(74, 144, 217, 0.4);
}

.marker-cluster-small div {
    background-color: rgba(74, 144, 217, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.marker-cluster-medium {
    background-color: rgba(255, 152, 0, 0.4);
}

.marker-cluster-medium div {
    background-color: rgba(255, 152, 0, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.marker-cluster-large {
    background-color: rgba(76, 175, 80, 0.4);
}

.marker-cluster-large div {
    background-color: rgba(76, 175, 80, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   Site Map Tab (Sprint 7.12 — Phase D)
   ============================================================ */

.site-map-layout {
    display: flex;
    gap: 0;
    height: 500px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
}

.site-map-sidebar {
    width: 200px;
    min-width: 200px;
    background: var(--bg-light, #f8f9fa);
    border-right: 1px solid var(--border-color, #dee2e6);
    display: flex;
    flex-direction: column;
    padding: 8px;
    overflow-y: auto;
}

.site-map-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    margin-bottom: 4px;
}

.site-map-sidebar-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #6c757d);
}

.site-map-sidebar-divider {
    height: 1px;
    background: var(--border-color, #dee2e6);
    margin: 8px 0;
}

/* Layer list */
.site-map-layers-list {
    flex: 1;
    overflow-y: auto;
}

.site-map-empty-layers {
    font-size: 12px;
    color: var(--text-muted, #6c757d);
    text-align: center;
    padding: 16px 8px;
}

.site-map-layer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: default;
    transition: background 0.15s;
}

.site-map-layer-item:hover {
    background: var(--bg-hover, #e9ecef);
}

.site-map-layer-item.active {
    background: var(--primary-bg, #e3f2fd);
    border-left: 3px solid var(--primary-color, #4a90d9);
    padding-left: 3px;
}

.site-map-layer-check {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-map-layer-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.site-map-layer-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.site-map-layer-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.site-map-layer-name:hover {
    color: var(--primary-color, #4a90d9);
}

.site-map-layer-edit-btn {
    background: none;
    border: none;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s;
}

.site-map-layer-item:hover .site-map-layer-edit-btn {
    opacity: 1;
}

.site-map-layer-edit-btn:hover {
    background: var(--bg-hover, #e9ecef);
    color: var(--text-primary, #212529);
}

/* Overlays section */
.site-map-overlays {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-map-overlay-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #495057);
    cursor: pointer;
    padding: 2px 0;
}

.site-map-overlay-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Map main area */
.site-map-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.site-map-container {
    flex: 1;
    min-height: 400px;
    position: relative;
}

/* No-location overlay on site map */
.site-map-no-location-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    z-index: 500;
    pointer-events: auto;
}

.site-map-no-location-content {
    text-align: center;
    color: var(--text-muted, #6c757d);
}

.site-map-no-location-content i {
    font-size: 40px;
    margin-bottom: 10px;
    color: var(--text-light, #adb5bd);
}

.site-map-no-location-content p {
    margin: 0 0 12px;
    font-size: 14px;
}

/* Draw toolbar info bar */
.site-map-draw-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--primary-bg, #e3f2fd);
    border-top: 1px solid var(--primary-color, #4a90d9);
    font-size: 12px;
    color: var(--text-primary, #212529);
}

.site-map-draw-label {
    font-size: 12px;
}

.site-map-draw-label strong {
    color: var(--primary-color, #4a90d9);
}

.site-map-draw-hint {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    margin-left: auto;
}

/* Overlay marker icons */
.site-map-overlay-marker {
    background: transparent !important;
    border: none !important;
}

.site-map-marker-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
}

/* Overlay popup */
.site-map-overlay-popup {
    min-width: 140px;
}

.site-map-overlay-popup-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #6c757d);
    margin-bottom: 2px;
}

.site-map-overlay-popup-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #212529);
    margin-bottom: 4px;
}

.site-map-popup-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-light, #f0f4f8);
    color: var(--text-secondary, #495057);
}

/* Leaflet.draw toolbar overrides for consistent theme */
.leaflet-draw-toolbar a {
    border-radius: 4px !important;
}

.leaflet-draw-actions a {
    font-size: 12px !important;
    border-radius: 3px !important;
}

/* ========== Import Preview Styles (Sprint 7.12 Phase E) ========== */

.import-preview-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary, #6c757d);
    font-size: 13px;
}

.import-preview-loading i {
    margin-right: 6px;
}

.import-preview-error {
    padding: 12px;
    background: var(--bg-danger-light, #fdf0f0);
    color: var(--text-danger, #dc3545);
    border-radius: 6px;
    font-size: 13px;
    margin-top: 8px;
}

.import-preview-error i {
    margin-right: 6px;
}

.import-preview-info {
    padding: 12px;
    background: var(--bg-light, #f0f4f8);
    border-radius: 6px;
    margin-top: 8px;
}

.import-preview-file {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #212529);
    margin-bottom: 6px;
}

.import-preview-file i {
    margin-right: 6px;
    color: var(--primary, #4a90d9);
}

.import-preview-stats {
    font-size: 12px;
    color: var(--text-secondary, #6c757d);
    display: flex;
    gap: 8px;
    align-items: center;
}

.import-preview-types {
    color: var(--text-muted, #adb5bd);
}

.import-preview-warnings {
    margin-top: 8px;
}

.import-preview-warning {
    font-size: 12px;
    color: var(--text-warning, #e67e22);
    padding: 2px 0;
}

.import-preview-warning i {
    margin-right: 4px;
}

/* Import Locations Table */

.import-locations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-primary, #212529);
}

.import-locations-actions {
    display: flex;
    gap: 6px;
}

.import-locations-table-wrap {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #d1d9e0);
    border-radius: 6px;
}

.import-locations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.import-locations-table th {
    position: sticky;
    top: 0;
    background: var(--bg-light, #f0f4f8);
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary, #6c757d);
    border-bottom: 1px solid var(--border-color, #d1d9e0);
}

.import-locations-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-light, #eef1f5);
    color: var(--text-primary, #212529);
}

.import-locations-table tbody tr:hover {
    background: var(--bg-hover, #f5f8fa);
}

.import-action-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}

.import-action-update {
    background: var(--bg-info-light, #e8f4fd);
    color: var(--primary, #4a90d9);
}

.import-action-create {
    background: var(--bg-success-light, #edf7ed);
    color: var(--success, #28a745);
}

.import-action-skip {
    background: var(--bg-light, #f0f4f8);
    color: var(--text-muted, #adb5bd);
}

.import-locations-summary {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary, #6c757d);
    text-align: right;
}

/* ================================================================
   Project Setup Wizard (Sprint 5R)
   ================================================================ */

/* Wizard sidebar */
.setup-wizard-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
    padding: 16px 0;
    overflow-y: auto;
}

.setup-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    transition: background 0.15s;
}

.setup-sidebar-item:hover {
    background: var(--bg-hover);
}

.setup-sidebar-item.active {
    background: var(--bg-hover);
    color: var(--primary-color);
    font-weight: 600;
    border-left: 3px solid var(--primary-color);
    padding-left: 13px;
}

.setup-sidebar-item.complete {
    color: var(--success-color);
}

.setup-sidebar-item.skipped {
    color: var(--text-muted);
    font-style: italic;
}

.setup-sidebar-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.setup-sidebar-label {
    flex: 1;
}

.setup-sidebar-status {
    flex-shrink: 0;
    font-size: 12px;
}

/* Project Setup Wizard modal — uses modal-flex but body is a flex row (sidebar | content).
   Override modal-flex's body overflow so only the content area scrolls, not the body. */
#projectSetupModal .modal-body {
    overflow: hidden;
    min-height: 0;
}

/* Wizard content area */
.setup-wizard-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    min-height: 0;
}

.setup-section h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--text-primary);
}

.setup-section h3 i {
    margin-right: 8px;
    color: var(--primary-color);
}

.setup-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.setup-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 20px 0;
}

.setup-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.setup-empty-state i {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.setup-empty-hint {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    padding: 12px 0;
}

/* WBS Tree Builder */
.setup-wbs-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.setup-wbs-tree {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    min-height: 100px;
    background: var(--bg-light);
}

.wbs-item {
    margin-bottom: 2px;
}

.wbs-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.wbs-item-row:hover {
    border-color: var(--primary-color);
}

.wbs-item-grip {
    cursor: grab;
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.wbs-item-expand {
    cursor: pointer;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-secondary, #64748b);
    font-size: 11px;
}

.wbs-item-expand.invisible {
    visibility: hidden;
}

.wbs-item-number {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 28px;
    flex-shrink: 0;
}

.wbs-item-name {
    flex: 1;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 13px;
    background: transparent;
    font-family: inherit;
}

.wbs-item-name:focus {
    border-color: var(--primary-color);
    outline: none;
    background: var(--bg-primary);
}

.wbs-item-type {
    width: 100px;
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-primary);
    flex-shrink: 0;
}

.wbs-children {
    padding-left: 4px;
}

.wbs-item-details {
    padding: 8px 8px 8px 32px;
}

.wbs-item-details .form-row {
    margin-bottom: 0;
    gap: 8px;
}

.wbs-item-details .form-group {
    margin-bottom: 0;
}

.wbs-item-details label {
    font-size: 11px;
    margin-bottom: 3px;
}

/* Team section */
.setup-team-add {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.setup-team-add select,
.setup-team-add input {
    flex: 1;
}

.setup-team-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setup-team-member {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.setup-team-member i {
    color: var(--primary-color);
    font-size: 18px;
}

.setup-team-name {
    flex: 1;
    font-weight: 500;
    font-size: 13px;
}

.setup-team-role {
    font-size: 12px;
    color: var(--text-muted);
}

/* Assignment table */
.setup-assignment-table .data-table {
    font-size: 13px;
}

.setup-assign-select {
    min-width: 140px;
}

.wbs-tree-connector {
    display: inline-block;
    width: 12px;
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    height: 10px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Milestone rows */
.setup-milestone-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Budget section */
.setup-budget-display {
    padding: 10px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.setup-budget-calc {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 16px;
}

.setup-budget-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.setup-budget-calc-row .setup-budget-amount {
    font-family: var(--font-mono, monospace);
    min-width: 100px;
    text-align: right;
}

.setup-budget-calc-subtotal {
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
    padding-top: 8px;
}

.setup-budget-calc-total {
    border-top: 2px solid var(--primary-color);
    margin-top: 4px;
    padding-top: 8px;
    font-size: 14px;
    color: var(--primary-color);
}

.budget-unalloc-row td {
    font-style: italic;
    color: var(--text-muted);
}

/* Fixed cost rows */
.setup-fixed-cost-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Compliance section */
.setup-compliance-group {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.setup-compliance-group h4 {
    margin-bottom: 12px;
}

.setup-compliance-group h4 i {
    margin-right: 6px;
    color: var(--primary-color);
}

.setup-compliance-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.setup-compliance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.setup-compliance-item:hover {
    border-color: var(--primary-color);
}

.setup-compliance-item input[type="checkbox"] {
    accent-color: var(--primary-color);
}

/* Compliance items with task assignment */
.setup-compliance-task-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setup-compliance-task-row {
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.setup-compliance-task-row:hover {
    border-color: var(--primary-color);
}

.setup-compliance-task-header {
    display: flex;
    align-items: center;
}

.setup-compliance-task-assign {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.setup-compliance-task-assign .setup-assign-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    margin: 0;
}

.setup-compliance-task-assign select {
    flex: 1;
}

.setup-hint-sm {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.setup-info-banner {
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--info-bg, #e7f3ff);
    border: 1px solid var(--info-border, #b8daff);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-color);
}

.setup-info-banner i {
    margin-right: 6px;
    color: var(--primary-color);
}

/* Contract rows */
.setup-contract-row {
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.setup-contract-row .form-row {
    margin-bottom: 0;
}

/* Review & Generation section */
.setup-review-row {
    cursor: pointer;
}

.setup-review-row:hover td {
    background: var(--bg-hover);
}

.setup-preview-panel {
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 20px;
}

.setup-preview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.setup-preview-stat {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 13px;
}

.setup-preview-stat strong {
    color: var(--primary-color);
    margin-right: 4px;
}

.setup-preview-tree {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.setup-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 13px;
}

.setup-preview-item i {
    color: var(--text-muted);
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.setup-preview-assign {
    font-size: 11px;
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
}

.setup-preview-dates {
    font-size: 11px;
    color: var(--text-muted);
}

.setup-generation-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.setup-option-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.setup-option-check input[type="checkbox"] {
    accent-color: var(--primary-color);
}

.setup-generate-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.setup-error {
    color: var(--danger-color, #ef4444);
    padding: 12px;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 4px;
    font-size: 13px;
}

/* Loading state */
.setup-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.setup-loading i {
    font-size: 20px;
    color: var(--primary-color);
}

/* Template picker */
.setup-start-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.setup-start-option:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.04);
}

.setup-start-option i {
    font-size: 28px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.setup-start-option strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.setup-start-option p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.setup-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.setup-template-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.setup-template-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.setup-template-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.setup-template-card-header i {
    color: var(--primary-color);
}

.setup-template-card-header strong {
    flex: 1;
    font-size: 14px;
}

.setup-template-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.setup-template-usage {
    font-size: 11px;
    color: var(--text-muted);
}

/* =============================================
   Vendor Directory (Sprint 8H)
   ============================================= */

.vendor-directory-toolbar {
    margin-bottom: 12px;
}

.vendor-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.vendor-search-row input[type="text"] {
    flex: 1;
}

.vendor-preferred-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.vendor-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.vendor-category-tab {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vendor-category-tab:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.vendor-category-tab.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.vendor-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--bg-primary);
}

.vendor-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.vendor-category-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

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

.vendor-card-info h4 {
    margin: 0 0 2px 0;
    font-size: 14px;
    color: var(--text-primary);
}

.vendor-card-info small {
    color: var(--text-muted);
    font-size: 12px;
}

.vendor-preferred-star {
    color: var(--warning-color);
    font-size: 13px;
    margin-left: 4px;
}

.vendor-insurance-warning {
    font-size: 11px;
    color: var(--warning);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

/* Vendor Detail View */

.vendor-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.vendor-detail-header h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
}

.vendor-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.vendor-detail-stats .stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vendor-detail-stats .stat-item .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.vendor-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 16px;
}

.vendor-detail-tabs button {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s ease;
}

.vendor-detail-tabs button:hover {
    color: var(--primary-color);
}

.vendor-detail-tabs button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* Vendor Picker */

.vendor-picker-search {
    margin-bottom: 12px;
}

.vendor-picker-list {
    max-height: 400px;
    overflow-y: auto;
}

.vendor-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vendor-picker-item:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
}

/* =============================================
   Contractor Scorecards (Sprint 8B)
   ============================================= */

/* Scorecard Header Layout */
.scorecard-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.scorecard-overall {
    text-align: center;
    min-width: 80px;
}

.scorecard-overall-score {
    font-size: 28px;
    font-weight: 700;
    border-radius: 12px;
    padding: 8px 14px;
    display: inline-block;
}

.scorecard-overall-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.scorecard-radar-container {
    flex-shrink: 0;
}

.scorecard-dimension-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.scorecard-dimension {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

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

/* Score Badges */
.score-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    min-width: 36px;
    text-align: center;
}

.score-badge.sm {
    padding: 2px 6px;
    font-size: 11px;
    min-width: 28px;
    border-radius: 8px;
}

.score-badge.excellent {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.score-badge.good {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.score-badge.average {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.score-badge.poor {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

/* Review Cards */
.review-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}

.review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.review-period {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 8px;
}

.review-project {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 8px;
}

.review-scores {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.review-score-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.review-score-item .dim-label {
    font-size: 11px;
    color: var(--text-muted);
}

.review-notes {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light, #f0f0f0);
}

.review-reviewer {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Score Sliders */
.score-sliders {
    margin: 12px 0;
}

.score-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.score-slider-row label {
    min-width: 110px;
    font-size: 13px;
    font-weight: 500;
}

.score-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    outline: none;
}

.score-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.slider-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
}

/* Rankings */
.rankings-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 8px;
}

.rank-first td {
    font-weight: 600;
}

/* Certification Cards */
.cert-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
}

.cert-card.cert-expired {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.05);
}

.cert-card.cert-expiring {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.05);
}

.cert-expired {
    color: #b91c1c;
}

.cert-expiring {
    color: #b45309;
}

/* Insurance Alert */
.insurance-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 8px;
}

.insurance-alert.expired {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #b91c1c;
}

.insurance-alert.expiring {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #b45309;
}

.insurance-alert.ok {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #15803d;
}

/* =============================================
   Fixed Cost Manager (Sprint 8H)
   ============================================= */

.fc-summary-bar {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 12px;
}

.fc-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fc-summary-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fc-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--success);
}

.fc-summary-draft .fc-summary-value {
    color: var(--warning);
    font-size: 14px;
}

.fc-source-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--primary-color);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.fc-source-label:hover {
    background: var(--primary-light, rgba(59, 130, 246, 0.1));
    text-decoration: underline;
}

.fc-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.fc-row:hover {
    background: var(--bg-hover);
}

/* ============================================= */
/* Sprint 8D: Equipment Management               */
/* ============================================= */

/* Equipment Library Header */
.equipment-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.equipment-library-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Filter Bar */
.equipment-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.equipment-filter-bar .form-control {
    flex: 1;
}

/* Equipment Card Grid */
.equipment-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.equipment-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    background: var(--bg-primary);
    transition: box-shadow 0.15s ease;
}

.equipment-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.equipment-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.equipment-category-icon {
    font-size: 20px;
    color: var(--primary-color);
    width: 32px;
    text-align: center;
}

.equipment-card-title {
    flex: 1;
    min-width: 0;
}

.equipment-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-model {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.equipment-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    margin-bottom: 12px;
}

.equipment-daily-rate {
    font-weight: 600;
    color: var(--primary-color);
}

.equipment-vendor {
    color: var(--text-secondary);
    font-size: 12px;
}

.equipment-assignments-count {
    font-size: 12px;
    color: var(--text-tertiary);
}

.equipment-card-actions {
    display: flex;
    gap: 6px;
}

/* Equipment Detail */
.equipment-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.equipment-detail-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.equipment-detail-icon {
    font-size: 28px;
    color: var(--primary-color);
}

.equipment-detail-name {
    font-size: 18px;
    font-weight: 600;
}

.equipment-detail-model {
    font-size: 13px;
    color: var(--text-secondary);
}

.equipment-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.equipment-detail-grid .detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.equipment-detail-grid .detail-field label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.equipment-detail-grid .detail-field span {
    font-size: 14px;
}

.equipment-detail-grid .detail-field-full {
    grid-column: 1 / -1;
}

.badge-lg {
    padding: 6px 14px;
    font-size: 13px;
}

/* Utilization Bars */
.utilization-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.utilization-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.utilization-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.utilization-bar-label {
    width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.utilization-bar-label i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
}

.utilization-bar {
    flex: 1;
    height: 20px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.utilization-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.utilization-bar-fill.high {
    background: var(--success);
}

.utilization-bar-fill.medium {
    background: var(--warning);
}

.utilization-bar-fill.low {
    background: var(--danger);
}

.utilization-bar-value {
    width: 50px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
}

.utilization-bar-cost {
    width: 80px;
    text-align: right;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Available Equipment Picker */
.available-equipment-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.available-equipment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.available-equipment-item:hover {
    background: var(--bg-hover);
}

.available-equipment-item.selected {
    border-color: var(--primary-color);
    background: var(--primary-light, #e8f0fe);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.available-equipment-item i {
    color: var(--primary-color);
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.available-equipment-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.available-equipment-name {
    font-weight: 600;
    font-size: 13px;
}

.available-equipment-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

.available-equipment-rate {
    font-weight: 600;
    font-size: 13px;
    color: var(--primary-color);
}

/* Assignment Status Colors */
.assignment-conflict {
    border: 2px solid var(--danger);
}

/* Maintenance Alerts */
.maintenance-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.maintenance-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--bg-secondary);
    font-size: 13px;
}

.maintenance-alert-item i {
    color: var(--text-secondary);
}

.maintenance-alert-item.maintenance-overdue {
    background: #fef2f2;
    border-left: 3px solid var(--danger);
}

.maintenance-alert-item.maintenance-overdue i {
    color: var(--danger);
}

.maintenance-alert-item.maintenance-due {
    background: #fffbeb;
    border-left: 3px solid var(--warning);
}

.maintenance-alert-item.maintenance-due i {
    color: var(--warning);
}

.maintenance-overdue {
    color: var(--danger);
    font-weight: bold;
}

.maintenance-due {
    color: var(--warning);
}

/* Equipment Project Summary */
.equipment-project-summary .equipment-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

/* Vendor Selected Display */
.vendor-selected {
    font-weight: 500;
    color: var(--primary-color);
}

/* =============================================================================
   Sprint 8F: Work Orders
   ============================================================================= */

/* Work Order List */
.wo-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.wo-list-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}

.wo-list-filters .form-control-sm {
    width: 160px;
}

/* Status Badges */
.wo-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wo-status-badge.status-draft {
    background: var(--info-bg, rgba(52, 152, 219, 0.1));
    color: var(--info);
}

.wo-status-badge.status-issued {
    background: var(--warning-bg, rgba(241, 196, 15, 0.15));
    color: var(--warning);
}

.wo-status-badge.status-acknowledged {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.1);
    color: var(--primary-color);
}

.wo-status-badge.status-in-progress {
    background: rgba(230, 126, 34, 0.1);
    color: #e67e22;
}

.wo-status-badge.status-complete {
    background: var(--success-bg, rgba(46, 204, 113, 0.1));
    color: var(--success);
}

.wo-status-badge.status-cancelled {
    background: var(--danger-bg, rgba(231, 76, 60, 0.1));
    color: var(--danger);
}

/* Wizard Steps */
.wo-wizard-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.wo-wizard-step-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
}

.wo-wizard-step-indicator.active {
    background: var(--primary-color);
    color: white;
}

.wo-wizard-step-indicator.completed {
    background: var(--success);
    color: white;
}

.wo-wizard-step-indicator .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.25);
}

.wo-wizard-step-indicator:not(.active):not(.completed) .step-num {
    background: var(--border-color);
}

/* Wizard Step Content */
.wo-wizard-step {
    min-height: 200px;
}

/* Task Selector */
.wo-task-selector {
    max-height: 400px;
    overflow-y: auto;
}

.wo-task-select-all {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.wo-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
}

.wo-task-item:hover {
    background: var(--bg-secondary);
}

.wo-task-status {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Selected Vendor */
.wo-selected-vendor {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--success-bg, rgba(46, 204, 113, 0.1));
    border: 1px solid var(--success);
    border-radius: var(--radius-md);
    color: var(--success);
    font-weight: 500;
}

.wo-selected-vendor i {
    font-size: 1.1rem;
}

.wo-selected-vendor .btn {
    margin-left: auto;
}

/* Review Summary */
.wo-review-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.wo-review-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.wo-review-item span {
    font-weight: 500;
}

/* Detail View */
.wo-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.wo-detail-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wo-detail-header-left h3 {
    margin: 0;
    font-size: 1.1rem;
}

.wo-detail-header-right {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Info Grid */
.wo-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.wo-info-item label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.wo-info-item span {
    font-weight: 500;
    font-size: 0.9rem;
}

.wo-amount {
    color: var(--primary-color);
    font-weight: 600 !important;
}

/* Sections */
.wo-section {
    margin-bottom: 20px;
}

.wo-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.wo-scope-editor {
    font-family: inherit;
    min-height: 150px;
}

.wo-scope-content {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.6;
}

.wo-scope-content h4, .wo-scope-content h5 {
    margin: 12px 0 4px 0;
    font-size: 0.95rem;
}

.wo-terms-content {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    white-space: pre-line;
}

.wo-notes-content {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    white-space: pre-line;
}

/* Line Items */
.wo-line-items-total {
    text-align: right;
    padding: 8px 12px;
    font-size: 1rem;
    border-top: 2px solid var(--border-color);
    margin-top: 4px;
}

/* Signature Section */
.wo-signature-section {
    border: 1px solid var(--success);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--success-bg, rgba(46, 204, 113, 0.05));
}

.wo-signature-display {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.wo-signature-info {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.8;
}

.wo-signature-image {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px;
    background: var(--bg-primary);
}

.wo-signature-image img {
    max-height: 80px;
    max-width: 200px;
}

.wo-content-hash {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.wo-content-hash code {
    font-family: monospace;
    background: var(--bg-secondary);
    padding: 2px 4px;
    border-radius: 2px;
}

/* Signature Pad */
.wo-signature-pad {
    width: 100%;
    height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    cursor: crosshair;
    background: var(--bg-primary);
    touch-action: none;
}

.wo-signature-actions {
    text-align: right;
    margin-top: 6px;
}

/* Detail Footer */
.wo-detail-footer {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: 16px;
    text-align: right;
}

/* Print Styles */
@media print {
    /* Hide everything except the work order detail modal */
    body > *:not(.modal) {
        display: none !important;
    }
    /* Hide all modals except work order detail */
    .modal:not(#workOrderDetailModal) {
        display: none !important;
    }

    /* Make the modal fill the page naturally (no fixed positioning, no scroll) */
    #workOrderDetailModal {
        position: static !important;
        display: block !important;
        background: none !important;
        overflow: visible !important;
    }
    #workOrderDetailModal .modal-content {
        max-height: none !important;
        max-width: none !important;
        width: 100% !important;
        overflow: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    #workOrderDetailModal .modal-content.modal-flex {
        max-height: none !important;
        overflow: visible !important;
    }
    #workOrderDetailModal .modal-body {
        overflow: visible !important;
        flex: none !important;
    }

    /* Hide UI chrome that shouldn't print */
    .wo-detail-header-right .btn {
        display: none !important;
    }
    .wo-detail-footer {
        display: none !important;
    }
    .wo-section textarea {
        display: none !important;
    }
    .modal-header .modal-close {
        display: none !important;
    }

    /* Keep signature block together */
    .wo-signature-section {
        break-inside: avoid;
    }
}

/* =========================================================================
   Sprint 10-RA1: Resource Allocation Timeline
   ========================================================================= */

.resource-timeline-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Toolbar */
/* =========================================================================
   Sprint 10-RA1: Resource Allocation Timeline
   Collapsible user rows with heatmap summary + expandable task sub-rows
   ========================================================================= */

.rt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.rt-toolbar-left,
.rt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rt-toolbar label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.rt-date-input {
    width: 140px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
}

.rt-select {
    width: 160px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
}

.rt-zoom-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.rt-zoom-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.2;
}

.rt-zoom-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.rt-zoom-btn.active {
    background: var(--accent-color, #2563eb);
    color: #fff;
}

.rt-zoom-btn:hover:not(.active) {
    background: var(--bg-tertiary, #f0f0f0);
}

/* Summary Cards */
.rt-summary-cards {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    overflow-x: auto;
}

.rt-card {
    flex: 1;
    min-width: 100px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    text-align: center;
}

.rt-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.rt-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rt-card-danger .rt-card-value { color: var(--danger-color); }
.rt-card-success .rt-card-value { color: var(--success-color); }

/* Grid */
.rt-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rt-header {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    overflow: hidden;
}

.rt-header-label-spacer {
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
}

.rt-header-scroll {
    overflow: hidden;
    flex: 1;
}

.rt-header-months {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.rt-month-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    padding: 4px 0;
    border-right: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rt-header-days {
    display: flex;
}

.rt-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    border-right: 1px solid var(--border-light, rgba(0,0,0,0.06));
    font-size: 11px;
}

.rt-day-num {
    font-weight: 600;
    color: var(--text-primary);
}

.rt-day-name {
    font-size: 9px;
    color: var(--text-secondary);
}

.rt-day-cell.rt-weekend {
    background: var(--bg-tertiary, rgba(0,0,0,0.03));
}

.rt-day-cell.rt-weekend .rt-day-num,
.rt-day-cell.rt-weekend .rt-day-name {
    color: var(--text-tertiary, #aaa);
}

/* Body */
.rt-body {
    flex: 1;
    overflow: auto;
}

.rt-loading,
.rt-empty,
.rt-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    font-size: 14px;
    color: var(--text-secondary);
}

.rt-error {
    color: var(--danger-color);
}

/* ---- User Group (collapsible) ---- */
.rt-user-group {
    border-bottom: 1px solid var(--border-color);
}

.rt-user-group.rt-expanded {
    border-bottom: 2px solid var(--border-color);
}

/* Summary row (always visible) */
.rt-user-row {
    display: flex;
    min-height: 42px;
}

.rt-user-row.rt-clickable {
    cursor: pointer;
}

.rt-user-row.rt-clickable:hover {
    background: var(--bg-hover, rgba(0,0,0,0.02));
}

.rt-row-label {
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-right: 1px solid var(--border-color);
    position: sticky;
    left: 0;
    background: var(--bg-primary);
    z-index: 2;
}

.rt-expand-icon {
    font-size: 9px;
    color: var(--text-tertiary, #999);
    width: 12px;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.rt-expand-spacer {
    width: 12px;
    flex-shrink: 0;
}

.rt-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.rt-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-user-meta {
    font-size: 10px;
    color: var(--text-tertiary, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-utilization-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.rt-status-green { background: rgba(16, 185, 129, 0.15); color: #059669; }
.rt-status-yellow { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.rt-status-red { background: rgba(239, 68, 68, 0.15); color: #dc2626; }

/* Row Grid (shared by summary + task sub-rows) */
.rt-row-grid {
    position: relative;
    min-height: 42px;
}

.rt-row-cells {
    display: flex;
    height: 100%;
}

/* Summary heatmap cells */
.rt-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-light, rgba(0,0,0,0.06));
    cursor: default;
}

.rt-cell.rt-weekend {
    background: var(--bg-tertiary, rgba(0,0,0,0.03));
}

.rt-cell.rt-cell-ok {
    background: rgba(16, 185, 129, 0.15);
}

.rt-cell.rt-cell-warn {
    background: rgba(250, 204, 21, 0.28);
}

.rt-cell.rt-cell-over {
    background: rgba(239, 68, 68, 0.22);
}

.rt-cell-hours {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
}

.rt-cell-over .rt-cell-hours {
    color: #b91c1c;
}

.rt-cell-warn .rt-cell-hours {
    color: #92400e;
}

/* ---- Task sub-rows (expanded) ---- */
.rt-task-rows {
    border-top: 1px solid var(--border-light, rgba(0,0,0,0.06));
    background: var(--bg-secondary, #fafafa);
}

.rt-task-subrow {
    display: flex;
    min-height: 32px;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.04));
}

.rt-task-subrow:last-child {
    border-bottom: none;
}

.rt-task-label {
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 28px;
    border-right: 1px solid var(--border-color);
    position: sticky;
    left: 0;
    background: var(--bg-secondary, #fafafa);
    z-index: 2;
    overflow: hidden;
}

.rt-task-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.rt-task-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.rt-task-detail {
    font-size: 10px;
    color: var(--text-tertiary, #999);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Task bar container within sub-row */
.rt-task-bar-container {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    bottom: 3px;
    pointer-events: none;
}

.rt-task-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 6px;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    transition: opacity 0.15s, filter 0.15s;
    opacity: 0.85;
}

.rt-task-bar:hover {
    opacity: 1;
    filter: brightness(1.1);
    z-index: 5;
}

.rt-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.rt-bar-pct {
    font-size: 10px;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* =========================================================================
   Sprint 10-RA2: Skills & Smart Assignment
   ========================================================================= */

/* Skill Badges */
.skill-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.skill-badge .skill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skill-badge .skill-remove {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 2px;
}

.skill-badge .skill-remove:hover {
    color: var(--danger-color);
}

.skill-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Smart Assignment Modal */
.sa-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.sa-task-context {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.sa-required-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Candidate Cards */
.sa-candidates {
    padding: 12px 16px;
    max-height: 420px;
    overflow-y: auto;
}

.sa-candidate-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--bg-primary);
}

.sa-candidate-card:hover {
    border-color: var(--accent-color, #2563eb);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sa-candidate-card.sa-would-overload {
    border-color: #fca5a5;
    background: rgba(239, 68, 68, 0.03);
}

/* Score Circle */
.sa-score-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    border: 3px solid;
}

.sa-score-high { border-color: #10b981; color: #059669; background: rgba(16,185,129,0.08); }
.sa-score-medium { border-color: #f59e0b; color: #d97706; background: rgba(245,158,11,0.08); }
.sa-score-low { border-color: #ef4444; color: #dc2626; background: rgba(239,68,68,0.08); }

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

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

.sa-candidate-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Availability Bar */
.sa-availability-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}

.sa-availability-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.sa-availability-fill.sa-fill-green { background: var(--success-color); }
.sa-availability-fill.sa-fill-yellow { background: var(--warning-color); }
.sa-availability-fill.sa-fill-red { background: var(--danger-color); }

.sa-skill-matches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.sa-skill-match {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid;
}

.sa-skill-match.sa-match { border-color: #10b981; color: #059669; background: rgba(16,185,129,0.08); }
.sa-skill-match.sa-miss { border-color: #ef4444; color: #dc2626; background: rgba(239,68,68,0.08); }

.sa-utilization-change {
    font-size: 11px;
    margin-top: 4px;
    color: var(--text-secondary);
}

.sa-overload-warning {
    color: var(--danger-color);
    font-weight: 600;
}

.sa-candidate-action {
    flex-shrink: 0;
}

.sa-candidate-action .btn { font-size: 12px; }

/* Skills Library in Org Settings */
.skills-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.skill-def-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
}

.skill-def-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-def-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

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

.skill-def-category {
    font-size: 10px;
    color: var(--text-secondary);
}

.skill-def-actions {
    display: flex;
    gap: 4px;
}

/* Proficiency Stars */
.proficiency-stars {
    display: inline-flex;
    gap: 1px;
}

.proficiency-stars .star {
    color: #d1d5db;
    font-size: 10px;
}

.proficiency-stars .star.filled {
    color: var(--warning-color);
}

/* === Overview Tab (Sprint OV) === */

/* Container */
.overview-tab { padding: 8px 12px; }
.overview-loading { text-align: center; padding: 40px; color: var(--text-muted); }
.overview-loading i { margin-right: 6px; }

/* Section headers - collapsible */
.ov-section { margin-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.ov-section:last-child { border-bottom: none; }
.ov-section-header {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0; cursor: pointer; user-select: none;
    font-size: 12px; font-weight: 600; color: var(--text-dark);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.ov-section-header:hover { color: var(--primary-color); }
.ov-section-header .ov-chevron { transition: transform 0.2s; font-size: 10px; width: 12px; text-align: center; }
.ov-section-header.collapsed .ov-chevron { transform: rotate(-90deg); }
.ov-section-header .ov-count {
    font-size: 10px; background: var(--bg-hover);
    padding: 1px 6px; border-radius: 8px; font-weight: 500; color: var(--text-muted);
}
.ov-section-header .ov-section-icon { width: 14px; text-align: center; font-size: 11px; color: var(--text-muted); }
.ov-section-body { padding: 4px 0 8px 0; }
.ov-section-header.collapsed + .ov-section-body { display: none; }

/* Identity bar */
.ov-identity { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 4px; }
.ov-meta-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
.ov-meta-item { display: flex; align-items: center; gap: 4px; }
.ov-meta-item i { font-size: 10px; color: var(--text-muted); }
.ov-breadcrumb { font-size: 11px; color: var(--text-muted); margin-top: 2px; margin-bottom: 8px; }
.ov-breadcrumb a { color: var(--primary-color); cursor: pointer; text-decoration: none; }
.ov-breadcrumb a:hover { text-decoration: underline; }
.ov-breadcrumb .ov-sep { margin: 0 4px; color: var(--text-muted); }

/* Progress section */
.ov-progress-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ov-progress-bar-container {
    flex: 1; height: 6px; background: var(--bg-hover); border-radius: 3px;
    overflow: hidden;
}
.ov-progress-bar-fill {
    height: 100%; border-radius: 3px;
    background: var(--success-color);
    transition: width 0.3s ease;
}
.ov-progress-bar-fill.warning { background: var(--warning-color); }
.ov-progress-bar-fill.danger { background: var(--danger-color); }
.ov-progress-text { font-size: 12px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }

.ov-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; margin-top: 6px;
}
.ov-stat-card {
    background: var(--bg-light); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 6px 8px; text-align: center;
    cursor: pointer; transition: border-color 0.15s;
}
.ov-stat-card:hover { border-color: var(--primary-color); }
.ov-stat-label { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.ov-stat-value { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.ov-stat-value.positive { color: var(--success-color); }
.ov-stat-value.negative { color: var(--danger-color); }
.ov-stat-value.neutral { color: var(--primary-color); }

/* Compact badges */
.ov-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 500;
}
.ov-badge.type-project { background: #dbeafe; color: #1d4ed8; }
.ov-badge.type-task { background: #f3f4f6; color: var(--text-primary); }
.ov-badge.type-milestone { background: #d1fae5; color: #065f46; }
.ov-badge.type-bug { background: #fee2e2; color: #991b1b; }
.ov-badge.type-ticket { background: #fef3c7; color: #92400e; }
.ov-badge.type-default { background: #f3f4f6; color: var(--text-primary); }

.ov-badge.status { background: var(--bg-hover); color: var(--text-dark); }
.ov-badge.priority-critical { background: #fee2e2; color: #991b1b; }
.ov-badge.priority-high { background: #fff7ed; color: #9a3412; }
.ov-badge.priority-medium { background: #dbeafe; color: #1d4ed8; }
.ov-badge.priority-low { background: #f3f4f6; color: var(--text-secondary); }
.ov-badge.phase { background: #ede9fe; color: #5b21b6; }

/* People list */
.ov-people-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ov-person {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; background: var(--bg-light);
    border: 1px solid var(--border-color); border-radius: 12px;
    font-size: 11px;
}

/* Child task mini-list */
.ov-child-list { list-style: none; padding: 0; margin: 0; }
.ov-child-item {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 0; font-size: 12px; cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.ov-child-item:last-child { border-bottom: none; }
.ov-child-item:hover { color: var(--primary-color); }
.ov-child-item .ov-child-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-child-item .ov-child-pct { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ov-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ov-status-dot.complete { background: var(--success-color); }
.ov-status-dot.in-progress { background: var(--primary-color); }
.ov-status-dot.not-started { background: #d1d5db; }
.ov-status-dot.other { background: #fbbf24; }

.ov-child-summary { display: flex; gap: 12px; font-size: 11px; margin-bottom: 4px; }
.ov-child-summary-item { display: flex; align-items: center; gap: 4px; }
.ov-view-all { font-size: 11px; color: var(--primary-color); cursor: pointer; margin-top: 4px; display: inline-block; }
.ov-view-all:hover { text-decoration: underline; }

/* Dependency warning */
.ov-blocked-warning {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; background: #fef2f2;
    border: 1px solid #fecaca; border-radius: 4px;
    font-size: 11px; color: var(--danger-color); margin-bottom: 4px;
}
.ov-blocked-warning a { color: var(--danger-color); font-weight: 500; cursor: pointer; }
.ov-blocked-warning a:hover { text-decoration: underline; }

/* Schedule row */
.ov-schedule-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-light); margin-bottom: 4px; }
.ov-schedule-item { display: flex; align-items: center; gap: 4px; }
.ov-schedule-item i { font-size: 10px; }
.ov-overdue { color: var(--danger-color); font-weight: 500; }
.ov-due-soon { color: var(--warning-color); font-weight: 500; }

/* Tag pills */
.ov-tag {
    display: inline-block; padding: 1px 6px;
    border-radius: 8px; font-size: 10px; font-weight: 500;
}

/* Description preview */
.ov-description-preview {
    font-size: 12px; color: var(--text-light);
    max-height: 40px; overflow: hidden;
    line-height: 1.4; cursor: pointer;
}
.ov-description-preview.expanded { max-height: none; }

/* Financial compact row */
.ov-financial-row {
    display: flex; gap: 12px; font-size: 11px;
    flex-wrap: wrap; margin-bottom: 4px;
}
.ov-financial-item { display: flex; gap: 4px; }
.ov-financial-label { color: var(--text-muted); }
.ov-financial-value { font-weight: 600; }

/* Activity row */
.ov-activity-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-light); }
.ov-activity-item { display: flex; align-items: center; gap: 4px; }
.ov-activity-item i { font-size: 10px; color: var(--text-muted); }
.ov-tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Quality mini-bars */
.ov-quality-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ov-mini-progress {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
}
.ov-mini-bar {
    width: 80px; height: 4px; background: var(--bg-hover);
    border-radius: 2px; overflow: hidden;
}
.ov-mini-bar-fill { height: 100%; border-radius: 2px; }
.ov-mini-bar-fill.success { background: var(--success-color); }
.ov-mini-bar-fill.warning { background: var(--warning-color); }
.ov-mini-bar-fill.danger { background: var(--danger-color); }

/* Construction summary */
.ov-construction-row { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-light); }
.ov-construction-item { display: flex; align-items: center; gap: 4px; }
.ov-construction-item i { font-size: 10px; color: var(--text-muted); }

/* Responsive: collapse stat grid on narrow modals */
@media (max-width: 600px) {
    .ov-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   Overview Tab – Phase 2: Expandable Mini-Lists
   ═══════════════════════════════════════════════════════════════ */

/* Expandable item wrapper */
.ov-expandable {
    border-bottom: 1px solid var(--border-light, #eee);
    padding: 0;
}
.ov-expandable:last-child { border-bottom: none; }

/* Clickable summary header */
.ov-expandable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    user-select: none;
    font-size: 12px;
    color: var(--text-color);
}
.ov-expandable-header:hover {
    background: var(--bg-hover, #f5f5f5);
}

.ov-expandable-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.ov-expandable-label i {
    font-size: 11px;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* Rotate arrow when expanded */
.ov-expandable-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}
.ov-expandable.expanded .ov-expandable-arrow {
    transform: rotate(90deg);
}

/* Expandable body — hidden by default */
.ov-expandable-body {
    display: none;
    padding: 4px 4px 8px 24px;
}
.ov-expandable.expanded .ov-expandable-body {
    display: block;
}

/* Loading spinner inside body */
.ov-expandable-body .ov-loading {
    font-size: 11px;
    color: var(--text-muted);
    padding: 6px 0;
}

/* Mini-list container */
.ov-mini-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Individual mini-list item */
.ov-mini-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.15s;
    gap: 8px;
}
.ov-mini-list-item:hover {
    background: var(--bg-hover, #f5f5f5);
}

/* Item name (left side, truncates) */
.ov-mini-list-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--primary-color, #2563eb);
}

/* Meta info (right side) */
.ov-mini-list-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
}

/* Status badge inside mini-list */
.ov-mini-list-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Mini-list empty state */
.ov-mini-list-empty {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Overview Tab – Phase 3: Compact Horizontal Layout
   ═══════════════════════════════════════════════════════════════ */

/* Two-column grid for expandable items */
.ov-expandable-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
}
/* Expanded items stay in their column; mini-list fits within the cell */
@media (max-width: 480px) {
    .ov-expandable-grid { grid-template-columns: 1fr; }
}

/* Inline activity counters (pills in identity area) */
.ov-activity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.ov-activity-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-hover, #f5f5f5);
    border-radius: 10px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ov-activity-pill:hover {
    background: var(--primary-color);
    color: white;
}
.ov-activity-pill i { font-size: 9px; }
.ov-activity-pill .ov-pill-count {
    font-weight: 600;
    color: var(--text-dark);
}
.ov-activity-pill:hover .ov-pill-count { color: white; }

/* Compact two-up layout for People + Schedule */
.ov-two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.ov-two-up > div { min-width: 0; }
@media (max-width: 480px) {
    .ov-two-up { grid-template-columns: 1fr; }
}

/* Tighter section spacing when combined */
.ov-section-compact .ov-section-body { padding: 2px 0 4px 0; }

/* Sub-section label within combined sections */
.ov-sub-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 6px 0 2px 0;
    padding-top: 4px;
}
.ov-sub-label:first-child { margin-top: 0; padding-top: 0; }
.ov-sub-label + .ov-expandable-grid { margin-top: 2px; }

/* =============================================
   Sprint 8A: As-Built Documentation
   ============================================= */

/* Task-level section */
.ab-task-section { padding: 8px 0; }
.ab-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ab-task-status { display: flex; align-items: center; gap: 8px; }
.ab-meta { font-size: 0.8rem; color: var(--text-secondary); }

/* Status badges */
.ab-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ab-status-verified { background: var(--success-bg, #e8f5e9); color: var(--success, #2e7d32); }
.ab-status-resolved { background: #e3f2fd; color: #1976d2; }
.ab-status-deviation { background: #fff3e0; color: #e65100; }
.ab-status-pending { background: var(--bg-secondary, #f5f5f5); color: var(--text-secondary); }
.ab-status-none { background: var(--bg-secondary, #f5f5f5); color: var(--text-muted); }
.ab-status-not-verified { background: var(--bg-secondary, #f5f5f5); color: var(--text-muted); }

/* Severity badges */
.ab-severity-badge.ab-severity-minor { background: #e8f5e9; color: #2e7d32; }
.ab-severity-badge.ab-severity-moderate { background: #fff3e0; color: #e65100; }
.ab-severity-badge.ab-severity-major { background: #fbe9e7; color: #d84315; }
.ab-severity-badge.ab-severity-critical { background: #ffebee; color: #c62828; }

/* Deviation card severity borders */
.ab-deviation-card { border-left: 3px solid var(--border-color); padding: 10px 12px; margin-bottom: 8px; background: var(--bg-primary); border-radius: 4px; }
.ab-deviation-card.ab-severity-minor { border-left-color: #4caf50; }
.ab-deviation-card.ab-severity-moderate { border-left-color: #ff9800; }
.ab-deviation-card.ab-severity-major { border-left-color: #e67e22; }
.ab-deviation-card.ab-severity-critical { border-left-color: #e53935; }

.ab-deviation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ab-deviation-type { font-size: 0.8rem; color: var(--text-secondary); }
.ab-deviation-actions { margin-left: auto; display: flex; gap: 4px; }
.ab-deviation-resolution { font-size: 0.85rem; margin-top: 8px; padding: 6px 8px; background: var(--bg-secondary); border-radius: 4px; }
.ab-deviation-resolved-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; }

/* Planned vs Actual comparison */
.ab-comparison-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.ab-comparison-arrow { display: flex; align-items: center; padding-top: 28px; color: var(--text-secondary); }
.ab-comparison-display { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.ab-comparison-col { padding: 6px 8px; background: var(--bg-secondary); border-radius: 4px; }
.ab-comparison-changed { background: #fff8e1; }
.ab-comparison-label { font-size: 0.7rem; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 2px; }
.ab-comparison-value { font-size: 0.85rem; }

/* Form card */
.ab-form-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
}
.ab-form-card h4 { margin: 0 0 12px 0; font-size: 0.95rem; }
.ab-form-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Status radios */
.ab-status-radios { display: flex; gap: 12px; }
.ab-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ab-radio input[type="radio"] { margin: 0; }
.ab-radio-label { font-size: 0.85rem; }
.ab-radio-label.ab-status-verified { color: var(--success, #2e7d32); }
.ab-radio-label.ab-status-deviation { color: #e65100; }

/* History section */
.ab-history { margin-top: 12px; }
.ab-history h4 { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px; }
.ab-history-item {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-primary);
}
.ab-history-header { display: flex; align-items: center; gap: 8px; }
.ab-history-actions { margin-left: auto; }
.ab-history-notes { font-size: 0.85rem; margin-top: 6px; color: var(--text-secondary); }

/* Deviations section */
.ab-deviations-section { margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 8px; }
.ab-deviations-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.85rem; }
.ab-deviation-list { margin-top: 4px; }

/* Project-level dashboard */
.ab-project-dashboard { padding: 8px 0; }
.ab-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ab-summary-header h3 { margin: 0; font-size: 1.1rem; }
.ab-summary-actions { display: flex; gap: 8px; }

/* Stats grid */
.ab-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.ab-stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 8px;
    text-align: center;
}
.ab-stat-value { font-size: 1.4rem; font-weight: 700; }
.ab-stat-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; }
.ab-stat-verified .ab-stat-value { color: var(--success, #2e7d32); }
.ab-stat-resolved .ab-stat-value { color: #1976d2; }
.ab-stat-deviation .ab-stat-value { color: #e65100; }
.ab-stat-pending .ab-stat-value { color: var(--text-secondary); }

/* Progress bar */
.ab-progress-section { margin-bottom: 16px; }
.ab-progress-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 4px; }
.ab-progress-bar { height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.ab-progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }

/* Breakdown charts */
.ab-breakdowns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ab-breakdown-chart h4 { font-size: 0.85rem; margin-bottom: 8px; }
.ab-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ab-bar-label { width: 80px; font-size: 0.8rem; text-align: right; }
.ab-bar-track { flex: 1; height: 16px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; }
.ab-bar-fill { height: 100%; border-radius: 3px; min-width: 2px; }
.ab-bar-count { width: 24px; font-size: 0.8rem; font-weight: 600; }

/* Alert bar */
.ab-alert-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
}
.ab-alert-warning { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }

/* Deviation log */
.ab-deviation-log { padding: 8px 0; }
.ab-log-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.ab-log-header h3 { margin: 0; flex: 1; font-size: 1rem; }
.ab-cell-truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Report preview */
.ab-report-preview { padding: 8px 0; }
.ab-report-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.ab-report-toolbar h3 { margin: 0; flex: 1; font-size: 1rem; }
.ab-report-content { max-width: 800px; }
.ab-report-section { margin-bottom: 24px; }
.ab-report-section h2 { margin: 0 0 4px 0; font-size: 1.3rem; }
.ab-report-section h3 { margin: 0 0 8px 0; font-size: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; }
.ab-report-subtitle { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }
.ab-report-meta { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 0 0; }

/* Sign-off block */
.ab-report-signoff { margin-top: 40px; }
.ab-signoff-grid { display: flex; flex-direction: column; gap: 24px; }
.ab-signoff-line { display: flex; align-items: baseline; gap: 12px; }
.ab-signoff-label { width: 100px; font-weight: 600; font-size: 0.85rem; }
.ab-signoff-space { flex: 1; border-bottom: 1px solid var(--text-primary); }
.ab-signoff-date { font-size: 0.85rem; }

/* Empty/loading/error states */
.ab-loading { padding: 20px; text-align: center; color: var(--text-secondary); }
.ab-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.ab-empty-sm { padding: 8px; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
.ab-error { padding: 16px; text-align: center; color: var(--danger, #e53935); }

/* Print styles for report */
@media print {
    .ab-report-preview .no-print { display: none !important; }
    .ab-report-content {
        max-width: 100%;
        font-size: 11pt;
    }
    .ab-report-section { page-break-inside: avoid; }
    .ab-report-signoff { page-break-before: always; }
    .modal-header, .modal-footer, .tab-nav, .sidebar { display: none !important; }
    .modal { position: static !important; display: block !important; }
    .modal-content { box-shadow: none !important; border: none !important; max-height: none !important; overflow: visible !important; }
    .modal-body { max-height: none !important; overflow: visible !important; }
}

/* =====================================================
   Sprint 8C: Communication Log
   ===================================================== */

/* Timeline header */
.comm-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.comm-timeline-actions {
    display: flex;
    gap: 0.5rem;
}

.comm-timeline-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.comm-timeline-filters .form-control-sm {
    height: 34px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    width: auto;
    min-width: 120px;
}

/* Timeline body */
.comm-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 2rem;
}

.comm-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

/* Timeline section headers (project rollup) */
.comm-section-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.comm-section-header.task-comms {
    margin-top: 1rem;
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

/* Source task pill on rollup cards (clickable) */
.event-source-pill {
    font-size: 0.7rem;
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.event-source-pill:hover {
    background: rgba(59, 130, 246, 0.25);
}
.event-source-pill i {
    font-size: 0.6rem;
}

/* Timeline event card */
.comm-timeline-event {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--text-light);
    border-radius: 8px;
    background: var(--bg-card);
    margin-bottom: 1rem;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    position: relative;
}

.comm-timeline-event:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(2px);
}

.comm-timeline-event.meeting { border-left-color: var(--color-info); }
.comm-timeline-event.email { border-left-color: var(--primary-color); }
.comm-timeline-event.phonecall { border-left-color: var(--success-color); }
.comm-timeline-event.sitevisit { border-left-color: var(--warning-color); }
.comm-timeline-event.formalnotice { border-left-color: var(--danger-color); }
.comm-timeline-event.letter { border-left-color: var(--secondary-color); }
.comm-timeline-event.other { border-left-color: var(--text-light); }

/* Event icon */
.event-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.event-icon-large {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Event content */
.event-content {
    flex: 1;
    min-width: 0;
}

.event-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.event-type-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.event-date {
    font-size: 0.85rem;
    color: var(--text-light);
}

.event-subject {
    margin: 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.event-description {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0.25rem 0;
    line-height: 1.4;
}

.event-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.event-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.event-stats {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

.event-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.event-footer {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.event-creator {
    font-style: italic;
}

/* Participant chips */
.participant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.participant-chip.internal {
    background: #dbeafe;
    color: var(--color-accent-hover);
}

.participant-chip.external {
    background: #e0f2fe;
    color: #0369a1;
}

.participant-chip.acknowledged::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--success-color);
    margin-left: 0.15rem;
}

.participant-chip.more {
    background: var(--bg-tertiary);
    color: var(--text-light);
}

.participant-chip .participant-role {
    font-size: 0.65rem;
    opacity: 0.7;
}

.btn-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 0.15rem;
    font-size: 0.7rem;
}

.btn-chip-remove:hover {
    opacity: 1;
    color: var(--danger-color);
}

.participant-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0;
}

/* Participant picker */
.participant-picker-content {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--bg-secondary);
    margin-top: 0.5rem;
}

.participant-picker-section {
    margin-bottom: 0.75rem;
}

.participant-picker-section h5 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.participant-picker-list {
    max-height: 150px;
    overflow-y: auto;
}

.participant-picker-item {
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.participant-picker-item:hover {
    background: var(--bg-hover);
}

/* Follow-up styles */
.follow-up-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--bg-light);
}

.follow-up-item .follow-up-desc {
    flex: 1;
    font-size: 0.9rem;
}

.follow-up-item .follow-up-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

.follow-up-add-form {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.follow-up.pending { color: var(--warning-color); }
.follow-up.complete { color: var(--success-color); }
.follow-up.overdue { color: var(--danger-color); }

/* Event detail view */
.event-detail-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.event-detail-header h3 {
    margin: 0.25rem 0;
}

.event-detail-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.5rem;
}

.event-detail-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.event-detail-section {
    margin-bottom: 1.5rem;
}

.event-detail-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-light);
}

.event-description-full {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dark);
    padding: 0.75rem;
    background: var(--bg-light);
    border-radius: 6px;
}

/* Participant detail rows */
.participants-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.participant-detail-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    background: var(--bg-light);
}

.participant-role-badge {
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-light);
    font-weight: 500;
}

/* Follow-up detail */
.follow-up-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--bg-light);
    margin-bottom: 0.5rem;
}

.follow-up-status-icon {
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.follow-up-detail-content {
    flex: 1;
}

.follow-up-detail-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.35rem;
}

.follow-up-detail-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Follow-up completion prompt & info */
.follow-up-completion-prompt {
    width: 100%;
}

.follow-up-completion-prompt textarea {
    margin-bottom: 8px;
    width: 100%;
    resize: vertical;
}

.follow-up-completion-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.follow-up-completion-info {
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    font-size: 0.85em;
}

.follow-up-completion-notes {
    margin-top: 4px;
    color: var(--text-light);
}

.follow-up-actions {
    flex-shrink: 0;
}

/* Event detail actions */
.event-detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Form section divider */
.form-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.form-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.form-section h4 {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Stakeholder directory */
.stakeholder-directory {
    padding: 0;
}

.stakeholder-directory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.stakeholder-directory-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stakeholder-role-group {
    margin-bottom: 1.5rem;
}

.stakeholder-role-heading {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-light);
}

.stakeholder-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.stakeholder-card {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    transition: box-shadow 0.2s;
}

.stakeholder-card:hover {
    box-shadow: var(--shadow-md);
}

.stakeholder-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stakeholder-card-actions {
    display: flex;
    gap: 0.25rem;
}

.stakeholder-card h5 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.stakeholder-card p {
    margin: 0.15rem 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

.stakeholder-card p i {
    width: 16px;
    text-align: center;
    margin-right: 0.25rem;
}

.stakeholder-title {
    font-style: italic;
}

.stakeholder-notes {
    margin-top: 0.5rem !important;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.8rem !important;
}

.stakeholder-role-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--primary-color);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Proof of notification */
.proof-of-notification {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-primary);
}

.proof-header {
    text-align: center;
    border-bottom: 2px solid var(--text-dark);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.proof-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.proof-subtitle {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.proof-section {
    margin-bottom: 1.5rem;
}

.proof-section h3 {
    font-size: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}

.proof-row {
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.proof-recipient-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.proof-recipient-table th,
.proof-recipient-table td {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.proof-recipient-table th {
    background: var(--bg-light);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.proof-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid var(--text-dark);
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
}

/* Proof of notification print styles */
@media print {
    .proof-of-notification {
        padding: 2rem;
    }

    .proof-of-notification .proof-header {
        border-bottom-color: #000;
    }

    .proof-of-notification .proof-footer {
        border-top-color: #000;
    }

    .proof-recipient-table th,
    .proof-recipient-table td {
        border-color: #000;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Sprint STK: Stakeholder Directory & Project Assignment
   ═══════════════════════════════════════════════════════════════ */

/* Role Badges */
.stakeholder-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* Primary Contact Badge */
.primary-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--warning);
    color: #000;
}

/* Directory Role Tabs */
.stakeholder-role-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.stakeholder-role-tabs .btn {
    font-size: 0.8rem;
    padding: 4px 10px;
}

/* Search Bar */
.stakeholder-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.stakeholder-search-bar .form-control {
    flex: 1;
}

/* Card Grid */
.stakeholder-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* Stakeholder Card */
.stakeholder-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stakeholder-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.stakeholder-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.stakeholder-card-name {
    display: flex;
    flex-direction: column;
}

.stakeholder-card-title {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stakeholder-card-company {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.stakeholder-card-company i {
    width: 16px;
    color: var(--text-muted);
}

.stakeholder-card-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.stakeholder-contact-link {
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
}

.stakeholder-contact-link:hover {
    text-decoration: underline;
}

.stakeholder-contact-link i {
    width: 16px;
    margin-right: 4px;
}

.stakeholder-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}

/* Stakeholder Detail */
.stakeholder-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.stakeholder-detail-header h3 {
    margin: 0 0 4px 0;
}

.stakeholder-detail-contact {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.stakeholder-detail-notes {
    background: var(--surface-bg);
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.stakeholder-detail-section {
    margin-bottom: 16px;
}

.stakeholder-detail-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
}

.stakeholder-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

/* Stakeholder Project List (in detail view) */
.stakeholder-project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stakeholder-project-row {
    padding: 8px 10px;
    background: var(--surface-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

.stakeholder-project-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Project-Level Stakeholder List */
.project-stakeholder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.project-stakeholder-header h4 {
    margin: 0;
}

.project-stakeholder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-stakeholder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--surface-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.project-stakeholder-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.project-stakeholder-contact {
    display: flex;
    gap: 8px;
    margin: 0 12px;
}

.project-stakeholder-contact a {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.project-stakeholder-contact a:hover {
    color: var(--primary);
}

.project-stakeholder-actions {
    display: flex;
    gap: 4px;
}

/* Stakeholder Picker */
.stakeholder-picker-results {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.stakeholder-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.stakeholder-picker-item:last-child {
    border-bottom: none;
}

.stakeholder-picker-item:hover {
    background: var(--surface-bg);
}

.stakeholder-picker-item.selected {
    background: var(--primary-light, rgba(25, 118, 210, 0.1));
    border-left: 3px solid var(--primary);
}

/* Embedded Picker (for other managers) */
.stakeholder-picker-embed {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
}

/* Empty State Small */
.empty-state-small {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

.empty-state-small i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

/* =============================================
   Invoice Import (Sprint 8P)
   ============================================= */

/* Drop Zone */
.import-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    margin-bottom: 16px;
}
.import-drop-zone:hover,
.import-drop-zone.drag-over {
    border-color: var(--primary);
    background: var(--primary-alpha-5, rgba(var(--primary-rgb), 0.05));
}
.drop-zone-icon {
    font-size: 2rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.drop-zone-text {
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0;
}
.drop-zone-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.drop-zone-processing {
    padding: 16px;
}

/* Confidence Badges */
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.confidence-high {
    background: var(--success-alpha-15, rgba(var(--success-rgb), 0.15));
    color: var(--success);
}
.confidence-medium {
    background: var(--warning-alpha-15, rgba(var(--warning-rgb), 0.15));
    color: var(--warning);
}
.confidence-low {
    background: var(--danger-alpha-15, rgba(var(--danger-rgb), 0.15));
    color: var(--danger);
}

/* Extraction Results */
.extraction-results {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--bg-secondary);
}
.extraction-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.extraction-field label {
    min-width: 120px;
    font-weight: 500;
    color: var(--text-secondary);
}
.extraction-field input {
    flex: 1;
}
.extraction-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--info-alpha-15, rgba(var(--info-rgb), 0.15));
    color: var(--info);
}

/* Extracted Line Items Table */
.extracted-line-items {
    width: 100%;
    margin-top: 12px;
}
.extracted-line-items th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.extracted-line-items td {
    padding: 4px 8px;
}
.extracted-line-items input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* OCR Config */
.ocr-usage-meter {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}
.ocr-usage-meter-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s;
}
.ocr-usage-warning { background: var(--warning); }
.ocr-usage-danger { background: var(--danger); }

/* Receipt Capture */
.receipt-capture-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =============================================
   Sprint 8I: Compliance Dashboard
   ============================================= */

/* Score Row */
.compliance-score-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
}

.compliance-score-gauge {
    width: 180px;
    height: 180px;
    position: relative;
    flex-shrink: 0;
}

.compliance-score-gauge svg {
    transform: rotate(-90deg);
}

.compliance-score-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
}

.compliance-score-label small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* KPI Grid */
.compliance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    flex: 1;
}

.compliance-kpi-card {
    padding: 1rem;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
}

.compliance-kpi-card.ok {
    border-left-color: var(--success-color);
}

.compliance-kpi-card.warning {
    border-left-color: var(--warning-color);
}

.compliance-kpi-card.danger {
    border-left-color: var(--danger-color);
}

.compliance-kpi-card.critical {
    border-left-color: #8b0000;
}

.compliance-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.compliance-kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tabs (vanilla, no Bootstrap) */
.compliance-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    gap: 0;
}

.compliance-tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    margin-bottom: -2px;
}

.compliance-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.compliance-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Alert Banners */
.compliance-alert-banner {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.compliance-alert-banner.critical {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--danger-color);
}

.compliance-alert-banner.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--warning-color);
}

.compliance-alert-banner.info {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--primary-color);
}

.compliance-alert-banner .alert-message {
    flex: 1;
}

.compliance-alert-dismiss {
    margin-left: auto;
    border: none;
    background: none;
    opacity: 0.6;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    padding: 0 4px;
    line-height: 1;
}

.compliance-alert-dismiss:hover {
    opacity: 1;
}

/* Countdown Badges */
.countdown-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.countdown-badge.ok {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.countdown-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.countdown-badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.countdown-badge.expired {
    background: rgba(139, 0, 0, 0.15);
    color: #8b0000;
}

/* OSHA Log Table */
.osha-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.osha-log-table th {
    background: var(--bg-secondary);
    padding: 0.5rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.osha-log-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.osha-log-table tr:hover td {
    background: var(--bg-hover);
}

/* OSHA 300A Summary Panel */
.osha-300a-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 1rem;
}

.osha-300a-panel .stat-item {
    text-align: center;
}

.osha-300a-panel .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.osha-300a-panel .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* SWPPP Trigger Rows */
.swppp-trigger-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
}

.swppp-trigger-row:last-child {
    border-bottom: none;
}

.swppp-trigger-row.above-threshold {
    background: rgba(245, 158, 11, 0.05);
    padding: 0.5rem;
    border-radius: 6px;
    margin: 0.25rem 0;
}

.swppp-trigger-row.above-threshold .precipitation-value {
    color: var(--warning-color);
    font-weight: 600;
}

.swppp-trigger-row .trigger-date {
    font-weight: 500;
    min-width: 100px;
}

.swppp-trigger-row .trigger-location {
    flex: 1;
    color: var(--text-secondary);
}

/* Safety Sparkline */
.safety-sparkline {
    display: inline-block;
    vertical-align: middle;
}

/* Insurance COI Status */
.coi-status-blocked {
    color: var(--danger-color);
    font-weight: 600;
}

/* Section Cards */
.compliance-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.compliance-section-card h4 {
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.compliance-section-card .section-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Compliance Item List */
.compliance-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compliance-item-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.compliance-item-list li:last-child {
    border-bottom: none;
}

.compliance-item-name {
    font-weight: 500;
    color: var(--text-primary);
}

.compliance-item-meta {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Config Modal Sections */
.compliance-config-section {
    margin-bottom: 1.5rem;
}

.compliance-config-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Empty state for compliance sections */
.compliance-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Compliance summary stats row */
.compliance-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.compliance-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.compliance-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.compliance-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* =====================================================
   Sprint 8E: Field Reports
   ===================================================== */

/* Action bar */
.fr-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.fr-action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Report content */
.fr-report-content {
    max-width: 900px;
}

.fr-header-section {
    border-bottom: 2px solid var(--primary);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.fr-report-title h2 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.4rem;
}

.fr-report-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

/* Sections */
.fr-section {
    margin-bottom: 1.5rem;
    page-break-inside: avoid;
}

.fr-section-header {
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fr-section-header i {
    color: var(--primary);
    width: 1.2em;
    text-align: center;
}

.fr-section-empty .fr-empty-message {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

/* Weather grid */
.fr-weather-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.fr-weather-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    text-align: center;
}

.fr-weather-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.fr-weather-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Manpower summary */
.fr-manpower-summary {
    display: flex;
    gap: 2rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

/* Data tables inside field report */
.fr-data-table {
    width: 100%;
    font-size: 0.85rem;
}

.fr-total-row td {
    border-top: 2px solid var(--border-color);
    font-weight: 600;
}

/* Photo grid */
.fr-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.fr-photo-item {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fr-photo-placeholder {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 2rem;
}

.fr-photo-caption {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fr-photo-name {
    font-size: 0.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-photo-uploader {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Notes */
.fr-notes-textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
}

.fr-notes-display {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 3rem;
}

/* Report history table */
.report-history-table .badge-warning {
    background: var(--info);
    color: white;
}

/* Print styles */
@media print {
    /* Hide app chrome */
    .sidebar, .top-bar, .tab-bar, .fr-action-bar,
    .section-header-row, #fieldReportHistoryContainer {
        display: none !important;
    }

    .main-content, .content-area, .tab-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .field-report {
        font-size: 11pt;
        color: #000;
    }

    .fr-section {
        page-break-inside: avoid;
    }

    .fr-section-header {
        color: #000;
        border-bottom-color: var(--text-primary);
    }

    .fr-section-header i {
        color: var(--text-primary);
    }

    .fr-header-section {
        border-bottom-color: #000;
    }

    .fr-report-title h2 {
        color: #000;
    }

    .fr-weather-item {
        background: #f5f5f5;
        border: 1px solid #ddd;
    }

    .fr-data-table th {
        background: #f0f0f0 !important;
    }

    .no-print {
        display: none !important;
    }
}

/* =====================================================
   Sprint 8K: AIA Pay Applications (G702/G703)
   ===================================================== */

/* Pay App Section in Contract Detail */
.pay-app-section {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 16px;
}

/* G702 Form */
.g702-form {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 16px;
}

.g702-current-due td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* G703 Grid */
.g703-grid {
    overflow-x: auto;
}

.g703-grid table {
    min-width: 900px;
}

.g703-edit-input {
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    transition: border-color 0.15s;
}

.g703-edit-input:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Period timeline */
.period-timeline {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0;
}

.period-badge {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    white-space: nowrap;
}

.period-badge.active {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.period-badge.completed {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--success-color, #22c55e);
}

.period-badge.pending {
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
}

/* Print-specific styles for G702/G703 */
@media print {
    .g702-form {
        background: white !important;
        border: none !important;
        padding: 0 !important;
    }

    .g703-edit-input {
        border: none !important;
        background: transparent !important;
    }
}

/* =====================================================
   Sprint BUG: Bug Reporter
   ===================================================== */

.bug-report-list {
    width: 100%;
    border-collapse: collapse;
}

.bug-report-list th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.bug-report-list td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.bug-report-list tr:hover td {
    background: var(--bg-hover);
}

.bug-report-list .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.bug-report-filters {
    margin-bottom: 8px;
}

.bug-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.bug-detail-section {
    margin-bottom: 12px;
}

.bug-detail-section label {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bug-detail-section .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Floating bug report button — always accessible over any modal */
.bug-report-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.bug-report-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #dc2626;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}

.bug-report-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.bug-report-fab-secondary {
    width: 36px;
    height: 36px;
    font-size: 14px;
    background: var(--bg-tertiary, #4b5563);
}

/* Bug report modals sit above everything */
.bug-report-modal-overlay {
    z-index: 100000 !important;
}

/* ============================================
   Sprint 8M: Lien Waiver Tracking Styles
   ============================================ */

/* Waiver Status Badges */
.waiver-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}
.waiver-status.pending {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-muted, #6b7280);
}
.waiver-status.requested {
    background: #fff3cd;
    color: #856404;
}
.waiver-status.received {
    background: #d1ecf1;
    color: #0c5460;
}
.waiver-status.verified {
    background: #d4edda;
    color: #155724;
}
.waiver-status.rejected {
    background: #f8d7da;
    color: #721c24;
}

/* Waiver Type Badges */
.waiver-type-badge {
    display: inline-block;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.waiver-type-badge.conditional {
    border: 1px solid var(--warning, #d97706);
    color: var(--warning, #d97706);
}
.waiver-type-badge.unconditional {
    border: 1px solid var(--success, #16a34a);
    color: var(--success, #16a34a);
}

/* Compliance Dashboard Cards */
.compliance-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.compliance-card {
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
}
.compliance-card .card-value {
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.2;
}
.compliance-card .card-label {
    font-size: 0.85em;
    color: var(--text-muted, #6b7280);
    margin-top: 4px;
}
.compliance-card.at-risk {
    border: 2px solid var(--danger, #dc2626);
}
.compliance-card.at-risk .card-value {
    color: var(--danger, #dc2626);
}
.compliance-card.complete .card-value {
    color: var(--success, #16a34a);
}

/* Payment Block Warning */
.payment-block-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.payment-block-warning i {
    color: #856404;
    font-size: 1.2em;
    flex-shrink: 0;
}

/* Merge Field Reference */
.merge-field-reference {
    background: var(--bg-secondary, #f3f4f6);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-bottom: 8px;
    line-height: 1.8;
}
.merge-field-reference code {
    background: var(--bg-primary, #fff);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
    border: 1px solid var(--border-color, #e5e7eb);
}

/* Template Editor */
.template-editor-textarea {
    font-family: 'Courier New', monospace;
    min-height: 300px;
    font-size: 13px;
    line-height: 1.5;
}

/* Waiver Form Preview */
.lien-waiver-form-preview {
    padding: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    font-family: 'Times New Roman', serif;
    line-height: 1.6;
}

/* Responsive: Compliance cards stack on small screens */
@media (max-width: 768px) {
    .compliance-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media print {
    .lien-waiver-form-preview {
        border: none;
        padding: 0;
    }
}

/* =====================================================
   Sprint 8N: Certified Payroll (Davis-Bacon / WH-347)
   ===================================================== */

/* Certified Payroll Status Badges */
.cp-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.cp-status.draft { background: var(--bg-tertiary, #f0f0f0); color: var(--text-muted, #6c757d); }
.cp-status.submitted { background: #fff3cd; color: #856404; }
.cp-status.certified { background: #d4edda; color: #155724; }
.cp-status.rejected { background: #f8d7da; color: #721c24; }

/* WH-347 Grid */
.wh347-grid { overflow-x: auto; }
.wh347-grid table { min-width: 1100px; font-size: 0.85em; border-collapse: collapse; width: 100%; }
.wh347-grid th, .wh347-grid td { border: 1px solid var(--border-color, #dee2e6); padding: 4px 6px; }
.wh347-grid th { background: var(--bg-tertiary, #f8f9fa); font-weight: 600; text-align: center; font-size: 11px; white-space: nowrap; }
.wh347-grid .day-col { width: 50px; text-align: center; }
.wh347-grid .rate-col { width: 70px; text-align: right; font-family: 'Courier New', monospace; }
.wh347-grid .amount-col { width: 85px; text-align: right; font-family: 'Courier New', monospace; }
.wh347-grid .classification-col { width: 120px; }
.wh347-grid .name-col { width: 150px; }
.wh347-grid .total-row { font-weight: bold; background: var(--bg-tertiary, #f8f9fa); border-top: 2px solid var(--border-color, #dee2e6); }
.wh347-grid tbody tr:hover { background: var(--bg-secondary, #f1f3f5); }

/* Wage compliance indicators */
.wage-compliant { color: var(--success, #28a745); }
.wage-compliant::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 4px; font-size: 10px; }
.wage-violation { color: var(--danger, #dc3545); font-weight: bold; }
.wage-violation::before { content: '\f071'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 4px; font-size: 10px; }

/* Violation alert cards */
.violation-alert {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    font-size: 13px;
}
.violation-alert .shortfall { color: var(--danger, #dc3545); font-weight: bold; }

/* Prevailing wage rate table */
.wage-rate-table { border-collapse: collapse; }
.wage-rate-table th, .wage-rate-table td { border: 1px solid var(--border-color, #dee2e6); padding: 6px 8px; }
.wage-rate-table th { background: var(--bg-tertiary, #f8f9fa); font-weight: 600; font-size: 12px; }
.wage-rate-table .rate-cell { font-family: 'Courier New', monospace; }
.wage-rate-table tr.expired { opacity: 0.5; }
.wage-rate-table tr.expired td { text-decoration: line-through; }
.wage-rate-table tr.effective { background: rgba(40, 167, 69, 0.05); }
.wage-rate-table tbody tr:hover { background: var(--bg-secondary, #f1f3f5); }

/* Compliance summary cards */
.cp-compliance-card {
    padding: 12px 16px;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: 6px;
    text-align: center;
}
.cp-compliance-value { font-size: 24px; font-weight: 700; }
.cp-compliance-label { font-size: 12px; color: var(--text-muted, #6c757d); margin-top: 2px; }

/* WH-347 wide modal */
.modal-content.modal-wh347 { max-width: 1200px; width: 95%; }

/* =====================================================
   Sprint 8O: Commissioning (Cx) Workflow
   ===================================================== */

/* Commissioning system cards */
.cx-system-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.15s;
    cursor: pointer;
}
.cx-system-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.cx-system-card .system-type-icon { font-size: 1.5em; margin-right: 12px; }
.cx-system-card .system-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cx-system-card .system-stats { display: flex; gap: 16px; font-size: 0.85em; color: var(--text-secondary); }

/* Workflow step indicator */
.cx-workflow-steps { display: flex; align-items: center; gap: 4px; margin: 12px 0; flex-wrap: wrap; }
.cx-workflow-step {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75em;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-muted);
    white-space: nowrap;
}
.cx-workflow-step.completed { background: var(--success-light, #d4edda); color: var(--success); }
.cx-workflow-step.current { background: var(--primary); color: white; }
.cx-workflow-step.on-hold { background: var(--warning-light, #fff3cd); color: var(--warning); }
.cx-workflow-arrow { color: var(--text-muted); font-size: 0.75em; }

/* Tab bar (vanilla — no Bootstrap) */
.cx-tab-bar { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 16px; padding: 0 16px; }
.cx-tab-btn {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.cx-tab-btn:hover { color: var(--text-primary); }
.cx-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Test list */
.cx-test-group { margin-bottom: 20px; }
.cx-test-group-header {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}
.cx-test-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 6px;
}
.cx-test-item .test-status-icon { width: 24px; text-align: center; font-size: 1.1em; }
.cx-test-item .test-status-icon.pass { color: var(--success); }
.cx-test-item .test-status-icon.fail { color: var(--danger); }
.cx-test-item .test-status-icon.pending { color: var(--text-muted); }
.cx-test-item .test-status-icon.waived { color: var(--warning); }
.cx-test-item .test-status-icon.inprogress { color: var(--primary); }

/* Punch list items */
.cx-punch-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-left: 3px solid;
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border-radius: 0 6px 6px 0;
}
.cx-punch-item.critical { border-left-color: var(--danger); }
.cx-punch-item.major { border-left-color: var(--warning); }
.cx-punch-item.minor { border-left-color: var(--info); }

/* Progress donut */
.cx-progress-donut { width: 120px; height: 120px; }

/* Acceptance certificate */
.cx-certificate {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}
.cx-certificate .cert-title { font-size: 1.3em; font-weight: 700; margin-bottom: 8px; }
.cx-certificate .cert-number { font-family: monospace; font-size: 1.1em; color: var(--primary); }
.cx-certificate .cert-details { margin-top: 16px; text-align: left; font-size: 0.9em; }

/* Priority badges */
.cx-priority-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    display: inline-block;
}
.cx-priority-badge.critical { background: var(--danger-light, #f8d7da); color: var(--danger); }
.cx-priority-badge.high { background: var(--warning-light, #fff3cd); color: var(--warning); }
.cx-priority-badge.normal { background: var(--bg-secondary); color: var(--text-secondary); }
.cx-priority-badge.low { background: var(--info-light, #d1ecf1); color: var(--info); }

/* System type badge colors */
.cx-type-badge { padding: 2px 10px; border-radius: 4px; font-size: 0.75em; font-weight: 600; }
.cx-type-badge.hvac { background: #e3f2fd; color: #1565c0; }
.cx-type-badge.electrical { background: #fff8e1; color: #f57f17; }
.cx-type-badge.plumbing { background: #e8eaf6; color: #283593; }
.cx-type-badge.fire-protection { background: #fce4ec; color: #c62828; }
.cx-type-badge.controls { background: #e8f5e9; color: #2e7d32; }

/* Detail table in overview */
.cx-system-card .detail-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-color); }
#cxTab-overview .detail-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-color); }

/* Commissioning modals must stack above taskDetailModal (z-index: 1000) */
#cxSystemDetailModal,
#cxAddSystemModal,
#cxAddTestModal {
    z-index: 1050;
}

/* Sprint 8O-CX: System Type Configuration (Org Settings) */
.cx-system-type-list { display: flex; flex-direction: column; gap: 4px; }
.cx-system-type-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-primary); transition: all 0.15s;
}
.cx-system-type-row:hover { border-color: var(--primary-light, #93c5fd); background: var(--bg-secondary); }
.cx-system-type-row.inactive { opacity: 0.55; }
.cx-type-row-drag { display: flex; flex-direction: column; gap: 2px; }
.cx-type-row-drag .btn-icon { padding: 2px 4px; font-size: 10px; }
.cx-type-row-icon { font-size: 1.3em; width: 28px; text-align: center; color: var(--primary); flex-shrink: 0; }
.cx-type-row-info { flex: 1; min-width: 0; }
.cx-type-row-name { font-weight: 600; font-size: 14px; }
.cx-type-row-desc { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.cx-type-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cx-icon-picker { display: flex; align-items: center; }
.cx-icon-picker select { flex: 1; }

/* Sprint 8O-CX: Template Management (Org Settings) */
.cx-template-groups { display: flex; flex-direction: column; gap: 8px; }
.cx-template-group { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.cx-template-group-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; background: var(--bg-secondary); cursor: pointer;
    font-weight: 600; font-size: 14px; user-select: none;
}
.cx-template-group-header:hover { background: var(--bg-hover, #f1f5f9); }
.cx-template-count { font-weight: 400; color: var(--text-secondary); font-size: 13px; }
.cx-collapse-icon { margin-left: auto; transition: transform 0.2s; font-size: 12px; color: var(--text-muted); }
.cx-template-group.collapsed .cx-collapse-icon { transform: rotate(-90deg); }
.cx-template-group.collapsed .cx-template-group-body { display: none; }
.cx-template-group-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cx-template-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.cx-template-card {
    padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-primary); transition: all 0.15s;
}
.cx-template-card:hover { border-color: var(--primary-light, #93c5fd); }
.cx-template-card.global { border-left: 3px solid var(--text-muted); }
.cx-template-card.org-specific { border-left: 3px solid var(--primary); }
.cx-template-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cx-template-card-info { display: flex; align-items: center; gap: 6px; }
.cx-template-card-name { font-weight: 600; font-size: 13px; }
.cx-template-card-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.cx-template-card-actions { display: flex; gap: 6px; }

/* Sprint 8O-CX: Template/Condition Editor Rows */
.cx-editor-row {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0; border-bottom: 1px solid var(--border-color);
}
.cx-editor-row:last-child { border-bottom: none; }
.cx-editor-row .form-control { font-size: 13px; padding: 6px 8px; }
.cx-editor-checkbox { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; color: var(--text-secondary); }
.cx-condition-row .form-control { font-size: 12px; padding: 5px 6px; }

/* Sprint 8O-CX: Badge helpers */
.badge-sm { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.badge-muted { background: var(--bg-secondary); color: var(--text-secondary); }
.badge-accent { background: #dbeafe; color: #1d4ed8; }

/* Sprint 8O-CX: Button helpers */
.btn-icon { background: none; border: none; cursor: pointer; padding: 4px; color: var(--text-secondary); border-radius: 4px; }
.btn-icon:hover { color: var(--text-primary); background: var(--bg-secondary); }
.btn-danger-text { color: var(--danger) !important; }
.btn-danger-text:hover { color: var(--danger) !important; background: #fef2f2 !important; }
.toggle-sm .toggle-slider { width: 32px; height: 18px; }
.toggle-sm .toggle-slider:before { width: 14px; height: 14px; }
.toggle-sm input:checked + .toggle-slider:before { transform: translateX(14px); }

/* Sprint 8O-CX: Modals z-index */
#cxSystemTypeEditModal,
#cxTemplateEditModal,
#cxTemplatePreviewModal {
    z-index: 1100;
}

/* =====================================================
   Sprint 8O-CX-Q: Category Badges
   ===================================================== */
.cx-cat-commissioning { background: #dbeafe; color: #1d4ed8; }
.cx-cat-quality { background: #dcfce7; color: #15803d; }
.cx-cat-both { background: #f3e8ff; color: #7c3aed; }

/* =====================================================
   Sprint 8O-CX-Q: Multi-Plan Test Plan Cards
   ===================================================== */
.test-plans-summary-bar {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px; background: var(--bg-secondary);
    border-radius: 8px; margin-bottom: 12px; font-size: 13px;
}
.test-plans-summary-bar .summary-stat {
    font-weight: 600; color: var(--text-primary);
}
.test-plans-summary-bar .summary-stat.pass { color: var(--success, #16a34a); }
.test-plans-summary-bar .summary-stat.fail { color: var(--danger, #dc2626); }
.test-plans-summary-bar .summary-stat.progress { color: var(--primary, #3b82f6); }

.test-plan-cards { display: flex; flex-direction: column; gap: 8px; }

.test-plan-card {
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-primary); overflow: hidden; transition: border-color 0.15s;
}
.test-plan-card:hover { border-color: var(--primary-light, #93c5fd); }

.test-plan-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; cursor: pointer; user-select: none;
    background: var(--bg-secondary); transition: background 0.15s;
}
.test-plan-card-header:hover { background: var(--bg-hover, #f1f5f9); }

.test-plan-card-left {
    display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
}
.test-plan-card-left .collapse-icon {
    font-size: 11px; color: var(--text-muted); transition: transform 0.2s;
    width: 16px; text-align: center; flex-shrink: 0;
}
.test-plan-card.expanded .collapse-icon { transform: rotate(90deg); }

.test-plan-card-name {
    font-weight: 600; font-size: 13px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

.test-plan-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.test-plan-card-stats {
    font-size: 12px; color: var(--text-secondary); white-space: nowrap;
}

.test-plan-card-body {
    display: none; padding: 16px; border-top: 1px solid var(--border-color);
}
.test-plan-card.expanded .test-plan-card-body { display: block; }

.test-plan-card-actions {
    display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}

/* Status badges for plans */
.plan-status-badge {
    font-size: 11px; padding: 2px 10px; border-radius: 12px;
    font-weight: 600; white-space: nowrap;
}
.plan-status-badge.not-started { background: var(--bg-secondary); color: var(--text-muted); }
.plan-status-badge.in-progress { background: #dbeafe; color: #1d4ed8; }
.plan-status-badge.pass { background: #dcfce7; color: #15803d; }
.plan-status-badge.fail { background: #fee2e2; color: #b91c1c; }
.plan-status-badge.waived { background: #fef3c7; color: #92400e; }

/* =====================================================
   Sprint 8O-CX-Q: Template Picker Modal
   ===================================================== */
.template-picker-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 400px; overflow-y: auto; padding: 4px 0;
}
.template-picker-group-header {
    font-weight: 600; font-size: 13px; padding: 8px 4px 4px;
    color: var(--text-secondary); border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.template-picker-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border: 1px solid var(--border-color);
    border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.template-picker-item:hover {
    border-color: var(--primary); background: var(--bg-secondary);
}
.template-picker-item-info { display: flex; flex-direction: column; gap: 2px; }
.template-picker-item-name { font-weight: 600; font-size: 13px; }
.template-picker-item-meta { font-size: 12px; color: var(--text-secondary); }

/* =====================================================
   Sprint 8O-CX-Q: Multi-Plan Empty State
   ===================================================== */
.test-plan-empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 32px 16px; text-align: center;
}
.test-plan-empty-state i {
    font-size: 28px; color: var(--text-muted); margin-bottom: 12px;
}
.test-plan-empty-state p {
    color: var(--text-secondary); font-size: 13px; margin: 0 0 16px;
}
.test-plan-empty-actions {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}

/* ── Sprint 8L: Weather-Adjusted Schedule Optimizer ── */

/* Summary cards */
.optimizer-summary { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.optimizer-summary-card {
    flex: 1; min-width: 120px; padding: 16px; border-radius: 8px;
    background: var(--bg-secondary); text-align: center;
    border: 1px solid var(--border-color);
}
.optimizer-summary-card .count { font-size: 2em; font-weight: 700; line-height: 1.2; }
.optimizer-summary-card .label { font-size: 0.8em; color: var(--text-secondary); margin-top: 4px; }
.optimizer-summary-card.conflicts .count { color: var(--danger, #dc3545); }
.optimizer-summary-card.recommendations .count { color: var(--warning, #ffc107); }
.optimizer-summary-card.applied .count { color: var(--success, #28a745); }

/* Recommendation cards */
.recommendation-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px; border: 1px solid var(--border-color);
    border-radius: 8px; margin-bottom: 8px; transition: background 0.15s;
}
.recommendation-card:hover { background: var(--bg-hover, rgba(0,0,0,0.02)); }
.recommendation-card.applied { opacity: 0.6; }
.recommendation-card .rec-checkbox { flex-shrink: 0; padding-top: 2px; }
.recommendation-card .rec-checkbox input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.recommendation-card .rec-content { flex: 1; min-width: 0; }
.recommendation-card .rec-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.recommendation-card .rec-task-name { font-weight: 600; }
.recommendation-card .rec-reason { font-size: 0.85em; color: var(--text-secondary); margin-bottom: 6px; }

.rec-type-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 0.75em;
    font-weight: 600; text-transform: uppercase; white-space: nowrap;
}
.rec-type-badge.postpone { background: rgba(220, 53, 69, 0.1); color: var(--danger, #dc3545); }
.rec-type-badge.pull-forward, .rec-type-badge.pullforward { background: rgba(40, 167, 69, 0.1); color: var(--success, #28a745); }
.rec-type-badge.swap { background: rgba(0, 123, 255, 0.1); color: var(--info, #0d6efd); }

.severity-badge {
    padding: 2px 8px; border-radius: 4px; font-size: 0.7em;
    font-weight: 600; text-transform: uppercase;
}
.severity-badge.high { background: rgba(220, 53, 69, 0.15); color: var(--danger, #dc3545); }
.severity-badge.medium { background: rgba(255, 193, 7, 0.2); color: #b8860b; }
.severity-badge.low { background: rgba(0, 123, 255, 0.1); color: var(--info, #0d6efd); }

.rec-applied-badge { color: var(--success, #28a745); font-size: 0.8em; font-weight: 600; }

.rec-swap-info {
    font-size: 0.85em; color: var(--text-secondary); margin-top: 4px;
    padding: 4px 8px; background: var(--bg-secondary); border-radius: 4px;
}

/* Date shift visualization */
.date-shift-bar { display: flex; align-items: center; gap: 8px; font-size: 0.85em; }
.date-shift-bar .original-dates { text-decoration: line-through; color: var(--text-muted); }
.date-shift-bar .arrow { color: var(--text-muted); }
.date-shift-bar .proposed-dates { font-weight: 600; color: var(--primary, #0d6efd); }

/* Conflict timeline */
.optimizer-timeline-section { margin-bottom: 20px; }
.optimizer-timeline-section h4 { margin-bottom: 8px; }
.optimizer-timeline-canvas {
    width: 100%; height: 200px; border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Recommendations header */
.optimizer-recs-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.optimizer-recs-header h4 { margin: 0; }
.optimizer-recs-actions { display: flex; gap: 8px; }

/* Environment config table */
.env-config-category { margin-bottom: 20px; }
.env-config-category h5 { margin-bottom: 8px; text-transform: capitalize; }
.env-config-table .env-select { width: 130px; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-color); }

.env-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.75em; font-weight: 600; }
.env-badge.indoor { background: rgba(0, 123, 255, 0.1); color: var(--info, #0d6efd); }
.env-badge.outdoor { background: rgba(255, 193, 7, 0.15); color: #b8860b; }
.env-badge.either { background: var(--bg-secondary); color: var(--text-secondary); }

/* Run status badges */
.run-status-badge {
    padding: 2px 10px; border-radius: 4px; font-size: 0.75em;
    font-weight: 600; text-transform: capitalize;
}
.run-status-badge.pending { background: rgba(255, 193, 7, 0.15); color: #b8860b; }
.run-status-badge.reviewed { background: rgba(0, 123, 255, 0.1); color: var(--info, #0d6efd); }
.run-status-badge.applied { background: rgba(40, 167, 69, 0.1); color: var(--success, #28a745); }
.run-status-badge.partiallyapplied, .run-status-badge.partially-applied { background: rgba(255, 193, 7, 0.2); color: #b8860b; }
.run-status-badge.dismissed { background: var(--bg-secondary); color: var(--text-muted); }

/* Run history */
.optimizer-history { margin-top: 24px; }
.optimizer-history h4 { margin-bottom: 12px; }
.optimizer-history-row { cursor: pointer; }
.optimizer-history-row:hover { background: var(--bg-hover, rgba(0,0,0,0.02)); }

/* Run detail meta */
.optimizer-run-meta {
    display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px;
    padding: 12px; background: var(--bg-secondary); border-radius: 8px;
    font-size: 0.9em;
}

/* Loading/empty/error states */
.optimizer-loading {
    display: flex; align-items: center; gap: 12px; padding: 24px;
    color: var(--text-secondary); justify-content: center;
}
.optimizer-loading i { font-size: 1.2em; }
.optimizer-empty {
    text-align: center; padding: 24px; color: var(--text-muted);
    font-style: italic;
}
.optimizer-error {
    display: flex; align-items: center; gap: 8px; padding: 16px;
    color: var(--danger, #dc3545); background: rgba(220, 53, 69, 0.05);
    border-radius: 8px;
}
.optimizer-notes {
    display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px;
    background: rgba(0, 123, 255, 0.05); border-radius: 8px;
    color: var(--text-secondary); margin-bottom: 16px; font-size: 0.9em;
}

/* ── Sprint 8J: Custom Report Builder ── */

.report-builder-layout {
    display: grid;
    grid-template-columns: 260px 1fr 400px;
    gap: 16px;
    height: calc(100vh - 120px);
    overflow: hidden;
}

.report-sidebar {
    border-right: 1px solid var(--border-color);
    padding: 16px;
    overflow-y: auto;
}

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

.report-sidebar .sidebar-header h3 { margin: 0; font-size: 1rem; }

.report-sidebar h4 {
    margin: 12px 0 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.report-sidebar .sidebar-divider {
    border-top: 1px solid var(--border-color);
    margin: 12px 0;
}

.report-category-filter { margin-bottom: 10px; }
.report-category-filter select { font-size: 0.85rem; }

.report-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-list-item {
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.report-list-item:hover { background: var(--bg-hover); }

.report-list-item.active {
    background: var(--primary-light);
    border-color: var(--primary);
}

.report-list-item .report-item-name {
    font-weight: 500;
    margin-bottom: 2px;
    font-size: 0.85rem;
}

.report-list-item .report-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.report-category-tag {
    background: var(--bg-hover);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.report-empty-hint {
    padding: 16px 8px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    font-style: italic;
}

/* Designer Workspace */

.report-designer {
    padding: 16px;
    overflow-y: auto;
}

.designer-step {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.designer-step h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Source Picker */

.source-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.source-card {
    padding: 12px 8px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.source-card:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.source-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.source-card i {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 4px;
    display: block;
}

.source-card .source-label {
    font-size: 0.75rem;
    font-weight: 500;
}

.selected-sources-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.selected-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
}

.selected-source-chip .remove-source {
    cursor: pointer;
    opacity: 0.7;
    font-size: 1rem;
    line-height: 1;
}

.selected-source-chip .remove-source:hover { opacity: 1; }

/* Field Selector (drag-and-drop) */

.field-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 40px;
}

.report-field-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.report-field-item:hover { border-color: var(--primary); }

.report-field-item.dragging {
    opacity: 0.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.report-field-item .drag-handle {
    color: var(--text-tertiary);
    cursor: grab;
}

.report-field-item .field-source-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: var(--bg-hover);
    border-radius: 4px;
    color: var(--text-secondary);
}

.report-field-item .field-name {
    flex: 1;
    font-size: 0.85rem;
}

.report-field-item .field-type-badge {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/* Filter Builder */

.filter-builder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr 32px;
    gap: 8px;
    align-items: center;
}

.filter-row select,
.filter-row input {
    font-size: 0.85rem;
}

.filter-row .remove-filter {
    cursor: pointer;
    color: var(--danger);
    text-align: center;
}

/* Chart Type Picker */

.chart-type-picker {
    display: flex;
    gap: 8px;
}

.chart-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
}

.chart-type-btn:hover { border-color: var(--primary); }

.chart-type-btn.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.chart-type-btn i { font-size: 1.2rem; }
.chart-type-btn span { font-size: 0.75rem; }

/* Designer Actions */

.designer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
}

.export-dropdown { position: relative; }

.export-dropdown .dropdown-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 140px;
    z-index: 100;
}

.export-dropdown .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
}

.export-dropdown .dropdown-menu a:hover { background: var(--bg-hover); }

/* Results Panel */

.report-results-panel {
    border-left: 1px solid var(--border-color);
    padding: 16px;
    overflow: auto;
}

.report-results-container { min-height: 200px; }

.report-results-container .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.report-results-container .results-header h4 { margin: 0; }

.report-results-container .results-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Results table */

.report-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.report-results-table th {
    background: var(--bg-hover);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.report-results-table th:hover { background: var(--border-color); }

.report-results-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
}

.report-results-table tr:hover td { background: var(--bg-hover); }

/* Chart canvas */

.report-chart-container {
    position: relative;
    width: 100%;
    min-height: 250px;
    margin-bottom: 16px;
}

.report-chart-container canvas {
    width: 100%;
    height: 250px;
}

/* Empty state */

.report-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.report-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.report-empty-state h3 {
    margin-bottom: 8px;
    color: var(--text-primary);
}

.report-empty-state p { margin: 0; }

/* Loading / error */

.report-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px;
    color: var(--text-secondary);
}

.report-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px;
    color: var(--danger);
    background: rgba(220, 53, 69, 0.05);
    border-radius: var(--radius);
}

/* Aggregates */

.report-aggregates {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: var(--radius);
    font-size: 0.85rem;
}

.report-aggregates .agg-section {
    margin-bottom: 6px;
}

.report-aggregates .agg-section:last-child { margin-bottom: 0; }

/* Schedule badge */

.schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.schedule-badge.active {
    background: var(--success-light, #e6f9ee);
    color: var(--success);
}

.schedule-badge.paused {
    background: var(--warning-light, #fff8e6);
    color: var(--warning);
}

/* Responsive: collapse on narrow */

@media (max-width: 1200px) {
    .report-builder-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: auto;
    }

    .report-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 200px;
    }

    .report-results-panel {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

/* =========================================================================
   Sprint 8Q: Descendant Data Rollup
   ========================================================================= */

/* Rollup Toggle Switch */
.rollup-toggle {
    display: flex;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.rollup-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    user-select: none;
}

.rollup-toggle-input {
    display: none;
}

.rollup-toggle-switch {
    position: relative;
    width: 34px;
    height: 18px;
    background: var(--border-color);
    border-radius: 9px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.rollup-toggle-switch::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}

.rollup-toggle-input:checked + .rollup-toggle-switch {
    background: var(--accent);
}

.rollup-toggle-input:checked + .rollup-toggle-switch::after {
    transform: translateX(16px);
}

.rollup-toggle-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Source Task Group Headers */
.rollup-group {
    margin-bottom: 12px;
}

.rollup-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    margin: 12px 0 4px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--accent);
    font-size: 12px;
}

.rollup-group-header.current-task {
    border-left-color: var(--success);
}

.rollup-source-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.rollup-source-link:hover {
    text-decoration: underline;
}

.rollup-item-count {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Read-Only Descendant Items */
.rollup-readonly-row {
    opacity: 0.8;
    background: var(--bg-secondary);
}

.rollup-readonly-row:hover {
    opacity: 1;
}

.rollup-view-link {
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

.rollup-view-link:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 9 & 10 Frontend CSS
   ═══════════════════════════════════════════════════════════════════ */

/* Phase 9/10 panels are relocated into .content-area by main.js on init,
   so they occupy the same space as tree view, gantt, kanban, etc. */

/* ── Sprint 9A: Workflow Automation ────────────────────────────── */
/* ================================================================
   Sprint 9A: Workflow Automation
   ================================================================ */

/* --- Automation Tab Buttons --- */
.automation-tab-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.automation-tab-btn:hover {
    background: var(--background);
}

.automation-tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* --- Rule/Webhook Card --- */
.automation-rule-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--background);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.automation-rule-card:hover {
    box-shadow: var(--shadow);
}

.automation-rule-card.enabled {
    border-left: 3px solid var(--success);
}

.automation-rule-card.disabled {
    border-left: 3px solid var(--text-muted);
    opacity: 0.8;
}

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

.automation-rule-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.automation-rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.automation-rule-meta i {
    margin-right: 3px;
}

.automation-rule-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.automation-rule-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* --- Toggle Switch --- */
.automation-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.automation-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.automation-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border);
    border-radius: 10px;
    transition: background 0.2s;
}

.automation-toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.automation-toggle input:checked + .automation-toggle-slider {
    background: var(--success);
}

.automation-toggle input:checked + .automation-toggle-slider::before {
    transform: translateX(16px);
}

/* --- Decision Tree Canvas --- */
.automation-tree-canvas {
    position: relative;
    min-height: 400px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--background);
    overflow: auto;
}

.automation-canvas-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.automation-canvas-toolbar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--background);
    border-top: 1px solid var(--border);
    z-index: 5;
}

/* --- Tree Nodes --- */
.automation-node {
    position: absolute;
    min-width: 160px;
    max-width: 200px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: grab;
    z-index: 2;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.automation-node:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.automation-node.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.automation-node.trigger {
    border-color: var(--success);
}

.automation-node.condition {
    border-color: var(--warning);
}

.automation-node.action {
    border-color: var(--primary);
}

.automation-node-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.automation-node.trigger .automation-node-header {
    background: rgba(34, 197, 94, 0.08);
}

.automation-node.condition .automation-node-header {
    background: rgba(245, 158, 11, 0.08);
}

.automation-node.action .automation-node-header {
    background: rgba(59, 130, 246, 0.08);
}

.automation-node-body {
    padding: 6px 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- Tree Section Layout with Slide-in Panel --- */
.automation-tree-section {
    margin-top: 12px;
}

.automation-tree-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

/* Node Properties slide-in panel */
.automation-node-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 33%;
    min-width: 260px;
    max-width: 360px;
    background: var(--bg-white);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    z-index: 10;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
    pointer-events: none;
}

.automation-node-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.automation-node-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--background);
    flex-shrink: 0;
}

.automation-node-panel-header h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.automation-node-panel-header h4 i {
    color: var(--primary-color);
    font-size: 0.75rem;
}

.automation-node-panel-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.automation-node-panel-close:hover {
    color: var(--text-primary);
    background: var(--background);
}

#automationNodeEditor {
    flex: 1;
    overflow-y: auto;
}

/* --- Dry Run Results --- */
.dry-run-result {
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.85rem;
}

.dry-run-result.would-execute {
    background: rgba(34, 197, 94, 0.06);
    border-left: 3px solid var(--success);
}

.dry-run-result.would-skip {
    background: rgba(156, 163, 175, 0.06);
    border-left: 3px solid var(--text-muted);
}

/* --- Status badges for active/inactive --- */
.status-active {
    background: var(--success);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-inactive {
    background: var(--text-muted);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── Sprint 9A: Trigger Config GUI Polish ─────────────────────── */

/* Outer trigger config container — subtle, no heavy border */
.trigger-config-container {
    padding: 10px 0 0;
}

/* Section label inside trigger config */
.trigger-config-section {
    margin-bottom: 10px;
}

.trigger-config-section > .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.trigger-config-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}

/* Chip-style checkbox grid */
.trigger-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    padding: 2px 0;
}

/* Hide scrollbar but keep scrollable */
.trigger-chip-grid::-webkit-scrollbar {
    width: 3px;
}
.trigger-chip-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* Individual chip item */
.trigger-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.trigger-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.04);
}

.trigger-chip input[type="checkbox"] {
    display: none;
}

.trigger-chip.checked {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
}

.trigger-chip.checked::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.6rem;
    margin-right: -1px;
}

/* Merge field buttons row */
.merge-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    align-items: center;
}

.merge-field-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px dashed var(--border-color);
    background: transparent;
    font-size: 0.68rem;
    font-family: 'SFMono-Regular', 'Consolas', monospace;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.merge-field-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-style: solid;
    background: rgba(37, 99, 235, 0.04);
}

.merge-field-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-right: 4px;
    font-style: italic;
}

/* ── Sprint 9B: Collaboration Score ────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 9B: Collaboration Score & Team Health
   ═══════════════════════════════════════════════════════════ */

/* ── Score Gauge ── */
.collab-score-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* ── Component Cards ── */
.collab-component-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.collab-component-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 14px;
    text-align: center;
}

.collab-component-card .component-score {
    font-size: 1.8rem;
    font-weight: 700;
}

/* ── Heatmap ── */
.collab-heatmap-container {
    overflow-x: auto;
}

.collab-heatmap-table {
    border-collapse: collapse;
    font-size: 0.8rem;
}

.collab-heatmap-table th,
.collab-heatmap-table td {
    padding: 6px 8px;
    text-align: center;
    border: 1px solid var(--border);
    min-width: 40px;
}

.collab-heatmap-table th {
    background: var(--hover-bg);
    font-weight: 600;
    font-size: 0.75rem;
}

.heatmap-cell {
    cursor: default;
    font-size: 0.75rem;
    min-width: 36px;
    height: 36px;
}

.heatmap-self {
    background: var(--hover-bg);
    color: var(--text-muted);
}

/* ── Bottleneck Cards ── */
.bottleneck-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--danger);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    margin-bottom: 8px;
}

/* ── Intervention Cards ── */
.intervention-card {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-left-width: 4px;
}

.intervention-card.severity-high {
    border-left-color: var(--danger);
}

.intervention-card.severity-medium {
    border-left-color: var(--warning);
}

.intervention-card.severity-low {
    border-left-color: var(--success);
}

/* ── Trend Container ── */
.collab-trend-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 16px;
}

.collab-trend-container canvas {
    width: 100%;
    max-height: 300px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .collab-component-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    #collabDashboardContent > div:first-child {
        flex-direction: column;
    }
}

/* ── Sprint 9C: Burnout Detection ──────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 9C: Time Debt & Burnout Detection
   ═══════════════════════════════════════════════════════════ */

/* ── Team Grid ── */
.burnout-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

/* ── User Cards ── */
.burnout-user-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.burnout-user-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.burnout-user-card.risk-low {
    border-left: 4px solid var(--success);
}

.burnout-user-card.risk-moderate {
    border-left: 4px solid var(--warning);
}

.burnout-user-card.risk-high {
    border-left: 4px solid #f97316;
}

.burnout-user-card.risk-critical {
    border-left: 4px solid var(--danger);
}

/* ── Risk Badges ── */
.burnout-risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.burnout-risk-badge.low {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.burnout-risk-badge.moderate {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.burnout-risk-badge.high {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.burnout-risk-badge.critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* ── Alert Cards ── */
.burnout-alert-card {
    padding: 10px 14px;
    border-radius: var(--border-radius);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border);
    gap: 10px;
}

.burnout-alert-card.severity-critical {
    border-left: 4px solid var(--danger);
}

.burnout-alert-card.severity-warning {
    border-left: 4px solid var(--warning);
}

.burnout-alert-card.severity-info {
    border-left: 4px solid var(--primary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .burnout-team-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Sprint 9D: Parallel Path Analyzer ─────────────────────────── */
/* ── Engineering Dashboard Aesthetic ──────────────────────────────── */

/* ── Animations ──────────────────────────────── */
@keyframes pa-fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pa-barGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes pa-chainSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pa-numberPop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes pa-scanline {
    from { background-position: 0 0; }
    to   { background-position: 0 4px; }
}

/* ── Tab Navigation ──────────────────────────── */
.path-analyzer-tab-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 10px 20px 9px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    position: relative;
}
.path-analyzer-tab-btn i {
    margin-right: 5px;
    font-size: 0.64rem;
    opacity: 0.7;
}
.path-analyzer-tab-btn:hover {
    color: var(--text);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.06);
}
.path-analyzer-tab-btn:hover i { opacity: 1; }
.path-analyzer-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary) !important;
    font-weight: 700;
}
.path-analyzer-tab-btn.active i { opacity: 1; }

/* ── Stats Grid ────────────────────────────────── */
.path-analyzer-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.path-analyzer-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 14px 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
    animation: pa-fadeSlideUp 0.5s ease both;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.path-analyzer-stat-card:nth-child(1) { animation-delay: 0s; }
.path-analyzer-stat-card:nth-child(2) { animation-delay: 0.08s; }
.path-analyzer-stat-card:nth-child(3) { animation-delay: 0.16s; }
.path-analyzer-stat-card:nth-child(4) { animation-delay: 0.24s; }
/* Top accent bar */
.path-analyzer-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary);
    transition: height 0.25s ease;
}
/* Subtle grid-line texture */
.path-analyzer-stat-card::after {
    content: '';
    position: absolute;
    inset: 3px 0 0 0;
    background-image:
        linear-gradient(rgba(var(--primary-rgb, 59, 130, 246), 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb, 59, 130, 246), 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.path-analyzer-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
}
.path-analyzer-stat-card:hover::before { height: 4px; }
.path-analyzer-stat-card:hover::after { opacity: 1; }
/* Critical variant */
.path-analyzer-stat-card.path-analyzer-stat-critical {
    border-color: rgba(239, 68, 68, 0.2);
}
.path-analyzer-stat-card.path-analyzer-stat-critical::before {
    background: var(--danger);
}
.path-analyzer-stat-card.path-analyzer-stat-critical:hover {
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.08);
}
.path-analyzer-stat-card.path-analyzer-stat-critical::after {
    background-image:
        linear-gradient(rgba(239, 68, 68, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 68, 68, 0.025) 1px, transparent 1px);
}
/* Warning variant */
.path-analyzer-stat-card.path-analyzer-stat-warning {
    border-color: rgba(245, 158, 11, 0.2);
}
.path-analyzer-stat-card.path-analyzer-stat-warning::before {
    background: var(--warning);
}
.path-analyzer-stat-card.path-analyzer-stat-warning:hover {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.08);
}
.path-analyzer-stat-card.path-analyzer-stat-warning::after {
    background-image:
        linear-gradient(rgba(245, 158, 11, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.025) 1px, transparent 1px);
}
/* Value readout */
.path-analyzer-stat-value {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 1;
}
.path-analyzer-stat-critical .path-analyzer-stat-value {
    color: var(--danger);
}
.path-analyzer-stat-warning .path-analyzer-stat-value {
    color: var(--warning);
}
/* Label below value */
.path-analyzer-stat-label {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ── Summary Sections ─────────────────────────── */
.path-analyzer-summary-section {
    padding: 18px 20px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 14px;
    animation: pa-fadeSlideUp 0.5s ease both;
    animation-delay: 0.3s;
    position: relative;
}
.path-analyzer-summary-section h4 {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.path-analyzer-summary-section h4::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 12px;
    background: var(--primary);
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── Float Distribution Bars ─────────────────── */
.path-analyzer-float-dist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.path-analyzer-dist-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.path-analyzer-dist-label {
    width: 180px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
    color: var(--text);
    letter-spacing: 0.01em;
}
.path-analyzer-dist-bar {
    flex: 1;
    height: 28px;
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.04);
    border: 1px solid rgba(var(--primary-rgb, 59, 130, 246), 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.path-analyzer-dist-fill {
    height: 100%;
    border-radius: 3px;
    transform-origin: left center;
    animation: pa-barGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
}
/* Subtle striped texture on fill bars */
.path-analyzer-dist-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.08) 3px,
        rgba(255, 255, 255, 0.08) 6px
    );
    border-radius: 3px;
}
.path-analyzer-dist-row:nth-child(1) .path-analyzer-dist-fill { animation-delay: 0.1s; }
.path-analyzer-dist-row:nth-child(2) .path-analyzer-dist-fill { animation-delay: 0.2s; }
.path-analyzer-dist-row:nth-child(3) .path-analyzer-dist-fill { animation-delay: 0.3s; }
.path-analyzer-dist-row:nth-child(4) .path-analyzer-dist-fill { animation-delay: 0.4s; }
.path-analyzer-dist-count {
    width: 90px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: right;
    color: var(--text);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Near-Critical Path List ─────────────────── */
.path-analyzer-near-critical-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.path-analyzer-near-critical-path {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    font-size: 0.82rem;
    background: rgba(245, 158, 11, 0.03);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 5px;
    border-left: 3px solid var(--warning);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.path-analyzer-near-critical-path:hover {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}
.path-analyzer-near-critical-path strong {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--warning);
}

/* ── Task Chips ──────────────────────────────── */
.path-analyzer-task-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--surface, var(--border));
    color: var(--text);
    white-space: nowrap;
    border: 1px solid var(--border);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.path-analyzer-task-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.path-analyzer-chip-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #92400E;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.path-analyzer-chip-danger {
    background: rgba(239, 68, 68, 0.08);
    color: #B91C1C;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── Critical Path Chain ─────────────────────── */
.path-analyzer-critical-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 20px 0;
    position: relative;
}
/* Continuous vertical line behind all items */
.path-analyzer-critical-chain::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, var(--danger), rgba(239, 68, 68, 0.2));
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    border-radius: 1px;
}
.path-analyzer-critical-task {
    width: 100%;
    max-width: 560px;
    padding: 16px 20px;
    background: var(--background);
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-left: 4px solid var(--danger);
    border-radius: 6px;
    animation: pa-chainSlideIn 0.4s ease both;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    z-index: 1;
}
.path-analyzer-critical-task:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(1) { animation-delay: 0s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(2) { animation-delay: 0.06s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(3) { animation-delay: 0.12s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(4) { animation-delay: 0.18s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(5) { animation-delay: 0.24s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(6) { animation-delay: 0.3s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(7) { animation-delay: 0.36s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(8) { animation-delay: 0.42s; }
.path-analyzer-critical-task-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.path-analyzer-critical-task-header strong {
    font-size: 0.88rem;
    letter-spacing: -0.01em;
}
.path-analyzer-critical-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    animation: pa-numberPop 0.3s ease both;
}
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(1) .path-analyzer-critical-number { animation-delay: 0.15s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(2) .path-analyzer-critical-number { animation-delay: 0.21s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(3) .path-analyzer-critical-number { animation-delay: 0.27s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(4) .path-analyzer-critical-number { animation-delay: 0.33s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(5) .path-analyzer-critical-number { animation-delay: 0.39s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(6) .path-analyzer-critical-number { animation-delay: 0.45s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(7) .path-analyzer-critical-number { animation-delay: 0.51s; }
.path-analyzer-critical-chain > .path-analyzer-critical-task:nth-of-type(8) .path-analyzer-critical-number { animation-delay: 0.57s; }
.path-analyzer-critical-task-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: var(--text-muted);
    padding-left: 38px;
}
.path-analyzer-critical-task-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.72rem;
}
.path-analyzer-critical-task-meta span i {
    font-size: 0.64rem;
    opacity: 0.6;
}
/* Chain connector arrows */
.path-analyzer-chain-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2px;
    height: 24px;
    background: var(--danger);
    position: relative;
    opacity: 0.4;
    z-index: 1;
}
.path-analyzer-chain-arrow i { display: none; }
.path-analyzer-chain-arrow::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--danger);
}

/* ── Float Analysis Table ────────────────────── */
.path-analyzer-float-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}
.path-analyzer-float-table th,
.path-analyzer-float-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.path-analyzer-float-table thead th {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--background);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 12px;
}
/* Sortable header hover */
.path-analyzer-float-table thead th[onclick] {
    cursor: pointer;
    transition: color 0.15s ease;
    user-select: none;
}
.path-analyzer-float-table thead th[onclick]:hover {
    color: var(--primary);
}
.path-analyzer-float-table tbody tr {
    transition: background 0.1s ease;
}
.path-analyzer-float-table tbody tr:hover {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.04);
}
/* Alternating subtle striping */
.path-analyzer-float-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.01);
}
.path-analyzer-float-table tbody tr:nth-child(even):hover {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.04);
}
/* Schedule columns (ES, EF, LS, LF) — distinct grouped background */
.path-analyzer-float-table td:nth-child(n+4):nth-child(-n+7) {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.025);
    border-left: 1px solid rgba(var(--primary-rgb, 59, 130, 246), 0.06);
}
.path-analyzer-float-table td:nth-child(4) {
    border-left: 2px solid rgba(var(--primary-rgb, 59, 130, 246), 0.12);
}
.path-analyzer-float-table td:nth-child(7) {
    border-right: 2px solid rgba(var(--primary-rgb, 59, 130, 246), 0.12);
}
.path-analyzer-float-table thead th:nth-child(n+4):nth-child(-n+7) {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.04);
}
/* Float value columns — monospace, bold */
.path-analyzer-float-table td:nth-child(2),
.path-analyzer-float-table td:nth-child(3) {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.84rem;
}
/* Critical row */
.path-analyzer-float-critical {
    background: rgba(239, 68, 68, 0.03) !important;
    border-left: 3px solid var(--danger);
}
.path-analyzer-float-critical td:first-child {
    font-weight: 600;
}
/* Warning row */
.path-analyzer-float-warning {
    background: rgba(245, 158, 11, 0.03) !important;
    border-left: 3px solid var(--warning);
}
/* Task name column — always regular weight for non-critical */
.path-analyzer-float-table td:first-child {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.path-analyzer-float-table td:first-child i {
    margin-right: 6px;
}

/* ── Float Status Badges ─────────────────────── */
.path-analyzer-badge-critical,
.path-analyzer-badge-warning,
.path-analyzer-badge-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-width: 72px;
}
.path-analyzer-badge-critical {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.08);
}
.path-analyzer-badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #B45309;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.path-analyzer-badge-ok {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

/* ── Suggestions ─────────────────────────────── */
.path-analyzer-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.path-analyzer-suggestion-card {
    padding: 16px 20px;
    background: var(--background);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 6px;
    animation: pa-fadeSlideUp 0.4s ease both;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}
/* Subtle diagonal hash pattern on hover */
.path-analyzer-suggestion-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 60px;
    height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(var(--primary-rgb, 59, 130, 246), 0.015) 4px,
        rgba(var(--primary-rgb, 59, 130, 246), 0.015) 8px
    );
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.path-analyzer-suggestion-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.path-analyzer-suggestion-card:hover::after { opacity: 1; }
.path-analyzer-suggestion-card:nth-child(1) { animation-delay: 0s; }
.path-analyzer-suggestion-card:nth-child(2) { animation-delay: 0.06s; }
.path-analyzer-suggestion-card:nth-child(3) { animation-delay: 0.12s; }
.path-analyzer-suggestion-card:nth-child(4) { animation-delay: 0.18s; }
.path-analyzer-suggestion-card:nth-child(5) { animation-delay: 0.24s; }
.path-analyzer-suggestion-card:nth-child(6) { animation-delay: 0.3s; }
.path-analyzer-suggestion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.path-analyzer-suggestion-header i {
    font-size: 1rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.06);
    flex-shrink: 0;
}
.path-analyzer-suggestion-header strong {
    font-size: 0.88rem;
    letter-spacing: -0.01em;
}
.path-analyzer-suggestion-priority {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.path-analyzer-suggestion-priority.pa-priority-high {
    color: #DC2626;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.06);
}
.path-analyzer-suggestion-priority.pa-priority-medium {
    color: #B45309;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.path-analyzer-suggestion-priority.pa-priority-low {
    color: #0284C7;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
}
.path-analyzer-suggestion-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.55;
    padding-left: 38px;
}
.path-analyzer-suggestion-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: var(--text-muted);
    padding-top: 10px;
    padding-left: 38px;
    border-top: 1px solid var(--border);
}
.path-analyzer-suggestion-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    font-size: 0.72rem;
}
.path-analyzer-suggestion-meta i {
    font-size: 0.68rem;
    opacity: 0.6;
}

/* ── Gantt Overlay Classes (SVG .bar-wrapper groups) ── */
.path-analyzer-gantt-critical .bar {
    stroke: #EF4444 !important;
    stroke-width: 3px !important;
    animation: path-analyzer-critical-pulse 2s ease-in-out infinite;
}
@keyframes path-analyzer-critical-pulse {
    0%, 100% { stroke-width: 3px; }
    50% { stroke-width: 5px; }
}
.path-analyzer-gantt-near-critical .bar {
    stroke: #F59E0B !important;
    stroke-width: 2px !important;
}
.path-analyzer-gantt-near-critical {
    opacity: 0.85;
}
.path-analyzer-gantt-dimmed {
    opacity: 0.25;
}

/* ── Validation Results ──────────────────────── */
.path-analyzer-validation-success {
    text-align: center;
    padding: 28px 20px;
    color: var(--success);
}
.path-analyzer-validation-success i {
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.path-analyzer-validation-success h4 {
    margin: 10px 0;
    color: var(--success);
    font-size: 1rem;
}
.path-analyzer-validation-success p {
    color: var(--text-muted);
    font-size: 0.84rem;
}
.path-analyzer-validation-error {
    text-align: center;
    padding: 28px 20px;
    color: var(--danger);
}
.path-analyzer-validation-error i {
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.path-analyzer-validation-error h4 {
    margin: 10px 0;
    color: var(--danger);
    font-size: 1rem;
}
.path-analyzer-validation-error p {
    color: var(--text-muted);
    font-size: 0.84rem;
}
.path-analyzer-cycle-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 14px;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.1);
    border-radius: 6px;
}

/* ── Error Display ───────────────────────────── */
.path-analyzer-error {
    text-align: center;
    padding: 28px 20px;
    color: var(--danger);
}
.path-analyzer-error i {
    font-size: 2.2rem;
    margin-bottom: 10px;
}
.path-analyzer-error p {
    margin: 4px 0;
}

/* ── Inline Summary ──────────────────────────── */
.path-analyzer-inline-summary {
    padding: 14px 18px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    border-left: 3px solid var(--danger);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .path-analyzer-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .path-analyzer-stat-value { font-size: 1.8rem; }
    .path-analyzer-dist-label { width: 120px; font-size: 0.68rem; }
    .path-analyzer-dist-count { width: 70px; }
    .path-analyzer-critical-task { max-width: 100%; }
    .path-analyzer-suggestion-desc,
    .path-analyzer-suggestion-meta { padding-left: 0; }
}

/* ── Sprint 9E: Version History ────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 9E: Version History
   ═══════════════════════════════════════════════════════════ */

/* ── Tab Bar ── */
.vh-tab-btn {
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vh-tab-btn:hover {
    color: var(--text);
}

.vh-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ── Timeline ── */
.version-timeline {
    position: relative;
    padding-left: 32px;
    margin: 16px 0;
}

.version-timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-entry {
    position: relative;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: border-color 0.2s;
}

.timeline-entry:hover {
    border-color: var(--primary);
}

.timeline-entry::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--background);
}

.timeline-entry.status-change::before { background: var(--success); }
.timeline-entry.assignment-change::before { background: var(--warning); }
.timeline-entry.created::before { background: var(--accent); }

.timeline-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.timeline-entry-user {
    font-weight: 600;
    color: var(--text);
}

.timeline-entry-time {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.timeline-entry-body {
    font-size: 0.85rem;
}

/* ── Diff View ── */
.diff-view {
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 8px 0;
    border-radius: 4px;
    overflow: hidden;
}

.diff-added {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
    padding: 4px 8px;
    border-left: 3px solid var(--success);
}

.diff-removed {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    text-decoration: line-through;
    padding: 4px 8px;
    border-left: 3px solid var(--danger);
}

/* ── Value Display ── */
.vh-old-value {
    color: var(--danger);
    text-decoration: line-through;
    font-size: 0.85rem;
}

.vh-new-value {
    color: var(--success);
    font-weight: 600;
    font-size: 0.85rem;
}

.vh-entry-comment {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.vh-entry-comment i {
    margin-right: 4px;
}

.vh-entry-field {
    margin-bottom: 2px;
}

/* ── Session Groups ── */
.session-group {
    border-left: 3px solid var(--primary);
    padding-left: 12px;
    margin-bottom: 20px;
}

.session-group-header {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Entry Detail (click to expand) ── */
.timeline-entry.expanded {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vh-entry-detail {
    margin-top: 10px;
    padding: 12px;
    background: var(--bg-secondary, var(--surface));
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.83rem;
}

.vh-detail-row {
    display: flex;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.vh-detail-row:last-child {
    border-bottom: none;
}

.vh-detail-label {
    min-width: 110px;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.vh-detail-value {
    flex: 1;
    color: var(--text);
    word-break: break-word;
}

.vh-detail-diff {
    margin-top: 8px;
    padding: 0;
}

.vh-detail-diff-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ── Compare Bar ── */
.vh-compare-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid var(--primary);
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.85rem;
}

/* ── Summary ── */
.vh-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.vh-summary-card {
    text-align: center;
    padding: 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.vh-summary-card-warning {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.05);
}

.vh-summary-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.vh-summary-card-warning .vh-summary-value {
    color: var(--warning);
}

.vh-summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.vh-summary-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ── Frequency Chart ── */
.vh-frequency-chart {
    margin-top: 20px;
}

.vh-frequency-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.vh-frequency-label {
    min-width: 120px;
    font-size: 0.8rem;
    text-align: right;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vh-frequency-bar {
    flex: 1;
    height: 16px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.vh-frequency-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.vh-frequency-count {
    min-width: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
}

/* ── Phase Bar ── */
.phase-bar {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    margin: 12px 0;
}

.phase-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    min-width: 30px;
    transition: width 0.4s ease;
}

/* ── Phase Details ── */
.vh-phase-details {
    margin: 12px 0 20px;
}

.vh-phase-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.vh-phase-detail-row:last-child {
    border-bottom: none;
}

.vh-phase-indicator {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.vh-phase-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vh-phase-changes {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Key Decision Cards ── */
.key-decision-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

/* ── Insight Cards ── */
.insight-card {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

/* ── Bottleneck Cards ── */
.vh-bottleneck-card {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

/* ── Post-Mortem Duration ── */
.vh-pm-duration {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* ── Comparison Table ── */
.vh-comparison {
    margin: 0;
}

.vh-comparison-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.vh-comparison-dates {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.vh-comparison-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
}

.vh-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.vh-comparison-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 2px solid var(--border);
}

.vh-comparison-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.vh-diff-changed {
    background: rgba(245, 158, 11, 0.05);
}

.vh-diff-old {
    color: var(--danger);
}

.vh-diff-new {
    color: var(--success);
    font-weight: 600;
}

/* ── Activity Chart ── */
.vh-activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.vh-activity-chart {
    margin-bottom: 20px;
}

.vh-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: 0 4px;
    border-bottom: 1px solid var(--border);
}

.vh-chart-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

.vh-chart-bar {
    width: 100%;
    max-width: 20px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.vh-chart-bar-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* ── Type Distribution ── */
.vh-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.vh-type-label {
    min-width: 130px;
    font-size: 0.8rem;
    text-align: right;
    color: var(--text-muted);
}

.vh-type-bar {
    flex: 1;
    height: 14px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.vh-type-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

.vh-type-count {
    min-width: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
}

/* ── Most Changed / Most Active ── */
.vh-most-changed-row,
.vh-most-active-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.vh-most-changed-row:last-child,
.vh-most-active-row:last-child {
    border-bottom: none;
}

.vh-rank {
    font-weight: 700;
    color: var(--text-muted);
    min-width: 28px;
}

.vh-task-name,
.vh-user-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vh-change-count {
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

/* ── Sprint 9F: Integration Hub ────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   Sprint 9F: Integration Hub — CSS
   Provider catalog, integration cards, field mappings, sync status
   ═══════════════════════════════════════════════════════════════════ */

/* ── Provider Catalog Grid ── */
.integration-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ── Integration Card ── */
.integration-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 6px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.integration-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.integration-card.connected {
    border-left: 3px solid var(--success);
}

.integration-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.integration-card-header i {
    font-size: 1.5rem;
    color: var(--primary);
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.integration-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.integration-card-description {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex: 1;
    line-height: 1.4;
}

.integration-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
}

/* ── Entity Type Tags ── */
.integration-entity-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.integration-entity-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
    border-radius: 3px;
    color: var(--text-muted);
    text-transform: capitalize;
}

/* ── Status Indicators ── */
.integration-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
}

.integration-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.integration-status .status-dot.connected {
    background: var(--success);
}

.integration-status .status-dot.disconnected {
    background: var(--text-muted);
}

/* ── Last Sync Info ── */
.integration-last-sync {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* ── Sync Status Badge ── */
.sync-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.sync-status-badge.success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
}

.sync-status-badge.partial {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
}

.sync-status-badge.failed {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.sync-status-badge.unknown {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
}

/* ── Tab Bar (for config modal) ── */
.tab-bar {
    display: flex;
    gap: 0;
}

.tab-btn {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s;
}

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

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ── Field Mapping Table ── */
#integrationConfigTabContent table {
    border-collapse: collapse;
}

#integrationConfigTabContent table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 2px solid var(--border);
}

#integrationConfigTabContent table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

#integrationConfigTabContent table code {
    font-size: 0.8rem;
    padding: 1px 4px;
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
    border-radius: 3px;
}

/* ── Integration Summary ── */
.integration-summary {
    padding: 8px 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .integration-catalog {
        grid-template-columns: 1fr;
    }
}

/* ── Sprint 9G: In-App Messaging ───────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   Sprint 9G: In-App Messaging — CSS
   Chat panel, channels, messages, threads, mentions, search
   ═══════════════════════════════════════════════════════════════════ */

/* ── Chat Panel (fixed sidebar) ── */
.chat-panel {
    position: fixed;
    right: 0;
    top: 60px;
    bottom: 0;
    width: 380px;
    background: var(--bg-primary);
    border-left: none;
    z-index: 1000;
    display: none;
    flex-direction: column;
    box-shadow:
        -8px 0 32px rgba(0, 0, 0, 0.08),
        -1px 0 0 var(--border);
    animation: chatSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chatSlideIn {
    from { transform: translateX(100%); opacity: 0.5; }
    to   { transform: translateX(0);    opacity: 1; }
}

.chat-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    flex-shrink: 0;
}

.chat-panel-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-panel-header h3::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
    flex-shrink: 0;
}

.chat-panel-actions {
    display: flex;
    gap: 2px;
}

.chat-panel-actions .btn-icon {
    color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-md);
    transition: background 0.15s, color 0.15s;
}

.chat-panel-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.chat-search {
    padding: 10px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-search .form-control {
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 7px 14px 7px 34px;
    font-size: 0.82rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

.chat-search .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background-color: var(--bg-primary);
}

.chat-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Channel List ── */
.chat-channel-list {
    width: 180px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
    padding: 4px 0;
}

.chat-channel-group-label {
    padding: 12px 14px 4px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
}

.chat-channel-item {
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1px 6px;
    border-radius: var(--radius-md);
    border-left: none;
    transition: background 0.15s, transform 0.1s;
    color: var(--text-secondary);
}

.chat-channel-item:hover {
    background: rgba(37, 99, 235, 0.06);
    color: var(--text-primary);
}

.chat-channel-item.active {
    background: var(--primary-light);
    color: var(--primary-color);
    font-weight: 600;
    border-left: none;
}

.chat-channel-item .channel-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.chat-channel-unread {
    background: var(--primary-color);
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
    margin-left: 6px;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

/* ── Message Area ── */
.chat-message-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-primary);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.chat-empty-messages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 8px;
}

.chat-empty-messages i {
    color: var(--border-color) !important;
    font-size: 2.5rem !important;
}

.chat-empty-messages p {
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
    max-width: 180px;
    line-height: 1.5;
}

/* ── Channel Header Bar ── */
.chat-channel-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.chat-channel-header-info strong {
    font-size: 0.92rem;
    letter-spacing: -0.01em;
}

.chat-channel-desc {
    display: block;
    font-size: 0.73rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.chat-channel-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Messages ── */
.chat-date-divider {
    text-align: center;
    margin: 18px 0 10px;
    position: relative;
}

.chat-date-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
}

.chat-date-divider span {
    position: relative;
    background: var(--bg-primary);
    padding: 0 12px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chat-message {
    margin-bottom: 2px;
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-lg);
    transition: background 0.15s;
    position: relative;
}

.chat-message:hover {
    background: var(--bg-secondary);
}

.chat-message-highlight {
    background: rgba(59, 130, 246, 0.08) !important;
    transition: background 2s ease-out;
}

.chat-message-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

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

.chat-message-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.chat-message-user {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.chat-message-time {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.chat-edited-label {
    font-size: 0.63rem;
    color: var(--text-muted);
    font-style: italic;
}

.chat-message-body {
    font-size: 0.84rem;
    line-height: 1.5;
    word-wrap: break-word;
    color: var(--text-primary);
}

.chat-message-body .mention {
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    background: var(--primary-light);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.chat-message-body .mention:hover {
    background: rgba(37, 99, 235, 0.15);
}

.chat-message-body .chat-link {
    color: var(--primary-color);
    word-break: break-all;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 2px;
}

.chat-message-body .chat-link:hover {
    text-decoration-color: var(--primary-color);
}

.chat-message.deleted .chat-message-body {
    color: var(--text-muted);
    font-style: italic;
}

.chat-message-actions {
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    gap: 2px;
    position: absolute;
    right: 4px;
    top: -8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 2px;
    box-shadow: var(--shadow-sm);
}

.chat-message:hover .chat-message-actions {
    opacity: 1;
}

.chat-reply-count {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 600;
    padding: 3px 0;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-reply-count:hover {
    text-decoration: underline;
}

/* ── Input Area ── */
.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    align-items: flex-end;
    background: var(--bg-primary);
}

/* Full-width input spanning under channels + messages */
.chat-input-full {
    padding: 10px 16px;
}

.chat-input-area textarea {
    resize: none;
    flex: 1;
    font-size: 0.84rem;
    min-height: 54px;
    max-height: 140px;
    line-height: 1.45;
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input-area textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
    background: var(--bg-primary);
    outline: none;
}

.chat-input-area .btn-primary {
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    min-height: 54px;
    transition: transform 0.1s, box-shadow 0.2s;
}

.chat-input-area .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.chat-edit-input {
    font-size: 0.84rem;
}

/* ── Thread Panel ── */
/* When thread is open, hide the channel list so everything fits */
.chat-layout:has(.chat-thread-panel[style*="display: flex"]) .chat-channel-list,
.chat-layout:has(.chat-thread-panel[style*="display: block"]) .chat-channel-list,
.chat-thread-panel:not([style*="display: none"]) ~ .chat-channel-list {
    /* fallback handled by JS — see below */
}

.chat-thread-panel {
    width: 220px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: var(--bg-secondary);
    overflow: hidden;
}

.chat-thread-panel .chat-input-area {
    padding: 8px;
    gap: 4px;
}

.chat-thread-panel .chat-input-area textarea {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.78rem;
    border-radius: var(--radius-md);
}

.chat-thread-panel .chat-input-area .btn-primary {
    padding: 5px 8px;
    min-height: 30px;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.chat-thread-panel .chat-messages {
    padding: 8px 10px;
}

.chat-thread-panel .chat-message {
    gap: 6px;
}

.chat-thread-panel .chat-message-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.55rem;
}

.chat-thread-panel .chat-message-user {
    font-size: 0.76rem;
}

.chat-thread-panel .chat-message-body {
    font-size: 0.78rem;
}

.chat-thread-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    background: var(--bg-primary);
    letter-spacing: -0.01em;
}

.chat-thread-parent {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.chat-thread-divider {
    text-align: center;
    padding: 8px 0;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Linked Task ── */
.chat-linked-task {
    background: var(--primary-light);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: var(--radius-md);
    padding: 4px 10px;
    font-size: 0.75rem;
    margin-top: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-color);
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

.chat-linked-task:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.12);
}

/* ── Search Results ── */
.chat-search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.chat-search-result {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s, transform 0.1s;
}

.chat-search-result:hover {
    background: var(--bg-secondary);
    transform: translateX(2px);
}

.chat-search-result-meta {
    display: flex;
    gap: 8px;
    font-size: 0.73rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.chat-search-result-channel {
    font-weight: 700;
    color: var(--primary-color);
}

.chat-search-result-content {
    font-size: 0.82rem;
    line-height: 1.45;
}

.chat-search-result-content mark {
    background: rgba(245, 158, 11, 0.2);
    color: inherit;
    padding: 1px 3px;
    border-radius: var(--radius-sm);
}

/* ── Mention Dropdown ── */
.chat-mention-dropdown {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}

.chat-mention-option {
    padding: 7px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    border-radius: var(--radius-md);
    transition: background 0.1s;
}

.chat-mention-option:hover,
.chat-mention-option.selected {
    background: var(--primary-light);
}

.chat-mention-avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── DM User List ── */
.chat-dm-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.15s;
    font-size: 0.84rem;
}

.chat-dm-user-item:hover {
    background: var(--primary-light);
}

/* ── Nav Badge ── */
.nav-chat-btn {
    position: relative;
}

.chat-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger-color);
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.4);
    animation: chatBadgePulse 2s ease-in-out infinite;
}

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

/* ── Responsive ── */
@media (max-width: 768px) {
    .chat-panel {
        width: 100%;
    }

    .chat-channel-list {
        width: 130px;
    }

    .chat-thread-panel {
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background: var(--bg-primary);
        z-index: 1;
    }
}

/* ── Sprint 10A: OKR Dashboard ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 10A: OKRs (Objectives & Key Results)
   ═══════════════════════════════════════════════════════════ */

/* ── Summary Stats Row ── */
.okr-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.okr-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.okr-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.okr-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── Overall Progress Gauge ── */
.okr-progress-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.okr-gauge-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.okr-gauge-circle::before {
    content: '';
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--card-bg);
    position: absolute;
}

.okr-gauge-value {
    position: relative;
    z-index: 1;
    font-size: 1.4rem;
    font-weight: 700;
}

/* ── Objective Cards ── */
.okr-objectives-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.okr-objective-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.okr-objective-card.status-draft {
    border-left: 4px solid var(--text-muted);
}

.okr-objective-card.status-active {
    border-left: 4px solid var(--primary);
}

.okr-objective-card.status-completed {
    border-left: 4px solid var(--success);
}

.okr-objective-card.status-archived {
    border-left: 4px solid var(--text-muted);
    opacity: 0.7;
}

.okr-objective-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    cursor: pointer;
}

.okr-objective-header:hover {
    background: var(--hover-bg);
}

.okr-objective-title-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.okr-objective-title {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.okr-objective-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.okr-period-badge {
    background: var(--hover-bg);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.okr-owner-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.okr-owner-badge i {
    font-size: 0.7rem;
}

/* ── Progress Bar ── */
.okr-progress-bar-container {
    padding: 0 16px 8px 16px;
}

.okr-progress-bar {
    height: 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.okr-progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.okr-progress-bar-fill.progress-good {
    background: var(--success);
}

.okr-progress-bar-fill.progress-warning {
    background: var(--warning);
}

.okr-progress-bar-fill.progress-danger {
    background: var(--danger);
}

.okr-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Key Results (nested under objective) ── */
.okr-keyresults-container {
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    background: var(--hover-bg);
}

.okr-keyresults-container.collapsed {
    display: none;
}

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

.okr-keyresults-header h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
}

.okr-kr-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.okr-kr-row:last-child {
    margin-bottom: 0;
}

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

.okr-kr-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.okr-kr-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.okr-kr-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--hover-bg);
    border-radius: 2px;
    overflow: hidden;
}

.okr-kr-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.okr-kr-progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 45px;
    text-align: right;
}

.okr-kr-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.okr-kr-tasks-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--hover-bg);
    padding: 2px 8px;
    border-radius: 10px;
}

.okr-kr-tasks-badge i {
    font-size: 0.65rem;
}

/* ── Status Badges ── */
.okr-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.okr-status-badge.status-draft {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.okr-status-badge.status-active,
.okr-status-badge.status-ontrack {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.okr-status-badge.status-completed {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.okr-status-badge.status-atrisk {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.okr-status-badge.status-behind {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.okr-status-badge.status-notstarted {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.okr-status-badge.status-archived {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.okr-status-badge.status-closed {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* ── Action Buttons ── */
.okr-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.okr-actions .btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.okr-actions .btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

/* ── Expand/Collapse Chevron ── */
.okr-expand-icon {
    transition: transform 0.2s ease;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.okr-expand-icon.expanded {
    transform: rotate(90deg);
}

/* ── Task Search Results (Link Tasks Modal) ── */
.okr-task-search-results {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 8px;
}

.okr-task-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.okr-task-search-item:hover {
    background: var(--hover-bg);
}

.okr-task-search-item input[type="checkbox"] {
    flex-shrink: 0;
}

.okr-task-search-item .task-info {
    flex: 1;
    min-width: 0;
}

.okr-task-search-item .task-title {
    font-size: 0.85rem;
    font-weight: 500;
}

.okr-task-search-item .task-project {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.okr-task-search-item .task-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.okr-task-search-item.already-linked {
    opacity: 0.6;
}

/* ── Linked Tasks List ── */
.okr-linked-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 4px;
    font-size: 0.85rem;
}

.okr-linked-task-item .task-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.okr-linked-task-item .unlink-btn {
    color: var(--danger);
    cursor: pointer;
    border: none;
    background: none;
    font-size: 0.8rem;
    padding: 4px;
}

.okr-linked-task-item .unlink-btn:hover {
    color: var(--text-secondary);
}

/* ── Empty State ── */
.okr-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.okr-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.okr-empty-state p {
    font-size: 0.95rem;
    max-width: 400px;
    margin: 0 auto;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .okr-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .okr-objective-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .okr-objective-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .okr-kr-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .okr-kr-meta {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 17B: OKR Enhancements
   ═══════════════════════════════════════════════════════════ */

/* ── Check-In Timeline ── */
.checkin-timeline {
    max-height: 300px;
    overflow-y: auto;
}

.checkin-entry {
    padding: 10px 12px;
    border-left: 3px solid var(--primary-color, var(--primary));
    margin-bottom: 8px;
    background: var(--card-bg);
    border-radius: 0 4px 4px 0;
}

.checkin-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.checkin-values {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}

.checkin-progress { font-weight: 600; }

.checkin-notes {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
    font-style: italic;
}

.confidence-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.confidence-badge.conf-high { background: #dcfce7; color: #166534; }
.confidence-badge.conf-medium { background: #fef9c3; color: #854d0e; }
.confidence-badge.conf-low { background: #fecaca; color: #991b1b; }

.confidence-trend {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.trend-rising { color: #16a34a; }
.trend-stable { color: #6b7280; }
.trend-falling { color: #dc2626; }

/* ── Alignment Tree ── */
.alignment-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.orphan-warning {
    color: #dc2626;
    font-weight: 600;
}

.tree-node {
    border-left: 2px solid var(--border-color);
    margin: 2px 0;
}

.tree-node-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
}

.tree-node-content:hover {
    background: var(--hover-bg);
}

.level-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.level-badge.level-company { background: #7c3aed; color: white; }
.level-badge.level-team { background: var(--color-accent); color: white; }
.level-badge.level-individual { background: #059669; color: white; }

.tree-node-progress {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.85rem;
}

.tree-node-owner {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.orphan-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

.orphan-section h4 {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ── Score colors for closed objectives ── */
.score-achieved { color: #16a34a; }
.score-progressed { color: #ca8a04; }
.score-missed { color: #dc2626; }

/* ── OKR Auto-Status & Manual Override ── */
.okr-auto-status-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.manual-override-indicator {
    color: var(--warning);
    font-size: 0.7rem;
}

.manual-override-dropdown {
    position: relative;
    display: inline-block;
}

.override-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    min-width: 120px;
    padding: 4px 0;
}

.override-dropdown-menu.show {
    display: block;
}

.override-option {
    display: block;
    width: 100%;
    padding: 6px 12px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-color);
}

.override-option:hover {
    background: var(--hover-bg);
}

.override-option.status-ontrack { color: #16a34a; }
.override-option.status-atrisk { color: #ca8a04; }
.override-option.status-behind { color: #dc2626; }

.btn-xs {
    padding: 2px 4px;
    font-size: 0.7rem;
}

/* ── OKR History ── */
.okr-history-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
}

.history-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.history-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.history-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.history-objective-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    margin-bottom: 8px;
}

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

.history-obj-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.history-obj-score {
    font-size: 1.2rem;
    font-weight: 700;
}

.history-obj-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.history-score-category {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.history-obj-reflection {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    padding: 8px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
}

/* ── OKR Enhancement Buttons (in objective card) ── */
.okr-enhancement-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.okr-enhancement-actions .btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.okr-enhancement-actions .btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

/* ── Sprint 10B: Portfolio Management ──────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 10B: Portfolio Management
   ═══════════════════════════════════════════════════════════ */

/* ── Stats bar ── */
.portfolio-stats-bar {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.portfolio-stat-card {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.portfolio-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.portfolio-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── Filter bar ── */
.portfolio-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.portfolio-filter-bar select {
    max-width: 200px;
}

/* ── Portfolio card grid ── */
.portfolio-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.portfolio-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    overflow: hidden;
}

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

.portfolio-card-accent {
    height: 4px;
    width: 100%;
}

.portfolio-card-body {
    padding: 16px;
}

.portfolio-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.portfolio-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.portfolio-card-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.portfolio-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Health badges ── */
.health-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.health-badge.healthy {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.health-badge.at-risk {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.health-badge.critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.health-dot.healthy { background: var(--success); }
.health-dot.at-risk { background: var(--warning); }
.health-dot.critical { background: var(--danger); }

/* ── Health score display ── */
.health-score-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    border: 4px solid;
}

.health-score-large.healthy { border-color: var(--success); color: var(--success); }
.health-score-large.at-risk { border-color: var(--warning); color: var(--warning); }
.health-score-large.critical { border-color: var(--danger); color: var(--danger); }

/* ── Portfolio detail tabs ── */
.portfolio-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 16px;
}

.portfolio-detail-tabs .tab-btn {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.portfolio-detail-tabs .tab-btn:hover {
    color: var(--text-primary);
}

.portfolio-detail-tabs .tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ── Project cards within portfolio detail ── */
.portfolio-project-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.portfolio-project-card:hover {
    border-color: var(--primary);
}

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

.portfolio-project-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.portfolio-project-metrics {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.portfolio-project-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Progress bar (inline) ── */
.portfolio-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.portfolio-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.portfolio-progress-fill.healthy { background: var(--success); }
.portfolio-progress-fill.at-risk { background: var(--warning); }
.portfolio-progress-fill.critical { background: var(--danger); }
.portfolio-progress-fill.primary { background: var(--primary); }

/* ── Budget breakdown table ── */
.portfolio-budget-table {
    width: 100%;
    border-collapse: collapse;
}

.portfolio-budget-table th,
.portfolio-budget-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.portfolio-budget-table th {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.portfolio-budget-total {
    font-weight: 700;
    background: var(--hover-bg);
}

/* ── Resource conflict cards ── */
.resource-conflict-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--warning);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.resource-conflict-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.resource-conflict-user {
    font-weight: 600;
    font-size: 0.9rem;
}

.resource-conflict-count {
    background: var(--warning);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.resource-conflict-projects {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.resource-conflict-project-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-top: 1px solid var(--border-color);
}

/* ── Project picker in add modal ── */
.portfolio-project-picker {
    max-height: 400px;
    overflow-y: auto;
}

.portfolio-project-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.portfolio-project-picker-item:hover {
    background: var(--hover-bg);
}

.portfolio-project-picker-item input[type="checkbox"] {
    flex-shrink: 0;
}

.portfolio-project-picker-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.portfolio-project-picker-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ── Health indicator gauges ── */
.health-gauge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.health-gauge-item {
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.health-gauge-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.health-gauge-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Empty state ── */
.portfolio-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.portfolio-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.portfolio-empty-state p {
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* ── View toggle ── */
.portfolio-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    padding: 2px;
}

.portfolio-view-toggle .btn-icon.active {
    background: var(--primary);
    color: white;
}

/* ── Detail header with back button ── */
.portfolio-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.portfolio-detail-header .back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.2rem;
    padding: 4px;
}

.portfolio-detail-header .back-btn:hover {
    color: var(--primary);
}

.portfolio-detail-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.portfolio-detail-title h3 {
    margin: 0;
}

.portfolio-detail-actions {
    display: flex;
    gap: 8px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .portfolio-stats-bar {
        flex-wrap: wrap;
    }

    .portfolio-stats-bar .portfolio-stat-card {
        min-width: calc(50% - 8px);
    }

    .portfolio-card-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-detail-header {
        flex-wrap: wrap;
    }

    .health-gauge-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-project-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Sprint 17C: Portfolio Enhancements ────────────────────────── */
/*
   Sprint 17C: Portfolio Enhancements
   Timeline, Health Trends, Portfolio Filter, Team Links
*/

/* Portfolio Filter Widget */
.portfolio-filter-dropdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.portfolio-filter-dropdown select {
    max-width: 200px;
    font-size: 0.85rem;
    padding: 4px 8px;
}

/* Portfolio Timeline */
.portfolio-timeline-header, .portfolio-timeline-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-timeline-label-col {
    width: 180px;
    flex-shrink: 0;
    padding: 6px 8px;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-timeline-bar-col {
    flex: 1;
    position: relative;
    height: 32px;
}

.portfolio-timeline-months {
    display: flex;
    position: relative;
    height: 24px;
    border-bottom: 1px solid var(--border-color);
}

.portfolio-timeline-month {
    position: absolute;
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 2px 4px;
    border-left: 1px solid var(--border-color);
}

.portfolio-timeline-bar {
    position: absolute;
    top: 4px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.2s;
}

.portfolio-timeline-bar:hover { opacity: 0.85; }

.portfolio-timeline-bar.health-healthy { background: #86efac; }
.portfolio-timeline-bar.health-at-risk { background: #fde68a; }
.portfolio-timeline-bar.health-critical { background: #fca5a5; }

.portfolio-timeline-bar-fill {
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px 0 0 4px;
}

.portfolio-timeline-row:hover {
    background: var(--hover-bg);
}

.portfolio-timeline-today-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dc2626;
    z-index: 1;
    opacity: 0.6;
}

.portfolio-timeline-today-marker::before {
    content: 'Today';
    position: absolute;
    top: -16px;
    left: -14px;
    font-size: 0.6rem;
    color: #dc2626;
    white-space: nowrap;
}

.portfolio-timeline-overlaps {
    margin-top: 12px;
    padding: 8px;
    background: #fef3c7;
    border-radius: 4px;
    font-size: 0.85rem;
}

.portfolio-timeline-overlaps h4 {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    color: #92400e;
}

/* Health Sparkline */
.portfolio-card-sparkline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 40px;
}

.health-sparkline {
    display: inline-block;
    vertical-align: middle;
}

.sparkline-improving { color: #16a34a; }
.sparkline-stable { color: #6b7280; }
.sparkline-declining { color: #dc2626; }

.trend-indicator {
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 4px;
}

.trend-improving { color: #16a34a; }
.trend-stable { color: #6b7280; }
.trend-declining { color: #dc2626; }

/* Team Links */
.team-links-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
}

.team-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.team-link-item .team-name { font-weight: 500; flex: 1; }
.team-link-item .team-member-count { font-size: 0.8rem; color: var(--text-muted); }

/* Toolbar widget container */
.toolbar-widget {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

/* ── Sprint 10C: Resource Management ───────────────────────────── */
/* ── Resource Management (Sprint 10C) ─────────────────────────────── */

/* Tab styling */
.resource-mgmt-tab {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.resource-mgmt-tab:hover {
    color: var(--text);
    background: var(--background);
}
.resource-mgmt-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary) !important;
    font-weight: 600;
}

/* ── Filter Bar ─────────────────────────────────── */
.resource-mgmt-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.resource-mgmt-category-filters {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* ── Skills Matrix ──────────────────────────────── */
.resource-mgmt-matrix-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.resource-mgmt-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.resource-mgmt-matrix-table th,
.resource-mgmt-matrix-table td {
    padding: 6px 8px;
    border: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
}
.resource-mgmt-matrix-table thead th {
    background: var(--background);
    font-weight: 600;
    font-size: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 1;
}
.resource-mgmt-user-header {
    text-align: left !important;
    min-width: 140px;
}
.resource-mgmt-skill-header span {
    display: inline-block;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.resource-mgmt-user-name-cell {
    text-align: left !important;
    font-weight: 500;
}
.resource-mgmt-user-link {
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
}
.resource-mgmt-user-link:hover {
    text-decoration: underline;
}
.resource-mgmt-skill-cell {
    cursor: pointer;
    min-width: 50px;
    transition: background 0.15s ease;
}
.resource-mgmt-skill-cell:hover {
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.08);
}
.resource-mgmt-skill-cell.empty {
    background: transparent;
}
.resource-mgmt-add-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.resource-mgmt-skill-cell:hover .resource-mgmt-add-hint {
    opacity: 0.6;
}

/* Proficiency dots */
.resource-mgmt-proficiency-dots {
    display: inline-flex;
    gap: 2px;
}
.resource-mgmt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}
.resource-mgmt-dot.filled {
    background: var(--primary);
}

/* ── Skill Catalog ─────────────────────────────── */
.resource-mgmt-skill-cat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--badge-color, var(--text-muted)) 15%, transparent);
    color: var(--badge-color, var(--text-muted));
}
.resource-mgmt-skill-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.resource-mgmt-skill-catalog-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--background);
    font-size: 0.85rem;
}
.resource-mgmt-skill-catalog-row.inactive {
    opacity: 0.5;
}
.resource-mgmt-skill-name {
    font-weight: 500;
    min-width: 120px;
}
.resource-mgmt-skill-desc {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resource-mgmt-skill-user-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.resource-mgmt-skill-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── User Skill Profile ────────────────────────── */
.resource-mgmt-user-skill-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.resource-mgmt-user-skill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: var(--background);
    border-radius: 6px;
    border: 1px solid var(--border);
}
.resource-mgmt-skill-info {
    flex: 1;
    min-width: 0;
}
.resource-mgmt-skill-name-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.resource-mgmt-skill-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.resource-mgmt-skill-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.resource-mgmt-verified-badge {
    color: var(--success) !important;
}
.resource-mgmt-skill-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.resource-mgmt-proficiency-selector {
    display: flex;
    gap: 2px;
}
.resource-mgmt-prof-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}
.resource-mgmt-prof-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.resource-mgmt-prof-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ── Capacity Grid ─────────────────────────────── */
.resource-mgmt-capacity-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.resource-mgmt-capacity-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.resource-mgmt-capacity-legend {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
}
.resource-mgmt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.resource-mgmt-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.resource-mgmt-cap-ok { background: rgba(16, 185, 129, 0.15); }
.resource-mgmt-cap-warn { background: rgba(245, 158, 11, 0.2); }
.resource-mgmt-cap-conflict { background: rgba(239, 68, 68, 0.15); }
.resource-mgmt-legend-dot.resource-mgmt-cap-ok { background: var(--success); }
.resource-mgmt-legend-dot.resource-mgmt-cap-warn { background: var(--warning); }
.resource-mgmt-legend-dot.resource-mgmt-cap-conflict { background: var(--danger); }

.resource-mgmt-capacity-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.resource-mgmt-capacity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.resource-mgmt-capacity-table th,
.resource-mgmt-capacity-table td {
    padding: 6px 8px;
    border: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
}
.resource-mgmt-capacity-table thead th {
    background: var(--background);
    font-weight: 600;
    font-size: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 1;
}
.resource-mgmt-user-cell {
    text-align: left !important;
    min-width: 120px;
}
.resource-mgmt-capacity-cell {
    cursor: pointer;
    min-width: 70px;
    transition: background 0.15s ease;
}
.resource-mgmt-capacity-cell:hover {
    filter: brightness(0.95);
}
.resource-mgmt-cap-hours {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
}
.resource-mgmt-cap-pct {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Allocation Modal ──────────────────────────── */
.resource-mgmt-alloc-summary {
    display: flex;
    gap: 16px;
    padding: 8px 0 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.resource-mgmt-alloc-label {
    display: inline-flex;
    gap: 4px;
}
.resource-mgmt-alloc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.resource-mgmt-alloc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--background);
    border-radius: 6px;
}
.resource-mgmt-alloc-project {
    flex: 1;
    font-weight: 500;
    font-size: 0.85rem;
}

/* ── Conflict Cards ────────────────────────────── */
.resource-mgmt-conflict-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.resource-mgmt-conflict-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    background: var(--background);
    border: 1px solid var(--danger);
    border-radius: 8px;
    border-left-width: 4px;
}
.resource-mgmt-conflict-info {
    flex: 1;
}
.resource-mgmt-conflict-user {
    font-weight: 600;
    margin-bottom: 2px;
}
.resource-mgmt-conflict-week {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.resource-mgmt-conflict-bar {
    margin: 6px 0;
}
.resource-mgmt-bar-bg {
    position: relative;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.resource-mgmt-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
}
.resource-mgmt-bar-available {
    background: var(--success);
    z-index: 1;
}
.resource-mgmt-bar-over {
    background: var(--danger);
    opacity: 0.6;
}
.resource-mgmt-conflict-projects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.resource-mgmt-conflict-stats {
    text-align: right;
    flex-shrink: 0;
}
.resource-mgmt-conflict-overage {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--danger);
}

/* ── Certifications Table ──────────────────────── */
.resource-mgmt-cert-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.resource-mgmt-cert-table th,
.resource-mgmt-cert-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.resource-mgmt-cert-table thead th {
    font-weight: 600;
    background: var(--background);
}
.resource-mgmt-cert-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}
.resource-mgmt-cert-expired {
    background: var(--danger);
}
.resource-mgmt-cert-urgent {
    background: var(--warning);
}
.resource-mgmt-cert-upcoming {
    background: var(--info);
}

/* ── User Profile Stats ────────────────────────── */
.resource-mgmt-profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: var(--background);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.resource-mgmt-profile-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}
.resource-mgmt-profile-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.resource-mgmt-profile-stat-warning .resource-mgmt-profile-stat-value {
    color: var(--warning);
}

/* ── Suggestion Panel ──────────────────────────── */
.resource-mgmt-suggestion-panel {
    padding: 10px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.resource-mgmt-suggestion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
}
.resource-mgmt-suggestion-name {
    font-weight: 500;
    min-width: 100px;
}
.resource-mgmt-suggestion-match {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.resource-mgmt-skill-match-bar {
    width: 60px;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.resource-mgmt-skill-match-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}
.resource-mgmt-suggestion-capacity {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.resource-mgmt-suggestion-score {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Text helpers ──────────────────────────────── */
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

/* ── Sprint 10D: Custom Dashboard Widgets ──────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   Sprint 10D: Customizable Dashboard Widgets — CSS
   Widget grid, widget cards, drag-and-drop, widget library,
   widget-specific styles (donut, stat rows, activity feed, workload bars)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Widget Grid ── */
.dashboard-widget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px 0;
    min-height: 200px;
}

.dashboard-widget-grid.edit-mode {
    background: repeating-linear-gradient(
        0deg, transparent, transparent 49px,
        var(--border-color) 49px, var(--border-color) 50px
    );
}

/* ── Widget Card ── */
.dashboard-widget {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 6px);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.dashboard-widget.dragging {
    opacity: 0.5;
    box-shadow: none;
}

.dashboard-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    gap: 8px;
}

.dashboard-widget-header i {
    font-size: 0.8rem;
    color: var(--primary);
}

.dashboard-widget-actions {
    display: none;
    align-items: center;
    gap: 4px;
}

.edit-mode .dashboard-widget-actions {
    display: flex;
}

.edit-mode .dashboard-widget-header {
    cursor: grab;
}

.edit-mode .dashboard-widget-header:active {
    cursor: grabbing;
}

.dashboard-widget-body {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
}

/* ── Widget Library Grid ── */
.widget-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.widget-library-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 6px);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.widget-library-card:hover {
    border-color: var(--primary);
}

.widget-library-card i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.widget-library-card .widget-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.widget-library-card .widget-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ── Drop Indicator ── */
.dashboard-drop-indicator {
    border: 2px dashed var(--primary);
    border-radius: var(--border-radius, 6px);
    background: rgba(59, 130, 246, 0.05);
    pointer-events: none;
}

/* ── Widget-Specific: Mini Donut (task-summary) ── */
.widget-mini-donut {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.widget-mini-donut::before {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg, #fff);
}

.widget-mini-donut .donut-value {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Widget-Specific: Stat Row (reusable) ── */
.widget-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.widget-stat-row:last-child {
    border-bottom: none;
}

.widget-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.widget-stat-value {
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Widget-Specific: Activity Feed ── */
.widget-activity-item {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
}

.widget-activity-item:last-child {
    border-bottom: none;
}

.widget-activity-icon {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.widget-activity-time {
    color: var(--text-secondary);
    white-space: nowrap;
    font-size: 0.7rem;
}

/* ── Widget-Specific: Workload Bars ── */
.widget-workload-bar-bg {
    height: 8px;
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
}

.widget-workload-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .dashboard-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard-widget-grid {
        grid-template-columns: 1fr;
    }

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

/* ── Sprint 10E: Client Invoicing ──────────────────────────────── */
/* ── Client Invoice (Sprint 10E) ──────────────────────────── */

/* Filter Tabs */
.ci-filter-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--background);
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ci-filter-tab:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.ci-filter-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.ci-filter-tab .tab-count {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
}

.ci-filter-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.3);
}

/* Invoice Number Link Style */
.client-invoice-number {
    font-family: monospace;
    font-weight: 600;
    color: var(--primary);
}

/* Status Badges */
.ci-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
}

.ci-status-badge.draft {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.ci-status-badge.sent {
    background: #dbeafe;
    color: #1d4ed8;
}

.ci-status-badge.partially-paid {
    background: #fef3c7;
    color: #92400e;
}

.ci-status-badge.paid {
    background: #dcfce7;
    color: #166534;
}

.ci-status-badge.void {
    background: #f3f4f6;
    color: #6b7280;
    text-decoration: line-through;
}

.ci-status-badge.overdue {
    background: #fee2e2;
    color: #991b1b;
}

/* Invoice Detail Layout */
.client-invoice-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.client-invoice-detail-header .invoice-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.client-invoice-client-block {
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* Totals Section */
.client-invoice-totals {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    max-width: 320px;
    margin-left: auto;
}

.client-invoice-totals .total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.9em;
}

.client-invoice-totals .total-row.grand-total {
    border-top: 2px solid var(--border);
    margin-top: 4px;
    padding-top: 8px;
    font-size: 1.05em;
    font-weight: 700;
}

.client-invoice-totals .total-row.balance-due {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 6px;
    font-weight: 700;
    color: var(--warning-dark, #92400e);
}

/* Line Items Table */
.ci-line-items table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.ci-line-items th {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    font-size: 0.85em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ci-line-items td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
}

.ci-line-items .qty-col { text-align: center; width: 70px; }
.ci-line-items .rate-col { text-align: right; width: 100px; }
.ci-line-items .amount-col { text-align: right; width: 100px; font-weight: 600; font-family: monospace; }

.ci-line-items .source-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    text-transform: uppercase;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* Payments Table */
.ci-payments {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--border);
}

.ci-payments table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.ci-payments th {
    text-align: left;
    padding: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.ci-payments td {
    padding: 6px;
    border-bottom: 1px solid var(--border);
}

.ci-payment-method {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    background: var(--bg-secondary);
    color: var(--text-muted);
    text-transform: capitalize;
}

/* Wizard Steps Indicator */
.ci-wizard-steps {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    align-items: center;
}

.ci-time-wizard-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: var(--text-muted);
    font-weight: 500;
}

.ci-time-wizard-step.active {
    color: var(--primary);
    font-weight: 700;
}

.ci-time-wizard-step.completed {
    color: var(--success);
}

.ci-time-wizard-step .step-num {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 700;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.ci-time-wizard-step.active .step-num {
    background: var(--primary);
    color: #fff;
}

.ci-time-wizard-step.completed .step-num {
    background: var(--success);
    color: #fff;
}

.ci-wizard-step-separator {
    width: 24px;
    height: 2px;
    background: var(--border);
}

/* Time Preview Table */
.ci-time-preview-table .group-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
}

.ci-time-preview-total {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 1.05em;
    border-top: 2px solid var(--border);
    margin-top: 6px;
}

/* Aging Report */
.ci-aging-bar-chart {
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}

.ci-aging-bar-chart .bar-segment {
    transition: width 0.3s;
}

.ci-aging-bar-chart .bar-current { background: var(--success); }
.ci-aging-bar-chart .bar-30 { background: #f59e0b; }
.ci-aging-bar-chart .bar-60 { background: #ff9800; }
.ci-aging-bar-chart .bar-90 { background: #e91e63; }
.ci-aging-bar-chart .bar-90-plus { background: var(--danger); }

.ci-aging-buckets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ci-aging-bucket {
    text-align: center;
    padding: 12px 8px;
    border-radius: 8px;
    background: var(--bg-secondary);
}

.ci-aging-bucket .bucket-count {
    font-size: 1.5em;
    font-weight: 700;
}

.ci-aging-bucket .bucket-amount {
    font-family: monospace;
    font-weight: 600;
    font-size: 0.95em;
    margin-top: 2px;
}

.ci-aging-bucket .bucket-label {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 4px;
}

.ci-aging-bucket.current .bucket-count { color: var(--success); }
.ci-aging-bucket.days-30 .bucket-count { color: #f59e0b; }
.ci-aging-bucket.days-60 .bucket-count { color: #ff9800; }
.ci-aging-bucket.days-90 .bucket-count { color: #e91e63; }
.ci-aging-bucket.days-90-plus .bucket-count { color: var(--danger); }

/* Template Cards */
.ci-template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ci-template-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.ci-template-card:hover {
    border-color: var(--primary);
}

.ci-template-card.is-default {
    border-color: var(--success);
    background: var(--success-light, #dcfce7)11;
}

.ci-template-card .template-name {
    font-weight: 700;
    font-size: 1em;
}

.ci-template-card .template-company {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-top: 2px;
}

.ci-template-card .template-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.ci-template-default-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
    background: var(--success-light, #dcfce7);
    color: var(--success);
    margin-left: 8px;
}

/* Extra-small button helper */
.btn-xs {
    padding: 2px 6px;
    font-size: 0.75em;
    line-height: 1.4;
    border-radius: 4px;
}

/* ── Sprint 10F: Client Portal ─────────────────────────────────── */
/* ── Client Portal (Sprint 10F) ──────────────────────────── */

/* Tab Navigation */
.cp-nav-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    font-size: 0.9em;
}

.cp-nav-tab:hover {
    color: var(--text);
    background: var(--bg-secondary);
}

.cp-nav-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* View Panels — only active view is shown */
.cp-view-panel {
    padding-top: 4px;
}

/* ── Sprint 10G: Field Customization ───────────────────────────── */
/* ================================================================
   Sprint 10G: Org Field Customization
   ================================================================ */

/* --- Entity Type Tab Selector --- */
.fieldcust-entity-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.fieldcust-entity-tab {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 5px 14px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.fieldcust-entity-tab:hover {
    background: var(--background);
}

.fieldcust-entity-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* --- Field Override Row Highlight --- */
.fieldcust-row:hover {
    background: rgba(59, 130, 246, 0.03);
}

/* --- Field Customization Settings Container --- */
.field-customization-settings {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
}

/* --- Classifications Container --- */
.fieldcust-classifications {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
}

/* ── Sprint 10H: Template Section Enhancements ─────────────────── */
/* ================================================================
   Sprint 10H: Template Section Enhancements
   ================================================================ */

/* --- Section Enhancement Panel --- */
.tse-section-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* --- Section Attachment Widget --- */
.tse-attachments-widget {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--background);
}

.tse-attachments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tse-attachments-label,
.tse-comments-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tse-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0 5px;
}

.tse-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tse-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.tse-attachment-item:last-child {
    border-bottom: none;
}

.tse-attachment-icon {
    font-size: 1.1rem;
    color: var(--text-muted);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

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

.tse-attachment-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tse-attachment-name:hover {
    text-decoration: underline;
}

.tse-attachment-meta {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.tse-attachment-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Section Comment Widget --- */
.tse-comments-widget {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--background);
}

.tse-comments-header {
    margin-bottom: 8px;
}

.tse-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tse-comment {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.tse-comment:last-child {
    border-bottom: none;
}

.tse-comment.tse-comment-reply {
    margin-left: 24px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
    border-bottom: none;
}

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

.tse-comment-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.tse-comment-edited {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
}

.tse-comment-body {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 4px;
}

.tse-comment-mentions {
    margin-top: 4px;
}

.tse-comment-input-area {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.tse-reply-input-container {
    margin: 6px 0 6px 24px;
}

/* --- @Mention Styling --- */
.tse-mention-highlight {
    color: var(--primary);
    font-weight: 600;
}

.tse-mention-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 500;
    margin-right: 4px;
}

.tse-mention-dropdown {
    position: absolute;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    min-width: 200px;
}

.tse-mention-option {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.1s;
}

.tse-mention-option:hover {
    background: rgba(59, 130, 246, 0.06);
}

/* --- MultiSelect Field --- */
.tse-multiselect-field {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tse-multiselect-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.1s;
}

.tse-multiselect-option:hover {
    background: var(--background);
}

.tse-multiselect-option input[type="checkbox"] {
    margin: 0;
}

/* --- UserPicker Field (uses form-control select) --- */
.tse-userpicker-field {
    max-width: 300px;
}

/* --- FileUpload Field --- */
.tse-fileupload-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tse-fileupload-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8125rem;
}

/* --- TableGrid Field --- */
.tse-tablegrid-field .tse-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-bottom: 4px;
}

.tse-tablegrid-field .tse-mini-table th {
    background: var(--background);
    padding: 4px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid var(--border);
}

.tse-tablegrid-field .tse-mini-table td {
    padding: 2px;
    border: 1px solid var(--border);
}

.tse-tablegrid-field .tse-grid-cell {
    border: none;
    background: transparent;
    width: 100%;
    padding: 3px 6px;
    font-size: 0.8125rem;
    box-sizing: border-box;
}

.tse-tablegrid-field .tse-grid-cell:focus {
    outline: none;
    background: rgba(59, 130, 246, 0.04);
}

.tse-tablegrid-field td:last-child {
    width: 30px;
    text-align: center;
}

/* --- RichText Field --- */
.tse-richtext-field {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.tse-richtext-toolbar {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

.tse-richtext-editor {
    min-height: 80px;
    max-height: 250px;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.tse-richtext-editor:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--primary);
}

.tse-richtext-editor ul,
.tse-richtext-editor ol {
    margin: 4px 0;
    padding-left: 20px;
}

.tse-richtext-editor a {
    color: var(--primary);
    text-decoration: underline;
}

/* ── Sprint 10K: Knowledge Capture ─────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 10K: Knowledge Capture
   ═══════════════════════════════════════════════════════════ */

/* ── Empty State ── */
.kc-empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}

.kc-empty-state i {
    margin-bottom: 16px;
    opacity: 0.4;
}

.kc-empty-state p {
    margin: 8px auto;
    max-width: 480px;
}

/* ── Reports List ── */
.kc-reports-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kc-report-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kc-report-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kc-report-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kc-report-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.kc-report-card-title i {
    color: var(--primary);
}

.kc-report-card-actions {
    display: flex;
    gap: 4px;
}

.kc-report-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.kc-report-card-meta i {
    margin-right: 4px;
    width: 14px;
    text-align: center;
}

.kc-report-card-summary {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Wizard Steps Indicator ── */
.kc-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
    padding: 0 16px;
}

.kc-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.kc-step-dot .dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--background);
    color: var(--text-muted);
    border: 2px solid var(--border);
}

.kc-step-dot.active .dot {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.kc-step-dot.completed .dot {
    background: var(--success);
    color: white;
    border-color: var(--success);
}

.kc-step-dot .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.kc-step-dot.active .label {
    color: var(--primary);
    font-weight: 600;
}

.kc-step-line {
    width: 40px;
    height: 2px;
    background: var(--border);
    margin: 0 4px;
    margin-bottom: 20px;
}

/* ── Wizard Step Content ── */
.kc-wizard-step {
    min-height: 200px;
}

.kc-wizard-step h4 {
    margin-bottom: 8px;
    font-size: 1.1rem;
}

/* ── Scope Selection ── */
.kc-scope-options {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.kc-scope-option {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.kc-scope-option:hover {
    border-color: var(--primary);
}

.kc-scope-option.selected {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.kc-scope-option input[type="radio"] {
    margin-top: 4px;
    flex-shrink: 0;
}

.kc-scope-option-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kc-scope-option-content i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.kc-scope-option-content strong {
    font-size: 0.95rem;
}

.kc-scope-option-content span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Date Presets ── */
.kc-date-presets {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ── Preview Stats ── */
.kc-preview-title {
    font-size: 1.1rem;
    padding: 12px 16px;
    background: var(--background);
    border-radius: 6px;
    margin-bottom: 16px;
}

.kc-preview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kc-preview-stat {
    text-align: center;
    padding: 12px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.kc-preview-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.kc-preview-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kc-preview-summary {
    background: var(--background);
    border-radius: 6px;
    padding: 16px;
}

.kc-preview-summary h5 {
    margin-bottom: 8px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.kc-preview-summary p {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════
   Report Viewer — Editorial Layout
   ══════════════════════════════════════════════════════════════ */

.kc-viewer {
    max-width: 100%;
}

/* ── Toolbar ── */
.kc-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.kc-toolbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kc-toolbar-back:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.kc-toolbar-actions {
    display: flex;
    gap: 8px;
}

.kc-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.kc-toolbar-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.kc-toolbar-btn.kc-btn-danger {
    color: var(--danger-color);
    border-color: rgba(239, 68, 68, 0.25);
}

.kc-toolbar-btn.kc-btn-danger:hover {
    background: var(--danger-light);
    border-color: var(--danger-color);
}

/* ── Report Masthead ── */
.kc-masthead {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.kc-masthead-label {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--primary-light);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.kc-masthead h2 {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}

.kc-masthead-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.kc-masthead-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kc-masthead-meta i {
    font-size: 0.75rem;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
}

/* ── Section Tabs ── */
.kc-section-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 4px;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kc-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.kc-tab:hover {
    color: var(--text-primary);
    background: var(--bg-primary);
}

.kc-tab.active {
    color: var(--primary-color);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* ── Section Content ── */
.kc-section {
    animation: kcFadeIn 0.2s ease;
}

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

/* ── Summary Narrative ── */
.kc-summary-narrative {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    padding: 20px 24px;
    margin-bottom: 28px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.kc-summary-narrative::before {
    content: "\201C";
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 2.5rem;
    font-family: Georgia, serif;
    color: var(--primary-color);
    opacity: 0.15;
    line-height: 1;
}

/* ── Summary Grid (Stat Cards) ── */
.kc-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.kc-summary-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}

.kc-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}

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

.kc-summary-card:hover::before {
    opacity: 1;
}

.kc-summary-card-alert {
    border-color: var(--warning-color);
}

.kc-summary-card-alert::before {
    background: var(--warning-color);
    opacity: 1;
}

.kc-summary-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 1rem;
    margin-bottom: 10px;
}

.kc-summary-card-alert .kc-summary-card-icon {
    background: var(--warning-light);
    color: var(--warning-color);
}

.kc-summary-card-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.kc-summary-card-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 6px;
    font-weight: 600;
}

.kc-summary-card-detail {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* ── Section Header (used in tasks, decisions, etc.) ── */
.kc-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.kc-section-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

.kc-section-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ── Stats Ribbon (tasks stats bar) ── */
.kc-stats-ribbon {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.kc-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.kc-stat-pill .kc-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kc-stat-pill-created { background: rgba(37, 99, 235, 0.07); color: var(--primary-color); }
.kc-stat-pill-created .kc-pill-dot { background: var(--primary-color); }
.kc-stat-pill-assigned { background: rgba(107, 114, 128, 0.08); color: var(--text-secondary); }
.kc-stat-pill-assigned .kc-pill-dot { background: var(--text-secondary); }
.kc-stat-pill-completed { background: var(--success-light); color: var(--success-color); }
.kc-stat-pill-completed .kc-pill-dot { background: var(--success-color); }
.kc-stat-pill-inprogress { background: var(--warning-light); color: #b45309; }
.kc-stat-pill-inprogress .kc-pill-dot { background: var(--warning-color); }
.kc-stat-pill-overdue { background: var(--danger-light); color: var(--danger-color); }
.kc-stat-pill-overdue .kc-pill-dot { background: var(--danger-color); }

/* ── Data Table (shared by tasks, decisions, handoff) ── */
.kc-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.kc-data-table thead th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.kc-data-table thead th:first-child {
    border-radius: var(--radius-md) 0 0 0;
}

.kc-data-table thead th:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}

.kc-data-table tbody td {
    padding: 11px 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.kc-data-table tbody tr:last-child td {
    border-bottom: none;
}

.kc-data-table tbody tr {
    transition: background 0.1s ease;
}

.kc-data-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* Zebra striping */
.kc-data-table tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.5);
}

.kc-data-table tbody tr:nth-child(even):hover {
    background: var(--bg-secondary);
}

/* Status badge within tables */
.kc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.kc-badge-status {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.kc-badge-approved {
    background: var(--success-light);
    color: #065f46;
}

.kc-badge-rejected {
    background: var(--danger-light);
    color: #991b1b;
}

.kc-badge-skipped {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.kc-badge-role {
    background: var(--primary-light);
    color: var(--primary-color);
}

.kc-badge-type {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Overdue row styling */
.kc-data-table tbody tr.kc-row-overdue {
    background: var(--danger-light);
}

.kc-data-table tbody tr.kc-row-overdue:hover {
    background: rgba(239, 68, 68, 0.08);
}

.kc-overdue-flag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--danger-color);
    margin-left: 6px;
}

/* Stars for importance */
.kc-importance-stars {
    color: var(--warning-color);
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.kc-importance-stars.kc-importance-high {
    color: var(--danger-color);
}

.kc-table-notes {
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Decisions Section ── */
.kc-decisions-divider {
    margin: 28px 0 20px 0;
    border: none;
    border-top: 1px dashed var(--border-color);
}

/* ── Mention Stats Row ── */
.kc-mention-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.kc-mention-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.kc-mention-stat i {
    font-size: 0.85rem;
}

.kc-mention-stat strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Comment Groups ── */
.kc-comment-group {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.kc-comment-group:hover {
    box-shadow: var(--shadow-sm);
}

.kc-comment-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.1s ease;
    user-select: none;
}

.kc-comment-group-header:hover {
    background: var(--bg-secondary);
}

.kc-comment-group-header .kc-chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    margin-right: 10px;
}

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

.kc-comment-count-badge {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
}

.kc-comment-list {
    padding: 4px 18px 14px 18px;
    border-top: 1px solid var(--border-color);
}

.kc-comment-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.kc-comment-item:last-child {
    border-bottom: none;
}

.kc-comment-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.kc-comment-pinned {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--warning-color);
    background: var(--warning-light);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
}

/* ── Time Section ── */
.kc-time-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.kc-time-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 22px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    min-width: 100px;
}

.kc-time-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
}

.kc-time-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-top: 2px;
}

.kc-chart-section {
    margin-bottom: 24px;
}

.kc-chart-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kc-chart-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.kc-time-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 4px 0;
}

.kc-time-bar-label {
    min-width: 130px;
    font-size: 0.82rem;
    text-align: right;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kc-time-bar {
    flex: 1;
    height: 22px;
    background: var(--bg-secondary);
    border-radius: 11px;
    overflow: hidden;
    position: relative;
}

.kc-time-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), #60a5fa);
    border-radius: 11px;
    transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    min-width: 4px;
}

.kc-time-bar-fill-alt {
    background: linear-gradient(135deg, var(--success-color), #6ee7b7);
}

.kc-time-bar-value {
    min-width: 52px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

/* ── Top Tasks Ranking ── */
.kc-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kc-ranking-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s ease;
}

.kc-ranking-item:last-child {
    border-bottom: none;
}

.kc-ranking-item:hover {
    background: var(--bg-secondary);
}

.kc-ranking-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
    flex-shrink: 0;
}

.kc-ranking-item:nth-child(1) .kc-ranking-number {
    background: var(--primary-light);
    color: var(--primary-color);
}

.kc-ranking-item:nth-child(2) .kc-ranking-number {
    background: rgba(37, 99, 235, 0.05);
    color: #60a5fa;
}

.kc-ranking-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.kc-ranking-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* ── Collaborators Section ── */
.kc-collaborators-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-collaborator-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kc-collaborator-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.kc-collaborator-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.kc-collaborator-card:nth-child(1) .kc-collaborator-avatar { background: var(--primary-color); }
.kc-collaborator-card:nth-child(2) .kc-collaborator-avatar { background: #8b5cf6; }
.kc-collaborator-card:nth-child(3) .kc-collaborator-avatar { background: var(--success-color); }
.kc-collaborator-card:nth-child(4) .kc-collaborator-avatar { background: #f59e0b; }
.kc-collaborator-card:nth-child(5) .kc-collaborator-avatar { background: #ec4899; }
.kc-collaborator-card:nth-child(6) .kc-collaborator-avatar { background: #14b8a6; }
.kc-collaborator-card:nth-child(7) .kc-collaborator-avatar { background: #6366f1; }
.kc-collaborator-card:nth-child(8) .kc-collaborator-avatar { background: #f97316; }

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

.kc-collaborator-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.kc-collaborator-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kc-interaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.kc-interaction-chip i {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.kc-collaborator-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    flex-shrink: 0;
}

.kc-metric-count {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -0.03em;
}

.kc-metric-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.kc-collaborator-bar {
    width: 80px;
    height: 5px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.kc-collaborator-bar-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Handoff Section ── */
.kc-handoff-empty {
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.kc-handoff-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-light);
    color: var(--success-color);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.kc-handoff-empty p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ── No Data Placeholder ── */
.kc-no-data {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.kc-no-data i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.3;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .kc-scope-options {
        flex-direction: column;
    }

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

    .kc-section-tabs {
        gap: 0;
    }

    .kc-tab {
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    .kc-collaborator-card {
        flex-wrap: wrap;
    }

    .kc-collaborator-bar {
        width: 100%;
    }

    .kc-viewer-toolbar {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .kc-wizard-steps {
        flex-wrap: wrap;
    }

    .kc-step-line {
        display: none;
    }

    .kc-masthead h2 {
        font-size: 1.3rem;
    }

    .kc-time-bar-label {
        min-width: 100px;
        font-size: 0.75rem;
    }

    .kc-mention-stats {
        flex-direction: column;
    }

    .kc-time-stats {
        flex-direction: column;
    }

    .kc-data-table {
        font-size: 0.78rem;
    }

    .kc-data-table thead th,
    .kc-data-table tbody td {
        padding: 8px 10px;
    }
}

/* ── Sprint 10M: Milestone Gates ───────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 10M: Milestone Gates & Approvals
   ═══════════════════════════════════════════════════════════ */

/* ── Gate Summary Stats ── */
.gate-summary-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gate-stat-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.gate-stat-badge .stat-count {
    font-size: 1.1rem;
    font-weight: 700;
}

.gate-stat-badge.stat-pending { border-left: 3px solid var(--text-muted); }
.gate-stat-badge.stat-criteria-met { border-left: 3px solid var(--warning); }
.gate-stat-badge.stat-approved { border-left: 3px solid var(--success); }
.gate-stat-badge.stat-overridden { border-left: 3px solid var(--primary); }
.gate-stat-badge.stat-failed { border-left: 3px solid var(--danger); }

/* ── Gate Timeline Visualization ── */
.gate-timeline {
    display: flex;
    align-items: center;
    padding: 24px 16px;
    margin-bottom: 24px;
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.gate-timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    cursor: pointer;
    position: relative;
}

.gate-timeline-node:hover .gate-node-circle {
    transform: scale(1.15);
}

.gate-node-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
    position: relative;
    z-index: 2;
}

.gate-node-circle.status-pending {
    background: var(--card-bg);
    border: 3px solid var(--text-muted);
    color: var(--text-muted);
}

.gate-node-circle.status-criteria-met {
    background: var(--card-bg);
    border: 3px solid var(--warning);
    color: var(--warning);
    animation: gatePulse 2s infinite;
}

.gate-node-circle.status-approved {
    background: var(--success);
    border: 3px solid var(--success);
    color: white;
}

.gate-node-circle.status-overridden {
    background: var(--primary);
    border: 3px solid var(--primary);
    color: white;
}

.gate-node-circle.status-failed {
    background: var(--danger);
    border: 3px solid var(--danger);
    color: white;
}

@keyframes gatePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

.gate-node-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gate-node-type-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    z-index: 3;
}

.gate-node-type-badge.blocking {
    background: var(--danger);
    color: white;
}

.gate-timeline-connector {
    flex: 1;
    height: 3px;
    min-width: 30px;
    background: var(--border-color);
    position: relative;
    z-index: 1;
}

.gate-timeline-connector.passed {
    background: var(--success);
}

/* ── Gate Cards ── */
.gate-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gate-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.gate-card.type-advisory {
    border-left: 4px solid var(--warning);
}

.gate-card.type-blocking {
    border-left: 4px solid var(--danger);
}

.gate-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
}

.gate-card-header:hover {
    background: var(--hover-bg);
}

.gate-card-title-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.gate-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gate-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Expand/Collapse Chevron ── */
.gate-expand-icon {
    transition: transform 0.2s ease;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.gate-expand-icon.expanded {
    transform: rotate(90deg);
}

/* ── Gate Actions ── */
.gate-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gate-actions .btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.gate-actions .btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

/* ── Gate Status Badges ── */
.gate-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gate-status-badge.status-pending {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.gate-status-badge.status-criteria-met {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.gate-status-badge.status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.gate-status-badge.status-overridden {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.gate-status-badge.status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Gate Type Badges ── */
.gate-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.gate-type-badge.type-advisory {
    background: rgba(245, 158, 11, 0.08);
    color: var(--warning);
}

.gate-type-badge.type-blocking {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
}

/* ── Gate Progress Bar ── */
.gate-progress-container {
    padding: 0 16px 10px 16px;
}

.gate-progress-bar {
    height: 5px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
}

.gate-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    background: var(--success);
}

.gate-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Gate Detail (Expanded) ── */
.gate-detail {
    border-top: 1px solid var(--border-color);
    padding: 16px;
    background: var(--hover-bg);
}

.gate-detail.collapsed {
    display: none;
}

.gate-detail-section {
    margin-bottom: 16px;
}

.gate-detail-section:last-child {
    margin-bottom: 0;
}

.gate-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.gate-detail-section-header h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Criteria Checklist ── */
.gate-criteria-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gate-criteria-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.gate-criteria-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.gate-criteria-icon.satisfied {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.gate-criteria-icon.unsatisfied {
    background: var(--hover-bg);
    color: var(--text-muted);
}

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

.gate-criteria-description {
    font-size: 0.85rem;
    font-weight: 500;
}

.gate-criteria-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.gate-criteria-meta a {
    color: var(--primary);
    text-decoration: none;
}

.gate-criteria-meta a:hover {
    text-decoration: underline;
}

.gate-criteria-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.gate-criteria-toggle {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: transform 0.2s;
}

.gate-criteria-toggle:hover {
    transform: scale(1.1);
}

.gate-criteria-toggle.satisfied {
    color: var(--success);
}

.gate-criteria-toggle.unsatisfied {
    color: var(--text-muted);
}

/* ── Approvers List ── */
.gate-approvers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gate-approver-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.gate-approver-tier {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}

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

.gate-approver-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.gate-approver-role {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.gate-approver-status {
    flex-shrink: 0;
}

/* ── Override History ── */
.gate-override-entry {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 6px;
}

.gate-override-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

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

.gate-override-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.gate-override-user {
    font-weight: 600;
    font-size: 0.85rem;
}

.gate-override-time {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.gate-override-prev-status {
    font-size: 0.65rem;
}

.gate-override-justification {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Gate Type Selector (Create Modal) ── */
.gate-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gate-type-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.2s;
}

.gate-type-option:hover {
    border-color: var(--primary);
}

.gate-type-option input[type="radio"] {
    margin-top: 2px;
}

.gate-type-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
    font-weight: 500;
}

.gate-type-label small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.gate-type-label i {
    margin-right: 4px;
}

/* ── Approval Options (Approve Modal) ── */
.gate-approval-summary {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--hover-bg);
    margin-bottom: 16px;
}

.gate-approval-options {
    display: flex;
    gap: 12px;
}

.gate-approval-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    flex: 1;
    transition: border-color 0.2s;
}

.gate-approval-option:hover {
    border-color: var(--primary);
}

.gate-approval-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

.gate-approval-label.approve {
    color: var(--success);
}

.gate-approval-label.reject {
    color: var(--danger);
}

/* ── Override Warning ── */
.gate-override-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--border-radius);
    margin-bottom: 16px;
}

.gate-override-warning i {
    color: var(--danger);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.gate-override-warning p {
    font-size: 0.85rem;
    color: var(--danger);
    margin: 0;
}

/* ── Entity Search Results (Criteria Modal) ── */
.gate-entity-search-results {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.gate-entity-search-item {
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.gate-entity-search-item:last-child {
    border-bottom: none;
}

.gate-entity-search-item:hover {
    background: var(--hover-bg);
}

.gate-entity-search-item.selected {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--primary);
}

/* ── Inline Gate Badge (Task List) ── */
.gate-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.gate-inline-badge.status-pending {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.gate-inline-badge.status-criteria-met {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.gate-inline-badge.status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.gate-inline-badge.status-overridden {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.gate-inline-badge.status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Empty State ── */
.gate-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.gate-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.gate-empty-state p {
    font-size: 0.95rem;
    max-width: 450px;
    margin: 0 auto;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .gate-summary-stats {
        flex-wrap: wrap;
    }

    .gate-timeline {
        padding: 16px 8px;
    }

    .gate-timeline-node {
        min-width: 80px;
    }

    .gate-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .gate-card-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .gate-criteria-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .gate-approval-options {
        flex-direction: column;
    }

    .gate-type-selector {
        flex-direction: column;
    }
}

/* ── Sprint 10N: Planning Analytics ────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 10N: Planning Analytics Dashboard
   ═══════════════════════════════════════════════════════════ */

/* ── Loading State ── */
.pa-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--text-muted);
    gap: 12px;
}

.pa-loading i {
    color: var(--primary);
}

/* ── Top Stats Row ── */
.pa-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pa-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 20px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pa-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.pa-stat-card.stat-projects::before { background: var(--primary); }
.pa-stat-card.stat-accuracy::before { background: var(--success); }
.pa-stat-card.stat-duration::before { background: var(--warning); }
.pa-stat-card.stat-bottlenecks::before { background: var(--danger); }

.pa-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.pa-stat-value.pa-accuracy-good { color: var(--success); }
.pa-stat-value.pa-accuracy-warning { color: var(--warning); }
.pa-stat-value.pa-accuracy-danger { color: var(--danger); }

.pa-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}

.pa-stat-sublabel {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Tab Bar ── */
.pa-tab-bar {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    gap: 0;
    overflow-x: auto;
}

.pa-tab {
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

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

.pa-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ── Template Cards (Highlighted) ── */
.pa-template-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.pa-template-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 16px;
    position: relative;
}

.pa-template-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.pa-template-card-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-template-card-phase {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--hover-bg);
    color: var(--text-muted);
    margin-bottom: 10px;
}

.pa-template-card-stats {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pa-template-card-stats strong {
    color: var(--text);
}

/* ── Trend Arrow Indicators ── */
.pa-trend-arrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pa-trend-arrow.improving { color: var(--success); }
.pa-trend-arrow.declining { color: var(--danger); }
.pa-trend-arrow.stable { color: var(--text-muted); }

/* ── Accuracy Gauges Row ── */
.pa-accuracy-gauges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.pa-gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pa-gauge-canvas {
    width: 120px;
    height: 120px;
}

.pa-gauge-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.pa-gauge-details {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* ── Chart Containers ── */
.pa-chart-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.pa-chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
}

.pa-chart-canvas {
    width: 100%;
    height: 250px;
}

/* ── Data Tables ── */
.pa-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.pa-data-table th {
    background: var(--hover-bg);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.pa-data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.pa-data-table tr:hover {
    background: var(--hover-bg);
}

/* ── Inline Progress Bar ── */
.pa-inline-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pa-inline-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.pa-inline-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pa-inline-progress-fill.good { background: var(--success); }
.pa-inline-progress-fill.warning { background: var(--warning); }
.pa-inline-progress-fill.danger { background: var(--danger); }

.pa-inline-progress-text {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

/* ── Bottleneck Cards ── */
.pa-bottleneck-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pa-bottleneck-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 16px;
    border-left: 4px solid var(--text-muted);
}

.pa-bottleneck-card.severity-high { border-left-color: var(--danger); }
.pa-bottleneck-card.severity-medium { border-left-color: var(--warning); }
.pa-bottleneck-card.severity-low { border-left-color: var(--primary); }

.pa-bottleneck-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.pa-bottleneck-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.pa-severity-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pa-severity-badge.high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.pa-severity-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.pa-severity-badge.low {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.pa-bottleneck-detail {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.pa-bottleneck-detail strong {
    color: var(--text);
}

.pa-bottleneck-recommendation {
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    padding: 10px 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pa-bottleneck-recommendation i {
    color: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Phase Duration Bars ── */
.pa-phase-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.pa-phase-bar-label {
    width: 120px;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: right;
    color: var(--text-muted);
    flex-shrink: 0;
}

.pa-phase-bar-track {
    flex: 1;
    height: 24px;
    background: var(--hover-bg);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.pa-phase-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
    opacity: 0.8;
    position: relative;
    min-width: 2px;
    transition: width 0.4s ease;
}

.pa-phase-bar-value {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.pa-phase-bar-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: var(--text-muted);
    opacity: 0.5;
}

.pa-phase-bar-range::before,
.pa-phase-bar-range::after {
    content: '';
    position: absolute;
    top: -4px;
    width: 2px;
    height: 10px;
    background: var(--text-muted);
    opacity: 0.5;
}

.pa-phase-bar-range::before { left: 0; }
.pa-phase-bar-range::after { right: 0; }

/* ── Template Leaderboard ── */
.pa-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pa-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 12px 16px;
}

.pa-leaderboard-rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pa-leaderboard-rank.rank-1 { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.pa-leaderboard-rank.rank-2 { background: rgba(156, 163, 175, 0.15); color: var(--text-muted); }
.pa-leaderboard-rank.rank-3 { background: rgba(180, 83, 9, 0.15); color: #b45309; }
.pa-leaderboard-rank.rank-other { background: var(--hover-bg); color: var(--text-muted); }

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

.pa-leaderboard-name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-leaderboard-stats {
    display: flex;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.pa-leaderboard-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--success);
    flex-shrink: 0;
}

/* ── Insufficient Data State ── */
.pa-insufficient-data {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
}

.pa-insufficient-data i {
    font-size: 3.5rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.pa-insufficient-data h4 {
    color: var(--text-muted);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.pa-insufficient-data p {
    font-size: 0.9rem;
    max-width: 450px;
    margin: 0 auto 8px;
}

.pa-insufficient-data .pa-data-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--hover-bg);
    border-radius: 20px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 12px;
}

/* ── No Bottlenecks Success State ── */
.pa-no-bottlenecks {
    text-align: center;
    padding: 40px 24px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: var(--border-radius);
}

.pa-no-bottlenecks i {
    font-size: 2.5rem;
    color: var(--success);
    margin-bottom: 12px;
}

.pa-no-bottlenecks h4 {
    color: var(--success);
    margin-bottom: 4px;
}

.pa-no-bottlenecks p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .pa-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .pa-accuracy-gauges {
        grid-template-columns: 1fr;
    }

    .pa-template-highlights {
        grid-template-columns: 1fr;
    }

    .pa-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .pa-phase-bar-label {
        width: 80px;
        font-size: 0.75rem;
    }

    .pa-leaderboard-row {
        flex-wrap: wrap;
    }

    .pa-leaderboard-stats {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pa-data-table {
        font-size: 0.78rem;
    }

    .pa-data-table th,
    .pa-data-table td {
        padding: 8px;
    }
}

/* ── Sprint 10R: Risk Register ─────────────────────────────────── */
/* ── Risk Register (Sprint 10R) ───────────────────────────────────── */

/* Tab styling */
.risk-register-tab {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.risk-register-tab:hover {
    color: var(--text);
    background: var(--background);
}
.risk-register-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary) !important;
    font-weight: 600;
}

/* ── Filter Bar ─────────────────────────────────── */
.risk-register-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.risk-register-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Risk Card List ────────────────────────────── */
.risk-register-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.risk-register-card {
    padding: 12px 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.risk-register-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--primary);
}
.risk-register-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}
.risk-register-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.risk-register-card-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.risk-register-card-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.risk-register-card-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.risk-register-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.risk-register-status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}
.risk-register-review-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--warning);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Risk Detail Modal ─────────────────────────── */
.risk-register-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 700px) {
    .risk-register-detail-grid {
        grid-template-columns: 1fr;
    }
}
.risk-register-detail-section {
    padding: 12px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.risk-register-detail-section h4 {
    font-size: 0.9rem;
    margin: 0 0 8px;
    color: var(--text);
}
.risk-register-assessment-grid {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.risk-register-score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    color: white;
    flex-shrink: 0;
}
.risk-register-score-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.risk-register-score-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.risk-register-assessment-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 4px;
}
.risk-register-assess-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Mitigation List ──────────────────────────── */
.risk-register-mitigation-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.risk-register-mitigation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
}
.risk-register-mitigation-info {
    flex: 1;
    min-width: 0;
}
.risk-register-mitigation-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.risk-register-mitigation-title.completed {
    text-decoration: line-through;
    opacity: 0.7;
}
.risk-register-mitigation-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.risk-register-relationship-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--border);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* ── Heat Map ──────────────────────────────────── */
.risk-register-heatmap-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 12px;
}
.risk-register-heatmap-grid {
    display: flex;
    gap: 4px;
}
.risk-register-heatmap-ylabel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: var(--text-muted);
}
.risk-register-heatmap-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.risk-register-heatmap-row {
    display: flex;
    gap: 4px;
    align-items: stretch;
}
.risk-register-heatmap-row-label {
    width: 110px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.risk-register-heatmap-cell {
    flex: 1;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
    color: white;
    font-weight: 700;
}
.risk-register-heatmap-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1;
}
.risk-register-heatmap-count {
    font-size: 1.2rem;
}
.risk-register-heatmap-score {
    font-size: 0.75rem;
    opacity: 0.7;
}
.risk-register-heatmap-xlabel {
    border-top: none;
}
.risk-register-heatmap-col-label {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 4px;
}
.risk-register-heatmap-col-label small {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.7;
}
.risk-register-heatmap-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    font-size: 0.8rem;
}
.risk-register-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.risk-register-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* ── Dashboard ─────────────────────────────────── */
.risk-register-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.risk-register-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px;
    background: var(--background);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
}
.risk-register-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}
.risk-register-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.risk-register-dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 700px) {
    .risk-register-dashboard-row {
        grid-template-columns: 1fr;
    }
}
.risk-register-dashboard-panel {
    padding: 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.risk-register-dashboard-panel h4 {
    font-size: 0.9rem;
    margin: 0 0 10px;
}

/* Severity distribution bars */
.risk-register-severity-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.risk-register-severity-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.risk-register-severity-label {
    width: 60px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: right;
}
.risk-register-severity-bar {
    flex: 1;
    height: 16px;
    background: var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.risk-register-severity-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s ease;
}
.risk-register-severity-count {
    width: 28px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

/* Category breakdown */
.risk-register-category-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.risk-register-category-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
}

/* ── Sprint 10T: Document Templates ────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   Sprint 10T: Document Template Builder
   ═══════════════════════════════════════════════════════════ */

/* ── 3-Panel Layout ── */
.dt-layout {
    display: grid;
    grid-template-columns: 240px 1fr 300px;
    gap: 0;
    height: calc(100vh - 120px);
    overflow: hidden;
}

/* ── Sidebar ── */
.dt-sidebar {
    border-right: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

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

.dt-category-filter {
    margin-bottom: 12px;
}

.dt-template-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
}

.dt-sidebar-category-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 10px 12px 4px;
}

.dt-list-item {
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.dt-list-item:hover {
    background: var(--background);
}

.dt-list-item.active {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--primary);
}

.dt-list-item-name {
    font-weight: 500;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.dt-list-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Block Editor ── */
.dt-editor {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
}

.dt-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* ── Block Palette ── */
.dt-block-palette {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.dt-palette-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.dt-palette-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.dt-palette-btn:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary);
}

/* ── Block Canvas ── */
.dt-block-canvas {
    flex: 1;
    min-height: 300px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 30px;
    overflow-y: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.dt-template-block {
    position: relative;
    padding: 8px 12px;
    padding-left: 28px;
    margin-bottom: 4px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
    min-height: 32px;
}

.dt-template-block:hover {
    border-color: var(--border);
}

.dt-template-block.selected {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.04);
}

.dt-template-block.dragging {
    opacity: 0.4;
}

/* ── Drag Handle ── */
.dt-drag-handle {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 0.8rem;
}

.dt-template-block:hover .dt-drag-handle {
    opacity: 0.6;
}

.dt-template-block:hover .dt-drag-handle:hover {
    opacity: 1;
}

/* ── Block Controls ── */
.dt-block-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 2px;
}

.dt-template-block:hover .dt-block-controls,
.dt-template-block.selected .dt-block-controls {
    display: flex;
}

.dt-block-control-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    background: var(--background);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.15s, color 0.15s;
}

.dt-block-control-btn:hover {
    background: var(--border);
    color: var(--text);
}

.dt-block-control-btn.dt-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Block Type Rendering ── */
.dt-block-header {
    font-weight: 700;
}

.dt-block-level-1 {
    font-size: 1.5rem;
}

.dt-block-level-2 {
    font-size: 1.25rem;
}

.dt-block-level-3 {
    font-size: 1rem;
}

.dt-block-text {
    font-size: 0.9rem;
    white-space: pre-wrap;
    line-height: 1.5;
}

.dt-block-table-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--background);
}

.dt-block-signature {
    margin-top: 16px;
    padding-top: 4px;
}

.dt-block-pagebreak {
    border-top: 2px dashed var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 4px 0;
}

.dt-block-hr hr {
    border: none;
    border-top: 1px solid var(--text-muted);
    margin: 4px 0;
}

/* ── Merge Token Highlight ── */
.dt-merge-token {
    display: inline;
    padding: 1px 4px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85em;
}

/* ── Editor Actions ── */
.dt-editor-actions {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    margin-top: 16px;
    flex-wrap: wrap;
}

/* ── Properties Panel ── */
.dt-properties-panel {
    border-left: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
}

.dt-properties-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
}

.dt-properties-placeholder i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.dt-properties-placeholder p {
    font-size: 0.85rem;
}

.dt-prop-group {
    margin-bottom: 12px;
}

.dt-prop-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-muted);
}

/* ── Preview ── */
.dt-preview-container {
    padding: 0;
}

.dt-preview-page {
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 30px;
    min-height: 400px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.dt-preview-header {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.dt-preview-footer {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    text-align: center;
}

/* ── Merge Field Picker ── */
.dt-merge-field-tree {
    max-height: 100%;
    overflow-y: auto;
}

.dt-merge-field-category {
    margin-bottom: 4px;
}

.dt-merge-field-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.dt-merge-field-category-header:hover {
    background: var(--background);
}

.dt-merge-field-toggle {
    transition: transform 0.2s;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dt-merge-field-toggle.expanded {
    transform: rotate(90deg);
}

.dt-merge-field-list {
    padding-left: 24px;
}

.dt-merge-field-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.dt-merge-field-item:hover {
    background: rgba(59, 130, 246, 0.08);
}

.dt-field-label {
    flex: 1;
    font-size: 0.85rem;
}

.dt-field-token {
    font-size: 0.75rem;
    color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: monospace;
}

.dt-field-type {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Table Column Editor Rows ── */
.dt-table-col-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .dt-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: auto;
    }

    .dt-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 200px;
    }

    .dt-properties-panel {
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 768px) {
    .dt-block-palette {
        gap: 4px;
    }

    .dt-palette-btn {
        width: 32px;
        height: 32px;
    }

    .dt-block-canvas {
        padding: 16px;
    }

    .dt-editor-actions {
        flex-direction: column;
    }

    .dt-editor-actions .btn {
        width: 100%;
    }
}

/* ── Sprint 10V: Template Marketplace ──────────────────────────── */
/* ── Template Marketplace (Sprint 10V) ──────────────────── */

/* Tab Navigation */
.mp-nav-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    font-size: 0.9em;
}

.mp-nav-tab:hover {
    color: var(--text);
    background: var(--bg-secondary);
}

.mp-nav-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Filter Bar */
.mp-filter-bar {
    padding: 12px 0;
    margin-bottom: 16px;
}

/* Listing Grid */
.mp-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Listing Card */
.mp-listing-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    background: var(--background);
    display: flex;
    flex-direction: column;
}

.mp-listing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

.mp-listing-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 0;
}

.mp-listing-card-body {
    padding: 10px 14px;
    flex: 1;
}

.mp-listing-title {
    margin: 0 0 6px;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
}

.mp-listing-desc {
    margin: 0 0 8px;
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-listing-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.mp-listing-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 0.85em;
}

.mp-listing-publisher {
    padding: 6px 14px 10px;
    font-size: 0.8em;
    color: var(--text-muted);
}

/* Category Badge */
.mp-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
}

/* Type Badge */
.mp-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 500;
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* Tags */
.mp-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Stars */
.mp-star-filled {
    color: #f59e0b;
}

.mp-star-empty {
    color: var(--border);
}

.mp-star-picker-star {
    transition: color 0.1s;
}

.mp-star-picker-star:hover {
    color: #f59e0b !important;
}

/* Rating and Stats */
.mp-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mp-rating-count {
    color: var(--text-muted);
    font-size: 0.85em;
}

.mp-stats {
    display: flex;
    gap: 10px;
    color: var(--text-muted);
}

.mp-stats i {
    margin-right: 3px;
}

/* Favorite Button */
.mp-favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    color: var(--text-muted);
    padding: 4px;
    transition: color 0.2s;
}

.mp-favorite-btn:hover,
.mp-favorite-btn.active {
    color: #ef4444;
}

/* Pagination */
.mp-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    padding: 12px 0;
}

/* Reviews List */
.mp-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Rating Breakdown */
.mp-rating-breakdown {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════
   Sprint 11A: Progressive Web App (PWA)
   ═══════════════════════════════════════════════════════════ */

/* ── Offline Banner ── */
/* Default hidden; JS sets display:flex only when truly offline */
.pwa-offline-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--warning);
    color: #1a1a2e;
    font-size: 0.85rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1100;
}

.pwa-offline-banner i:first-child {
    font-size: 1rem;
}

.pwa-offline-banner span {
    flex: 1;
}

.pwa-offline-dismiss {
    background: none;
    border: none;
    color: #1a1a2e;
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    opacity: 0.7;
}

.pwa-offline-dismiss:hover {
    opacity: 1;
}

/* ── Update Banner ── */
/* Default hidden; JS sets display:flex only when a new SW version is waiting */
.pwa-update-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1100;
}

.pwa-update-banner i:first-child {
    font-size: 1.1rem;
}

.pwa-update-banner span {
    flex: 1;
}

.pwa-update-banner .btn {
    flex-shrink: 0;
}

.pwa-update-dismiss {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    opacity: 0.7;
}

.pwa-update-dismiss:hover {
    opacity: 1;
}

/* ── PWA Settings ── */
.pwa-settings-content {
    padding: 16px;
}

.pwa-settings-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.pwa-settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pwa-settings-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.pwa-settings-section p.text-muted {
    font-size: 0.8rem;
    margin-bottom: 12px;
}

/* ── Installed Badge ── */
.pwa-installed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Push Notification Toggle ── */
.pwa-push-toggle-row {
    margin-bottom: 8px;
}

.pwa-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;
}

.pwa-toggle-label span:first-child {
    font-size: 0.9rem;
    font-weight: 500;
}

.pwa-toggle-label input[type="checkbox"] {
    display: none;
}

.pwa-toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.pwa-toggle-slider::after {
    content: '';
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
}

.pwa-toggle-label input:checked + .pwa-toggle-slider {
    background: var(--primary);
}

.pwa-toggle-label input:checked + .pwa-toggle-slider::after {
    transform: translateX(20px);
}

/* ── Push Denied Message ── */
.pwa-push-denied {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    margin-top: 8px;
}

/* ── Service Worker Status ── */
.pwa-sw-status {
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    padding: 12px;
}

.pwa-sw-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.pwa-sw-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pwa-sw-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Notification Log ── */
.pwa-notification-log {
    max-height: 300px;
    overflow-y: auto;
}

.pwa-notification-log-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
}

.pwa-notification-log-item:last-child {
    margin-bottom: 0;
}

.pwa-notification-log-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pwa-notification-log-content {
    flex: 1;
    min-width: 0;
}

.pwa-notification-log-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.pwa-notification-log-body {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-notification-log-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.pwa-notification-log-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.pwa-notification-log-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pwa-notification-log-status.status-sent {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.pwa-notification-log-status.status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.pwa-notification-log-status.status-pending {
    background: var(--bg-hover);
    color: var(--text-muted);
}

.pwa-notification-log-status.status-clicked {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .pwa-offline-banner {
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .pwa-update-banner {
        flex-wrap: wrap;
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .pwa-settings-section h4 {
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 11B: Mobile Responsive Improvements
   ═══════════════════════════════════════════════════════════ */

/* ── Touch Target Utility ── */
.touch-target {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Mobile Backdrop ── */
.mobile-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-backdrop.visible {
    display: block;
    opacity: 1;
}

/* ── Hamburger Button ── */
.mobile-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 48px;
    height: 48px;
    border: none;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}

.mobile-hamburger:active {
    background: var(--hover-bg);
}

/* ── Bottom Navigation Bar ── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    z-index: 999;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0;
    gap: 2px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-bottom-nav-tab i {
    font-size: 1.2rem;
}

.mobile-bottom-nav-tab span {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mobile-bottom-nav-tab.active {
    color: var(--primary);
}

.mobile-bottom-nav-tab:active {
    background: var(--hover-bg);
}

/* ── Mobile Sidebar Overlay ── */
@media (max-width: 767px) {
    /* --- Body adjustments (feature-gated) --- */
    body.mobile-layout {
        padding-bottom: 56px; /* Room for bottom nav */
    }

    /* --- Sidebar as slide-in overlay (feature-gated) --- */
    body.mobile-layout #sidebar,
    body.mobile-layout .sidebar {
        position: fixed !important;
        top: 0;
        left: -280px;
        width: 280px !important;
        height: 100vh !important;
        max-height: none !important;
        z-index: 999;
        transition: left 0.3s ease;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: none;
        border-right: 1px solid var(--border-color) !important;
        border-bottom: none !important;
        flex-direction: column !important;
        display: flex !important;
    }

    body.mobile-layout #sidebar.mobile-sidebar-open,
    body.mobile-layout .sidebar.mobile-sidebar-open {
        left: 0;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
    }

    /* --- Show hamburger and bottom nav (feature-gated) --- */
    body.mobile-layout .mobile-hamburger {
        display: flex;
    }

    body.mobile-layout .mobile-bottom-nav {
        display: flex;
    }

    /* --- Main content takes full width (feature-gated) --- */
    body.mobile-layout .main-content,
    body.mobile-layout .content-area {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 12px !important;
        padding-top: 68px !important; /* Room for hamburger */
        padding-bottom: 68px !important; /* Room for bottom nav */
    }

    /* --- Touch target sizing (always apply on small screens) --- */
    .btn,
    button,
    a.nav-link,
    .sidebar-nav-item,
    .form-control,
    select,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 8px 16px;
    }

    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* --- Stack form rows vertically (always apply) --- */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-row .form-group {
        width: 100%;
        flex: none;
    }

    /* --- Panel header responsive (always apply) --- */
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .panel-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .panel-header-actions select,
    .panel-header-actions .form-control {
        width: 100% !important;
    }

    /* --- Table responsive: horizontal scroll (always apply) --- */
    .table-responsive,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Hide desktop-only elements --- */
    .desktop-only {
        display: none !important;
    }

    /* --- Show mobile-only elements --- */
    .mobile-only {
        display: block !important;
    }

    /* --- Mobile sidebar internal layout fix (feature-gated) --- */
    body.mobile-layout .sidebar-section {
        display: block !important;
        min-width: unset !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
        padding: 12px 16px;
    }

    body.mobile-layout .sidebar-header {
        padding: 16px;
    }

    body.mobile-layout .sidebar-item {
        padding: 12px 16px;
        font-size: 15px;
    }

    /* --- Mobile top-bar: hide when layout active (hamburger replaces it) --- */
    body.mobile-layout .top-bar {
        display: none !important;
    }

    /* --- Mobile view tabs: horizontal scroll instead of wrapping --- */
    body.mobile-layout .view-tabs,
    body.mobile-layout .tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 0;
        scrollbar-width: none;
    }

    body.mobile-layout .view-tabs::-webkit-scrollbar,
    body.mobile-layout .tab-nav::-webkit-scrollbar {
        display: none;
    }

    body.mobile-layout .view-tabs .tab-btn,
    body.mobile-layout .tab-nav .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 13px;
        padding: 8px 14px;
    }

    /* --- Mobile cards and panels: full-width, reduced padding --- */
    body.mobile-layout .card,
    body.mobile-layout .panel {
        border-radius: 8px;
        margin-bottom: 8px;
    }

    body.mobile-layout .card-body,
    body.mobile-layout .panel-body {
        padding: 12px;
    }

    /* --- Mobile modals: nearly full-width --- */
    body.mobile-layout .modal-content {
        width: 96% !important;
        max-width: 100% !important;
        margin: 8px auto;
        max-height: 90vh;
    }

    body.mobile-layout .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    /* --- Mobile stat cards: 2-col grid instead of flex row --- */
    body.mobile-layout .stats-row,
    body.mobile-layout .stat-cards {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* --- Mobile typography: slightly smaller headings --- */
    body.mobile-layout h1 { font-size: 22px; }
    body.mobile-layout h2 { font-size: 18px; }
    body.mobile-layout h3 { font-size: 16px; }

    /* --- Mobile tables: smaller text, tighter cells --- */
    body.mobile-layout table th,
    body.mobile-layout table td {
        padding: 8px 10px;
        font-size: 13px;
    }

    /* --- Mobile action bars: wrap buttons --- */
    body.mobile-layout .action-bar,
    body.mobile-layout .toolbar,
    body.mobile-layout .btn-group {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── Tablet adjustments (768px - 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    body.tablet-layout .main-content,
    body.tablet-layout .content-area {
        padding: 16px;
    }

    body.tablet-layout .form-row {
        flex-wrap: wrap;
    }

    body.tablet-layout .form-row .form-group {
        min-width: 45%;
    }

    /* --- Touch targets for tablet --- */
    body.tablet-layout .btn,
    body.tablet-layout button {
        min-height: 40px;
    }
}

/* ── Exit Desktop Mode floating icon button ── */
/* At 1280px viewport on a ~375px screen everything is ~29% scale,
   so sizes here are ~3x larger than they appear physically */
.exit-desktop-mode-btn {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 99999;
    width: 120px;
    height: 120px;
    padding: 0;
    background: var(--primary-color, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exit-desktop-mode-btn i {
    font-size: 48px;
}

.exit-desktop-mode-btn:active {
    filter: brightness(0.85);
    transform: scale(0.95);
}

/* ── Mobile Tab Trigger (hidden on desktop, shown via mobile media query) ── */
.mobile-tab-trigger {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: var(--primary-dark, #1e3a5f);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-tab-trigger .fa-bars {
    font-size: 16px;
    opacity: 0.8;
}

.mobile-tab-label {
    flex: 1;
    text-align: left;
}

.mobile-tab-arrow {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.modal-tabs.mobile-tabs-open .mobile-tab-arrow {
    transform: rotate(180deg);
}

/* ── Bottom-Sheet Modal (mobile only) ── */
@media (max-width: 767px) {
    .modal.mobile-bottom-sheet {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal.mobile-bottom-sheet > .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        margin: 0 !important;
        animation: slideUpModal 0.3s ease;
        overflow-y: auto;
    }

    .modal.mobile-bottom-sheet > .modal-content > .modal-header {
        position: sticky;
        top: 0;
        background: var(--card-bg);
        z-index: 1;
        border-bottom: 1px solid var(--border-color);
        padding: 12px 16px;
    }

    .modal.mobile-bottom-sheet > .modal-content > .modal-header::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-color);
        border-radius: 2px;
        margin: 0 auto 8px auto;
    }

    .modal.mobile-bottom-sheet > .modal-content > .modal-body {
        padding: 16px;
        overflow-y: auto;
        max-height: 70vh;
    }

    .modal.mobile-bottom-sheet > .modal-content > .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--card-bg);
        z-index: 1;
        border-top: 1px solid var(--border-color);
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    @keyframes slideUpModal {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* All modals become bottom-sheets on mobile (only when mobile feature active) */
    body.mobile-layout .modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    body.mobile-layout .modal > .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        margin: 0 !important;
        animation: slideUpModal 0.3s ease;
    }

    body.mobile-layout .modal > .modal-content > .modal-header::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--border-color);
        border-radius: 2px;
        margin: 0 auto 8px auto;
    }

    body.mobile-layout .modal > .modal-content > .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    body.mobile-layout .modal > .modal-content > .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--card-bg);
        z-index: 1;
        border-top: 1px solid var(--border-color);
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    /* ── Compact footer buttons on mobile ── */
    body.mobile-layout .modal-footer {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    body.mobile-layout .modal-footer .btn {
        width: auto !important;
        font-size: 12px;
        padding: 6px 10px;
        min-height: 36px;
    }

    /* ── Full-screen modals for large/flex modals on mobile ── */
    body.mobile-layout .modal > .modal-content.modal-flex,
    body.mobile-layout .modal > .modal-content.modal-xl,
    body.mobile-layout .modal > .modal-content.modal-xxl {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* Full-screen modal header: compact, no drag handle */
    body.mobile-layout .modal > .modal-content.modal-flex > .modal-header,
    body.mobile-layout .modal > .modal-content.modal-xl > .modal-header,
    body.mobile-layout .modal > .modal-content.modal-xxl > .modal-header {
        padding: 10px 16px;
        flex-shrink: 0;
    }

    body.mobile-layout .modal > .modal-content.modal-flex > .modal-header::before,
    body.mobile-layout .modal > .modal-content.modal-xl > .modal-header::before,
    body.mobile-layout .modal > .modal-content.modal-xxl > .modal-header::before {
        display: none;
    }

    /* Body takes all remaining space */
    body.mobile-layout .modal > .modal-content.modal-flex > .modal-body,
    body.mobile-layout .modal > .modal-content.modal-xl > .modal-body,
    body.mobile-layout .modal > .modal-content.modal-xxl > .modal-body {
        flex: 1;
        overflow-y: auto;
        max-height: none !important;
    }

    /* ── Task Detail Modal: mobile-compact header ── */

    /* Hide meta pills (status/priority/due) — already visible in body fields */
    body.mobile-layout #taskDetailModal .task-header-meta {
        display: none !important;
    }

    /* Hide phase stepper — too tall on mobile */
    body.mobile-layout #taskDetailModal .phase-stepper {
        display: none !important;
    }

    /* Compact header: single row — title + small action buttons + close */
    body.mobile-layout #taskDetailModal .modal-header.task-detail-header {
        padding: 10px 12px !important;
        gap: 6px;
        flex-wrap: nowrap;
        align-items: center;
    }

    body.mobile-layout #taskDetailModal .task-header-main h2 {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Camera & History buttons: small icon-only squares inline with title */
    /* Note: no display !important — inline style="display:none" from feature flags must win */
    body.mobile-layout #taskDetailModal .modal-header .btn[data-feature="mobile-camera"],
    body.mobile-layout #taskDetailModal .modal-header .btn[data-feature="version-history"] {
        font-size: 0 !important;
        padding: 6px !important;
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        flex-shrink: 0;
        border-radius: 6px;
    }

    body.mobile-layout #taskDetailModal .modal-header .btn[data-feature="mobile-camera"] i,
    body.mobile-layout #taskDetailModal .modal-header .btn[data-feature="version-history"] i {
        font-size: 14px !important;
    }

    /* ── Task Detail Modal: icon footer buttons with tiny labels ── */
    body.mobile-layout #taskDetailModal .modal-footer {
        gap: 4px;
        padding: 8px 10px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        justify-content: center;
    }

    body.mobile-layout #taskDetailModal .modal-footer .btn {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        line-height: 1;
        padding: 6px 8px;
        min-height: unset;
        gap: 3px;
        border-radius: 8px;
    }

    body.mobile-layout #taskDetailModal .modal-footer .btn i {
        font-size: 16px;
    }

    /* Phase actions container also gets compact layout */
    body.mobile-layout #taskDetailModal .phase-actions {
        display: contents;
    }

    /* Reset "Save as Template" auto-margin so buttons center evenly */
    body.mobile-layout #taskDetailModal .modal-footer #saveAsTemplateBtn {
        margin-right: 0 !important;
    }

    /* ── Task Detail Modal: mobile tab hamburger ── */

    /* Hide normal tab rows on mobile */
    body.mobile-layout #taskDetailModal .tab-group-list,
    body.mobile-layout #taskDetailModal .tab-child-list {
        display: none !important;
    }

    /* Show the mobile trigger bar */
    body.mobile-layout #taskDetailModal .mobile-tab-trigger {
        display: flex !important;
    }

    /* When dropdown is open, show both rows as vertical lists */
    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-group-list {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-child-list {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: var(--bg-white) !important;
    }

    /* Group buttons in dropdown: horizontal chips */
    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-group-btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 11px;
        border-radius: 0;
        border-bottom: none;
    }

    /* Child tabs in dropdown: full-width rows */
    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-btn {
        justify-content: flex-start;
        padding: 12px 16px;
        font-size: 13px;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        border-left: 3px solid transparent;
        background: var(--bg-white);
        color: var(--text-secondary);
    }

    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-btn:last-child {
        border-bottom: none;
    }

    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-btn.active {
        border-left-color: var(--primary-color);
        color: var(--primary-color);
        background: var(--bg-light);
        font-weight: 600;
    }

    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-btn i {
        width: 20px;
        text-align: center;
        opacity: 0.7;
    }

    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-btn.active i {
        opacity: 1;
    }

    /* Dropdown panel positioning */
    body.mobile-layout #taskDetailModal .modal-tabs {
        position: relative;
    }

    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-group-list,
    body.mobile-layout #taskDetailModal .modal-tabs.mobile-tabs-open .tab-child-list {
        position: relative;
        z-index: 20;
    }

    /* ── Mobile form controls: 16px prevents iOS zoom & tiny native pickers ── */
    body.mobile-layout select.form-control,
    body.mobile-layout input.form-control {
        font-size: 16px;
    }

    /* Preferences modal: exempt from compact-view shrinkage */
    #mobilePreferencesModal .form-control {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    #mobilePreferencesModal .form-group label {
        font-size: 14px !important;
    }

    #mobilePreferencesModal .modal-footer .btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
}

/* ── Compact View Mode ── */
body.mobile-compact-view .card,
body.mobile-compact-view .panel,
body.mobile-compact-view .okr-objective-card,
body.mobile-compact-view .task-card {
    padding: 8px;
}

body.mobile-compact-view .card h3,
body.mobile-compact-view .panel-header h3 {
    font-size: 0.9rem;
}

body.mobile-compact-view .form-group {
    margin-bottom: 8px;
}

body.mobile-compact-view .form-group label {
    font-size: 0.75rem;
    margin-bottom: 2px;
}

body.mobile-compact-view .form-control {
    padding: 6px 10px;
    font-size: 0.85rem;
}

body.mobile-compact-view .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
}

body.mobile-compact-view .modal-body {
    padding: 12px;
}

body.mobile-compact-view .table td,
body.mobile-compact-view .table th {
    padding: 6px 8px;
    font-size: 0.8rem;
}

/* ── Detailed View Mode ── */
body.mobile-detailed-view .card,
body.mobile-detailed-view .task-card {
    padding: 20px;
}

body.mobile-detailed-view .card p,
body.mobile-detailed-view .task-card .task-description {
    display: block; /* Show descriptions that may be hidden in compact */
}

/* ── Phone-specific adjustments (<480px) ── */
@media (max-width: 480px) {
    /* Even more compact on small phones */
    .panel-header h3 {
        font-size: 1rem;
    }

    .modal-overlay .modal-container .modal-header h3 {
        font-size: 1rem;
    }

    .btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .form-control {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Two-column stat grids become single column */
    .stat-grid,
    .okr-summary-stats {
        grid-template-columns: 1fr;
    }

    /* Stack action buttons */
    .panel-header-actions {
        flex-direction: column;
    }

    .modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ── Swipe Gesture Visual Feedback ── */
.swipe-indicator {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    pointer-events: none;
}

.swipe-indicator.left {
    left: 8px;
}

.swipe-indicator.right {
    right: 8px;
}

.swipe-indicator.visible {
    opacity: 0.7;
}

/* ── Toggle Label (for preferences checkboxes) ── */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ── Desktop-only: hide mobile elements ── */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }

    .mobile-hamburger {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: none !important;
    }

    .mobile-backdrop {
        display: none !important;
    }
}

/* ── Prevent double-tap zoom on interactive elements ── */
@media (max-width: 1024px) {
    button,
    a,
    input,
    select,
    textarea,
    .btn,
    .sidebar-nav-item,
    .mobile-bottom-nav-tab {
        touch-action: manipulation;
    }
}

/* ── Safe area insets for notched devices ── */
@supports (padding: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.mobile-layout {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
}

/* ── Scrollbar hiding on mobile (cleaner look) ── */
@media (max-width: 767px) {
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    * {
        scrollbar-width: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 11E: Mobile Camera with Auto GPS Tagging
   ═══════════════════════════════════════════════════════════ */

/* ── Camera Preview ── */
.camera-preview-container {
    position: relative;
    background: #000;
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
}

.camera-btn {
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.camera-btn:active {
    transform: scale(0.9);
}

.camera-btn-capture {
    width: 64px;
    height: 64px;
    background: #fff;
    color: var(--danger);
    font-size: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.camera-btn-capture:hover {
    background: #f0f0f0;
}

.camera-btn-secondary {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
}

.camera-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.35);
}

.camera-btn-batch-active {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ── Camera Fallback Message ── */
.camera-fallback-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 32px;
    text-align: center;
}

.camera-fallback-message p {
    margin: 0 0 16px 0;
    font-size: 0.95rem;
}

/* ── GPS Indicator ── */
.camera-gps-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--hover-bg);
}

.camera-gps-indicator.gps-acquired {
    color: var(--success);
}

.camera-gps-indicator.gps-unavailable {
    color: var(--text-muted);
}

.camera-gps-indicator.gps-acquiring {
    color: var(--warning);
}

.camera-gps-details {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 8px 0;
}

.camera-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Photo Preview ── */
.camera-photo-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.camera-captured-image {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    border-radius: var(--border-radius);
    background: #000;
}

.camera-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.camera-meta-fields {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}

/* ── Upload Progress ── */
.camera-upload-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
}

.camera-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    overflow: hidden;
}

.camera-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.camera-progress-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ── Annotation Toolbar ── */
.annotation-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.annotation-tools {
    display: flex;
    gap: 4px;
}

.annotation-tool-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
}

.annotation-tool-btn:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

.annotation-tool-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.annotation-colors {
    display: flex;
    gap: 6px;
    align-items: center;
}

.annotation-color-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s ease;
    padding: 0;
}

.annotation-color-btn:hover {
    transform: scale(1.15);
}

.annotation-color-btn.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary);
}

.annotation-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

/* ── Annotation Canvas ── */
.annotation-canvas-container {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: var(--border-radius);
    min-height: 300px;
}

.annotation-canvas {
    max-width: 100%;
    max-height: 65vh;
    cursor: crosshair;
    touch-action: none;
}

/* ── Batch Review Grid ── */
.camera-batch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    overflow-y: auto;
}

.camera-batch-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

.camera-batch-item img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.camera-batch-item-overlay {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
}

.camera-batch-item-delete {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.camera-batch-item-delete:hover {
    background: var(--danger);
}

.camera-batch-item-meta {
    padding: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.camera-batch-item-meta .gps-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
}

.camera-batch-item-meta .no-gps {
    color: var(--text-muted);
}

.camera-batch-item-meta .camera-batch-category {
    font-size: 0.75rem;
    padding: 2px 4px;
    height: auto;
}

.camera-batch-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-right: auto;
}

/* ── Responsive: Camera ── */
@media (max-width: 768px) {
    .camera-meta-fields {
        grid-template-columns: 1fr;
    }

    .annotation-toolbar {
        gap: 8px;
    }

    .annotation-colors {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .annotation-actions {
        margin-left: 0;
    }

    .camera-batch-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .camera-btn-capture {
        width: 56px;
        height: 56px;
        font-size: 2rem;
    }

    .camera-btn-secondary {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .camera-batch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 11D: GPS-Fenced Clock-In/Out
   ═══════════════════════════════════════════════════════════ */

/* ── Status Bar ── */
.geofence-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    gap: 16px;
}

.geofence-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.geofence-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.geofence-status-dot.clocked-in {
    background: var(--success);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    animation: geofence-pulse 2s infinite;
}

.geofence-status-dot.clocked-out {
    background: var(--text-muted);
}

.geofence-status-dot.watching {
    background: var(--primary);
    animation: geofence-pulse 2s infinite;
}

@keyframes geofence-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.geofence-status-details {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.geofence-project-name {
    font-weight: 600;
    color: var(--text-primary);
}

.geofence-duration {
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--hover-bg);
    padding: 2px 8px;
    border-radius: var(--border-radius);
}

.geofence-bar-collapsible {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.geofence-collapse-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.geofence-collapse-btn:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

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

/* ── GPS Display ── */
.geofence-gps-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.geofence-gps-display .accuracy-badge {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-family: inherit;
}

.geofence-gps-display .accuracy-badge.good {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.geofence-gps-display .accuracy-badge.fair {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.geofence-gps-display .accuracy-badge.poor {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Radius Control ── */
.geofence-radius-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.geofence-radius-control input[type="range"] {
    flex: 1;
    height: 6px;
    appearance: none;
    background: var(--hover-bg);
    border-radius: 3px;
    outline: none;
}

.geofence-radius-control input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.geofence-radius-control input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
}

.geofence-radius-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    min-width: 60px;
    text-align: right;
}

/* ── Toggle Switch ── */
.geofence-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.geofence-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.geofence-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--text-muted);
    border-radius: 12px;
    transition: 0.3s;
}

.geofence-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.geofence-toggle input:checked + .geofence-toggle-slider {
    background: var(--success);
}

.geofence-toggle input:checked + .geofence-toggle-slider::before {
    transform: translateX(20px);
}

/* ── Active Clock-Ins List ── */
.geofence-active-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.geofence-active-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.geofence-active-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.geofence-active-user .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.geofence-active-user .user-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.geofence-active-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.geofence-active-meta .clock-in-time {
    color: var(--text-muted);
}

.geofence-active-meta .duration {
    font-family: monospace;
    font-weight: 600;
    color: var(--primary);
}

/* ── Event Log Table ── */
.geofence-event-log {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.geofence-event-log th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.geofence-event-log td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.geofence-event-log tr:hover {
    background: var(--hover-bg);
}

/* ── Event Type Badges ── */
.geofence-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.geofence-event-badge.event-enter {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.geofence-event-badge.event-exit {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.geofence-event-badge.event-manual-in {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.geofence-event-badge.event-manual-out {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

/* ── Geofence Config Card ── */
.geofence-config-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.geofence-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.geofence-config-row:last-child {
    border-bottom: none;
}

.geofence-config-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.geofence-config-value {
    font-weight: 600;
    font-size: 0.85rem;
}

.geofence-config-value.enabled {
    color: var(--success);
}

.geofence-config-value.disabled {
    color: var(--text-muted);
}

/* ── Nearby Projects ── */
.geofence-nearby-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.geofence-nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.geofence-nearby-item:hover {
    border-color: var(--primary);
}

.geofence-nearby-item.is-inside {
    border-left: 4px solid var(--success);
}

.geofence-nearby-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.geofence-nearby-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.geofence-nearby-distance {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.geofence-nearby-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.geofence-nearby-status.inside {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.geofence-nearby-status.outside {
    background: var(--hover-bg);
    color: var(--text-muted);
}

/* ── Config Help Text ── */
.geofence-config-card .form-help {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Responsive: Geofence ── */
@media (max-width: 768px) {
    .geofence-status-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .geofence-bar-collapsible {
        flex-wrap: wrap;
        gap: 8px;
    }

    .geofence-status-details {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .geofence-active-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .geofence-event-log {
        font-size: 0.75rem;
    }

    .geofence-event-log th,
    .geofence-event-log td {
        padding: 6px 8px;
    }

    .geofence-radius-control {
        flex-direction: column;
        align-items: stretch;
    }

    .geofence-radius-value {
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint Time Bank: Geofence Time Allocation
   ═══════════════════════════════════════════════════════════ */

.time-bank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}

.time-bank-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color);
}

.time-bank-tab {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.time-bank-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.time-bank-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.time-bank-summary-bar {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.time-bank-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    transition: border-color 0.15s;
}

.time-bank-entry:hover {
    border-color: var(--primary);
}

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

.time-bank-entry-project {
    font-weight: 600;
    color: var(--text-primary);
}

.time-bank-entry-hours {
    font-weight: 700;
    font-family: monospace;
    color: var(--warning, #f59e0b);
    font-size: 0.95rem;
}

.time-bank-entry-details {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.time-bank-entry-desc {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-bank-source-info {
    padding: 10px 12px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    line-height: 1.5;
}

.time-bank-split-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.time-bank-split-row select {
    flex: 2;
}

.time-bank-split-row .time-bank-hours-input {
    flex: 0 0 90px;
    text-align: right;
}

.time-bank-split-row input[type="text"] {
    flex: 1;
}

.time-bank-remaining {
    padding: 4px 12px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: auto;
}

.time-bank-remaining.balanced {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success, #10b981);
}

.time-bank-remaining.under {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning, #f59e0b);
}

.time-bank-remaining.over {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, #ef4444);
}

@media (max-width: 768px) {
    .time-bank-split-row {
        flex-wrap: wrap;
    }

    .time-bank-split-row select {
        flex: 1 1 100%;
    }

    .time-bank-split-row .time-bank-hours-input {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 11C: Role-Based Mobile Views
   ═══════════════════════════════════════════════════════════ */

/* ── Role Config Cards ── */
.mr-config-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mr-config-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: border-color 0.2s;
}

.mr-config-card:hover {
    border-color: var(--primary);
}

.mr-config-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mr-config-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary);
    flex-shrink: 0;
}

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

.mr-config-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.mr-config-role-key {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.mr-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mr-badge-default {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.mr-config-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.mr-config-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.mr-config-stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.mr-config-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mr-config-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Checklist Grid (for panels/actions selection) ── */
.mr-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}

.mr-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.mr-checkbox-item:hover {
    background: var(--hover-bg);
}

.mr-checkbox-item input[type="checkbox"] {
    flex-shrink: 0;
}

.mr-checkbox-item i {
    color: var(--text-muted);
    width: 16px;
    text-align: center;
}

/* ── User Role Assignment List ── */
.mr-user-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mr-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.mr-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mr-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.mr-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mr-user-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.mr-role-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mr-role-field-worker {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.mr-role-subcontractor {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}

.mr-role-superintendent {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-accent);
}

.mr-role-custom {
    background: var(--hover-bg);
    color: var(--text-secondary);
}

/* ── Dashboard ── */
.mr-dashboard-wrapper {
    padding: 16px;
}

.mr-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mr-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.mr-dashboard-greeting h2 {
    margin: 0;
    font-size: 1.25rem;
}

.mr-dashboard-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

.mr-dashboard-summary {
    display: flex;
    gap: 16px;
    align-items: center;
}

.mr-summary-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mr-summary-item strong {
    color: var(--primary);
    font-size: 1rem;
}

/* ── Quick Action Bar ── */
.mr-quick-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mr-quick-actions::-webkit-scrollbar {
    display: none;
}

.mr-quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    min-width: 80px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.mr-quick-action-btn:hover {
    border-color: var(--primary);
    background: var(--hover-bg);
}

.mr-quick-action-btn i {
    font-size: 1.25rem;
    color: var(--primary);
}

/* ── Task Picker Bar (Sprint 11C-Picker) ── */
.mr-task-picker-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.mr-task-picker-bar:hover {
    border-color: var(--primary);
    background: var(--hover-bg);
}

.mr-task-picker-bar.has-task {
    border-style: solid;
    border-left: 4px solid var(--primary);
    color: var(--text-primary);
}

.mr-task-picker-bar .mr-picker-icon {
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.mr-task-picker-bar.has-task .mr-picker-icon {
    color: var(--primary);
}

.mr-task-picker-bar .mr-picker-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-task-picker-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hover-bg);
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.mr-task-picker-clear:hover {
    background: var(--danger);
    color: #fff;
}

/* ── Task Picker Modal Internals ── */
.mr-picker-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.mr-picker-search:focus {
    outline: none;
    border-color: var(--primary);
}

.mr-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
}

.mr-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.12s;
}

.mr-picker-item:hover {
    background: var(--hover-bg);
}

.mr-picker-item.selected {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.06);
}

.mr-picker-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mr-picker-priority.priority-critical { background: var(--danger); }
.mr-picker-priority.priority-high { background: #ef4444; }
.mr-picker-priority.priority-medium { background: var(--warning); }
.mr-picker-priority.priority-low { background: var(--text-muted); }

.mr-picker-item-info {
    flex: 1;
    min-width: 0;
}

.mr-picker-item-title {
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-picker-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.mr-picker-item-meta .overdue {
    color: var(--danger);
    font-weight: 500;
}

.mr-picker-check {
    color: var(--primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* ── Dashboard Panels ── */
.mr-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.mr-panel-warning {
    border-left: 4px solid var(--warning);
}

.mr-panel-danger {
    border-left: 4px solid var(--danger);
}

.mr-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mr-panel-title i {
    color: var(--text-muted);
}

.mr-empty-panel {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Task Cards ── */
.mr-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mr-task-card {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.15s;
}

.mr-task-card:hover {
    background: var(--hover-bg);
}

.mr-task-card.mr-task-overdue {
    border-left: 4px solid var(--danger);
}

.mr-task-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.mr-task-title {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.mr-priority-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
}

.mr-priority-high, .mr-priority-critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.mr-priority-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.mr-priority-low {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
}

.mr-task-meta {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.mr-task-meta i {
    margin-right: 3px;
}

.mr-task-status {
    font-weight: 500;
}

/* ── Active Timer ── */
.mr-active-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--border-radius);
}

.mr-timer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mr-timer-icon {
    font-size: 1.5rem;
    color: var(--success);
    animation: geofence-pulse 2s infinite;
}

.mr-timer-task {
    font-weight: 500;
    font-size: 0.9rem;
}

.mr-timer-elapsed {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--success);
}

/* ── Stats Row ── */
.mr-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.mr-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.mr-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.mr-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.mr-stat-value-large {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--danger);
    text-align: center;
    padding: 16px 0;
}

.mr-stat-row-inline {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.mr-stat-row-inline span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mr-text-danger {
    color: var(--danger);
    font-weight: 500;
}

/* ── Weather Bar ── */
.mr-weather-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}

.mr-weather-temp {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.mr-weather-cond {
    color: var(--text-secondary);
}

.mr-weather-wind {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ── Crew List ── */
.mr-crew-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mr-crew-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.mr-crew-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mr-crew-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.mr-crew-task {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.mr-crew-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
}

.mr-crew-hours {
    font-weight: 600;
    font-family: monospace;
    color: var(--primary);
}

.mr-crew-active {
    color: var(--success);
    font-size: 0.7rem;
    font-weight: 600;
}

.mr-crew-active i {
    font-size: 0.5rem;
    animation: geofence-pulse 2s infinite;
}

/* ══════════════════════════════════════════════════════════════
   Daily Log Styles
   ══════════════════════════════════════════════════════════════ */

/* ── Daily Log Section ── */
.dl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dl-section-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

/* ── Daily Log Cards ── */
.dl-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dl-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dl-card-date {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.dl-card-date i {
    margin-right: 6px;
    color: var(--text-muted);
}

.dl-card-stats {
    display: flex;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.dl-card-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dl-card-stat i {
    color: var(--text-muted);
}

.dl-stat-danger {
    color: var(--danger);
    font-weight: 500;
}

.dl-card-author {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ── Status Badges ── */
.dl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dl-status-draft {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.dl-status-submitted {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.dl-status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.dl-status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Daily Log Detail ── */
.dl-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dl-detail-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.dl-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dl-detail-title-row h3 {
    margin: 0;
}

.dl-detail-project {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.dl-detail-author {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Weather Section ── */
.dl-weather-section {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: var(--border-radius);
}

.dl-weather-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
}

.dl-weather-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.dl-weather-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.dl-weather-item i {
    color: var(--text-muted);
}

/* ── Summary Stats ── */
.dl-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.dl-stat-item {
    text-align: center;
    padding: 12px 8px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
}

.dl-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.dl-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.dl-stat-danger-item {
    background: rgba(239, 68, 68, 0.06);
}

.dl-stat-danger-item .dl-stat-value {
    color: var(--danger);
}

/* ── Notes Section ── */
.dl-notes-section {
    padding: 12px 16px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
}

.dl-notes-section h4 {
    margin: 0 0 6px 0;
    font-size: 0.9rem;
}

.dl-notes-section p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* ── Entries Section ── */
.dl-entries-section {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

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

.dl-entries-header h4 {
    margin: 0;
    font-size: 0.95rem;
}

.dl-empty-entries {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dl-entry-group {
    margin-bottom: 12px;
}

.dl-entry-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--hover-bg);
    border-left: 3px solid var(--text-muted);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.dl-entry-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--card-bg);
    padding: 0 6px;
    border-radius: 8px;
}

.dl-entry-item {
    padding: 8px 12px 8px 24px;
    border-bottom: 1px solid var(--border-color);
}

.dl-entry-item:last-child {
    border-bottom: none;
}

.dl-entry-desc {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.dl-entry-meta {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dl-entry-meta i {
    margin-right: 3px;
}

.dl-entry-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* ── Entry Type Badges ── */
.dl-entry-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dl-type-work-performed {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-info);
}

.dl-type-material-used {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.dl-type-equipment-used {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.dl-type-visitor {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.dl-type-delay {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.dl-type-safety-note {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* ── Workflow Actions ── */
.dl-workflow-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.dl-approved-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ── Summary Grid ── */
.dl-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.dl-summary-card {
    text-align: center;
    padding: 16px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.dl-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.dl-summary-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.dl-summary-danger {
    border-color: rgba(239, 68, 68, 0.3);
}

.dl-summary-danger .dl-summary-value {
    color: var(--danger);
}

/* ── Status Breakdown Bars ── */
.dl-status-breakdown {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.dl-status-breakdown h4 {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
}

.dl-status-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-status-bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dl-status-bar-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 70px;
}

.dl-status-bar {
    flex: 1;
    height: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    overflow: hidden;
}

.dl-status-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.dl-bar-draft {
    background: var(--text-muted);
}

.dl-bar-submitted {
    background: var(--primary);
}

.dl-bar-approved {
    background: var(--success);
}

.dl-status-bar-count {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 24px;
    text-align: right;
}

/* ── Crew On Site ── */
.dl-crew-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dl-crew-header h4 {
    margin: 0;
    font-size: 0.95rem;
}

.dl-crew-totals {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dl-crew-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-crew-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.dl-crew-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dl-crew-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.dl-crew-task {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dl-crew-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
}

.dl-crew-hours {
    font-weight: 600;
    font-family: monospace;
    color: var(--primary);
}

.dl-crew-active {
    color: var(--success);
    font-size: 0.7rem;
    font-weight: 600;
}

.dl-crew-active i {
    font-size: 0.5rem;
}

.dl-crew-inactive {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.dl-crew-clockin {
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* ── Daily Log Summary Section ── */
.dl-daily-log-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Responsive: Sprint 11C ── */
@media (max-width: 768px) {
    .mr-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mr-dashboard-summary {
        width: 100%;
        justify-content: flex-start;
    }

    .mr-quick-actions {
        padding-bottom: 4px;
    }

    .mr-quick-action-btn {
        min-width: 70px;
        padding: 10px 12px;
    }

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

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

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

    .dl-card-stats {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mr-crew-row,
    .dl-crew-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .mr-config-stats {
        gap: 8px;
    }

    .dl-detail-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .mr-checklist-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .mr-quick-action-btn {
        min-width: 64px;
        padding: 8px 10px;
        font-size: 0.7rem;
    }

    .mr-quick-action-btn i {
        font-size: 1rem;
    }

    .dl-summary-stats,
    .dl-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

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

/* ══════════════════════════════════════════════════════════════
   Sprint 11F: Offline Sync Styles
   ══════════════════════════════════════════════════════════════ */

/* ── Sync Status Indicator (top bar) ────────────────────────── */

.sync-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    cursor: default;
    position: relative;
}

.sync-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.sync-status-dot.sync-connected {
    background: var(--success-color);
    box-shadow: 0 0 4px var(--success-color);
}

.sync-status-dot.sync-syncing {
    background: var(--primary-color);
    animation: syncPulse 1.2s ease-in-out infinite;
}

.sync-status-dot.sync-pending {
    background: var(--warning-color);
    box-shadow: 0 0 4px var(--warning-color);
}

.sync-status-dot.sync-offline {
    background: var(--danger-color);
    box-shadow: 0 0 4px var(--danger-color);
}

@keyframes syncPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.sync-status-text {
    color: var(--text-secondary);
    white-space: nowrap;
}

.sync-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--warning-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
}

/* ── Offline Sync Banner ────────────────────────────────────── */

/* Default hidden; JS sets display:flex only when truly offline */
.sync-offline-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--danger-light), #fff5f5);
    border-bottom: 2px solid var(--danger-color);
    color: var(--danger-color);
    font-size: 0.85rem;
    font-weight: 500;
}

.sync-offline-banner i:first-child {
    font-size: 1rem;
}

.sync-last-sync-time {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.sync-banner-dismiss {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    opacity: 0.6;
}

.sync-banner-dismiss:hover {
    opacity: 1;
}

/* ── Sync Progress Bar ──────────────────────────────────────── */

.sync-progress-bar {
    height: 3px;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

.sync-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
    width: 30%;
    animation: syncProgressSlide 1.5s ease-in-out infinite;
}

@keyframes syncProgressSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ── Sync Status Dashboard ──────────────────────────────────── */

.sync-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.sync-stat-card {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.sync-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sync-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.sync-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

.sync-health-good {
    background: var(--success-light);
    color: var(--success-color);
}

.sync-health-warning {
    background: var(--warning-light);
    color: var(--warning-color);
}

/* ── Entity Sync Statuses ───────────────────────────────────── */

.sync-entity-statuses {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sync-entity-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 0.82rem;
}

.sync-entity-status-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    min-width: 120px;
}

.sync-entity-status-type i {
    width: 16px;
    text-align: center;
    color: var(--primary-color);
}

.sync-entity-status-count {
    color: var(--text-secondary);
}

.sync-entity-status-time {
    margin-left: auto;
    font-size: 0.76rem;
}

/* ── Storage Bar ────────────────────────────────────────────── */

.sync-storage-section {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 14px;
}

.sync-storage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.sync-storage-track {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.sync-storage-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
    transition: width 0.4s ease, background 0.4s ease;
}

/* ── Sync Controls Row ──────────────────────────────────────── */

.sync-controls-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Project Selection ──────────────────────────────────────── */

.sync-project-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sync-project-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    transition: border-color 0.2s;
}

.sync-project-card:hover {
    border-color: var(--primary-color);
}

.sync-project-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sync-project-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.sync-project-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sync-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border-color);
    transition: 0.3s;
    border-radius: 20px;
}

.sync-toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
}

.sync-project-toggle input:checked + .sync-toggle-slider {
    background-color: var(--primary-color);
}

.sync-project-toggle input:checked + .sync-toggle-slider:before {
    transform: translateX(16px);
}

.sync-project-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sync-project-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.sync-project-last-sync {
    font-size: 0.76rem;
}

.sync-project-size {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

.sync-project-toggles {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.sync-mini-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.sync-mini-toggle input {
    accent-color: var(--primary-color);
}

/* ── Settings Toggle Labels ─────────────────────────────────── */

.sync-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    position: relative;
}

.sync-toggle-label input[type="checkbox"] {
    position: relative;
    width: 36px;
    height: 20px;
    appearance: none;
    background: var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}

.sync-toggle-label input[type="checkbox"]:checked {
    background: var(--primary-color);
}

.sync-toggle-label input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    background: #fff;
    transition: transform 0.3s;
}

.sync-toggle-label input[type="checkbox"]:checked::before {
    transform: translateX(16px);
}

/* ── Conflict Resolution ────────────────────────────────────── */

.sync-conflict-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sync-conflict-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--danger-color);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

.sync-conflict-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    transition: opacity 0.3s, transform 0.3s;
}

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

.sync-conflict-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.88rem;
}

.sync-conflict-type i {
    color: var(--primary-color);
}

.sync-conflict-entity-id {
    color: var(--text-muted);
    font-weight: 400;
}

.sync-conflict-time {
    font-size: 0.76rem;
}

.sync-conflict-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.78rem;
}

.sync-conflict-field-tag {
    background: var(--warning-light);
    color: var(--warning-color);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── Diff View (side-by-side) ───────────────────────────────── */

.sync-conflict-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.sync-conflict-side {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.sync-conflict-side-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.sync-conflict-local .sync-conflict-side-header {
    background: var(--success-light);
    color: var(--success-color);
}

.sync-conflict-server .sync-conflict-side-header {
    background: var(--info-light);
    color: var(--info-color);
}

.sync-conflict-payload {
    padding: 8px 10px;
    font-size: 0.76rem;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.sync-diff-row {
    padding: 2px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
    word-break: break-word;
}

.sync-diff-key {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 4px;
}

.sync-diff-addition {
    background: #dcfce7;
    color: #166534;
}

.sync-diff-deletion {
    background: #fef2f2;
    color: #991b1b;
}

/* Dark mode overrides for diff */
[data-theme="dark"] .sync-diff-addition {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

[data-theme="dark"] .sync-diff-deletion {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

[data-theme="dark"] .sync-conflict-local .sync-conflict-side-header {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

[data-theme="dark"] .sync-conflict-server .sync-conflict-side-header {
    background: rgba(37, 99, 235, 0.12);
    color: #93c5fd;
}

/* ── Conflict Resolution Actions ────────────────────────────── */

.sync-conflict-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sync-conflict-actions .btn {
    font-size: 0.78rem;
    padding: 5px 12px;
}

/* ── Empty State ────────────────────────────────────────────── */

.sync-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
}

.sync-empty-state i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.sync-empty-state p {
    margin: 4px 0;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
    .sync-indicator {
        padding: 3px 8px;
        font-size: 0.72rem;
    }

    .sync-status-text {
        display: none;
    }

    .sync-status-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sync-conflict-diff {
        grid-template-columns: 1fr;
    }

    .sync-controls-row {
        flex-direction: column;
    }

    .sync-controls-row .btn {
        width: 100%;
        justify-content: center;
    }

    .sync-project-toggles {
        flex-direction: column;
        gap: 8px;
    }

    .sync-offline-banner {
        flex-wrap: wrap;
        font-size: 0.78rem;
        padding: 8px 12px;
    }

    .sync-last-sync-time {
        margin-left: 0;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 12A: Project Health Score
   ═══════════════════════════════════════════════════════════ */

/* ── Org Summary Row ── */
.health-org-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: center;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.health-org-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.health-org-gauge .gauge-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.health-org-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.health-zone-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.health-zone-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    flex: 1;
    min-width: 100px;
}

.health-zone-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-zone-dot.excellent { background: #10b981; }
.health-zone-dot.good { background: var(--color-info); }
.health-zone-dot.fair { background: #EAB308; }
.health-zone-dot.at-risk { background: #f59e0b; }
.health-zone-dot.critical { background: #ef4444; }

.health-zone-stat .zone-count {
    font-size: 1.4rem;
    font-weight: 700;
}

.health-zone-stat .zone-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.health-total-projects {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ── Project Health Cards Grid ── */
.health-project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.health-project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.health-project-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

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

.health-project-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 12px;
}

.health-score-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.health-score-badge.health-zone-excellent { background: #10b981; }
.health-score-badge.health-zone-good { background: var(--color-info); }
.health-score-badge.health-zone-fair { background: #EAB308; color: var(--color-text); }
.health-score-badge.health-zone-at-risk { background: #f59e0b; color: var(--color-text); }
.health-score-badge.health-zone-critical { background: #ef4444; }

.health-project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.health-score-delta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.health-score-delta.positive { color: #10b981; }
.health-score-delta.negative { color: #ef4444; }
.health-score-delta.neutral { color: var(--text-muted); }

.health-zone-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.health-zone-badge.excellent { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.health-zone-badge.good { background: rgba(59, 130, 246, 0.1); color: var(--color-info); }
.health-zone-badge.fair { background: rgba(234, 179, 8, 0.1); color: #b45309; }
.health-zone-badge.at-risk { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.health-zone-badge.critical { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.health-zone-badge.green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.health-zone-badge.yellow { background: rgba(234, 179, 8, 0.1); color: #b45309; }
.health-zone-badge.red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.health-snapshot-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Project Detail View ── */
.health-project-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.health-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.health-project-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* ── Tab Bar ── */
.health-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.health-tab-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.health-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.health-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.health-tab-content {
    min-height: 200px;
}

/* ── Overview Tab ── */
.health-overview-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    align-items: start;
}

.health-overview-gauge-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.health-overview-zone {
    text-align: center;
}

.health-overview-date {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.health-overview-components {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.health-overview-components h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 16px 0;
}

/* ── Component Breakdown ── */
.health-components {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.health-component-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.health-component-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

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

.health-component-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.health-component-bar {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
}

.health-component-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.health-component-bar-fill.excellent { background: #10b981; }
.health-component-bar-fill.good { background: var(--color-info); }
.health-component-bar-fill.fair { background: #EAB308; }
.health-component-bar-fill.at-risk { background: #f59e0b; }
.health-component-bar-fill.critical { background: #ef4444; }

.health-component-score {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
}

.health-component-weight {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Component Detail Cards ── */
.health-components-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.health-component-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.health-component-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}

.health-component-icon-lg {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 1rem;
    flex-shrink: 0;
}

.health-component-card-title {
    flex: 1;
    min-width: 0;
}

.health-component-card-title h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.health-component-card-title p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.health-component-card-score {
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
}

.health-component-card-score.excellent { color: #10b981; }
.health-component-card-score.good { color: var(--color-info); }
.health-component-card-score.fair { color: #EAB308; }
.health-component-card-score.at-risk { color: #f59e0b; }
.health-component-card-score.critical { color: #ef4444; }

.health-component-bar-lg {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
}

.health-component-bar-lg .health-component-bar-fill {
    height: 100%;
    border-radius: 4px;
}

/* ── Trend Chart ── */
.health-trend-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

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

.health-trend-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.health-trend-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.health-trend-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.health-trend-chart-wrapper {
    width: 100%;
    overflow: hidden;
}

.health-trend-canvas {
    width: 100%;
    height: 220px;
    display: block;
}

/* ── Alerts List ── */
.health-alerts-section {
    margin-bottom: 24px;
}

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

.health-alerts-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.health-alert-badge {
    background: var(--danger-color);
    color: white;
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    line-height: 1.4;
}

.health-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.health-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: background 0.15s;
}

.health-alert-item.unread {
    border-left: 3px solid var(--primary-color);
    background: var(--primary-light);
}

.health-alert-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.health-alert-icon.score-drop {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.health-alert-icon.red-zone {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

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

.health-alert-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.health-alert-message {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.health-alert-scores {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.health-alert-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.health-alert-actions {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
}

/* ── Gauge Circle ── */
.health-gauge-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.health-gauge-score {
    line-height: 1;
}

.health-gauge-zone-label {
    line-height: 1.4;
    margin-top: 2px;
}

/* ── Config Modal ── */
.health-weight-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.health-weight-row input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-hover);
    border-radius: 3px;
    outline: none;
}

.health-weight-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

.health-weight-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

.health-weight-value {
    min-width: 40px;
    text-align: right;
    font-weight: 600;
    font-size: 0.9rem;
}

.health-weight-total {
    text-align: right;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}

.health-weight-total.invalid {
    color: var(--danger-color);
}

.health-weight-total.valid {
    color: var(--success-color);
}

/* ── Loading State ── */
.health-project-cards .loading-spinner,
#healthScoreDashboardContent .loading-spinner {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .health-org-summary {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .health-zone-stats {
        flex-direction: column;
    }

    .health-project-cards {
        grid-template-columns: 1fr;
    }

    .health-overview-grid {
        grid-template-columns: 1fr;
    }

    .health-overview-gauge-section {
        order: -1;
    }

    .health-component-card-header {
        flex-wrap: wrap;
    }

    .health-trend-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .health-trend-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .health-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .health-tab-btn {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 12E: Cost Certainty Index
   ═══════════════════════════════════════════════════════════ */

/* ── Org Summary ── */
.cci-org-summary {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: center;
}

.cci-org-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cci-org-gauge canvas {
    border-radius: 50%;
}

.cci-org-gauge .gauge-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cci-zone-stats {
    display: flex;
    gap: 16px;
}

.cci-zone-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    flex: 1;
}

.cci-zone-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cci-zone-dot.high { background: #10b981; }
.cci-zone-dot.medium { background: #f59e0b; }
.cci-zone-dot.low { background: #ef4444; }

.cci-zone-stat .zone-count {
    font-size: 1.5rem;
    font-weight: 700;
}

.cci-zone-stat .zone-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ── Project CCI Cards ── */
.cci-project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cci-project-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.cci-project-card:hover {
    box-shadow: var(--shadow-lg);
}

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

.cci-project-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 12px;
}

.cci-score-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.cci-score-badge.cci-zone-high { background: #10b981; }
.cci-score-badge.cci-zone-medium { background: #f59e0b; }
.cci-score-badge.cci-zone-low { background: #ef4444; }

.cci-score-delta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.cci-score-delta.positive { color: #10b981; }
.cci-score-delta.negative { color: #ef4444; }
.cci-score-delta.neutral { color: var(--text-muted); }

.cci-zone-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cci-zone-badge.high { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.cci-zone-badge.medium { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.cci-zone-badge.low { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* ── Component Breakdown ── */
.cci-components {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.cci-component-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.cci-component-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background: var(--hover-bg);
    color: var(--text-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

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

.cci-component-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.cci-component-bar {
    height: 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
}

.cci-component-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.cci-component-bar-fill.high { background: #10b981; }
.cci-component-bar-fill.medium { background: #f59e0b; }
.cci-component-bar-fill.low { background: #ef4444; }

.cci-component-score {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
}

.cci-component-weight {
    font-size: 0.7rem;
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
    flex-shrink: 0;
}

.cci-component-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Trend Chart ── */
.cci-trend-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 24px;
}

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

.cci-trend-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.cci-trend-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cci-trend-dates input {
    width: 130px;
    font-size: 0.8rem;
}

.cci-trend-canvas {
    width: 100%;
    height: 200px;
    display: block;
}

/* ── Config Modal ── */
.cci-weight-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cci-weight-row input[type="range"] {
    flex: 1;
}

.cci-weight-value {
    min-width: 40px;
    text-align: right;
    font-weight: 600;
    font-size: 0.9rem;
}

.cci-weight-total {
    text-align: right;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}

.cci-weight-total.invalid {
    color: var(--danger-color);
}

/* ── Loading State ── */
#cciDashboardContent .loading-spinner {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cci-org-summary {
        grid-template-columns: 1fr;
    }

    .cci-zone-stats {
        flex-direction: column;
    }

    .cci-project-cards {
        grid-template-columns: 1fr;
    }

    .cci-component-row {
        flex-wrap: wrap;
    }

    .cci-trend-dates {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 12F: Dispute Prevention Score
   ═══════════════════════════════════════════════════════════ */

/* ── Summary Stats Row ── */
.dp-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dp-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.dp-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.dp-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── Project Score List ── */
.dp-project-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-project-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color 0.2s;
}

.dp-project-row:hover {
    border-color: var(--primary);
}

.dp-project-row .project-name {
    flex: 1;
    font-weight: 500;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-project-row .score-bar-container {
    width: 120px;
    flex-shrink: 0;
}

.dp-score-bar {
    height: 8px;
    background: var(--hover-bg);
    border-radius: 4px;
    overflow: hidden;
}

.dp-score-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.dp-project-row .score-value {
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 50px;
    text-align: right;
}

.dp-project-row .alert-count {
    font-size: 0.75rem;
    color: var(--danger);
    min-width: 40px;
    text-align: center;
}

/* ── Risk Zone Badges ── */
.dp-risk-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 70px;
    text-align: center;
}

.dp-risk-badge.risk-low {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.dp-risk-badge.risk-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.dp-risk-badge.risk-elevated {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.dp-risk-badge.risk-high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Detail Grid Layout ── */
.dp-detail-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

/* ── Risk Gauge ── */
.dp-gauge-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dp-risk-gauge {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dp-risk-gauge::before {
    content: '';
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--bg-card);
    position: absolute;
}

.dp-gauge-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.dp-gauge-score {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.dp-gauge-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ── Component Breakdown Bars ── */
.dp-components-section h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.dp-component-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.dp-component-label {
    width: 140px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-align: right;
}

.dp-component-bar-container {
    flex: 1;
    height: 10px;
    background: var(--hover-bg);
    border-radius: 5px;
    overflow: hidden;
}

.dp-component-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
}

.dp-component-value {
    width: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.dp-component-detail {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 150px;
    margin-top: -6px;
    margin-bottom: 8px;
}

/* ── Trend Chart Section ── */
.dp-trend-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 24px;
}

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

.dp-trend-header h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.dp-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

#dpTrendCanvas {
    width: 100%;
    max-height: 300px;
}

/* ── Alert Panel ── */
.dp-alerts-section h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.dp-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-alert-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--text-muted);
}

.dp-alert-card.severity-warning {
    border-left-color: var(--warning);
}

.dp-alert-card.severity-critical {
    border-left-color: var(--danger);
}

.dp-alert-card.acknowledged {
    opacity: 0.6;
}

.dp-alert-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.dp-alert-icon.severity-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.dp-alert-icon.severity-critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

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

.dp-alert-message {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.dp-alert-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dp-alert-actions {
    flex-shrink: 0;
}

/* ── Score Colors (inverted: green=low risk/high score, red=high risk/low score) ── */
.dp-score-low { color: var(--success); }
.dp-score-medium { color: var(--warning); }
.dp-score-elevated { color: #f97316; }
.dp-score-high { color: var(--danger); }

.dp-fill-low { background: var(--success); }
.dp-fill-medium { background: var(--warning); }
.dp-fill-elevated { background: #f97316; }
.dp-fill-high { background: var(--danger); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .dp-detail-grid {
        grid-template-columns: 1fr;
    }

    .dp-gauge-section {
        flex-direction: row;
        justify-content: center;
    }

    .dp-component-label {
        width: 100px;
        font-size: 0.7rem;
    }

    .dp-component-detail {
        margin-left: 110px;
    }

    .dp-trend-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 12C: Schedule Risk Prediction
   ═══════════════════════════════════════════════════════════ */

/* ── Summary Cards ── */
.schedule-risk-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.schedule-risk-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.schedule-risk-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.schedule-risk-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.schedule-risk-stat-card.risk-high .stat-value { color: var(--danger); }
.schedule-risk-stat-card.risk-medium .stat-value { color: var(--warning); }
.schedule-risk-stat-card.risk-low .stat-value { color: var(--success); }

/* ── Risk Table ── */
.schedule-risk-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.schedule-risk-table th {
    background: var(--hover-bg);
    padding: 10px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    border-bottom: 2px solid var(--border-color);
}

.schedule-risk-table th:hover {
    background: var(--border-color);
}

.schedule-risk-table th .sort-icon {
    margin-left: 4px;
    font-size: 0.7rem;
    opacity: 0.5;
}

.schedule-risk-table th.active-sort .sort-icon {
    opacity: 1;
    color: var(--primary);
}

.schedule-risk-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.schedule-risk-table tr:hover {
    background: var(--hover-bg);
}

/* ── Risk Badge ── */
.risk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.risk-badge.risk-high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.risk-badge.risk-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.risk-badge.risk-low {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.risk-badge .confidence {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
}

/* ── Factor Breakdown Cards ── */
.risk-factor-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.risk-factor-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px;
}

.risk-factor-card .factor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.risk-factor-card .factor-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.risk-factor-card .factor-score {
    font-size: 0.85rem;
    font-weight: 700;
}

.risk-factor-card .factor-bar {
    height: 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.risk-factor-card .factor-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.risk-factor-card .factor-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.risk-factor-card .factor-weight {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Factor Mini-Bar (inline in table) ── */
.factor-mini-bar {
    display: flex;
    height: 4px;
    width: 100px;
    border-radius: 2px;
    overflow: hidden;
}

.factor-mini-bar .segment {
    height: 100%;
}

/* ── What-If Results ── */
.whatif-summary {
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    gap: 24px;
    align-items: center;
}

.whatif-summary .summary-item {
    text-align: center;
}

.whatif-summary .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.whatif-summary .summary-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.whatif-table {
    width: 100%;
    border-collapse: collapse;
}

.whatif-table th {
    background: var(--hover-bg);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.whatif-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.whatif-table .impact-days {
    font-weight: 600;
    color: var(--danger);
}

.whatif-table .cascade-depth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hover-bg);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Trend Chart Section ── */
.schedule-risk-trend-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-top: 24px;
}

.schedule-risk-trend-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.schedule-risk-trend-section canvas {
    width: 100%;
    max-height: 250px;
}

/* ── Gantt Overlay Toggles ── */
.gantt-risk-toggle.active {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}
.gantt-critical-path-toggle.active {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .schedule-risk-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .risk-factor-cards {
        grid-template-columns: 1fr;
    }

    .schedule-risk-table {
        font-size: 0.8rem;
    }

    .schedule-risk-table th,
    .schedule-risk-table td {
        padding: 8px 6px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 12D: Cost Overrun Warning
   ═══════════════════════════════════════════════════════════ */

/* ── Prediction Summary ── */
.cost-overrun-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cost-overrun-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.cost-overrun-stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.cost-overrun-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.cost-overrun-stat-card .stat-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.cost-overrun-stat-card.overrun-ok .stat-value { color: var(--success); }
.cost-overrun-stat-card.overrun-warning .stat-value { color: var(--warning); }
.cost-overrun-stat-card.overrun-critical .stat-value { color: var(--danger); }

/* ── Alert Banner ── */
.cost-overrun-alert-banner {
    border-radius: var(--border-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cost-overrun-alert-banner.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--warning);
}

.cost-overrun-alert-banner.alert-critical {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
}

.cost-overrun-alert-banner .alert-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cost-overrun-alert-banner .alert-message {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}

.cost-overrun-alert-banner .alert-ack-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: var(--border-radius);
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
}

.cost-overrun-alert-banner .alert-ack-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ── Trajectory Chart Section ── */
.cost-overrun-chart-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 24px;
}

.cost-overrun-chart-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.cost-overrun-chart-section canvas {
    width: 100%;
    max-height: 300px;
}

/* ── Trend Factor Cards ── */
.cost-overrun-factors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cost-overrun-factor-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
}

.cost-overrun-factor-card .factor-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cost-overrun-factor-card .factor-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.cost-overrun-factor-card .factor-icon.favorable {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.cost-overrun-factor-card .factor-icon.neutral {
    background: var(--hover-bg);
    color: var(--text-secondary);
}

.cost-overrun-factor-card .factor-icon.unfavorable {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.cost-overrun-factor-card .factor-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.cost-overrun-factor-card .factor-value {
    font-size: 1.2rem;
    font-weight: 700;
}

.cost-overrun-factor-card .factor-bar {
    height: 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
    position: relative;
}

.cost-overrun-factor-card .factor-bar-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--text-muted);
}

.cost-overrun-factor-card .factor-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cost-overrun-factor-card .factor-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.cost-overrun-factor-card.factor-disabled {
    opacity: 0.5;
    font-style: italic;
}

/* ── Comparison Section ── */
.cost-overrun-comparison {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 24px;
}

.cost-overrun-comparison h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.cost-overrun-comparison-summary {
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    padding: 14px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.cost-overrun-comparison-summary .highlight {
    font-weight: 700;
    color: var(--primary);
}

.cost-overrun-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.cost-overrun-comparison-table th {
    background: var(--hover-bg);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.cost-overrun-comparison-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.cost-overrun-comparison-table .overrun-positive {
    color: var(--danger);
    font-weight: 600;
}

.cost-overrun-comparison-table .overrun-negative {
    color: var(--success);
    font-weight: 600;
}

/* ── Overrun Status Badge ── */
.overrun-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.overrun-badge.overrun-ok {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.overrun-badge.overrun-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.overrun-badge.overrun-critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Alert History Table ── */
.cost-overrun-alert-table {
    width: 100%;
    border-collapse: collapse;
}

.cost-overrun-alert-table th {
    background: var(--hover-bg);
    padding: 8px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.cost-overrun-alert-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.cost-overrun-alert-table .alert-level-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cost-overrun-alert-table .alert-level-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.cost-overrun-alert-table .alert-level-badge.critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.cost-overrun-alert-table .ack-status {
    font-size: 0.8rem;
}

.cost-overrun-alert-table .ack-status.acknowledged {
    color: var(--success);
}

.cost-overrun-alert-table .ack-status.active {
    color: var(--danger);
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cost-overrun-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .cost-overrun-factors {
        grid-template-columns: 1fr;
    }

    .cost-overrun-alert-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 12B: Cross-Subtype Intelligence
   ═══════════════════════════════════════════════════════════ */

/* ── Tab Bar ── */
.csi-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.csi-tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.csi-tab-btn:hover {
    color: var(--text);
    background: var(--hover-bg);
}

.csi-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ── Summary Row ── */
.csi-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.csi-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.csi-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.csi-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ── Heatmap Section ── */
.csi-heatmap-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.csi-heatmap-section h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.csi-heatmap-section canvas {
    display: block;
    max-width: 100%;
}

/* ── Scatter Plot Section ── */
.csi-scatter-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.csi-scatter-section h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.csi-scatter-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.csi-scatter-chart {
    flex: 1;
    min-width: 0;
}

.csi-scatter-chart canvas {
    display: block;
    max-width: 100%;
}

.csi-scatter-insight {
    flex: 1;
    min-width: 240px;
    max-width: 400px;
}

.csi-insight-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    margin-bottom: 14px;
}
.csi-insight-strength.strong { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.csi-insight-strength.moderate { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.csi-insight-strength.weak { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.csi-insight-strength.negligible { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }

.csi-insight-emoji {
    font-size: 1.1rem;
}

.csi-insight-body {
    margin-bottom: 16px;
}

.csi-insight-explain {
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 12px 0;
}

.csi-insight-takeaway {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.csi-insight-takeaway i {
    color: #fbbf24;
    margin-top: 2px;
    flex-shrink: 0;
}

.csi-insight-meta {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-bottom: 12px;
}

.csi-insight-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.8rem;
}

.csi-insight-meta-label {
    color: var(--text-muted);
}

.csi-insight-meta-value {
    font-weight: 600;
    color: var(--text);
}

.csi-insight-footnote {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-style: italic;
}

@media (max-width: 768px) {
    .csi-scatter-layout {
        flex-direction: column;
    }
    .csi-scatter-insight {
        max-width: 100%;
    }
}

/* ── Correlation Cards ── */
.csi-correlation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.csi-correlation-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.csi-correlation-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.correlation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.correlation-pair-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.correlation-coefficient {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin: 8px 0;
}

.correlation-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.correlation-meta .interpretation {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.correlation-meta .sample-size {
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--text-muted);
}

/* ── Confidence Badges ── */
.csi-confidence-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.csi-confidence-badge.confidence-high {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.csi-confidence-badge.confidence-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.csi-confidence-badge.confidence-low {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

/* ── Filter Row ── */
.csi-filter-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* ── Pattern Cards ── */
.csi-pattern-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}

.csi-pattern-card:hover {
    border-color: var(--primary);
}

.csi-pattern-card.csi-inactive {
    opacity: 0.6;
}

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

.pattern-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pattern-card-title strong {
    font-size: 0.95rem;
    color: var(--text);
}

.pattern-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.csi-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
}

.csi-auto-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.csi-toggle-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.csi-toggle-text {
    font-size: 0.78rem;
}

.pattern-card-body {
    padding-top: 4px;
}

.pattern-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.occurrence-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pattern-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pattern-detail-col .detail-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pattern-detail-col .detail-value {
    font-size: 0.82rem;
    color: var(--text-secondary);
    word-break: break-word;
}

/* ── Pattern Builder GUI ── */
.csi-builder-section {
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    background: var(--surface);
}

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

.csi-builder-header label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    margin: 0;
}

.csi-builder-json-toggle {
    font-size: 0.78rem;
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.csi-builder-json-toggle:hover {
    text-decoration: underline;
}

.csi-builder-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.csi-builder-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.csi-builder-row .field-select {
    width: 160px;
    min-width: 120px;
}

.csi-builder-row .custom-key-input {
    width: 120px;
    min-width: 80px;
}

.csi-builder-row .op-select {
    width: 120px;
    min-width: 90px;
}

.csi-builder-row .value-input {
    flex: 1;
    min-width: 80px;
}

.csi-builder-row .field-select,
.csi-builder-row .custom-key-input,
.csi-builder-row .op-select,
.csi-builder-row .value-input {
    padding: 6px 8px;
    font-size: 0.82rem;
    background: var(--input-bg, var(--card-bg));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text);
}

.csi-builder-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.9rem;
    border-radius: var(--border-radius);
    line-height: 1;
    flex-shrink: 0;
}

.csi-builder-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.csi-builder-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px dashed var(--border-color);
    color: var(--primary);
    cursor: pointer;
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: var(--border-radius);
    margin-top: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.csi-builder-add:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--primary);
}

.csi-builder-json-area {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.82rem;
    margin-top: 8px;
}

/* Description field: full-width layout */
.csi-builder-row.description-row {
    flex-wrap: wrap;
}

.csi-builder-row.description-row .field-select {
    width: 160px;
}

.csi-builder-row.description-row .value-input {
    flex-basis: 100%;
    margin-top: 4px;
}

.csi-builder-row.description-row .op-select {
    display: none;
}

/* ── Suggestion Rules Table ── */
.csi-rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.csi-rules-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--surface);
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.csi-rules-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.csi-rules-table tr:hover {
    background: var(--hover-bg);
}

.csi-subtype-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}

.csi-subtype-pill.trigger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.csi-subtype-pill.suggested {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.csi-active-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.csi-active-dot.active {
    background: #10b981;
}

.csi-active-dot.inactive {
    background: #94a3b8;
}

/* ── Benchmark Cards Grid ── */
.csi-benchmark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.csi-benchmark-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
}

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

.benchmark-metric-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.csi-category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.csi-category-badge.small {
    font-size: 0.62rem;
    padding: 1px 6px;
}

.benchmark-avg {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.benchmark-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.benchmark-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

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

.benchmark-stat .stat-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.benchmark-stat .stat-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

/* ── Project Comparison ── */
.csi-comparison-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-top: 24px;
}

.csi-comparison-header h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.csi-comparison-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.csi-comparison-row {
    display: grid;
    grid-template-columns: 200px 1fr 120px;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface);
}

.comparison-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comparison-metric {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comparison-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comparison-bar-row .bar-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    width: 50px;
    text-align: right;
    flex-shrink: 0;
}

.comparison-bar-track {
    flex: 1;
    height: 12px;
    background: var(--background);
    border-radius: 6px;
    overflow: hidden;
}

.comparison-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.comparison-bar-fill.project-bar {
    background: var(--primary);
}

.comparison-bar-fill.org-bar {
    background: rgba(148, 163, 184, 0.5);
}

.comparison-bar-row .bar-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}

.comparison-indicators {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.perf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.perf-badge.perf-above {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.perf-badge.perf-at {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.perf-badge.perf-below {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.percentile-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .csi-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .csi-correlation-cards {
        grid-template-columns: 1fr;
    }

    .csi-benchmark-grid {
        grid-template-columns: 1fr;
    }

    .csi-comparison-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .csi-tab-bar {
        overflow-x: auto;
    }

    .pattern-detail-row {
        grid-template-columns: 1fr;
    }

    .csi-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 12G: Regulatory Intelligence
   ═══════════════════════════════════════════════════════════ */

/* ── Summary Stats ── */
.ri-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.ri-stat-card {
    background: var(--card-bg, var(--bg-card, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, var(--radius-md, 6px));
    padding: 16px;
    text-align: center;
}

.ri-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ri-stat-value.ri-stat-warning {
    color: var(--warning, var(--warning-color, #f59e0b));
}

.ri-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Tab Navigation ── */
.ri-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 16px;
}

.ri-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s, border-color 0.2s;
}

.ri-tab:hover {
    color: var(--text-primary);
}

.ri-tab.active {
    color: var(--primary, var(--primary-color, #2563eb));
    border-bottom-color: var(--primary, var(--primary-color, #2563eb));
}

.ri-unacknowledged-badge {
    background: var(--danger, var(--danger-color, #ef4444));
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.ri-tab-content {
    min-height: 200px;
}

/* ── Filters Row ── */
.ri-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
}

/* ── Timeline ── */
.ri-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ri-update-card {
    background: var(--card-bg, var(--bg-card, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, var(--radius-md, 6px));
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.ri-update-card:hover {
    border-color: var(--primary, var(--primary-color, #2563eb));
}

.ri-update-card.manual-entry {
    border-left: 4px solid var(--text-muted);
}

.ri-update-card.feed-entry {
    border-left: 4px solid var(--primary, var(--primary-color, #2563eb));
}

.ri-update-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ri-update-title {
    font-size: 0.95rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.ri-update-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ri-update-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ri-update-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Jurisdiction Badge ── */
.ri-jurisdiction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary, var(--primary-color, #2563eb));
}

.ri-jurisdiction-badge i {
    font-size: 0.6rem;
}

/* ── Category Tags ── */
.ri-category-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ri-category-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    background: var(--hover-bg, var(--bg-hover, #f1f5f9));
    color: var(--text-secondary);
    text-transform: capitalize;
}

/* ── Affected Projects Pill ── */
.ri-affected-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.ri-affected-count.has-matches {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning, var(--warning-color, #f59e0b));
}

.ri-affected-count.no-matches {
    background: var(--hover-bg, var(--bg-hover, #f1f5f9));
    color: var(--text-muted);
}

/* ── Date Badges ── */
.ri-date-badge {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ri-date-badge i {
    font-size: 0.6rem;
}

/* ── Source Indicator ── */
.ri-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ri-source-badge.feed-source {
    color: var(--primary, var(--primary-color, #2563eb));
}

.ri-source-badge.manual-source {
    color: var(--text-muted);
}

/* ── Feed Sources List ── */
.ri-feeds-header {
    margin-bottom: 16px;
}

.ri-feeds-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ri-feed-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--card-bg, var(--bg-card, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, var(--radius-md, 6px));
}

.ri-feed-card.inactive {
    opacity: 0.6;
}

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

.ri-feed-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.ri-feed-url {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.ri-feed-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ri-feed-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}

.ri-feed-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ri-feed-status .status-dot.active {
    background: var(--success, var(--success-color, #10b981));
}

.ri-feed-status .status-dot.error {
    background: var(--danger, var(--danger-color, #ef4444));
}

.ri-feed-status .status-dot.inactive {
    background: var(--text-muted);
}

.ri-feed-last-check {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ri-feed-error-count {
    font-size: 0.7rem;
    color: var(--danger, var(--danger-color, #ef4444));
    font-weight: 600;
}

.ri-feed-actions {
    display: flex;
    gap: 4px;
}

.ri-feed-actions .btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius, var(--radius-md, 6px));
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.ri-feed-actions .btn-icon:hover {
    background: var(--hover-bg, var(--bg-hover, #f1f5f9));
    color: var(--primary, var(--primary-color, #2563eb));
}

/* ── Category Selector (checkboxes in modal) ── */
.ri-category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ri-category-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, var(--radius-md, 6px));
    transition: background 0.2s;
}

.ri-category-check:hover {
    background: var(--hover-bg, var(--bg-hover, #f1f5f9));
}

.ri-category-check input[type="checkbox"] {
    margin: 0;
}

/* ── Active Toggle ── */
.ri-active-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ── Alert Cards ── */
.ri-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ri-alert-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg, var(--bg-card, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, var(--radius-md, 6px));
    border-left: 4px solid var(--text-muted);
}

.ri-alert-card.severity-info {
    border-left-color: var(--primary, var(--primary-color, #2563eb));
}

.ri-alert-card.severity-warning {
    border-left-color: var(--warning, var(--warning-color, #f59e0b));
}

.ri-alert-card.severity-critical {
    border-left-color: var(--danger, var(--danger-color, #ef4444));
}

.ri-alert-card.acknowledged {
    opacity: 0.6;
}

.ri-alert-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.ri-alert-icon.severity-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary, var(--primary-color, #2563eb));
}

.ri-alert-icon.severity-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning, var(--warning-color, #f59e0b));
}

.ri-alert-icon.severity-critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, var(--danger-color, #ef4444));
}

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

.ri-alert-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.ri-alert-message {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.ri-alert-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ri-alert-actions {
    flex-shrink: 0;
}

/* ── Match List (in update detail modal) ── */
.ri-match-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, var(--radius-md, 6px));
    margin-bottom: 6px;
}

.ri-match-item .match-info {
    flex: 1;
    min-width: 0;
}

.ri-match-item .match-project {
    font-weight: 500;
    font-size: 0.85rem;
}

.ri-match-item .match-permit {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ri-match-item .match-reason {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-style: italic;
}

.ri-match-item.acknowledged {
    opacity: 0.6;
}

/* ── Feed Check Results ── */
.ri-check-results {
    background: var(--card-bg, var(--bg-card, #fff));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, var(--radius-md, 6px));
    padding: 16px;
    margin-bottom: 16px;
}

.ri-check-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ri-check-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85rem;
}

.ri-check-result-item .result-icon {
    width: 20px;
    text-align: center;
}

.ri-check-result-item .result-icon.success {
    color: var(--success, var(--success-color, #10b981));
}

.ri-check-result-item .result-icon.error {
    color: var(--danger, var(--danger-color, #ef4444));
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ri-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ri-tabs {
        overflow-x: auto;
    }

    .ri-filters {
        flex-direction: column;
    }

    .ri-filters select {
        width: 100% !important;
    }

    .ri-update-header {
        flex-direction: column;
        gap: 8px;
    }

    .ri-update-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .ri-feed-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .ri-feed-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 13A: NLP Task Creation
   ═══════════════════════════════════════════════════════════ */

/* ── Quick-Entry Bar ── */
/* ── NLP Quick Entry Toggle Button ── */
#nlpQuickEntryToggle.active {
    color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

.nlp-quick-entry-bar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nlp-quick-entry-container {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 700px;
    margin: 0 auto;
}

.nlp-quick-entry-input-group {
    display: flex;
    align-items: center;
    flex: 1;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 0 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nlp-quick-entry-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.nlp-quick-entry-icon {
    color: var(--primary);
    font-size: 0.85rem;
    margin-right: 10px;
    flex-shrink: 0;
}

.nlp-quick-entry-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
}

.nlp-quick-entry-input::placeholder {
    color: var(--text-muted);
}

.nlp-quick-entry-bar.nlp-parsing .nlp-quick-entry-input {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Parsing Spinner (inline in input group) ── */
.nlp-parsing-spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.nlp-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: nlp-spin 0.8s linear infinite;
}

@keyframes nlp-spin {
    to { transform: rotate(360deg); }
}

/* ── Voice Button ── */
.nlp-voice-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nlp-voice-btn:hover {
    background: var(--hover-bg);
    color: var(--primary);
    border-color: var(--primary);
}

.nlp-voice-btn.recording {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    animation: nlp-pulse 1.5s ease-in-out infinite;
}

@keyframes nlp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── Submit Button ── */
.nlp-submit-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.nlp-submit-btn:hover {
    background: var(--primary-dark);
}

.nlp-submit-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* ── Raw Input Display (in confirmation modal) ── */
.nlp-raw-input-display {
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    margin-bottom: 20px;
}

.nlp-raw-input-text {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 4px;
}

.nlp-confidence-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* ── Confidence Badge ── */
.nlp-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nlp-confidence-badge.confidence-high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.nlp-confidence-badge.confidence-medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.nlp-confidence-badge.confidence-low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── AI-Suggested Badge ── */
.nlp-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Parsed Fields Form ── */
.nlp-parsed-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nlp-field-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

/* ── LLM Config: API Key Group ── */
.nlp-api-key-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nlp-api-key-group .form-control {
    flex: 1;
}

.nlp-api-key-status {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.nlp-api-key-status.configured {
    color: var(--success);
}

.nlp-api-key-status.not-configured {
    color: var(--danger);
}

/* ── LLM Config: Toggle Label ── */
.nlp-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
}

.nlp-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ── LLM Config: Test Connection ── */
.nlp-config-test-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

.nlp-test-result {
    font-size: 0.85rem;
}

.nlp-test-result.success {
    color: var(--success);
}

.nlp-test-result.error {
    color: var(--danger);
}

/* ── LLM Config: Usage Stats ── */
.nlp-usage-stats-section {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    margin-top: 8px;
}

.nlp-usage-stats-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.nlp-usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.nlp-usage-stat-card {
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    padding: 12px;
    text-align: center;
}

.nlp-usage-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.nlp-usage-stat-card .stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ── Parse History Items ── */
.nlp-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.nlp-history-item .input-method-icon {
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    color: var(--text-muted);
}

.nlp-history-item .history-info {
    flex: 1;
    min-width: 0;
}

.nlp-history-item .history-raw-input {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nlp-history-item .history-parsed-title {
    font-weight: 500;
}

.nlp-history-item .history-status {
    flex-shrink: 0;
}

.nlp-history-status-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.nlp-history-status-badge.accepted {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.nlp-history-status-badge.modified {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.nlp-history-status-badge.rejected {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── NLP Responsive ── */
@media (max-width: 768px) {
    .nlp-quick-entry-container {
        max-width: 100%;
    }

    .nlp-quick-entry-input {
        font-size: 0.85rem;
    }

    .nlp-quick-entry-input::placeholder {
        font-size: 0.8rem;
    }

    .nlp-parsed-fields .form-row {
        flex-direction: column;
    }

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

/* ═══════════════════════════════════════════════════════════
   Sprint 13B: Smart Assignment Suggestions
   ═══════════════════════════════════════════════════════════ */

/* -- Suggestion Panel -- */
.smart-assign-panel {
    background: var(--card-bg);
    border: 1px solid var(--primary);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.smart-assign-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
    border-bottom: 1px solid var(--border-color);
}

.smart-assign-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}

.smart-assign-panel-title i {
    font-size: 0.9rem;
    color: var(--warning);
}

.smart-assign-panel-footer {
    padding: 6px 14px;
    border-top: 1px solid var(--border-color);
    background: var(--hover-bg);
}

.smart-assign-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.smart-assign-label i {
    font-size: 0.65rem;
}

/* -- Loading State -- */
.smart-assign-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.smart-assign-loading i {
    margin-right: 6px;
}

/* -- Suggestion List -- */
.smart-assign-suggestion-list {
    max-height: 320px;
    overflow-y: auto;
}

/* -- Suggestion Card -- */
.smart-assign-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

.smart-assign-card:last-child {
    border-bottom: none;
}

.smart-assign-card:hover {
    background: var(--hover-bg);
}

.smart-assign-card.rank-1 {
    background: rgba(59, 130, 246, 0.04);
}

.smart-assign-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.smart-assign-card.rank-1 .smart-assign-rank {
    background: var(--primary);
    color: white;
}

.smart-assign-card.rank-2 .smart-assign-rank {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary);
}

.smart-assign-card-info {
    flex: 1;
    min-width: 0;
}

.smart-assign-user-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smart-assign-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.smart-assign-reason-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 500;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.smart-assign-reason-badge i {
    font-size: 0.6rem;
}

.smart-assign-reason-badge.reason-workload {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.smart-assign-reason-badge.reason-skill {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.smart-assign-reason-badge.reason-performance {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.smart-assign-reason-badge.reason-availability {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

/* -- Score Bar -- */
.smart-assign-score-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.smart-assign-score-bar {
    width: 60px;
    height: 6px;
    background: var(--hover-bg);
    border-radius: 3px;
    overflow: hidden;
}

.smart-assign-score-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.smart-assign-score-fill.score-high {
    background: var(--success);
}

.smart-assign-score-fill.score-medium {
    background: var(--warning);
}

.smart-assign-score-fill.score-low {
    background: var(--danger);
}

.smart-assign-score-text {
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
}

.smart-assign-score-text.score-high {
    color: var(--success);
}

.smart-assign-score-text.score-medium {
    color: var(--warning);
}

.smart-assign-score-text.score-low {
    color: var(--danger);
}

/* -- Card Actions -- */
.smart-assign-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.smart-assign-card-actions .btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.smart-assign-card-actions .btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

.smart-assign-assign-btn {
    padding: 4px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.smart-assign-assign-btn:hover {
    background: var(--primary);
    color: white;
}

/* -- Score Breakdown Tooltip -- */
.smart-assign-breakdown {
    display: none;
    padding: 10px 14px;
    background: var(--hover-bg);
    border-top: 1px solid var(--border-color);
    animation: smartAssignSlideDown 0.2s ease;
}

.smart-assign-breakdown.visible {
    display: block;
}

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

.smart-assign-breakdown-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.smart-assign-breakdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.smart-assign-breakdown-row:last-child {
    margin-bottom: 0;
}

.smart-assign-breakdown-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    width: 90px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.smart-assign-breakdown-label i {
    font-size: 0.65rem;
    width: 14px;
    text-align: center;
}

.smart-assign-breakdown-bar {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.smart-assign-breakdown-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.smart-assign-breakdown-value {
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 28px;
    text-align: right;
    color: var(--text-secondary);
}

.smart-assign-breakdown-detail {
    font-size: 0.68rem;
    color: var(--text-muted);
    min-width: 120px;
}

/* -- Similar Task Warning Banner -- */
.smart-assign-similar-warning {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.smart-assign-warning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
}

.smart-assign-warning-header:hover {
    background: rgba(245, 158, 11, 0.04);
}

.smart-assign-warning-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--warning);
}

.smart-assign-warning-title i {
    font-size: 0.9rem;
}

.smart-assign-warning-chevron {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.smart-assign-warning-chevron.expanded {
    transform: rotate(180deg);
}

.smart-assign-similar-list {
    border-top: 1px solid rgba(245, 158, 11, 0.2);
}

.smart-assign-similar-list.collapsed {
    display: none;
}

.smart-assign-similar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.smart-assign-similar-row:last-child {
    border-bottom: none;
}

.smart-assign-similar-info {
    flex: 1;
    min-width: 0;
}

.smart-assign-similar-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smart-assign-similar-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.smart-assign-similar-score {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.smart-assign-similar-match-badges {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.smart-assign-match-badge {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 500;
    background: var(--hover-bg);
    color: var(--text-secondary);
}

.smart-assign-similar-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.smart-assign-similar-actions button {
    padding: 3px 8px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.smart-assign-similar-actions button:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.smart-assign-similar-actions button.dismiss-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* -- Weights Configuration Modal -- */
.smart-assign-config-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.smart-assign-weight-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.smart-assign-weight-row:last-child {
    margin-bottom: 0;
}

.smart-assign-weight-row label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    width: 130px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.smart-assign-weight-row label i {
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
    color: var(--primary);
}

.smart-assign-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}

.smart-assign-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.smart-assign-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.smart-assign-weight-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 30px;
    text-align: right;
}

/* -- Accuracy Statistics -- */
.smart-assign-accuracy-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.smart-assign-accuracy-card {
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    text-align: center;
}

.smart-assign-accuracy-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.smart-assign-accuracy-card .stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

.smart-assign-accuracy-card.acceptance-high .stat-value {
    color: var(--success);
}

.smart-assign-accuracy-card.acceptance-medium .stat-value {
    color: var(--warning);
}

.smart-assign-accuracy-card.acceptance-low .stat-value {
    color: var(--danger);
}

/* -- Factor Comparison Bars (Accuracy Section) -- */
.smart-assign-factor-comparison {
    margin-top: 16px;
}

.smart-assign-factor-comparison h5 {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.smart-assign-factor-compare-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.78rem;
}

.smart-assign-factor-compare-label {
    width: 90px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.smart-assign-factor-compare-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.smart-assign-factor-bar-accepted,
.smart-assign-factor-bar-rejected {
    height: 4px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.smart-assign-factor-bar-accepted {
    background: var(--success);
}

.smart-assign-factor-bar-rejected {
    background: var(--danger);
    opacity: 0.5;
}

/* -- Smart Suggestion Badge (used in task cards) -- */
.smart-assign-suggested-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.smart-assign-suggested-badge i {
    font-size: 0.55rem;
}

/* -- Empty State -- */
.smart-assign-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.smart-assign-empty i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    opacity: 0.5;
    display: block;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .smart-assign-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .smart-assign-score-section {
        width: 100%;
        justify-content: flex-start;
    }

    .smart-assign-card-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .smart-assign-similar-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .smart-assign-similar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .smart-assign-weight-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .smart-assign-weight-row label {
        width: 100%;
    }

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

/* ═══════════════════════════════════════════════════════════
   Sprint 13C: Natural Language Search
   ═══════════════════════════════════════════════════════════ */

/* ── Filter Mode Toggle (Filters / Ask) — lives in filter panel ── */
.nl-filter-mode-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.nl-filter-mode-btn {
    padding: 6px 12px;
    border: none;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nl-filter-mode-btn:first-child {
    border-right: 1px solid var(--border-color);
}

.nl-filter-mode-btn:hover {
    background: var(--hover-bg);
}

.nl-filter-mode-btn.active {
    background: var(--primary);
    color: #fff;
}

.nl-filter-mode-btn.active i {
    color: #fff;
}

/* ── Structured Filters Group (default mode) ── */
.structured-filters-group {
    display: contents;
}

/* ── NL Ask Mode Group (shown when Ask is active) ── */
.nl-ask-mode-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
}

/* ── Search Input ── */
.nl-search-input-container {
    display: flex;
    align-items: center;
    flex: 1;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.nl-search-input-container:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.nl-search-input-icon {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: 10px;
    flex-shrink: 0;
}

.nl-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
}

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

/* ── Search Loading Indicator ── */
.nl-search-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 0.8rem;
    white-space: nowrap;
    position: absolute;
    right: 14px;
}

/* ── Search Action Buttons ── */
.nl-search-submit-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.nl-search-submit-btn:hover {
    background: var(--primary-dark);
}

.nl-search-submit-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.nl-search-history-btn,
.nl-search-favorites-btn,
.nl-search-clear-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nl-search-history-btn:hover,
.nl-search-favorites-btn:hover,
.nl-search-clear-btn:hover {
    background: var(--hover-bg);
    color: var(--primary);
    border-color: var(--primary);
}

.nl-search-favorites-btn.has-favorites {
    color: #f59e0b;
}

/* ── Query Explanation Bar ── */
.nl-search-explanation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(139, 92, 246, 0.06);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
    flex-wrap: wrap;
}

.nl-search-explanation-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.nl-search-ai-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    white-space: nowrap;
    flex-shrink: 0;
}

.nl-search-explanation-text {
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-search-explanation-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nl-search-entity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--hover-bg);
    color: var(--text-secondary);
    white-space: nowrap;
}

.nl-search-result-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.nl-search-timing {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.nl-search-explanation-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.nl-search-explanation-actions .btn-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nl-search-explanation-actions .btn-icon:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

/* ── Search History Dropdown ── */
.nl-search-history-dropdown {
    position: absolute;
    top: 100%;
    right: 16px;
    width: 380px;
    max-height: 400px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
}

.nl-search-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

#nlSearchHistoryContent {
    max-height: 340px;
    overflow-y: auto;
}

.nl-search-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-color);
}

.nl-search-history-item:last-child {
    border-bottom: none;
}

.nl-search-history-item:hover {
    background: var(--hover-bg);
}

.nl-search-history-item-icon {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.nl-search-history-item-info {
    flex: 1;
    min-width: 0;
}

.nl-search-history-item-query {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-search-history-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.nl-search-history-item-meta .entity-badge {
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--hover-bg);
    font-weight: 600;
}

/* ── Favorites Panel ── */
.nl-search-favorites-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-height: 400px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
}

.nl-search-favorites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.nl-search-favorites-header i {
    color: #f59e0b;
    margin-right: 4px;
}

.nl-search-favorite-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}

.nl-search-favorite-item:last-child {
    border-bottom: none;
}

.nl-search-favorite-item-icon {
    color: #f59e0b;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.nl-search-favorite-item-info {
    flex: 1;
    min-width: 0;
}

.nl-search-favorite-item-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.nl-search-favorite-item-query {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.nl-search-favorite-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.nl-search-favorite-item-actions .btn-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nl-search-favorite-item-actions .btn-run {
    color: var(--primary);
}

.nl-search-favorite-item-actions .btn-run:hover {
    background: rgba(59, 130, 246, 0.1);
}

.nl-search-favorite-item-actions .btn-delete {
    color: var(--text-muted);
}

.nl-search-favorite-item-actions .btn-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Save Favorite Modal: Query Display ── */
.nl-search-favorite-query-display {
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Results Container ── */
.nl-search-results-container {
    padding: 16px;
}

.nl-search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.nl-search-results-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.nl-search-results-header .result-count-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Result Cards ── */
.nl-search-result-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nl-search-result-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: box-shadow 0.15s ease;
    cursor: pointer;
}

.nl-search-result-card:hover {
    box-shadow: var(--shadow-md);
}

.nl-search-result-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.nl-search-result-card-icon.entity-task {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.nl-search-result-card-icon.entity-changeorder {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.nl-search-result-card-icon.entity-rfi {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.nl-search-result-card-icon.entity-submittal {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.nl-search-result-card-icon.entity-invoice {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.nl-search-result-card-icon.entity-timeentry {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.nl-search-result-card-icon.entity-document {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.nl-search-result-card-body {
    flex: 1;
    min-width: 0;
}

.nl-search-result-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-search-result-card-details {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.nl-search-result-card-details .detail-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.nl-search-result-card-details .detail-item i {
    font-size: 0.7rem;
}

.nl-search-result-card-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.nl-search-result-card-amount.positive {
    color: var(--success);
}

/* ── Result Card: Status Badge ── */
.nl-search-status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nl-search-status-badge.status-notstarted {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.nl-search-status-badge.status-inprogress {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.nl-search-status-badge.status-completed {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.nl-search-status-badge.status-blocked {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.nl-search-status-badge.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.nl-search-status-badge.status-approved {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.nl-search-status-badge.status-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.nl-search-status-badge.status-draft {
    background: var(--hover-bg);
    color: var(--text-muted);
}

.nl-search-status-badge.status-sent {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.nl-search-status-badge.status-paid {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.nl-search-status-badge.status-overdue {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.nl-search-status-badge.status-cancelled {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* ── Result Card: Priority Badge ── */
.nl-search-priority-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
}

.nl-search-priority-badge.priority-low {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.nl-search-priority-badge.priority-medium {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.nl-search-priority-badge.priority-high {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.nl-search-priority-badge.priority-critical {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* ── Empty State ── */
.nl-search-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.nl-search-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.nl-search-empty-state p {
    font-size: 0.95rem;
    max-width: 400px;
    margin: 0 auto;
}

.nl-search-empty-state .suggestion-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 12px;
}

/* ── Error State ── */
.nl-search-error-state {
    text-align: center;
    padding: 32px 24px;
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.12);
    border-radius: var(--border-radius);
    margin: 16px 0;
}

.nl-search-error-state i {
    font-size: 2rem;
    color: var(--danger);
    margin-bottom: 12px;
    opacity: 0.6;
}

.nl-search-error-state p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.nl-search-error-state .suggestion {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .nl-search-input-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .nl-search-toggle-group {
        width: 100%;
        order: -1;
    }

    .nl-search-toggle-btn {
        flex: 1;
        justify-content: center;
    }

    .nl-search-input-container {
        flex: 1;
        min-width: 0;
    }

    .nl-search-history-dropdown {
        width: calc(100% - 32px);
        left: 16px;
        right: 16px;
    }

    .nl-search-explanation-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .nl-search-explanation-meta {
        flex-wrap: wrap;
    }

    .nl-search-result-card {
        flex-direction: column;
        gap: 8px;
    }

    .nl-search-result-card-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .nl-search-result-card-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 13D: CO Cost Estimation
   ═══════════════════════════════════════════════════════════ */

/* -- Estimation Panel -- */
#costEstimationPanel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
}

.ce-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--hover-bg);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.ce-panel-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ce-panel-header h4 i {
    color: var(--primary);
}

/* -- Estimation Header -- */
.ce-estimation-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ce-total-estimate {
    display: flex;
    flex-direction: column;
}

.ce-total-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ce-total-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.ce-estimation-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* -- Confidence Badges -- */
.ce-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ce-confidence-high {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

.ce-confidence-medium {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
}

.ce-confidence-low {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

/* -- Method Badge -- */
.ce-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--hover-bg);
    color: var(--text-secondary);
}

.ce-method-badge.ai-enhanced {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.ce-method-badge i {
    font-size: 0.65rem;
}

/* -- Similar CO Count -- */
.ce-similar-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ce-similar-count strong {
    color: var(--text-secondary);
}

/* -- Line Item Cards -- */
.ce-line-items {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ce-line-item-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px;
    transition: border-color 0.2s ease;
}

.ce-line-item-card:hover {
    border-color: var(--primary);
}

.ce-line-item-card.accepted {
    border-left: 4px solid var(--success);
    background: rgba(16, 185, 129, 0.03);
}

.ce-line-item-card.modified {
    border-left: 4px solid var(--warning);
    background: rgba(245, 158, 11, 0.03);
}

.ce-line-item-card.rejected {
    border-left: 4px solid var(--text-muted);
    opacity: 0.6;
}

.ce-line-item-card.rejected .ce-line-item-amount {
    text-decoration: line-through;
}

.ce-line-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ce-line-item-description {
    font-size: 0.9rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.ce-line-item-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    margin-left: 12px;
}

/* -- Historical Range Bar -- */
.ce-range-bar-container {
    margin: 8px 0;
}

.ce-range-bar-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.ce-range-bar {
    position: relative;
    height: 20px;
    background: var(--hover-bg);
    border-radius: 4px;
    overflow: visible;
}

.ce-range-bar-fill {
    position: absolute;
    top: 2px;
    height: 16px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 3px;
}

.ce-range-bar-ci {
    position: absolute;
    top: 4px;
    height: 12px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 2px;
}

.ce-range-bar-mean {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 24px;
    background: var(--primary);
    border-radius: 1px;
    transform: translateX(-1px);
}

.ce-range-bar-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.ce-range-bar-mean-label {
    position: absolute;
    top: -18px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary);
    transform: translateX(-50%);
    white-space: nowrap;
}

/* -- CI Display -- */
.ce-ci-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

.ce-ci-display .ci-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.72rem;
}

/* -- Sample Size Indicator -- */
.ce-sample-size {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.ce-sample-size i {
    font-size: 0.65rem;
}

/* -- Line Item Actions -- */
.ce-line-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.ce-action-btn {
    padding: 4px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.ce-action-btn:hover {
    background: var(--hover-bg);
}

.ce-action-btn.accept {
    color: var(--success);
    border-color: var(--success);
}

.ce-action-btn.accept:hover {
    background: rgba(16, 185, 129, 0.08);
}

.ce-action-btn.modify {
    color: var(--warning);
    border-color: var(--warning);
}

.ce-action-btn.modify:hover {
    background: rgba(245, 158, 11, 0.08);
}

.ce-action-btn.reject {
    color: var(--danger);
    border-color: var(--danger);
}

.ce-action-btn.reject:hover {
    background: rgba(239, 68, 68, 0.08);
}

.ce-action-btn i {
    font-size: 0.7rem;
}

/* -- Narrative Box -- */
.ce-narrative-box {
    margin: 12px 16px;
    padding: 14px;
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--border-radius);
}

.ce-narrative-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ce-narrative-label i {
    font-size: 0.65rem;
}

.ce-narrative-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* -- Panel Actions (footer) -- */
.ce-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

/* -- Similar CO List -- */
.ce-similar-co-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 6px;
}

.ce-similar-co-info {
    flex: 1;
    min-width: 0;
}

.ce-similar-co-title {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.ce-similar-co-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

.ce-similar-co-amount {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;
}

.ce-similarity-score {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: 12px;
}

.ce-similarity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ce-similarity-dot.high { background: var(--success); }
.ce-similarity-dot.medium { background: var(--warning); }
.ce-similarity-dot.low { background: var(--danger); }

/* -- Accuracy Dashboard -- */
.ce-accuracy-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px;
    margin-bottom: 4px;
}

.ce-accuracy-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px;
    text-align: center;
}

.ce-accuracy-stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.ce-accuracy-stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

/* -- Accuracy Trend Chart -- */
.ce-trend-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
    padding: 0 16px;
    margin-bottom: 16px;
}

.ce-trend-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ce-trend-bar-fill {
    width: 100%;
    min-width: 20px;
    border-radius: 3px 3px 0 0;
    background: var(--primary);
    transition: height 0.3s ease;
}

.ce-trend-bar-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ce-trend-bar-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* -- Acceptance Breakdown -- */
.ce-acceptance-breakdown {
    margin: 16px 0;
}

.ce-acceptance-bar {
    display: flex;
    height: 24px;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 8px;
}

.ce-acceptance-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    transition: width 0.3s ease;
}

.ce-acceptance-segment.accepted { background: var(--success); }
.ce-acceptance-segment.modified { background: var(--warning); }
.ce-acceptance-segment.rejected { background: var(--danger); }

.ce-acceptance-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.ce-acceptance-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.ce-acceptance-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ce-acceptance-legend-dot.accepted { background: var(--success); }
.ce-acceptance-legend-dot.modified { background: var(--warning); }
.ce-acceptance-legend-dot.rejected { background: var(--danger); }

/* -- Loading State -- */
.ce-loading-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.ce-loading-state i {
    font-size: 2rem;
    margin-bottom: 12px;
    color: var(--primary);
}

.ce-loading-state p {
    font-size: 0.9rem;
}

/* -- Empty State -- */
.ce-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.ce-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.ce-empty-state p {
    font-size: 0.9rem;
    max-width: 350px;
    margin: 0 auto 8px;
}

.ce-empty-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* -- Estimation History Table -- */
.ce-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.ce-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    gap: 12px;
}

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

.ce-history-title {
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.ce-history-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

.ce-history-amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.ce-history-estimated {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ce-history-actual {
    font-size: 0.85rem;
    font-weight: 600;
}

.ce-history-accuracy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    flex-shrink: 0;
}

.ce-history-accuracy.good {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.ce-history-accuracy.fair {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.ce-history-accuracy.poor {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .ce-estimation-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ce-line-item-header {
        flex-direction: column;
    }

    .ce-line-item-amount {
        margin-left: 0;
        margin-top: 4px;
    }

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

    .ce-similar-co-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ce-similar-co-amount {
        margin-left: 0;
    }

    .ce-history-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .ce-history-amounts {
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 13E: Generative Project Planning
   ═══════════════════════════════════════════════════════════ */

/* ── Extra-large modal for wizard ── */
.modal-container.modal-xl {
    max-width: 1000px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Step Indicator ── */
.genplan-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--hover-bg);
    gap: 0;
}

.genplan-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.genplan-step.active {
    opacity: 1;
}

.genplan-step.completed {
    opacity: 0.8;
}

.genplan-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--border-color);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.genplan-step.active .genplan-step-number {
    background: var(--primary);
    color: white;
}

.genplan-step.completed .genplan-step-number {
    background: var(--success);
    color: white;
}

.genplan-step-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.genplan-step.active .genplan-step-label {
    color: var(--primary);
}

.genplan-step-connector {
    width: 40px;
    height: 2px;
    background: var(--border-color);
    margin: 0 4px;
    margin-bottom: 18px;
}

/* ── AI Badge / Watermark ── */
.genplan-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.genplan-ai-watermark {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.65rem;
    color: rgba(139, 92, 246, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
}

/* ── Step Content Wrapper ── */
.genplan-step-content {
    padding: 4px 0;
}

/* ── Generation Progress Spinner ── */
.genplan-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 24px;
}

.genplan-generating-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: genplanSpin 1s linear infinite;
}

@keyframes genplanSpin {
    to { transform: rotate(360deg); }
}

/* ── Progress Log ── */
.genplan-progress-log {
    width: 100%;
    max-width: 480px;
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.genplan-progress-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.genplan-progress-item .progress-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.genplan-progress-item.done .progress-icon {
    color: var(--success);
}

.genplan-progress-item.active .progress-icon {
    color: var(--primary);
}

.genplan-progress-item.error .progress-icon {
    color: var(--danger);
}

.genplan-progress-item .progress-text {
    flex: 1;
}

.genplan-progress-item.done .progress-text {
    color: var(--text-primary);
}

.genplan-progress-item.active .progress-text {
    color: var(--text-primary);
    font-weight: 500;
}

.genplan-progress-item.error .progress-text {
    color: var(--danger);
}

/* Small inline spinner for active progress items */
.progress-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary);
    border-radius: 50%;
    animation: genplanSpin 0.8s linear infinite;
}

/* ── Progress Bar ── */
.genplan-progress-bar-wrap {
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.genplan-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.genplan-progress-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0%;
}

.genplan-progress-counter {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── WBS Tree ── */
.genplan-wbs-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.genplan-phase-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}

.genplan-phase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    background: var(--hover-bg);
    border-bottom: 1px solid var(--border-color);
}

.genplan-phase-header:hover {
    background: var(--border-color);
}

.genplan-phase-title {
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.genplan-phase-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.genplan-phase-tasks {
    padding: 8px;
}

.genplan-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    position: relative;
    transition: background 0.15s ease;
}

.genplan-task-row:hover {
    background: var(--hover-bg);
}

.genplan-task-drag-handle {
    color: var(--text-muted);
    cursor: grab;
    font-size: 0.8rem;
    padding: 4px;
}

.genplan-task-drag-handle:active {
    cursor: grabbing;
}

.genplan-task-subtype-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.genplan-task-subtype-icon.subtype-rfi { background: rgba(59, 130, 246, 0.1); color: var(--primary); }
.genplan-task-subtype-icon.subtype-submittal { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.genplan-task-subtype-icon.subtype-inspection { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.genplan-task-subtype-icon.subtype-permit { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.genplan-task-subtype-icon.subtype-deliverable { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.genplan-task-subtype-icon.subtype-punchlist { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.genplan-task-subtype-icon.subtype-changeorder { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.genplan-task-subtype-icon.subtype-safetyincident { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.genplan-task-subtype-icon.subtype-dailylog { background: rgba(107, 114, 128, 0.1); color: var(--text-secondary); }
.genplan-task-subtype-icon.subtype-default { background: var(--hover-bg); color: var(--text-muted); }

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

.genplan-task-title {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.genplan-task-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.genplan-task-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.genplan-task-row:hover .genplan-task-actions {
    opacity: 1;
}

.genplan-task-actions .btn-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
}

.genplan-task-actions .btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary);
}

/* ── Priority Badges ── */
.genplan-priority-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.genplan-priority-badge.priority-low { background: rgba(107, 114, 128, 0.1); color: var(--text-secondary); }
.genplan-priority-badge.priority-medium { background: rgba(59, 130, 246, 0.1); color: var(--primary); }
.genplan-priority-badge.priority-high { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.genplan-priority-badge.priority-critical { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

/* ── Timeline / Gantt Preview ── */
.genplan-timeline {
    padding: 16px;
    overflow-x: auto;
}

.genplan-timeline-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 600px;
}

.genplan-timeline-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
}

.genplan-timeline-label {
    width: 160px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.genplan-timeline-bar-area {
    flex: 1;
    height: 24px;
    position: relative;
    background: var(--hover-bg);
    border-radius: 4px;
}

.genplan-timeline-bar {
    position: absolute;
    height: 100%;
    border-radius: 4px;
    background: var(--primary);
    opacity: 0.75;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.7rem;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.genplan-timeline-bar:nth-child(odd) { background: rgba(59, 130, 246, 0.75); }
.genplan-timeline-bar:nth-child(even) { background: rgba(16, 185, 129, 0.75); }

.genplan-timeline-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
    margin-top: 12px;
    font-size: 0.9rem;
}

.genplan-timeline-total .total-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.genplan-timeline-total .total-value {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.1rem;
}

/* ── Budget Breakdown ── */
.genplan-budget-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.genplan-budget-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    text-align: center;
    position: relative;
}

.genplan-budget-card .budget-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}

.genplan-budget-card .budget-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.genplan-budget-card .budget-pct {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.genplan-budget-table {
    width: 100%;
    border-collapse: collapse;
}

.genplan-budget-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.genplan-budget-table td {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.genplan-budget-table .phase-header td {
    background: var(--hover-bg);
    font-weight: 600;
    font-size: 0.8rem;
}

.genplan-budget-table .total-row td {
    font-weight: 700;
    border-top: 2px solid var(--border-color);
    font-size: 0.95rem;
}

.genplan-budget-table input.budget-edit {
    width: 120px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    text-align: right;
}

/* ── Permit Cards ── */
.genplan-permits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.genplan-permit-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px;
    position: relative;
}

.genplan-permit-card .permit-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 6px;
    padding-right: 80px;
}

.genplan-permit-card .permit-jurisdiction {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.genplan-permit-card .permit-timeline {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.genplan-permit-card .permit-notes {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.genplan-permit-card .permit-warning {
    font-size: 0.7rem;
    color: var(--warning);
    font-style: italic;
    margin-top: 6px;
}

/* ── Risk Cards ── */
.genplan-risks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.genplan-risk-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 14px;
    position: relative;
}

.genplan-risk-card .risk-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding-right: 80px;
}

.genplan-risk-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.genplan-risk-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.genplan-risk-badge.likelihood-low { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.genplan-risk-badge.likelihood-medium { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.genplan-risk-badge.likelihood-high { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.genplan-risk-badge.impact-low { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.genplan-risk-badge.impact-medium { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.genplan-risk-badge.impact-high { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

.genplan-risk-card .risk-mitigation {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 8px;
    background: var(--hover-bg);
    border-radius: var(--border-radius);
}

/* ── Risk Matrix ── */
.genplan-risk-matrix {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr) auto;
    gap: 2px;
    max-width: 300px;
    margin: 16px auto;
}

.genplan-risk-matrix-cell {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.genplan-risk-matrix-cell.severity-low { background: rgba(16, 185, 129, 0.15); }
.genplan-risk-matrix-cell.severity-medium { background: rgba(245, 158, 11, 0.15); }
.genplan-risk-matrix-cell.severity-high { background: rgba(239, 68, 68, 0.15); }
.genplan-risk-matrix-cell.severity-critical { background: rgba(239, 68, 68, 0.3); }

.genplan-risk-matrix-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Star Ratings (Feedback) ── */
.genplan-star-rating {
    display: flex;
    gap: 4px;
}

.genplan-star-rating .star {
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--border-color);
    transition: color 0.15s ease;
}

.genplan-star-rating .star.filled {
    color: #f59e0b;
}

.genplan-star-rating .star:hover,
.genplan-star-rating .star:hover ~ .star {
    color: #fbbf24;
}

/* ── Apply Step Summary ── */
.genplan-apply-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.genplan-apply-stat {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    text-align: center;
}

.genplan-apply-stat .stat-icon {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.genplan-apply-stat .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.genplan-apply-stat .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Wizard Navigation ── */
.genplan-wizard-nav {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.genplan-wizard-nav-spacer {
    flex: 1;
}

/* ── Inline Task Editor ── */
.genplan-task-editor {
    background: var(--hover-bg);
    border: 2px solid var(--primary);
    border-radius: var(--border-radius);
    padding: 12px;
    margin: 4px 0;
}

.genplan-task-editor .form-row {
    margin-bottom: 8px;
}

.genplan-task-editor .form-group {
    margin-bottom: 6px;
}

.genplan-task-editor label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.genplan-task-editor .editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* ── Plan History Cards ── */
.genplan-history-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.genplan-history-card:hover {
    background: var(--hover-bg);
}

.genplan-history-card .plan-info {
    flex: 1;
    min-width: 0;
}

.genplan-history-card .plan-desc {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.genplan-history-card .plan-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

.genplan-history-card .plan-status-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.genplan-history-card .plan-status-badge.status-generated { background: rgba(59, 130, 246, 0.1); color: var(--primary); }
.genplan-history-card .plan-status-badge.status-inreview { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
.genplan-history-card .plan-status-badge.status-applied { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.genplan-history-card .plan-status-badge.status-discarded { background: var(--hover-bg); color: var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .modal-container.modal-xl {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .genplan-step-indicator {
        padding: 12px 8px;
        overflow-x: auto;
    }

    .genplan-step-label {
        display: none;
    }

    .genplan-step-connector {
        width: 20px;
        margin-bottom: 0;
    }

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

    .genplan-permits-grid,
    .genplan-risks-grid {
        grid-template-columns: 1fr;
    }

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

    .genplan-timeline-label {
        width: 100px;
        font-size: 0.7rem;
    }

    .genplan-task-row {
        flex-wrap: wrap;
    }

    .genplan-task-actions {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════
   Sprint 10S: Global Search
   ═══════════════════════════════════════════════════════════ */

.gs-search-bar-container {
    position: relative;
    flex: 1;
    max-width: 560px;
    margin: 0 24px;
}

.gs-search-bar {
    display: flex;
    align-items: center;
    background: var(--input-bg, var(--card-bg));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0 12px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gs-search-bar:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.gs-search-icon {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-right: 8px;
    flex-shrink: 0;
}

.gs-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.gs-search-input::placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.gs-search-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-family: inherit;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}

.gs-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.15));
    max-height: 480px;
    overflow-y: auto;
    z-index: 1000;
}

.gs-dropdown-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.gs-dropdown-section:last-child { border-bottom: none; }

.gs-dropdown-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.gs-dropdown-section-header .btn-link-sm {
    font-size: 0.7rem;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}

.gs-dropdown-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.gs-dropdown-suggestion:hover,
.gs-dropdown-suggestion.gs-dropdown-item-active {
    background: var(--hover-bg);
}

.gs-dropdown-suggestion i {
    color: var(--text-muted);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.gs-suggestion-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.gs-dropdown-category {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.gs-dropdown-category:last-of-type { border-bottom: none; }

.gs-dropdown-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.gs-dropdown-count {
    margin-left: auto;
    background: var(--hover-bg);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.65rem;
}

.gs-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.gs-dropdown-item:hover,
.gs-dropdown-item.gs-dropdown-item-active {
    background: var(--hover-bg);
}

.gs-dropdown-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.gs-dropdown-item-content {
    flex: 1;
    min-width: 0;
}

.gs-dropdown-item-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-dropdown-item-title mark {
    background: rgba(245, 158, 11, 0.25);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.gs-dropdown-item-breadcrumb {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-dropdown-item-status {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.gs-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 500;
    border-top: 1px solid var(--border-color);
}

.gs-dropdown-footer:hover { background: var(--hover-bg); }

.gs-dropdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.gs-dropdown-empty i {
    font-size: 1.2rem;
    opacity: 0.5;
}

.gs-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.gs-results-summary h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.gs-results-summary h3 em {
    color: var(--primary);
    font-style: normal;
}

.gs-results-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 12px;
}

.gs-results-actions {
    display: flex;
    gap: 8px;
}

.gs-results-layout {
    display: flex;
    gap: 24px;
}

.gs-filter-sidebar {
    width: 220px;
    flex-shrink: 0;
}

.gs-filter-section { margin-bottom: 20px; }

.gs-filter-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.gs-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.85rem;
    cursor: pointer;
}

.gs-filter-checkbox input[type="checkbox"] { flex-shrink: 0; }
.gs-filter-checkbox span:first-of-type { flex: 1; }

.gs-filter-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--hover-bg);
    padding: 1px 6px;
    border-radius: 8px;
}

.gs-category-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
}

.gs-category-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.gs-category-tab:hover { color: var(--text-primary); }

.gs-category-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.gs-tab-count {
    font-size: 0.7rem;
    background: var(--hover-bg);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}

.gs-category-tab.active .gs-tab-count {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary);
}

.gs-results-main {
    flex: 1;
    min-width: 0;
}

.gs-result-group { margin-bottom: 24px; }

.gs-result-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.gs-result-group-header i { color: var(--text-muted); }

.gs-group-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.gs-result-group-header .btn-link-sm {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
}

.gs-result-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.gs-result-card:hover {
    background: var(--hover-bg);
    border-color: var(--primary);
}

.gs-result-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    border-radius: 8px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

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

.gs-result-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.4;
}

.gs-result-title mark {
    background: rgba(245, 158, 11, 0.25);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

.gs-result-breadcrumb {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gs-result-breadcrumb i { font-size: 0.65rem; }

.gs-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.gs-result-type { color: var(--text-muted); }

.gs-result-status {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.gs-result-date { color: var(--text-muted); }

.gs-result-rank {
    width: 40px;
    height: 4px;
    background: var(--hover-bg);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 8px;
}

.gs-rank-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.gs-no-results {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.gs-no-results i {
    margin-bottom: 16px;
    opacity: 0.5;
}

.gs-no-results p { margin: 4px 0; }

.gs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    margin-top: 8px;
}

.gs-page-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .gs-search-bar-container {
        max-width: 100%;
        margin: 0 8px;
    }

    .gs-search-kbd { display: none; }

    .gs-results-layout { flex-direction: column; }

    .gs-filter-sidebar {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .gs-filter-section {
        flex: 1;
        min-width: 150px;
    }

    .gs-results-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .gs-category-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .gs-result-card { flex-direction: column; }

    .gs-result-rank {
        width: 100%;
        margin-top: 8px;
    }
}

/* ============================================
   Sprint 17J: Other Costs Section
   ============================================ */

/* Section container */
#other-costs-section {
    margin: 0;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.other-costs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface-secondary, #f5f5f5);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}

.other-costs-header h4 {
    margin: 0;
    font-size: 15px;
}

.other-costs-summary-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 13px;
}

.cost-total {
    font-weight: 700;
    color: var(--text-primary, #333);
}

.cost-count {
    color: var(--text-secondary, #666);
}

.cost-draft-warning {
    color: #e65100;
    font-weight: 600;
}

/* Category groups */
.other-cost-group {
    border-bottom: 1px solid var(--border-color, #eee);
}

.other-cost-group:last-child {
    border-bottom: none;
}

.other-cost-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.other-cost-group-header:hover {
    background: var(--hover-bg, #f0f0f0);
}

.other-cost-group-header .collapse-icon {
    font-size: 10px;
    color: var(--text-secondary, #999);
    width: 16px;
    text-align: center;
}

.category-label {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
}

.category-count {
    color: var(--text-secondary, #999);
    font-size: 12px;
}

.category-subtotal {
    font-weight: 700;
    font-size: 13px;
    min-width: 100px;
    text-align: right;
}

/* Items table */
.other-cost-group-items {
    padding: 0 16px 12px;
}

.other-cost-group-items .data-table.compact {
    font-size: 12px;
}

.other-cost-group-items .data-table.compact td,
.other-cost-group-items .data-table.compact th {
    padding: 6px 10px;
}

.row-draft {
    opacity: 0.7;
    background: #fffde7;
}

/* Status pills for other costs */
.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.status-pill.status-approved { background: #e8f5e9; color: #2e7d32; }
.status-pill.status-draft { background: #fff3e0; color: #e65100; }

/* Recurring badge */
.recurring-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    background: #e3f2fd;
    color: #1565c0;
    text-transform: capitalize;
}

/* Footer total */
.other-costs-footer {
    padding: 12px 16px;
    border-top: 2px solid var(--border-color, #e0e0e0);
    background: var(--surface-secondary, #fafafa);
}

.other-costs-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

/* Empty state */
.other-costs-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary, #999);
}

/* Financial summary integration */
#financial-other-costs-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 13px;
}

#financial-other-costs-row .summary-label {
    color: var(--text-secondary, #666);
}

#financial-other-costs-row .summary-value {
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   Sprint 17A: Smart Priority Rules
   ══════════════════════════════════════════════════════════ */

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

.priority-rules-header h3 {
    margin: 0;
    font-size: 1rem;
}

.priority-rules-actions {
    display: flex;
    gap: 8px;
}

.priority-rules-table .priority-select {
    width: 120px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.ncr-escalation-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ncr-escalation-control .help-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Priority Badges */
.priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-badge.critical { background: var(--danger-color); color: white; }
.priority-badge.high { background: #ea580c; color: white; }
.priority-badge.medium { background: #ca8a04; color: white; }
.priority-badge.low { background: var(--primary-color); color: white; }
.priority-badge.none { background: var(--border-color); color: var(--text-muted); }

/* High Priority Dashboard Widget */
.high-priority-widget {
    max-height: 400px;
    overflow-y: auto;
}

.high-priority-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}

.high-priority-item:hover {
    background: var(--hover-bg);
}

.high-priority-item:last-child {
    border-bottom: none;
}

.high-priority-item.overdue {
    border-left: 3px solid var(--danger-color);
}

.high-priority-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.high-priority-item-name {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.high-priority-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.high-priority-due.overdue-text {
    color: var(--danger-color);
    font-weight: 600;
}

.high-priority-status {
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--surface-secondary, #f5f5f5);
}

/* ══════════════════════════════════════════════════════════
   Sprint 17K: Conditional Approval Chains
   ══════════════════════════════════════════════════════════ */

/* Template cards */
.approval-template-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-white);
}

.approval-template-card:hover {
    box-shadow: var(--shadow-sm);
}

.approval-template-card.is-default {
    border-left: 4px solid var(--primary-color);
}

.approval-template-card.is-inactive {
    opacity: 0.6;
}

.template-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.template-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
}

.template-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

/* Step chips (shared with test result) */
.template-steps,
.ca-test-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.step-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-light);
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: var(--text-dark);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--bg-white);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.step-label {
    white-space: nowrap;
}

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

.step-optional {
    font-size: 10px;
    color: var(--text-secondary);
    font-style: italic;
}

.template-actions {
    display: flex;
    gap: 8px;
}

/* Conditions table */
.ca-conditions-table {
    width: 100%;
}

.ca-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    user-select: none;
    white-space: nowrap;
}

.ca-conditions-table tr.ca-dragging {
    opacity: 0.4;
    background: var(--bg-light);
}

.ca-conditions-table tr.ca-drag-over {
    border-top: 2px solid var(--primary-color);
}

.ca-conditions-table td {
    vertical-align: middle;
}

/* Condition type badges */
.ca-condition-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ca-condition-amount {
    background: var(--info-light);
    color: var(--primary-color);
}

.ca-condition-subtype {
    background: var(--warning-light);
    color: var(--warning-color);
}

.ca-condition-phase {
    background: var(--success-light);
    color: var(--success-color);
}

.ca-entity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Settings subsection layout */
.ca-settings-subsection {
    margin-bottom: 8px;
}

/* Empty state */
.ca-empty-state {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ca-empty-state p {
    margin: 0;
    font-size: 13px;
}

/* Test result */
.ca-test-result-matched {
    padding: 16px;
    background: var(--success-light);
    border: 1px solid var(--success-color);
    border-radius: var(--radius-lg);
    margin-top: 12px;
}

.ca-test-result-default {
    padding: 16px;
    background: var(--warning-light);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-lg);
    margin-top: 12px;
}

.ca-test-result-header {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.ca-test-explanation {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
    font-style: italic;
}

/* Template step editor (modal) */
.ca-step-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
}

.ca-step-order {
    flex-shrink: 0;
}

.ca-step-fields {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ca-step-required-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    white-space: nowrap;
}

.ca-step-actions {
    flex-shrink: 0;
}

.ca-default-option {
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   Sprint 17E: Daily Log / Safety Incident Integration
   ══════════════════════════════════════════════════════════════ */

/* ── Three-Path Cards ── */
.dls-modal-prompt {
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
}

.dls-path-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.dls-path-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg, 10px);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    background: var(--bg-white);
}

.dls-path-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.dls-path-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.dls-path-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.dls-path-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Existing Incidents List ── */
.dls-existing-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 6px);
    margin-top: 8px;
}

.dls-existing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light, var(--border-color));
    cursor: pointer;
    transition: background 0.15s;
}

.dls-existing-item:last-child {
    border-bottom: none;
}

.dls-existing-item:hover {
    background: var(--bg-light);
}

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

.dls-existing-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dls-existing-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.dls-existing-status {
    font-weight: 500;
}

.dls-existing-action {
    flex-shrink: 0;
    color: var(--primary-color);
    font-size: 14px;
    margin-left: 10px;
}

/* ── Linked Incidents Display ── */
.dls-linked-section {
    margin-top: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.dls-linked-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 10px 0;
}

.dls-linked-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
}

.dls-linked-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dls-linked-item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-light);
    border-radius: var(--radius-md, 6px);
    border-left: 3px solid var(--warning);
}

.dls-linked-icon {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 12px;
    padding-top: 2px;
}

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

.dls-linked-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}

.dls-linked-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.dls-linked-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.dls-linked-notes {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 4px;
}

/* Link type badges */
.dls-link-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dls-link-type-created,
.dls-link-type-created-now {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

.dls-link-type-linked-existing,
.dls-link-type-linked_existing {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-color);
}

.dls-link-type-tickled {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
}

/* ── Tickler Items ── */
.dls-tickler-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-light);
    border-radius: var(--radius-md, 6px);
    border-left: 3px solid var(--warning);
    margin-bottom: 6px;
}

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

.dls-tickler-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dls-tickler-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.dls-tickler-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Compliance Widget ── */
.dls-compliance-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.dls-compliance-widget {
    padding: 10px;
    border-radius: var(--radius-md, 6px);
    background: var(--bg-light);
}

.dls-compliance-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.dls-compliance-rate {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

.dls-compliance-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.dls-compliance-label {
    font-size: 12px;
    color: var(--text-muted);
}

.dls-rate-good .dls-compliance-value {
    color: var(--success);
}

.dls-rate-warn .dls-compliance-value {
    color: var(--warning);
}

.dls-rate-danger .dls-compliance-value {
    color: var(--danger);
}

.dls-compliance-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.dls-compliance-stat {
    text-align: center;
}

.dls-compliance-stat-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.dls-compliance-stat-label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .dls-path-cards {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dls-path-card {
        flex-direction: row;
        text-align: left;
        padding: 14px;
        gap: 12px;
    }

    .dls-path-icon {
        margin-bottom: 0;
    }

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

/* ══════════════════════════════════════════════════════════════
   Sprint 17H: Invoice Template Enhancements
   ══════════════════════════════════════════════════════════════ */

/* Category grouped view */
.invoice-grouped-view {
    margin: 16px 0;
}

.line-item-category-group {
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.line-item-category-group .category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--surface-secondary, #f5f5f5);
    font-weight: 600;
}

.line-item-category-group .category-name {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #666);
}

.line-item-category-group .category-subtotal {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #333);
}

.line-item-category-group .line-items-table {
    width: 100%;
    border-collapse: collapse;
}

.line-item-category-group .line-items-table th {
    padding: 6px 12px;
    font-size: 0.8em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    text-align: left;
}

.line-item-category-group .line-items-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    font-size: 0.9em;
}

.line-item-category-group .line-items-table tr:last-child td {
    border-bottom: none;
}

.grand-subtotal {
    text-align: right;
    padding: 12px 16px;
    font-size: 16px;
    border-top: 2px solid var(--border-color, #e0e0e0);
    margin-top: 8px;
}

/* Category badge in flat view */
.ci-category-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    background: var(--bg-secondary, #f0f0f0);
    color: var(--text-secondary, #666);
}

/* View toggle */
.line-item-view-toggle {
    display: flex;
    gap: 4px;
}

.line-item-view-toggle .btn {
    padding: 4px 10px;
    font-size: 0.8em;
}

.line-item-view-toggle .btn.active {
    background: var(--primary-color, #4a90d9);
    color: #fff;
}

/* Logo upload area */
.logo-upload-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.logo-preview {
    width: 200px;
    height: 80px;
    border: 2px dashed var(--border-color, #ccc);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary, #fafafa);
    overflow: hidden;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-preview.has-logo {
    border-style: solid;
    border-color: var(--primary-color, #4a90d9);
}

.logo-actions {
    display: flex;
    gap: 8px;
}

/* Logo thumbnail in template card list */
.ci-template-logo-thumb {
    width: 60px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary, #fafafa);
}

.ci-template-logo-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Layout style selector */
.layout-style-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.layout-style-option {
    cursor: pointer;
    flex: 1;
    min-width: 140px;
}

.layout-style-option input[type="radio"] {
    display: none;
}

.style-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.layout-style-option.selected .style-card,
.layout-style-option input:checked + .style-card {
    border-color: var(--primary-color, #4a90d9);
    background: var(--primary-bg, #e8f0fe);
}

.style-card strong {
    font-size: 14px;
}

.style-card small {
    color: var(--text-secondary, #666);
    font-size: 11px;
}

.style-card:hover {
    border-color: var(--primary-color, #4a90d9);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .layout-style-selector {
        flex-direction: column;
    }

    .layout-style-option {
        min-width: 100%;
    }

    .line-item-view-toggle {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════════════════
   Sprint 17D: Project Calendar
   ══════════════════════════════════════════════════════════ */

.cal-loading, .cal-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.cal-loading i, .cal-empty i {
    margin-right: 8px;
}

.cal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cal-title {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 6px 0 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cal-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cal-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
}

.cal-day {
    background: var(--card-bg);
    min-height: 80px;
    padding: 4px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}

.cal-day:hover {
    background: var(--hover-bg, #f1f5f9);
}

.cal-day-empty {
    background: var(--bg-secondary);
    cursor: default;
}

.cal-day-empty:hover {
    background: var(--bg-secondary);
}

.cal-today {
    border: 2px solid var(--primary-color);
}

.cal-weekend {
    background: var(--bg-secondary);
}

.cal-selected {
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.cal-day-number {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.cal-today .cal-day-number {
    color: var(--primary-color);
}

.cal-day-events {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.cal-event-pill {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.cal-more {
    font-size: 0.65rem;
    color: var(--text-muted);
    padding: 1px 3px;
}

.cal-log-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cal-log-draft { background: var(--warning-color, #f59e0b); }
.cal-log-submitted { background: var(--primary-color, #3b82f6); }
.cal-log-approved { background: var(--success-color, #10b981); }
.cal-log-rejected { background: var(--danger-color, #ef4444); }

/* Day Detail Panel */
.cal-day-detail {
    margin-top: 12px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    animation: calDetailSlide 0.2s ease-out;
}

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

.cal-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.cal-detail-header h3 {
    margin: 0;
    font-size: 1rem;
}

/* Daily Log Section in Day Detail */
.cal-daily-log-section {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 12px;
}

.cal-no-log {
    text-align: center;
}

.cal-no-log p {
    margin: 0 0 8px 0;
    color: var(--text-muted);
}

.cal-log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cal-log-header h4 {
    margin: 0;
    font-size: 0.95rem;
    flex: 1;
}

.cal-log-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cal-log-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background: var(--card-bg);
    border-radius: 4px;
    min-width: 60px;
}

.cal-log-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cal-log-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
}

.cal-log-notes {
    margin-top: 8px;
    padding: 8px;
    font-size: 0.85rem;
    background: var(--card-bg);
    border-radius: 4px;
    color: var(--text-secondary);
}

/* Event Groups */
.cal-event-group {
    margin-bottom: 12px;
}

.cal-event-group h4 {
    margin: 0 0 6px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cal-event-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cal-event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-left: 3px solid;
    margin-bottom: 3px;
    font-size: 0.85rem;
    background: var(--bg-secondary);
    border-radius: 0 4px 4px 0;
}

.cal-event-item i {
    font-size: 0.75rem;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
}

.cal-event-title {
    flex: 1;
}

/* Amendment History */
.amendment-history {
    max-height: 250px;
    overflow-y: auto;
}

.amendment-entry {
    padding: 10px;
    border-left: 3px solid var(--warning-color, #f59e0b);
    margin-bottom: 8px;
    background: var(--bg-secondary);
    border-radius: 0 6px 6px 0;
}

.amendment-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.amendment-meta strong {
    color: var(--text-primary, #1e293b);
}

.amendment-change {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.amendment-change .field-name {
    font-weight: 600;
}

.amendment-change .old-value {
    color: var(--danger-color, #dc2626);
    text-decoration: line-through;
}

.amendment-change .new-value {
    color: var(--success-color, #16a34a);
    font-weight: 500;
}

.amendment-change i {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.amendment-reason {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.amendment-reason i {
    margin-right: 4px;
}

/* Calendar responsive */
@media (max-width: 768px) {
    .cal-day {
        min-height: 50px;
        padding: 2px;
    }

    .cal-day-number {
        font-size: 0.75rem;
    }

    .cal-event-pill {
        width: 12px;
        height: 12px;
    }

    .cal-event-pill i {
        font-size: 0.5rem;
    }

    .cal-log-summary {
        gap: 6px;
    }

    .cal-log-stat {
        padding: 4px 8px;
        min-width: 50px;
    }

    .cal-legend {
        gap: 6px;
        font-size: 0.7rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   Sprint 17F: Attachment Picker
   ══════════════════════════════════════════════════════════════ */

/* ── Toolbar ── */
.attachment-picker-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    align-items: center;
}

.picker-search {
    flex: 1;
    min-width: 200px;
}

.picker-search input {
    width: 100%;
}

.picker-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.picker-filters select {
    min-width: 120px;
    max-width: 180px;
}

.picker-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.picker-selection-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Picker Body ── */
.attachment-picker-body {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Thumbnail Grid ── */
.attachment-thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.attachment-thumb-card {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
    background: var(--bg-white);
}

.attachment-thumb-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachment-thumb-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.attachment-thumb-card.selected .thumb-check {
    display: flex;
}

.thumb-preview {
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

.thumb-preview .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-preview .thumb-img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.thumb-preview .thumb-img:not(.lazy) {
    opacity: 1;
}

.thumb-preview .thumb-icon {
    font-size: 2.5rem;
    color: var(--text-secondary);
}

.thumb-info {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thumb-filename {
    font-size: 0.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thumb-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.thumb-links {
    font-size: 0.7rem;
    color: var(--primary-color);
}

.thumb-check {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.ap-load-more {
    text-align: center;
    padding: 16px 0;
}

/* ── Empty / Error States ── */
.ap-empty-state,
.ap-error-state {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

.ap-empty-state i,
.ap-error-state i {
    font-size: 3rem;
    margin-bottom: 12px;
    display: block;
}

.ap-error-state i {
    color: var(--danger-color);
}

/* ── Duplicate Detection Warning ── */
.ap-duplicate-warning {
    margin: 0 0 12px 0;
    padding: 12px 16px;
    background: var(--warning-light);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-lg);
}

.ap-duplicate-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ap-duplicate-icon {
    font-size: 1.5rem;
    color: var(--warning-color);
    flex-shrink: 0;
    padding-top: 2px;
}

.ap-duplicate-text {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.4;
}

.ap-duplicate-text strong {
    color: var(--text-dark);
}

.ap-duplicate-text p {
    margin: 4px 0 0 0;
}

.ap-duplicate-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

/* ── Linked Attachments Display ── */
.linked-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linked-attachment-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    font-size: 0.85rem;
}

.linked-attachment-row .file-icon {
    color: var(--text-secondary);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.linked-attachment-row .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linked-attachment-row .file-size {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.linked-attachment-row .file-linked-by {
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.linked-attachment-row .unlink-btn {
    opacity: 0;
    transition: opacity 0.15s;
    cursor: pointer;
    color: var(--danger-color);
    flex-shrink: 0;
}

.linked-attachment-row:hover .unlink-btn {
    opacity: 1;
}

.ap-linked-empty {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 8px 0;
}

/* ── Responsive: Stack filters on mobile ── */
@media (max-width: 768px) {
    .attachment-thumbnail-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }

    .thumb-preview {
        height: 90px;
    }

    .attachment-picker-toolbar {
        flex-direction: column;
    }

    .picker-search {
        min-width: 0;
        width: 100%;
    }

    .picker-filters {
        width: 100%;
    }

    .picker-filters select {
        flex: 1;
        min-width: 0;
    }

    .ap-duplicate-content {
        flex-direction: column;
    }

    .ap-duplicate-actions {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════
   Sprint 17I: E-Signature Integration
   ══════════════════════════════════════════════════════════════ */

/* Signer rows in send modal */
.esig-signer-row {
    margin-bottom: 8px;
    padding: 10px;
    background: var(--surface-secondary, #f9f9f9);
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-color, #e0e0e0);
    transition: border-color 0.15s ease;
}

.esig-signer-row:hover {
    border-color: var(--primary-color, #4a90d9);
}

.esig-signer-row .form-group {
    margin-bottom: 0;
}

/* Send button for document views */
.esig-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--primary-color, #4a90d9);
    color: #fff;
    border: none;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.esig-send-btn:hover {
    opacity: 0.9;
}

.esig-send-btn:active {
    transform: scale(0.98);
}

/* Status badge clickable */
.esig-status-badge {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.esig-status-badge:hover {
    opacity: 0.85;
}

/* Detail modal grid */
.esig-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.esig-detail-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.esig-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Signer timeline */
.esig-signer-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.esig-timeline-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    position: relative;
}

.esig-timeline-item:last-child {
    border-bottom: none;
}

.esig-timeline-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-secondary, #f5f5f5);
    font-size: 14px;
}

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

.esig-timeline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.esig-timeline-name {
    font-weight: 600;
    color: var(--text-primary);
}

.esig-timeline-role {
    font-size: 11px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--surface-secondary, #f0f0f0);
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.esig-timeline-order {
    font-size: 11px;
    color: var(--text-muted);
}

.esig-timeline-email {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.esig-timeline-status {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

.esig-timeline-reason {
    font-size: 12px;
    color: var(--danger-color, #c62828);
    margin-top: 4px;
    font-style: italic;
}

/* Pending requests list */
.esig-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.esig-pending-item:hover {
    background: var(--surface-secondary, #f9f9f9);
    border-color: var(--primary-color, #4a90d9);
}

.esig-pending-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.esig-pending-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esig-pending-meta {
    font-size: 12px;
}

.esig-pending-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.esig-progress-bar {
    width: 60px;
    height: 6px;
    background: var(--surface-secondary, #e0e0e0);
    border-radius: 3px;
    overflow: hidden;
}

.esig-progress-fill {
    height: 100%;
    background: var(--success-color, #2e7d32);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.esig-progress-text {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 28px;
    text-align: right;
}

/* E-signature section header */
.esig-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .esig-detail-grid {
        grid-template-columns: 1fr;
    }

    .esig-pending-item {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .esig-pending-progress {
        width: 100%;
    }

    .esig-progress-bar {
        flex: 1;
    }

    .esig-signer-row .form-row {
        flex-wrap: wrap;
    }

    .esig-signer-row .form-group {
        min-width: 120px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Sprint 17G: Custom Fields Advanced Styles
   ═══════════════════════════════════════════════════════════════════ */

.custom-fields-section {
    margin-top: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.custom-fields-section h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-field-group {
    margin-bottom: 16px;
    padding: 10px;
    background: var(--bg-subtle);
    border-radius: 6px;
}

.custom-field-group h6 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.custom-field-wrapper {
    margin-bottom: 10px;
    transition: opacity 0.2s, max-height 0.3s;
}

.custom-field-wrapper label {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 4px;
    display: block;
}

.custom-field-wrapper .help-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
    display: block;
}

.custom-field-wrapper[style*="display: none"] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Color-coded select options */
.cf-input option {
    padding: 4px 8px;
}

/* Multi-select checkboxes */
.cf-multi-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    max-height: 180px;
    overflow-y: auto;
}

.cf-multi-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.cf-multi-option:hover {
    background: var(--bg-subtle);
}

.option-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Checkbox field type */
.cf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Table View custom field columns */
.cf-table-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-table-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Kanban card custom fields */
.kanban-card-custom-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.kanban-cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.kanban-cf-chip .cf-label {
    font-weight: 500;
}

/* Field definition management */
.cf-definition-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--card-bg);
}

.cf-definition-card .field-type-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--primary-light);
    color: var(--primary-color);
    text-transform: uppercase;
    font-weight: 600;
}

.cf-definition-card .field-name {
    flex: 1;
    font-weight: 500;
}

.cf-definition-card .field-entity {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.cf-definition-card .field-actions {
    display: flex;
    gap: 6px;
}

.cf-definition-card .field-actions button {
    opacity: 0;
    transition: opacity 0.15s;
}

.cf-definition-card:hover .field-actions button {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* Sprint COMP-1: Audit Log Viewer                                       */
/* ═══════════════════════════════════════════════════════════════════════ */

#auditLogSection {
    padding: 16px 20px;
}

#auditLogSection .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

#auditLogSection .section-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

#auditLogSection .section-header h2 i {
    color: var(--admin-color);
}

.audit-log-result-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Filter Bar */
.audit-log-filter-bar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.audit-log-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.audit-log-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.audit-log-filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.audit-log-filter-group .form-control {
    height: 34px;
    font-size: 0.85rem;
    min-width: 120px;
}

.audit-log-filter-group select.form-control {
    min-width: 150px;
}

.audit-log-filter-actions {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-left: auto;
}

/* Table */
.audit-log-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.audit-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.audit-log-table thead {
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.audit-log-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.audit-log-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}

.audit-log-table tbody tr:hover {
    background: var(--bg-hover);
}

.audit-log-table tbody tr:last-child td {
    border-bottom: none;
}

/* Timestamp cell */
.audit-log-cell-timestamp {
    white-space: nowrap;
}

.audit-log-time {
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
}

.audit-log-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* User link */
.audit-log-user-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.audit-log-user-link:hover {
    text-decoration: underline;
}

.audit-log-system-user {
    color: var(--text-muted);
    font-style: italic;
}

/* Action badge */
.audit-log-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--action-color, var(--text-secondary));
    background: color-mix(in srgb, var(--action-color, var(--text-secondary)) 10%, transparent);
    white-space: nowrap;
}

.audit-log-action-badge i {
    font-size: 0.7rem;
}

/* Entity link */
.audit-log-entity-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.audit-log-entity-link:hover {
    text-decoration: underline;
}

/* IP address */
.audit-log-cell-ip code {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Details button */
.audit-log-details-btn {
    padding: 4px 8px !important;
    color: var(--text-secondary);
}

.audit-log-details-btn:hover {
    color: var(--primary-color);
}

/* Column widths */
.audit-log-th-timestamp { width: 140px; }
.audit-log-th-user { width: 180px; }
.audit-log-th-action { width: 150px; }
.audit-log-th-entity { width: 160px; }
.audit-log-th-ip { width: 130px; }
.audit-log-th-details { width: 70px; text-align: center; }
.audit-log-cell-details { text-align: center; }

/* Empty / Loading states */
.audit-log-empty,
.audit-log-loading {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.audit-log-empty i,
.audit-log-loading i {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.audit-log-empty p {
    margin: 4px 0;
}

.audit-log-empty-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Pagination */
.audit-log-pagination-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 8px;
}

.audit-log-pagination-info {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.audit-log-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.audit-log-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px !important;
    font-size: 0.82rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.audit-log-page-btn.audit-log-page-active {
    background: var(--primary-color) !important;
    color: white !important;
    border-radius: var(--radius-sm);
}

.audit-log-page-ellipsis {
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Detail modal content */
.audit-log-detail-content {
    padding: 4px 0;
}

.audit-log-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.85rem;
}

.audit-log-detail-meta strong {
    color: var(--text-secondary);
}

.audit-log-detail-meta code {
    font-size: 0.78rem;
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

.audit-log-detail-section {
    margin-bottom: 16px;
}

.audit-log-detail-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-log-json {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Activity list in modal */
.audit-log-activity-list h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.audit-log-activity-count {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Responsive: stack filters on narrow screens */
@media (max-width: 900px) {
    .audit-log-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .audit-log-filter-actions {
        margin-left: 0;
        justify-content: flex-start;
    }

    .audit-log-detail-meta {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Sprint SEC-1: SSO / SAML 2.0 Configuration Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* Status badges */
#sso-config-status .sso-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
}

#sso-config-status .sso-status-active {
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
    color: var(--success-color);
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, transparent);
}

#sso-config-status .sso-status-inactive {
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    color: var(--warning-color);
    border: 1px solid color-mix(in srgb, var(--warning-color) 30%, transparent);
}

#sso-config-status .sso-status-unconfigured {
    background: color-mix(in srgb, var(--info-color) 10%, transparent);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* Toggle labels */
.sso-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.88rem;
    user-select: none;
}

.sso-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

/* Test connection result */
#sso-test-result .sso-test-success {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    color: var(--success-color);
    border: 1px solid color-mix(in srgb, var(--success-color) 25%, transparent);
}

#sso-test-result .sso-test-failure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 25%, transparent);
}

/* SSO Audit Log Table */
.sso-audit-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.sso-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.sso-audit-table thead {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.sso-audit-table th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sso-audit-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.sso-audit-table tbody tr:hover {
    background: var(--bg-hover);
}

/* Audit timestamp cell */
.sso-audit-cell-ts {
    white-space: nowrap;
}

.sso-audit-time {
    display: block;
    font-weight: 500;
    font-size: 0.84rem;
}

.sso-audit-date {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
}

/* Action badge */
.sso-audit-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--action-color, var(--text-secondary)) 12%, transparent);
    color: var(--action-color, var(--text-secondary));
    white-space: nowrap;
}

.sso-audit-action-badge i {
    font-size: 0.72rem;
}

/* Details cell */
.sso-audit-cell-details {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Empty / loading states */
.sso-audit-empty,
.sso-audit-loading {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.sso-audit-empty i,
.sso-audit-loading i {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 8px;
    opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════════════
   Sprint SEC-2: TOTP Two-Factor Authentication
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Panels ──────────────────────────────────────────────────────────── */

.totp-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.totp-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.totp-panel-title i {
    margin-right: 6px;
    color: var(--text-muted);
}

/* ── Status Card ─────────────────────────────────────────────────────── */

.totp-status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.totp-status-enabled {
    background: color-mix(in srgb, var(--success-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}

.totp-status-disabled {
    background: var(--bg-secondary);
}

.totp-status-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.totp-enabled-icon {
    background: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
}

.totp-disabled-icon {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
}

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

.totp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 4px;
}

.totp-badge-enabled {
    background: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
}

.totp-badge-disabled {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-secondary);
}

.totp-status-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.totp-status-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Empty State ─────────────────────────────────────────────────────── */

.totp-empty-state {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}

.totp-empty-state i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.5;
}

.totp-empty-state p {
    margin: 0;
    font-size: 0.88rem;
}

.totp-muted {
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* ── Setup Wizard ────────────────────────────────────────────────────── */

.totp-setup-wizard {
    padding: 4px 0;
}

.totp-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 0 20px;
}

.totp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.totp-step.active,
.totp-step.completed {
    opacity: 1;
}

.totp-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.2s, color 0.2s;
}

.totp-step.active .totp-step-num {
    background: var(--primary-color);
    color: white;
}

.totp-step.completed .totp-step-num {
    background: var(--success-color);
    color: white;
}

.totp-step-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.totp-step-line {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin: 0 8px;
    margin-bottom: 18px;
    min-width: 24px;
}

/* ── Instruction Blocks ──────────────────────────────────────────────── */

.totp-instruction-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.totp-instruction-block h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.totp-instruction-block h4 i {
    margin-right: 6px;
}

.totp-instruction-block p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.totp-warning-block {
    background: color-mix(in srgb, var(--warning-color) 8%, transparent);
    border-color: color-mix(in srgb, var(--warning-color) 30%, transparent);
}

.totp-warning-block h4 {
    color: var(--warning-color);
}

.totp-danger-block {
    background: color-mix(in srgb, var(--danger-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.totp-danger-block h4 {
    color: var(--danger-color);
}

/* ── QR / Secret Area ────────────────────────────────────────────────── */

.totp-qr-area {
    margin-bottom: 20px;
}

.totp-qr-placeholder {
    text-align: center;
    padding: 20px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
    color: var(--text-muted);
}

.totp-qr-placeholder i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 8px;
    opacity: 0.4;
}

.totp-qr-placeholder p {
    margin: 0;
    font-size: 0.85rem;
}

.totp-uri-display,
.totp-manual-entry {
    margin-bottom: 12px;
}

.totp-secret-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.totp-secret-box code {
    flex: 1;
    word-break: break-all;
    font-size: 0.82rem;
    user-select: all;
    color: var(--text-primary);
}

/* ── Verify Form ─────────────────────────────────────────────────────── */

.totp-verify-form {
    margin-bottom: 20px;
}

.totp-code-input {
    max-width: 200px;
    font-size: 1.25rem !important;
    letter-spacing: 0.3em;
    text-align: center;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.totp-error-msg {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--danger-color) 6%, transparent);
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 20%, transparent);
}

/* ── Setup Actions ───────────────────────────────────────────────────── */

.totp-setup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* ── Backup Codes Grid ───────────────────────────────────────────────── */

.totp-backup-codes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.totp-backup-code-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.88rem;
}

.totp-backup-code-num {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 20px;
}

.totp-backup-code-item code {
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.totp-backup-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* ── Trusted Devices Table ───────────────────────────────────────────── */

.totp-devices-table {
    width: 100%;
    border-collapse: collapse;
}

.totp-devices-table th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border-color);
}

.totp-devices-table td {
    padding: 10px 12px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

.totp-devices-table tr:hover td {
    background: var(--bg-secondary);
}

.totp-device-icon {
    color: var(--text-muted);
    margin-right: 6px;
}

.totp-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82rem;
}

/* ── Danger Text ─────────────────────────────────────────────────────── */

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

.totp-danger-text:hover {
    background: color-mix(in srgb, var(--danger-color) 8%, transparent) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .totp-status-card {
        flex-direction: column;
        text-align: center;
    }

    .totp-status-actions {
        justify-content: center;
    }

    .totp-backup-codes-grid {
        grid-template-columns: 1fr;
    }

    .totp-step-label {
        display: none;
    }

    .totp-devices-table {
        font-size: 0.82rem;
    }

    .totp-devices-table th,
    .totp-devices-table td {
        padding: 6px 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Sprint SEC-3: JWT Token Authentication
   ═══════════════════════════════════════════════════════════════════════ */

.jwt-panel {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.jwt-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--text-color);
}

.jwt-panel-title i {
    margin-right: 6px;
    color: var(--text-muted);
}

.jwt-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.jwt-status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.jwt-status-active {
    background-color: var(--success-color);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.jwt-status-inactive {
    background-color: var(--text-muted);
}

.jwt-status-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.jwt-expiry-info {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin-bottom: 12px;
}

.jwt-panel-actions {
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Sprint COMP-2: Data Retention & Archival
   ═══════════════════════════════════════════════════════════════════════ */

#dataRetentionSection .section-header h2 i {
    color: var(--primary-color);
}

/* Tabs */
.dr-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.dr-tab-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.dr-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

/* Loading / Empty States */
.dr-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dr-loading i {
    margin-right: 6px;
}

.dr-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.dr-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.dr-empty p {
    margin: 4px 0;
}

.dr-empty-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Policy Form */
.dr-policy-form {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.dr-policy-info {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dr-policy-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.dr-policy-meta i {
    color: var(--text-muted);
    margin-right: 4px;
}

.dr-policy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.dr-policy-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.dr-policy-field .form-control {
    width: 100%;
}

.dr-field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    display: block;
}

.dr-policy-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Legal Holds */
.dr-holds-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.dr-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.dr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.dr-table thead {
    background: var(--bg-secondary);
}

.dr-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.dr-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.dr-table tbody tr:hover {
    background: var(--bg-hover);
}

.dr-hold-reason {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status Badges */
.dr-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.dr-status-active {
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.12);
    color: var(--danger-color);
}

.dr-status-lifted {
    background: rgba(var(--success-rgb, 40, 167, 69), 0.12);
    color: var(--success-color);
}

/* Scope Badges */
.dr-scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 500;
}

.dr-scope-org {
    color: var(--danger-color);
}

.dr-scope-type {
    color: var(--warning-color);
}

.dr-scope-entity {
    color: var(--primary-color);
}

.dr-lifted-info {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Data Export */
.dr-export-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.dr-export-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: border-color 0.2s;
}

.dr-export-card:hover {
    border-color: var(--primary-color);
}

.dr-export-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary-color);
}

.dr-export-card-body h4 {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.dr-export-card-body p {
    margin: 0 0 12px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.dr-export-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.dr-export-success {
    background: rgba(var(--success-rgb, 40, 167, 69), 0.08);
    border: 1px solid var(--success-color);
    color: var(--text-primary);
}

.dr-export-success > i {
    color: var(--success-color);
    font-size: 1.2rem;
    margin-top: 2px;
}

.dr-export-success strong {
    display: block;
    margin-bottom: 4px;
}

.dr-export-success p {
    margin: 2px 0;
    font-size: 0.85rem;
}

.dr-export-error {
    background: rgba(var(--danger-rgb, 220, 53, 69), 0.08);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

/* Responsive */
@media (max-width: 768px) {
    .dr-policy-grid {
        grid-template-columns: 1fr;
    }

    .dr-export-section {
        grid-template-columns: 1fr;
    }

    .dr-tabs {
        overflow-x: auto;
    }

    .dr-tab-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .dr-table {
        font-size: 0.8rem;
    }

    .dr-table th,
    .dr-table td {
        padding: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* Sprint SEC-5: Advanced RBAC & Row-Level Security                       */
/* ═══════════════════════════════════════════════════════════════════════ */

:root {
    --rbac-role-admin: #7c3aed;
    --rbac-role-lead: #2563eb;
    --rbac-role-member: #16a34a;
    --rbac-role-viewer: #6b7280;
}

/* Tab Bar */
.rbac-tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
    padding: 0 4px;
}

.rbac-tab-btn {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.rbac-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Toolbar */
.rbac-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rbac-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rbac-toolbar-left label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.rbac-toolbar-left select {
    min-width: 240px;
}

.rbac-toolbar-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Tables */
.rbac-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.rbac-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.rbac-table thead {
    background: var(--bg-secondary);
}

.rbac-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color);
}

.rbac-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.rbac-table tbody tr:hover {
    background: var(--bg-hover);
}

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

.rbac-actions-cell {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Role Badges */
.rbac-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--role-color, var(--text-secondary));
    background: color-mix(in srgb, var(--role-color, var(--text-secondary)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-color, var(--text-secondary)) 30%, transparent);
}

/* Session Status */
.rbac-session-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.rbac-session-status-dot.rbac-session-current {
    background: var(--primary-color);
    box-shadow: 0 0 4px var(--primary-color);
}

.rbac-session-status-dot.rbac-session-active {
    background: var(--success-color);
}

.rbac-session-status-dot.rbac-session-revoked {
    background: var(--danger-color);
    opacity: 0.5;
}

.rbac-session-revoked td {
    opacity: 0.55;
}

.rbac-current-label {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 600;
}

.rbac-revoked-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* IP Allowlist */
.rbac-ip-address {
    font-size: 0.88rem;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.rbac-ip-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.rbac-ip-status-badge.rbac-ip-active {
    color: var(--success-color);
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
}

.rbac-ip-status-badge.rbac-ip-inactive {
    color: var(--text-muted);
    background: var(--bg-secondary);
}

.rbac-ip-inactive td {
    opacity: 0.55;
}

/* Empty / Loading States */
.rbac-empty,
.rbac-loading {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.rbac-empty i,
.rbac-loading i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
    opacity: 0.4;
}

.rbac-empty p {
    margin: 4px 0;
}

.rbac-empty-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Danger ghost button variant */
.btn-danger-ghost {
    color: var(--danger-color);
}

.btn-danger-ghost:hover {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
}

/* Static form display */
.form-control-static {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .rbac-tab-bar {
        overflow-x: auto;
    }

    .rbac-tab-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .rbac-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .rbac-toolbar-left select {
        min-width: unset;
        width: 100%;
    }

    .rbac-table {
        font-size: 0.8rem;
    }

    .rbac-table th,
    .rbac-table td {
        padding: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Sprint COMP-4: GDPR & International Compliance
   ═══════════════════════════════════════════════════════════════════════ */

/* Tabs */
.gdpr-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.gdpr-tab-btn {
    background: none;
    border: none;
    padding: 10px 18px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

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

.gdpr-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Loading / Empty States */
.gdpr-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.gdpr-loading i {
    margin-right: 6px;
}

.gdpr-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.gdpr-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.4;
}

.gdpr-empty p {
    margin: 4px 0;
}

.gdpr-empty-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Section Headers */
.gdpr-breaches-header,
.gdpr-processors-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.gdpr-section-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--primary-color);
}

.gdpr-section-desc i {
    margin-right: 6px;
    color: var(--primary-color);
}

/* Consent Toggles */
.gdpr-consent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gdpr-consent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.15s;
}

.gdpr-consent-card:hover {
    border-color: var(--primary-color);
}

.gdpr-consent-info {
    flex: 1;
}

.gdpr-consent-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.gdpr-consent-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.gdpr-consent-meta {
    font-size: 0.78rem;
}

.gdpr-consent-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gdpr-consent-granted {
    color: var(--success-color);
}

.gdpr-consent-revoked {
    color: var(--text-muted);
}

/* Toggle Switch */
.gdpr-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.gdpr-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.gdpr-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--border-color);
    border-radius: 26px;
    transition: background-color 0.25s;
}

.gdpr-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bg-primary);
    border-radius: 50%;
    transition: transform 0.25s;
}

.gdpr-switch input:checked + .gdpr-slider {
    background-color: var(--success-color);
}

.gdpr-switch input:checked + .gdpr-slider::before {
    transform: translateX(22px);
}

.gdpr-switch input:disabled + .gdpr-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.gdpr-consent-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Severity Badges */
.gdpr-severity-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gdpr-severity-low {
    background: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
}

.gdpr-severity-medium {
    background: color-mix(in srgb, var(--warning-color) 15%, transparent);
    color: var(--warning-color);
}

.gdpr-severity-high {
    background: color-mix(in srgb, color-mix(in srgb, var(--warning-color) 50%, var(--danger-color)) 15%, transparent);
    color: color-mix(in srgb, var(--warning-color) 50%, var(--danger-color));
}

.gdpr-severity-critical {
    background: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
}

/* Breach Status Badges */
.gdpr-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}

.gdpr-breach-status-open {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}

.gdpr-breach-status-investigating {
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    color: var(--warning-color);
}

.gdpr-breach-status-notified {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}

.gdpr-breach-status-resolved {
    background: color-mix(in srgb, var(--success-color) 12%, transparent);
    color: var(--success-color);
}

/* Breach Table */
.gdpr-table-wrap {
    overflow-x: auto;
}

.gdpr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.gdpr-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--border-color);
}

.gdpr-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.gdpr-table tr:hover td {
    background: var(--bg-secondary);
}

.gdpr-breach-title {
    font-weight: 500;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sub-Processor Cards */
.gdpr-processor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.gdpr-processor-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.gdpr-processor-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

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

.gdpr-processor-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gdpr-processor-name i {
    color: var(--primary-color);
    margin-right: 6px;
}

.gdpr-processor-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.gdpr-processor-field {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.gdpr-field-label {
    font-weight: 600;
    color: var(--text-primary);
}

.gdpr-processor-field a {
    color: var(--primary-color);
    text-decoration: none;
}

.gdpr-processor-field a:hover {
    text-decoration: underline;
}

.gdpr-processor-status {
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
}

.gdpr-proc-active {
    color: var(--success-color);
}

.gdpr-proc-inactive {
    color: var(--text-muted);
}

/* Export Results */
.gdpr-export-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 0.88rem;
}

.gdpr-export-success {
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    color: var(--success-color);
}

.gdpr-export-error {
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
}

.gdpr-export-result i {
    font-size: 1.2rem;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .gdpr-processor-grid {
        grid-template-columns: 1fr;
    }

    .gdpr-tabs {
        overflow-x: auto;
    }

    .gdpr-tab-btn {
        padding: 8px 14px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .gdpr-table {
        font-size: 0.8rem;
    }

    .gdpr-table th,
    .gdpr-table td {
        padding: 8px;
    }

    .gdpr-consent-card {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .gdpr-consent-actions {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Sprint INT-1: API Key Management
   ═══════════════════════════════════════════════════════════════════════ */

/* Empty & Loading States */
.api-key-empty,
.api-key-loading {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.api-key-empty i,
.api-key-loading i {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
}

.api-key-empty-hint {
    font-size: 0.85rem;
    margin-top: 4px;
    color: var(--text-muted);
}

/* Table */
.api-key-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.api-key-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.api-key-table thead {
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

.api-key-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.api-key-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-primary);
}

.api-key-table tbody tr:hover {
    background: var(--bg-hover);
}

.api-key-table tbody tr:last-child td {
    border-bottom: none;
}

/* Key Prefix (monospace) */
.api-key-prefix {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82rem;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* Permission Badges */
.api-key-perm-badge {
    display: inline-block;
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--primary-light, rgba(59, 130, 246, 0.1));
    color: var(--primary-color);
    margin: 1px 2px;
    white-space: nowrap;
    font-weight: 500;
}

.api-key-perm-none {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
}

.api-key-cell-perms {
    max-width: 220px;
}

/* Status Indicators */
.api-key-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.api-key-status-active {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success-color);
}

.api-key-status-revoked {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger-color);
}

.api-key-status-expired {
    background: rgba(156, 163, 175, 0.15);
    color: var(--text-muted);
}

/* Expires text */
.api-key-expires {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Actions cell */
.api-key-cell-actions {
    white-space: nowrap;
}

/* Permission Checkbox Grid (create modal) */
.api-key-perm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.api-key-perm-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.api-key-perm-check:hover {
    background: var(--bg-hover);
}

.api-key-perm-check input[type="checkbox"] {
    margin: 0;
    accent-color: var(--primary-color);
}

.api-key-perm-check i {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* Raw Key Display */
.api-key-raw-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    color: var(--warning-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.api-key-raw-warning i {
    font-size: 1.2rem;
}

.api-key-raw-box {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 12px;
    gap: 10px;
}

.api-key-raw-box code {
    flex: 1;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.88rem;
    word-break: break-all;
    color: var(--text-primary);
    user-select: all;
}

.api-key-copy-btn {
    flex-shrink: 0;
}

.api-key-raw-meta {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.api-key-raw-meta code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82rem;
}

/* Usage Stats Cards */
.api-key-usage-content {
    padding: 4px 0;
}

.api-key-usage-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.api-key-usage-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}

.api-key-usage-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.api-key-usage-card-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.api-key-usage-section-title {
    font-size: 0.95rem;
    margin: 16px 0 10px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.api-key-usage-count {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 768px) {
    .api-key-perm-grid {
        grid-template-columns: 1fr;
    }

    .api-key-usage-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .api-key-table {
        font-size: 0.8rem;
    }

    .api-key-table th,
    .api-key-table td {
        padding: 6px 8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Sprint INT-2: Webhook Engine
   ══════════════════════════════════════════════════════════════════════ */

/* ── Loading & Empty States ─────────────────────────────────────────── */

.webhook-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted, #888);
    font-size: 0.95rem;
}

.webhook-loading i {
    margin-right: 0.5rem;
}

.webhook-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #888);
}

.webhook-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.5;
}

.webhook-empty p {
    margin: 0.25rem 0;
}

.webhook-empty-hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ── Webhook Table ──────────────────────────────────────────────────── */

.webhook-table-wrap {
    overflow-x: auto;
}

.webhook-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.webhook-table thead th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
    font-weight: 600;
    color: var(--text-secondary, #555);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.webhook-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    vertical-align: middle;
}

.webhook-row:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

.webhook-cell-name {
    font-weight: 500;
    white-space: nowrap;
}

.webhook-url-display {
    font-size: 0.8rem;
    background: var(--code-bg, #f5f5f5);
    padding: 2px 6px;
    border-radius: 3px;
    word-break: break-all;
}

.webhook-cell-actions {
    white-space: nowrap;
}

.webhook-cell-actions .btn {
    margin-right: 2px;
}

/* ── Status Badges ──────────────────────────────────────────────────── */

.webhook-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.webhook-status-active {
    background: rgba(46, 160, 67, 0.15);
    color: #2ea043;
}

.webhook-status-inactive {
    background: rgba(150, 150, 150, 0.15);
    color: #888;
}

/* ── Event Badges ───────────────────────────────────────────────────── */

.webhook-event-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--accent-bg, rgba(56, 132, 244, 0.1));
    color: var(--accent-color, #3884f4);
    margin: 1px 2px;
    white-space: nowrap;
}

.webhook-event-more {
    background: var(--hover-bg, rgba(0, 0, 0, 0.06));
    color: var(--text-muted, #888);
}

/* ── Event Checkbox Grid ────────────────────────────────────────────── */

.webhook-event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px;
    background: var(--code-bg, #f8f9fa);
    border-radius: 6px;
    border: 1px solid var(--border-color, #e0e0e0);
    max-height: 250px;
    overflow-y: auto;
}

.webhook-event-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.webhook-event-check:hover {
    background: rgba(0, 0, 0, 0.04);
}

.webhook-event-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.webhook-event-check i {
    color: var(--text-muted, #888);
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

/* ── Active Toggle Label ────────────────────────────────────────────── */

.webhook-active-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.webhook-active-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ── Delivery History ───────────────────────────────────────────────── */

.webhook-delivery-table .webhook-delivery-row:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

.webhook-delivery-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.webhook-delivery-status-delivered {
    background: rgba(46, 160, 67, 0.15);
    color: #2ea043;
}

.webhook-delivery-status-failed {
    background: rgba(218, 54, 51, 0.15);
    color: #da3633;
}

.webhook-delivery-status-pending {
    background: rgba(210, 170, 40, 0.15);
    color: #b08800;
}

.webhook-delivery-status-retrying {
    background: rgba(227, 134, 33, 0.15);
    color: #d18616;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .webhook-event-grid {
        grid-template-columns: 1fr;
    }

    .webhook-table {
        font-size: 0.8rem;
    }

    .webhook-table th,
    .webhook-table td {
        padding: 6px 8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Sprint INT-5: File Storage & Document Integration
   ══════════════════════════════════════════════════════════════════════ */

/* ── Empty State ─────────────────────────────────────────────────── */

.file-link-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.file-link-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.file-link-empty p {
    margin: 0.25rem 0;
}

.file-link-empty-hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

.file-link-empty .btn {
    margin-top: 1rem;
}

/* ── Toolbar ─────────────────────────────────────────────────────── */

.file-link-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

/* ── File Cards Grid ─────────────────────────────────────────────── */

.file-link-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-link-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.file-link-card:hover {
    border-color: var(--primary, #4a90d9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.file-link-card-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}

.file-link-card-info {
    flex: 1;
    min-width: 0;
}

.file-link-card-name {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-link-card-name:hover {
    color: var(--primary, #4a90d9);
    text-decoration: underline;
}

.file-link-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.file-link-size {
    color: var(--text-secondary);
}

.file-link-date {
    color: var(--text-secondary);
}

.file-link-provider-badge {
    font-weight: 500;
}

.file-link-provider-badge i {
    margin-right: 0.2rem;
}

.file-link-card-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ── Provider Settings Cards ─────────────────────────────────────── */

.file-link-provider-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.file-link-provider-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    transition: border-color 0.15s;
}

.file-link-provider-card.file-link-provider-connected {
    border-color: var(--success, #27ae60);
    background: rgba(39, 174, 96, 0.03);
}

.file-link-provider-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.file-link-provider-card-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.file-link-provider-card-user {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.file-link-provider-card-status {
    flex-shrink: 0;
}

.file-link-status-badge {
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.file-link-status-connected {
    color: var(--success, #27ae60);
}

.file-link-status-disconnected {
    color: var(--text-secondary, #999);
}

.file-link-provider-card-actions {
    flex-shrink: 0;
}

/* ── File Picker — Provider Select ───────────────────────────────── */

.file-link-provider-select {
    padding: 1rem 0;
}

.file-link-picker-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.file-link-provider-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.file-link-provider-select-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-align: center;
}

.file-link-provider-select-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.file-link-provider-select-card span {
    font-weight: 600;
    font-size: 0.9rem;
}

.file-link-provider-select-card small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ── File Picker — Browse View ───────────────────────────────────── */

.file-link-browse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.file-link-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.file-link-breadcrumb-link {
    color: var(--primary, #4a90d9);
    cursor: pointer;
    text-decoration: none;
}

.file-link-breadcrumb-link:hover {
    text-decoration: underline;
}

.file-link-breadcrumb-current {
    font-weight: 600;
    color: var(--text-primary);
}

.file-link-breadcrumb-sep {
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.file-link-search-bar {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.file-link-search-bar input {
    width: 200px;
}

.file-link-browse-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
}

.file-link-browse-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    cursor: pointer;
    transition: background 0.1s;
}

.file-link-browse-row:last-child {
    border-bottom: none;
}

.file-link-browse-row:hover {
    background: var(--hover-bg, rgba(74, 144, 217, 0.06));
}

.file-link-browse-folder:hover {
    background: rgba(243, 156, 18, 0.06);
}

.file-link-browse-icon {
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.file-link-browse-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.file-link-browse-size {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 60px;
    text-align: right;
}

.file-link-browse-action {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.file-link-browse-row:hover .file-link-browse-action {
    opacity: 1;
    color: var(--primary, #4a90d9);
}

.file-link-browse-more {
    text-align: center;
    padding: 0.5rem;
}

.file-link-browse-footer {
    margin-top: 0.75rem;
}

.file-link-empty-browse {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.file-link-empty-browse i {
    font-size: 1.5rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.file-link-empty-browse p {
    margin: 0;
    font-size: 0.85rem;
}

/* ── Loading State ───────────────────────────────────────────────── */

.file-link-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.file-link-loading i {
    margin-right: 0.4rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .file-link-card {
        flex-wrap: wrap;
    }

    .file-link-card-meta {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .file-link-browse-header {
        flex-direction: column;
        align-items: stretch;
    }

    .file-link-search-bar input {
        width: 100%;
    }

    .file-link-provider-select-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Sprint INT-3: Accounting Integration
   ══════════════════════════════════════════════════════════════════════ */

/* ── Loading & Empty States ────────────────────────────────────────── */

.acct-int-loading {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
}

.acct-int-loading i {
    margin-right: 8px;
}

.acct-int-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.acct-int-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.acct-int-empty p {
    margin: 4px 0;
}

.acct-int-empty-hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

.acct-int-hint {
    padding: 12px 16px;
    margin: 12px 0;
    background: var(--info-bg, rgba(13, 110, 253, 0.08));
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.acct-int-hint i {
    margin-right: 6px;
    color: var(--info-color, #0d6efd);
}

/* ── Provider Cards ────────────────────────────────────────────────── */

.acct-int-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.acct-int-provider-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    transition: box-shadow 0.2s;
}

.acct-int-provider-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.acct-int-provider-quickbooks {
    border-left: 4px solid #2CA01C;
}

.acct-int-provider-xero {
    border-left: 4px solid #13B5EA;
}

.acct-int-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.acct-int-card-icon {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-color, rgba(0, 0, 0, 0.03));
    border-radius: 10px;
    flex-shrink: 0;
}

.acct-int-card-info h4 {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.acct-int-card-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.acct-int-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.acct-int-token-warn {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--warning-color, #f0ad4e);
    margin-left: 8px;
}

.acct-int-token-warn i {
    margin-right: 3px;
}

/* ── Status Badges ─────────────────────────────────────────────────── */

.acct-int-status {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.acct-int-status-connected {
    background: rgba(40, 167, 69, 0.12);
    color: var(--success-color, #28a745);
}

.acct-int-status-disconnected {
    background: rgba(108, 117, 125, 0.12);
    color: var(--text-muted);
}

/* ── Details Panel ─────────────────────────────────────────────────── */

.acct-int-details {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
}

.acct-int-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.acct-int-details-header h4 {
    margin: 0;
    font-size: 1rem;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */

.acct-int-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 16px;
}

.acct-int-tab-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.acct-int-tab-btn:hover {
    color: var(--text-color);
}

.acct-int-tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.acct-int-tab-btn i {
    margin-right: 6px;
}

.acct-int-tab-pane {
    min-height: 120px;
}

/* ── Table ─────────────────────────────────────────────────────────── */

.acct-int-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.acct-int-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.acct-int-table th {
    background: var(--surface-color, rgba(0, 0, 0, 0.03));
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.acct-int-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.acct-int-table tbody tr:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

.acct-int-cell-actions {
    white-space: nowrap;
}

/* ── Entity & Severity Badges ──────────────────────────────────────── */

.acct-int-entity-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--primary-color-alpha, rgba(13, 110, 253, 0.1));
    color: var(--primary-color);
}

.acct-int-severity-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.acct-int-severity-error {
    background: rgba(220, 53, 69, 0.12);
    color: var(--danger-color, #dc3545);
}

.acct-int-severity-warning {
    background: rgba(255, 193, 7, 0.15);
    color: var(--warning-color, #f0ad4e);
}

.acct-int-severity-resolved {
    background: rgba(40, 167, 69, 0.12);
    color: var(--success-color, #28a745);
}

/* ── Transform / Code ──────────────────────────────────────────────── */

.acct-int-transform {
    font-size: 0.78rem;
    background: var(--surface-color, rgba(0, 0, 0, 0.04));
    padding: 1px 6px;
    border-radius: 3px;
}

.acct-int-text-muted {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.acct-int-text-success {
    color: var(--success-color, #28a745);
    font-weight: 600;
}

.acct-int-text-danger {
    color: var(--danger-color, #dc3545);
    font-weight: 600;
}

/* ── Sync Cards ────────────────────────────────────────────────────── */

.acct-int-sync-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.acct-int-sync-card {
    background: var(--surface-color, rgba(0, 0, 0, 0.03));
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.acct-int-sync-card-icon {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.acct-int-sync-card-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.acct-int-sync-card-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.acct-int-last-sync {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.acct-int-last-sync i {
    margin-right: 4px;
}

.acct-int-sync-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.acct-int-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--text-color);
}

.acct-int-section-title i {
    margin-right: 6px;
    color: var(--text-muted);
}

/* ── Mapping Actions ───────────────────────────────────────────────── */

.acct-int-mapping-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* ── Error Message Column ──────────────────────────────────────────── */

.acct-int-error-msg {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Connect Info Box ──────────────────────────────────────────────── */

.acct-int-connect-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--info-bg, rgba(13, 110, 253, 0.06));
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.acct-int-connect-info i {
    color: var(--info-color, #0d6efd);
    margin-top: 2px;
    flex-shrink: 0;
}

.acct-int-connect-info p {
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .acct-int-provider-grid {
        grid-template-columns: 1fr;
    }

    .acct-int-sync-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .acct-int-table {
        font-size: 0.8rem;
    }

    .acct-int-table th,
    .acct-int-table td {
        padding: 6px 8px;
    }

    .acct-int-tabs {
        overflow-x: auto;
    }

    .acct-int-error-msg {
        max-width: 160px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Sprint COMP-3: SOC 2 Compliance Controls
   ══════════════════════════════════════════════════════════════════════ */

/* Loading & Empty States */
.soc2-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.95rem;
}

.soc2-loading i {
    margin-right: 8px;
}

.soc2-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary, #6b7280);
}

.soc2-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
    display: block;
}

.soc2-empty p {
    margin: 4px 0;
}

.soc2-empty-hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Section Header */
.soc2-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.soc2-section-header h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.soc2-section-header h4 i {
    margin-right: 8px;
    color: var(--text-secondary, #6b7280);
}

/* Dashboard Metrics Grid */
.soc2-dashboard {
    padding: 4px;
}

.soc2-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.soc2-metric-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    transition: box-shadow 0.2s;
}

.soc2-metric-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.soc2-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.2rem;
}

.soc2-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    line-height: 1.2;
}

.soc2-metric-label {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
}

/* Dashboard Row (two-panel layout) */
.soc2-dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.soc2-dashboard-panel {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 20px;
}

.soc2-dashboard-panel h4 {
    margin: 0 0 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.soc2-dashboard-panel h4 i {
    margin-right: 6px;
    color: var(--text-secondary, #6b7280);
}

.soc2-dashboard-panel-full {
    grid-column: 1 / -1;
}

/* Breakdown Bars */
.soc2-breakdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.soc2-breakdown-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 110px;
    font-size: 0.85rem;
    color: var(--text-primary, #1f2937);
}

.soc2-breakdown-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.soc2-breakdown-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}

.soc2-breakdown-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.soc2-breakdown-count {
    min-width: 30px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

/* Completion Ring */
.soc2-completion-ring-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: center;
    padding: 10px 0;
}

.soc2-completion-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.soc2-completion-ring svg {
    width: 100%;
    height: 100%;
}

.soc2-completion-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
}

.soc2-completion-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
}

.soc2-completion-stats strong {
    color: var(--text-primary, #1f2937);
    margin-right: 4px;
}

/* Table */
.soc2-table-wrap {
    overflow-x: auto;
}

.soc2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.soc2-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.soc2-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-primary, #1f2937);
}

.soc2-table tbody tr:hover {
    background: var(--bg-hover, #f9fafb);
}

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

.soc2-cell-date {
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
}

.soc2-cell-actions {
    white-space: nowrap;
}

/* Classification Badges */
.soc2-classification-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.soc2-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.soc2-badge-pii {
    background: #e67e2220;
    color: #e67e22;
}

.soc2-badge-restricted {
    background: #e74c3c20;
    color: #e74c3c;
}

/* Status Badge */
.soc2-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Access Review Cards */
.soc2-review-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.soc2-review-card {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 18px 20px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.soc2-review-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-color, #3b82f6);
}

.soc2-review-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.soc2-review-card-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.soc2-review-card-meta {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--text-secondary, #6b7280);
}

.soc2-review-card-meta i {
    margin-right: 4px;
}

.soc2-review-card-summary {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Report Detail */
.soc2-report-detail {
    padding: 4px 0;
}

.soc2-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.soc2-detail-header h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.soc2-detail-actions {
    flex-shrink: 0;
}

.soc2-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: 8px;
}

.soc2-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.soc2-detail-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary, #6b7280);
    font-weight: 600;
}

.soc2-detail-section {
    margin-bottom: 20px;
}

.soc2-detail-section h5 {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.soc2-detail-section h5 i {
    margin-right: 6px;
    color: var(--text-secondary, #6b7280);
}

.soc2-detail-section p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary, #1f2937);
}

/* Findings */
.soc2-findings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.soc2-finding-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
}

.soc2-finding-severity {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.soc2-severity-critical {
    background: #e74c3c20;
    color: #e74c3c;
}

.soc2-severity-high {
    background: #e67e2220;
    color: #e67e22;
}

.soc2-severity-medium {
    background: #f39c1220;
    color: #f39c12;
}

.soc2-severity-low {
    background: #3498db20;
    color: #3498db;
}

.soc2-severity-info {
    background: #95a5a620;
    color: #636e72;
}

.soc2-finding-text {
    font-size: 0.87rem;
    color: var(--text-primary, #1f2937);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .soc2-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .soc2-dashboard-row {
        grid-template-columns: 1fr;
    }

    .soc2-review-cards {
        grid-template-columns: 1fr;
    }

    .soc2-detail-header {
        flex-direction: column;
    }

    .soc2-completion-ring-wrap {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Sprint INT-4: Communication & Calendar Integrations
   ══════════════════════════════════════════════════════════════════════ */

/* Provider Cards */
.comms-provider-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    background: var(--card-bg, var(--surface-bg, #fff));
    transition: border-color 0.2s;
}

.comms-provider-card.comms-connected {
    border-left: 4px solid var(--success-color, #22c55e);
}

.comms-provider-card.comms-disconnected {
    border-left: 4px solid var(--text-muted, #94a3b8);
    opacity: 0.85;
}

.comms-provider-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.comms-provider-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

/* Provider-specific icon colors */
.comms-provider-slack .comms-provider-icon { background: #4a154b; }
.comms-provider-teams .comms-provider-icon { background: #464eb8; }
.comms-provider-google .comms-provider-icon { background: #4285f4; }
.comms-provider-outlook .comms-provider-icon { background: #0078d4; }

.comms-provider-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.comms-provider-desc {
    color: var(--text-muted, #64748b);
    font-size: 13px;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

/* Status Badges */
.comms-status-badge {
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comms-status-connected {
    color: var(--success-color, #22c55e);
}

.comms-status-disconnected {
    color: var(--text-muted, #94a3b8);
}

/* Provider Details */
.comms-provider-details {
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--surface-bg, rgba(0,0,0,0.02));
    border-radius: 6px;
}

.comms-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary, #475569);
}

.comms-detail-label {
    font-weight: 500;
    color: var(--text-muted, #64748b);
    min-width: 100px;
}

/* Provider Actions */
.comms-provider-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Calendar Grid (side by side) */
.comms-calendar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .comms-calendar-grid {
        grid-template-columns: 1fr;
    }
}

/* Calendar provider badges in mappings table */
.comms-provider-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.comms-provider-badge-googlecalendar {
    background: rgba(66, 133, 244, 0.12);
    color: #4285f4;
}

.comms-provider-badge-outlookcalendar {
    background: rgba(0, 120, 212, 0.12);
    color: #0078d4;
}

/* Empty state */
.comms-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted, #64748b);
}

.comms-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.comms-empty p {
    margin: 4px 0;
}

.comms-empty-hint {
    font-size: 12px;
    opacity: 0.7;
}

/* Calendar Mappings Table */
.cal-sync-table-wrap {
    overflow-x: auto;
}

.cal-sync-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cal-sync-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    border-bottom: 2px solid var(--border-color);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cal-sync-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.cal-sync-table tbody tr:hover {
    background: var(--hover-bg, rgba(0,0,0,0.02));
}

.cal-sync-event-id {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    background: var(--surface-bg, rgba(0,0,0,0.04));
    padding: 2px 6px;
    border-radius: 3px;
}

/* Section spacing within comms-calendar-section */
#comms-slack-section,
#comms-teams-section,
#cal-sync-section {
    margin-bottom: 28px;
}

#comms-slack-section h3,
#comms-teams-section h3,
#cal-sync-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text-primary);
}

/* ── Coming Soon Badge ─────────────────────────────────────────── */
.coming-soon-badge {
    display: inline-block;
    background: #f59e0b;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
    letter-spacing: 0.3px;
}