/* Dashboard-specific styles */

.dashboard-body {
    background: #f5f5f5;
    margin: 0;
    padding: 0;
}

/* Dark header bar - used for all dashboard pages */
.main-header {
    background: #1a1a1a;
    padding: 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* For absolute positioning of builder title */
}

.main-header-logo {
    display: flex;
    align-items: center;
    gap: 0;
}

.main-header-logo a {
    display: flex;
    align-items: center;
}

.main-header-logo img {
    height: 28px;
}

.logo-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 28px;
    font-weight: 200;
    margin: 0 16px;
    user-select: none;
}

.dashboard-nav-link img {
    height: 28px;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.dashboard-nav-link:hover img {
    opacity: 1;
}

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

.header-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: all 0.2s;
}

.header-icon-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Account dropdown overrides for dark header */
.main-header .account-dropdown .account-btn {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 50%;
    color: #999;
}

.main-header .account-dropdown .account-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.main-header .account-dropdown .account-btn:hover svg {
    stroke: #fff;
}

.main-header .account-dropdown .account-btn .dropdown-arrow {
    display: none;
}

.main-header .account-dropdown .dropdown-menu {
    top: calc(100% + 8px);
    right: 0;
}

/* Account Dropdown Styles - Now in shared /assets/css/account-dropdown.css */

/* Main content area for all pages */
.dashboard-main {
    padding: 0 24px;
}

.dashboard-main .container {
    max-width: none;
    padding: 0;
}

.dashboard-header-section {
    padding: 24px 0 16px;
    margin-bottom: 0;
}

.dashboard-header-section h1 {
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.dashboard-header-section p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

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

.stat-icon {
    font-size: 2.5rem;
}

.stat-content h3 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    color: var(--primary-color);
}

.stat-content p {
    color: var(--text-light);
    font-size: 0.875rem;
}

.stat-content .text-error {
    color: var(--error);
}

/* Dashboard Sections */
.dashboard-sections {
    display: grid;
    gap: 2rem;
}

.section-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header h2 {
    font-size: 1.5rem;
    color: var(--text-dark);
}

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

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.action-card {
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.action-card:hover {
    background-color: var(--white);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.action-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.action-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.action-card p {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Projects List */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 0.375rem;
    transition: background-color 0.3s;
}

.project-item:hover {
    background-color: #e5e7eb;
}

.project-info h4 {
    margin-bottom: 0.25rem;
}

.project-info h4 a {
    color: var(--text-dark);
    text-decoration: none;
}

.project-info h4 a:hover {
    color: var(--primary-color);
}

.project-info p {
    color: var(--text-light);
    font-size: 0.875rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

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

.status-planning {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-on_hold {
    background-color: #fef3c7;
    color: #92400e;
}

.status-completed {
    background-color: #e0e7ff;
    color: #3730a3;
}

.empty-state {
    padding: 3rem;
    text-align: center;
    color: var(--text-light);
}

.empty-state a {
    color: var(--primary-color);
    text-decoration: none;
}

/* Lookahead Builder */
.lookahead-builder {
    background-color: var(--white);
    border-radius: 0.5rem;
    padding: 2rem;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.week-column {
    background-color: var(--bg-light);
    padding: 1rem;
    border-radius: 0.375rem;
}

.week-header {
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.activity-list {
    min-height: 200px;
}

.activity-item {
    background-color: var(--white);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    border-left: 3px solid var(--primary-color);
    cursor: pointer;
    transition: all 0.3s;
}

.activity-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity-name {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.activity-meta {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Form Styles for Dashboard */
.dashboard-form {
    max-width: 800px;
}

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

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background-color: var(--bg-light);
}

.data-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-dark);
    border-bottom: 2px solid var(--border-color);
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

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

/* Lookahead Grid */
.lookaheads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.lookahead-card {
    background-color: var(--bg-light);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

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

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

.lookahead-header h3 {
    flex: 1;
    margin-right: 1rem;
}

.lookahead-header h3 a {
    color: var(--text-dark);
    text-decoration: none;
}

.lookahead-header h3 a:hover {
    color: var(--primary-color);
}

.lookahead-meta {
    margin-bottom: 1rem;
}

.lookahead-meta p {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.lookahead-actions {
    display: flex;
    gap: 0.5rem;
}

/* Account Settings */
.account-section {
    margin-bottom: 3rem;
}

.account-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.info-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-label {
    font-weight: 600;
    color: var(--text-dark);
}

.info-value {
    color: var(--text-light);
}

/* Subscription Cards */
.subscription-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.subscription-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
}

.subscription-card.active {
    border-color: var(--primary-color);
    background: linear-gradient(to bottom, var(--white), var(--bg-light));
}

.subscription-card h3 {
    margin-bottom: 1rem;
}

.subscription-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-nav {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .week-grid {
        grid-template-columns: 1fr;
    }

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

    .lookaheads-grid {
        grid-template-columns: 1fr;
    }

    .data-table {
        font-size: 0.875rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

/* Modal Styles */
.modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease-in-out !important;
}

.modal.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal-content {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="tel"],
.modal-content textarea,
.modal-content select {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
}

.modal-content button {
    margin-right: 0.5rem;
}

/* ============================================
   POPUP SYSTEM (Lightweight dialogs)
   ============================================ */

.popup {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease-in-out !important;
}

.popup.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.popup-content {
    background-color: var(--white);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    /* max-width is set per-popup in popups.php */
}

.popup-content h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.popup-content input[type="text"],
.popup-content input[type="email"],
.popup-content input[type="tel"],
.popup-content input[type="number"],
.popup-content textarea,
.popup-content select {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 1rem;
}

/* Worker row inputs should not have margin-bottom */
.worker-row input {
    margin-bottom: 0 !important;
}

.popup-content button {
    margin-right: 0.5rem;
}

/* ============================================
   CONTEXT MENUS (Right-click menus)
   ============================================ */

.context-menu {
    display: none !important;
    position: fixed !important;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 10001 !important;
    min-width: 150px;
    padding: 0.25rem 0;
}

.context-menu.active {
    display: block !important;
}

.context-menu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-dark);
    transition: background-color 0.15s;
}

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

/* ============================================
   MODERN MODAL DESIGN SYSTEM
   Inspired by the Introduction to Crews modal
   ============================================ */

/* Modern modal container - use on .modal-content */
.modal-modern {
    max-width: 500px;
    padding: 0;
    overflow: hidden;
}

.modal-modern.modal-lg {
    max-width: 650px;
}

.modal-modern.modal-sm {
    max-width: 400px;
}

/* Modal header with centered icon */
.modal-header-centered {
    text-align: center;
    padding: 24px 24px 0 24px;
    margin-bottom: 20px;
}

/* Gradient icon box */
.modal-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 16px;
    margin-bottom: 16px;
}

.modal-icon-box.icon-green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.modal-icon-box.icon-yellow {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}

.modal-icon-box.icon-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.modal-icon-box.icon-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.modal-icon-box svg {
    color: white;
    stroke: white;
}

/* Modal title and subtitle */
.modal-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: #111827;
    font-weight: 600;
}

.modal-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

/* Modal body content area */
.modal-body {
    padding: 0 24px 24px 24px;
}

/* Info cards with colored backgrounds */
.modal-card {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.modal-card:last-child {
    margin-bottom: 0;
}

.modal-card-blue {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}

.modal-card-yellow {
    background: #fefce8;
    border: 1px solid #fef08a;
}

.modal-card-gray {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.modal-card-green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.modal-card-red {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* Card title with icon */
.modal-card-title {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-card-blue .modal-card-title {
    color: #0369a1;
}

.modal-card-yellow .modal-card-title {
    color: #854d0e;
}

.modal-card-gray .modal-card-title {
    color: #374151;
}

.modal-card-green .modal-card-title {
    color: #166534;
}

.modal-card-red .modal-card-title {
    color: #991b1b;
}

/* Card content text */
.modal-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.modal-card-blue p {
    color: #0c4a6e;
}

.modal-card-yellow p {
    color: #713f12;
}

.modal-card-gray p {
    color: #64748b;
}

.modal-card-green p {
    color: #14532d;
}

.modal-card-red p {
    color: #7f1d1d;
}

/* Detail rows (like a table but styled) */
.modal-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.modal-detail-row:last-child {
    border-bottom: none;
}

.modal-detail-label {
    color: #6b7280;
    font-size: 14px;
}

.modal-detail-value {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-detail-value a {
    color: #2563eb;
    text-decoration: none;
}

.modal-detail-value a:hover {
    text-decoration: underline;
}

/* Small icon buttons for edit/info actions */
.modal-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    color: #6b7280;
}

.modal-icon-btn:hover {
    background: #f3f4f6;
    color: #2563eb;
}

.modal-icon-btn.btn-edit {
    color: #2563eb;
}

.modal-icon-btn.btn-edit:hover {
    background: #eff6ff;
}

.modal-icon-btn.btn-info {
    color: #6b7280;
}

.modal-icon-btn.btn-info:hover {
    background: #f3f4f6;
}

/* Modal footer with centered button */
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.modal-footer-right {
    text-align: right;
}

.modal-footer .btn {
    min-width: 100px;
}

/* Form elements in modern modals */
.modal-form-group {
    margin-bottom: 16px;
}

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

.modal-form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.modal-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Button group for modal actions */
.modal-btn-group {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Simple header with icon and title inline */
.modal-header-simple {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header-simple .modal-title {
    margin: 0;
    font-size: 18px;
}

.modal-header-simple .header-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header-simple .header-icon svg {
    stroke: white;
}

/* ===========================================
   Print Company Selection Grid
   =========================================== */
.company-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.company-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
    text-align: center;
    min-height: 70px;
}

.company-tile:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.company-tile.selected {
    border-color: #10b981;
    background: #ecfdf5;
}

.company-tile-color {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-bottom: 6px;
    border: 1px solid rgba(0,0,0,0.1);
}

.company-tile-name {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.company-tile-trade {
    font-size: 9px;
    color: #6b7280;
    margin-top: 2px;
}

.company-dropdown-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

/* ============================================
   SPA DASHBOARD STYLES (index.php home page)
   ============================================ */

/* Content container - full width with padding */
.content-container {
    padding: 0 24px;
}

/* Remove padding when in builder mode for full-width builder */
body.builder-mode .content-container {
    padding: 0;
    height: 100%;
}

/* Tier-5 page viewer: drop the 24px content-container side padding so the
   canvas claims the full viewport width. Transfer the 24px back onto the
   breadcrumb row alone, so the breadcrumbs / center indicator / right
   buttons still have their visual inset and don't run flush against the
   screen edges. Toggled by updateBreadcrumbs() in dashboard.js when
   currentView === 'drawing_page'. */
body.tier5-fullbleed .content-container {
    padding: 0;
}
body.tier5-fullbleed .nav-tabs-row {
    padding: 0 24px;
    margin-bottom: 0;
}
/* Welcome heading also keeps its visual inset under tier5-fullbleed —
   only the work area below the breadcrumb row goes edge-to-edge. Drawing
   pages hide .welcome-section entirely (display:none) so this rule is a
   no-op for them and only affects views that keep the welcome visible
   (e.g. the Cron Activity tier-4 pages). */
body.tier5-fullbleed .welcome-section {
    padding-left: 24px;
    padding-right: 24px;
}

/* ============================================
   LOADER CONTAINER - Sibling to content-container
   Shows during loading, hides when content ready
   ============================================ */
.loader-container {
    /* Same positioning as content-container - fills space below header */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    min-height: calc(100vh - 64px); /* Full height minus header */
}

.loader-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    padding: 32px 48px;
    text-align: center;
    max-width: 400px;
}

.loader-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 16px;
    margin-bottom: 20px;
}

.loader-text {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.loader-subtext {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: #6b7280;
}

/* Spinner animation */
@keyframes loaderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loader-spinner {
    animation: loaderSpin 1s linear infinite;
}

/* Welcome section */
.welcome-section {
    padding: 0 0 16px;
    /* Anchor so .command-center-label can pin itself to the viewport
       center instead of being placed in a grid column that just splits
       whatever space is left between the welcome heading and the right
       edge of the page. */
    position: relative;
}

.welcome-greeting {
    font-size: 22px;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.command-center-label {
    /* True viewport-center placement — independent of the greeting's
       width. Vertically aligned with the greeting baseline area. */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36px;
    letter-spacing: 4px;
    color: #1a1a1a;
    pointer-events: none;
}

.welcome-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Navigation tabs row */
.nav-tabs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.nav-tabs {
    display: flex;
    gap: 24px;
}

.nav-tab {
    display: inline-block;
    padding: 12px 0 0;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.nav-tab.active {
    color: #1a1a1a;
    border-bottom-color: #0696d7;
    font-weight: 500;
}

.nav-tab:hover:not(.active) {
    color: #333;
}

.nav-tabs-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Companies + Project Personnel buttons (now live inside the Project
   Information tile; selectors are no longer scoped to .nav-tabs-center). */
.companies-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.companies-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.companies-btn svg {
    width: 16px;
    height: 16px;
}

.project-personnel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.project-personnel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.project-personnel-btn svg {
    width: 16px;
    height: 16px;
}

.project-approvers-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.project-approvers-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.project-approvers-btn svg {
    width: 16px;
    height: 16px;
}

.nav-tabs-center .location-drawings-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.nav-tabs-center .location-drawings-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.nav-tabs-center .location-drawings-btn svg {
    width: 16px;
    height: 16px;
}

.nav-tabs-center .interior-design-drawings-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.nav-tabs-center .interior-design-drawings-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.nav-tabs-center .interior-design-drawings-btn svg {
    width: 16px;
    height: 16px;
}

.nav-tabs-center .ahj-information-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.nav-tabs-center .ahj-information-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.nav-tabs-center .ahj-information-btn svg {
    width: 16px;
    height: 16px;
}

.nav-tabs-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-tabs-right .nav-link {
    font-size: 13px;
    color: #0696d7;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-tabs-right .nav-link:hover {
    text-decoration: underline;
}

.new-project-btn {
    background: #0696d7;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.new-project-btn:hover {
    background: #0580b8;
    color: white;
}

/* Projects table */
.projects-table {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 40px;
}

.projects-table table {
    width: 100%;
    border-collapse: collapse;
}

.projects-table th {
    background: #fafafa;
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e0e0e0;
}

.projects-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.projects-table tr:last-child td {
    border-bottom: none;
}

.projects-table tr:hover {
    background: #fafafa;
}

.project-name-link {
    color: #0696d7;
    text-decoration: none;
    font-weight: 500;
}

.project-name-link:hover {
    text-decoration: underline;
}

.project-location {
    color: #666;
    font-size: 13px;
}

/* Empty projects state */
.empty-projects {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-projects-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-projects h3 {
    font-size: 18px;
    color: #333;
    margin: 0 0 8px 0;
}

.empty-projects p {
    margin: 0 0 20px 0;
}

/* Back arrow for project pages */
.back-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #666;
    transition: all 0.2s;
}

.back-arrow:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
}

/* Table action buttons */
.table-action-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.table-action-separator {
    width: 1px;
    height: 18px;
    background: #ddd;
}

.table-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: #999;
    transition: all 0.2s;
}

.table-action-btn:hover {
    background: #f5f5f5;
    color: #666;
}

.table-action-btn.edit:hover {
    background: #e0e7ff;
    color: #4f46e5;
}

.table-action-btn.delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Lookahead action dropdown menu */
.lookahead-action-menu {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    min-width: 160px;
    padding: 4px 0;
    animation: menuFadeIn 0.15s ease;
}
@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.lookahead-action-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: background 0.15s;
    white-space: nowrap;
}
.lookahead-action-menu button:hover {
    background: #f3f4f6;
}
.lookahead-action-menu button[style*="color: #ef4444"]:hover {
    background: #fef2f2;
}

/* Breadcrumb navigation - span tabs (non-clickable) */
.nav-tabs span.nav-tab {
    cursor: default;
}

.nav-tabs span.nav-tab:hover {
    color: #333;
    border-bottom-color: transparent;
}

.nav-tabs span.nav-tab.active {
    color: #333;
    border-bottom: 2px solid #0696d7;
}

/* SPA Working Area - needs position relative for overlay positioning */
#spaWorkingArea {
    position: relative;
    min-height: calc(100vh - 120px); /* Ensure minimum height for overlay */
}

/* When the bento grid is present (project view), the grid's JS-driven height
   already fills the viewport — drop the min-height so the page doesn't grow
   taller than the viewport and trigger a scrollbar. */
#spaWorkingArea:has(.project-bento-grid) {
    min-height: 0;
}

.nav-tab.breadcrumb-animating {
    opacity: 0;
}

/* ============================================================================
   PROJECT DETAIL — BENTO GRID DASHBOARD
   ============================================================================ */

.project-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1.55fr 1fr;
    gap: 16px;
    width: 100%;
    /* height set inline by JS via fitProjectBentoGrid() */
    box-sizing: border-box;
    padding-bottom: 4px;
}

.tile-document-control    { grid-column: 5 / span 8;  grid-row: 1; --tile-color: #d97706; --tile-color-soft: rgba(217, 119, 6, 0.10);  --tile-color-glow: rgba(217, 119, 6, 0.22); }
.tile-lookaheads          { grid-column: 1 / span 4;  grid-row: 1; --tile-color: #0696d7; --tile-color-soft: rgba(6, 150, 215, 0.10);  --tile-color-glow: rgba(6, 150, 215, 0.22); }
.tile-project-info-card   { grid-column: 5 / span 4;  grid-row: 2; --tile-color: #6366f1; --tile-color-soft: rgba(99, 102, 241, 0.10); --tile-color-glow: rgba(99, 102, 241, 0.22); }
.tile-procurement         { grid-column: 9 / span 4;  grid-row: 2; --tile-color: #0d9488; --tile-color-soft: rgba(13, 148, 136, 0.10); --tile-color-glow: rgba(13, 148, 136, 0.22); }

/* Dashboard-only: Action Items tile spans both rows on the left. The portal
   reuses .tile-lookaheads at row 1 only, so this override is scoped by ID. */
#projectBentoGrid .tile-lookaheads { grid-row: 1 / span 2; }

/* Legacy / portal-only tile classes. The portal's /portal/index.php placeholder
   bento grid (containers 1–6) still references these — keep them defined so the
   read-only personnel view continues to render its colored placeholder slots.
   None are used by the dashboard Command Center anymore. */
.tile-project-info        { grid-column: 1 / span 4; grid-row: 1; --tile-color: #475569; --tile-color-soft: rgba(71, 85, 105, 0.10); --tile-color-glow: rgba(71, 85, 105, 0.18); }
.tile-manpower-stack      { grid-column: 1 / span 2; grid-row: 2; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 0; min-width: 0; }
.tile-manpower            { grid-column: 1 / span 2; grid-row: 2; --tile-color: #059669; --tile-color-soft: rgba(5, 150, 105, 0.10);  --tile-color-glow: rgba(5, 150, 105, 0.22); }
.tile-approvers           { grid-column: 3 / span 2; grid-row: 2; --tile-color: #6366f1; --tile-color-soft: rgba(99, 102, 241, 0.10); --tile-color-glow: rgba(99, 102, 241, 0.22); }
.tile-p6                  { grid-column: 9 / span 4; grid-row: 2; --tile-color: #ea580c; --tile-color-soft: rgba(234, 88, 12, 0.10);  --tile-color-glow: rgba(234, 88, 12, 0.22); }

/* Foreman Meeting rich-text editors — global `* { padding: 0 }` reset in
   style.css wipes default <ul>/<ol> indent, which puts execCommand-inserted
   bullets BEFORE the content edge (i.e. clipped behind the editor's left
   padding). Restore standard list indent inside both rich-text surfaces
   (the section-panel editor on the tier-2 page and the item description
   editor in the item modal). */
#fm-section-editor ul,
#fm-section-editor ol,
#fm-item-description ul,
#fm-item-description ol {
    padding-left: 28px;
    margin: 4px 0;
}
#fm-section-editor li,
#fm-item-description li {
    margin: 2px 0;
}

.bento-tile {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}

.bento-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04), 0 0 0 1px var(--tile-color-glow);
    border-color: transparent;
}

.bento-tile-accent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--tile-color);
    transition: height 0.18s ease, opacity 0.18s ease;
    opacity: 0.85;
}
.bento-tile:hover .bento-tile-accent {
    height: 5px;
    opacity: 1;
}

.bento-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.bento-tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.bento-tile-title > span {
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bento-tile-title .bento-tile-count {
    flex-shrink: 0;
}

.bento-tile-icon {
    width: 28px;
    height: 28px;
    padding: 6px;
    color: var(--tile-color);
    background: var(--tile-color-soft);
    border-radius: 8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.bento-tile-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    background: var(--tile-color-soft);
    color: var(--tile-color);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.bento-tile-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bento-tile-action {
    font-size: 12px;
    font-weight: 600;
    color: var(--tile-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.bento-tile-action:hover {
    text-decoration: underline;
}

.bento-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--tile-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.bento-tile-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.bento-tile-body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Project Info tile --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    align-content: start;
}
.bento-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 18px 0 14px;
}
.info-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.info-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.info-value {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Document Control tile (5 vertically-divided sections) --- */
.doc-control-body {
    flex-direction: row !important;
    gap: 0;
}
.doc-section {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.doc-section + .doc-section {
    border-left: 1px solid #e5e7eb;
}
.doc-section:first-child { padding-left: 0; }
.doc-section:last-child { padding-right: 0; }
.doc-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
    min-width: 0;
}
.doc-section-title-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-section-link {
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.doc-section-link:hover {
    color: var(--tile-color, #d97706);
}
.doc-section-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 10px;
}
/* Bulleted list of drawings inside a doc-section.
   Section already has overflow:hidden so anything that won't fit is clipped
   — list does NOT scroll. Each item truncates with ellipsis.
   Markers are rendered INSIDE the li (list-style-position: inside) because
   each li also has overflow:hidden for the ellipsis, which would otherwise
   clip outside markers. */
.doc-drawings-list {
    list-style: disc inside;
    padding-left: 2px;
    margin: 0;
    min-height: 0;
    overflow: hidden;
}
.doc-drawings-list li {
    font-size: 11.5px;
    line-height: 1.55;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-drawings-list li::marker {
    color: #cbd5e1;
    font-size: 0.9em;
}
.doc-drawings-list li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.doc-drawings-list li a:hover {
    color: var(--tile-color, #d97706);
    text-decoration: underline;
}
.doc-drawings-list li.doc-empty-item {
    list-style: none;
    /* No negative margin — the bulleted siblings render their disc
       INSIDE the li (list-style: disc inside), so removing the bullet
       on the empty item leaves the text at the same x-position.
       Earlier `margin-left: -16px` was clipping the first word
       because the parent .doc-drawings-list has overflow: hidden. */
    color: #94a3b8;
    font-style: italic;
}

/* ----------------------------------------------------------------------
   Contracts viewer — right-pane split (Scope of Work | Schedule).
   Header + body shells match the Project Readiness vocabulary: uppercase
   letter-spaced section labels in slate, white backgrounds, subtle slate
   borders, the standard 28x28 refresh-style action button next to the title.
   The orange gradient previously used here (borrowed from P6 Imports) was
   too loud against the rest of the tier-2 chrome.
---------------------------------------------------------------------- */
.contract-pane-split {
    height: 100%;
    display: flex;
    flex-direction: row;
}
.contract-pane {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: white;
}
.contract-pane-divider {
    flex: 0 0 1px;
    background: #e5e7eb;
}
.contract-pane-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}
.contract-pane-title {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Spaces master/detail — section labels in the right-pane detail */
.spaces-detail-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 6px;
}
.contract-pane-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.contract-pane-action {
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}
.contract-pane-action:hover {
    color: #1e293b;
}
.contract-pane-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
/* Both bodies (Scope of Work + Schedule) now use the same P6-style folder
   tree primitives. Recolor the orange P6 accents to slate so the panel
   chrome reads as Project Readiness, not as the P6 Imports wizard. */
.contract-pane-body-scope,
.contract-pane-body-schedule {
    background: white;
}
.contract-pane-body-scope .p6-skip-checkbox,
.contract-pane-body-schedule .p6-skip-checkbox {
    accent-color: #475569;  /* slate-600, not P6 orange */
}
.contract-pane-body-scope .p6-tree-selectable:hover,
.contract-pane-body-schedule .p6-tree-selectable:hover {
    background: #f8fafc;    /* slate-50 hover, not orange */
}
/* The project-root and WBS-folder SVGs were inlined in dashboard.js with
   hard-coded orange strokes (#f97316 / #ea580c). Override via CSS so the
   icons inherit a slate stroke when used inside the contracts viewer. */
.contract-pane-body-scope .p6-tree-row svg[stroke="#f97316"],
.contract-pane-body-scope .p6-tree-row svg[stroke="#ea580c"],
.contract-pane-body-schedule .p6-tree-row svg[stroke="#f97316"],
.contract-pane-body-schedule .p6-tree-row svg[stroke="#ea580c"] {
    stroke: #475569;
}
/* Leaf rows (.p6-tree-activity) — click to expand the body text from a
   one-line ellipsis to a fully wrapped multi-line view. Pretty much every
   Exhibit C item has more body than fits on one line, so the row itself is
   the affordance — cursor changes to pointer, and on .expanded the body
   span wraps and the row aligns to the top. */
.contract-pane-body-scope .p6-tree-activity,
.contract-pane-body-schedule .p6-tree-activity {
    cursor: pointer;
}
.contract-pane-body-scope .p6-tree-activity:hover,
.contract-pane-body-schedule .p6-tree-activity:hover {
    background: #f8fafc;
}
.contract-pane-body-scope .p6-tree-activity.expanded,
.contract-pane-body-schedule .p6-tree-activity.expanded {
    align-items: flex-start;
    background: #f1f5f9;
    padding-top: 8px;
    padding-bottom: 8px;
}
/* !important is needed here because contractsRenderScopeLeaf() inlines
   white-space: nowrap / overflow: hidden / text-overflow: ellipsis on the
   spans for the default truncated state, and inline styles beat class
   selectors. The override has to be marked !important to win. */
.contract-pane-body-scope .p6-tree-activity.expanded .scope-leaf-body,
.contract-pane-body-scope .p6-tree-activity.expanded .scope-leaf-primary,
.contract-pane-body-schedule .p6-tree-activity.expanded .scope-leaf-body,
.contract-pane-body-schedule .p6-tree-activity.expanded .scope-leaf-primary {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
/* When expanded, give the SVGs a little top-nudge so they line up with the
   first line of the now-wrapping text. */
.contract-pane-body-scope .p6-tree-activity.expanded > svg,
.contract-pane-body-schedule .p6-tree-activity.expanded > svg {
    margin-top: 3px;
}

/* --- Lookaheads tile --- */
/* Header chip-buttons for Archives + Recycle Bin (sit next to the "+ New" CTA).
   Outlined ghost buttons that tint with the tile color on hover. Red badge for counts. */
.lookahead-header-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    font-family: inherit;
}
.lookahead-header-link:hover {
    background: var(--tile-color-soft, #f1f5f9);
    color: var(--tile-color, #0696d7);
    border-color: var(--tile-color-glow, #cbd5e1);
    text-decoration: none;
    transform: translateY(-1px);
}
.lookahead-header-link svg {
    width: 13px;
    height: 13px;
    opacity: 0.7;
    flex-shrink: 0;
}
.lookahead-header-link:hover svg {
    opacity: 1;
}
.lookahead-header-link-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
    margin-left: 2px;
    min-width: 16px;
    text-align: center;
}

.bento-tile-list {
    gap: 0;
    overflow: hidden;
}
.lookahead-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    margin-bottom: 6px;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.lookahead-row:hover {
    background: var(--tile-color-soft);
    border-color: var(--tile-color-glow);
}
.lookahead-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.lookahead-row-dot.is-published { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.lookahead-row-dot.is-draft     { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15); }

.lookahead-row-main {
    flex: 1;
    min-width: 0;
}
.lookahead-row-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.lookahead-row-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lookahead-row-stats {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.stat-chip {
    font-size: 11px;
    color: #475569;
    background: #ffffff;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    font-weight: 500;
    white-space: nowrap;
}
.lookahead-row-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.lookahead-row-pill.is-published { background: #d1fae5; color: #065f46; }
.lookahead-row-pill.is-draft     { background: #e2e8f0; color: #475569; }

.lookahead-row-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.lookahead-row-menu:hover {
    background: #ffffff;
    color: #0f172a;
}

/* --- Manpower (big stat) --- */
.bento-tile-stat {
    justify-content: center;
    gap: 4px;
}
.big-stat-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.big-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.big-stat-value.bento-stat-empty {
    font-size: 18px;
    color: #94a3b8;
    font-weight: 600;
}
.big-stat-sub {
    font-size: 13px;
    color: var(--tile-color);
    font-weight: 500;
}

/* --- Approvers chips --- */
.bento-tile-chips {
    overflow: hidden;
}
.approvers-chip-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
    align-content: flex-start;
}
.approver-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.approver-chip.is-company {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}
.approver-chip.is-role {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #d1d5db;
    font-style: italic;
}
.approver-chip-role { font-weight: 400; opacity: 0.75; }
.approver-chip-count { font-weight: 400; opacity: 0.7; }
.bento-loading {
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
}

/* --- P6 rows --- */
.p6-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff7ed;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.p6-row:hover {
    background: #ffe4cb;
}
.p6-row-main {
    flex: 1;
    min-width: 0;
}
.p6-row-name {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.p6-row-meta {
    font-size: 11px;
    color: #9a3412;
    margin-top: 2px;
}
.p6-more {
    text-align: center;
    font-size: 11px;
    color: var(--tile-color);
    padding: 4px 0;
    font-weight: 600;
    cursor: pointer;
}
.p6-more:hover { text-decoration: underline; }

/* --- Empty states --- */
.bento-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    text-align: center;
}
.bento-empty-text {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}
.bento-empty-cta {
    background: var(--tile-color);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.bento-empty-cta:hover { filter: brightness(1.08); }

/* ============================================================================
   PROCUREMENT TILE — 2x2 stat-card grid inside the bento tile
   ============================================================================ */

.tile-procurement.tile-procurement-active { cursor: pointer; }
.tile-procurement.tile-procurement-active:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04), 0 0 0 1px var(--tile-color-glow);
    border-color: transparent;
}
.tile-procurement.tile-procurement-active:hover .bento-tile-accent {
    height: 5px;
    opacity: 1;
}

.procurement-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    min-height: 0;
    flex: 1;
}

.procurement-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    min-width: 0;
    overflow: hidden;
}

.pc-stat-icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    margin-bottom: 4px;
}
.pc-stat-icon svg { width: 14px; height: 14px; }

.pc-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pc-stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: 2px;
}

/* Per-card accent colors (vibrant, per Rule #9) */
.pc-approved   .pc-stat-icon { background: rgba(16, 185, 129, 0.14);  color: #059669; }
.pc-submittals .pc-stat-icon { background: rgba(99, 102, 241, 0.14);  color: #6366f1; }
.pc-atrisk     .pc-stat-icon { background: rgba(239, 68, 68, 0.14);   color: #dc2626; }
.pc-decisions  .pc-stat-icon { background: rgba(245, 158, 11, 0.14);  color: #d97706; }

.pc-atrisk .pc-stat-value { color: #dc2626; }

/* ============================================================================
   PROCUREMENT COMMAND CENTER PAGE (tier-3 SPA view)
   ============================================================================ */

.procurement-page { padding: 8px 0 24px; }

.procurement-hero {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 1200px) {
    .procurement-hero { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .procurement-hero { grid-template-columns: repeat(2, 1fr); }
}

.hero-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.hero-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
}
.hero-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--card-accent, #0d9488);
}
.hero-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--card-accent-soft, rgba(13, 148, 136, 0.12));
    color: var(--card-accent, #0d9488);
    margin-bottom: 6px;
}
.hero-value {
    font-size: 36px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hero-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.hero-approved   { --card-accent: #059669; --card-accent-soft: rgba(16, 185, 129, 0.14); }
.hero-submittals { --card-accent: #6366f1; --card-accent-soft: rgba(99, 102, 241, 0.14); }
.hero-atrisk    { --card-accent: #dc2626; --card-accent-soft: rgba(239, 68, 68, 0.14); }
.hero-atrisk .hero-value { color: #dc2626; }
.hero-decisions  { --card-accent: #d97706; --card-accent-soft: rgba(245, 158, 11, 0.14); }
.hero-catalog    { --card-accent: #7c3aed; --card-accent-soft: rgba(139, 92, 246, 0.14); }

/* Smaller risk summary cards (Overdue / At Risk / On Track / Delivered) */
.procurement-risk-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 900px) { .procurement-risk-cards { grid-template-columns: repeat(2, 1fr); } }

.procurement-risk-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--risk-color);
    border-radius: 10px;
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pr-overdue   { --risk-color: #dc2626; }
.pr-atrisk    { --risk-color: #ea580c; }
.pr-ontrack   { --risk-color: #059669; }
.pr-delivered { --risk-color: #0d9488; }

.pr-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pr-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--risk-color);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Filter toolbar */
.procurement-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.procurement-toolbar-left { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.procurement-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.procurement-filter-label select {
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    font-weight: 500;
}
.procurement-toolbar-right { font-size: 13px; color: #64748b; font-weight: 500; }
.procurement-toolbar-right span {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* Main data table */
.procurement-table-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: auto;
    max-height: calc(100vh - 380px);
}
.procurement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.procurement-table thead th {
    position: sticky; top: 0;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    z-index: 1;
}
.procurement-table thead th.num { text-align: right; }
.procurement-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.procurement-table thead th.sortable:hover { background: #eef2ff; color: #1e293b; }
.procurement-table thead th.sortable .sort-arrow {
    display: inline-block;
    margin-left: 4px;
    color: #cbd5e1;
    font-size: 10px;
    width: 0.7em;
    text-align: center;
}
.procurement-table thead th.sortable .sort-arrow::after { content: '↕'; }
.procurement-table thead th.sortable[data-sort-dir="asc"]  .sort-arrow::after { content: '▲'; color: #2563eb; }
.procurement-table thead th.sortable[data-sort-dir="desc"] .sort-arrow::after { content: '▼'; color: #2563eb; }
.procurement-table thead th.sortable[data-sort-dir] { color: #1e293b; }
body.dark-mode .procurement-table thead th.sortable:hover { background: #1e293b; color: #e2e8f0; }
body.dark-mode .procurement-table thead th.sortable[data-sort-dir] { color: #e2e8f0; }
body.dark-mode .procurement-table thead th.sortable[data-sort-dir="asc"]  .sort-arrow::after,
body.dark-mode .procurement-table thead th.sortable[data-sort-dir="desc"] .sort-arrow::after { color: #60a5fa; }

.procurement-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    vertical-align: middle;
}
.procurement-table tbody tr:hover { background: #f8fafc; }
.procurement-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.procurement-table .cell-product {
    font-weight: 600;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.procurement-table .cell-label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.procurement-table .cell-needed,
.procurement-table thead th:nth-child(3) { white-space: nowrap; }
.procurement-table .actions-col { white-space: nowrap; text-align: right; }
.procurement-table .procurement-empty {
    text-align: center;
    padding: 48px 20px;
    color: #94a3b8;
    font-size: 13px;
}

/* Status / submittal pills */
.pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.pill-status.pill-not_ordered { background: rgba(148, 163, 184, 0.20); color: #475569; }
.pill-status.pill-ordered     { background: rgba(99, 102, 241, 0.16);  color: #4338ca; }
.pill-status.pill-in_transit  { background: rgba(245, 158, 11, 0.16);  color: #b45309; }
.pill-status.pill-delivered   { background: rgba(13, 148, 136, 0.16);  color: #0f766e; }

.pill-sub.pill-sub-not_received        { background: rgba(148, 163, 184, 0.20); color: #475569; }
.pill-sub.pill-sub-not_sent            { background: rgba(148, 163, 184, 0.20); color: #475569; }
.pill-sub.pill-sub-in_process          { background: rgba(99, 102, 241, 0.16);  color: #4338ca; }
.pill-sub.pill-sub-approved            { background: rgba(16, 185, 129, 0.16);  color: #047857; }
.pill-sub.pill-sub-approved_with_comments { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.pill-sub.pill-sub-rejected_resubmit   { background: rgba(239, 68, 68, 0.16);   color: #b91c1c; }

/* Company chip — colored by the company's color_hex */
.company-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--company-color, #475569);
    background: color-mix(in srgb, var(--company-color, #64748b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--company-color, #64748b) 24%, transparent);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.show-in-schedule-link {
    color: #0d9488;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.show-in-schedule-link:hover { text-decoration: underline; }

/* Dark mode overrides */
body.dark-mode .procurement-stat-card { background: #1e293b; border-color: #334155; }
body.dark-mode .pc-stat-value { color: #e2e8f0; }
body.dark-mode .pc-stat-label { color: #94a3b8; }
body.dark-mode .pc-atrisk .pc-stat-value { color: #f87171; }

body.dark-mode .hero-stat-card { background: #1e293b; border-color: #334155; }
body.dark-mode .hero-value { color: #e2e8f0; }
body.dark-mode .hero-label { color: #94a3b8; }
body.dark-mode .hero-atrisk .hero-value { color: #f87171; }

body.dark-mode .procurement-risk-card { background: #1e293b; border-color: #334155; }
body.dark-mode .pr-label { color: #94a3b8; }

body.dark-mode .procurement-toolbar-right { color: #94a3b8; }
body.dark-mode .procurement-toolbar-right span { color: #e2e8f0; }
body.dark-mode .procurement-filter-label { color: #94a3b8; }
body.dark-mode .procurement-filter-label select {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .procurement-table-wrap { background: #1e293b; border-color: #334155; }
body.dark-mode .procurement-table thead th {
    background: #0f172a;
    color: #94a3b8;
    border-bottom-color: #334155;
}
body.dark-mode .procurement-table tbody td { color: #e2e8f0; border-bottom-color: #1e293b; }
body.dark-mode .procurement-table tbody tr:hover { background: #0f172a; }
body.dark-mode .procurement-table .procurement-empty { color: #64748b; }

/* Responsive — collapse to single column under 1100px */
@media (max-width: 1100px) {
    .project-bento-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
    }
    .tile-document-control                { grid-column: 1 / span 6; grid-row: auto; }
    .tile-lookaheads                      { grid-column: 1 / span 6; grid-row: auto; }
    #projectBentoGrid .tile-lookaheads    { grid-row: auto; }
    .tile-project-info-card               { grid-column: 1 / span 3; grid-row: auto; }
    .tile-procurement                     { grid-column: 4 / span 3; grid-row: auto; }
    /* Legacy / portal-only */
    .tile-project-info                    { grid-column: 1 / span 3; grid-row: auto; }
    .tile-manpower-stack                  { grid-column: 4 / span 3; grid-row: auto; }
    .tile-manpower                        { grid-column: 1 / span 3; grid-row: auto; }
    .tile-approvers                       { grid-column: 1 / span 3; grid-row: auto; }
    .tile-p6                              { grid-column: 4 / span 3; grid-row: auto; }
}

/* Action Items tile — 5-column grid of 21 task shortcuts (5 rows × 5 cols).
   Tile spans both rows of the bento grid (rowspan=2). Each cell is icon +
   label only — no sublabel — so all 21 fit without scroll. */
.ai-action-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-gap: 6px;
    row-gap: 0;
}
.ai-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
    text-align: center;
}
.ai-action:hover {
    background: #f8fafc;
}
.ai-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
}
.ai-action-icon svg {
    width: 20px;
    height: 20px;
}
.ai-action-label {
    font-weight: 600;
    font-size: 12px;
    color: #111827;
    line-height: 1.2;
}
.ai-action-sub {
    display: none;
}
body.dark-mode .ai-action:hover {
    background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .ai-action-label { color: #e5e7eb; }

/* ===================================================================== */
/* Materials Catalog — embedded inline on the Construction Drawings page */
/* (right column next to the Plan Set PDFs list). Read-only browse of    */
/* the AI-discovered project_materials registry: search box + All/Code/  */
/* Name field checkboxes, filtered locally on every keystroke.           */
/* ===================================================================== */

.materials-inline-panel {
    border: 1px solid #bbf7d0;
    background: white;
    border-radius: 8px;
    overflow: hidden;     /* clip green title-bar to rounded corners */
    box-sizing: border-box;
    width: 250px;
    transition: width 0.5s ease;
}
.materials-inline-panel.is-expanded {
    width: 600px;
}

/* Green title strip — full width of the (now 250px) panel. Title on the
   left, search on the right (search is .materials-search with margin-left: auto). */
.materials-title-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
    border-bottom: 1px solid #bbf7d0;
}

.materials-title-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #14532d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.materials-search {
    width: 75px;
    flex: 0 0 75px;
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    margin-left: auto;   /* push search to the right edge of the title bar */
    transition: width 0.5s ease, flex-basis 0.5s ease;
}
/* When the catalog is expanded, the search box widens from 75px to
   300px in lockstep with the panel growth. */
.materials-inline-panel.is-expanded .materials-search {
    width: 300px;
    flex: 0 0 300px;
}
.materials-search:focus {
    outline: none;
    border-color: #0284c7;
}

/* ===================================================================== */
/* Ask Claude — per-page chat search bar on the PDF page viewer.         */
/* Mirrors the Materials Catalog small-grows-on-focus pattern above,     */
/* but lives in #spaNavRight beside the Create IDD / Fit-to-window       */
/* buttons. 50% opacity when not focused so it doesn't compete with      */
/* the PDF or the green Create IDD button.                               */
/* ===================================================================== */
.idd-page-panel {
    position: relative;
    border: 1px solid #c7d2fe;
    background: white;
    border-radius: 8px;
    overflow: visible;
    box-sizing: border-box;
    width: 240px;
    opacity: 0.5;
    transition: width 0.4s ease, opacity 0.25s ease;
}

/* Overlay variant: floats inside #iddViewerCanvasWrap at the top-right corner
   of the drawing canvas, layered above the canvas but below modals. */
.idd-page-panel-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.idd-page-panel:hover,
.idd-page-panel.is-expanded {
    opacity: 1;
}
.idd-page-panel.is-expanded {
    width: 560px;
}

.idd-page-title-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border-bottom: 1px solid #c7d2fe;
    border-radius: 7px 7px 0 0;
}

.idd-page-title-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3730a3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.idd-page-ask {
    width: 90px;
    flex: 0 0 90px;
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    margin-left: auto;
    transition: width 0.4s ease, flex-basis 0.4s ease;
}
.idd-page-panel.is-expanded .idd-page-ask {
    width: 320px;
    flex: 0 0 320px;
}
.idd-page-ask:focus {
    outline: none;
    border-color: #6366f1;
}

/* Thread drops down from the title bar like a popover; collapsed = hidden,
   expanded = scrollable list of Q/A turns with citation chips. */
.idd-page-thread {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    background: white;
    border-radius: 0 0 7px 7px;
}
.idd-page-panel.is-expanded .idd-page-thread {
    max-height: 360px;
    overflow-y: auto;
    opacity: 1;
    padding: 8px 10px;
    border-top: none;
}
.idd-page-thread .turn {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
}
.idd-page-thread .turn-user {
    color: #1e293b;
    background: #eef2ff;
    border-radius: 6px;
    padding: 6px 9px;
}
.idd-page-thread .turn-assistant {
    color: #1f2937;
    padding: 4px 2px;
    white-space: pre-wrap;
}
.idd-page-thread .citations {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.idd-page-thread .cite-chip {
    background: #e0e7ff;
    color: #3730a3;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.idd-page-thread .cite-chip:hover {
    background: #c7d2fe;
}
.idd-page-thread .cost-line {
    font-size: 10px;
    color: #94a3b8;
    text-align: right;
    margin-top: 4px;
}

/* Dark-mode overrides */
body.dark-mode .idd-page-panel {
    background: #1f2937;
    border-color: #4338ca;
}
body.dark-mode .idd-page-title-bar {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
    border-bottom-color: #4338ca;
}
body.dark-mode .idd-page-title-bar-label { color: #c7d2fe; }
body.dark-mode .idd-page-ask {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #475569;
}
body.dark-mode .idd-page-ask:focus { border-color: #818cf8; }
body.dark-mode .idd-page-thread { background: #1f2937; }
body.dark-mode .idd-page-thread .turn-user {
    color: #e5e7eb;
    background: #312e81;
}
body.dark-mode .idd-page-thread .turn-assistant { color: #e5e7eb; }
body.dark-mode .idd-page-thread .cite-chip {
    background: #3730a3;
    color: #e0e7ff;
}
body.dark-mode .idd-page-thread .cite-chip:hover { background: #4338ca; }
body.dark-mode .idd-page-thread .cost-line { color: #64748b; }

.materials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.materials-table thead th {
    background: #f1f5f9;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 8px;
    border-bottom: 1px solid #cbd5e1;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}
.materials-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.materials-table tbody tr:hover td { background: #f0f9ff; }

.materials-code-badge {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.materials-drawing-link {
    color: #0369a1;
    text-decoration: underline;
    cursor: pointer;
}
.materials-drawing-link:hover { color: #0c4a6e; }

.materials-drawing-multi {
    color: #475569;
    font-style: italic;
}

/* Construction Drawings two-column layout. Left column flexes to fill
   remaining space; right column is a vertical stack of compact pills
   (materials catalog, plan-set search). Each pill independently
   widens on focus (see .materials-inline-panel + .idd-search-panel
   .is-expanded rules below). */
.construction-split {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.construction-split > :first-child {
    flex: 1 1 auto;
    min-width: 0;                   /* prevent table overflow forcing growth */
}
.right-pill-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;                 /* column width is sum of widest pill */
    align-items: flex-end;          /* pills hug right edge when narrow */
}
/* Table slot is folded away when the catalog is in its compact 250px
   state — collapses to zero height + zero opacity + zero padding so
   the green title strip sits alone. When the grid expands (search-box
   focus), the slot's height + padding + opacity unfurl in sync with
   the column widening. */
#materialsTableSlot {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 10px;
    transition: max-height 0.5s ease, opacity 0.25s ease 0.15s,
                padding-top 0.5s ease, padding-bottom 0.5s ease;
}
.materials-inline-panel.is-expanded #materialsTableSlot {
    max-height: 800px;
    opacity: 1;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Below 1100px viewport: drop the side-by-side split to a stacked
   single column so each section renders full-width. */
@media (max-width: 1100px) {
    .construction-split {
        flex-direction: column;
    }
    .right-pill-stack,
    .materials-inline-panel,
    .materials-inline-panel.is-expanded,
    .idd-search-panel,
    .idd-search-panel.is-expanded {
        width: 100% !important;
        align-items: stretch;
    }
}

/* Dark-mode overrides for the embedded materials catalog. */
body.dark-mode .materials-inline-panel {
    background: #1e293b;
    border-color: #14532d;
}
body.dark-mode .materials-title-bar {
    background: linear-gradient(135deg, #14271c 0%, #0f1e1c 100%);
    border-bottom-color: #14532d;
}
body.dark-mode .materials-title-bar-label { color: #86efac; }
body.dark-mode .materials-search {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}
body.dark-mode .materials-search:focus { background: #1e293b; }
body.dark-mode .materials-table thead th {
    background: #0f172a;
    color: #cbd5e1;
    border-bottom-color: #475569;
}
body.dark-mode .materials-table td {
    border-bottom-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .materials-table tbody tr:hover td { background: #1e3a5f; }
body.dark-mode .materials-code-badge {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #1d4ed8;
}
body.dark-mode .materials-drawing-link { color: #93c5fd; }
body.dark-mode .materials-drawing-link:hover { color: #bfdbfe; }
body.dark-mode .materials-drawing-multi { color: #94a3b8; }

/* ===================================================================== */
/* Plan Set Search — the blue twin of the Materials Catalog pill.        */
/* Same compact-pill shape; expands on focus to reveal results below.    */
/* Replaces the old full-width search bar that used to sit at the top.   */
/* ===================================================================== */

.idd-search-panel {
    border: 1px solid #bae6fd;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    width: 250px;
    transition: width 0.5s ease;
}
.idd-search-panel.is-expanded {
    width: 600px;
}

.idd-search-title-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
    border-bottom: 1px solid #bae6fd;
}

.idd-search-title-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #075985;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.idd-search-input {
    width: 75px;
    flex: 0 0 75px;
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    margin-left: auto;
    transition: width 0.5s ease, flex-basis 0.5s ease;
}
.idd-search-panel.is-expanded .idd-search-input {
    width: 300px;
    flex: 0 0 300px;
}
.idd-search-input:focus {
    outline: none;
    border-color: #0284c7;
}

/* Results slot — folded away when compact, unfurls when expanded. Same
   max-height / opacity / padding transition pattern as the materials
   table slot for visual consistency. */
.idd-search-results-slot {
    max-height: 0;
    opacity: 0;
    overflow: hidden auto;
    padding: 0 10px;
    transition: max-height 0.5s ease, opacity 0.25s ease 0.15s,
                padding-top 0.5s ease, padding-bottom 0.5s ease;
}
.idd-search-panel.is-expanded .idd-search-results-slot {
    max-height: 800px;
    opacity: 1;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Dark-mode overrides matching the materials catalog approach. */
body.dark-mode .idd-search-panel {
    background: #1e293b;
    border-color: #075985;
}
body.dark-mode .idd-search-title-bar {
    background: linear-gradient(135deg, #0c1e2e 0%, #0f1c1e 100%);
    border-bottom-color: #075985;
}
body.dark-mode .idd-search-title-bar-label { color: #7dd3fc; }
body.dark-mode .idd-search-input {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}
body.dark-mode .idd-search-input:focus { background: #1e293b; }

/* ===================================================================== */
/* Bounding-box auto-extractor — per-thumbnail tints on the drawing      */
/* detail page. The card transitions through orange (queued) → red       */
/* (currently processing) → green (just finished, briefly) → no tint.    */
/* The thumbnail image itself stays untouched; only the card background  */
/* + border change so the page caption underneath remains readable.      */
/* ===================================================================== */

.idd-drawing-thumb-cell.bbox-queued {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
}
.idd-drawing-thumb-cell.bbox-processing {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18) !important;
}
.idd-drawing-thumb-cell.bbox-done {
    background: #dcfce7 !important;
    border-color: #6ee7b7 !important;
    transition: background 0.4s ease-out, border-color 0.4s ease-out;
}

body.dark-mode .idd-drawing-thumb-cell.bbox-queued {
    background: #3b2410 !important;
    border-color: #c2410c !important;
}
body.dark-mode .idd-drawing-thumb-cell.bbox-processing {
    background: #3b1818 !important;
    border-color: #b91c1c !important;
}
body.dark-mode .idd-drawing-thumb-cell.bbox-done {
    background: #14271c !important;
    border-color: #15803d !important;
}