/* ============================================================
   FLOWPLANE — C.A. Murren & Sons
   Brand-compliant stylesheet v2.0
   Colors per CAM Brand Guidelines v7 (Dec 2024)
   ============================================================ */
@import url('css/themes.css');
@import url('css/theme-telemetry.css');

/* --- CSS Custom Properties --- */
:root {
    --cam-navy:        #172b54;
    --cam-midnight:    #000f33;
    --cam-yellow:      #ffc529;
    --cam-green:       #007f65;
    --cam-steel:       #637f8d;
    --cam-gravel:      #9bbabd;
    --cam-paver:       #bbb8af;
    --cam-rust:        #d85f27;
    --cam-light-gray:  #e5e5e5;
    --cam-white:       #ffffff;

    --font-heading:    var(--font-display, 'Arial Narrow', Arial, sans-serif);
    --font-body:       var(--font-main, Arial, Helvetica, sans-serif);

    --sidebar-width:   312px;
    --topbar-height:   64px;
    --border-radius:   4px;
    --card-shadow:     0 1px 4px rgba(0,0,0,0.12);

    /* Semantic surface tokens (light defaults) */
    --surface-primary:   var(--bg-card);
    --surface-secondary: var(--bg-row);
    --surface-tertiary:  var(--bg-row-alt);
    --surface-hover:     var(--bg-row);
    --surface-inset:     var(--bg-row-alt);
    --text-faint:        var(--text-muted);
    --text-placeholder:  var(--text-muted);
    --border-default:    var(--border);
    --border-light:      var(--border-dim);
    --border-medium:     var(--border);
    --border-input:      var(--border);
}

/* --- Dark Theme --- */
html.dark {
    --cam-light-gray:    var(--bg-page);
    --cam-white:         var(--bg-card);

    --surface-primary:   var(--bg-card);
    --surface-secondary: var(--bg-row);
    --surface-tertiary:  var(--bg-row-alt);
    --surface-hover:     var(--bg-row);
    --surface-inset:     var(--bg-row-alt);
    --text-faint:        var(--text-muted);
    --text-placeholder:  var(--text-muted);
    --border-default:    var(--border);
    --border-light:      var(--border-dim);
    --border-medium:     var(--border);
    --border-input:      var(--border);
    --card-shadow:       0 1px 4px rgba(0,0,0,0.4);

    --cam-navy:          var(--bg-sidebar);
    --cam-steel:         var(--text-secondary);
    --cam-gravel:        var(--text-muted);

    color-scheme: dark;
}

/* Dark theme — broad surface overrides */
html.dark,
html.dark body {
    background-color: var(--cam-light-gray);
    color: var(--text-primary);
}

html.dark .top-row {
    background-color: var(--bg-topbar) !important;
    border-bottom-color: rgba(255,197,41,0.3) !important;
}

html.dark .top-row .brand-label { color: var(--text-on-dark); }
html.dark .top-row .user-info { color: var(--text-on-dark-secondary); }

html.dark .sidebar {
    background-color: var(--bg-sidebar) !important;
}

html.dark article.content {
    background-color: var(--cam-light-gray) !important;
}

html.dark main {
    background-color: var(--cam-light-gray) !important;
}

/* Cards, tables, panels */
html.dark .card,
html.dark .fp-kpi-card,
html.dark .fp-detail-panel,
html.dark .fp-opp-section,
html.dark .modal-content {
    background: var(--surface-primary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

html.dark .table {
    --bs-table-bg: var(--surface-primary);
    --bs-table-color: var(--text-primary);
    --bs-table-striped-bg: var(--surface-secondary);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-border-color: var(--border-default);
    color: var(--text-primary);
}

html.dark .table-dark {
    --bs-table-bg: var(--bg-sidebar);
    --bs-table-color: var(--text-on-dark);
}

html.dark .table-danger { --bs-table-bg: var(--gonogo-nogo-bg); --bs-table-color: var(--gonogo-nogo-text); }
html.dark .table-warning { --bs-table-bg: var(--gonogo-conditional-bg); --bs-table-color: var(--gonogo-conditional-text); }

/* Forms */
html.dark .form-control,
html.dark .form-select,
html.dark .fp-opp-field-input,
html.dark .fp-opp-field-select,
html.dark .fp-opp-field-textarea {
    background-color: var(--surface-tertiary);
    border-color: var(--border-input);
    color: var(--text-primary);
}

html.dark .form-control:focus,
html.dark .form-select:focus {
    border-color: var(--cam-yellow);
    box-shadow: 0 0 0 3px rgba(255,197,41,0.15);
}

/* Badges, alerts */
html.dark .badge.bg-light {
    background: var(--surface-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Detail panel components */
html.dark .fp-detail-overlay { background: rgba(0,0,0,0.65); }
html.dark .fp-detail-header { background: var(--bg-sidebar); }
html.dark .fp-detail-stage-banner { background: var(--surface-secondary); border-color: var(--border-default); }
html.dark .fp-detail-body { background: var(--surface-primary); }
html.dark .fp-detail-footer { background: var(--surface-secondary); border-color: var(--border-default); }
html.dark .fp-detail-value-card { background: var(--surface-secondary); }
html.dark .fp-detail-divider { background: var(--border-default); }
html.dark .fp-detail-grid { color: var(--text-primary); }
html.dark .fp-detail-label { color: var(--text-muted); }
html.dark .fp-detail-value { color: var(--text-primary); }

/* Opportunity detail page */
html.dark .fp-opp-page-header { background: var(--surface-primary); border-color: var(--border-default); }
html.dark .fp-opp-summary-nav { background: var(--surface-primary); border-color: var(--border-default); }
html.dark .fp-opp-summary-content { background: var(--cam-light-gray); }
html.dark .fp-opp-summary-nav-item { color: var(--text-muted); }
html.dark .fp-opp-summary-nav-item:hover { color: var(--text-primary); background: var(--surface-hover); }
html.dark .fp-opp-summary-nav-item.active { color: var(--cam-yellow); border-left-color: var(--cam-yellow); background: var(--surface-hover); }
html.dark .fp-opp-section-header { background: var(--surface-secondary); border-color: var(--border-default); }
html.dark .fp-opp-field-row { border-color: var(--border-light); }
html.dark .fp-opp-field-label { color: var(--text-muted); }
html.dark .fp-opp-field-value { color: var(--text-primary); }
html.dark .fp-opp-field-value.fp-empty { color: var(--text-placeholder); }
html.dark .fp-opp-field-value.fp-readonly { background: var(--surface-secondary); border-color: var(--border-default); }
html.dark .fp-opp-text-block { color: var(--text-primary); }
html.dark .fp-opp-text-block.fp-empty { color: var(--text-placeholder); }

/* Stage timeline */
html.dark .fp-stage-tl-item:not(:last-child)::after { background: var(--border-default); }
html.dark .fp-stage-tl-dot { background: var(--border-default); border-color: var(--text-faint); }
html.dark .fp-stage-tl-label { color: var(--text-muted); }

/* Tables inside panels */
html.dark .fp-opp-table th { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-muted); }
html.dark .fp-opp-table td { border-color: var(--border-light); color: var(--text-primary); }
html.dark .fp-opp-table-add-row { background: var(--surface-secondary); border-color: var(--border-default); }

/* KPI cards */
html.dark .fp-kpi-card .card-body { color: var(--text-primary); }
html.dark .kpi-label { color: var(--text-muted); }

/* Page headers */
html.dark .fp-page-header { color: var(--text-primary); }
html.dark .fp-page-sub { color: var(--text-muted); }

/* Filter bars */
html.dark .fp-filter-bar label { color: var(--text-muted); }
html.dark .fp-filter-bar select,
html.dark .form-select {
    background-color: var(--surface-tertiary);
    border-color: var(--border-input);
    color: var(--text-primary);
}
html.dark .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 191, 165, 0.15);
}
html.dark input[type="date"] {
    background-color: var(--surface-tertiary);
    border-color: var(--border-input);
    color: var(--text-primary);
    color-scheme: dark;
}

/* Calendar component */
html.dark .fp-cal-grid { background: var(--surface-primary); border-color: var(--border-default); }
html.dark .fp-cal-day { border-color: var(--border-light); }
html.dark .fp-cal-day-num { color: var(--text-primary); }
html.dark .fp-cal-day.fp-cal-other { background: var(--surface-secondary); }
html.dark .fp-cal-header-row th { background: var(--surface-secondary); color: var(--text-muted); border-color: var(--border-default); }

/* Workload chart */
html.dark .fp-workload-title { color: var(--text-primary); }
html.dark .fp-workload-subtitle { color: var(--text-muted); }
html.dark .fp-workload-summary { color: var(--text-muted); }
html.dark .fp-workload-label { color: var(--text-secondary); }
html.dark .fp-workload-bar-wrap { background: var(--surface-tertiary); }
html.dark .fp-workload-value { color: var(--text-muted); }
html.dark .fp-workload-opp-tag { background: var(--gonogo-override-bg); color: var(--gonogo-override-text); }
html.dark .fp-workload-empty { border-color: var(--border-default); color: var(--text-faint); }
html.dark .fp-section-divider { border-color: var(--border-default); }

/* Modals */
html.dark .modal-header { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-primary); }
html.dark .modal-body { background: var(--surface-primary); color: var(--text-primary); }
html.dark .modal-footer { background: var(--surface-secondary); border-color: var(--border-default); }
html.dark .btn-close { filter: invert(1); }

/* Company/Contact detail */
html.dark .fp-company-stat-card { background: var(--surface-secondary); border-color: var(--border-default); }
html.dark .fp-contact-group-row { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-primary); }
html.dark .fp-contact-group-row:hover { background: var(--surface-hover); }
html.dark .fp-contact-stat-row { border-color: var(--border-light); }
html.dark .fp-contact-stat-row-label { color: var(--text-muted); }
html.dark .fp-contact-stat-row-value { color: var(--text-primary); }
html.dark .fp-pill-badge { background: var(--gonogo-override-bg); color: var(--gonogo-override-text); }
html.dark .fp-collapse-toggle { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-primary); }
html.dark .fp-collapse-toggle:hover { background: var(--surface-hover); }

/* Edit mode */
html.dark .fp-edit-mode-banner { background: var(--gonogo-conditional-bg); border-color: var(--gonogo-conditional-border); color: var(--gonogo-conditional-text); }

/* Dropdown (settings/admin) */
html.dark .fp-admin-dropdown,
html.dark .fp-settings-dropdown {
    background: var(--surface-primary);
    border-color: var(--border-default);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
html.dark .fp-dropdown-header { color: var(--text-faint); border-color: var(--border-default); }
html.dark .fp-dropdown-item { color: var(--text-primary); }
html.dark .fp-dropdown-item:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Sync page */
html.dark .fp-sync-entity-card { background: var(--surface-primary); border-color: var(--border-default); }
html.dark .fp-sync-entity-card:hover { border-color: var(--cam-yellow); }
html.dark .fp-sync-detail-panel { border-color: var(--border-default); }
html.dark .fp-sync-detail-header { background: var(--surface-secondary); border-color: var(--border-default); color: var(--text-primary); }
html.dark .fp-sync-detail-meta { color: var(--text-muted); }
html.dark .fp-sync-summary-bar { background: var(--gonogo-go-bg); color: var(--gonogo-go-text); border-color: var(--border-default); }
html.dark .fp-sync-no-selection { border-color: var(--border-default); color: var(--text-faint); }
html.dark .fp-clickable-row:hover { background: var(--surface-hover) !important; }
html.dark .fp-row-selected { background: var(--gonogo-override-bg) !important; border-left-color: var(--gonogo-override-text); }
html.dark .fp-sync-connection-card.fp-conn-ok { background: var(--gonogo-go-bg); color: var(--gonogo-go-text); border-color: var(--gonogo-go-border); }
html.dark .fp-sync-connection-card.fp-conn-error { background: var(--gonogo-nogo-bg); color: var(--gonogo-nogo-text); border-color: var(--gonogo-nogo-border); }
html.dark .fp-sync-connection-card.fp-conn-neutral { background: var(--surface-secondary); color: var(--text-muted); border-color: var(--border-default); }

/* Projects page */
html.dark .fp-project-card { background: var(--surface-primary); border-color: var(--border-default); }
html.dark .fp-project-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
html.dark .fp-project-card-body { color: var(--text-primary); }
html.dark .fp-project-name { color: var(--text-primary); }
html.dark .fp-project-number { color: var(--text-muted); }
html.dark .fp-project-client { color: var(--text-secondary); }
html.dark .fp-project-location { color: var(--text-muted); }
html.dark .fp-project-card-footer { border-color: var(--border-light); }
html.dark .fp-projects-filter-bar { background: var(--surface-secondary); border-color: var(--border-default); }
html.dark .fp-projects-results { color: var(--text-muted); }
html.dark .fp-filter-chip { background: var(--gonogo-override-bg); color: var(--gonogo-override-text); }

/* Reports page */
html.dark .nav-tabs .nav-link { color: var(--text-muted); }
html.dark .nav-tabs .nav-link.active { background: var(--surface-primary); color: var(--text-primary); border-color: var(--border-default); }

/* News page */
html.dark .fp-news-card { background: var(--surface-primary); border-color: var(--border-default); }
html.dark .fp-news-card:hover { border-color: var(--cam-yellow); }

/* Scrollbar */
html.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-track { background: var(--cam-light-gray); }
html.dark ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--font-main, var(--font-body));
    font-size: 14px;
    color: var(--text-primary, var(--cam-navy));
    background-color: var(--bg-page, var(--cam-light-gray));
    margin: 0;
    padding: 0;
    height: 100%;
}

/* --- Layout --- */
.page {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.sidebar {
    background-color: var(--bg-sidebar, var(--cam-navy));
    width: var(--sidebar-width);
    height: calc(100vh - var(--topbar-height));
    position: sticky;
    top: var(--topbar-height);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

/* Hide sidebar on mobile + iPad portrait (< 992px) — unless toggle is active */
@media (max-width: 991px) {
    .sidebar { display: none !important; }
    .sidebar.sidebar-tablet-open {
        display: block !important;
        position: fixed;
        left: 0;
        top: var(--topbar-height);
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        height: calc(100vh - var(--topbar-height));
        z-index: 1050;
        overflow-y: auto;
        box-shadow: 4px 0 16px rgba(0,0,0,0.3);
    }
    /* Show nav items and hide internal toggler when sidebar is opened via topbar button */
    .sidebar.sidebar-tablet-open .nav-scrollable {
        display: block !important;
        height: calc(100vh - var(--topbar-height) - 200px);
        overflow-y: auto;
    }
    .sidebar.sidebar-tablet-open .navbar-toggler {
        display: none !important;
    }
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

/* Tablet (992-1024px): collapsed sidebar — icon-only nav */
@media (min-width: 992px) and (max-width: 1024px) {
    /* Hide text elements when collapsed */
    .sidebar:not(.sidebar-tablet-open) .fp-nav-section-label,
    .sidebar:not(.sidebar-tablet-open) .fp-nav-divider,
    .sidebar:not(.sidebar-tablet-open) .fp-nav-brand-name,
    .sidebar:not(.sidebar-tablet-open) .fp-nav-sub,
    .sidebar:not(.sidebar-tablet-open) .fp-nav-chevron,
    .sidebar:not(.sidebar-tablet-open) .fp-nav-badge {
        display: none !important;
    }

    /* Shrink brand logo */
    .sidebar:not(.sidebar-tablet-open) .fp-nav-brand {
        justify-content: center;
        padding: 10px 4px;
    }
    .sidebar:not(.sidebar-tablet-open) .fp-nav-brand-logo {
        width: 36px;
        height: 36px;
    }

    /* Icon-only nav links: hide text via font-size:0, restore on icon */
    .sidebar:not(.sidebar-tablet-open) .nav-link {
        font-size: 0 !important;
        justify-content: center;
        padding: 0.5rem 0 !important;
        gap: 0 !important;
    }
    .sidebar:not(.sidebar-tablet-open) .nav-link i {
        font-size: 1.15rem !important;
    }

    /* Remove horizontal padding on collapsed nav items */
    .sidebar:not(.sidebar-tablet-open) .nav-item.px-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Prevent details groups from expanding when collapsed */
    .sidebar:not(.sidebar-tablet-open) details.fp-nav-group {
        pointer-events: none;
    }
    .sidebar:not(.sidebar-tablet-open) details.fp-nav-group > summary {
        pointer-events: auto;
    }
}

.page > main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-height));
    overflow-x: hidden;
}

/* --- Top Bar --- */
.top-row {
    background-color: var(--bg-topbar, var(--cam-white));
    height: var(--topbar-height);
    border-bottom: var(--topbar-accent-height, 2px) solid var(--topbar-accent-border, var(--cam-yellow));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 200;
}

.top-row .brand-label {
    font-family: var(--font-display, var(--font-heading));
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-logo, var(--cam-navy));
}

.top-row .user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary, var(--cam-steel));
}

/* --- Sidebar Brand Area --- moved to NavMenu.razor.css as sb-brand ---*/

/* --- Nav Links --- */
.nav-item {
    padding: 0 0.5rem;
    margin-bottom: 1px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius);
    color: var(--nav-text, var(--text-muted));
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: var(--sidebar-active-bg, rgba(255,197,41,0.12));
    color: var(--sidebar-active-text, var(--cam-yellow));
}

.nav-link.active {
    background-color: var(--sidebar-active-bg, var(--cam-yellow));
    color: var(--sidebar-active-text, var(--cam-midnight)) !important;
    font-weight: 700;
    border-left: 3px solid var(--sidebar-active-border, transparent);
}

.nav-link i {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

.nav-section-label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cam-steel);
    padding: 0.75rem 1.25rem 0.25rem 1.25rem;
}

/* Nav brand header */
.fp-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fp-nav-brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fp-nav-brand-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    line-height: 1.3;
}
.fp-nav-brand-wordmark {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.85);
}
.fp-wm-flow { font-weight: 500; }
.fp-wm-plane { font-weight: 700; }

/* Nav divider + section label */
.fp-nav-divider { border-top: 1px solid rgba(255,255,255,0.15); margin: 12px 16px; }
.fp-nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0.4); padding: 4px 16px 6px 16px; text-transform: uppercase; }

/* Expandable nav item */
button.fp-nav-expandable { background: none; border: none; width: 100%; text-align: left; font-size: inherit; font-family: inherit; }
.fp-nav-expandable { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; }
.fp-nav-chevron { margin-left: auto; font-size: 16px; transition: transform 0.2s ease; display: inline-block; }
.fp-chevron-open { transform: rotate(90deg); }

/* Nav sub-menu */
.fp-nav-sub { display: flex; flex-direction: column; padding-left: 16px; margin-bottom: 4px; }
.fp-nav-subitem { font-size: 13px; padding: 6px 16px; color: rgba(255,255,255,0.7); text-decoration: none; border-radius: 4px; transition: background 0.15s; }
.fp-nav-subitem:hover { background: rgba(255,255,255,0.1); color: var(--text-on-accent); }

/* Settings gear button in toolbar */
.fp-settings-menu-wrap { position: relative; z-index: 100; }
.fp-settings-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; background: transparent; border: 1px solid var(--border-medium);
    color: var(--cam-steel); border-radius: 50%; font-size: 16px; cursor: pointer;
    transition: background 0.15s, color 0.15s;
    position: relative; z-index: 102;
}
.fp-settings-btn:hover { background: var(--surface-hover); color: var(--text-primary); }

/* Settings dropdown */
.fp-settings-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--surface-primary); border: 1px solid var(--border-default);
    border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 220px; z-index: 103; overflow: hidden;
}

/* Theme toggle button */
.fp-theme-toggle { width: 100%; border: none; background: transparent; text-align: left; cursor: pointer; font-size: 14px; }

/* Shared dropdown styles */
.fp-dropdown-header { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-faint); text-transform: uppercase; padding: 10px 16px 6px 16px; border-bottom: 1px solid var(--border-light); }
.fp-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; color: var(--text-secondary); text-decoration: none; transition: background 0.1s; }
.fp-dropdown-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.fp-dropdown-backdrop { position: fixed; inset: 0; z-index: 101; background: transparent; }

/* Go/No-Go display */
.fp-gonogo-display { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-gonogo-score { font-size: 15px; font-weight: 700; color: var(--text-secondary); }
.fp-gonogo-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 12px; text-transform: uppercase; }
.fp-gonogo-go { background: var(--gonogo-go-bg); color: var(--gonogo-go-text); border: 1px solid var(--gonogo-go-border); }
.fp-gonogo-nogo { background: var(--gonogo-nogo-bg); color: var(--gonogo-nogo-text); border: 1px solid var(--gonogo-nogo-border); }
.fp-gonogo-conditional { background: var(--gonogo-conditional-bg); color: var(--gonogo-conditional-text); border: 1px solid var(--gonogo-conditional-border); }
.fp-gonogo-none { background: var(--gonogo-none-bg); color: var(--gonogo-none-text); border: 1px solid var(--gonogo-none-border); }
.fp-gonogo-override { background: var(--gonogo-override-bg); color: var(--gonogo-override-text); border: 1px solid var(--gonogo-override-border); }
.fp-gonogo-link { background: transparent; border: none; color: var(--gonogo-link); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.fp-gonogo-link:hover { color: var(--gonogo-link-hover); }
.fp-modal-lg { width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto; }

/* Autocomplete dropdown item */
.fp-autocomplete-item:hover { background: var(--bg-row-alt); }

/* --- Content Area --- */
article.content {
    padding: 1.5rem;
    flex: 1;
    background-color: var(--bg-page, var(--cam-light-gray));
}

.content {
    padding-top: 1rem;
}

/* --- Page Headings --- */
h1, h2, h3, h4 {
    font-family: var(--font-display, var(--font-heading));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-heading, var(--cam-navy));
}

h1 { font-size: 1.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }
h3 { font-size: 1rem; margin-bottom: 0.5rem; }

h5 {
    font-family: var(--font-display, var(--font-heading));
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-heading, var(--cam-navy));
}

/* --- Links --- */
a, .btn-link {
    color: var(--text-link, var(--cam-navy));
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--cam-midnight);
    text-decoration: underline;
}

/* --- Cards --- */
.card {
    background-color: var(--bg-card, var(--cam-white));
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

/* --- KPI Cards --- */
.fp-kpi-card {
    background-color: var(--bg-card, var(--cam-white));
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border-left: 4px solid var(--kpi-border-top, var(--cam-gravel));
    overflow: hidden;
}

.fp-kpi-card .card-body {
    padding: 1rem 1.25rem;
}

.fp-kpi-card .kpi-icon {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}

.fp-kpi-card .kpi-value {
    font-family: var(--font-display, var(--font-heading));
    font-size: 2.2rem;
    font-weight: 700;
}

.fp-kpi-card.fp-kpi-compact .kpi-value {
    font-size: 1.1rem !important;
    line-height: 1;
    color: var(--text-heading, var(--cam-navy));
}

.fp-kpi-card .kpi-label {
    font-family: var(--font-display, var(--font-heading));
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary, var(--cam-steel));
    margin-top: 0.25rem;
}

/* KPI card accent variants */
.fp-kpi-accent  { border-left-color: var(--kpi-border-top-accent, var(--cam-navy)); }
.fp-kpi-accent  .kpi-icon { color: var(--kpi-border-top-accent, var(--cam-navy)); }

.fp-kpi-success { border-left-color: var(--positive, var(--cam-green)); }
.fp-kpi-success .kpi-icon { color: var(--positive, var(--cam-green)); }

.fp-kpi-warning { border-left-color: var(--kpi-border-top-warn, var(--cam-yellow)); }
.fp-kpi-warning .kpi-icon { color: var(--kpi-border-top-warn, var(--cam-yellow)); }

.fp-kpi-danger  { border-left-color: var(--kpi-border-top-danger, var(--cam-rust)); border-left-width: 4px; }
.fp-kpi-danger  .kpi-icon { color: var(--kpi-border-top-danger, var(--cam-rust)); }

/* --- Filter Bar --- */
.fp-filter-bar {
    background-color: var(--bg-card, var(--cam-white));
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.fp-filter-bar label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cam-steel);
    margin-bottom: 2px;
    display: block;
}

.fp-filter-bar select,
.fp-filter-bar input {
    border: 1px solid var(--cam-gravel);
    border-radius: var(--border-radius);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    color: var(--cam-navy);
    background-color: var(--cam-white);
}

.fp-filter-bar select:focus,
.fp-filter-bar input:focus {
    outline: none;
    border-color: var(--cam-navy);
    box-shadow: 0 0 0 2px rgba(23,43,84,0.15);
}

/* --- Data Table --- */
.table {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* --- List page width discipline --- */
.fp-list-container {
    max-width: 1600px;
    margin: 0 auto;
}

/* --- Widget drag-and-drop --- */
.dash-drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 6px; }
.dash-grid-item[draggable="true"] { cursor: grab; }
.dash-grid-item[draggable="true"]:active { cursor: grabbing; }

.table > thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* --- Pipeline frozen columns --- */
.fp-col-freeze {
    position: sticky;
    z-index: 1;
    background: var(--bg-card);
}
thead .fp-col-freeze {
    z-index: 3;
    background: var(--bg-sidebar);
    color: var(--text-on-dark);
}
.fp-col-freeze-1 { left: 0; width: 90px; min-width: 90px; max-width: 90px; }
.fp-col-freeze-2 { left: 90px; border-right: 2px solid var(--border); }

/* row hover + stripe must not break frozen bg */
.table-striped > tbody > tr:nth-of-type(odd) > .fp-col-freeze { background: var(--bg-row); }
.table-hover > tbody > tr:hover > .fp-col-freeze { background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); }

.table-dark th {
    background-color: var(--bg-sidebar);
    color: var(--text-on-dark);
    border-color: rgba(255,255,255,0.08);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.6rem 0.75rem;
}

.table-dark th:hover {
    background-color: var(--bg-topbar);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(0,0,0,0.015);
}

.table-hover > tbody > tr:hover > td {
    background-color: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}

.table td, .table th {
    vertical-align: middle;
    padding: 0.45rem 0.75rem;
    border-color: var(--cam-light-gray);
}

.table td {
    border-right: 1px solid var(--cam-light-gray);
    border-bottom: 1px solid var(--cam-light-gray);
}

.fp-td-truncate {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table td:last-child {
    border-right: none;
}

.table th {
    border-right: 1px solid rgba(255,255,255,0.15);
}

.table th:last-child {
    border-right: none;
}

/* Row health states */
.fp-row-attention td:first-child {
    border-left: 3px solid var(--cam-yellow) !important;
}

.fp-row-overdue td:first-child {
    border-left: 3px solid var(--cam-rust) !important;
}

.table-danger {
    background-color: rgba(216,95,39,0.1) !important;
    color: var(--cam-rust) !important;
}

.table-warning {
    background-color: rgba(255,197,41,0.12) !important;
    color: var(--cam-navy) !important;
}

/* --- Type Badges --- */
.fp-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fp-badge-std {
    background-color: var(--cam-yellow);
    color: var(--cam-midnight);
    font-size: 0.62rem;
    padding: 1px 7px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fp-badge-sub      { background-color: var(--cam-navy);       color: var(--cam-white); }
.fp-badge-master   { background-color: var(--cam-midnight);   color: var(--cam-gravel); }

/* --- Role Badges --- */
.fp-badge-director,
.fp-badge-admin,
.fp-badge-gm,
.fp-badge-dm,
.fp-badge-bdm,
.fp-badge-operations,
.fp-badge-estimating,
.fp-badge-readonly {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fp-badge-director   { background-color: var(--cam-navy);     color: var(--cam-yellow); }
.fp-badge-admin      { background-color: var(--cam-midnight); color: var(--cam-yellow); }
.fp-badge-gm         { background-color: var(--cam-navy);     color: var(--cam-white); }
.fp-badge-dm         { background-color: var(--cam-steel);    color: var(--cam-white); }
.fp-badge-bdm        { background-color: var(--cam-green);    color: var(--cam-white); }
.fp-badge-operations { background-color: var(--cam-steel);    color: var(--cam-white); }
.fp-badge-estimating { background-color: var(--cam-rust);     color: var(--cam-white); }
.fp-badge-readonly   { background-color: var(--cam-paver);    color: var(--cam-navy); }

/* --- Stage Category Group Headers --- */
.fp-stage-group-active      { color: var(--cam-navy);   border-left: 3px solid var(--cam-navy); }
.fp-stage-group-parking     { color: var(--cam-paver);  border-left: 3px solid var(--cam-paver); }
.fp-stage-group-onhold      { color: var(--cam-yellow); border-left: 3px solid var(--cam-yellow); }
.fp-stage-group-terminal    { color: var(--cam-steel);  border-left: 3px solid var(--cam-steel); }

.fp-stage-group-header {
    background-color: var(--cam-light-gray);
    padding: 0.4rem 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --- Buttons --- */
.btn-primary {
    background-color: var(--cam-navy);
    border-color: var(--cam-navy);
    color: var(--cam-white);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--cam-midnight);
    border-color: var(--cam-midnight);
    color: var(--cam-white);
}

.btn-warning {
    background-color: var(--cam-yellow);
    border-color: var(--cam-yellow);
    color: var(--cam-midnight);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
}

/* Suppress focus outlines on non-interactive elements (Blazor auto-focuses headings after navigation) */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
[tabindex="-1"]:focus, main:focus, [role="main"]:focus {
    outline: none;
    box-shadow: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 2px rgba(23,43,84,0.15);
    border-color: var(--cam-navy);
}

/* --- Form Controls --- */
.form-select, .form-control {
    border-color: var(--cam-gravel);
    color: var(--cam-navy);
    font-size: 0.85rem;
}

/* --- Validation --- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--cam-green); }
.invalid { outline: 1px solid var(--cam-rust); }
.validation-message { color: var(--cam-rust); }

/* --- Blazor Error UI --- */
#blazor-error-ui {
    background: var(--cam-rust);
    color: white;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; color: white; float: right; font-weight: bold; }

.blazor-error-boundary {
    background: var(--cam-rust);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* --- Detail Side Panel --- */
.fp-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 16, 51, 0.4);
    z-index: 200;
    backdrop-filter: blur(2px);
}

.fp-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    height: 100vh;
    background: var(--bg-card, var(--cam-white));
    box-shadow: -6px 0 32px rgba(0,0,0,0.22);
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideInRight 0.2s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.fp-detail-header {
    background: var(--bg-sidebar, var(--cam-navy));
    color: var(--text-on-dark);
    padding: 1.25rem 1.25rem 1.25rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-shrink: 0;
    position: relative;
}

.fp-detail-header-accent {
    width: 4px;
    background: var(--cam-yellow);
    align-self: stretch;
    flex-shrink: 0;
    margin-right: 1rem;
}

.fp-detail-header-content {
    flex: 1;
    min-width: 0;
}

.fp-detail-opp-number {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cam-yellow);
    margin-bottom: 4px;
}

.fp-detail-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cam-white);
    line-height: 1.3;
    margin-bottom: 4px;
}

.fp-detail-client {
    font-size: 0.82rem;
    color: var(--cam-gravel);
}

.fp-detail-close {
    background: transparent;
    border: none;
    color: var(--cam-gravel);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s;
}

.fp-detail-close:hover { color: var(--cam-white); }

.fp-detail-stage-banner {
    background: var(--cam-midnight);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.fp-detail-stage-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--cam-white);
    text-transform: uppercase;
    margin-top: 2px;
}

.fp-health-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fp-health-attention {
    background: var(--cam-yellow);
    color: var(--cam-midnight);
}
.fp-health-overdue {
    background: var(--cam-rust);
    color: var(--cam-white);
}
.fp-health-ok {
    background: var(--cam-green);
    color: var(--cam-white);
}

.fp-detail-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.fp-detail-value-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.fp-stat-good    { color: var(--positive); font-weight: 600; }
.fp-stat-warning { color: var(--warning); font-weight: 600; }
.fp-stat-danger  { color: var(--negative); font-weight: 600; }

.fp-detail-value-card {
    background: var(--cam-light-gray);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    text-align: center;
}

.fp-detail-big-value {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cam-navy);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

.fp-detail-max {
    font-size: 0.7rem;
    color: var(--cam-steel);
    font-weight: 400;
}

.fp-value-green { color: var(--cam-green); }
.fp-value-rust  { color: var(--cam-rust);  }

.fp-detail-divider {
    height: 1px;
    background: var(--cam-light-gray);
    margin-bottom: 1.25rem;
}

.fp-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.fp-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fp-detail-label {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cam-steel);
}

.fp-detail-value {
    font-size: 0.88rem;
    color: var(--cam-navy);
    font-weight: 500;
    line-height: 1.3;
}

.fp-detail-footer {
    background: var(--cam-light-gray);
    border-top: 1px solid var(--cam-gravel);
    padding: 0.6rem 1.25rem;
    flex-shrink: 0;
}

.fp-detail-footer-text {
    font-size: 0.72rem;
    color: var(--cam-steel);
}

/* --- Opp Type Badges (Pipeline grid) --- */
.fp-opp-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fp-opp-type-standard { background: var(--cam-yellow); color: var(--cam-midnight); }
.fp-opp-type-sub { background: var(--gonogo-override-bg); color: var(--text-on-accent); }
.fp-opp-type-master { background: var(--cam-steel); color: var(--text-on-accent); }



/* --- Page Header --- */
.fp-page-header {
    margin-bottom: 1.25rem;
}

.fp-page-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem 0;
    color: var(--text-heading);
}

.fp-page-sub {
    font-size: 0.85rem;
    color: var(--cam-steel);
    margin-top: 2px;
}

/* --- Home Dashboard --- */
.fp-home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.fp-home-greeting {
    font-family: var(--font-display, var(--font-heading));
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-heading, var(--cam-navy));
}

.fp-home-date {
    font-size: 0.85rem;
    color: var(--cam-steel);
    margin-top: 4px;
}

.fp-home-tagline {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cam-green);
}

.fp-home-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .fp-home-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .fp-home-kpi-row { grid-template-columns: 1fr; }
}

.fp-home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .fp-home-grid { grid-template-columns: 1fr; }
    .fp-home-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

.fp-home-card {
    background: var(--bg-card, var(--cam-white));
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.fp-home-card-header {
    background: var(--bg-sidebar, var(--cam-navy));
    color: var(--text-on-dark);
    font-family: var(--font-display, var(--font-heading));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fp-home-card-sub {
    font-weight: 400;
    color: var(--cam-gravel);
    letter-spacing: 0.05em;
    margin-left: auto;
    font-size: 0.68rem;
}

.fp-home-card-body {
    padding: 0.75rem 1rem;
    max-height: 380px;
    overflow-y: auto;
}

.fp-home-card-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--cam-light-gray);
    text-align: right;
}

.fp-home-empty {
    color: var(--cam-steel);
    font-size: 0.82rem;
    padding: 1rem 0;
    text-align: center;
}

.fp-deadline-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cam-light-gray);
}

.fp-deadline-row:last-child { border-bottom: none; }

.fp-deadline-date {
    min-width: 52px;
    text-align: center;
    background: var(--cam-light-gray);
    border-radius: var(--border-radius);
    padding: 4px 6px;
}

.fp-deadline-urgent {
    background: var(--cam-rust);
    color: var(--cam-white);
}

.fp-deadline-day {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.fp-deadline-days-out {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-top: 1px;
}

.fp-deadline-info { flex: 1; min-width: 0; }

.fp-deadline-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cam-navy);
    line-height: 1.3;
}

.fp-deadline-meta {
    font-size: 0.72rem;
    color: var(--cam-steel);
    margin-top: 2px;
}

.fp-activity-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cam-light-gray);
}

.fp-activity-row:last-child { border-bottom: none; }

.fp-activity-type-col { min-width: 90px; display: flex; flex-direction: column; gap: 2px; }

.fp-activity-disposition {
    font-size: 0.62rem;
    color: var(--text-secondary);
    font-style: italic;
    white-space: nowrap;
}

.fp-activity-info { flex: 1; min-width: 0; }

.fp-activity-opp {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cam-navy);
    line-height: 1.3;
}

.fp-activity-meta {
    font-size: 0.72rem;
    color: var(--cam-steel);
    margin-top: 2px;
}

/* --- Activity Type Badges --- */
.fp-activity-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fp-at-phone         { background: var(--cam-green);      color: var(--cam-white); }
.fp-at-phone-attempt { background: var(--cam-gravel);     color: var(--cam-navy); }
.fp-at-email         { background: var(--cam-navy);       color: var(--cam-white); }
.fp-at-meeting       { background: var(--cam-yellow);     color: var(--cam-midnight); }
.fp-at-followup      { background: var(--cam-steel);      color: var(--cam-white); }
.fp-at-lead          { background: var(--cam-midnight);   color: var(--cam-yellow); }
.fp-at-networking    { background: var(--cam-gravel);     color: var(--cam-navy); }
.fp-at-internal      { background: var(--cam-paver);      color: var(--cam-steel); }
.fp-at-virtual       { background: var(--cam-steel);      color: var(--cam-white); }
.fp-at-proposal      { background: var(--cam-midnight);   color: var(--cam-white); }
.fp-at-default       { background: var(--cam-light-gray); color: var(--cam-steel); }

/* --- Pagination --- */
.fp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 0;
    margin-top: 0.5rem;
}
.fp-page-btn {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.fp-page-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg-card); }
.fp-page-btn:disabled { opacity: 0.35; cursor: default; }
.fp-page-btn.fp-page-active { background: var(--accent); color: var(--bg-card); font-weight: 600; }
.fp-page-info { font-size: 0.78rem; color: var(--text-muted); margin-left: 0.5rem; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cam-light-gray); }
::-webkit-scrollbar-thumb { background: var(--cam-gravel); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cam-steel); }

/* --- Global Search --- */
.fp-search-container {
    position: relative;
    flex: 1;
    max-width: 480px;
    margin: 0 1.5rem;
}

.fp-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.fp-search-icon {
    position: absolute;
    left: 0.6rem;
    color: var(--cam-steel);
    font-size: 0.85rem;
    pointer-events: none;
}

.fp-search-input {
    width: 100%;
    padding: 0.35rem 2rem 0.35rem 2rem;
    border: 1px solid var(--cam-gravel);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--cam-navy);
    background: var(--cam-light-gray);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fp-search-input:focus {
    outline: none;
    border-color: var(--cam-navy);
    background: var(--cam-white);
    box-shadow: 0 0 0 2px rgba(23,43,84,0.12);
}

.fp-search-input::placeholder {
    color: var(--cam-steel);
}

.fp-search-clear {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--cam-steel);
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
}

.fp-search-clear:hover {
    color: var(--cam-navy);
}

.fp-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--cam-white);
    border: 1px solid var(--cam-gravel);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 500;
    max-height: 420px;
    overflow-y: auto;
}

.fp-search-group-label {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--cam-steel);
    padding: 0.5rem 0.85rem 0.25rem;
    background: var(--cam-light-gray);
    text-transform: uppercase;
}

.fp-search-result {
    display: block;
    padding: 0.5rem 0.85rem;
    text-decoration: none;
    border-bottom: 1px solid var(--cam-light-gray);
    transition: background-color 0.1s;
    cursor: pointer;
}

.fp-search-result:hover {
    background-color: rgba(23,43,84,0.04);
}

.fp-search-result-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cam-navy);
    line-height: 1.3;
}

.fp-search-result-sub {
    font-size: 0.72rem;
    color: var(--cam-steel);
    margin-top: 1px;
}

/* --- Calendar --- */
.fp-calendar {
    background: var(--cam-white);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.fp-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cam-navy);
    padding: 0.75rem 1rem;
}

.fp-calendar-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-on-dark);
}

.fp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-left: 1px solid var(--cam-light-gray);
    border-top: 1px solid var(--cam-light-gray);
}

.fp-cal-header {
    background: var(--cam-midnight);
    color: var(--text-on-dark-secondary);
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 0.4rem;
    border-right: 1px solid var(--cam-light-gray);
    border-bottom: 1px solid var(--cam-light-gray);
}

.fp-cal-cell {
    min-height: 100px;
    padding: 0.3rem;
    border-right: 1px solid var(--cam-light-gray);
    border-bottom: 1px solid var(--cam-light-gray);
    vertical-align: top;
}

.fp-cal-other-month {
    background: var(--cam-light-gray);
    opacity: 0.6;
}

.fp-cal-today {
    background: rgba(255, 197, 41, 0.1);
}

.fp-cal-today .fp-cal-day-num {
    background: var(--cam-yellow);
    color: var(--cam-midnight);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-cal-day-num {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cam-navy);
    margin-bottom: 3px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-cal-event {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.1s;
}

.fp-cal-event:hover { opacity: 0.8; }

.fp-cal-more {
    font-size: 0.62rem;
    color: var(--cam-steel);
    padding: 1px 2px;
}

/* Bid Calendar event colors */
.fp-cal-proposal  { background: var(--cam-navy);   color: var(--cam-white); }
.fp-cal-prebid    { background: var(--cam-yellow);  color: var(--cam-midnight); }
.fp-cal-bid       { background: var(--cam-rust);    color: var(--cam-white); }

/* Meeting Calendar event colors */
.fp-cal-meeting    { background: var(--cam-yellow);  color: var(--cam-midnight); }
.fp-cal-networking { background: var(--cam-green);   color: var(--cam-white); }
.fp-cal-followup   { background: var(--cam-steel);   color: var(--cam-white); }
.fp-cal-phone      { background: var(--cam-gravel);  color: var(--cam-navy); }

.fp-cal-legend {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    padding: 0.6rem 0;
    flex-wrap: wrap;
}

.fp-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--cam-steel);
}

.fp-cal-legend-item .fp-cal-event {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    cursor: default;
}

.fp-meeting-toggle .btn-group .btn {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.85rem;
}

/* --- Modal --- */
.fp-modal-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.45);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-modal {
    background: var(--bg-card);
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    width: 580px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1050;
}

.fp-detail-modal {
    width: 720px;
}

@media (max-width: 768px) {
    .fp-detail-modal {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    .fp-modal {
        width: 100% !important;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

.fp-modal-header {
    background: var(--cam-navy);
    color: var(--text-on-dark);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fp-modal-header h2 {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
}

.fp-modal-body {
    padding: 1.25rem;
}

.fp-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--cam-light-gray);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
}

.fp-form-group {
    margin-bottom: 1rem;
}

.fp-form-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cam-steel);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.fp-form-label .required {
    color: var(--cam-rust);
    margin-left: 2px;
}

.fp-form-control {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 0.82rem;
    color: var(--cam-midnight);
    background: var(--bg-card);
    transition: border-color 0.15s;
}

.fp-form-control:focus {
    outline: none;
    border-color: var(--cam-navy);
    box-shadow: 0 0 0 2px rgba(23,43,84,0.12);
}

.fp-form-control.error {
    border-color: var(--cam-rust);
}

.fp-form-error {
    font-size: 0.7rem;
    color: var(--cam-rust);
    margin-top: 3px;
}

.fp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 576px) {
    .fp-form-row { grid-template-columns: 1fr; }
}

/* --- Report Cards --- */
.fp-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.fp-report-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--cam-white);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--cam-navy);
    transition: box-shadow 0.15s, transform 0.15s;
    border-left: 4px solid var(--cam-navy);
}

.fp-report-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--cam-navy);
}

.fp-report-card-icon {
    font-size: 1.5rem;
    color: var(--cam-navy);
    flex-shrink: 0;
    margin-top: 2px;
}

.fp-report-card-body h3 {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.fp-report-card-body p {
    font-size: 0.78rem;
    color: var(--cam-steel);
    margin: 0;
    line-height: 1.4;
}

/* --- Nav Badge --- */
.fp-nav-badge {
    background: var(--cam-rust);
    color: white;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 6px;
    letter-spacing: 0;
}

/* --- News / Market Intelligence --- */
.fp-news-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Lead Inbox compact row layout (Wave 1) ── */
.fp-li-list { border:1px solid var(--border); border-radius:6px; background:var(--bg-card); overflow:hidden; }

.fp-li-row {
    display:grid;
    grid-template-columns: 30px 110px minmax(250px,2fr) minmax(120px,0.8fr) 65px 80px 90px;
    align-items:center;
    padding:7px 12px;
    border-bottom:1px solid var(--border-dim);
    font-size:13px;
    gap:8px;
    transition:background 0.1s;
}
.fp-li-row:last-child { border-bottom:none; }
.fp-li-row:hover { background:var(--bg-row); }

.fp-li-row-header {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
    color:var(--text-muted); background:var(--bg-row); border-bottom:1px solid var(--border);
    padding:6px 12px; cursor:default;
}
.fp-li-row-header:hover { background:var(--bg-row); }

.fp-li-row-critical { border-left:3px solid var(--negative); }
.fp-li-row-flagged { border-left:3px solid var(--warning); }
.fp-li-row-created { border-left:3px solid var(--positive); opacity:0.7; }

.fp-li-col-status { display:flex; align-items:center; justify-content:center; }
.fp-li-col-source { overflow:hidden; white-space:nowrap; }
.fp-li-col-subject { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.fp-li-col-sender { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); font-size:12px; }
.fp-li-col-confidence { font-size:12px; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.fp-li-col-received { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.fp-li-col-actions { display:flex; gap:2px; align-items:center; justify-content:flex-end; }

.fp-li-subject-text { font-weight:600; color:var(--text-heading); overflow:hidden; text-overflow:ellipsis; }
.fp-li-chip { font-size:10px; color:var(--text-muted); background:var(--bg-row); padding:1px 5px; border-radius:6px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }

.fp-li-conf-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.fp-li-conf-high { background:var(--positive); }
.fp-li-conf-med { background:var(--warning); }
.fp-li-conf-low { background:var(--text-muted); }

.fp-li-btn {
    background:none; border:none; cursor:pointer; font-size:14px; padding:2px 4px;
    border-radius:3px; transition:background 0.15s; line-height:1;
}
.fp-li-btn:hover { background:var(--bg-row); }

/* ── Lead Inbox split-pane (Wave 2) ── */
.fp-li-split-pane {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:0;
    height: calc(100vh - 220px);
    min-height:400px;
    border:1px solid var(--border);
    border-radius:6px;
    overflow:hidden;
    background:var(--bg-card);
}
.fp-li-left-panel {
    display:flex; flex-direction:column; overflow:hidden;
    border-right:1px solid var(--border);
}
.fp-li-left-panel .fp-li-list { border:none; border-radius:0; flex:1; overflow-y:auto; }
.fp-li-left-panel .fp-pagination { border-top:1px solid var(--border); padding:6px 12px; flex-shrink:0; }

.fp-li-right-panel {
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--bg-page);
}
.fp-li-detail-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 16px; border-bottom:1px solid var(--border);
    background:var(--bg-card); flex-shrink:0;
}
.fp-li-detail-body {
    flex:1; overflow-y:auto; padding:1rem 1.25rem;
}
.fp-li-detail-footer {
    display:flex; gap:0.5rem; padding:10px 16px;
    border-top:1px solid var(--border); background:var(--bg-card); flex-shrink:0;
}
.fp-li-detail-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:100%; color:var(--text-muted);
}

/* Selected row highlight */
.fp-li-row.fp-li-row-selected { background:var(--accent-glow); }

.fp-news-card {
    background: var(--cam-white);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--cam-navy);
    transition: opacity 0.15s;
}

.fp-news-read {
    opacity: 0.65;
    border-left-color: var(--cam-gravel);
}
.fp-news-dismissed {
    opacity: 0.45;
    border-left-color: var(--text-muted);
    background: var(--bg-row);
}

.fp-news-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.fp-news-card-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fp-score-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fp-score-high   { background: var(--cam-rust);   color: var(--cam-white); }
.fp-score-medium { background: var(--cam-yellow); color: var(--cam-midnight); }
.fp-score-low    { background: var(--cam-gravel); color: var(--cam-white); }

.fp-news-category-tag {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cam-steel);
    background: var(--cam-light-gray);
    padding: 2px 6px;
    border-radius: 3px;
}

.fp-news-source {
    font-size: 0.72rem;
    color: var(--cam-steel);
}

.fp-news-date {
    font-size: 0.72rem;
    color: var(--cam-steel);
    white-space: nowrap;
}

.fp-news-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--cam-navy);
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.fp-news-summary {
    font-size: 0.8rem;
    color: var(--cam-steel);
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

.fp-news-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.fp-news-tag {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--cam-navy);
    background: rgba(23,43,84,0.08);
    padding: 1px 6px;
    border-radius: 3px;
}

.fp-news-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.fp-email-article-btn {
    color: var(--text-secondary);
    border-color: var(--text-secondary);
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.fp-email-article-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
html.theme-bladerunner .fp-email-article-btn {
    color: var(--text-muted);
    border-color: var(--text-muted);
}
html.theme-bladerunner .fp-email-article-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}

/* --- Contact Age Color Coding --- */
.contact-age-fresh { color: var(--positive); font-weight: 600; }
.contact-age-ok    { color: var(--warning); }
.contact-age-stale { color: var(--negative); }
.contact-age-cold  { color: var(--text-muted); }
.contact-age-never { color: var(--text-muted); font-style: italic; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .sidebar { width: 100%; height: auto; min-height: auto; position: relative; overflow-y: visible; }
    .main { margin-left: 0; }
    .fp-kpi-card .kpi-value { font-size: 1.4rem; }
    .table { font-size: 0.75rem; }
    .fp-report-grid { grid-template-columns: 1fr; }
    .fp-filter-bar { flex-direction: column; align-items: stretch; }
    .fp-news-card-top { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

@media (min-width: 1200px) {
    article.content { padding: 1.75rem 2rem; }
    .fp-kpi-card .kpi-value { font-size: 2.4rem; }
}

/* ── Pipeline Panel Summary Link ────────── */

.fp-panel-summary-link {
    padding: 0.875rem 1.25rem 1.25rem;
    border-top: 1px solid var(--cam-light-gray);
    margin-top: auto;
}

.fp-btn-view-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 9px 0;
    background: var(--cam-navy);
    color: var(--text-on-dark);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-decoration: none;
    transition: background 0.15s;
}

.fp-btn-view-summary:hover {
    background: var(--cam-navy);
    color: var(--text-on-dark);
    text-decoration: none;
}

/* ── Opportunity Detail Page ───────────── */

/* ── Opportunity Detail tab layout (Wave 2) ── */
.fp-opp-tab-bar {
    display:flex; gap:0; border-bottom:2px solid var(--border);
    background:var(--bg-card); padding:0 2rem;
    position:sticky; top:0; z-index:19;
}
.fp-opp-tab {
    padding:10px 20px; font-size:0.82rem; font-weight:600;
    color:var(--text-muted); background:none; border:none;
    border-bottom:2px solid transparent; margin-bottom:-2px;
    cursor:pointer; transition:color 0.15s, border-color 0.15s;
}
.fp-opp-tab:hover { color:var(--text-heading); }
.fp-opp-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

.fp-opp-tab-content {
    padding: 1.5rem 2rem 4rem;
    background: var(--bg-row);
    min-height: calc(100vh - 200px);
}

/* Two-column grid for opportunity detail */
.fp-opp-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}
.fp-opp-two-col > .fp-opp-section {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.fp-opp-two-col > .fp-opp-section > .fp-opp-section-body { flex: 1; }
.fp-opp-full-width { grid-column: 1 / -1; }
@media (max-width: 960px) {
    .fp-opp-two-col { grid-template-columns: 1fr; }
}

/* Keep old classes for backward compat */
.fp-opp-summary-layout { display:block; }
.fp-opp-summary-nav { display:none; }
.fp-opp-summary-content { padding:0; background:transparent; }

.fp-opp-page-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--cam-light-gray);
    padding: 1.25rem 2rem 1rem;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

.fp-opp-breadcrumb {
    font-size: 0.72rem;
    color: var(--cam-steel);
    margin-bottom: 0.5rem;
}

.fp-opp-breadcrumb a {
    color: var(--cam-navy);
    text-decoration: none;
}

.fp-opp-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.fp-opp-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cam-navy);
    margin: 0 0 0.2rem;
}

.fp-opp-subtitle {
    font-size: 0.75rem;
    color: var(--cam-steel);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.fp-opp-subtitle-sep {
    color: var(--text-muted);;
}

.fp-opp-stage-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-dim);
}

.fp-opp-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Opportunity Detail: mobile responsive ── */
@media (max-width: 768px) {
    .fp-opp-page-header {
        padding: 1rem 1rem 0.75rem;
    }
    .fp-opp-title-row {
        flex-direction: column;
        gap: 0.75rem;
    }
    .fp-opp-title {
        font-size: 1.05rem;
    }
    .fp-opp-header-actions {
        width: 100%;
    }
    .fp-opp-header-actions button {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
    .fp-opp-stage-row {
        flex-wrap: wrap;
    }
}

/* ── Summary page section cards ─────────── */

.fp-opp-section {
    background: var(--bg-card);
    border: 1px solid var(--cam-light-gray);
    border-radius: 6px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    scroll-margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.fp-opp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--bg-row) 95%, black 5%);
    border-bottom: 1px solid var(--cam-light-gray);
    cursor: pointer;
    user-select: none;
}
.fp-opp-section-header:hover { background: color-mix(in srgb, var(--accent) 5%, var(--bg-row)); }
.fp-opp-section-chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.15s;
    margin-right: 0.5rem;
}
.fp-opp-section-chevron.collapsed { transform: rotate(-90deg); }
.fp-opp-section-body.collapsed { display: none; }

.fp-opp-section-title {
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cam-navy);
}

.fp-opp-section-subtitle {
    font-size: 0.68rem;
    color: var(--cam-steel);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-top: 1px;
}

.fp-opp-section-body {
    padding: 0.5rem 0;
}

/* ── Field rows (view mode) ─────────────── */

.fp-opp-field-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    padding: 6px 20px;
    border-bottom: 1px solid var(--border-dim);
    font-size: 0.8rem;
    align-items: baseline;
    min-height: 32px;
}

.fp-opp-field-row:last-child {
    border-bottom: none;
}

.fp-opp-field-label {
    color: var(--cam-steel);
    font-weight: 500;
    font-size: 0.74rem;
}

.fp-opp-field-value {
    color: var(--cam-midnight);
    font-weight: 500;
}

.fp-opp-field-value.fp-empty {
    color: var(--text-muted);;
    font-style: italic;
    font-weight: 400;
}

.fp-opp-field-value.fp-readonly {
    background: var(--bg-row);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-dim);
    display: inline-block;
}

/* ── Field rows (edit mode) ─────────────── */

.fp-opp-field-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--cam-midnight);
    background: var(--bg-card);
    transition: border-color 0.1s;
}

.fp-opp-field-input:focus {
    outline: none;
    border-color: var(--cam-navy);
    box-shadow: 0 0 0 3px rgba(27,43,75,0.08);
}

.fp-opp-field-select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--cam-midnight);
    background: var(--bg-card);
}

.fp-opp-field-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.8rem;
    color: var(--cam-midnight);
    background: var(--bg-card);
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.fp-opp-field-textarea:focus {
    outline: none;
    border-color: var(--cam-navy);
    box-shadow: 0 0 0 3px rgba(27,43,75,0.08);
}

/* ── Edit mode banner ───────────────────── */

.fp-edit-mode-banner {
    background: var(--gonogo-conditional-bg);
    border: 1px solid var(--cam-yellow);
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--warning);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Staff team / Contacts tables ───────── */

.fp-opp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.79rem;
}

.fp-opp-table th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cam-steel);
    padding: 7px 12px;
    background: var(--bg-row);
    border-bottom: 1px solid var(--cam-light-gray);
    text-align: left;
}

.fp-opp-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-dim);
    color: var(--cam-midnight);
    vertical-align: middle;
}

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

.fp-opp-table-add-row {
    padding: 8px 12px;
    border-top: 1px solid var(--cam-light-gray);
    background: var(--bg-row);
}

/* ── Activity subsections ───────────────── */

.fp-activity-subsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cam-steel);
    border-bottom: 1px solid var(--border-dim);
}

.fp-planned-row td {
    background: var(--gonogo-conditional-bg);
}

.fp-past-due-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--cam-rust);
    color: var(--text-on-accent);
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 6px;
}

/* ── Stage history timeline ─────────────── */

.fp-stage-timeline {
    display: flex;
    align-items: center;
    padding: 1rem 14px 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    max-width: 100%;
}

.fp-stage-tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    position: relative;
    flex: 1;
}

.fp-stage-tl-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--bg-row-alt);
    z-index: 0;
}

.fp-stage-tl-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-row-alt);
    border: 2px solid var(--border);
    z-index: 1;
    position: relative;
}

.fp-stage-tl-dot.done {
    background: var(--cam-green);
    border-color: var(--cam-green);
}

.fp-stage-tl-dot.current {
    background: var(--cam-navy);
    border-color: var(--cam-navy);
    box-shadow: 0 0 0 4px rgba(27,43,75,0.15);
}

.fp-stage-tl-label {
    font-size: 0.55rem;
    color: var(--cam-steel);
    text-align: center;
    margin-top: 4px;
    max-width: 64px;
    line-height: 1.2;
}

.fp-stage-tl-label.current {
    color: var(--cam-navy);
    font-weight: 700;
}

/* ── Stage History Detail Rows ────── */
.fp-sh-timeline { display:flex; flex-direction:column; gap:0; padding:12px 14px; }
.fp-sh-row { display:flex; align-items:flex-start; gap:14px; padding:12px 14px; border-left:3px solid transparent; border-bottom:1px solid var(--border-dim, var(--border)); }
.fp-sh-row:last-child { border-bottom:none; }
.fp-sh-row-current { background:color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border-left:3px solid var(--accent); }
.fp-sh-badge { flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:var(--bg-card); font-size:0.78rem; font-weight:700; }
.fp-sh-badge-current { background:var(--positive); box-shadow:0 0 0 3px color-mix(in srgb, var(--positive) 20%, transparent); }
.fp-sh-content { flex:1; min-width:0; }
.fp-sh-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.fp-sh-name-block { display:flex; flex-direction:column; gap:2px; }
.fp-sh-name { font-weight:700; font-size:0.85rem; color:var(--text-heading, var(--text-primary)); }
.fp-sh-category { font-size:0.72rem; color:var(--text-muted); font-weight:500; }
.fp-sh-days-block { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.fp-sh-days { font-size:0.8rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.fp-sh-violation { display:inline-block; padding:2px 8px; border-radius:3px; background:var(--negative); color:var(--bg-card); font-size:0.68rem; font-weight:700; white-space:nowrap; }
.fp-sh-meta { margin-top:6px; font-size:0.72rem; color:var(--text-muted); }
@media (max-width: 576px) {
    .fp-sh-top { flex-direction:column; gap:4px; }
    .fp-sh-row { gap:10px; padding:10px; }
    .fp-sh-badge { width:34px; height:34px; font-size:0.72rem; }
}

/* ── Description / Notes text blocks ────── */

.fp-opp-text-block {
    padding: 12px 14px;
    font-size: 0.8rem;
    color: var(--cam-midnight);
    line-height: 1.6;
    white-space: pre-wrap;
}

.fp-opp-text-block.fp-empty {
    color: var(--text-muted);;
    font-style: italic;
}

/* ── Save/cancel header buttons ─────────── */

.fp-btn-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--cam-navy);
    color: var(--text-on-dark);
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.12s;
}

.fp-btn-save:hover { background: var(--cam-navy); }

.fp-btn-cancel-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    color: var(--cam-steel);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.fp-btn-cancel-edit:hover {
    border-color: var(--cam-navy);
    color: var(--cam-navy);
}

/* ── Company Detail — stat cards ────────── */

.fp-company-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 12px 14px;
}

.fp-company-stat-card {
    background: var(--bg-row);
    border: 1px solid var(--cam-light-gray);
    border-radius: 4px;
    padding: 10px 14px;
    text-align: center;
}

.fp-company-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cam-navy);
    line-height: 1;
    margin-bottom: 3px;
}

.fp-company-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cam-steel);
}

/* ── Contact group header row ────────────── */

.fp-contact-group-row {
    background: var(--bg-row-alt);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cam-navy);
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-bottom: 1px solid var(--cam-light-gray);
    cursor: pointer;
    user-select: none;
}

.fp-contact-group-row:hover {
    background: var(--bg-row-alt);
}

/* ── Closed opps collapse toggle ─────────── */

.fp-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--cam-navy);
    background: var(--bg-row);
    border: none;
    border-top: 1px solid var(--cam-light-gray);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.fp-collapse-toggle:hover {
    background: var(--bg-row-alt);
}

/* ── Contact Detail — specific ──────────── */

.fp-contact-name-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.fp-pill-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--bg-row-alt);
    color: var(--cam-navy);
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    margin: 2px 3px 2px 0;
}

.fp-contact-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 12px 14px;
}

.fp-contact-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-dim);
}

.fp-contact-stat-row:last-child {
    border-bottom: none;
}

.fp-contact-stat-row-label {
    color: var(--cam-steel);
    font-size: 0.74rem;
    font-weight: 500;
}

.fp-contact-stat-row-value {
    color: var(--cam-midnight);
    font-weight: 600;
}

.fp-multiselect-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
}

.fp-multi-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
}

.fp-multi-checkbox-list label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--cam-midnight);
    cursor: pointer;
}

/* ============================================================
   PROJECTS — Phase 16.1
   ============================================================ */

.fp-projects-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fp-btn-navy {
    background: var(--cam-navy);
    color: var(--text-on-dark);
    border: none;
    padding: 6px 14px;
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}
.fp-btn-navy:hover { background: var(--cam-midnight); color: var(--text-on-dark); }

.fp-projects-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 10px 12px;
    background: var(--bg-row);
    border-radius: 4px;
    border: 1px solid var(--border);
}

.fp-projects-results {
    font-size: 0.82rem;
    color: var(--cam-steel);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fp-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.fp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-row-alt);
    color: var(--cam-navy);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}
.fp-filter-chip button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--cam-navy);
    padding: 0 2px;
    line-height: 1;
}

.fp-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .fp-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .fp-projects-grid { grid-template-columns: 1fr; }
}

.fp-project-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-card);
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    display: flex;
    flex-direction: column;
}
.fp-project-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.fp-project-thumb {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.fp-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fp-project-thumb-text {
    font-size: 2rem;
    font-weight: 700;
    opacity: 0.6;
}

.fp-project-card-body {
    padding: 12px 14px 8px;
    flex: 1;
}

.fp-project-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--cam-navy);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 2px;
}

.fp-project-number {
    font-size: 0.72rem;
    color: var(--cam-steel);
    margin-bottom: 4px;
}

.fp-project-client {
    font-size: 0.78rem;
    color: var(--cam-midnight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-project-location {
    font-size: 0.74rem;
    color: var(--cam-steel);
}

.fp-project-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cam-green);
    margin-top: 4px;
}

.fp-project-year {
    font-size: 0.72rem;
    color: var(--cam-steel);
}

.fp-project-card-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--border-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-market-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Market colors */
.fp-market-aviation    { background: var(--cam-navy); color: var(--text-on-dark); }
.fp-market-commercial  { background: var(--positive); color: var(--text-on-accent); }
.fp-market-industrial  { background: var(--warning); color: var(--text-on-accent); }
.fp-market-government  { background: var(--cam-navy); color: var(--text-on-dark); }
.fp-market-water       { background: var(--accent); color: var(--text-on-accent); }
.fp-market-wastewater  { background: var(--positive); color: var(--text-on-accent); }
.fp-market-dot         { background: var(--cam-yellow); color: var(--text-heading); }
.fp-market-default     { background: var(--text-secondary); color: var(--text-on-accent); }

.fp-btn-builder {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid var(--cam-navy);
    background: var(--bg-card);
    color: var(--cam-navy);
    border-radius: 3px;
    cursor: pointer;
}
.fp-btn-builder:hover { background: var(--bg-row-alt); }

.fp-btn-builder-active {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid var(--cam-green);
    background: var(--cam-green);
    color: var(--text-on-accent);
    border-radius: 3px;
    cursor: pointer;
}
.fp-btn-builder-active:hover { opacity: 0.9; }

/* Skeleton loading */
.fp-skeleton-card { pointer-events: none; }

.fp-skeleton-thumb {
    height: 160px;
    background: linear-gradient(90deg, var(--border-dim) 25%, var(--bg-row) 50%, var(--border-dim) 75%);
    background-size: 200% 100%;
    animation: fp-skeleton-pulse 1.5s ease-in-out infinite;
}

.fp-skeleton-line {
    height: 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--border-dim) 25%, var(--bg-row) 50%, var(--border-dim) 75%);
    background-size: 200% 100%;
    animation: fp-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes fp-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Cosential Sync Page ─────────────────────────────── */
.fp-sync-page { max-width: 1100px; }
.fp-sync-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
}
.fp-sync-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.fp-sync-entity-card {
    background: var(--bg-card); border: 1px solid var(--cam-light-gray);
    border-radius: 4px; padding: 1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: border-color 0.2s;
}
.fp-sync-entity-card:hover { border-color: var(--cam-navy); }
.fp-sync-disabled { opacity: 0.6; }
.fp-sync-entity-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}
.fp-sync-entity-details { font-size: 0.85rem; }
.fp-sync-detail-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0; border-bottom: 1px solid var(--border-dim);
}
.fp-sync-detail-row:last-child { border-bottom: none; }
.fp-sync-detail-label {
    font-weight: 600; font-size: 0.78rem; color: var(--cam-steel);
    letter-spacing: 0.04em;
}
.fp-sync-status-badge {
    display: inline-block; padding: 2px 8px; border-radius: 2px;
    font-size: 0.72rem; font-weight: 700;
}
.fp-sync-status-ok { background: var(--cam-green); color: var(--text-on-accent); }
.fp-sync-status-warn { background: var(--cam-yellow); color: var(--cam-midnight); }
.fp-sync-status-fail { background: var(--cam-rust); color: var(--text-on-accent); }
.fp-sync-status-run { background: var(--cam-steel); color: var(--text-on-accent); }
.fp-sync-status-cancel { background: var(--warning); color: var(--text-heading);; font-weight: 700; }

/* Kill / Cancel button */
.btn-kill {
    background: var(--negative);
    color: var(--text-on-accent);
    border: none;
    padding: 4px 12px;
    font-family: var(--font-display, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.15s;
}
.btn-kill:hover { background: var(--negative); }
.btn-kill:disabled { background: var(--text-muted); cursor: not-allowed; }

.fp-sync-console { margin-bottom: 1.5rem; }

/* Sync detail panel */
.fp-sync-detail-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 24px;
}
.fp-sync-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-row);
    border-bottom: 1px solid var(--border);
}
.fp-sync-detail-meta {
    font-size: 13px;
    color: var(--text-muted);;
}
.fp-sync-entity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--cam-navy);
    color: var(--text-on-dark);
    margin-right: 6px;
}
.fp-sync-summary-bar {
    padding: 8px 16px;
    background: var(--gonogo-go-bg);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--positive);
}
.fp-sync-error-box {
    margin: 16px;
    padding: 12px 16px;
    background: var(--gonogo-nogo-bg);
    border: 1px solid var(--gonogo-nogo-border);
    border-left: 4px solid var(--negative);
    border-radius: 4px;
}
.fp-sync-error-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--negative);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.fp-sync-error-message {
    font-family: monospace;
    font-size: 13px;
    color: var(--negative);
    word-break: break-word;
}
.fp-stack-trace {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.fp-sync-log-terminal {
    margin: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.fp-log-terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-sidebar);
    color: var(--text-muted);
    font-size: 12px;
}
.fp-log-terminal-body {
    background: var(--bg-page);
    color: var(--positive);
    font-family: monospace;
    font-size: 12px;
    padding: 12px 16px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
    margin: 0;
}
.fp-btn-copy {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}
.fp-btn-copy:hover {
    background: var(--border);
    color: var(--text-on-accent);
}
.fp-sync-no-log {
    padding: 24px 16px;
    color: var(--text-muted);;
    font-size: 13px;
    font-style: italic;
    text-align: center;
}
.fp-sync-no-selection {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);;
    font-size: 14px;
    border: 2px dashed var(--border);
    border-radius: 6px;
    margin-top: 16px;
}
.fp-clickable-row {
    cursor: pointer;
}
.fp-clickable-row:hover {
    background: var(--bg-row) !important;
}
.fp-row-selected {
    background: var(--gonogo-override-bg) !important;
    border-left: 3px solid var(--gonogo-link);
}

/* Connection status card */
.fp-sync-connection-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.fp-conn-ok { background: var(--gonogo-go-bg); color: var(--positive); border: 1px solid var(--gonogo-go-border); }
.fp-conn-error { background: var(--gonogo-nogo-bg); color: var(--negative); border: 1px solid var(--gonogo-nogo-border); }
.fp-conn-neutral { background: var(--bg-row); color: var(--text-muted);; border: 1px solid var(--border); }

/* ── Estimator Workload Chart ──────────── */

.fp-section-divider { border-top: 1px solid var(--border); margin: 32px 0 24px 0; }

.fp-workload-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.fp-workload-title { font-size: 18px; font-weight: 700; color: var(--text-heading); margin: 0 0 4px 0; }
.fp-workload-subtitle { font-size: 13px; color: var(--text-muted);; margin: 0; }
.fp-workload-summary { font-size: 13px; color: var(--text-muted);; text-align: right; }

.fp-workload-chart { display: flex; flex-direction: column; gap: 4px; }

.fp-workload-row {
    display: grid;
    grid-template-columns: 180px 1fr 80px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.fp-workload-label {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);;
    text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fp-workload-bar-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-row); border-radius: 4px; height: 28px; padding: 0 4px; position: relative;
}

.fp-workload-bar {
    background: var(--gonogo-link); height: 20px; border-radius: 3px; min-width: 4px;
    transition: width 0.3s ease;
}

.fp-workload-count { font-size: 12px; font-weight: 700; color: var(--gonogo-link); white-space: nowrap; }
.fp-workload-value { font-size: 12px; color: var(--text-muted);; text-align: right; white-space: nowrap; }

.fp-workload-opps { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 8px 192px; }

.fp-workload-opp-tag {
    font-size: 11px; background: var(--gonogo-override-bg); color: var(--gonogo-link); border-radius: 3px;
    padding: 2px 7px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}

.fp-workload-empty {
    padding: 24px; text-align: center; color: var(--text-muted);; font-size: 14px; font-style: italic;
    border: 2px dashed var(--border); border-radius: 6px;
}

@media (max-width: 768px) {
    .fp-workload-row { grid-template-columns: 120px 1fr 60px; gap: 8px; }
    .fp-workload-label { font-size: 12px; }
    .fp-workload-opps { padding-left: 128px; }
}

/* Settings page */
.fp-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.fp-settings-card {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 20px 24px;
}
.fp-settings-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--cam-navy);
    margin-bottom: 8px;
}
.fp-settings-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.fp-text-muted {
    color: var(--text-faint) !important;
    font-style: italic;
}

/* ── Next Actions ────────────────────────────── */

/* Priority badges */
.fp-na-priority-high { background:var(--gonogo-nogo-bg); color:var(--negative); border:1px solid var(--gonogo-nogo-border); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; }
.fp-na-priority-normal { background:var(--bg-row); color:var(--text-muted); border:1px solid var(--border); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.fp-na-priority-low { background:var(--gonogo-override-bg); color:var(--gonogo-link); border:1px solid var(--gonogo-override-border); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }

/* Owner type badges */
.fp-na-type-opportunity { background:var(--gonogo-override-bg); color:var(--text-heading); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.fp-na-type-contact { background:var(--gonogo-go-bg); color:var(--positive); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.fp-na-type-company { background:var(--gonogo-conditional-bg); color:var(--warning); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }

/* Due date indicators */
.fp-na-overdue { color:var(--negative); font-weight:700; }
.fp-na-due-today { color:var(--warning); font-weight:600; }
.fp-na-due-soon { color:var(--warning); }

/* Next action card */
.fp-na-card { border:1px solid var(--border); border-radius:6px; padding:12px 16px; margin-bottom:10px; background:var(--bg-card); }
.fp-na-card.fp-na-card-overdue { border-left:4px solid var(--negative); }
.fp-na-card.fp-na-card-today { border-left:4px solid var(--warning); }
.fp-na-card-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fp-na-card-text { font-size:14px; color:var(--text-heading); margin-bottom:6px; }
.fp-na-card-meta { font-size:12px; color:var(--text-muted); display:flex; gap:16px; align-items:center; }
.fp-na-card-actions { margin-top:10px; display:flex; gap:8px; }

/* Section headers on list page */
.fp-na-section-overdue { background:var(--gonogo-nogo-bg); color:var(--negative); padding:6px 12px; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:0.5px; margin:16px 0 8px; }
.fp-na-section-thisweek { background:var(--gonogo-conditional-bg); color:var(--warning); padding:6px 12px; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:0.5px; margin:16px 0 8px; }
.fp-na-section-upcoming { background:var(--bg-row); color:var(--text-muted); padding:6px 12px; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:0.5px; margin:16px 0 8px; }

/* ── Compact row layout (Wave 1 redesign) ── */
.fp-na-list { border:1px solid var(--border); border-radius:6px; background:var(--bg-card); overflow:hidden; }

.fp-na-row {
    display:grid;
    grid-template-columns: 28px minmax(160px,1.2fr) minmax(200px,2fr) minmax(100px,0.8fr) minmax(90px,0.7fr) 90px;
    align-items:center;
    padding:8px 12px;
    border-bottom:1px solid var(--border-dim);
    font-size:13px;
    gap:8px;
    transition:background 0.1s;
}
.fp-na-row:last-child { border-bottom:none; }
.fp-na-row:hover { background:var(--bg-row); }

.fp-na-row-header {
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
    background:var(--bg-row);
    border-bottom:1px solid var(--border);
    padding:6px 12px;
}
.fp-na-row-header:hover { background:var(--bg-row); }

.fp-na-row-overdue { border-left:3px solid var(--negative); }
.fp-na-row-today { border-left:3px solid var(--warning); }

.fp-na-col-priority { display:flex; align-items:center; justify-content:center; }
.fp-na-col-record { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.fp-na-col-action { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.fp-na-col-assignee { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:12px; }
.fp-na-col-due { font-size:12px; white-space:nowrap; }
.fp-na-col-actions { display:flex; gap:4px; align-items:center; justify-content:flex-end; }

.fp-na-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.fp-na-dot-high { background:var(--negative); }
.fp-na-dot-normal { background:var(--text-muted); opacity:0.4; }
.fp-na-dot-low { background:var(--accent); opacity:0.5; }

.fp-na-record-link { color:var(--text-heading); font-weight:600; text-decoration:none; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.fp-na-record-link:hover { color:var(--accent); }
.fp-na-type-label { font-size:10px; color:var(--text-muted); background:var(--bg-row); padding:1px 6px; border-radius:8px; flex-shrink:0; }

.fp-na-btn-complete {
    background:var(--accent); color:white; border:none; border-radius:4px;
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:14px; transition:background 0.15s;
}
.fp-na-btn-complete:hover { background:var(--positive); }

.fp-na-btn-goto {
    color:var(--text-muted); border:none; background:none;
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:13px; text-decoration:none; border-radius:4px;
}
.fp-na-btn-goto:hover { background:var(--bg-row); color:var(--accent); }

.fp-na-btn-delete {
    color:var(--text-muted); border:none; background:none;
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:12px; border-radius:4px;
}
.fp-na-btn-delete:hover { background:var(--bg-row); color:var(--negative); }

/* Completion toast */
.fp-na-toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:var(--bg-card); border:1px solid var(--positive); border-radius:8px;
    padding:8px 20px; box-shadow:0 4px 12px rgba(0,0,0,0.1);
    font-size:13px; font-weight:600; color:var(--text-heading);
    display:flex; align-items:center; gap:8px;
    animation:fp-na-toast-in 0.3s ease;
    z-index:1060;
}
@keyframes fp-na-toast-in {
    from { opacity:0; transform:translateX(-50%) translateY(10px); }
    to { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── Top bar controls ── */
.fp-topbar-controls {
    display:flex; align-items:center; gap:4px; flex-shrink:0;
}

.fp-topbar-icon-btn {
    width:36px; height:36px; border-radius:6px; border:none;
    background:transparent; color:var(--text-logo, #fff); font-size:18px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background 0.15s; text-decoration:none;
}
.fp-topbar-icon-btn:hover { background:rgba(255,255,255,0.1); color:var(--text-logo, #fff); }

/* ── Quick-Create button (Wave 1) ── */
.fp-quick-create-wrap { position:relative; display:inline-flex; }

.fp-quick-create-backdrop {
    position:fixed; inset:0; z-index:1040; background:transparent;
}

.fp-quick-create-menu {
    position:absolute; top:40px; right:0; z-index:1041;
    background:var(--bg-card); border:1px solid var(--border); border-radius:6px;
    box-shadow:0 4px 16px rgba(0,0,0,0.12); min-width:200px; padding:4px 0;
    animation:fp-qc-in 0.15s ease;
}
@keyframes fp-qc-in {
    from { opacity:0; transform:translateY(-4px); }
    to { opacity:1; transform:translateY(0); }
}

.fp-quick-create-menu a {
    display:flex; align-items:center; gap:8px; padding:8px 14px;
    font-size:0.82rem; color:var(--text-primary) !important; text-decoration:none;
    transition:background 0.1s;
}
.fp-quick-create-menu a:hover { background:var(--bg-row); }
.fp-quick-create-menu a i { font-size:14px; color:var(--text-muted); width:18px; text-align:center; }

/* ── Pipeline compact stat bar (Wave 1) ── */
/* KPI mini cards */
.fp-page-title-row {
    display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.5rem; flex-wrap:wrap;
}
.fp-page-title-row .fp-page-title { margin-bottom:0; }
.fp-page-title-row .fp-kpi-row { margin-bottom:0; }

.fp-kpi-row {
    display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; flex-wrap:wrap;
}
.fp-kpi-card {
    display:flex; align-items:center; gap:8px; padding:8px 14px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:6px;
    border-left:3px solid var(--border); min-width:0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.fp-kpi-icon { font-size:1rem; opacity:0.7; flex-shrink:0; }
.fp-kpi-body { display:flex; flex-direction:column; min-width:0; }
.fp-kpi-value { font-size:1.1rem; font-weight:700; color:var(--text-heading); line-height:1.1; white-space:nowrap; }
.fp-kpi-label { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; line-height:1.2; }
.fp-kpi-trend { font-size:0.68rem; font-weight:700; margin-left:2px; white-space:nowrap; }
.fp-kpi-trend-up { color:var(--cam-green); }
.fp-kpi-trend-down { color:var(--negative); }

/* KPI card color accents */
.fp-kpi-green { border-left-color:var(--cam-green); }
.fp-kpi-green .fp-kpi-icon { color:var(--cam-green); }
.fp-kpi-navy { border-left-color:var(--cam-navy); }
.fp-kpi-navy .fp-kpi-icon { color:var(--cam-navy); }
.fp-kpi-steel { border-left-color:var(--cam-steel); }
.fp-kpi-steel .fp-kpi-icon { color:var(--cam-steel); }
.fp-kpi-yellow { border-left-color:var(--cam-yellow); }
.fp-kpi-yellow .fp-kpi-icon { color:var(--cam-yellow); }
.fp-kpi-red { border-left-color:var(--negative); }
.fp-kpi-red .fp-kpi-icon { color:var(--negative); }
.fp-kpi-red .fp-kpi-value { color:var(--negative); }

/* Table pages: fill remaining vertical space, confine table to viewport.
   Height accounts for topbar (64px) + article padding (~56px). */
.fp-table-page { display:flex; flex-direction:column; height:calc(100vh - var(--topbar-height) - 4rem); overflow:hidden; }
.fp-table-scroll { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
.fp-pipeline-page { display:flex; flex-direction:column; height:calc(100vh - var(--topbar-height) - 4rem); overflow:hidden; }
.fp-pipeline-table-scroll { flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }
/* Generic table wrapper — used by Personnel, Prequals, and any unstyled table containers */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Panel header */
.fp-na-panel-header { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 14px; }
.fp-na-form { padding:0.75rem 14px; border:1px solid var(--border); border-radius:6px; margin:0 14px 0.75rem; background: var(--bg-row); }

/* Home dashboard card */
.fp-home-nextactions { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:20px 24px; }
.fp-home-nextactions-counts { display:flex; gap:24px; margin-bottom:16px; }
.fp-home-na-count { text-align:center; }
.fp-home-na-count-number { font-size:28px; font-weight:700; line-height:1; }
.fp-home-na-count-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }

/* Dark mode overrides */
html.dark .fp-na-card { background:var(--surface-primary); border-color:var(--border-default); }
html.dark .fp-na-card-text { color:var(--text-primary); }
html.dark .fp-na-card-meta { color:var(--text-muted); }
html.dark .fp-home-nextactions { background:var(--surface-primary); border-color:var(--border-default); }
html.dark .fp-na-form { background:var(--surface-secondary); border-color:var(--border-default); }

/* ── Next Action Prompt Modal ── */
.fp-na-prompt-modal { border-radius:6px; overflow:hidden; }
.fp-na-prompt-header {
    background:linear-gradient(135deg, var(--cam-navy) 0%, var(--bg-sidebar) 100%);
    color:var(--text-on-accent); padding:16px 20px; font-size:1rem; font-weight:700;
    letter-spacing:0.03em; display:flex; align-items:center; gap:8px;
}
.fp-na-prompt-header i { font-size:1.1rem; color:var(--cam-yellow); }
.fp-na-prompt-body { padding:20px; }
.fp-na-prompt-hint {
    font-size:0.82rem; color:var(--cam-steel); margin-bottom:16px;
    padding:10px 14px; background:var(--bg-row-alt); border-left:3px solid var(--cam-navy);
    border-radius:0 4px 4px 0;
}
.fp-na-prompt-context {
    font-size:0.78rem; color:var(--cam-steel); margin-top:12px;
    padding:8px 12px; background: var(--bg-row); border-radius:4px;
}
.fp-na-prompt-context i { color:var(--cam-navy); margin-right:4px; }
.fp-na-prompt-footer {
    padding:14px 20px; display:flex; justify-content:flex-end; gap:10px;
    border-top:1px solid var(--border-dim);
}
.fp-na-prompt-skip {
    border:1px solid var(--border); padding:6px 16px; border-radius:2px;
    font-size:0.78rem; font-weight:600; letter-spacing:0.06em;
    background:var(--bg-card); color:var(--text-muted);
}
.fp-na-prompt-skip:hover { background: var(--bg-row); }
.fp-na-prompt-create {
    background:var(--cam-navy); color:var(--text-on-dark); border:none; padding:6px 16px;
    border-radius:2px; font-size:0.78rem; font-weight:700; letter-spacing:0.06em;
}
.fp-na-prompt-create:hover { background:var(--cam-navy); color:var(--text-on-dark); }

/* Dark mode */
html.dark .fp-na-prompt-hint { background:rgba(23,43,84,0.15); border-color:var(--cam-steel); color:var(--text-secondary); }
html.dark .fp-na-prompt-context { background:var(--surface-secondary); color:var(--text-muted); }
html.dark .fp-na-prompt-footer { border-color:var(--border-default); }
html.dark .fp-na-prompt-skip { background:var(--surface-secondary); border-color:var(--border-default); color:var(--text-secondary); }

/* ── Tabs ── */
.fp-tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); }
.fp-tab {
    background:none; border:none; border-bottom:2px solid transparent;
    padding:8px 18px; font-size:0.82rem; font-weight:600; color:var(--cam-steel);
    cursor:pointer; margin-bottom:-2px; letter-spacing:0.03em;
    display:flex; align-items:center; gap:6px;
}
.fp-tab:hover { color:var(--cam-navy); border-bottom-color:var(--border); }
.fp-tab.fp-tab-active {
    color:var(--cam-navy); border-bottom-color:var(--cam-navy);
}

/* ── Info Banner ── */
.fp-info-banner {
    background:var(--gonogo-override-bg); border:1px solid var(--gonogo-override-border); border-left:4px solid var(--gonogo-link);
    color:var(--gonogo-link-hover); padding:10px 16px; border-radius:4px; font-size:0.82rem;
    display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.fp-info-banner code { background:rgba(0,0,0,0.06); padding:1px 5px; border-radius:2px; font-size:0.78rem; }
.fp-banner-dismiss {
    background:none; border:none; color:var(--gonogo-link); cursor:pointer;
    font-size:1.1rem; padding:0 4px; line-height:1; flex-shrink:0;
}
.fp-banner-dismiss:hover { color:var(--gonogo-link-hover); }

/* Dark mode */
html.dark .fp-tab-bar { border-color:var(--border-default); }
html.dark .fp-tab { color:var(--text-muted); }
html.dark .fp-tab:hover { color:var(--text-primary); border-bottom-color:var(--text-muted); }
html.dark .fp-tab.fp-tab-active { color:var(--text-primary); border-bottom-color:var(--cam-steel); }
html.dark .fp-info-banner { background:rgba(25,118,210,0.1); border-color:rgba(25,118,210,0.3); color:var(--gonogo-override-text); }
html.dark .fp-info-banner code { background:rgba(255,255,255,0.1); color:var(--gonogo-override-text); }
html.dark .fp-banner-dismiss { color:var(--gonogo-override-text); }

/* ── CUI Badge & Status ── */
.fp-cui-badge {
    display:inline-block; background:var(--negative); color:var(--text-on-accent);
    font-size:10px; font-weight:800; letter-spacing:0.8px;
    padding:2px 6px; border-radius:3px; text-transform:uppercase;
    vertical-align:middle; margin-left:6px; cursor:default;
}
.fp-cui-setby { font-size:11px; color:var(--text-muted); margin-left:8px; }
.fp-cui-warning {
    background:var(--gonogo-conditional-bg); border:1px solid var(--gonogo-conditional-border); border-left:4px solid var(--warning);
    color:var(--warning); padding:8px 12px; border-radius:4px; font-size:12px; margin-top:8px;
}

/* Dark mode */
html.dark .fp-cui-badge { background:var(--negative); }
html.dark .fp-cui-setby { color:var(--text-muted); }
html.dark .fp-cui-warning { background:rgba(249,168,37,0.1); border-color:rgba(249,168,37,0.3); color:var(--warning); }

/* ── Flo AI Assistant — Slide-out Panel ── */

/* Backdrop overlay */
.fp-flo-backdrop {
    position:fixed; inset:0; z-index:99;
    background:rgba(0,0,0,0.15);
    opacity:0; pointer-events:none;
    transition:opacity 300ms ease-in-out;
}
.fp-flo-backdrop-visible {
    opacity:1; pointer-events:auto;
}

/* Slide-out container — always rendered, off-screen when closed */
.fp-flo-slideout {
    position:fixed; top:0; right:0; bottom:0; z-index:100;
    width:420px;
    transform:translateX(100%);
    transition:transform 300ms ease-in-out;
    display:flex; flex-direction:row;
}
.fp-flo-slideout-open {
    transform:translateX(0);
}

/* Tab/nib on left edge */
.fp-flo-tab {
    position:absolute; left:-40px; top:50%; transform:translateY(-50%);
    width:40px; height:100px;
    background:var(--bg-sidebar); color:var(--text-on-dark);
    border:none; border-radius:8px 0 0 8px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    cursor:pointer; z-index:101;
    font-family:var(--font-main); font-size:12px; font-weight:700;
    letter-spacing:0.04em;
    box-shadow:-2px 0 8px rgba(0,0,0,0.15);
    transition:background 0.2s;
}
.fp-flo-tab:hover {
    background:var(--accent);
}
.fp-flo-tab-icon {
    font-size:18px; color:var(--accent); line-height:1;
}
.fp-flo-tab:hover .fp-flo-tab-icon {
    color:var(--text-on-accent);
}
.fp-flo-tab-label {
    writing-mode:vertical-lr; text-orientation:mixed;
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
}

/* Panel body — fills slideout container */
.fp-flo-panel {
    flex:1; display:flex; flex-direction:column; overflow:hidden;
    background:color-mix(in srgb, var(--bg-card) 95%, transparent);
    border-left:1px solid var(--border);
    box-shadow:-4px 0 24px rgba(0,0,0,0.12);
}

.fp-flo-header {
    background:var(--cam-navy); padding:14px 16px;
    display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.fp-flo-header-left { display:flex; align-items:center; gap:10px; }
.fp-flo-avatar { font-size:20px; color:var(--cam-yellow); }
.fp-flo-title { color:var(--text-on-accent); font-size:15px; font-weight:700; }
.fp-flo-subtitle { color:rgba(255,255,255,0.55); font-size:11px; }
.fp-flo-header-actions { display:flex; gap:8px; align-items:center; }
.fp-flo-clear, .fp-flo-close {
    background:none; border:none; color:rgba(255,255,255,0.6);
    cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px;
}
.fp-flo-clear:hover, .fp-flo-close:hover { color:var(--text-on-accent); background:rgba(255,255,255,0.1); }

.fp-flo-messages {
    flex:1; overflow-y:auto; padding:16px;
    display:flex; flex-direction:column; gap:12px;
}

.fp-flo-empty { text-align:center; padding:16px 8px; }
.fp-flo-empty-icon { font-size:32px; color:var(--cam-yellow); margin-bottom:12px; }
.fp-flo-empty-text { font-size:13px; color:var(--text-muted); margin-bottom:16px; line-height:1.5; }
.fp-flo-starters { display:flex; flex-direction:column; gap:6px; }
.fp-flo-starter {
    background:var(--bg-row); border:1px solid var(--border-dim); border-radius:8px;
    padding:8px 12px; font-size:12px; color:var(--cam-navy);
    cursor:pointer; text-align:left; transition:background 0.15s;
}
.fp-flo-starter:hover { background: var(--bg-row-alt); }

.fp-flo-msg { display:flex; gap:8px; align-items:flex-start; }
.fp-flo-msg-user { flex-direction:row-reverse; }
.fp-flo-msg-avatar { font-size:14px; color:var(--cam-yellow); margin-top:6px; flex-shrink:0; }
.fp-flo-msg-bubble { max-width:85%; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5; }
.fp-flo-msg-user .fp-flo-msg-bubble { background:var(--cam-navy); color:var(--text-on-dark); border-bottom-right-radius:4px; }
.fp-flo-msg-assistant .fp-flo-msg-bubble { background: var(--bg-row); color:var(--text-heading); border-bottom-left-radius:4px; }

.fp-flo-thinking {
    background: var(--bg-row); border-radius:12px; border-bottom-left-radius:4px;
    padding:12px 16px; display:flex; gap:4px; align-items:center;
}
.fp-flo-thinking span {
    width:6px; height:6px; border-radius:50%; background:var(--text-muted);
    animation:fp-flo-bounce 1.2s infinite;
}
.fp-flo-thinking span:nth-child(2) { animation-delay:0.2s; }
.fp-flo-thinking span:nth-child(3) { animation-delay:0.4s; }
@keyframes fp-flo-bounce {
    0%, 80%, 100% { transform:translateY(0); }
    40% { transform:translateY(-6px); background:var(--cam-navy); }
}

.fp-flo-error {
    background:var(--gonogo-nogo-bg); border:1px solid var(--gonogo-nogo-border); border-radius:8px;
    padding:10px 14px; font-size:12px; color:var(--negative);
}

.fp-flo-input-area {
    padding:12px; border-top:1px solid var(--border);
    display:flex; gap:8px; align-items:flex-end; flex-shrink:0; background:var(--bg-card);
}
.fp-flo-input {
    flex:1; border:1px solid var(--border); border-radius:10px;
    padding:10px 14px; font-size:13px; resize:none; outline:none;
    font-family:inherit; max-height:120px; overflow-y:auto;
}
.fp-flo-input:focus { border-color:var(--cam-navy); }
.fp-flo-send {
    background:var(--cam-navy); color:var(--text-on-dark); border:none; border-radius:10px;
    width:36px; height:36px; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background 0.15s;
}
.fp-flo-send:hover { background:var(--cam-navy); }
.fp-flo-send-disabled { background:var(--text-muted) !important; cursor:not-allowed !important; }

.fp-flo-footer {
    text-align:center; font-size:10px; color:var(--text-muted);
    padding:6px; background:var(--bg-card); flex-shrink:0;
}

/* ── Flo panel: mobile/iPad responsive ── */
@media (max-width: 768px) {
    .fp-flo-slideout {
        width: 100vw;
    }
    .fp-flo-tab {
        left: -36px;
        width: 36px;
        height: 80px;
    }
    .fp-flo-tab-label {
        font-size: 9px;
    }
}
@media (min-width: 769px) and (max-width: 991px) {
    .fp-flo-slideout {
        width: min(420px, 100vw);
    }
}

/* Dark mode */
html.dark .fp-flo-panel { background:var(--surface-primary); border-color:var(--border-default); }
html.dark .fp-flo-messages { background:var(--surface-primary); }
html.dark .fp-flo-msg-assistant .fp-flo-msg-bubble { background:var(--surface-secondary); color:var(--text-primary); }
html.dark .fp-flo-thinking { background:var(--surface-secondary); }
html.dark .fp-flo-empty-text { color:var(--text-muted); }
html.dark .fp-flo-starter { background:var(--surface-secondary); border-color:var(--border-default); color:var(--text-primary); }
html.dark .fp-flo-starter:hover { background:var(--surface-tertiary); }
html.dark .fp-flo-input-area { background:var(--surface-primary); border-color:var(--border-default); }
html.dark .fp-flo-input { background:var(--surface-secondary); border-color:var(--border-default); color:var(--text-primary); }
html.dark .fp-flo-footer { background:var(--surface-primary); color:var(--text-muted); }
html.dark .fp-flo-error { background:rgba(198,40,40,0.15); border-color:rgba(198,40,40,0.3); color:var(--negative); }

/* ── Flo Toggle Switch ─────────────────────────────── */
.fp-flo-toggle-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.fp-flo-toggle-label { font-size:15px; font-weight:600; color:var(--text-primary); }
.fp-flo-toggle-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.fp-toggle-switch { width:48px; height:26px; background:var(--text-muted); border-radius:13px; cursor:pointer; position:relative; transition:background 0.2s; flex-shrink:0; }
.fp-toggle-switch.fp-toggle-on { background:var(--cam-navy); }
.fp-toggle-knob { position:absolute; top:3px; left:3px; width:20px; height:20px; background:var(--bg-card); border-radius:50%; transition:left 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.fp-toggle-switch.fp-toggle-on .fp-toggle-knob { left:25px; }
.fp-save-confirm { font-size:12px; color:var(--positive); margin-top:8px; }

/* ── Flo Disabled State ────────────────────────────── */
.fp-flo-disabled { padding:24px; text-align:center; color:var(--text-muted); font-size:13px; font-style:italic; }

/* ── Flo Audit Log ─────────────────────────────────── */
.fp-summary-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.fp-summary-card { background:var(--surface-primary); border:1px solid var(--border-default); border-radius:var(--border-radius); padding:16px 20px; text-align:center; }
.fp-summary-value { font-size:24px; font-weight:700; color:var(--cam-navy); }
.fp-summary-label { font-size:11px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.5px; }
.fp-filter-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.fp-clickable-row { cursor:pointer; }
.fp-clickable-row:hover { background:var(--surface-hover); }
.fp-flo-log-expanded td { background:var(--surface-secondary); padding:16px 20px !important; border-bottom:2px solid var(--border-default); }
.fp-flo-log-q { font-size:13px; color:var(--text-primary); margin-bottom:8px; }
.fp-flo-log-a { font-size:13px; color:var(--text-secondary); line-height:1.5; margin-bottom:8px; white-space:pre-wrap; }
.fp-flo-log-err { font-size:12px; color:var(--negative); margin-bottom:8px; }
.fp-flo-log-meta { font-size:11px; color:var(--text-faint); }
.fp-flo-log-question { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-pagination { display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.fp-btn-outline { background:transparent; border:1px solid var(--border-default); padding:6px 14px; border-radius:var(--border-radius); font-size:12px; cursor:pointer; color:var(--text-primary); }
.fp-btn-outline:hover:not(:disabled) { background:var(--surface-hover); }
.fp-btn-outline:disabled { opacity:0.4; cursor:not-allowed; }
.fp-status-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.fp-status-success { background:var(--gonogo-go-bg); color:var(--positive); }
.fp-status-failed { background:var(--gonogo-nogo-bg); color:var(--negative); }

/* Dark mode — Flo audit */
html.dark .fp-summary-card { background:var(--surface-primary); border-color:var(--border-default); }
html.dark .fp-summary-value { color:var(--cam-yellow); }
html.dark .fp-clickable-row:hover { background:var(--surface-hover); }
html.dark .fp-flo-log-expanded td { background:var(--surface-secondary); border-color:var(--border-default); }
html.dark .fp-status-success { background:rgba(46,125,50,0.15); color:var(--positive); }
html.dark .fp-status-failed { background:rgba(198,40,40,0.15); color:var(--negative); }
html.dark .fp-btn-outline { border-color:var(--border-default); color:var(--text-primary); }
html.dark .fp-toggle-switch { background:var(--text-muted); }
html.dark .fp-save-confirm { color:var(--positive); }

/* ── Cosential Credentials Card ────────────────────── */
.fp-settings-card-credentials { border-left:4px solid var(--cam-navy); }
.fp-settings-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.fp-cred-status { font-size:12px; font-weight:600; padding:4px 10px; border-radius:12px; white-space:nowrap; flex-shrink:0; }
.fp-cred-status-ok { background:var(--gonogo-go-bg); color:var(--positive); }
.fp-cred-status-missing { background:var(--gonogo-conditional-bg); color:var(--warning); }
.fp-cred-form { display:flex; flex-direction:column; gap:16px; }
.fp-cred-field { display:flex; flex-direction:column; gap:4px; }
.fp-cred-field label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; }
.fp-cred-field .fp-input { border:1px solid var(--border-input); border-radius:6px; padding:9px 12px; font-size:14px; outline:none; font-family:inherit; background:var(--surface-primary); color:var(--text-primary); }
.fp-cred-field .fp-input:focus { border-color:var(--cam-navy); box-shadow:0 0 0 2px rgba(26,42,74,0.1); }
.fp-cred-hint { font-size:11px; color:var(--text-faint); line-height:1.4; }
.fp-cred-actions { display:flex; gap:10px; margin-top:4px; }
.fp-cred-test-result { margin-top:4px; font-size:13px; }
.fp-cred-footer { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--border-light); font-size:11px; color:var(--text-faint); }
.fp-cred-footer a { color:var(--cam-navy); font-weight:600; text-decoration:none; }
.fp-cred-footer a:hover { text-decoration:underline; }
.fp-alert-success { background:var(--gonogo-go-bg); border:1px solid var(--gonogo-go-border); color:var(--positive); padding:10px 14px; border-radius:6px; font-size:13px; }
.fp-alert-error { background:var(--gonogo-nogo-bg); border:1px solid var(--gonogo-nogo-border); color:var(--negative); padding:10px 14px; border-radius:6px; font-size:13px; }

/* Dark mode — credentials */
html.dark .fp-settings-card-credentials { border-left-color:var(--cam-yellow); }
html.dark .fp-cred-status-ok { background:rgba(46,125,50,0.15); color:var(--positive); }
html.dark .fp-cred-status-missing { background:rgba(230,81,0,0.15); color:var(--warning); }
html.dark .fp-cred-footer { border-top-color:var(--border-default); }
html.dark .fp-cred-footer a { color:var(--cam-yellow); }
html.dark .fp-alert-success { background:rgba(46,125,50,0.15); border-color:rgba(46,125,50,0.3); color:var(--positive); }
html.dark .fp-alert-error { background:rgba(198,40,40,0.15); border-color:rgba(198,40,40,0.3); color:var(--negative); }

/* --- AppSettings Key/Value Editor --- */
.fp-appsettings-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
.fp-appsettings-table th { text-align:left; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; padding:6px 10px; border-bottom:2px solid var(--border-default); }
.fp-appsettings-table td { padding:8px 10px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.fp-appsettings-key { font-weight:600; font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; white-space:nowrap; color:var(--text-primary); }
.fp-appsettings-desc { font-size:12px; color:var(--text-muted); max-width:220px; }
.fp-appsettings-date { font-size:11px; color:var(--text-faint); white-space:nowrap; }
.fp-appsettings-input { width:100%; min-width:120px; border:1px solid var(--border-input); border-radius:6px; padding:6px 10px; font-size:13px; outline:none; font-family:inherit; background:var(--surface-primary); color:var(--text-primary); }
.fp-appsettings-input:focus { border-color:var(--cam-navy); box-shadow:0 0 0 2px rgba(26,42,74,0.1); }
.fp-appsettings-actions { white-space:nowrap; display:flex; align-items:center; gap:8px; }
.fp-appsettings-newrow td { background:var(--surface-hover); }
.fp-btn-sm { padding:4px 12px; font-size:12px; }
.fp-inline-success { font-size:11px; color:var(--positive); font-weight:600; }
.fp-inline-error { font-size:11px; color:var(--negative); font-weight:600; }

html.dark .fp-appsettings-table th { border-bottom-color:var(--border-default); }
html.dark .fp-appsettings-table td { border-bottom-color:var(--border-default); }
html.dark .fp-appsettings-input { background:var(--surface-secondary); border-color:var(--border-default); color:var(--text-primary); }
html.dark .fp-appsettings-input:focus { border-color:var(--cam-yellow); box-shadow:0 0 0 2px rgba(255,197,41,0.15); }
html.dark .fp-appsettings-newrow td { background:var(--surface-secondary); }
html.dark .fp-inline-success { color:var(--positive); }
html.dark .fp-inline-error { color:var(--negative); }

/* --- Live Sync Feed Panel --- */
.fp-sync-live-panel { margin:20px 0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.fp-sync-live-header { background:var(--cam-navy); padding:10px 16px; display:flex; align-items:center; gap:16px; }
.fp-sync-live-title { color:white; font-size:13px; font-weight:700; flex:1; }
.fp-sync-live-meta { color:rgba(255,255,255,0.55); font-size:11px; }
.fp-sync-clear-btn { background:none; border:1px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.7); border-radius:4px; padding:2px 8px; font-size:11px; cursor:pointer; }
.fp-sync-live-feed { background:var(--bg-page); height:280px; overflow-y:auto; padding:8px 0; font-family:var(--font-mono); font-size:11.5px; line-height:1.7; }
.fp-sync-event { display:flex; gap:10px; padding:1px 16px; align-items:baseline; }
.fp-sync-event:hover { background:rgba(255,255,255,0.04); }
.fp-sync-event-time { color:var(--text-muted); flex-shrink:0; min-width:65px; }
.fp-sync-event-entity { color:var(--cam-yellow); flex-shrink:0; min-width:120px; }
.fp-sync-event-msg { color:var(--text-secondary); }
.fp-sync-event-fetching .fp-sync-event-msg { color:var(--gonogo-override-text); }
.fp-sync-event-upserting .fp-sync-event-msg { color:var(--gonogo-go-text); }
.fp-sync-event-complete .fp-sync-event-msg { color:var(--positive); }
.fp-sync-event-error .fp-sync-event-msg { color:var(--negative); }
.fp-sync-event-info .fp-sync-event-msg { color:var(--text-muted); }
.fp-sync-progress-bar { height:3px; background:var(--cam-navy); overflow:hidden; }
.fp-sync-progress-fill { height:100%; background:var(--cam-yellow); transition:width 0.5s ease; }

/* --- Sync Timer --- */
.fp-sync-timer { font-size:11px; color:var(--text-muted); margin-top:6px; font-variant-numeric:tabular-nums; padding:0 16px 8px; }

/* --- Single Record Lookup --- */
.fp-single-lookup { margin-top:12px; border-top:1px solid var(--border-dim); padding:10px 16px 8px; }
.fp-single-lookup-toggle { background:none; border:none; color:var(--text-heading); font-size:12px; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; }
.fp-single-lookup-form { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.fp-single-lookup-result { font-size:12px; margin-top:4px; }

/* Dark mode — live feed & lookup */
html.dark .fp-sync-live-panel { border-color:var(--border-default); }
html.dark .fp-single-lookup { border-top-color:var(--border-default); }
html.dark .fp-single-lookup-toggle { color:var(--cam-yellow); }

/* ============================================================
   FONT SIZE CLASSES
   ============================================================ */
html.font-small  { font-size: 13px; }
html.font-medium { font-size: 14px; }
html.font-large  { font-size: 16px; }

/* ============================================================
   DENSITY CLASSES
   ============================================================ */
html.density-compact .table td,
html.density-compact .table th {
    padding: 0.25rem 0.5rem;
}
html.density-compact .fp-opp-field-row { padding: 4px 0; }
html.density-compact .fp-kpi-card .card-body { padding: 0.5rem 0.75rem; }
html.density-compact .card { margin-bottom: 0.5rem; }
html.density-compact .fp-settings-card { padding: 12px 16px; }
html.density-compact .fp-detail-panel { padding: 12px; }
html.density-compact .nav-item ::deep .nav-link { height: 2rem; padding: 0 0.6rem; font-size: 0.82rem; }
html.density-compact .fp-news-card { padding: 10px 14px; }
html.density-compact .fp-sync-entity-card { padding: 10px 14px; }
html.density-compact .fp-filter-bar { padding: 6px 10px; }

/* ============================================================
   DISPLAY SETTINGS PANEL
   ============================================================ */
.fp-display-section { margin-bottom: 24px; }
.fp-display-section h5 {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px;
}
.fp-display-options {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.fp-display-option {
    flex: 1; min-width: 80px; max-width: 160px;
    border: 2px solid var(--border-default); border-radius: 8px;
    padding: 12px 14px; text-align: center; cursor: pointer;
    background: var(--surface-primary); color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
    font-size: 13px; font-weight: 600;
}
.fp-display-option:hover { border-color: var(--cam-steel); }
.fp-display-option.fp-display-active {
    border-color: var(--cam-navy); background: var(--surface-inset);
}
html.dark .fp-display-option.fp-display-active {
    border-color: var(--cam-yellow); background: var(--surface-tertiary);
}
.fp-display-option-icon { font-size: 20px; margin-bottom: 4px; }
.fp-display-option-label { font-size: 12px; color: var(--text-muted); font-weight: 400; }

/* --- Theme Selector Cards --- */
.fp-theme-cards {
    display: flex; flex-wrap: wrap; gap: 14px;
}
.fp-theme-card {
    border: 2px solid var(--border); border-radius: 8px;
    padding: 16px; width: 180px; cursor: pointer;
    background: var(--bg-card);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.fp-theme-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.fp-theme-card-selected { box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.fp-theme-swatches { display: flex; gap: 6px; margin-bottom: 10px; }
.fp-theme-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
.fp-theme-card-name {
    font-family: var(--font-display, var(--font-heading));
    font-size: 1rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--text-heading, var(--cam-navy));
    margin-bottom: 4px;
}
.fp-theme-card-desc { font-size: 0.78rem; color: var(--text-secondary); }
.fp-theme-active-label { font-size: 0.85rem; letter-spacing: 0.04em; }
.fp-btn-apply-theme {
    min-width: 160px; font-size: 0.82rem; padding: 8px 24px;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.fp-btn-apply-theme:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── GC Tier Badges ────────────────────────────────────────────── */
.fp-gc-tier-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.fp-gc-tier-1 { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); border: 1px solid var(--positive); }
.fp-gc-tier-2 { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border: 1px solid var(--accent); }
.fp-gc-tier-3 { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); border: 1px solid var(--warning); }
.fp-gc-tier-4 { background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text-muted); border: 1px solid var(--border); }
.fp-gc-tier-5 { background: color-mix(in srgb, var(--negative) 15%, transparent); color: var(--negative); border: 1px solid var(--negative); }

/* ============================================================
   VOICE NOTE — Recording UI, Floating FAB, Modal Steps
   ============================================================ */

/* ── Floating Action Button ───────────────────────────────────── */
.vn-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--cam-navy, #172b54);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vn-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.vn-fab-hidden { display: none; }

@media (max-width: 768px) {
    .vn-fab { width: 56px; height: 56px; font-size: 1.4rem; bottom: 16px; right: 16px; }
}

/* ── Voice Note Modal ─────────────────────────────────────────── */
.vn-modal { max-height: 90vh; overflow-y: auto; }

/* Record area */
.vn-record-container { text-align: center; padding: 2rem 0; }
.vn-mic-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.vn-mic-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--border);
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vn-mic-btn:hover { border-color: var(--cam-navy, #172b54); color: var(--cam-navy, #172b54); }

.vn-mic-btn.recording {
    border-color: var(--negative, #c62828);
    background: color-mix(in srgb, var(--negative) 10%, transparent);
    color: var(--negative, #c62828);
    animation: vn-pulse 1.5s ease-in-out infinite;
}

@keyframes vn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(198,40,40,0.3); }
    50% { box-shadow: 0 0 0 14px rgba(198,40,40,0); }
}

.vn-timer {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    margin: 4px 0 0;
}

.vn-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

/* Processing / spinner */
.vn-processing {
    text-align: center;
    padding: 2.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.vn-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--cam-navy, #172b54);
    border-radius: 50%;
    animation: vn-spin 0.8s linear infinite;
}
.vn-spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vn-spin 0.8s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}

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

.vn-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.vn-transcript-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    max-width: 400px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Confirm step */
.vn-transcript-bar {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-left: 3px solid var(--accent);
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 16px;
    border-radius: 0 2px 2px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.vn-transcript-bar i { font-style: normal; margin-top: 1px; }

.vn-intent-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: color-mix(in srgb, var(--cam-navy, #172b54) 10%, transparent);
    color: var(--cam-navy, #172b54);
    margin-bottom: 12px;
}

/* Field update table (opportunity update) */
.vn-field-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-top: 8px;
}
.vn-field-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}
.vn-field-table td {
    padding: 6px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.vn-field-table td .fp-form-control { padding: 4px 8px; font-size: 0.82rem; }

.vn-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px;
}
.vn-remove-btn:hover { color: var(--negative); }

/* Error / warning / success */
.vn-error {
    background: color-mix(in srgb, var(--negative) 10%, transparent);
    color: var(--negative);
    padding: 10px 14px;
    border-radius: 2px;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vn-warning {
    color: var(--warning);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vn-success {
    text-align: center;
    padding: 2rem 0;
    color: var(--positive);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vn-success i { font-size: 2.5rem; }
.vn-success p { font-size: 0.9rem; font-weight: 600; margin: 0; }

.vn-link-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.78rem;
    text-decoration: underline;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   /admin/lab — Lab page shared styles (panels, forms, tables, results)
   These use CSS variables so they auto-theme across cam / flowplane / bladerunner.
   ═══════════════════════════════════════════════════════════════════════════ */

.lab-module-strip {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.lab-module-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.lab-module-btn:hover { color: var(--text-primary); background: var(--bg-card); }
.lab-module-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--bg-card);
}
.lab-module-body { padding-top: 0.25rem; }

.lab-panel { margin-bottom: 1rem; }
.lab-panel-header h3 {
    font-size: 1rem;
    margin: 0 0 0.2rem;
    color: var(--text-heading);
}
.lab-panel-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

.lab-tabstrip {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.lab-tab {
    background: none;
    border: 1px solid transparent;
    border-bottom: none;
    color: var(--text-muted);
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
}
.lab-tab:hover { color: var(--text-primary); }
.lab-tab.active {
    color: var(--accent);
    background: var(--bg-card);
    border-color: var(--border);
    font-weight: 600;
}

.lab-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
}

.lab-form-row { margin-bottom: 0.6rem; }
.lab-form-row label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}
.lab-form-row input[type="text"],
.lab-form-row input[type="number"],
.lab-form-row select,
.lab-form-row textarea {
    width: 100%;
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
    font-family: inherit;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-primary);
}
.lab-form-row textarea { font-family: var(--font-mono); font-size: 0.78rem; }
.lab-form-inline { display: flex; gap: 0.75rem; align-items: flex-end; }
.lab-form-inline > div { min-width: 0; }

.lab-resolved-path {
    display: block;
    padding: 0.35rem 0.5rem;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-primary);
    word-break: break-all;
}

.lab-btn {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}
.lab-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg-page); border-color: var(--accent); }
.lab-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lab-btn-primary { background: var(--accent); color: var(--bg-page); border-color: var(--accent); }
.lab-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.lab-btn-mini { padding: 0.15rem 0.5rem; font-size: 0.7rem; margin-left: auto; }

.lab-warning {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-left: 3px solid var(--warning);
    color: var(--text-primary);
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
    border-radius: 2px;
}
.lab-error {
    background: color-mix(in srgb, var(--negative) 12%, transparent);
    border-left: 3px solid var(--negative);
    color: var(--text-primary);
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
    border-radius: 2px;
}

.lab-response {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.75rem;
    margin-top: 0.75rem;
}
.lab-response-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.lab-status {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}
.lab-status-ok { background: color-mix(in srgb, var(--positive) 20%, transparent); color: var(--positive); }
.lab-status-info { background: color-mix(in srgb, var(--info, var(--accent)) 20%, transparent); color: var(--accent); }
.lab-status-warn { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.lab-status-err { background: color-mix(in srgb, var(--negative) 20%, transparent); color: var(--negative); }
.lab-status-unknown { background: var(--bg-page); color: var(--text-muted); }
.lab-elapsed, .lab-content-type { color: var(--text-muted); font-size: 0.75rem; }
.lab-warn-inline { color: var(--warning); font-size: 0.72rem; font-weight: 600; }

.lab-response-body {
    max-height: 500px;
    overflow: auto;
    padding: 0.6rem;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-primary);
    white-space: pre;
    margin: 0.4rem 0;
}
.lab-request-echo {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.5rem;
    font-size: 0.76rem;
}
.lab-request-echo pre {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: transparent;
    padding: 0.25rem 0;
    margin: 0.2rem 0;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}
.lab-label-mini {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.lab-history {
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-top: 0.75rem;
    background: var(--bg-card);
}
.lab-history-header {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.65rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lab-history-list { max-height: 240px; overflow-y: auto; }
.lab-history-row {
    display: grid;
    grid-template-columns: 3.5rem 3.5rem 1fr 4rem 4rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.3rem 0.65rem;
    font-size: 0.74rem;
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.lab-history-row:hover { background: var(--bg-page); }
.lab-history-method { font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary); }
.lab-history-path { font-family: var(--font-mono); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-history-elapsed, .lab-history-time { color: var(--text-muted); font-size: 0.68rem; text-align: right; }

.lab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    color: var(--text-primary);
}
.lab-table th, .lab-table td {
    padding: 0.35rem 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    text-align: left;
}
.lab-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.lab-table-compact td { padding: 0.18rem 0.4rem; font-size: 0.72rem; }
.lab-table code { background: var(--bg-page); padding: 0.05rem 0.3rem; border-radius: 2px; font-size: 0.7rem; }

.lab-csv-textarea {
    width: 100%;
    min-height: 240px;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-primary);
}

.lab-file-details { margin: 0.3rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding: 0.25rem 0; }
.lab-file-details summary { cursor: pointer; font-size: 0.78rem; padding: 0.2rem 0; }
.lab-file-details summary code { background: var(--bg-page); padding: 0.05rem 0.3rem; border-radius: 2px; font-size: 0.72rem; }
.lab-meta { color: var(--text-muted); font-size: 0.72rem; margin-left: 0.3rem; }
.lab-filetext {
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.5rem;
    margin: 0.3rem 0;
    max-height: 400px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}
.lab-sheet { margin: 0.4rem 0; }
.lab-sheet-title { font-size: 0.78rem; color: var(--text-secondary); margin: 0.3rem 0; }