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

        :root {
            /* Professional Dark Theme Colors */
            --bg-primary: #0a0f1a;
            --bg-secondary: #111827;
            --bg-tertiary: #1f2937;
            --bg-elevated: #1a2332;
            --text-primary: #f8fafc;
            --text-secondary: #cbd5e1;
            --text-muted: #64748b;
            --accent-primary: #22d3ee;
            --accent-secondary: #8b5cf6;
            --accent-success: #34d399;
            --accent-warning: #fbbf24;
            --accent-critical: #f87171;
            --accent-info: #60a5fa;
            --border: rgba(255, 255, 255, 0.08);
            --border-hover: rgba(255, 255, 255, 0.15);

            /* Glow effects */
            --glow-primary: rgba(34, 211, 238, 0.15);
            --glow-success: rgba(52, 211, 153, 0.15);
            --glow-warning: rgba(251, 191, 36, 0.15);
            --glow-critical: rgba(248, 113, 113, 0.15);

            /* Legacy mappings for compatibility */
            --primary: #22d3ee;
            --primary-dark: #06b6d4;
            --secondary: #8b5cf6;
            --bg: #0a0f1a;
            --surface: #111827;
            --text: #f8fafc;
            --success: #34d399;
            --warning: #fbbf24;
            --danger: #f87171;

            /* Status colors */
            --status-bidding: #3b82f6;
            --status-awarded: #34d399;
            --status-in-progress: #fbbf24;
            --status-on-hold: #f59e0b;
            --status-complete: #10b981;
            --status-closed-lost: #6b7280;

            /* Sidebar dimensions */
            --sidebar-width: 280px;

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
            --shadow-glow: 0 0 20px var(--glow-primary);

            /* Transitions */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

            /* Border radius */
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 14px;
            --radius-xl: 20px;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
        }

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

        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }

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

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        /* Selection styling */
        ::selection {
            background: rgba(34, 211, 238, 0.3);
            color: var(--text-primary);
        }

        /* Focus ring styling */
        :focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }

        /* Header - Hidden, replaced by sidebar */
        header {
            display: none;
        }

        .header-content {
            display: none;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            text-decoration: none;
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            background: var(--accent-primary);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--bg-primary);
            font-weight: 700;
            font-size: 0.875rem;
        }

        .header-actions {
            display: none;
        }

        /* ============================================
           NEW SIDEBAR NAVIGATION
           ============================================ */
        .app-layout {
            display: flex;
            min-height: 100vh;
        }

        .nav-sidebar {
            width: var(--sidebar-width);
            background: linear-gradient(180deg, #0f1629 0%, #111827 100%);
            border-right: 1px solid var(--border);
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            z-index: 100;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
        }

        .nav-sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .nav-sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .nav-sidebar::-webkit-scrollbar-thumb {
            background: var(--bg-tertiary);
            border-radius: 3px;
        }

        .nav-sidebar::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        .nav-sidebar-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .nav-sidebar-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.25rem;
        }

        .nav-sidebar-logo-icon {
            font-size: 1.5rem;
        }

        .nav-sidebar-logo-text {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .nav-sidebar-tagline {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-left: 2.25rem;
        }

        /* Trade Scope Badge */
        .trade-scope-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.25rem 0.625rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            border: 1px solid;
            margin-top: 0.5rem;
            margin-left: 2.25rem;
        }

        .trade-scope-badge.gc {
            background: rgba(34, 211, 238, 0.15);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        .trade-scope-badge.sub {
            border-width: 1px;
        }

        .trade-scope-badge .trade-icon {
            font-size: 0.875rem;
        }

        .trade-scope-badge .trade-label {
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        .trade-access-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: var(--bg-tertiary);
            border-radius: 8px;
            margin: 0.75rem 1.5rem;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

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

        /* Project Selector Dropdown */
        .project-selector {
            padding: 0.75rem 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .project-selector-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .project-selector-btn:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-primary);
        }

        .project-selector-arrow {
            color: var(--text-muted);
            transition: transform 0.2s;
        }

        .project-selector-btn.open .project-selector-arrow {
            transform: rotate(180deg);
        }

        .project-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-top: 0.5rem;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            z-index: 200;
            display: none;
        }

        .project-dropdown.open {
            display: block;
        }

        .project-dropdown-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background 0.2s;
        }

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

        .project-dropdown-item:hover {
            background: var(--bg-tertiary);
        }

        .project-dropdown-item.active {
            background: rgba(6, 182, 212, 0.1);
        }

        .project-dropdown-item.active::before {
            content: "✓";
            margin-right: 0.5rem;
            color: var(--accent-primary);
        }

        .project-dropdown-name {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.875rem;
        }

        .project-dropdown-address {
            color: var(--text-muted);
            font-size: 0.75rem;
            margin-top: 0.125rem;
        }

        .project-dropdown-actions {
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .project-dropdown-action {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            color: var(--text-secondary);
            font-size: 0.875rem;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .project-dropdown-action:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        /* Link Project Dropdown (in Client Modal) */
        .link-project-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            width: 320px;
            max-height: 300px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .link-project-dropdown.active {
            display: flex;
        }

        .link-project-search {
            position: sticky;
            top: 0;
            padding: 0.75rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
        }

        .link-project-search input {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 0.875rem;
        }

        .link-project-search input:focus {
            outline: none;
            border-color: var(--accent-primary);
        }

        .link-project-list {
            overflow-y: auto;
            flex: 1;
        }

        .link-project-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background 0.15s;
        }

        .link-project-item:hover {
            background: var(--bg-tertiary);
        }

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

        .link-project-item-info {
            flex: 1;
            min-width: 0;
        }

        .link-project-item-name {
            font-weight: 500;
            font-size: 0.875rem;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .link-project-item-address {
            font-size: 0.75rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .link-project-empty {
            padding: 2rem 1rem;
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        /* Navigation Sections */
        .nav-section {
            padding: 1rem 0;
        }

        .nav-section-title {
            padding: 0 1.5rem;
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #64748B;
            margin-bottom: 0.5rem;
        }

        .nav-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.625rem 1.5rem;
            color: var(--text-secondary);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-base);
            text-decoration: none;
            position: relative;
            margin: 2px 8px;
            border-radius: var(--radius-sm);
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }

        .nav-item.active {
            background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(34, 211, 238, 0.05));
            color: var(--text-primary);
            border-right: none;
        }

        .nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background: var(--accent-primary);
            border-radius: 0 2px 2px 0;
            box-shadow: 0 0 8px var(--accent-primary);
        }

        .nav-item-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .nav-item-icon {
            width: 20px;
            text-align: center;
            font-size: 1rem;
            color: #94A3B8;
        }

        .nav-item:hover .nav-item-icon,
        .nav-item.active .nav-item-icon {
            color: inherit;
        }

        .nav-item-badge {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
            padding: 0.2rem 0.6rem;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            transition: all var(--transition-fast);
        }

        .nav-item-badge.success {
            background: rgba(52, 211, 153, 0.15);
            color: var(--accent-success);
            box-shadow: 0 0 8px rgba(52, 211, 153, 0.2);
        }

        .nav-item-badge.warning {
            background: rgba(251, 191, 36, 0.15);
            color: var(--accent-warning);
            box-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
        }

        .nav-item-badge.primary {
            background: rgba(34, 211, 238, 0.15);
            color: var(--accent-primary);
            box-shadow: 0 0 8px rgba(34, 211, 238, 0.2);
        }

        .nav-item-badge.danger {
            background: rgba(248, 113, 113, 0.15);
            color: var(--accent-critical);
            box-shadow: 0 0 8px rgba(248, 113, 113, 0.2);
        }

        .nav-add-trade {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.5rem;
            color: var(--text-muted);
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .nav-add-trade:hover {
            color: var(--accent-primary);
        }

        /* Collapsible Nav Subsections */
        .nav-subsection {
            margin-bottom: 0.25rem;
        }

        .nav-subsection-header {
            display: flex;
            align-items: center;
            padding: 0.5rem 1.5rem;
            cursor: pointer;
            transition: all 0.2s;
            gap: 0.5rem;
        }

        .nav-subsection-header:hover {
            background: #334155;
        }

        .nav-subsection-arrow {
            font-size: 0.625rem;
            color: #64748B;
            width: 12px;
            transition: transform 0.2s;
        }

        .nav-subsection-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: #94A3B8;
            flex: 1;
        }

        .nav-subsection-count {
            font-size: 0.6875rem;
            color: #64748B;
            background: rgba(100, 116, 139, 0.2);
            padding: 0.125rem 0.5rem;
            border-radius: 10px;
        }

        .nav-subsection-items {
            margin-left: 0.75rem;
            border-left: 1px solid #334155;
        }

        .nav-subsection-items .nav-item {
            padding-left: 1.25rem;
            font-size: 0.8125rem;
        }

        .nav-subsection-items .nav-item .nav-item-icon {
            font-size: 0.875rem;
        }

        .nav-divider {
            height: 1px;
            background: var(--border);
            margin: 0.5rem 1.5rem;
        }

        /* Main Content Area */
        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            background: var(--bg-primary);
            min-height: 100vh;
        }

        .main-header {
            padding: 1.75rem 2rem;
            background: linear-gradient(180deg, var(--bg-secondary), rgba(17, 24, 39, 0.95));
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .main-header-left h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            letter-spacing: -0.01em;
        }

        .main-header-meta {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .main-header-meta span {
            margin-right: 0.5rem;
        }

        .main-header-meta span:not(:last-child)::after {
            content: "•";
            margin-left: 0.5rem;
            color: var(--text-muted);
            opacity: 0.5;
        }

        .main-body {
            padding: 2rem;
            animation: fadeIn 0.2s ease-out;
        }

        /* Mobile Navigation */
        .mobile-nav-toggle {
            display: none;
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 150;
            padding: 0.75rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            cursor: pointer;
        }

        .nav-sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 90;
        }

        @media (max-width: 768px) {
            .mobile-nav-toggle {
                display: block;
            }

            .nav-sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .nav-sidebar.open {
                transform: translateX(0);
            }

            .nav-sidebar-overlay.open {
                display: block;
            }

            .main-content {
                margin-left: 0;
            }

            .main-header {
                padding-left: 4rem;
            }
        }

        @media (max-width: 1024px) and (min-width: 769px) {
            .nav-sidebar {
                width: 240px;
            }
            .main-content {
                margin-left: 240px;
            }
        }

        /* Buttons */
        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-md);
            border: 1px solid transparent;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            justify-content: center;
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.5s;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--accent-primary), var(--primary-dark));
            color: #0a0f1a;
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-secondary);
            border-color: var(--border);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
            border-color: var(--border-hover);
            transform: translateY(-1px);
        }

        .btn-success {
            background: linear-gradient(135deg, var(--accent-success), #059669);
            color: #0a0f1a;
            box-shadow: 0 2px 8px rgba(52, 211, 153, 0.25);
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4);
        }

        .btn-danger {
            background: linear-gradient(135deg, var(--accent-critical), #dc2626);
            color: white;
            box-shadow: 0 2px 8px rgba(248, 113, 113, 0.25);
        }

        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(248, 113, 113, 0.4);
        }

        .btn-ghost {
            background: transparent;
            color: var(--text-muted);
            border: none;
        }

        .btn-ghost:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .btn-sm {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* Dashboard View */
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .dashboard-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text);
        }

        /* Filter Tabs */
        .filter-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .filter-tab {
            padding: 0.5rem 1.25rem;
            border-radius: 25px;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .filter-tab:hover {
            border-color: var(--border-hover);
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-1px);
        }

        .filter-tab.active {
            background: linear-gradient(135deg, var(--accent-primary), var(--primary-dark));
            border-color: transparent;
            color: #0a0f1a;
            box-shadow: 0 2px 12px rgba(34, 211, 238, 0.3);
        }

        .filter-tab .count {
            display: inline-block;
            margin-left: 0.5rem;
            padding: 0.125rem 0.5rem;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        .filter-tab.active .count {
            background: rgba(0, 0, 0, 0.2);
        }

        /* Dashboard Tabs */
        .dashboard-tabs {
            display: flex;
            gap: 0.5rem;
            padding: 1rem 2rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
        }

        .dashboard-tab {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-base);
            white-space: nowrap;
        }

        .dashboard-tab:hover {
            border-color: var(--border-hover);
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.03);
        }

        .dashboard-tab.active {
            background: linear-gradient(135deg, var(--accent-primary), var(--primary-dark));
            border-color: transparent;
            color: #0a0f1a;
        }

        .dashboard-tab-icon {
            font-size: 1rem;
        }

        .dashboard-tab-badge {
            background: rgba(0, 0, 0, 0.2);
            padding: 0.125rem 0.5rem;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        /* Dashboard Status Grid */
        .dashboard-status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .status-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .status-card:hover {
            border-color: var(--border-hover);
            transform: translateY(-2px);
        }

        .status-card.bidding { border-left: 3px solid #60a5fa; }
        .status-card.in-progress { border-left: 3px solid var(--accent-primary); }
        .status-card.complete { border-left: 3px solid var(--accent-success); }
        .status-card.on-hold { border-left: 3px solid var(--accent-warning); }

        .status-card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
        .status-card-count { font-size: 2rem; font-weight: 700; color: var(--text-primary); }
        .status-card-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }

        /* Dashboard Summary Row */
        .dashboard-summary-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .dashboard-summary-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
        }

        .summary-card-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .budget-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .budget-summary-item {
            text-align: center;
            padding: 0.75rem;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
        }

        .budget-summary-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .budget-summary-item.positive .budget-summary-value { color: var(--accent-success); }
        .budget-summary-item.negative .budget-summary-value { color: var(--accent-critical); }

        .budget-summary-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        /* Deadlines List */
        .deadlines-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .deadline-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background var(--transition-base);
        }

        .deadline-item:hover { background: var(--border-hover); }
        .deadline-icon { font-size: 1.25rem; }
        .deadline-info { flex: 1; }
        .deadline-name { font-weight: 500; color: var(--text-primary); }
        .deadline-meta { font-size: 0.75rem; color: var(--text-muted); }

        /* Dashboard Filters */
        .dashboard-filters {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .filter-group label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        /* Dashboard Tasks Grid */
        .dashboard-tasks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .task-column {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .task-column-header {
            padding: 1rem;
            font-size: 0.875rem;
            font-weight: 600;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-primary);
        }

        .task-column-header .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .task-column-header.in-progress .status-dot { background: var(--accent-primary); }
        .task-column-header.pending .status-dot { background: var(--text-muted); }
        .task-column-header.blocked .status-dot { background: var(--accent-critical); }
        .task-column-header.completed .status-dot { background: var(--accent-success); }

        .task-column-content {
            padding: 1rem;
            max-height: 400px;
            overflow-y: auto;
        }

        /* Global Task Card */
        .global-task-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.875rem;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .global-task-card:hover {
            border-color: var(--accent-primary);
            transform: translateX(4px);
        }

        .global-task-card.overdue {
            border-color: rgba(248, 113, 113, 0.3);
        }

        .global-task-header {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .trade-icon { font-size: 1.25rem; }

        .global-task-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.125rem;
        }

        .global-task-project {
            font-size: 0.75rem;
            color: var(--accent-primary);
        }

        .global-task-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
            font-size: 0.7rem;
        }

        .task-trade-badge, .inspection-badge, .milestone-badge {
            padding: 0.125rem 0.5rem;
            border-radius: 4px;
            background: var(--bg-secondary);
            color: var(--text-muted);
        }

        .task-date.overdue { color: var(--accent-critical); }

        /* Budget Totals Grid */
        .budget-totals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .budget-total-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            text-align: center;
        }

        .budget-total-label {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

        .budget-total-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .budget-total-card.positive .budget-total-value { color: var(--accent-success); }
        .budget-total-card.negative .budget-total-value { color: var(--accent-critical); }

        /* Budget Table */
        .budget-table-container {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .section-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            padding: 1rem 1.5rem;
            margin: 0;
            border-bottom: 1px solid var(--border);
        }

        .budget-table { width: 100%; }

        .budget-table-header {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.5fr;
            padding: 1rem;
            background: var(--bg-tertiary);
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            border-bottom: 1px solid var(--border);
        }

        .budget-table-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.5fr;
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background var(--transition-base);
        }

        .budget-table-row:hover { background: var(--bg-tertiary); }
        .budget-table-row:last-child { border-bottom: none; }

        .budget-col { display: flex; align-items: center; }
        .budget-col.positive { color: var(--accent-success); }
        .budget-col.negative { color: var(--accent-critical); }

        .budget-col.project-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }

        .mini-progress-bar {
            flex: 1;
            height: 6px;
            background: var(--bg-primary);
            border-radius: 3px;
            overflow: hidden;
            margin-right: 0.5rem;
        }

        .mini-progress-fill {
            height: 100%;
            background: var(--accent-primary);
            border-radius: 3px;
        }

        .progress-percent { font-size: 0.8rem; color: var(--text-muted); }

        /* Global Calendar */
        .global-calendar-container {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border);
        }

        .calendar-month-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .calendar-day-headers {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            border-bottom: 1px solid var(--border);
        }

        .calendar-day-header {
            padding: 0.75rem;
            text-align: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .global-calendar-day {
            min-height: 100px;
            padding: 0.5rem;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            transition: background var(--transition-base);
        }

        .global-calendar-day:nth-child(7n) { border-right: none; }
        .global-calendar-day.empty { background: var(--bg-primary); }
        .global-calendar-day.today { background: rgba(34, 211, 238, 0.1); }

        .calendar-day-number {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .global-calendar-day.today .calendar-day-number {
            color: var(--accent-primary);
            font-weight: 700;
        }

        .calendar-day-events {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .global-calendar-event {
            font-size: 0.65rem;
            padding: 0.125rem 0.375rem;
            border-radius: 3px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .calendar-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            padding: 1rem;
            border-top: 1px solid var(--border);
            align-items: center;
        }

        .calendar-legend h4 {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0;
            margin-right: 0.5rem;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
        }

        .legend-name {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .empty-column {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .empty-deadlines {
            text-align: center;
            padding: 1.5rem 1rem;
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        /* No-Proceed Gates */
        .gates-section {
            margin-bottom: 2rem;
        }

        .gates-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .gates-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .gates-timeline {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.75rem;
            position: relative;
        }

        .gate-card {
            display: flex;
            flex-direction: column;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 0.6rem 0.8rem;
            transition: all var(--transition-base);
            cursor: pointer;
            margin-bottom: 0;
            min-width: 120px;
            max-width: 150px;
            flex: 1;
        }

        .gate-card:hover {
            border-color: var(--border-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .gate-card.passed {
            border-color: var(--accent-success);
        }

        .gate-card.blocked {
            border-color: var(--accent-critical);
        }

        .gate-card.in-progress {
            border-color: var(--accent-primary);
        }

        .gate-status-bar {
            width: 6px;
            flex-shrink: 0;
        }

        .gate-status-bar.pending { background: var(--text-muted); }
        .gate-status-bar.in-progress { background: var(--accent-primary); }
        .gate-status-bar.passed { background: var(--accent-success); }
        .gate-status-bar.blocked { background: var(--accent-critical); }

        .gate-content {
            flex: 1;
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .gate-icon {
            font-size: 1rem;
            display: inline;
        }

        .gate-info {
            flex: 1;
        }

        .gate-name {
            font-weight: 600;
            font-size: 0.8rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            line-height: 1.2;
        }

        .gate-description {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }

        .gate-requirements {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-size: 0.75rem;
        }

        .gate-requirement {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            background: var(--bg-tertiary);
            border-radius: 4px;
            color: var(--text-muted);
        }

        .gate-requirement.complete {
            background: rgba(74, 222, 128, 0.15);
            color: var(--accent-success);
        }

        .gate-requirement.failed {
            background: rgba(248, 113, 113, 0.15);
            color: var(--accent-critical);
        }

        .gate-progress {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.5rem;
            min-width: 100px;
        }

        .gate-percent {
            font-size: 1.25rem;
            font-weight: 700;
        }

        .gate-percent.pending { color: var(--text-muted); }
        .gate-percent.in-progress { color: var(--accent-primary); }
        .gate-percent.passed { color: var(--accent-success); }
        .gate-percent.blocked { color: var(--accent-critical); }

        .gate-status-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            font-weight: 600;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
        }

        .gate-status-label.pending {
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-muted);
        }

        .gate-status-label.in-progress {
            background: rgba(34, 211, 238, 0.15);
            color: var(--accent-primary);
        }

        .gate-status-label.passed {
            background: rgba(74, 222, 128, 0.15);
            color: var(--accent-success);
        }

        .gate-status-label.blocked {
            background: rgba(248, 113, 113, 0.15);
            color: var(--accent-critical);
        }

        .gate-blocker-warning {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: rgba(248, 113, 113, 0.1);
            border: 1px solid rgba(248, 113, 113, 0.3);
            border-radius: var(--radius-md);
            color: var(--accent-critical);
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }

        /* Gate Detail Modal */
        .gate-detail-section {
            margin-bottom: 1.5rem;
        }

        .gate-detail-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .evidence-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .evidence-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
        }

        .evidence-item.complete {
            border-color: var(--accent-success);
            background: rgba(74, 222, 128, 0.05);
        }

        .evidence-checkbox {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .evidence-checkbox.complete {
            background: var(--accent-success);
            border-color: var(--accent-success);
            color: white;
        }

        .evidence-info {
            flex: 1;
        }

        .evidence-label {
            font-weight: 500;
            color: var(--text-primary);
        }

        .evidence-status {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .evidence-action {
            display: flex;
            gap: 0.5rem;
        }

        /* Gate Status Badge (Modal Header) */
        .gate-status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .gate-status-badge.passed {
            background: rgba(74, 222, 128, 0.15);
            color: var(--accent-success);
            border: 1px solid rgba(74, 222, 128, 0.3);
        }

        .gate-status-badge.blocked {
            background: rgba(248, 113, 113, 0.15);
            color: var(--accent-critical);
            border: 1px solid rgba(248, 113, 113, 0.3);
        }

        .gate-status-badge.in-progress {
            background: rgba(34, 211, 238, 0.15);
            color: var(--accent-primary);
            border: 1px solid rgba(34, 211, 238, 0.3);
        }

        .gate-status-badge.pending {
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-muted);
            border: 1px solid rgba(148, 163, 184, 0.3);
        }

        /* Gate Requirement Badge */
        .gate-requirement-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-muted);
        }

        .gate-requirement-badge.complete {
            background: rgba(74, 222, 128, 0.15);
            color: var(--accent-success);
        }

        .gate-requirement-badge.failed {
            background: rgba(248, 113, 113, 0.15);
            color: var(--accent-critical);
        }

        /* Gate Progress Bar */
        .gate-progress-bar {
            background: var(--bg-tertiary);
            border-radius: 4px;
            overflow: hidden;
            height: 6px;
        }

        .gate-progress-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        /* Gate Card Simplified */
        .gate-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .gate-order {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-muted);
        }

        .gate-stats {
            display: flex;
            gap: 0.75rem;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.5rem;
        }

        .gate-blocked-reason {
            font-size: 0.7rem;
            color: var(--accent-critical);
            margin-top: 0.5rem;
            padding: 0.25rem 0.5rem;
            background: rgba(248, 113, 113, 0.1);
            border-radius: 4px;
        }

        .gate-connector {
            width: 2px;
            height: 16px;
            background: var(--border);
            margin-left: 24px;
        }

        /* Cross-Trade Dependencies */
        .dependencies-section {
            margin-bottom: 2rem;
        }

        .dependency-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1rem 1.25rem;
            margin-bottom: 0.75rem;
            transition: all var(--transition-base);
        }

        .dependency-card.blocked {
            border-left: 4px solid var(--accent-critical);
            background: rgba(248, 113, 113, 0.03);
        }

        .dependency-card.warning {
            border-left: 4px solid var(--accent-warning);
            background: rgba(251, 191, 36, 0.03);
        }

        .dependency-card.passed {
            border-left: 4px solid var(--accent-success);
        }

        .dependency-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }

        .dependency-name {
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .dependency-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .dependency-badge.blocked {
            background: rgba(248, 113, 113, 0.15);
            color: var(--accent-critical);
        }

        .dependency-badge.warning {
            background: rgba(251, 191, 36, 0.15);
            color: var(--accent-warning);
        }

        .dependency-badge.passed {
            background: rgba(74, 222, 128, 0.15);
            color: var(--accent-success);
        }

        .dependency-requirements {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .dependency-req {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0.75rem;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            font-size: 0.85rem;
        }

        .dependency-req-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .dependency-req-icon.met {
            background: rgba(74, 222, 128, 0.2);
            color: var(--accent-success);
        }

        .dependency-req-icon.unmet {
            background: rgba(248, 113, 113, 0.2);
            color: var(--accent-critical);
        }

        .dependency-req-text {
            flex: 1;
            color: var(--text-secondary);
        }

        .dependency-req-status {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* Trade Blocker Warning Banner */
        .trade-blocker-banner {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 1rem;
            background: rgba(248, 113, 113, 0.1);
            border: 1px solid rgba(248, 113, 113, 0.3);
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
        }

        .trade-blocker-banner.warning {
            background: rgba(251, 191, 36, 0.1);
            border-color: rgba(251, 191, 36, 0.3);
        }

        .trade-blocker-icon {
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .trade-blocker-content {
            flex: 1;
        }

        .trade-blocker-title {
            font-weight: 600;
            color: var(--accent-critical);
            margin-bottom: 0.25rem;
        }

        .trade-blocker-banner.warning .trade-blocker-title {
            color: var(--accent-warning);
        }

        .trade-blocker-list {
            list-style: none;
            margin: 0.5rem 0 0 0;
            padding: 0;
            font-size: 0.85rem;
        }

        .trade-blocker-list li {
            color: var(--text-secondary);
            padding: 0.25rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .trade-blocker-list li::before {
            content: '•';
            color: var(--accent-critical);
        }

        .trade-blocker-banner.warning .trade-blocker-list li::before {
            color: var(--accent-warning);
        }

        /* ============ FIELD MODE ============ */
        /* Simplified view for on-site workers */

        .field-mode-container {
            position: fixed;
            inset: 0;
            background: var(--bg-primary);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .field-mode-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .field-mode-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .field-mode-subtitle {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .field-mode-exit {
            padding: 0.75rem 1.25rem;
            background: var(--bg-tertiary);
            border: none;
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-weight: 600;
            cursor: pointer;
            font-size: 1rem;
        }

        .field-mode-progress {
            padding: 1rem 1.5rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .field-mode-progress-bar {
            height: 8px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }

        .field-mode-progress-fill {
            height: 100%;
            background: var(--accent-success);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .field-mode-progress-text {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .field-mode-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            overflow-y: auto;
        }

        .field-mode-item {
            max-width: 600px;
            width: 100%;
            text-align: center;
        }

        .field-mode-item-number {
            font-size: 1rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .field-mode-item-text {
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.4;
            margin-bottom: 1.5rem;
        }

        .field-mode-item-section {
            font-size: 0.9rem;
            color: var(--accent-primary);
            padding: 0.5rem 1rem;
            background: rgba(34, 211, 238, 0.1);
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .field-mode-item-status {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 1rem;
            margin-top: 1rem;
        }

        .field-mode-item-status.pass {
            color: var(--accent-success);
        }

        .field-mode-item-status.fail {
            color: var(--accent-critical);
        }

        .field-mode-actions {
            padding: 1.5rem;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .field-mode-buttons {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .field-mode-btn {
            flex: 1;
            padding: 1.5rem 2rem;
            font-size: 1.25rem;
            font-weight: 700;
            border: none;
            border-radius: var(--radius-lg);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        .field-mode-btn:active {
            transform: scale(0.98);
        }

        .field-mode-btn.pass {
            background: var(--accent-success);
            color: white;
        }

        .field-mode-btn.pass:hover {
            background: #22c55e;
        }

        .field-mode-btn.fail {
            background: var(--accent-critical);
            color: white;
        }

        .field-mode-btn.fail:hover {
            background: #dc2626;
        }

        .field-mode-btn.skip {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .field-mode-nav {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
        }

        .field-mode-nav-btn {
            flex: 1;
            padding: 1rem;
            font-size: 1rem;
            font-weight: 600;
            border: 1px solid var(--border);
            background: var(--bg-primary);
            border-radius: var(--radius-md);
            cursor: pointer;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .field-mode-nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .field-mode-nav-btn:not(:disabled):hover {
            background: var(--bg-secondary);
        }

        /* Field Mode Trade Selection */
        .field-mode-trades {
            padding: 2rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .field-mode-trades-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            text-align: center;
            margin-bottom: 0.5rem;
        }

        .field-mode-trades-subtitle {
            font-size: 1rem;
            color: var(--text-muted);
            text-align: center;
            margin-bottom: 2rem;
        }

        .field-mode-trade-btn {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: 100%;
            padding: 1.25rem 1.5rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .field-mode-trade-btn:hover {
            border-color: var(--accent-primary);
            background: var(--bg-tertiary);
        }

        .field-mode-trade-icon {
            font-size: 2rem;
        }

        .field-mode-trade-info {
            flex: 1;
            text-align: left;
        }

        .field-mode-trade-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .field-mode-trade-progress {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .field-mode-trade-arrow {
            font-size: 1.25rem;
            color: var(--text-muted);
        }

        /* Field Mode Toggle Button */
        .field-mode-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            border: none;
            border-radius: var(--radius-md);
            color: white;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .field-mode-toggle:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
        }

        /* Completed overlay */
        .field-mode-complete {
            text-align: center;
            padding: 3rem;
        }

        .field-mode-complete-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        .field-mode-complete-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--accent-success);
            margin-bottom: 0.5rem;
        }

        .field-mode-complete-text {
            font-size: 1rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
        }

        /* Field Mode Bottom Navigation */
        .field-mode-bottom-nav {
            display: flex;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .field-mode-bottom-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.75rem;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            gap: 0.25rem;
        }

        .field-mode-bottom-nav-item.active {
            color: var(--accent-primary);
            background: rgba(34, 211, 238, 0.1);
        }

        .field-mode-bottom-nav-item:not(.active):hover {
            background: var(--bg-tertiary);
        }

        .field-mode-bottom-nav-icon {
            font-size: 1.5rem;
        }

        .field-mode-bottom-nav-label {
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* Field Mode Verification Details */
        .field-mode-verification {
            background: var(--bg-tertiary);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            margin-top: 1.5rem;
            text-align: left;
            max-width: 500px;
            width: 100%;
        }

        .field-mode-verification-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--accent-primary);
            margin-bottom: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .field-mode-verification-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .field-mode-verification-list li {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border);
            font-size: 1rem;
            color: var(--text-primary);
        }

        .field-mode-verification-list li:last-child {
            border-bottom: none;
        }

        .field-mode-verification-list li::before {
            content: '→';
            color: var(--accent-primary);
            font-weight: bold;
        }

        /* Field Mode Calendar */
        .field-mode-calendar {
            padding: 1rem;
            max-width: 600px;
            width: 100%;
        }

        .field-mode-calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .field-mode-calendar-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .field-mode-calendar-nav {
            display: flex;
            gap: 0.5rem;
        }

        .field-mode-calendar-nav button {
            padding: 0.75rem 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 1rem;
            cursor: pointer;
        }

        .field-mode-event-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent-primary);
            border-radius: var(--radius-md);
            padding: 1rem 1.25rem;
            margin-bottom: 0.75rem;
        }

        .field-mode-event-date {
            font-size: 0.85rem;
            color: var(--accent-primary);
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .field-mode-event-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .field-mode-event-trade {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* Field Mode Rooms */
        .field-mode-rooms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 1rem;
            padding: 1rem;
            max-width: 700px;
            width: 100%;
        }

        .field-mode-room-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .field-mode-room-card:hover {
            border-color: var(--accent-primary);
            transform: translateY(-2px);
        }

        .field-mode-room-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .field-mode-room-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .field-mode-room-type {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        /* Room Detail View */
        .field-mode-room-detail {
            padding: 1rem;
            max-width: 600px;
            width: 100%;
        }

        .field-mode-room-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .field-mode-room-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .field-mode-room-dims {
            font-size: 1rem;
            color: var(--text-muted);
        }

        .field-mode-finish-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            margin-bottom: 0.75rem;
        }

        .field-mode-finish-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .field-mode-finish-value {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .field-mode-finish-detail {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        /* ============================================
           MODE SELECTOR STYLES
           ============================================ */
        .mode-selector-fab {
            position: fixed;
            top: 16px;
            right: 100px;
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-md);
            cursor: pointer;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9001;
            transition: all var(--transition-base);
        }

        .mode-selector-fab:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-primary);
        }

        @media (max-width: 768px) {
            .mode-selector-fab {
                display: none; /* Hidden on mobile - use mode buttons in headers */
            }
        }

        .mode-selector-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .mode-selector-content {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 1.5rem;
            max-width: 400px;
            width: 100%;
            box-shadow: var(--shadow-xl);
        }

        .mode-selector-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            text-align: center;
        }

        .mode-selector-subtitle {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .mode-option {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-tertiary);
            border: 2px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .mode-option:hover {
            border-color: var(--accent-primary);
            background: rgba(34, 211, 238, 0.05);
        }

        .mode-option.active {
            border-color: var(--accent-primary);
            background: rgba(34, 211, 238, 0.1);
        }

        .mode-option-icon {
            font-size: 2rem;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
        }

        .mode-option-content {
            flex: 1;
        }

        .mode-option-name {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .mode-option-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .mode-option-check {
            color: var(--accent-primary);
            font-size: 1.25rem;
            opacity: 0;
        }

        .mode-option.active .mode-option-check {
            opacity: 1;
        }

        /* ============================================
           FIELD SUPER MODE STYLES
           ============================================ */
        .field-super-container {
            position: fixed;
            inset: 0;
            background: var(--bg-primary);
            display: flex;
            flex-direction: column;
            z-index: 9998;
            overflow: hidden;
        }

        .field-super-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
            position: relative;
        }

        .field-super-project-switcher {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            cursor: pointer;
            flex: 1;
            max-width: 70%;
            border: 1px solid var(--border);
        }

        .field-super-project-switcher:active {
            background: var(--bg-primary);
        }

        .field-super-project-name {
            font-weight: 600;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }

        .field-super-project-arrow {
            color: var(--text-muted);
            font-size: 0.75rem;
        }

        .field-super-mode-btn {
            min-width: 44px;
            height: 44px;
            padding: 0.25rem 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .field-super-mode-btn:active {
            background: var(--bg-primary);
        }

        .field-super-project-dropdown {
            position: absolute;
            top: 100%;
            left: 1rem;
            right: 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            z-index: 100;
            max-height: 60vh;
            overflow: hidden;
            margin-top: 0.5rem;
            display: flex;
            flex-direction: column;
        }

        .field-super-project-dropdown-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            color: var(--text-primary);
            flex-shrink: 0;
        }

        .field-super-project-dropdown-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.25rem;
            cursor: pointer;
            padding: 0.25rem;
        }

        .field-super-project-list {
            overflow-y: auto;
            flex: 1;
        }

        .field-super-project-item {
            display: flex;
            flex-direction: column;
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            position: relative;
        }

        .field-super-project-item:active {
            background: var(--bg-tertiary);
        }

        .field-super-project-item.active {
            background: rgba(34, 211, 238, 0.1);
            border-left: 3px solid var(--accent-primary);
        }

        .field-super-project-item-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            padding-right: 2rem;
        }

        .field-super-project-item-address {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .field-super-project-item-check {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent-primary);
            font-weight: bold;
        }

        .field-super-project-dropdown-footer {
            padding: 1rem;
            border-top: 1px solid var(--border);
            flex-shrink: 0;
        }

        .field-super-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            padding-bottom: 6rem;
        }

        .field-super-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            padding: 0.5rem;
            gap: 0.25rem;
            z-index: 100;
        }

        .field-super-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            padding: 0.75rem 0.5rem;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.65rem;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: all var(--transition-base);
        }

        .field-super-nav-item.active {
            background: rgba(34, 211, 238, 0.15);
            color: var(--accent-primary);
        }

        .field-super-nav-icon {
            font-size: 1.25rem;
        }

        .field-super-nav-label {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .field-super-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .field-super-section-header h2 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }

        .field-super-quick-action {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.25rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .field-super-quick-action:active {
            transform: scale(0.98);
            background: var(--bg-tertiary);
        }

        .field-super-quick-action-icon {
            font-size: 2rem;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            flex-shrink: 0;
        }

        .field-super-quick-action-content {
            flex: 1;
            min-width: 0;
        }

        .field-super-quick-action-title {
            font-weight: 700;
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .field-super-quick-action-subtitle {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        .field-super-quick-action-arrow {
            color: var(--text-muted);
            font-size: 1.25rem;
        }

        .field-super-trade-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: 0.75rem;
            cursor: pointer;
        }

        .field-super-trade-card:active {
            background: var(--bg-tertiary);
        }

        .field-super-trade-icon {
            font-size: 1.5rem;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
        }

        .field-super-trade-info {
            flex: 1;
            min-width: 0;
        }

        .field-super-trade-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .field-super-trade-progress {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .field-super-trade-progress-bar {
            flex: 1;
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: 3px;
            overflow: hidden;
        }

        .field-super-trade-progress-fill {
            height: 100%;
            background: var(--status-complete);
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .field-super-trade-progress-text {
            font-size: 0.75rem;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .field-super-empty {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-muted);
        }

        .field-super-empty-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .field-super-empty h3 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        /* Calendar View Styles */
        .calendar-view-toggle {
            display: flex;
            gap: 0.25rem;
            background: var(--bg-tertiary);
            padding: 0.25rem;
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
        }

        .calendar-view-btn {
            flex: 1;
            padding: 0.5rem 0.75rem;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .calendar-view-btn.active {
            background: var(--accent-primary);
            color: var(--bg-primary);
        }

        .calendar-view-btn:hover:not(.active) {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .calendar-day-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            margin-bottom: 1rem;
        }

        .calendar-nav-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .calendar-nav-btn:active {
            background: var(--bg-primary);
        }

        .calendar-current-date {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .calendar-task-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .calendar-task-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            border-left: 4px solid var(--accent-primary);
        }

        .calendar-task-item.overdue {
            border-left-color: var(--status-critical);
        }

        .calendar-task-item.completed {
            border-left-color: var(--status-complete);
            opacity: 0.7;
        }

        .calendar-task-time {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--accent-primary);
            min-width: 50px;
        }

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

        .calendar-task-title {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .calendar-task-meta {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .calendar-week-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .calendar-week-day {
            text-align: center;
            padding: 0.5rem;
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .calendar-week-day:active {
            background: var(--bg-tertiary);
        }

        .calendar-week-day.today {
            border: 2px solid var(--accent-primary);
        }

        .calendar-week-day.selected {
            background: var(--accent-primary);
            color: var(--bg-primary);
        }

        .calendar-week-day-name {
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 0.25rem;
        }

        .calendar-week-day-num {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .calendar-week-day.selected .calendar-week-day-name,
        .calendar-week-day.selected .calendar-week-day-num {
            color: var(--bg-primary);
        }

        .calendar-week-day-tasks {
            font-size: 0.7rem;
            color: var(--accent-primary);
            margin-top: 0.25rem;
        }

        .calendar-month-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            background: var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .calendar-month-header {
            background: var(--bg-tertiary);
            padding: 0.5rem;
            text-align: center;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .calendar-month-day {
            background: var(--bg-secondary);
            padding: 0.5rem;
            min-height: 50px;
            cursor: pointer;
        }

        .calendar-month-day:active {
            background: var(--bg-tertiary);
        }

        .calendar-month-day.other-month {
            opacity: 0.4;
        }

        .calendar-month-day.today {
            background: rgba(34, 211, 238, 0.1);
        }

        .calendar-month-day.selected {
            background: var(--accent-primary);
        }

        .calendar-month-day-num {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .calendar-month-day.selected .calendar-month-day-num {
            color: var(--bg-primary);
        }

        .calendar-month-day-dots {
            display: flex;
            gap: 2px;
            margin-top: 0.25rem;
            flex-wrap: wrap;
        }

        .calendar-month-day-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent-primary);
        }

        .calendar-year-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            padding: 0.5rem;
        }

        .calendar-year-month {
            padding: 1rem;
            text-align: center;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
        }

        .calendar-year-month.current {
            border-color: var(--accent-primary);
            background: rgba(34, 211, 238, 0.1);
        }

        .calendar-year-month-name {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
        }

        .calendar-year-month.current .calendar-year-month-name {
            color: var(--accent-primary);
        }

        .calendar-year-month-tasks {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        /* ============================================
           PROJECT MANAGER MODE STYLES
           ============================================ */
        .pm-container {
            position: fixed;
            inset: 0;
            background: var(--bg-primary);
            display: flex;
            flex-direction: column;
            z-index: 9998;
            overflow: hidden;
        }

        .pm-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .pm-project-info {
            flex: 1;
            min-width: 0;
        }

        .pm-project-name {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pm-project-address {
            font-size: 0.8rem;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pm-mode-btn {
            min-width: 44px;
            height: 44px;
            padding: 0.25rem 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-left: 1rem;
            color: var(--text-primary);
        }

        .pm-mode-btn:active {
            background: var(--bg-primary);
        }

        .pm-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            padding-bottom: 6rem;
        }

        .pm-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            padding: 0.5rem;
            gap: 0.25rem;
            z-index: 100;
        }

        .pm-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            padding: 0.75rem 0.5rem;
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 0.65rem;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: all var(--transition-base);
        }

        .pm-nav-item.active {
            background: rgba(139, 92, 246, 0.15);
            color: var(--accent-secondary);
        }

        .pm-nav-icon {
            font-size: 1.25rem;
        }

        .pm-nav-label {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .pm-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .pm-section-header h2 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }

        .pm-floor-section {
            margin-bottom: 1.5rem;
        }

        .pm-floor-header {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }

        .pm-rooms-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .pm-room-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1rem;
            cursor: pointer;
            transition: all var(--transition-base);
            text-align: center;
        }

        .pm-room-card:active {
            transform: scale(0.98);
            background: var(--bg-tertiary);
        }

        .pm-room-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .pm-room-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pm-room-sf {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }

        .pm-room-progress-bar {
            height: 4px;
            background: var(--bg-tertiary);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 0.25rem;
        }

        .pm-room-progress-fill {
            height: 100%;
            background: var(--accent-secondary);
            border-radius: 2px;
        }

        .pm-room-progress-text {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .pm-empty {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-muted);
        }

        .pm-empty-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .pm-empty h3 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        /* Mobile Room Modal (Bottom Sheet) */
        .mobile-room-modal {
            position: fixed;
            inset: 0;
            z-index: 10002;
        }

        .mobile-room-modal-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .mobile-room-modal-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            max-height: 90vh;
            background: var(--bg-primary);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            display: flex;
            flex-direction: column;
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        .mobile-room-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .mobile-room-modal-back {
            background: none;
            border: none;
            color: var(--accent-primary);
            font-size: 1rem;
            cursor: pointer;
            padding: 0.5rem;
        }

        .mobile-room-modal-title {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .mobile-room-modal-save {
            background: var(--accent-primary);
            border: none;
            color: var(--bg-primary);
            padding: 0.5rem 1rem;
            border-radius: var(--radius-md);
            font-weight: 600;
            cursor: pointer;
        }

        .mobile-room-modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }

        .mobile-finish-section {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .mobile-finish-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: var(--bg-tertiary);
            cursor: pointer;
        }

        .mobile-finish-title {
            font-weight: 600;
            color: var(--text-primary);
        }

        .mobile-finish-toggle {
            color: var(--text-muted);
            transition: transform 0.2s;
        }

        .mobile-finish-section.collapsed .mobile-finish-toggle {
            transform: rotate(-90deg);
        }

        .mobile-finish-section.collapsed .mobile-finish-body {
            display: none;
        }

        .mobile-finish-body {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .mobile-finish-field label {
            display: block;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .mobile-finish-field input {
            width: 100%;
            padding: 0.75rem;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            font-size: 1rem;
        }

        .mobile-finish-field input:focus {
            outline: none;
            border-color: var(--accent-primary);
        }

        /* AI Chat Styles */
        .chat-fab {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            border: none;
            box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
            cursor: pointer;
            font-size: 1.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9000;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .chat-fab:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 28px rgba(99, 102, 241, 0.5);
        }

        .chat-fab:active {
            transform: scale(0.95);
        }

        .chat-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9998;
        }

        .chat-window {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 85vh;
            max-height: 600px;
            background: var(--bg-primary);
            border-radius: 20px 20px 0 0;
            display: flex;
            flex-direction: column;
            z-index: 9999;
            box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
        }

        @media (min-width: 768px) {
            .chat-window {
                bottom: 24px;
                right: 24px;
                left: auto;
                width: 400px;
                height: 550px;
                max-height: 80vh;
                border-radius: 16px;
            }
        }

        .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            border-radius: 20px 20px 0 0;
        }

        @media (min-width: 768px) {
            .chat-header {
                border-radius: 16px 16px 0 0;
            }
        }

        .chat-header-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .chat-header-right {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .chat-remaining {
            font-size: 0.75rem;
            color: var(--text-muted);
            background: var(--bg-tertiary);
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
        }

        .chat-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.25rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
        }

        .chat-close:hover {
            color: var(--text-primary);
        }

        .chat-disclaimer {
            padding: 0.5rem 1rem;
            background: rgba(251, 191, 36, 0.1);
            border-bottom: 1px solid var(--border);
            font-size: 0.7rem;
            color: var(--accent-warning);
            text-align: center;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .chat-message {
            display: flex;
        }

        .chat-message.user {
            justify-content: flex-end;
        }

        .chat-message.assistant {
            justify-content: flex-start;
        }

        .chat-bubble {
            max-width: 85%;
            padding: 0.75rem 1rem;
            border-radius: 18px;
            font-size: 0.95rem;
            line-height: 1.4;
            word-wrap: break-word;
        }

        .chat-bubble.user {
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            color: white;
            border-bottom-right-radius: 4px;
        }

        .chat-bubble.assistant {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-bottom-left-radius: 4px;
        }

        .chat-bubble em {
            font-style: italic;
            opacity: 0.8;
        }

        .chat-typing {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 1rem 1.25rem;
        }

        .chat-typing span {
            width: 8px;
            height: 8px;
            background: var(--text-muted);
            border-radius: 50%;
            animation: chatTyping 1.4s infinite ease-in-out both;
        }

        .chat-typing span:nth-child(1) { animation-delay: -0.32s; }
        .chat-typing span:nth-child(2) { animation-delay: -0.16s; }
        .chat-typing span:nth-child(3) { animation-delay: 0s; }

        @keyframes chatTyping {
            0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }

        .chat-input-container {
            display: flex;
            gap: 0.5rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
        }

        .chat-input {
            flex: 1;
            padding: 0.875rem 1rem;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 24px;
            color: var(--text-primary);
            font-size: 1rem;
            outline: none;
        }

        .chat-input:focus {
            border-color: var(--accent-primary);
        }

        .chat-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .chat-send {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            border: none;
            color: white;
            font-size: 1.25rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s, opacity 0.2s;
        }

        .chat-send:hover:not(:disabled) {
            transform: scale(1.05);
        }

        .chat-send:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .chat-link {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin: 0.5rem 0.25rem 0 0;
            padding: 0.5rem 0.75rem;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .chat-link:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
        }

        .chat-link:active {
            transform: scale(0.98);
        }

        .chat-link-set {
            background: linear-gradient(135deg, var(--accent-success), #059669);
        }

        .chat-link-set:hover {
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
        }

        /* Field Mode Edit Modal */
        .field-edit-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
        }

        .field-edit-modal {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-height: 90vh;
            background: var(--bg-primary);
            border-radius: 20px 20px 0 0;
            z-index: 10001;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        @media (min-width: 768px) {
            .field-edit-modal {
                bottom: auto;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 450px;
                max-height: 80vh;
                border-radius: 16px;
            }
        }

        .field-edit-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .field-edit-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
        }

        .field-edit-body {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
        }

        .field-edit-group {
            margin-bottom: 1.25rem;
        }

        .field-edit-group label {
            display: block;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .field-edit-group input {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 1rem;
        }

        .field-edit-group input:focus {
            outline: none;
            border-color: var(--accent-primary);
        }

        .field-edit-group input::placeholder {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .field-edit-footer {
            display: flex;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
        }

        .field-edit-cancel {
            flex: 1;
            padding: 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
        }

        .field-edit-save {
            flex: 2;
            padding: 1rem;
            background: linear-gradient(135deg, var(--accent-success), #059669);
            border: none;
            border-radius: 10px;
            color: white;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
        }

        .field-edit-save:active {
            transform: scale(0.98);
        }

        /* Project Status Badges */
        .project-status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.3rem 0.75rem;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all var(--transition-fast);
        }

        .project-status-badge.bidding {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }

        .project-status-badge.awarded {
            background: rgba(52, 211, 153, 0.15);
            color: var(--accent-success);
            border: 1px solid rgba(52, 211, 153, 0.3);
        }

        .project-status-badge.in-progress {
            background: rgba(251, 191, 36, 0.15);
            color: var(--accent-warning);
            border: 1px solid rgba(251, 191, 36, 0.3);
        }

        .project-status-badge.on-hold {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .project-status-badge.complete {
            background: rgba(16, 185, 129, 0.15);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .project-status-badge.closed-lost {
            background: rgba(107, 114, 128, 0.15);
            color: #9ca3af;
            border: 1px solid rgba(107, 114, 128, 0.3);
        }

        /* Project Card Header with Status */
        .project-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        /* Alerts Badge on Project Card */
        .project-alerts-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger);
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .project-alerts-badge.warning {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }

        /* Project Card Stats */
        .project-card-stats {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .project-card-stat {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        /* Project Cards Grid */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 1.5rem;
        }

        .project-card {
            background: linear-gradient(145deg, var(--bg-secondary), var(--bg-elevated));
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            transition: all var(--transition-base);
            cursor: pointer;
            border: 1px solid var(--border);
            position: relative;
        }

        .project-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            opacity: 0;
            transition: opacity var(--transition-base);
        }

        .project-card:hover {
            border-color: rgba(34, 211, 238, 0.3);
            box-shadow: var(--shadow-xl), 0 0 30px var(--glow-primary);
            transform: translateY(-4px);
        }

        .project-card:hover::before {
            opacity: 1;
        }

        .project-card-body {
            padding: 1.5rem;
        }

        .project-card-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .project-card-address {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .project-card-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .jurisdiction-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.625rem;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .project-card-progress {
            margin-bottom: 1rem;
        }

        .progress-text {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }

        .progress-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }

        /* Trade Cards for Inspections View */
        .trade-card:hover {
            border-color: var(--border-hover) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .trade-card.analyzed:hover {
            border-color: rgba(34, 211, 238, 0.3) !important;
            box-shadow: var(--shadow-md), 0 0 15px var(--glow-primary);
        }

        .trade-card.analyzing {
            border-color: var(--accent-primary) !important;
            animation: pulse 2s ease-in-out infinite;
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            border-radius: 3px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .progress-bar-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: shimmer 2s infinite;
            background-size: 200% 100%;
        }

        .project-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            background: rgba(0,0,0,0.2);
            border-top: 1px solid var(--border);
        }

        .project-card-date {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            background: var(--bg-secondary);
            border-radius: 12px;
            border: 2px dashed var(--border);
        }

        .empty-state-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        .empty-state-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .empty-state-text {
            color: var(--text-muted);
            margin-bottom: 2rem;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all var(--transition-slow);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .modal {
            background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            transform: scale(0.9) translateY(20px);
            transition: all var(--transition-slow);
            box-shadow: var(--shadow-xl), 0 0 60px rgba(0, 0, 0, 0.5);
        }

        .modal-overlay.active .modal {
            transform: scale(1) translateY(0);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
            background: rgba(0, 0, 0, 0.2);
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .modal-close {
            width: 36px;
            height: 36px;
            border: none;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 1.25rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-fast);
        }

        .modal-close:hover {
            background: rgba(248, 113, 113, 0.15);
            color: var(--accent-critical);
            transform: rotate(90deg);
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1.5rem;
            border-top: 1px solid var(--border);
            background: rgba(0, 0, 0, 0.2);
        }

        /* ========================================
           JOB TYPE SELECTOR STYLES
           ======================================== */

        .job-type-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1rem;
        }

        .job-type-card {
            background: var(--bg-tertiary);
            border: 2px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s ease;
        }

        .job-type-card:hover {
            border-color: var(--text-muted);
            background: var(--bg-secondary);
        }

        .job-type-card.selected {
            border-color: var(--accent-primary);
            background: rgba(34, 211, 238, 0.1);
        }

        .job-type-card.service-job.selected {
            border-color: #3B82F6;
            background: rgba(59, 130, 246, 0.1);
        }

        .job-type-card.project-job.selected {
            border-color: #F97316;
            background: rgba(249, 115, 22, 0.1);
        }

        .job-type-icon {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
        }

        .job-type-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .job-type-desc {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        /* ========================================
           JOB CONTEXT HEADER STYLES
           ======================================== */

        .job-context-header {
            padding: 0.75rem 1rem;
            border-radius: var(--radius-md);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            font-weight: 600;
            background: var(--bg-tertiary);
        }

        .job-context-header.service {
            border-left: 4px solid #3B82F6;
            color: #3B82F6;
        }

        .job-context-header.project {
            border-left: 4px solid #F97316;
            color: #F97316;
        }

        .job-context-header.gc {
            border-left: 4px solid #22C55E;
            color: #22C55E;
        }

        .job-context-header .job-type-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .job-context-header.service .job-type-badge {
            background: rgba(59, 130, 246, 0.15);
            color: #3B82F6;
        }

        .job-context-header.project .job-type-badge {
            background: rgba(249, 115, 22, 0.15);
            color: #F97316;
        }

        .job-context-header.gc .job-type-badge {
            background: rgba(34, 197, 94, 0.15);
            color: #22C55E;
        }

        /* ========================================
           COCKPIT TAB STYLES
           ======================================== */

        .cockpit-tabs {
            display: flex;
            gap: 0.25rem;
            padding: 0 1rem;
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
            overflow-x: auto;
        }

        .cockpit-tab {
            padding: 0.875rem 1.25rem;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .cockpit-tab:hover {
            color: var(--text-primary);
        }

        .cockpit-tab.active {
            color: var(--accent-primary);
            border-bottom-color: var(--accent-primary);
        }

        .cockpit-content {
            padding: 1.5rem;
        }

        /* ========================================
           TASKS TAB STYLES
           ======================================== */

        .tasks-container {
            max-width: 800px;
        }

        .tasks-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .task-add-form {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .task-add-form input {
            flex: 1;
            padding: 0.75rem 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 0.875rem;
        }

        .task-add-form input:focus {
            outline: none;
            border-color: var(--accent-primary);
        }

        .task-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .task-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            transition: all 0.15s;
        }

        .task-item:hover {
            border-color: var(--border-hover);
        }

        .task-item.completed {
            opacity: 0.6;
        }

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

        .task-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            flex-shrink: 0;
        }

        .task-checkbox:hover {
            border-color: var(--accent-primary);
        }

        .task-checkbox.checked {
            background: var(--accent-success);
            border-color: var(--accent-success);
            color: white;
        }

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

        .task-title {
            font-size: 0.875rem;
            color: var(--text-primary);
        }

        .task-due {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        .task-due.overdue {
            color: var(--accent-critical);
        }

        .task-delete {
            opacity: 0;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.25rem;
            font-size: 1rem;
            transition: opacity 0.15s;
        }

        .task-item:hover .task-delete {
            opacity: 1;
        }

        .task-delete:hover {
            color: var(--accent-critical);
        }

        .tasks-empty {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-muted);
        }

        .tasks-empty-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* ========================================
           PLANS EMPTY STATE
           ======================================== */

        .plans-empty-state {
            text-align: center;
            padding: 4rem 2rem;
            background: var(--bg-tertiary);
            border-radius: var(--radius-lg);
            border: 2px dashed var(--border);
        }

        .plans-empty-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .plans-empty-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .plans-empty-hint {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
        }

        /* Room Finishes Tab Styles */
        .finish-tab {
            padding: 0.75rem 1rem;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .finish-tab:hover {
            color: var(--text-primary);
            background: var(--bg-secondary);
        }

        .finish-tab.active {
            color: var(--accent-primary);
            border-bottom-color: var(--accent-primary);
            background: var(--bg-secondary);
        }

        .finish-tab-content {
            display: none;
        }

        .finish-tab-content.active {
            display: block;
        }

        /* Defaults Tab Styles (Project Defaults Modal) */
        .defaults-tab {
            padding: 0.75rem 1rem;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .defaults-tab:hover {
            color: var(--text-primary);
            background: var(--bg-secondary);
        }

        .defaults-tab.active {
            color: var(--accent-success);
            border-bottom-color: var(--accent-success);
            background: var(--bg-secondary);
        }

        .defaults-tab-content {
            display: none;
        }

        .defaults-tab-content.active {
            display: block;
        }

        /* Inherited value indicator */
        .inherited-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.65rem;
            color: var(--accent-success);
            margin-left: 0.5rem;
        }

        .field-with-inheritance {
            position: relative;
        }

        .field-with-inheritance input.inherited,
        .field-with-inheritance select.inherited {
            border-color: var(--accent-success);
            background: linear-gradient(135deg, var(--bg-primary), #10B98108);
        }

        .use-default-btn {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.65rem;
            padding: 0.15rem 0.4rem;
            background: var(--accent-success);
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .finish-field-group {
            margin-bottom: 0.5rem;
        }

        .finish-field-group label {
            display: block;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 0.25rem;
        }

        .finish-field-group input,
        .finish-field-group select,
        .finish-field-group textarea {
            width: 100%;
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: 0.875rem;
            font-family: 'DM Sans', sans-serif;
        }

        .finish-field-group input:focus,
        .finish-field-group select:focus,
        .finish-field-group textarea:focus {
            outline: none;
            border-color: var(--accent-primary);
        }

        .finish-field-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        /* Print Spec Sheet Styles */
        @media print {
            body * {
                visibility: hidden;
            }
            #specSheetPrint, #specSheetPrint * {
                visibility: visible;
            }
            #specSheetPrint {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                background: white;
                color: black;
                padding: 20px;
            }
            .no-print {
                display: none !important;
            }
        }

        /* Form Fields */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            letter-spacing: 0.01em;
        }

        .form-label .required {
            color: var(--accent-critical);
        }

        .form-input, .form-select {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-family: 'DM Sans', sans-serif;
            font-size: 0.95rem;
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-primary);
            transition: all var(--transition-base);
        }

        .form-input:hover, .form-select:hover {
            border-color: var(--border-hover);
            background: rgba(255, 255, 255, 0.05);
        }

        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--glow-primary);
            background: rgba(255, 255, 255, 0.05);
        }

        .form-input::placeholder {
            color: var(--text-muted);
        }

        .form-select option {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        /* Jurisdiction Dropdown */
        .jurisdiction-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            max-height: 250px;
            overflow-y: auto;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            margin-top: 4px;
        }

        .jurisdiction-item {
            padding: 0.625rem 0.875rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }

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

        .jurisdiction-item:hover {
            background: var(--bg-tertiary);
        }

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

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

        .jurisdiction-county {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .jurisdiction-item:hover .jurisdiction-county {
            color: var(--text-secondary);
        }

        /* Status Radio Group */
        .status-radio-group {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .status-radio {
            cursor: pointer;
        }

        .status-radio input {
            display: none;
        }

        .status-radio-label {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            color: var(--text-muted);
            transition: all 0.2s;
        }

        .status-radio input:checked + .status-radio-label {
            border-color: transparent;
            color: white;
        }

        .status-radio input:checked + .status-radio-label.bidding {
            background: var(--status-bidding);
        }

        .status-radio input:checked + .status-radio-label.awarded {
            background: var(--status-awarded);
        }

        .status-radio input:checked + .status-radio-label.in-progress {
            background: var(--status-in-progress);
        }

        .status-radio-label:hover {
            border-color: var(--accent-primary);
        }

        /* Step Project Info (shown in modal step 2) */
        .step-project-info {
            background: var(--bg-tertiary);
            padding: 1rem 1.25rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            border-left: 4px solid var(--accent-primary);
        }

        .step-project-name {
            font-weight: 700;
            font-size: 1.125rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .step-project-address {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .analysis-progress-hint {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
            font-style: italic;
        }

        /* Upload Section in Modal */
        .upload-section {
            padding: 2rem;
            text-align: center;
            border: 2px dashed var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg-tertiary);
        }

        .upload-section:hover {
            border-color: var(--accent-primary);
            background: rgba(6,182,212,0.05);
        }

        .upload-section.dragging {
            border-color: var(--accent-primary);
            background: rgba(6,182,212,0.1);
        }

        .upload-section.has-file {
            border-color: var(--accent-success);
            background: rgba(16,185,129,0.1);
        }

        /* Project Type Selector Buttons */
        .project-type-btn {
            padding: 1.25rem;
            background: var(--bg-tertiary);
            border: 2px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        .project-type-btn:hover {
            border-color: var(--text-muted);
            background: var(--bg-secondary);
        }
        .project-type-btn.active {
            border-color: var(--accent-primary);
            background: rgba(6,182,212,0.1);
        }
        .project-type-btn.active div:first-child {
            transform: scale(1.1);
        }

        .upload-icon {
            font-size: 2.5rem;
            margin-bottom: 0.75rem;
        }

        .upload-text {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .upload-hint {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .file-info {
            margin-top: 1rem;
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border-radius: 8px;
            border: 1px solid var(--border);
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

        .file-size {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .remove-file {
            color: var(--accent-critical);
            cursor: pointer;
            font-size: 1.25rem;
        }

        /* Trade Checkboxes */
        .trade-selection {
            margin-top: 1.5rem;
        }

        .trade-selection-label {
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.75rem;
            display: block;
        }

        .trade-checkboxes {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
        }

        .trade-checkbox {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 0.875rem;
            background: var(--bg);
            border: 2px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .trade-checkbox:hover {
            border-color: var(--primary);
        }

        .trade-checkbox.selected {
            border-color: var(--primary);
            background: rgba(255,107,53,0.08);
        }

        .trade-checkbox input {
            width: 16px;
            height: 16px;
            accent-color: var(--primary);
            cursor: pointer;
        }

        .trade-checkbox label {
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text);
            flex: 1;
        }

        /* Analysis Progress */
        .analysis-progress {
            padding: 2rem;
            text-align: center;
        }

        .analysis-progress-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 1.5rem;
        }

        .progress-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1rem;
            background: var(--bg);
            border-radius: 8px;
            margin-bottom: 0.5rem;
            text-align: left;
        }

        .progress-item.pending {
            color: var(--text-muted);
        }

        .progress-item.analyzing {
            background: rgba(255,107,53,0.1);
            color: var(--primary);
        }

        .progress-item.complete {
            background: rgba(16,185,129,0.1);
            color: var(--success);
        }

        .progress-item.error {
            background: rgba(239,68,68,0.1);
            color: var(--danger);
        }

        .progress-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid currentColor;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

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

        .progress-check {
            font-size: 1.25rem;
        }

        /* Project Detail View */
        .project-view {
            display: flex;
            min-height: calc(100vh - 60px);
        }

        .project-sidebar {
            width: 280px;
            background: var(--surface);
            border-right: 1px solid var(--border);
            padding: 1.5rem;
            flex-shrink: 0;
            position: sticky;
            top: 60px;
            height: calc(100vh - 60px);
            overflow-y: auto;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
            cursor: pointer;
        }

        .back-link:hover {
            color: var(--primary);
        }

        .sidebar-project-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.25rem;
        }

        .sidebar-project-address {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 0.75rem;
        }

        .sidebar-jurisdiction {
            margin-bottom: 1.5rem;
        }

        .sidebar-section-title {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 0.75rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }

        .trade-list {
            list-style: none;
            margin-bottom: 1.5rem;
        }

        .trade-list-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 0.25rem;
        }

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

        .trade-list-item.active {
            background: rgba(255,107,53,0.1);
            color: var(--primary);
        }

        .trade-list-item.not-analyzed {
            color: var(--text-muted);
        }

        .trade-status-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .trade-status-icon.completed {
            background: var(--success);
            color: white;
        }

        .trade-status-icon.not-analyzed {
            border: 2px solid var(--border);
            background: transparent;
        }

        .trade-list-name {
            font-weight: 500;
            font-size: 0.9rem;
        }

        /* Main Content Area */
        .project-main {
            flex: 1;
            min-width: 0;
        }

        .trade-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
        }

        .trade-detail-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .trade-detail-number {
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
        }

        .trade-detail-name {
            font-size: 1.25rem;
            font-weight: 700;
        }

        .trade-detail-date {
            font-size: 0.875rem;
            opacity: 0.9;
        }

        .trade-detail-actions {
            display: flex;
            gap: 0.75rem;
        }

        .btn-light {
            background: rgba(255,255,255,0.2);
            color: white;
            border-color: transparent;
        }

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

        /* Tabs */
        .tabs {
            display: flex;
            gap: 0.25rem;
            border-bottom: 1px solid var(--border);
            padding: 0 2rem;
            background: var(--bg-secondary);
        }

        .tab {
            padding: 1rem 1.5rem;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            margin-bottom: -1px;
            font-weight: 500;
            color: var(--text-muted);
            transition: all var(--transition-base);
            position: relative;
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        }

        .tab:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.03);
        }

        .tab.active {
            color: var(--accent-primary);
            border-bottom-color: var(--accent-primary);
            background: rgba(34, 211, 238, 0.05);
        }

        .tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--accent-primary);
            box-shadow: 0 0 10px var(--accent-primary);
        }

        .tab-content {
            display: none;
            padding: 2rem;
            animation: fadeSlideIn 0.3s ease-out;
        }

        .tab-content.active {
            display: block;
        }

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

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

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        @keyframes glow {
            0%, 100% { box-shadow: 0 0 5px var(--accent-primary); }
            50% { box-shadow: 0 0 20px var(--accent-primary), 0 0 30px var(--glow-primary); }
        }

        /* Content Styles (preserved from original) */
        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
        }

        .summary-text {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-secondary);
        }

        .category {
            margin-bottom: 2rem;
        }

        .category-title {
            font-weight: 700;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--accent-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .category-title::before {
            content: '';
            width: 4px;
            height: 16px;
            background: var(--accent-primary);
            border-radius: 2px;
        }

        .item-grid {
            display: grid;
            gap: 0.75rem;
        }

        .item {
            display: grid;
            grid-template-columns: 2fr 3fr 1fr;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 8px;
            border-left: 3px solid var(--border);
            transition: all 0.2s;
        }

        .item:hover {
            border-left-color: var(--accent-primary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

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

        .item-spec {
            color: var(--text-muted);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9rem;
        }

        .item-qty {
            text-align: right;
            font-weight: 600;
            color: var(--accent-primary);
        }

        /* Checklist Items */
        .checklist-item {
            background: var(--bg-secondary);
            border-radius: 12px;
            border: 1px solid var(--border);
            margin-bottom: 1rem;
            overflow: hidden;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .checklist-item:hover {
            border-color: var(--accent-primary);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .checklist-item.expanded {
            border-color: var(--accent-primary);
        }

        .checklist-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            cursor: pointer;
            background: var(--bg-tertiary);
            transition: background 0.2s;
        }

        .checklist-header:hover {
            background: rgba(6,182,212,0.1);
        }

        .checklist-header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
        }

        .checklist-expand-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--accent-primary);
            color: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: 700;
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .checklist-item.expanded .checklist-expand-icon {
            transform: rotate(90deg);
        }

        .checklist-title {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            line-height: 1.4;
        }

        .status-badge {
            padding: 0.375rem 0.875rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            flex-shrink: 0;
        }

        .status-pass {
            background: rgba(16,185,129,0.15);
            color: var(--accent-success);
        }

        .status-verify {
            background: rgba(245,158,11,0.15);
            color: var(--accent-warning);
        }

        .status-fail {
            background: rgba(239,68,68,0.15);
            color: var(--accent-critical);
        }

        .checklist-body {
            display: none;
            padding: 0 1.5rem 1.5rem;
            border-top: 1px solid var(--border);
        }

        .checklist-item.expanded .checklist-body {
            display: block;
        }

        .checklist-section {
            margin-top: 1.25rem;
        }

        .checklist-section-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 0.875rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .checklist-section-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
        }

        .checklist-section-content {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.6;
            padding-left: 1.75rem;
        }

        .checklist-section.red-flags {
            background: rgba(239,68,68,0.1);
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1.25rem;
            border-left: 3px solid var(--accent-critical);
        }

        .checklist-section.red-flags .checklist-section-header {
            color: var(--accent-critical);
        }

        .checklist-section.red-flags .checklist-section-content {
            color: var(--accent-critical);
            font-weight: 500;
        }

        .checklist-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 1.25rem;
            padding-top: 1rem;
            border-top: 1px dashed var(--border);
        }

        .sheet-ref {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-radius: 6px;
            font-size: 0.75rem;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
        }

        /* Hardware Table */
        .hardware-table {
            width: 100%;
            border-collapse: collapse;
        }

        .hardware-table th {
            text-align: left;
            padding: 1rem;
            background: var(--bg-tertiary);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
        }

        .hardware-table td {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text-secondary);
        }

        .hardware-table tr:hover {
            background: var(--bg-tertiary);
        }

        .part-number {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            color: var(--accent-primary);
        }

        /* Stop Items */
        .stop-items {
            background: rgba(239,68,68,0.1);
            border: 1px solid var(--accent-critical);
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .stop-items-title {
            color: var(--accent-critical);
            font-weight: 700;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .stop-items-list {
            list-style: none;
            color: var(--text-secondary);
        }

        .stop-items-list li {
            padding: 0.5rem 0;
            padding-left: 1.5rem;
            position: relative;
        }

        .stop-items-list li::before {
            content: '\26a0';
            position: absolute;
            left: 0;
        }

        /* No Trade Selected State */
        .no-trade-selected {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-muted);
        }

        .no-trade-selected-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .no-trade-selected-text {
            font-size: 1.25rem;
            font-weight: 500;
        }

        /* Delete Project Button */
        .delete-project-btn {
            width: 100%;
            margin-top: 2rem;
            background: transparent;
            color: var(--accent-critical);
            border-color: var(--accent-critical);
        }

        .delete-project-btn:hover {
            background: rgba(239,68,68,0.1);
        }

        /* Spinner */
        .spinner {
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top-color: var(--accent-primary);
            border-right-color: var(--accent-secondary);
            width: 16px;
            height: 16px;
            animation: spin 0.8s linear infinite;
        }

        .spinner-lg {
            width: 32px;
            height: 32px;
            border-width: 3px;
        }

        .spinner-glow {
            box-shadow: 0 0 10px var(--glow-primary);
        }

        .hidden {
            display: none !important;
        }

        /* Utility animations */
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out;
        }

        .animate-slide-up {
            animation: fadeSlideIn 0.3s ease-out;
        }

        .animate-pulse {
            animation: pulse 2s ease-in-out infinite;
        }

        .animate-glow {
            animation: glow 2s ease-in-out infinite;
        }

        /* Utility classes */
        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--border);
        }

        .gradient-text {
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hover-lift {
            transition: transform var(--transition-base), box-shadow var(--transition-base);
        }

        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .hover-glow:hover {
            box-shadow: 0 0 20px var(--glow-primary);
        }

        /* Takeoff Pricing Table Styles */
        .takeoff-category {
            margin-bottom: 2rem;
        }

        .takeoff-category-header {
            font-weight: 700;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--accent-primary);
            margin-bottom: 0.75rem;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--accent-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .takeoff-category-header::before {
            content: '';
            width: 4px;
            height: 16px;
            background: var(--accent-primary);
            border-radius: 2px;
        }

        .takeoff-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            font-size: 0.9375rem;
        }

        .takeoff-table thead {
            background: var(--bg-tertiary);
        }

        .takeoff-table th {
            text-align: left;
            padding: 0.875rem 1rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
        }

        .takeoff-table th.th-qty,
        .takeoff-table th.th-unit,
        .takeoff-table th.th-price,
        .takeoff-table th.th-total {
            text-align: right;
            width: 80px;
        }

        .takeoff-table th.th-material {
            width: auto;
        }

        .takeoff-table th.th-edit {
            width: 50px;
            text-align: center;
        }

        .takeoff-table td {
            padding: 0.875rem 1rem;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
            color: var(--text-secondary);
        }

        .takeoff-row:hover {
            background: rgba(6, 182, 212, 0.05);
        }

        .takeoff-name {
            min-width: 200px;
        }

        .takeoff-item-name {
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.25rem;
        }

        .takeoff-item-spec {
            font-size: 0.8125rem;
            color: var(--text-muted);
            font-family: 'JetBrains Mono', monospace;
        }

        .takeoff-qty,
        .takeoff-unit,
        .takeoff-price,
        .takeoff-total {
            text-align: right;
            font-family: 'JetBrains Mono', monospace;
            white-space: nowrap;
        }

        .takeoff-qty {
            color: var(--secondary);
            font-weight: 600;
        }

        .takeoff-unit {
            color: var(--text-muted);
        }

        .takeoff-price {
            color: var(--text);
        }

        .takeoff-total {
            font-weight: 700;
            color: var(--text);
        }

        /* Dimensions column - editable raw dimensions + calculation display */
        .takeoff-dimensions {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8125rem;
            color: var(--text-muted);
            min-width: 160px;
            max-width: 220px;
        }

        .takeoff-table th.th-dimensions {
            width: 200px;
        }

        .takeoff-dimensions-input {
            width: 140px;
            padding: 0.25rem 0.375rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8125rem;
            background: var(--bg-secondary);
            color: var(--text);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .takeoff-dimensions-input:hover {
            border-color: var(--primary);
        }

        .takeoff-dimensions-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
        }

        .dimension-calc {
            font-size: 0.6875rem;
            color: var(--text-muted);
            opacity: 0.7;
            margin-top: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dimension-text {
            display: block;
        }

        /* Price source badges */
        .price-source-badge {
            display: inline-block;
            font-size: 0.625rem;
            padding: 0.125rem 0.375rem;
            border-radius: 3px;
            margin-left: 0.5rem;
            font-weight: 600;
            text-transform: uppercase;
            vertical-align: middle;
        }

        .price-source-badge.custom {
            background: rgba(139, 92, 246, 0.15);
            color: #8b5cf6;
        }

        .price-source-badge.database {
            background: rgba(16, 185, 129, 0.15);
            color: #10b981;
        }

        .price-source-badge.ai {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
        }

        /* Inline editable inputs */
        .takeoff-qty-input,
        .takeoff-price-input {
            width: 70px;
            padding: 0.25rem 0.375rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.875rem;
            text-align: right;
            background: var(--bg-secondary);
            color: var(--text);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .takeoff-qty-input:hover,
        .takeoff-price-input:hover {
            border-color: var(--primary);
        }

        .takeoff-qty-input:focus,
        .takeoff-price-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
        }

        /* Edited indicator */
        .edited-indicator {
            color: var(--primary);
            font-weight: bold;
            margin-left: 0.25rem;
        }

        .takeoff-edit {
            text-align: center;
        }

        .edit-icon {
            color: var(--text-muted);
            cursor: pointer;
            font-size: 1rem;
            opacity: 0.5;
            transition: opacity 0.2s;
        }

        .edit-icon:hover {
            opacity: 1;
            color: var(--primary);
        }

        /* Inline Edit Mode Styles */
        .takeoff-row.editing {
            background: rgba(0, 78, 137, 0.08) !important;
        }

        .takeoff-row .edit-input {
            width: 80px;
            padding: 0.375rem 0.5rem;
            border: 1px solid var(--secondary);
            border-radius: 4px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.875rem;
            text-align: right;
            background: white;
        }

        .takeoff-row .edit-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
        }

        .edit-actions {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
        }

        .edit-btn {
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            border: none;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .edit-btn-save {
            background: var(--success);
            color: white;
        }

        .edit-btn-save:hover {
            background: #059669;
        }

        .edit-btn-cancel {
            background: var(--border);
            color: var(--text-muted);
        }

        .edit-btn-cancel:hover {
            background: #d1d5db;
            color: var(--text);
        }

        .edited-note {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 0.125rem;
        }

        .save-checkmark {
            color: var(--success);
            font-size: 1.25rem;
            animation: checkmarkPop 0.3s ease-out;
        }

        @keyframes checkmarkPop {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
        }

        .takeoff-header-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .reset-prices-btn {
            padding: 0.5rem 1rem;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-muted);
            font-size: 0.8125rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .reset-prices-btn:hover {
            border-color: var(--warning);
            color: var(--warning);
        }

        .last-edited-note {
            font-size: 0.8125rem;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 0.5rem;
            text-align: right;
        }

        .takeoff-table tfoot td {
            background: var(--bg);
            border-top: 2px solid var(--border);
        }

        .category-subtotal-row td {
            font-weight: 600;
        }

        .category-subtotal-row .subtotal-label {
            text-align: right;
            color: var(--text-muted);
        }

        .category-subtotal-row .subtotal-value {
            text-align: right;
            color: var(--text);
            font-family: 'JetBrains Mono', monospace;
        }

        /* Takeoff Subtotal */
        .takeoff-subtotal {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 1.5rem;
            padding: 1rem 1.5rem;
            background: var(--secondary);
            color: white;
            border-radius: 8px;
            margin-top: 1.5rem;
            font-size: 1.125rem;
        }

        .takeoff-subtotal .subtotal-label {
            font-weight: 600;
        }

        .takeoff-subtotal .subtotal-amount {
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.25rem;
        }

        /* Cost Estimate Section */
        .cost-estimate-section {
            margin-top: 2rem;
            border: 2px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            background: var(--surface);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .cost-estimate-header {
            background: linear-gradient(135deg, var(--secondary) 0%, #003366 100%);
            color: white;
            padding: 1rem 1.5rem;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: 0.05em;
        }

        .cost-estimate-body {
            padding: 1.5rem;
        }

        .cost-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.625rem 0;
        }

        .cost-label {
            font-weight: 500;
            color: var(--text);
        }

        .cost-value {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            font-size: 1.0625rem;
            color: var(--text);
        }

        .cost-detail {
            font-size: 0.8125rem;
            color: var(--text-muted);
            margin-top: -0.375rem;
            margin-bottom: 0.5rem;
            padding-left: 1rem;
        }

        .cost-notes {
            font-size: 0.8125rem;
            color: var(--text-muted);
            font-style: italic;
            padding: 0.5rem 1rem;
            background: var(--bg);
            border-radius: 6px;
            margin-bottom: 0.75rem;
        }

        .cost-divider {
            height: 2px;
            background: var(--border);
            margin: 1rem 0;
        }

        .cost-total {
            background: var(--bg);
            margin: 0 -1.5rem;
            padding: 1rem 1.5rem !important;
            border-top: 2px solid var(--border);
            border-bottom: 2px solid var(--border);
        }

        .cost-total .cost-label {
            font-weight: 700;
            font-size: 1.0625rem;
            color: var(--text);
        }

        .cost-total .cost-value {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary);
        }

        /* Markup Section */
        .markup-section {
            margin-top: 1.5rem;
            padding-top: 1rem;
        }

        .markup-header {
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.75rem;
            font-size: 0.9375rem;
        }

        .markup-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            padding-left: 1rem;
        }

        .markup-label {
            color: var(--text-muted);
            font-size: 0.9375rem;
        }

        .markup-value {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            color: var(--success);
            font-size: 1rem;
        }

        /* Print styles for pricing table */
        @media print {
            .takeoff-table {
                font-size: 10pt;
            }

            .cost-estimate-section {
                page-break-inside: avoid;
            }

            .edit-icon {
                display: none;
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .projects-grid {
                grid-template-columns: 1fr;
            }

            .trade-checkboxes {
                grid-template-columns: 1fr;
            }

            .project-view {
                flex-direction: column;
            }

            .project-sidebar {
                width: 100%;
                position: relative;
                top: 0;
                height: auto;
                border-right: none;
                border-bottom: 1px solid var(--border);
            }

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

            .tabs {
                overflow-x: auto;
            }

            /* Responsive takeoff table */
            .takeoff-table {
                font-size: 0.8125rem;
            }

            .takeoff-table th,
            .takeoff-table td {
                padding: 0.5rem 0.5rem;
            }

            .takeoff-table th.th-qty,
            .takeoff-table th.th-unit,
            .takeoff-table th.th-price,
            .takeoff-table th.th-total {
                width: 60px;
            }

            .takeoff-item-spec {
                font-size: 0.75rem;
            }

            .takeoff-subtotal {
                flex-direction: column;
                gap: 0.5rem;
                text-align: center;
            }

            .cost-estimate-body {
                padding: 1rem;
            }

            .cost-total {
                margin: 0 -1rem;
                padding: 0.75rem 1rem !important;
            }
        }

        @media (max-width: 480px) {
            .takeoff-table th.th-unit,
            .takeoff-table td.takeoff-unit {
                display: none;
            }

            .takeoff-table th.th-edit,
            .takeoff-table td.takeoff-edit {
                display: none;
            }
        }

        /* Export Dropdown */
        .export-dropdown {
            position: relative;
            display: inline-block;
        }

        .export-dropdown-btn {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .export-dropdown-btn .dropdown-arrow {
            font-size: 0.6rem;
            transition: transform 0.2s;
        }

        .export-dropdown.open .dropdown-arrow {
            transform: rotate(180deg);
        }

        .export-dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            z-index: 200;
            min-width: 180px;
            display: none;
            overflow: hidden;
        }

        .export-dropdown.open .export-dropdown-menu {
            display: block;
        }

        .export-dropdown-item {
            padding: 0.75rem 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: background 0.15s;
            font-size: 0.875rem;
            color: var(--text);
        }

        .export-dropdown-item:hover {
            background: var(--bg);
        }

        .export-dropdown-item.disabled {
            color: var(--text-muted);
            cursor: not-allowed;
            opacity: 0.6;
        }

        .export-dropdown-item.disabled:hover {
            background: transparent;
        }

        .export-dropdown-item-icon {
            width: 18px;
            text-align: center;
        }

        /* Toast Notification */
        .toast-container {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .toast {
            background: linear-gradient(145deg, var(--bg-secondary), var(--bg-elevated));
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 14px 18px;
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 12px;
            animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-width: 360px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .toast.success {
            border-left: 4px solid var(--accent-success);
            box-shadow: var(--shadow-lg), 0 0 20px var(--glow-success);
        }

        .toast.error {
            border-left: 4px solid var(--accent-critical);
            box-shadow: var(--shadow-lg), 0 0 20px var(--glow-critical);
        }

        .toast.warning {
            border-left: 4px solid var(--accent-warning);
            box-shadow: var(--shadow-lg), 0 0 20px var(--glow-warning);
        }

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

        .toast-icon {
            font-size: 1.2rem;
        }

        .toast-message {
            font-size: 0.9rem;
            color: var(--text-primary);
            font-weight: 500;
        }

        @keyframes toastSlideIn {
            from {
                transform: translateX(120%) scale(0.8);
                opacity: 0;
            }
            to {
                transform: translateX(0) scale(1);
                opacity: 1;
            }
        }

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

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

        /* Plan Reference Styles */
        .plan-reference-container {
            margin-top: 1.25rem;
            padding: 1rem 1.25rem;
            background: linear-gradient(135deg, rgba(0,78,137,0.05) 0%, rgba(0,78,137,0.02) 100%);
            border-radius: 10px;
            border: 2px solid var(--secondary);
            transition: all 0.2s;
        }

        .plan-reference-container:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 16px rgba(0,78,137,0.15);
        }

        .plan-reference-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .plan-reference-icon {
            font-size: 1.25rem;
        }

        .plan-reference-title {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--secondary);
        }

        .plan-reference-body {
            padding-left: 0.25rem;
        }

        .plan-reference-detail {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.25rem;
        }

        .plan-reference-location {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .plan-ref-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 0.75rem;
        }

        .plan-ref-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1rem;
            border-radius: 6px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }

        .plan-ref-download {
            background: var(--secondary);
            color: white;
        }

        .plan-ref-download:hover {
            background: #003d6e;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,78,137,0.3);
        }

        .plan-ref-view {
            background: var(--primary);
            color: white;
        }

        .plan-ref-view:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255,107,53,0.3);
        }

        .plan-ref-btn-icon {
            font-size: 1rem;
        }

        /* Hardware plan reference inline styles */
        .hardware-refs-grid {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .hardware-plan-ref {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            padding: 0.875rem 1rem;
            background: var(--bg);
            border-radius: 8px;
            border-left: 3px solid var(--secondary);
        }

        .hardware-plan-ref-icon {
            font-size: 1rem;
            color: var(--secondary);
        }

        .hardware-plan-ref-text {
            font-weight: 600;
            color: var(--text);
        }

        .hardware-plan-ref-loc {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .plan-ref-buttons-inline {
            display: flex;
            gap: 0.5rem;
            margin-left: auto;
        }

        .plan-ref-btn-sm {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            border-radius: 4px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-muted);
        }

        .plan-ref-btn-sm:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(255,107,53,0.05);
        }

        .plan-ref-btn-sm.plan-ref-view {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .plan-ref-btn-sm.plan-ref-view:hover {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
        }

        /* Mobile responsive adjustments */
        @media (max-width: 600px) {
            .plan-ref-buttons {
                flex-direction: column;
            }

            .plan-ref-btn {
                width: 100%;
                justify-content: center;
            }

            .plan-ref-buttons-inline {
                width: 100%;
                margin-left: 0;
                margin-top: 0.5rem;
            }

            .plan-ref-btn-sm {
                flex: 1;
                justify-content: center;
            }
        }

        /* Legacy SVG Diagram Styles (kept for backwards compatibility) */
        .svg-diagram-container {
            margin-top: 1.25rem;
            padding: 1rem;
            background: var(--surface);
            border-radius: 10px;
            border: 2px solid var(--border);
            transition: all 0.2s;
        }

        .svg-diagram-container:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }

        .svg-diagram-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

        .svg-diagram-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--secondary);
        }

        .svg-diagram-title-icon {
            font-size: 1.125rem;
        }

        .svg-diagram-source {
            font-size: 0.75rem;
            color: var(--text-muted);
            font-family: 'JetBrains Mono', monospace;
            padding: 0.25rem 0.5rem;
            background: var(--bg);
            border-radius: 4px;
        }

        .svg-diagram-wrapper {
            display: flex;
            justify-content: center;
            padding: 0.5rem;
            background: white;
            border-radius: 6px;
            border: 1px solid var(--border);
            min-height: 200px;
        }

        .svg-diagram-wrapper svg {
            max-width: 100%;
            height: auto;
            min-height: 180px;
        }

        .svg-diagram-fullscreen {
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
            border-radius: 4px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
        }

        .svg-diagram-fullscreen:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        /* SVG Diagram Full-screen Modal */
        .svg-viewer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.95);
            z-index: 2000;
            display: flex;
            flex-direction: column;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .svg-viewer-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .svg-viewer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            background: rgba(0,0,0,0.5);
            color: white;
        }

        .svg-viewer-title {
            font-size: 1.125rem;
            font-weight: 600;
        }

        .svg-viewer-close {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .svg-viewer-close:hover {
            background: rgba(255,255,255,0.2);
        }

        .svg-viewer-body {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            overflow: auto;
        }

        .svg-viewer-body svg {
            max-width: 90vw;
            max-height: 80vh;
            background: white;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        }

        .svg-viewer-footer {
            padding: 0.75rem 1.5rem;
            background: rgba(0,0,0,0.5);
            color: white;
            text-align: center;
            font-size: 0.875rem;
        }

        /* Plan Viewer Modal Styles */
        .plan-viewer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.95);
            z-index: 10000;
            display: none;
            flex-direction: column;
        }

        .plan-viewer-overlay.active {
            display: flex;
        }

        .plan-viewer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            background: rgba(0,0,0,0.8);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .plan-viewer-nav {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .plan-viewer-nav-btn {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.5rem 1rem;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 6px;
            color: white;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .plan-viewer-nav-btn:hover:not(:disabled) {
            background: var(--primary);
            border-color: var(--primary);
        }

        .plan-viewer-nav-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .plan-viewer-page-info {
            color: white;
            font-size: 0.875rem;
            font-weight: 600;
            padding: 0 0.5rem;
        }

        .plan-viewer-title {
            color: white;
            font-size: 1rem;
            font-weight: 600;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .plan-viewer-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .plan-viewer-action-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            font-size: 1.125rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .plan-viewer-action-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

        .plan-viewer-zoom-level {
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            min-width: 50px;
            text-align: center;
        }

        .plan-viewer-close {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            margin-left: 0.5rem;
        }

        .plan-viewer-close:hover {
            background: var(--danger);
        }

        .plan-viewer-body {
            flex: 1;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a1a;
        }

        .plan-viewer-image-container {
            position: absolute;
            cursor: grab;
            transition: transform 0.1s ease-out;
        }

        .plan-viewer-image-container:active {
            cursor: grabbing;
        }

        .plan-viewer-image-container img {
            max-width: none;
            display: block;
            box-shadow: 0 4px 32px rgba(0,0,0,0.5);
            background: white;
        }

        .plan-viewer-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            color: white;
        }

        .plan-viewer-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255,255,255,0.2);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .plan-viewer-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1.5rem;
            background: rgba(0,0,0,0.8);
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .plan-viewer-hint {
            color: rgba(255,255,255,0.6);
            font-size: 0.8125rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .plan-viewer-location {
            color: var(--warning);
            font-size: 0.875rem;
            font-weight: 600;
        }

        /* Plan Reference Thumbnail Styles */
        .plan-ref-thumbnail-container {
            margin-top: 0.75rem;
            cursor: pointer;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid var(--border);
            transition: all 0.2s;
            background: var(--bg);
        }

        .plan-ref-thumbnail-container:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 16px rgba(255,107,53,0.2);
        }

        .plan-ref-thumbnail {
            width: 100%;
            max-width: 300px;
            height: auto;
            display: block;
        }

        .plan-ref-thumbnail-label {
            padding: 0.5rem 0.75rem;
            background: var(--bg);
            border-top: 1px solid var(--border);
            font-size: 0.75rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .plan-ref-thumbnail-label .view-icon {
            color: var(--primary);
        }

        /* Hardware plan ref with thumbnail */
        .hardware-plan-ref-thumb {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
        }

        .hardware-plan-ref-thumb:hover {
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(255,107,53,0.3);
        }

        /* Mobile responsive for plan viewer */
        @media (max-width: 768px) {
            .plan-viewer-header {
                flex-wrap: wrap;
                gap: 0.5rem;
                padding: 0.5rem;
            }

            .plan-viewer-title {
                position: static;
                transform: none;
                width: 100%;
                text-align: center;
                order: -1;
                padding-bottom: 0.5rem;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                margin-bottom: 0.5rem;
            }

            .plan-viewer-nav {
                flex: 1;
            }

            .plan-viewer-nav-btn span:not(:only-child) {
                display: none;
            }

            .plan-viewer-actions {
                flex: 1;
                justify-content: flex-end;
            }

            .plan-viewer-zoom-level {
                display: none;
            }

            .plan-viewer-footer {
                flex-direction: column;
                gap: 0.5rem;
                text-align: center;
            }
        }

        /* Hardware SVG Diagrams Section */
        .hardware-diagrams-section {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
        }

        .hardware-diagrams-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .hardware-diagram-card {
            background: var(--surface);
            border-radius: 10px;
            border: 2px solid var(--border);
            margin-bottom: 1rem;
            overflow: hidden;
            transition: all 0.2s;
        }

        .hardware-diagram-card:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .hardware-diagram-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.875rem 1rem;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }

        .hardware-diagram-part {
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            color: var(--secondary);
        }

        .hardware-diagram-location {
            font-size: 0.8125rem;
            color: var(--text-muted);
        }

        .hardware-diagram-body {
            padding: 1rem;
        }

        .hardware-diagram-body svg {
            max-width: 100%;
            height: auto;
        }

        .hardware-diagram-footer {
            padding: 0.75rem 1rem;
            background: var(--bg);
            border-top: 1px solid var(--border);
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* Fallback reference text when no SVG available */
        .sheet-ref-fallback {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.5rem 0.75rem;
            background: var(--bg);
            border-radius: 6px;
            font-size: 0.8125rem;
            color: var(--text-muted);
            margin-top: 1rem;
        }

        .sheet-ref-fallback-icon {
            color: var(--secondary);
        }

        /* Hardware table with sheet reference */
        .hardware-table td.hardware-sheet {
            white-space: nowrap;
        }

        .hardware-sheet-link {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            background: var(--secondary);
            color: white;
            border-radius: 4px;
            font-size: 0.75rem;
            font-family: 'JetBrains Mono', monospace;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }

        .hardware-sheet-link:hover {
            background: var(--primary);
            transform: translateY(-1px);
        }

        /* PDF extraction progress */
        .pdf-extraction-progress {
            margin-top: 1rem;
            padding: 1rem;
            background: rgba(0,78,137,0.08);
            border-radius: 8px;
            border: 1px solid var(--secondary);
        }

        .pdf-extraction-title {
            font-weight: 600;
            color: var(--secondary);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .pdf-extraction-status {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .pdf-extraction-bar {
            height: 4px;
            background: var(--border);
            border-radius: 2px;
            margin-top: 0.5rem;
            overflow: hidden;
        }

        .pdf-extraction-bar-fill {
            height: 100%;
            background: var(--secondary);
            border-radius: 2px;
            transition: width 0.3s;
        }

        /* Plan pages storage indicator */
        .plan-pages-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.25rem 0.625rem;
            background: rgba(16,185,129,0.1);
            color: var(--success);
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-left: 0.5rem;
        }

        /* Fallback message when images unavailable */
        .plan-sheet-fallback {
            padding: 0.75rem 1rem;
            background: var(--bg);
            border-radius: 6px;
            border: 1px dashed var(--border);
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .plan-sheet-fallback a {
            color: var(--primary);
            text-decoration: none;
        }

        .plan-sheet-fallback a:hover {
            text-decoration: underline;
        }

        /* ============================================
           SCOPE OF WORK STYLES
           ============================================ */

        .scope-of-work {
            background: var(--surface);
            border-radius: 12px;
        }

        .scope-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--border);
        }

        .scope-header-left h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 0.25rem;
        }

        .scope-header-left .scope-subtitle {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .scope-export-btns {
            display: flex;
            gap: 0.5rem;
        }

        .scope-export-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.5rem 1rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--surface);
            color: var(--text);
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .scope-export-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(255,107,53,0.05);
        }

        .scope-section {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .scope-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .scope-section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .scope-section-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--secondary);
        }

        .scope-section-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background: var(--secondary);
            border-radius: 2px;
        }

        .scope-section-actions {
            display: flex;
            gap: 0.5rem;
        }

        .scope-edit-btn {
            padding: 0.25rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--surface);
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .scope-edit-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .scope-edit-btn.editing {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .scope-reset-btn {
            padding: 0.25rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            background: var(--surface);
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .scope-reset-btn:hover {
            border-color: var(--warning);
            color: var(--warning);
        }

        .scope-text-content {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text);
            white-space: pre-wrap;
        }

        .scope-text-content p {
            margin-bottom: 1rem;
        }

        .scope-text-content p:last-child {
            margin-bottom: 0;
        }

        /* Editable text area */
        .scope-editable-textarea {
            width: 100%;
            min-height: 150px;
            padding: 1rem;
            border: 2px solid var(--primary);
            border-radius: 8px;
            font-family: 'DM Sans', sans-serif;
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text);
            resize: vertical;
            background: rgba(255,107,53,0.02);
        }

        .scope-editable-textarea:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
        }

        /* Work Tasks List */
        .scope-tasks-list {
            list-style: none;
        }

        .scope-task-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px dashed var(--border);
        }

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

        .scope-task-checkbox {
            width: 20px;
            height: 20px;
            min-width: 20px;
            border: 2px solid var(--border);
            border-radius: 4px;
            margin-top: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--success);
            background: var(--surface);
        }

        .scope-task-checkbox.checked {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }

        .scope-task-content {
            flex: 1;
        }

        .scope-task-title {
            font-weight: 500;
            color: var(--text);
            margin-bottom: 0.25rem;
        }

        .scope-task-details {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .scope-task-actions {
            display: flex;
            gap: 0.5rem;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .scope-task-item:hover .scope-task-actions {
            opacity: 1;
        }

        .scope-task-btn {
            padding: 0.25rem 0.5rem;
            border: none;
            border-radius: 4px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .scope-task-btn:hover {
            background: var(--bg);
            color: var(--text);
        }

        .scope-task-btn.delete:hover {
            background: rgba(239,68,68,0.1);
            color: var(--danger);
        }

        .scope-add-task-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            margin-top: 0.75rem;
            border: 2px dashed var(--border);
            border-radius: 8px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            width: 100%;
            transition: all 0.2s;
        }

        .scope-add-task-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(255,107,53,0.02);
        }

        /* Exclusions List */
        .scope-exclusions-list {
            list-style: none;
        }

        .scope-exclusion-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.5rem 0;
        }

        .scope-exclusion-item::before {
            content: '•';
            color: var(--text-muted);
            font-weight: bold;
            font-size: 1.25rem;
            line-height: 1;
        }

        .scope-exclusion-text {
            color: var(--text);
            flex: 1;
        }

        /* Materials Table (pulled from takeoff) */
        .scope-materials-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9375rem;
        }

        .scope-materials-table th {
            text-align: left;
            padding: 0.75rem 1rem;
            background: var(--bg);
            font-weight: 600;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            border-bottom: 2px solid var(--border);
        }

        .scope-materials-table th:last-child {
            text-align: right;
        }

        .scope-materials-table td {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
        }

        .scope-materials-table td:last-child {
            text-align: right;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
        }

        .scope-materials-table tr:hover {
            background: var(--bg);
        }

        .scope-materials-total {
            background: var(--secondary);
            color: white;
        }

        .scope-materials-total td {
            border-bottom: none;
            font-weight: 700;
        }

        /* Timeline Section */
        .scope-timeline {
            background: var(--bg);
            border-radius: 8px;
            padding: 1.25rem;
        }

        .scope-timeline-duration {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .scope-timeline-phases {
            margin-bottom: 1rem;
        }

        .scope-timeline-phase {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px dashed var(--border);
        }

        .scope-timeline-phase:last-child {
            border-bottom: none;
        }

        .scope-timeline-phase-name {
            font-weight: 500;
            color: var(--text);
        }

        .scope-timeline-phase-duration {
            font-size: 0.875rem;
            color: var(--text-muted);
            font-family: 'JetBrains Mono', monospace;
        }

        .scope-timeline-notes {
            font-size: 0.875rem;
            color: var(--text-muted);
            font-style: italic;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border);
        }

        /* Standards & Compliance */
        .scope-standards-grid {
            display: grid;
            gap: 1.5rem;
        }

        .scope-standards-item {
            background: var(--bg);
            border-radius: 8px;
            padding: 1rem;
        }

        .scope-standards-item-title {
            font-weight: 600;
            font-size: 0.875rem;
            color: var(--secondary);
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .scope-standards-item-content {
            font-size: 0.9375rem;
            color: var(--text);
        }

        .scope-inspections-list {
            list-style: none;
        }

        .scope-inspection-item {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px dashed var(--border);
        }

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

        .scope-inspection-name {
            font-weight: 500;
            color: var(--text);
        }

        .scope-inspection-when {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* Deliverables List */
        .scope-deliverables-list {
            list-style: none;
        }

        .scope-deliverable-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.5rem 0;
        }

        .scope-deliverable-icon {
            color: var(--success);
            font-size: 1.125rem;
            margin-top: 0.125rem;
        }

        .scope-deliverable-text {
            color: var(--text);
        }

        /* Edit Mode Input for Tasks */
        .scope-task-edit-input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid var(--primary);
            border-radius: 4px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9375rem;
            margin-bottom: 0.25rem;
        }

        .scope-task-edit-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255,107,53,0.2);
        }

        /* Edited indicator */
        .scope-edited-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.125rem 0.5rem;
            background: rgba(245,158,11,0.1);
            color: var(--warning);
            font-size: 0.6875rem;
            font-weight: 600;
            border-radius: 4px;
            margin-left: 0.5rem;
        }

        /* Print-friendly styles for Scope of Work */
        @media print {
            .scope-of-work {
                font-size: 11pt;
            }

            .scope-export-btns,
            .scope-section-actions,
            .scope-task-actions,
            .scope-add-task-btn {
                display: none !important;
            }

            .scope-section {
                page-break-inside: avoid;
            }

            .scope-section-title {
                font-size: 12pt;
            }

            .scope-materials-table {
                font-size: 10pt;
            }
        }

        /* Responsive for scope of work */
        @media (max-width: 768px) {
            .scope-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .scope-export-btns {
                width: 100%;
                flex-wrap: wrap;
            }

            .scope-export-btn {
                flex: 1;
                justify-content: center;
            }

            .scope-section-header {
                flex-direction: column;
                gap: 0.5rem;
            }

            .scope-timeline-phase {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }
        }

        /* ============================================ */
        /* COORDINATION ALERTS STYLES */
        /* ============================================ */

        .coordination-alerts-section {
            margin-bottom: 2rem;
        }

        .coordination-alerts-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .coordination-alerts-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .coordination-alerts-count {
            display: flex;
            gap: 0.75rem;
        }

        .alert-count-badge {
            padding: 0.25rem 0.625rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .alert-count-critical {
            background: rgba(239,68,68,0.15);
            color: var(--danger);
        }

        .alert-count-important {
            background: rgba(245,158,11,0.15);
            color: var(--warning);
        }

        .alert-count-note {
            background: rgba(100,116,139,0.15);
            color: var(--text-muted);
        }

        .coordination-alert {
            border-radius: 10px;
            margin-bottom: 0.75rem;
            overflow: hidden;
            transition: all 0.2s;
        }

        .coordination-alert:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .coordination-alert.critical {
            background: #7F1D1D;
            border-left: 4px solid #FEE2E2;
        }

        .coordination-alert.important {
            background: #78350F;
            border-left: 4px solid #FED7AA;
        }

        .coordination-alert.note {
            background: #1E3A8A;
            border-left: 4px solid #DBEAFE;
        }

        .alert-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            cursor: pointer;
        }

        .alert-header-left {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            flex: 1;
        }

        .alert-emoji {
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .alert-title-area {
            flex: 1;
        }

        .alert-phase-badge {
            display: inline-block;
            padding: 0.125rem 0.5rem;
            border-radius: 4px;
            font-size: 0.625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .critical .alert-phase-badge {
            background: rgba(251,191,36,0.2);
            color: #FBBF24;
        }

        .important .alert-phase-badge {
            background: rgba(251,146,60,0.2);
            color: #FB923C;
        }

        .note .alert-phase-badge {
            background: rgba(96,165,250,0.2);
            color: #60A5FA;
        }

        .alert-title {
            font-weight: 600;
            font-size: 1rem;
            color: #F1F5F9;
            line-height: 1.4;
        }

        .critical .alert-title {
            font-size: 1.0625rem;
            font-weight: 700;
            color: #FBBF24;
        }

        .important .alert-title {
            color: #FB923C;
        }

        .note .alert-title {
            color: #60A5FA;
        }

        .alert-expand-icon {
            font-size: 1rem;
            color: #94A3B8;
            transition: transform 0.2s;
            flex-shrink: 0;
            padding: 0.25rem;
        }

        .coordination-alert.expanded .alert-expand-icon {
            transform: rotate(90deg);
        }

        .alert-body {
            display: none;
            padding: 0 1.25rem 1.25rem 3rem;
        }

        .coordination-alert.expanded .alert-body {
            display: block;
        }

        .alert-description {
            font-size: 0.9375rem;
            color: #F1F5F9;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .alert-details {
            display: grid;
            gap: 0.75rem;
        }

        .alert-detail-row {
            display: flex;
            gap: 0.75rem;
        }

        .alert-detail-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #94A3B8;
            width: 80px;
            flex-shrink: 0;
        }

        .alert-detail-value {
            font-size: 0.875rem;
            color: #F1F5F9;
            flex: 1;
        }

        .alert-trades-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.375rem;
        }

        .alert-trade-tag {
            padding: 0.125rem 0.5rem;
            background: rgba(241,245,249,0.15);
            color: #F1F5F9;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .alert-sheet-refs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.375rem;
        }

        .alert-sheet-ref {
            padding: 0.125rem 0.5rem;
            background: rgba(241,245,249,0.2);
            color: #F1F5F9;
            border-radius: 4px;
            font-size: 0.6875rem;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
        }

        .view-all-alerts-btn {
            display: block;
            width: 100%;
            padding: 0.75rem;
            background: transparent;
            border: 2px dashed var(--border);
            border-radius: 8px;
            color: var(--text-muted);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 0.5rem;
        }

        .view-all-alerts-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: rgba(255,107,53,0.02);
        }

        /* Trade Selection Phase UI */
        .trade-selection-phase {
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 2px solid var(--border);
        }

        .trade-selection-phase-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .trade-selection-phase-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
        }

        .trade-selection-actions {
            display: flex;
            gap: 0.5rem;
        }

        .trade-selection-action {
            padding: 0.375rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: transparent;
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .trade-selection-action:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        /* Analysis Mode Toggle */
        .analysis-mode-toggle {
            display: flex;
            gap: 0.5rem;
            margin: 1rem 0;
            padding: 1rem;
            background: var(--bg-tertiary);
            border-radius: 8px;
        }
        .analysis-mode-option {
            flex: 1;
            padding: 1rem;
            border: 2px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg-secondary);
        }
        .analysis-mode-option:hover {
            border-color: var(--accent-primary);
        }
        .analysis-mode-option.selected {
            border-color: var(--accent-primary);
            background: rgba(0, 212, 255, 0.1);
        }
        .analysis-mode-option input {
            display: none;
        }
        .analysis-mode-title {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .analysis-mode-badge {
            font-size: 0.7rem;
            padding: 0.15rem 0.4rem;
            border-radius: 4px;
            font-weight: 500;
        }
        .analysis-mode-badge.fast {
            background: var(--success);
            color: white;
        }
        .analysis-mode-badge.detailed {
            background: var(--accent-secondary);
            color: white;
        }
        .analysis-mode-desc {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }
        .analysis-mode-features {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        .analysis-mode-features li {
            margin: 0.25rem 0;
        }

        .trade-detection-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.625rem;
        }

        .trade-detection-item {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.75rem 1rem;
            border: 2px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--surface);
        }

        .trade-detection-item:hover {
            border-color: var(--primary);
        }

        .trade-detection-item.selected {
            border-color: var(--primary);
            background: rgba(255,107,53,0.05);
        }

        .trade-detection-item.not-detected {
            opacity: 0.6;
        }

        .trade-detection-item.not-detected .trade-detection-name {
            color: var(--text-muted);
        }

        .trade-detection-checkbox {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
            cursor: pointer;
        }

        .trade-detection-name {
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--text);
            flex: 1;
        }

        .trade-detection-status {
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            padding: 0.125rem 0.375rem;
            border-radius: 4px;
        }

        .trade-detection-status.detected {
            background: rgba(16,185,129,0.1);
            color: var(--success);
        }

        .trade-detection-status.not-detected {
            background: rgba(100,116,139,0.1);
            color: var(--text-muted);
        }

        /* Phase Progress Indicator */
        .phase-progress {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--bg);
            border-radius: 8px;
        }

        .phase-step {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex: 1;
        }

        .phase-step-number {
            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;
        }

        .phase-step.pending .phase-step-number {
            background: var(--border);
            color: var(--text-muted);
        }

        .phase-step.active .phase-step-number {
            background: var(--primary);
            color: white;
            animation: pulse 1.5s infinite;
        }

        .phase-step.complete .phase-step-number {
            background: var(--success);
            color: white;
        }

        .phase-step-text {
            font-size: 0.8125rem;
            font-weight: 500;
        }

        .phase-step.pending .phase-step-text {
            color: var(--text-muted);
        }

        .phase-step.active .phase-step-text {
            color: var(--primary);
        }

        .phase-step.complete .phase-step-text {
            color: var(--success);
        }

        .phase-step-divider {
            flex: 0 0 auto;
            width: 24px;
            height: 2px;
            background: var(--border);
        }

        .phase-step.complete + .phase-step-divider {
            background: var(--success);
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,53,0.4); }
            50% { box-shadow: 0 0 0 8px rgba(255,107,53,0); }
        }

        @keyframes pulse-warning {
            0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
            50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
        }

        /* Deep Analysis Progress */
        .deep-analysis-progress {
            margin-top: 1.5rem;
        }

        .deep-analysis-trade-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            background: var(--bg);
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }

        .deep-analysis-trade-item.pending {
            opacity: 0.6;
        }

        .deep-analysis-trade-item.analyzing {
            background: rgba(255,107,53,0.1);
            border: 1px solid var(--primary);
        }

        .deep-analysis-trade-item.complete {
            background: rgba(16,185,129,0.1);
            border: 1px solid var(--success);
        }

        .deep-analysis-trade-item.error {
            background: rgba(239,68,68,0.1);
            border: 1px solid var(--danger);
        }

        .deep-analysis-trade-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .deep-analysis-trade-name {
            flex: 1;
            font-weight: 500;
            color: var(--text);
        }

        .deep-analysis-trade-status {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
        }

        .trade-elapsed {
            color: var(--accent-primary);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 768px) {
            .trade-detection-grid {
                grid-template-columns: 1fr;
            }

            .coordination-alerts-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .phase-progress {
                flex-direction: column;
                gap: 0.75rem;
            }

            .phase-step-divider {
                width: 2px;
                height: 24px;
            }
        }

        /* Authentication Screens */
        .auth-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            padding: 1rem;
        }

        .auth-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2.5rem;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .auth-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .auth-logo {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .auth-header h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .auth-header p {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .auth-error {
            background: rgba(248, 113, 113, 0.15);
            border: 1px solid var(--accent-critical);
            color: var(--accent-critical);
            padding: 0.75rem 1rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
            text-align: center;
        }

        .auth-form {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .auth-form .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .auth-form label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
        }

        .auth-form input {
            padding: 0.875rem 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 1rem;
            transition: all 0.2s;
        }

        .auth-form input:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--glow-primary);
        }

        .auth-form input::placeholder {
            color: var(--text-muted);
        }

        .auth-submit {
            width: 100%;
            padding: 1rem;
            font-size: 1rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        .auth-switch {
            text-align: center;
            margin-top: 1.5rem;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .auth-switch button {
            background: none;
            border: none;
            color: var(--accent-primary);
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .auth-switch button:hover {
            text-decoration: underline;
        }

        .auth-select {
            padding: 0.875rem 1rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 1rem;
            width: 100%;
            cursor: pointer;
        }

        .auth-select:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px var(--glow-primary);
        }

        .auth-product-switch {
            text-align: center;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        .auth-product-switch button {
            background: none;
            border: none;
            color: var(--accent-secondary);
            cursor: pointer;
            font-weight: 600;
            font-size: 0.85rem;
        }

        .auth-product-switch button:hover {
            text-decoration: underline;
        }

        /* User menu in header */
        .user-menu {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .user-info {
            text-align: right;
        }

        .user-name {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.9rem;
        }

        .user-email {
            color: var(--text-muted);
            font-size: 0.75rem;
        }

        .logout-btn {
            padding: 0.5rem 0.75rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.8rem;
            transition: all 0.2s;
        }

        .logout-btn:hover {
            background: var(--accent-critical);
            color: white;
            border-color: var(--accent-critical);
        }

        @media (max-width: 480px) {
            .auth-card {
                padding: 1.5rem;
            }

            .auth-logo {
                font-size: 2rem;
            }

            .auth-header h2 {
                font-size: 1.25rem;
            }
        }

/* ============================================
   HELP PANEL
   ============================================ */

.help-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.help-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.help-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.help-panel.open {
    transform: translateX(0);
}

.help-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.help-panel-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.help-panel-search {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.help-panel-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.help-panel-search input:focus {
    border-color: var(--accent);
}

.help-panel-search input::placeholder {
    color: var(--text-muted);
}

.help-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.help-article-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-secondary);
}

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

.help-article-item .help-article-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.help-article-item .help-article-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.help-article-suggested {
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.help-article-suggested:hover {
    background: var(--bg-primary);
}

.help-article-suggested .help-suggested-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.help-article-suggested .help-suggested-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.help-article-highlighted {
    border-left: 3px solid var(--accent);
}

/* Help article body - markdown rendering */
.help-article-body {
    line-height: 1.7;
    color: var(--text-primary);
}

.help-article-body h1 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

.help-article-body h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
    color: var(--text-primary);
}

.help-article-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem 0;
    color: var(--text-primary);
}

.help-article-body p {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary, var(--text-primary));
}

.help-article-body ul,
.help-article-body ol {
    margin: 0 0 0.75rem 0;
    padding-left: 1.5rem;
}

.help-article-body li {
    margin-bottom: 0.375rem;
    color: var(--text-secondary, var(--text-primary));
}

.help-article-body a {
    color: var(--accent);
    text-decoration: none;
}

.help-article-body a:hover {
    text-decoration: underline;
}

.help-article-body blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: 0 0.375rem 0.375rem 0;
    color: var(--text-muted);
}

.help-article-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
}

.help-code-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0.75rem 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.help-inline-code {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--accent);
}

.help-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.help-back-btn:hover {
    border-color: var(--accent);
    background: var(--bg-primary);
}

.help-article-list-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 480px) {
    .help-panel {
        width: 100vw;
    }
}