:root {
    /* Backgrounds — matches browncapitalp.com */
    --primary-bg: #0C0C0C;
    /* Deep black for main body */
    --secondary-bg: #141414;
    --card-bg: #1A1A1A;
    /* Elevated surfaces */
    --hover-bg: #1F1712;
    /* Interactive hover states, warmed toward the accent */
    --glass-bg: rgba(12, 12, 12, 0.8);
    /* Semi-transparent glass effect */

    /* Text & Accents */
    --text-color: #F0F0F0;
    /* Light grey for readability */
    --text-light: #9A9A9A;
    /* Subtle secondary text */
    --text-muted: #555555;
    /* Faintest text */
    --accent-color: #8C6E52;
    /* Brand bronze primary */
    --accent-hover: #A88060;
    /* Lighter bronze on hover */
    --accent-muted: #3D2E22;
    /* Deep bronze for subtle fills */
    --accent-light: rgba(140, 110, 82, 0.07);
    /* Faint accent wash */

    /* Borders & Shadows */
    --border-color: #1F1F1F;
    /* Subtle hairline border */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --glass-blur: blur(10px);
    /* Blur for glass effects */

    --spacing-lg: 1.5rem;
    /* Large spacing */
    --spacing-md: 1rem;
    /* Medium spacing */
    --spacing-sm: 0.5rem;
    /* Small spacing */
    --font-size-lg: 1.25rem;
    /* Large font */
    --font-size-sm: 0.875rem;
    /* Small font */
    --border-radius-sm: 0.25rem;
    /* Small border radius */

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ====================== */
/* GLOBAL STYLES */
/* ====================== */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--primary-bg);
    color: var(--text-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color var(--transition), color var(--transition);
    overflow-x: hidden;
}

h5 {
    color: var(--text-color);
}

/* Disabled inputs */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--secondary-bg) !important;
    color: var(--text-light) !important;
    opacity: 0.7;
    cursor: not-allowed;
    border: 1px solid var(--border-color);
}

/* Focus states */
.form-control:focus,
.form-select:focus {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(140, 110, 82, 0.3);
    outline: none;
}

/* ====================== */
/* LAYOUT: NAVBAR */
/* ====================== */
/* LAYOUT: NAVBAR ENHANCEMENTS */
/* ====================== */
.navbar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.75rem 0;
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    z-index: 1050;
}

.navbar.scrolled {
    padding: 0.5rem 0;
    background: rgba(20, 20, 20, 0.95) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.navbar-brand {
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

.navbar-brand i {
    background: linear-gradient(135deg, var(--accent-color), #A88060);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* NAVBAR DROPDOWN ENHANCEMENTS */
.navbar .dropdown-menu {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    border-radius: 1rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    opacity: 0;
    visibility: hidden;
    display: block;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar .dropdown-item {
    color: var(--text-color);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 2px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

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

.navbar .dropdown-item:hover {
    background: rgba(140, 110, 82, 0.1);
    color: #fff;
    transform: translateX(4px);
}

.navbar .dropdown-item i {
    font-size: 1.1rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.navbar .dropdown-item:hover i {
    transform: scale(1.1);
}

/* ====================== */
/* NAVIGATION MODAL (OVER-ENGINEERED) */
/* ====================== */
.nav-modal .modal-content {
    background: rgba(20, 20, 20, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    color: #fff;
}

.nav-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem 3rem;
}

.nav-modal .modal-body {
    padding: 3rem;
}

.nav-modal .nav-category-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-modal .nav-category-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(140, 110, 82, 0.2);
}

.nav-modal .category-icon-wrapper {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent-color), #A88060);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 20px -5px rgba(140, 110, 82, 0.4);
}

.nav-modal .nav-item-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.25rem -1rem;
    border-radius: 1rem;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-modal .nav-item-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transform: translateX(8px);
}

.nav-modal .nav-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-right: 1rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.nav-modal .nav-item-link:hover .nav-item-icon {
    background: var(--accent-color);
    color: #fff;
    transform: scale(1.1);
}

.nav-modal .nav-item-info {
    flex-grow: 1;
}

.nav-modal .nav-item-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.nav-modal .nav-item-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    opacity: 0.7;
}

.nav-modal .modal-backdrop {
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.8);
}

/* Enhanced Search Bar */
.navbar-search-container {
    position: relative;
    width: 300px;
    transition: width 0.3s ease;
}

.navbar-search-container:focus-within {
    width: 450px;
}

#navbar-search {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding-left: 3rem;
    height: 42px;
    font-size: 0.9rem;
}

#navbar-search:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(140, 110, 82, 0.15);
}

.search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
    transition: color 0.2s ease;
}

.navbar-search-container:focus-within .search-icon {
    color: var(--accent-color);
}

/* Live Search Results */
#search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    margin-top: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    max-height: 500px;
    overflow-y: auto;
    z-index: 1100;
    display: none;
    backdrop-filter: blur(30px);
}

.search-result-group-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-color);
    padding: 1rem 1.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent-color);
    padding-left: 1.5rem;
}

.search-result-icon {
    width: 36px;
    height: 36px;
    background: rgba(140, 110, 82, 0.15);
    color: var(--accent-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.search-result-content {
    flex-grow: 1;
    min-width: 0;
}

.search-result-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-sublabel {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* User Profile & Actions */
.nav-profile-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

.nav-item.dropdown:hover .nav-profile-img {
    border-color: var(--accent-color);
}

.no-caret::after {
    display: none !important;
}

/* Pulsing Indicator for Navbar Profile */
.pulsing-indicator {
    width: 10px;
    height: 10px;
    background-color: #10b981;
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
    right: 2px;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
    z-index: 10;
    border: 2px solid var(--secondary-bg);
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .navbar-search-container {
        width: 100% !important;
        margin: 1rem 0;
    }

    .mega-dropdown .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* ====================== */
/* MAIN CONTENT */
/* ====================== */
.main-content {
    padding: 2rem;
    transition: margin-left var(--transition);
    min-height: 100vh;
    margin-top: 50px;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border: none;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
}

.card-title {
    color: var(--text-color);
}

.card-text {
    color: var(--text-color);
}

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

.invoice-row-card {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: linear-gradient(160deg, rgba(26, 26, 26, 0.95), rgba(20, 20, 20, 0.95)) !important;
}

.invoice-row-card:hover {
    border-color: rgba(140, 110, 82, 0.5) !important;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

/* Buttons */
.btn-accent,
.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.btn-accent:hover,
.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-outline-primary {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

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

/* Forms */
.form-control,
.form-select {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    transition: all var(--transition-fast);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--text-light);
}

/* Modals */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 0.75rem;
    border: none;
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

/* Progress */
.progress {
    background-color: var(--border-color);
    border-radius: 0.5rem;
    height: 0.5rem;
}

.progress-bar {
    background-color: var(--accent-color);
}

/* ── Scrollbars ──
   One look for every scrolling area in the app, page and panels alike: a slim
   rounded thumb on a clear track that turns brand bronze under the pointer.
   Chrome, Edge and Safari draw it from the ::-webkit-scrollbar rules; Firefox,
   which has no such pseudo-elements, from scrollbar-color / scrollbar-width.
   Don't style a scrollbar per element: Chrome ignores these rules on any element
   that sets scrollbar-width or scrollbar-color (except `scrollbar-width: none`,
   which hides one), and that is what left some areas with the browser's own. */
:root {
    --scrollbar-size: 10px;
    --scrollbar-thumb: rgba(255, 255, 255, 0.14);
    --scrollbar-thumb-hover: var(--accent-color);
    --scrollbar-track: transparent;
}

::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    /* The transparent border keeps a full-size grab area around a slimmer thumb. */
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--scrollbar-size);
}

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

::-webkit-scrollbar-button {
    display: none;
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }
}

/* Metadata */
.metadata-container {
    font-size: 0.9rem;
    line-height: 1.6;
}

.scrollable-metadata {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background-color: var(--secondary-bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.metadata-list li:hover {
    background-color: var(--hover-bg);
    border-radius: 0.25rem;
}

.metadata-key {
    color: var(--accent-color);
    font-weight: 600;
}

.metadata-value {
    color: var(--text-color);
    word-break: break-word;
}

/* AI Section */
.ai-container {
    background: rgba(140, 110, 82, 0.08);
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(140, 110, 82, 0.2);
    margin-top: 1rem;
}

.ai-section h6 {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Error container */
#error-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    max-width: 380px;
    width: 90%;
}

.alert-dismissible {
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    border: none;
}

/* Responsive */
@media (max-width: 992px) {
    .main-content {
        margin-left: 0 !important;
    }
}

/* Brand accent utilities (replaces Bootstrap's default purple text-purple/bg-purple) */
.text-accent {
    color: var(--accent-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}

/* Focus accessibility */
.nav-link:focus,
.btn:focus,
.card[role="button"]:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ====================== */
/* DASHBOARD ENHANCEMENTS */
/* ====================== */
.dashboard-metric-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 0.85rem;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.dashboard-metric-card:hover {
    transform: translateY(-3px);
    background: rgba(40, 40, 60, 0.9);
    border-color: var(--accent-color);
}

.metric-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.metric-value-container {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.metric-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
}

.metric-trend {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 20px;
}

.trend-up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.trend-down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.trend-neutral {
    color: var(--text-light);
    background: rgba(154, 154, 154, 0.1);
}

.metric-footer {
    font-size: 0.65rem;
    color: var(--text-light);
    opacity: 0.8;
}

/* Performance & Financial Metrics */
.performance-metric,
.financial-metric {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.performance-metric:hover,
.financial-metric:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.perf-label,
.fin-label {
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.perf-value,
.fin-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

/* AI Insights & Risk Containers */
.insights-container,
.risk-container,
.opportunity-container {
    max-height: 300px;
    overflow-y: auto;
}

.insight-item,
.risk-item,
.opportunity-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid;
    transition: all 0.3s ease;
}

.insight-item {
    border-left-color: #8C6E52;
}

.risk-item {
    border-left-color: #f59e0b;
}

.opportunity-item {
    border-left-color: #10b981;
}

.insight-item:hover,
.risk-item:hover,
.opportunity-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.insight-title,
.risk-title,
.opportunity-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.insight-text,
.risk-text,
.opportunity-text {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.4;
}

.insight-score,
.risk-score,
.opportunity-score {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.insight-score {
    background: rgba(140, 110, 82, 0.2);
    color: #8C6E52;
}

.risk-score {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.opportunity-score {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

/* Activity Timeline */
.activity-timeline-container {
    position: relative;
}

.activity-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.activity-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8C6E52;
    border: 2px solid rgba(140, 110, 82, 0.3);
}

.activity-item.deal::before {
    background: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.activity-item.task::before {
    background: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.activity-item.communication::before {
    background: #8C6E52;
    border-color: rgba(140, 110, 82, 0.3);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.activity-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.activity-description {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.4;
}

/* Milestones */
.milestone-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid #f59e0b;
    transition: all 0.3s ease;
}

.milestone-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.milestone-date {
    font-size: 0.75rem;
    color: #f59e0b;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.milestone-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.milestone-description {
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.4;
}

.milestone-progress {
    margin-top: 0.5rem;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.milestone-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #10b981);
    transition: width 0.3s ease;
}

/* Chart Containers */
.chart-container {
    position: relative;
    height: 300px;
    margin-top: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard-metric-card {
        margin-bottom: 1rem;
    }

    .metric-value {
        font-size: 1.5rem;
    }

    .performance-metric,
    .financial-metric {
        margin-bottom: 0.5rem;
    }

    .insight-item,
    .risk-item,
    .opportunity-item {
        padding: 0.75rem;
    }
}

.crm-card {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.activity-timeline-container {
    max-height: 400px;
    overflow-y: auto;
}

.activity-item {
    padding-bottom: 1.5rem;
    position: relative;
}

.activity-item:last-child {
    padding-bottom: 0;
}

.activity-indicator {
    position: absolute;
    left: -20px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
}

/* ====================== */
/* EMAIL MODULE ENHANCEMENTS */
/* ====================== */
.email-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent !important;
}

.email-item.active {
    background: rgba(140, 110, 82, 0.1) !important;
    border-left: 3px solid var(--accent-color) !important;
}

.email-preview-glass {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
}

.recipient-chip {
    background: linear-gradient(135deg, rgba(140, 110, 82, 0.1) 0%, rgba(168, 128, 96, 0.1) 100%);
    border: 1px solid rgba(140, 110, 82, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px;
    font-size: 0.85rem;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.recipient-chip:hover {
    transform: translateY(-1px);
    border-color: var(--accent-color);
}

.email-body-container {
    background: #ffffff !important;
    color: #1A1A1A !important;
    font-size: 1rem;
    line-height: 1.8;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

#emailFolders .list-group-item {
    padding: 14px 20px;
    border-radius: 12px !important;
    margin-bottom: 6px;
    font-weight: 600;
    transition: all 0.3s;
    border: 1px solid transparent !important;
}

#emailFolders .list-group-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#emailFolders .list-group-item.active {
    background: var(--accent-color) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(140, 110, 82, 0.4);
}

.border-start-accent {
    border-left: 4px solid var(--accent-color) !important;
}

/* ====================== */
/* PPM DATA TABLE STYLES */
/* ====================== */
.ppm-data-table {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--card-bg);
}

.ppm-data-table-header {
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ppm-data-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s, opacity 0.3s, max-height 0.3s;
}

.ppm-data-row:last-child {
    border-bottom: none;
}

.ppm-data-row:hover {
    background: rgba(140, 110, 82, 0.05);
}

.ppm-data-input {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-color) !important;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s;
    width: 100%;
}

.ppm-data-input:focus {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--accent-color) !important;
    box-shadow: none !important;
    outline: none;
}

.ppm-action-btn {
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s, transform 0.2s;
}

.ppm-data-row:hover .ppm-action-btn {
    opacity: 1;
}

.ppm-action-btn:hover {
    color: #ef4444 !important;
    transform: scale(1.1);
}

/* ── Enhanced table styles ── */
.ppm-table-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-light);
    font-size: 0.9rem;
}

.ppm-table-empty i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.ppm-table-empty p {
    margin: 0;
    opacity: 0.6;
}

.ppm-data-row.removing {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
}

.ppm-data-col-num {
    text-align: right;
}

.ppm-data-col-num .ppm-data-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ppm-data-col-actions {
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.ppm-table-footer {
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ppm-table-footer .row-count {
    opacity: 0.7;
}

/* ====================== */
/* DASHBOARD RECENT ITEMS */
/* ====================== */

.recent-item {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.recent-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(140, 110, 82, 0.2);
    transform: translateY(-1px);
}

.recent-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.recent-title {
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.recent-meta {
    font-size: 0.75rem;
    line-height: 1.2;
    opacity: 0.8;
}

.recent-items-container {
    max-height: 300px;
    overflow-y: auto;
}

/* Communication containers */
.communication-container {
    max-height: 300px;
    overflow-y: auto;
}

.communication-container .recent-item {
    border-left: 3px solid transparent;
}

.communication-container .recent-item:nth-child(1) {
    border-left-color: var(--accent-color);
}

.communication-container .recent-item:nth-child(2) {
    border-left-color: #10b981;
}

.communication-container .recent-item:nth-child(3) {
    border-left-color: #f59e0b;
}

.communication-container .recent-item:nth-child(4) {
    border-left-color: #ef4444;
}

.communication-container .recent-item:nth-child(5) {
    border-left-color: #6B5440;
}

/* ====================== */
/* DASHBOARD ACTIVITY ITEMS */
/* ====================== */

.activity-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-fast);
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(140, 110, 82, 0.2);
    transform: translateY(-1px);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

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

.activity-description {
    font-size: 0.875rem;
    color: var(--text-light);
    opacity: 0.8;
}

.activity-item.task {
    border-left: 3px solid #8C6E52;
}

.activity-item.deal {
    border-left: 3px solid #10b981;
}

.activity-item.note {
    border-left: 3px solid #f59e0b;
}

.activity-item.communication {
    border-left: 3px solid #ef4444;
}
/* Used by static/js/ai/ai-chat.js (was in the old calendar block; calendar styles
   now live in static/css/calendar.css). */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====================== */
/* DOCUMENT CREATOR STYLES */
/* ====================== */

:root {
    --crm-accent: #8C6E52;
    --crm-accent-glow: rgba(140, 110, 82, .35);
    --crm-success: #22c55e;
    --crm-warn: #f59e0b;
    --crm-danger: #ef4444;
    --crm-card: rgba(255, 255, 255, .04);
    --crm-border: rgba(255, 255, 255, .08);
    --crm-text-muted: rgba(255, 255, 255, .45);
}

.document-creator-body {
    font-family: 'Inter', sans-serif;
    background-color: #0C0C0C;
    color: #F0F0F0;
}

.page-hero {
    background: linear-gradient(135deg, #0A0A0A 0%, #1A1310 50%, #111111 100%);
    border-bottom: 1px solid var(--crm-border);
    /* .navbar renders fixed-top (see navbar.js) at ~78px tall — without this
       clearance the hero's own padding starts underneath it and the title
       renders hidden behind the nav. 80px matches the clearance already
       used elsewhere in the app (e.g. .calendar-container). */
    margin-top: 80px;
    padding: 2.5rem 0 2rem;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, var(--crm-accent-glow), transparent);
    pointer-events: none;
}

/* ── Minimal picker layout (Document Creator index + Debt Offering index) ──
   Both pages are plain choosers, so they skip the .page-hero banner the
   builder pages use and lean on the shared --surface-* / --space-* / --text-*
   tokens instead of the older --crm-* set, matching the rest of the app. */
.dc-page {
    padding: calc(80px + var(--space-4)) 0 var(--space-6);
}

.dc-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-light);
    margin-bottom: var(--space-5);
}

.dc-crumbs a {
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.dc-crumbs a:hover {
    color: var(--accent-hover);
}

.dc-crumbs .dc-crumb-sep {
    color: var(--text-muted);
}

.dc-crumbs .dc-crumb-current {
    color: #fff;
    font-weight: 600;
}

.dc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.document-card,
.offering-card {
    display: block;
    height: 100%;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: var(--space-5);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.document-card:hover,
.offering-card:hover {
    border-color: var(--surface-border-strong);
    background: var(--surface-2);
}

/* A catalog entry that is listed but not yet buildable. Shown so the catalog
   states what it does and does not cover, but not clickable, because a form that
   cannot generate a document is worse than no form. */
.document-card.is-disabled {
    cursor: default;
    opacity: 0.55;
}

.document-card.is-disabled:hover {
    border-color: var(--surface-border);
    background: var(--surface-1);
}

.offering-card.selected {
    border-color: var(--accent-color);
    background: var(--surface-2);
}

.document-icon,
.offering-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-4);
    border-radius: 8px;
    background: var(--accent-light);
    color: var(--accent-color);
    font-size: var(--text-base);
}

.document-title,
.offering-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--space-2);
}

.document-description,
.offering-description {
    color: var(--text-light);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: 0;
}

/* ── Offering builder (per-family debt offering pages) ────────────
   One shared layout serves every family page; the instrument rail and the
   form body are both rendered from GET /debt-offering/presets, so no page
   carries instrument-specific markup. */
.dc-builder {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 992px) {
    .dc-builder { grid-template-columns: 1fr; }
    .dc-rail { position: static !important; }
}

.dc-rail {
    position: sticky;
    top: calc(80px + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dc-rail-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-color);
    margin-bottom: var(--space-3);
}

.dc-instrument-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dc-instrument-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: var(--space-2) var(--space-3);
    color: var(--text-light);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dc-instrument-btn:hover {
    background: var(--surface-2);
    color: var(--text-color);
}

.dc-instrument-btn.is-active {
    background: var(--accent-light);
    border-color: rgba(140, 110, 82, 0.35);
    color: #fff;
    font-weight: 600;
}

.dc-instrument-btn small {
    display: block;
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.dc-instrument-btn.is-active small { color: var(--text-light); }

.dc-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* The builder's re-rendered form sits below the persistent "Linked records"
   panel (shared/offering-links.js); it stacks its cards like .dc-main does. */
.dc-form-host {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ol-panel .ent-picker { position: relative; }
.ol-saving { font-size: var(--text-xs); color: var(--text-muted); }

.dc-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.dc-section-head h2 {
    font-size: var(--text-md);
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.dc-section-head p {
    font-size: var(--text-xs);
    color: var(--text-light);
    margin: var(--space-1) 0 0;
}

.dc-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.dc-field.is-wide { grid-column: 1 / -1; }

.dc-field label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: var(--space-2);
}

.dc-field label .dc-required {
    color: var(--accent-hover);
    margin-left: 3px;
}

.dc-field .form-control,
.dc-field .form-select { width: 100%; }

.dc-field-help {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
    line-height: 1.45;
}

.dc-field.is-invalid .form-control,
.dc-field.is-invalid .form-select { border-color: var(--crm-danger); }

/* Toggle that reveals the collateral block on instruments where security is
   the user's choice rather than a property of the instrument. */
.dc-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
}

.dc-toggle label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-color);
}

.dc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.dc-actions .dc-actions-spacer { flex: 1 1 auto; }

.dc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.dc-status.is-draft      { background: rgba(255,255,255,.06); color: var(--text-light); border-color: rgba(255,255,255,.14); }
.dc-status.is-generating { background: rgba(245, 158, 11, .14); color: #fbbf24; border-color: rgba(245,158,11,.35); }
.dc-status.is-completed  { background: rgba(16, 185, 129, .16); color: #34d399; border-color: rgba(16,185,129,.35); }
.dc-status.is-failed     { background: rgba(239, 68, 68, .14); color: #fca5a5; border-color: rgba(239,68,68,.35); }

.dc-issues {
    margin: 0;
    padding-left: 1.1rem;
    font-size: var(--text-sm);
    color: var(--text-light);
    line-height: 1.6;
}

.dc-issues li + li { margin-top: 4px; }

/* Saved offerings list, shown on the debt-offering index and the deal tab. */
.dc-saved-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--surface-border);
}

.dc-saved-row:first-child { border-top: none; }

.dc-saved-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
}

.dc-saved-name:hover { color: var(--accent-hover); }

.dc-saved-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.dc-saved-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.dc-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-5) 0;
}

/* ── AI clause suggestions ────────────────────────────────────────
   Suggestions are reviewed, never applied automatically: these are clauses in a
   securities offering document, and the model behind them is a general-purpose
   one drafting against supplied facts. */
.dc-ai-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.dc-ai-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
    margin: var(--space-3) 0 0;
}

.dc-suggestion {
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: var(--space-4);
    background: var(--surface-2);
}

.dc-suggestion + .dc-suggestion { margin-top: var(--space-3); }

.dc-suggestion.is-flagged { border-color: rgba(245, 158, 11, 0.45); }

.dc-suggestion-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.dc-suggestion-field {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-hover);
}

.dc-suggestion-text {
    font-size: var(--text-sm);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0 0 var(--space-3);
    white-space: pre-wrap;
}

.dc-suggestion-why {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
}

.dc-suggestion-warn {
    display: block;
    font-size: var(--text-xs);
    color: #fbbf24;
    margin: 0 0 var(--space-3);
    line-height: 1.5;
}

.dc-suggestion-warn i { margin-right: 5px; }

.dc-suggestion-actions {
    display: flex;
    gap: var(--space-2);
}

.dc-suggestion.is-accepted {
    border-color: rgba(16, 185, 129, 0.4);
    opacity: 0.65;
}

.dc-suggestion.is-accepted .dc-suggestion-actions { display: none; }

/* ====================== */
/* DEBT OFFERING STYLES */
/* ====================== */


.preset-selector {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.preset-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--crm-accent);
    margin-bottom: 1rem;
}

.crm-card {
    background: var(--crm-card);
    border: 1px solid var(--crm-border);
    border-radius: 16px;
}

.form-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--crm-accent);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   DASHBOARD V2 — INSTITUTIONAL REDESIGN
   Additive design tokens + dashboard-scoped classes. Does not alter the
   base .crm-card rule (shared across 15+ other pages) — dashboard cards
   opt in via .dash-card instead, so this pass can't regress other pages.
   ========================================================================== */

:root {
    /* Spacing scale (8pt-derived rhythm) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Surface elevation — same bronze/black brand, one lightness step apart */
    --surface-0: var(--primary-bg);
    --surface-1: var(--card-bg);
    --surface-2: #232323;
    --surface-border: rgba(255, 255, 255, 0.06);
    --surface-border-strong: rgba(255, 255, 255, 0.14);

    /* Type scale — capped set, reused everywhere below */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;
}

/* ── Dashboard card primitive (padding-safe alternative to .crm-card) ── */
.dash-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    padding: var(--space-6);
}

.dash-card--primary {
    padding: var(--space-6) var(--space-6) var(--space-5);
    border: 1px solid var(--surface-border-strong);
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
    position: relative;
}

.dash-card--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-6);
    right: var(--space-6);
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    border-radius: 0 0 2px 2px;
}

.dash-card--secondary {
    padding: var(--space-4) var(--space-5);
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
}

/* ── Section header hierarchy ── */
.dash-section-header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.dash-section-header .dash-header-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.dash-section-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dash-section-title i {
    color: var(--accent-color);
}

.dash-section-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent-color);
    opacity: 0.85;
}

.dash-section-title--secondary {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dash-section-title--secondary i {
    color: var(--text-light);
    opacity: 0.7;
    font-size: var(--text-sm);
}

/* ── KPI Hero card primitive — shared across scheduler, network, outreach,
   and projects pages. Do not remove even if unused on the dashboard itself. ── */
.kpi-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.kpi-hero-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-left: 3px solid var(--accent-color);
    border-radius: 0.85rem;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.kpi-hero-card:hover {
    transform: translateY(-2px);
    background: var(--surface-2);
    border-left-color: var(--accent-hover);
}

.kpi-hero-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-light);
}

.kpi-hero-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.kpi-hero-value {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1;
}

.kpi-hero-context {
    font-size: var(--text-xs);
    color: var(--text-light);
    opacity: 0.8;
}

/* Reuses existing .metric-trend/.trend-up/.trend-down chip styles (styles.css ~L759) */
.kpi-hero-value-row .metric-trend {
    font-size: var(--text-xs);
}

@media (max-width: 992px) {
    .kpi-hero-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .kpi-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Sidebar KPI mini rows (Institutional Overview) ── */
.dash-kpi-mini-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dash-kpi-mini {
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-left: 3px solid var(--accent-color);
    border-radius: 0.6rem;
    padding: var(--space-2) var(--space-3);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dash-kpi-mini:hover {
    background: rgba(140, 110, 82, 0.08);
    border-left-color: var(--accent-hover);
}

.dash-kpi-mini-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-light);
}

.dash-kpi-mini-value {
    font-size: var(--text-lg);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.dash-kpi-mini-context {
    font-size: 0.68rem;
    color: var(--text-light);
    opacity: 0.75;
    line-height: 1.2;
}

/* ── AI Strategic Intelligence: summary strip ── */
.dash-summary-strip {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.dash-summary-chip {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--surface-border-strong);
    border-radius: 0.75rem;
    padding: var(--space-3) var(--space-4);
}

.dash-summary-chip-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    font-size: var(--text-md);
}

.dash-summary-chip-body {
    min-width: 0;
}

.dash-summary-chip-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-summary-chip-text {
    font-size: var(--text-xs);
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Strategic Intelligence table polish ── */
.dash-table-wrap {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--surface-border);
}

.dash-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    font-size: var(--text-base);
}

.dash-table thead tr {
    background: rgba(0, 0, 0, 0.2);
}

.dash-table thead th {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-light);
    border-bottom: 1px solid var(--surface-border-strong) !important;
    padding: var(--space-3) var(--space-4);
}

.dash-table tbody tr {
    border-color: var(--surface-border) !important;
    transition: background 0.15s ease;
}

.dash-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

.dash-table tbody tr:hover {
    background: rgba(140, 110, 82, 0.07) !important;
}

.dash-table tbody td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

/* Category pill: fixed footprint + left color bar so the eye can scan the column */
.dash-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 118px;
    padding: 5px 10px 5px 8px;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    border-left: 3px solid currentColor;
    background: currentColor;
}

.dash-category-pill span {
    color: inherit;
    filter: brightness(1.6) saturate(1.4);
}

.dash-category-pill.cat-insight { color: rgba(13, 202, 240, 0.16); }
.dash-category-pill.cat-insight span { color: #67d6ef; }
.dash-category-pill.cat-risk { color: rgba(245, 158, 11, 0.16); }
.dash-category-pill.cat-risk span { color: #fbbf24; }
.dash-category-pill.cat-opportunity { color: rgba(16, 185, 129, 0.16); }
.dash-category-pill.cat-opportunity span { color: #34d399; }

/* Priority badge: fixed width so the column reads as a scannable stack */
.dash-priority-badge {
    display: inline-block;
    width: 100%;
    min-width: 92px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
}

.dash-priority-badge.pri-critical { background: rgba(239, 68, 68, 0.18); color: #f87171; border-color: rgba(239, 68, 68, 0.4); }
.dash-priority-badge.pri-high { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
.dash-priority-badge.pri-medium { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
.dash-priority-badge.pri-monitor { background: rgba(13, 202, 240, 0.14); color: #67d6ef; border-color: rgba(13, 202, 240, 0.3); }
.dash-priority-badge.pri-strategic { background: rgba(140, 110, 82, 0.2); color: #D9C4A8; border-color: rgba(140, 110, 82, 0.4); }
.dash-priority-badge.pri-operational { background: rgba(255, 255, 255, 0.08); color: var(--text-light); border-color: rgba(255, 255, 255, 0.14); }
.dash-priority-badge.pri-potential { background: rgba(16, 185, 129, 0.16); color: #34d399; border-color: rgba(16, 185, 129, 0.35); }
.dash-priority-badge.pri-revenue { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }

/* Action column: quiet icon by default, becomes a real button on row hover */
.dash-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 88px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-light);
    background: transparent;
    border: 1px solid transparent;
    opacity: 0.6;
    transition: all 0.15s ease;
}

.dash-table tbody tr:hover .dash-row-action {
    opacity: 1;
    color: #fff;
    background: rgba(140, 110, 82, 0.18);
    border-color: rgba(140, 110, 82, 0.4);
}

/* ── Status pill — shared by invoices/invoice.html and invoices/index.html
   (same formula as emails/outreach.html's page-local .status-badge) ── */
.inv-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.inv-status-badge.status-draft { background: rgba(255, 255, 255, 0.08); color: var(--text-light); }
.inv-status-badge.status-sent { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.inv-status-badge.status-paid { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.inv-status-badge.status-overdue { background: rgba(239, 68, 68, 0.14); color: #f87171; }
.inv-status-badge.status-cancelled { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

/* ── Insight Drawer (replaces the old floating modal) ── */
.insight-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.insight-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.insight-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background: var(--surface-1);
    border-left: 1px solid var(--surface-border-strong);
    box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.6);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-drawer.open {
    transform: translateX(0);
}

.insight-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-2);
}

.insight-drawer-header h5 {
    font-size: var(--text-md);
    font-weight: 700;
    margin: 0;
}

.insight-drawer-close {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    border: 1px solid var(--surface-border-strong);
    background: transparent;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.insight-drawer-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.insight-drawer-context {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-1);
}

.insight-drawer-context-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: var(--space-2);
}

.insight-drawer-context-text {
    font-size: var(--text-md);
    color: #fff;
    line-height: 1.5;
    margin: 0;
}

.insight-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: rgba(0, 0, 0, 0.15);
}

.insight-drawer-footer {
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-top: 1px solid var(--surface-border);
    background: var(--surface-2);
}

.insight-suggested-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.insight-suggested-chip {
    font-size: var(--text-xs);
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(140, 110, 82, 0.1);
    border: 1px solid rgba(140, 110, 82, 0.3);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.insight-suggested-chip:hover {
    background: rgba(140, 110, 82, 0.2);
    border-color: var(--accent-color);
    color: #fff;
}

@media (max-width: 576px) {
    .insight-drawer {
        width: 100vw;
    }
}


/* ==========================================================================
   PEOPLE DIRECTORY V2 — INSTITUTIONAL CONTACT GRID
   Everything here is namespaced `.ppl-*` and reuses the Dashboard V2 tokens
   (--surface-*, --space-*, --text-*, --accent-*) so the people directory reads
   as the same product as the dashboard without touching any shared primitive
   (.card / .crm-card / .dash-*) that 15+ other pages depend on.
   ========================================================================== */

:root {
    /* Role hues — one per PersonRole, reused by badges, avatars and rails so a
       role is recognisable from any of the three. */
    --ppl-role-client: #67d6ef;
    --ppl-role-partner: #34d399;
    --ppl-role-investor: #fbbf24;
    --ppl-role-broker: #c084fc;
    --ppl-role-lender: #60a5fa;
    --ppl-role-none: #8f8f8f;

    /* Relationship temperature */
    --ppl-strong: #34d399;
    --ppl-warm: #fbbf24;
    --ppl-fading: #fb923c;
    --ppl-cold: #f87171;

    /* The row grid is declared once and consumed by both the header and every
       data row, which is what keeps the columns aligned at any zoom level. */
    --ppl-grid: 34px minmax(210px, 1.55fr) minmax(190px, 1.35fr) minmax(120px, 0.95fr) 132px minmax(140px, 1fr) 92px 96px;
}

/* ── Page shell ── */
.ppl-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ppl-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ppl-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ppl-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent-color);
    opacity: 0.85;
}

.ppl-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ppl-title-count {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    padding: 3px 12px;
    letter-spacing: 0;
}

.ppl-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── KPI strip ── */
.ppl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: var(--space-3);
}

.ppl-kpi {
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-left: 3px solid var(--accent-color);
    border-radius: 0.75rem;
    padding: var(--space-4) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    width: 100%;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.ppl-kpi[data-filterable] {
    cursor: pointer;
}

.ppl-kpi[data-filterable]:hover {
    background: var(--surface-2);
    border-left-color: var(--accent-hover);
    transform: translateY(-2px);
}

.ppl-kpi.is-active {
    border-color: rgba(140, 110, 82, 0.55);
    border-left-color: var(--accent-hover);
    background: rgba(140, 110, 82, 0.1);
}

.ppl-kpi-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ppl-kpi-label i {
    color: var(--accent-color);
    opacity: 0.8;
}

.ppl-kpi-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ppl-kpi-sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Filter / toolbar ── */
.ppl-toolbar {
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

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

.ppl-search-wrap > i.ppl-search-icon {
    position: absolute;
    left: 16px;
    color: var(--text-light);
    pointer-events: none;
    font-size: var(--text-base);
    transition: color 0.18s ease;
}

.ppl-search-wrap:focus-within > i.ppl-search-icon {
    color: var(--accent-color);
}

.ppl-search {
    width: 100%;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--surface-border-strong);
    border-radius: 0.7rem;
    color: var(--text-color);
    font-size: var(--text-md);
    padding: 11px 132px 11px 42px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ppl-search::placeholder {
    color: var(--text-muted);
}

.ppl-search:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(140, 110, 82, 0.18);
}

.ppl-search-tail {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ppl-kbd {
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 6px;
    line-height: 1.5;
    white-space: nowrap;
}

.ppl-search-clear {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-light);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    transition: all 0.15s ease;
}

.ppl-search-clear.is-visible {
    display: inline-flex;
}

.ppl-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.ppl-filter-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ppl-filter-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-right: 2px;
}

/* Compact dark select that doesn't need bg-dark/text-light utility soup */
.ppl-select {
    appearance: none;
    background-color: rgba(0, 0, 0, 0.28);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239A9A9A'%3E%3Cpath d='M8 11.5 3.5 6.5h9L8 11.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    border: 1px solid var(--surface-border-strong);
    border-radius: 0.55rem;
    color: var(--text-color);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 28px 6px 10px;
    max-width: 220px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ppl-select:hover {
    border-color: rgba(255, 255, 255, 0.24);
}

.ppl-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(140, 110, 82, 0.16);
}

.ppl-select option {
    background: var(--surface-2);
    color: var(--text-color);
}

.ppl-select.is-set {
    border-color: rgba(140, 110, 82, 0.5);
    background-color: rgba(140, 110, 82, 0.12);
    color: #fff;
}

/* Toggle-style filter pills (Has email / Has phone / …) */
.ppl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--surface-border-strong);
    background: transparent;
    color: var(--text-light);
    transition: all 0.15s ease;
}

.ppl-toggle:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.05);
}

.ppl-toggle.is-active {
    background: rgba(140, 110, 82, 0.2);
    border-color: var(--accent-color);
    color: #fff;
}

.ppl-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-light);
    transition: all 0.15s ease;
}

.ppl-btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.ppl-btn-ghost:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Active-filter summary chips */
.ppl-active-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding-top: var(--space-1);
    border-top: 1px solid var(--surface-border);
}

.ppl-active-filters:empty {
    display: none;
}

.ppl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: rgba(140, 110, 82, 0.14);
    border: 1px solid rgba(140, 110, 82, 0.36);
    color: var(--text-color);
}

.ppl-chip-key {
    color: var(--text-light);
    font-weight: 500;
}

.ppl-chip-x {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    font-size: 9px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ppl-chip-x:hover {
    background: var(--accent-color);
    color: #fff;
}

/* ── Bulk action bar (sticks under the fixed navbar) ── */
.ppl-bulkbar {
    position: sticky;
    top: 76px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, rgba(45, 35, 26, 0.97), rgba(31, 23, 18, 0.97));
    border: 1px solid rgba(140, 110, 82, 0.45);
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    animation: pplBulkIn 0.2s ease;
}

@keyframes pplBulkIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ppl-bulkbar-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--text-base);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.ppl-bulkbar-count strong {
    font-size: var(--text-lg);
    color: #E4CFB4;
    font-variant-numeric: tabular-nums;
}

.ppl-bulkbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ppl-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 0.5rem;
    border: 1px solid var(--surface-border-strong);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-color);
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ppl-bulk-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.ppl-bulk-btn.is-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fca5a5;
}

.ppl-bulk-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.16);
}

/* ── The grid ── */
.ppl-table {
    border: 1px solid var(--surface-border);
    border-radius: 1rem;
    background: var(--surface-1);
    /* No `overflow: hidden` here — it would box `.ppl-head-row`'s
       `position: sticky` inside this element's own bounds instead of the
       page's scroll viewport, so the header would scroll away with the rows
       instead of pinning under the navbar. Corners are rounded on the head
       row / foot instead, since together they already trace the same
       rounded rectangle. */
}

.ppl-head-row,
.ppl-row {
    display: grid;
    grid-template-columns: var(--ppl-grid);
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
}

.ppl-head-row {
    position: sticky;
    top: 76px;
    z-index: 10;
    min-height: 42px;
    background: #191919;
    border-bottom: 1px solid var(--surface-border-strong);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.ppl-th {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-light);
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    min-width: 0;
    transition: color 0.15s ease;
}

button.ppl-th {
    cursor: pointer;
}

button.ppl-th:hover {
    color: #fff;
}

.ppl-th i {
    font-size: 9px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

button.ppl-th:hover i {
    opacity: 0.45;
}

.ppl-th.is-sorted {
    color: var(--accent-hover);
}

.ppl-th.is-sorted i {
    opacity: 1;
}

.ppl-th.ppl-th-end {
    justify-content: flex-end;
}

.ppl-th.ppl-th-center {
    justify-content: center;
}

/* Row */
.ppl-row {
    position: relative;
    min-height: 66px;
    border-bottom: 1px solid var(--surface-border);
    transition: background 0.14s ease;
}

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

.ppl-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.012);
}

.ppl-row:hover {
    background: rgba(140, 110, 82, 0.075);
}

/* A left rail tinted by role — free colour-coding that costs no column width */
.ppl-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ppl-row-accent, transparent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ppl-row:hover::before,
.ppl-row.is-selected::before {
    opacity: 1;
}

.ppl-row.is-selected {
    background: rgba(140, 110, 82, 0.13);
}

.ppl-row.is-selected:hover {
    background: rgba(140, 110, 82, 0.18);
}

/* Row density */
.ppl-table.density-compact .ppl-row {
    min-height: 48px;
}

.ppl-table.density-compact .ppl-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.625rem;
}

.ppl-table.density-compact .ppl-cell-sub,
.ppl-table.density-compact .ppl-footprint {
    display: none;
}

.ppl-table.density-relaxed .ppl-row {
    min-height: 84px;
}

/* ── Cells ── */
.ppl-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ppl-cell-end {
    align-items: flex-end;
}

.ppl-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppl-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-color);
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--surface-border-strong);
    cursor: pointer;
    margin: 0;
}

/* Identity */
.ppl-identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.ppl-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #0C0C0C;
    background: var(--ppl-row-accent, var(--ppl-role-none));
    user-select: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}

.ppl-row:hover .ppl-avatar {
    transform: scale(1.06);
}

/* Companies directory: a rounded square in the brand bronze gradient, so a
   company row reads as visually distinct from a person's circular avatar
   at a glance — matches the shape company.html already uses for its hero. */
.ppl-avatar.is-company {
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-color), #A88060);
    color: #fff;
}

.ppl-contact-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Deals column: center the count badge within its fixed-width slot */
.ppl-cell-center {
    align-items: center !important;
}

.ppl-identity-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ppl-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.ppl-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    min-width: 0;
    transition: color 0.15s ease;
}

.ppl-name:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Small social-profile links shown right next to the name — kept out of the
   Company column, where they had no obvious connection to "company" and
   just looked like an unlabeled stack of icons. */
.ppl-social {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ppl-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.ppl-social a:hover {
    color: var(--accent-hover);
}

.ppl-cell-sub {
    font-size: var(--text-xs);
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ppl-cell-sub i {
    opacity: 0.5;
    font-size: 9px;
}

.ppl-muted {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* Role badge — fixed footprint so the column scans as a stack */
.ppl-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid;
    background: color-mix(in srgb, var(--ppl-row-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--ppl-row-accent) 40%, transparent);
    color: var(--ppl-row-accent);
    white-space: nowrap;
    text-transform: capitalize;
}

.ppl-role::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* Copyable contact channel */
.ppl-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    font-size: var(--text-xs);
    font-family: inherit;
    color: var(--text-color);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px 2px 4px;
    margin-left: -4px;
    text-align: left;
    transition: all 0.14s ease;
}

.ppl-copy > i:first-child {
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.14s ease;
}

.ppl-copy-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ppl-copy-hint {
    margin-left: auto;
    font-size: 9px;
    opacity: 0;
    color: var(--accent-hover);
    flex-shrink: 0;
    transition: opacity 0.14s ease;
}

.ppl-copy:hover {
    background: rgba(140, 110, 82, 0.16);
    border-color: rgba(140, 110, 82, 0.4);
    color: #fff;
    cursor: pointer;
}

.ppl-copy:hover > i:first-child {
    color: var(--accent-hover);
}

.ppl-copy:hover .ppl-copy-hint {
    opacity: 0.9;
}

.ppl-copy.is-copied {
    background: rgba(52, 211, 153, 0.18);
    border-color: rgba(52, 211, 153, 0.5);
    color: #6ee7b7;
}

.ppl-copy.is-copied > i:first-child,
.ppl-copy.is-copied .ppl-copy-hint {
    color: #6ee7b7;
    opacity: 1;
}

/* Company link */
.ppl-company {
    font-size: var(--text-xs);
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: color 0.15s ease;
}

.ppl-company:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Engagement: score meter + temperature */
.ppl-engagement {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ppl-score-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
}

.ppl-score-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    min-width: 22px;
    text-align: right;
}

.ppl-meter {
    flex: 1;
    height: 4px;
    min-width: 34px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.ppl-meter-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-color), #D9C4A8);
    transition: width 0.3s ease;
}

.ppl-temp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ppl-temp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

.ppl-temp.t-strong { color: var(--ppl-strong); }
.ppl-temp.t-warm   { color: var(--ppl-warm); }
.ppl-temp.t-fading { color: var(--ppl-fading); }
.ppl-temp.t-cold   { color: var(--ppl-cold); }

/* ── Tags: capped inline chips + overflow popover ──
   The old row let N tags push the layout apart. Here the cell is a fixed
   track: the first chips render inline, the remainder collapse into a "+N"
   button that opens a popover with the full set. Nothing overlaps, and every
   tag is still reachable. */
.ppl-tags {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.ppl-tag {
    display: inline-flex;
    align-items: center;
    max-width: 104px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--surface-border-strong);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    transition: all 0.14s ease;
}

button.ppl-tag:hover {
    background: rgba(140, 110, 82, 0.25);
    border-color: var(--accent-color);
    color: #fff;
    cursor: pointer;
}

.ppl-tag.is-active {
    background: rgba(140, 110, 82, 0.28);
    border-color: var(--accent-color);
    color: #fff;
}

.ppl-tag-more {
    background: rgba(140, 110, 82, 0.16);
    border-color: rgba(140, 110, 82, 0.4);
    color: #D9C4A8;
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}

.ppl-tag-more:hover {
    background: rgba(140, 110, 82, 0.3);
    border-color: var(--accent-color);
    color: #fff;
}

/* Shared floating panel used by the tag overflow popover */
.ppl-pop {
    position: fixed;
    z-index: 1400;
    min-width: 190px;
    max-width: 280px;
    background: var(--surface-2);
    border: 1px solid var(--surface-border-strong);
    border-radius: 0.7rem;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.75);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    animation: pplPopIn 0.14s ease;
}

@keyframes pplPopIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ppl-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-light);
}

.ppl-pop-body {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.ppl-pop-foot {
    font-size: 0.6875rem;
    color: var(--text-muted);
    border-top: 1px solid var(--surface-border);
    padding-top: 6px;
}

/* Rich popover rows (Companies directory: contact / deal overflow lists) —
   each one forces full width so it stacks vertically inside the otherwise
   flex-wrap `.ppl-pop-body` used by the plain tag-chip popover. */
.ppl-pop-contact {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0;
    border-bottom: 1px solid var(--surface-border);
}

.ppl-pop-contact:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ppl-pop-contact-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.ppl-pop-contact-name:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.ppl-pop-contact-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ppl-pop-contact-line {
    font-size: var(--text-xs);
    color: var(--text-light);
}

.ppl-pop-contact-line i {
    width: 12px;
    opacity: 0.6;
}

/* Footprint counters (deals / projects / notes / files) */
.ppl-footprint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.ppl-fp {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.ppl-fp i {
    font-size: 9px;
    opacity: 0.55;
}

.ppl-fp.is-zero {
    color: var(--text-muted);
    opacity: 0.5;
}

/* Row actions */
.ppl-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ppl-icon-btn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    text-decoration: none;
    opacity: 0.45;
    transition: all 0.15s ease;
}

.ppl-row:hover .ppl-icon-btn {
    opacity: 1;
}

.ppl-icon-btn:hover {
    background: rgba(140, 110, 82, 0.22);
    border-color: rgba(140, 110, 82, 0.5);
    color: #fff;
}

.ppl-icon-btn.is-primary {
    color: #D9C4A8;
}

/* ── Footer / pagination ── */
.ppl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid var(--surface-border-strong);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.ppl-foot-info {
    font-size: var(--text-xs);
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.ppl-foot-info strong {
    color: #fff;
}

.ppl-pager {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ppl-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--surface-border);
    background: transparent;
    color: var(--text-light);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.ppl-page-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--surface-border-strong);
    color: #fff;
}

.ppl-page-btn.is-current {
    background: rgba(140, 110, 82, 0.26);
    border-color: var(--accent-color);
    color: #fff;
}

.ppl-page-btn:disabled {
    opacity: 0.32;
    pointer-events: none;
}

.ppl-page-gap {
    color: var(--text-muted);
    padding: 0 2px;
    font-size: var(--text-xs);
    user-select: none;
}

.ppl-page-size {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-light);
}

/* ── Empty / loading ── */
.ppl-empty {
    padding: var(--space-8) var(--space-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.ppl-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(140, 110, 82, 0.12);
    border: 1px solid rgba(140, 110, 82, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    color: var(--accent-color);
}

.ppl-empty-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.ppl-empty-text {
    font-size: var(--text-sm);
    color: var(--text-light);
    margin: 0;
    max-width: 380px;
}

.ppl-skeleton-row {
    display: grid;
    grid-template-columns: var(--ppl-grid);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
}

.ppl-skeleton-bar {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    background-size: 200% 100%;
    animation: pplShimmer 1.3s linear infinite;
}

@keyframes pplShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ── Responsive: shed columns before anything can collide ── */
@media (max-width: 1500px) {
    :root {
        --ppl-grid: 34px minmax(200px, 1.6fr) minmax(180px, 1.3fr) minmax(110px, 0.9fr) 124px minmax(120px, 0.9fr) 96px;
    }
    .ppl-col-footprint { display: none; }
}

@media (max-width: 1280px) {
    :root {
        --ppl-grid: 34px minmax(190px, 1.7fr) minmax(170px, 1.3fr) 118px minmax(110px, 0.9fr) 96px;
    }
    .ppl-col-company { display: none; }
}

@media (max-width: 1050px) {
    :root {
        --ppl-grid: 34px minmax(180px, 1.8fr) minmax(160px, 1.2fr) 118px 96px;
    }
    .ppl-col-tags { display: none; }
}

@media (max-width: 860px) {
    :root {
        --ppl-grid: 34px minmax(170px, 1fr) 96px;
    }
    .ppl-col-engagement,
    .ppl-col-channels { display: none; }
    .ppl-search { padding-right: 44px; }
    .ppl-kbd { display: none; }
    .ppl-bulkbar,
    .ppl-head-row { position: static; }
}

/* ==========================================================================
   ENTITY PICKER (SHARED COMBOBOX)
   Searchable name→id resolver used to link an entity to a Note or an
   Attachment — replaces raw-UUID text inputs and unfiltered full-collection
   <select> elements. See static/js/shared/entity-picker.js.
   ========================================================================== */
.ent-picker {
    position: relative;
}

.ent-picker-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ent-picker-icon {
    position: absolute;
    left: 10px;
    color: var(--text-light);
    font-size: var(--text-xs);
    pointer-events: none;
}

.ent-picker-input {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.ent-picker-input[readonly] {
    background-color: rgba(140, 110, 82, 0.1);
    border-color: rgba(140, 110, 82, 0.4);
    color: #fff;
    cursor: default;
}

.ent-picker-clear {
    position: absolute;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-light);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
}

.ent-picker-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.ent-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
    max-height: 260px;
    overflow-y: auto;
    z-index: 1200;
}

.ent-picker-dropdown.is-open {
    display: block;
}

.ent-picker-dropdown .search-result-item {
    padding: 0.5rem 0.85rem;
}

.ent-picker-dropdown .search-result-icon {
    width: 28px;
    height: 28px;
    margin-right: 0.65rem;
}

/* ==========================================================================
   ATTACHMENTS V2 — INSTITUTIONAL FILE MANAGER
   Namespaced `.att-*`, built entirely from the Dashboard V2 tokens
   (--surface-*, --space-*, --text-*, --accent-*). Replaces the page-local
   bespoke styles that used to live inline in attachments.html. Reuses
   .ppl-select / .ppl-pager / .ppl-page-btn as-is rather than forking them.
   ========================================================================== */

.att-shell {
    display: flex;
    height: calc(100vh - 70px);
    margin-top: 70px;
    background: var(--primary-bg);
    overflow: hidden;
}

/* ── Sidebar ── */
.att-sidebar {
    width: 380px;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border-right: 1px solid var(--surface-border);
}

.att-toolbar {
    padding: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

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

.att-search-wrap > i {
    position: absolute;
    left: 14px;
    color: var(--text-light);
    font-size: var(--text-base);
    pointer-events: none;
}

.att-search {
    width: 100%;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--surface-border-strong);
    border-radius: 0.7rem;
    color: var(--text-color);
    font-size: var(--text-base);
    padding: 10px 14px 10px 38px;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.att-search::placeholder {
    color: var(--text-muted);
}

.att-search:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(140, 110, 82, 0.18);
}

.att-filter-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.att-filter-row .ppl-select {
    flex: 1 1 110px;
    max-width: none;
}

/* ── Sidebar list ── */
.att-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.att-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    margin-bottom: var(--space-1);
    border-radius: 0.7rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.att-row:hover {
    background: var(--surface-2);
}

.att-row.is-active {
    background: rgba(140, 110, 82, 0.14);
    border-color: rgba(140, 110, 82, 0.4);
}

.att-row-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.att-row-body {
    min-width: 0;
    flex-grow: 1;
}

.att-row-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-row.is-active .att-row-name {
    color: #fff;
}

.att-row-meta {
    font-size: var(--text-xs);
    color: var(--text-light);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-empty-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-light);
    opacity: 0.6;
    text-align: center;
}

.att-empty-list i {
    font-size: 2.25rem;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

/* ── Sidebar footer / pager (reuses .ppl-foot / .ppl-pager / .ppl-page-btn) ── */
.att-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid var(--surface-border-strong);
}

.att-foot-info {
    font-size: var(--text-xs);
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.att-foot-info strong {
    color: #fff;
}

/* ── Detail pane ── */
.att-detail {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at top right, rgba(140, 110, 82, 0.05), transparent);
    padding: var(--space-6);
    overflow-y: auto;
    min-height: 0;
}

.att-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-light);
    text-align: center;
    padding: var(--space-6);
}

.att-empty-state i {
    font-size: 4rem;
    margin-bottom: var(--space-5);
    opacity: 0.4;
}

.att-preview-wrap {
    width: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
    margin-top: var(--space-4);
}

/* ── Related Notes card ── */
.att-note-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 0.65rem;
    text-decoration: none;
    color: var(--text-color);
    transition: background 0.15s ease;
}

.att-note-row:hover {
    background: var(--surface-2);
}

.att-note-row-body {
    min-width: 0;
}

.att-note-row-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
}

.att-note-row-snippet {
    font-size: var(--text-xs);
    color: var(--text-light);
    opacity: 0.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.att-note-row-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ==========================================================================
   TASKS V2 — HIGH-OUTPUT LIST
   Namespaced `.tsk-*`, built entirely from the Dashboard V2 tokens
   (--surface-*, --space-*, --text-*, --accent-*). Replaces the page-local
   glass/rgba styles that used to live inline in tasks/index.html. Mirrors
   the .att-* shell shape (sidebar list + detail pane) rather than forking
   a new layout primitive.
   ========================================================================== */

.tsk-shell {
    display: flex;
    height: calc(100vh - 70px);
    margin-top: 70px;
    background: var(--primary-bg);
    overflow: hidden;
}

.tsk-sidebar {
    width: 380px;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border-right: 1px solid var(--surface-border);
}

.tsk-toolbar {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-bottom: 1px solid var(--surface-border);
}

.tsk-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

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

.tsk-search-wrap i {
    position: absolute;
    left: 12px;
    color: var(--text-light);
    font-size: var(--text-xs);
    opacity: 0.6;
    pointer-events: none;
}

.tsk-search {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 32px;
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    color: #fff;
    font-size: var(--text-base);
}

.tsk-search:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Status filter chip row */
.tsk-chip-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tsk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-light);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tsk-chip:hover {
    color: #fff;
    border-color: var(--surface-border-strong);
}

.tsk-chip.is-active {
    color: #fff;
    background: rgba(140, 110, 82, 0.22);
    border-color: var(--accent-color);
}

.tsk-chip .tsk-chip-count {
    opacity: 0.7;
    font-weight: 500;
}

.tsk-filter-row {
    display: flex;
    gap: var(--space-2);
}

.tsk-filter-row .ppl-select {
    flex: 1;
}

.tsk-multiselect-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--surface-border);
    font-size: var(--text-xs);
    color: var(--text-light);
}

/* ── Dense grouped task list ── */
.tsk-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-2) 0 var(--space-4);
}

.tsk-group-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-light);
    background: var(--surface-1);
    border-bottom: 1px solid var(--surface-border);
}

.tsk-group-header .tsk-group-count {
    opacity: 0.6;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    margin-left: 4px;
}

.tsk-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.12s ease;
}

.tsk-row:hover {
    background: var(--surface-2);
}

.tsk-row.is-active {
    background: rgba(140, 110, 82, 0.14);
    border-left-color: var(--accent-color);
}

.tsk-row-status-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
}

.tsk-row-status-dot.status-pending { background: #fca5a5; }
.tsk-row-status-dot.status-confirmed { background: #86efac; }
.tsk-row-status-dot.status-completed { background: #5eead4; }
.tsk-row-status-dot.status-failed { background: #f87171; }
.tsk-row-status-dot.status-expired { background: #fcd34d; }

.tsk-row-body {
    min-width: 0;
    flex-grow: 1;
}

.tsk-row-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsk-row.status-completed .tsk-row-title {
    color: var(--text-light);
    text-decoration: line-through;
    opacity: 0.7;
}

.tsk-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tsk-row-due {
    white-space: nowrap;
}

.tsk-row-due.is-overdue {
    color: #f87171;
    font-weight: 600;
}

.tsk-row-checkbox {
    flex-shrink: 0;
}

.tsk-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-light);
    opacity: 0.6;
}

/* ── Detail pane ── */
.tsk-detail {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    overflow-y: auto;
}

.tsk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-light);
    opacity: 0.5;
    text-align: center;
}

.tsk-empty-state i {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.tsk-detail-header {
    margin-bottom: var(--space-5);
}

.tsk-status-badge {
    font-size: var(--text-xs);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tsk-status-badge.status-pending { background: rgba(239, 68, 68, 0.1); color: #fca5a5; }
.tsk-status-badge.status-confirmed { background: rgba(34, 197, 94, 0.1); color: #86efac; }
.tsk-status-badge.status-completed { background: rgba(16, 185, 129, 0.1); color: #5eead4; }
.tsk-status-badge.status-failed { background: rgba(239, 68, 68, 0.1); color: #fca5a5; }
.tsk-status-badge.status-expired { background: rgba(245, 158, 11, 0.1); color: #fcd34d; }

.tsk-description {
    line-height: 1.8;
    color: var(--text-color);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.tsk-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.tsk-meta-item {
    display: flex;
    flex-direction: column;
}

.tsk-meta-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    opacity: 0.7;
    margin-bottom: var(--space-1);
    font-weight: 600;
}

.tsk-meta-value {
    font-size: var(--text-md);
    color: #fff;
    font-weight: 500;
}

.tsk-detail-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-2);
}

.tsk-detail-subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-light);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.tsk-action-bar {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.tsk-linked-entity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tsk-linked-entity:hover {
    border-color: var(--accent-color);
    background: rgba(140, 110, 82, 0.08);
}

.tsk-linked-entity .tsk-entity-icon {
    font-size: 1.1rem;
    color: var(--accent-color);
}

.tsk-linked-entity .tsk-entity-name {
    font-weight: 600;
    color: #fff;
    font-size: var(--text-base);
}

.tsk-linked-entity .tsk-entity-type {
    font-size: var(--text-xs);
    color: var(--text-light);
    text-transform: capitalize;
}

/* ── Due-date quick-pick chips (modal) ── */
.tsk-date-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.tsk-date-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-light);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tsk-date-chip:hover {
    color: #fff;
    border-color: var(--accent-color);
    background: rgba(140, 110, 82, 0.14);
}

/* ==========================================================================
   NOTES V2 — HIGH-OUTPUT LIST
   Namespaced `.nt-*`, built entirely from the Dashboard V2 tokens
   (--surface-*, --space-*, --text-*, --accent-*). Replaces the page-local
   glass/rgba styles that used to live inline in notes.html. Mirrors the
   tsk-* / att-* shell shape (sidebar list + detail pane).
   ========================================================================== */

.nt-shell {
    display: flex;
    height: calc(100vh - 70px);
    margin-top: 70px;
    background: var(--primary-bg);
    overflow: hidden;
}

.nt-sidebar {
    width: 340px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border-right: 1px solid var(--surface-border);
}

.nt-toolbar {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-bottom: 1px solid var(--surface-border);
}

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

.nt-search-wrap i {
    position: absolute;
    left: 12px;
    color: var(--text-light);
    font-size: var(--text-xs);
    opacity: 0.6;
    pointer-events: none;
}

.nt-search {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 32px;
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    color: #fff;
    font-size: var(--text-base);
}

.nt-search:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* ── Note list ── */
.nt-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.nt-row {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border-radius: 0.65rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.nt-row:hover {
    background: var(--surface-2);
}

.nt-row.is-active {
    background: rgba(140, 110, 82, 0.14);
    border-left-color: var(--accent-color);
    border-color: var(--surface-border-strong);
}

.nt-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.nt-row-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.nt-row-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.nt-row-snippet {
    font-size: var(--text-sm);
    color: var(--text-light);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nt-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-light);
    opacity: 0.6;
}

/* ── Detail pane ── */
.nt-detail {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}

.nt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-light);
    opacity: 0.5;
    text-align: center;
    padding: var(--space-6);
}

.nt-empty-state i {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.nt-detail-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nt-detail-header {
    padding: var(--space-5) var(--space-6) var(--space-3);
}

.nt-title-input {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
}

.nt-title-input::placeholder {
    color: var(--text-light);
    opacity: 0.4;
}

.nt-subtitle {
    font-size: var(--text-xs);
    color: var(--text-light);
    opacity: 0.75;
    margin-top: 4px;
    display: block;
}

.nt-action-bar {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 0 var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--surface-border);
}

/* ── Quill editor, reskinned to the surface tokens ── */
.nt-editor-wrap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 var(--space-2);
}

.nt-editor-wrap #editor-container {
    flex-grow: 1;
    border: none !important;
    font-size: var(--text-md);
    color: var(--text-color);
    background: transparent;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.nt-editor-wrap .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--surface-border);
    background: transparent;
    padding: var(--space-3) var(--space-4);
}

.nt-editor-wrap .ql-container.ql-snow {
    border: none !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    font-family: inherit;
}

.nt-editor-wrap .ql-editor {
    flex-grow: 1;
    overflow-y: auto !important;
    padding: var(--space-4) !important;
}

/* ── Meta / files footer cards ── */
.nt-footer-cards {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--surface-border);
    background: var(--surface-1);
}

.nt-footer-card-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-light);
    margin-bottom: 2px;
}

.nt-footer-card-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.8;
    display: block;
    margin-bottom: var(--space-2);
}

.nt-files-card {
    grid-column: 1 / -1;
}

.nt-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    padding: 6px var(--space-3);
}

.nt-file-row + .nt-file-row {
    margin-top: 4px;
}

.nt-file-name {
    font-size: var(--text-sm);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

/* ==========================================================================
   CONVERSATIONS V2 -- HIGH-OUTPUT LIST
   Namespaced classes prefixed cv, built entirely from the Dashboard V2
   tokens (surface, space, text, accent custom properties). Replaces the
   page-local glass/rgba styles that used to live inline in
   conversations.html. Mirrors the tsk shell shape (sidebar list plus
   detail pane) used on the Tasks page.
   ========================================================================== */

.cv-shell {
    display: flex;
    height: calc(100vh - 70px);
    margin-top: 70px;
    background: var(--primary-bg);
    overflow: hidden;
}

.cv-sidebar {
    width: 360px;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border-right: 1px solid var(--surface-border);
}

.cv-toolbar {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-bottom: 1px solid var(--surface-border);
}

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

.cv-search-wrap i {
    position: absolute;
    left: 12px;
    color: var(--text-light);
    font-size: var(--text-xs);
    opacity: 0.6;
    pointer-events: none;
}

.cv-search {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 32px;
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    color: #fff;
    font-size: var(--text-base);
}

.cv-search:focus {
    outline: none;
    border-color: var(--accent-color);
}

.cv-search-hint {
    font-size: var(--text-xs);
    color: var(--text-light);
    opacity: 0.55;
}

/* Dense conversation list */
.cv-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.cv-row {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border-radius: 0.65rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.cv-row:hover {
    background: var(--surface-2);
}

.cv-row.is-active {
    background: rgba(140, 110, 82, 0.14);
    border-left-color: var(--accent-color);
    border-color: var(--surface-border-strong);
}

.cv-row-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: 3px;
}

.cv-row-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

.cv-row-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.cv-row-person {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: var(--accent-color);
    opacity: 0.9;
    margin-bottom: 3px;
}

.cv-row-snippet {
    font-size: var(--text-sm);
    color: var(--text-light);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-light);
    opacity: 0.6;
}

/* Detail pane */
.cv-detail {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    overflow-y: auto;
}

.cv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-light);
    opacity: 0.5;
    text-align: center;
}

.cv-empty-state i {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.cv-title-input {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
    margin-bottom: var(--space-4);
}

.cv-title-input::placeholder {
    color: var(--text-light);
    opacity: 0.4;
}

.cv-action-bar {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.cv-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.cv-meta-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-light);
    opacity: 0.75;
    margin-bottom: var(--space-2);
    display: block;
}

.cv-meta-value {
    font-size: var(--text-base);
    color: #fff;
}

.cv-transcript-box {
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.85rem;
    padding: var(--space-5);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-color);
    min-height: 320px;
}

/* AI conversation summary card */
.cv-summary-card {
    margin-top: var(--space-5);
}

.cv-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.cv-summary-section {
    margin-bottom: var(--space-4);
}

.cv-summary-section:last-child {
    margin-bottom: 0;
}

.cv-summary-section-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-light);
    opacity: 0.75;
    margin-bottom: var(--space-2);
}

.cv-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cv-summary-list li {
    font-size: var(--text-base);
    color: var(--text-color);
    padding-left: var(--space-4);
    position: relative;
}

.cv-summary-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-color);
}

.cv-action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    padding: 6px var(--space-3);
}

.cv-action-item + .cv-action-item {
    margin-top: 6px;
}

.cv-action-item-owner {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.cv-sentiment-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cv-sentiment-badge.sentiment-positive { background: rgba(16, 185, 129, 0.16); color: #34d399; }
.cv-sentiment-badge.sentiment-neutral { background: rgba(255, 255, 255, 0.08); color: var(--text-light); }
.cv-sentiment-badge.sentiment-mixed { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.cv-sentiment-badge.sentiment-negative { background: rgba(239, 68, 68, 0.16); color: #f87171; }

/* ==========================================================================
   Conversations — audio (calls, player, synced transcript, import)
   static/js/conversations/*. Uses the shared surface/space/text tokens.
   ========================================================================== */

.cv-toolbar-actions { display: flex; gap: var(--space-2); }
.cv-toolbar-actions .btn-primary { flex: 1; }

.cv-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--surface-border);
    color: var(--text-light); font-size: var(--text-xs); cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cv-chip i { font-size: 0.7rem; opacity: 0.8; }
.cv-chip:hover { color: #fff; border-color: var(--surface-border-strong); }
.cv-chip.is-active { background: var(--accent-muted); border-color: var(--accent-color); color: #fff; }
.cv-chip-count {
    min-width: 17px; padding: 0 5px; border-radius: 999px;
    background: var(--accent-color); color: #fff; font-size: 0.68rem; line-height: 17px; text-align: center;
}
.cv-list-footer { padding: var(--space-2) var(--space-3) var(--space-3); text-align: center; }
.cv-storage { padding: 0 var(--space-3) var(--space-3); font-size: 0.7rem; color: var(--text-muted); text-align: center; }
.cv-storage:empty { display: none; }
.cv-storage i { margin-right: 5px; }
.cv-storage-link { margin-left: 8px; color: var(--text-muted); }
.cv-storage-link:hover { color: var(--accent-color); }
.cv-storage-link i { margin-right: 0; }
.cv-note { font-size: var(--text-xs); color: var(--text-light); opacity: 0.75; }

.cv-row-kind { font-size: 0.72rem; margin-right: 6px; color: var(--accent-color); opacity: 0.9; }
.cv-row-person--unsaved { color: #fbbf24; }
.cv-row-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cv-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px;
    background: var(--surface-2); color: var(--text-light); font-size: 0.7rem;
}
.cv-status {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px;
    font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.cv-status--queued, .cv-status--processing { background: rgba(56, 189, 248, 0.14); color: #7dd3fc; }
.cv-status--failed, .cv-status--interrupted { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.cv-status--recording { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.cv-status--paused { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }

/* .cv-detail is a fixed-height column flexbox: without this, a child that
   clips its overflow (the scrollable tab bar) is squeezed to nothing as soon
   as the content is taller than the pane. */
.cv-detail > * { flex-shrink: 0; }

/* Detail header */
.cv-head { margin-bottom: var(--space-4); }
.cv-back {
    display: none; margin-bottom: var(--space-3); padding: 0; border: 0; background: none;
    color: var(--accent-color); font-size: var(--text-sm);
}
.cv-head .cv-title-input { margin-bottom: var(--space-2); }
.cv-head-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.cv-meta-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px;
    background: var(--surface-2); color: var(--text-light); font-size: var(--text-xs);
}
.cv-meta-chip i { color: var(--accent-color); }
.cv-head .cv-action-bar { margin-bottom: 0; }

/* Tabs */
.cv-tabs {
    display: flex; gap: var(--space-1); border-bottom: 1px solid var(--surface-border);
    margin-bottom: var(--space-4); overflow-x: auto;
}
.cv-tabs button {
    position: relative; padding: 8px 14px; border: 0; background: none; white-space: nowrap;
    color: var(--text-light); font-size: var(--text-sm); font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cv-tabs button:hover { color: #fff; }
.cv-tabs button.is-active { color: #fff; border-bottom-color: var(--accent-color); }
.cv-tab-count {
    margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-2);
    font-size: 0.68rem; color: var(--text-light);
}
.cv-tab-dot {
    display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%;
    background: var(--accent-color); vertical-align: middle;
}
.cv-panel { display: none; }
.cv-panel.is-active { display: block; }
.cv-panel-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-8) var(--space-4); color: var(--text-light); text-align: center;
}
.cv-panel-empty i { font-size: 2rem; opacity: 0.4; }
.cv-panel-empty p { margin: 0; opacity: 0.7; }
.cv-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); }
.cv-notes { min-height: 50vh; }

/* One recording */
.cv-rec {
    background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: 0.85rem;
    padding: var(--space-4); margin-bottom: var(--space-4);
}
.cv-rec-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cv-rec-icon {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--accent-muted); color: var(--accent-hover);
}
.cv-rec-heading { min-width: 0; flex: 1; }
.cv-rec-title { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-rec-meta { font-size: var(--text-xs); color: var(--text-light); }
.cv-rec-progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-xs); color: #7dd3fc; }
.cv-progress { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cv-progress > div { height: 100%; background: linear-gradient(90deg, #38bdf8, var(--accent-color)); border-radius: inherit; transition: width 0.4s ease; }
.cv-inline-error {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    border-radius: 8px; background: rgba(239, 68, 68, 0.1); color: #fca5a5; font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}
.cv-rec .cv-note { margin-bottom: var(--space-2); }

/* Player */
.cv-player {
    --cv-wave-played: var(--accent-hover);
    --cv-wave-rest: #3b3b3b;
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border-radius: 0.7rem;
    background: var(--surface-2); border: 1px solid var(--surface-border);
    position: sticky; top: 0; z-index: 3; margin-bottom: var(--space-3);
}
.cv-player-btn {
    flex-shrink: 0; height: 32px; min-width: 32px; padding: 0 6px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; color: var(--text-light);
    display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: var(--text-xs);
}
.cv-player-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.cv-player-btn span { font-size: 0.6rem; font-weight: 700; }
.cv-player-play { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-color); color: #fff; font-size: var(--text-base); }
.cv-player-play:hover { background: var(--accent-hover); color: #fff; }
.cv-player-speed { font-weight: 700; min-width: 40px; }
.cv-wave { position: relative; flex: 1; min-width: 80px; height: 42px; cursor: pointer; }
.cv-wave canvas { width: 100%; height: 100%; display: block; }
.cv-wave-cursor { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; opacity: 0.85; pointer-events: none; left: 0; }
.cv-player-time { font-size: var(--text-xs); color: var(--text-light); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Speakers */
.cv-spk-0 { --spk: #c49a72; }
.cv-spk-1 { --spk: #38bdf8; }
.cv-spk-2 { --spk: #a78bfa; }
.cv-spk-3 { --spk: #fbbf24; }
.cv-spk-4 { --spk: #f472b6; }
.cv-spk-5 { --spk: #34d399; }
.cv-spk-none { --spk: #6b6b6b; }
.cv-speakers { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.cv-spk {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--surface-border); background: var(--surface-2); color: #fff; font-size: var(--text-xs);
}
.cv-spk small { color: var(--text-light); }
.cv-spk i { font-size: 0.6rem; opacity: 0; transition: opacity 0.12s ease; color: var(--text-light); }
.cv-spk:hover { border-color: var(--spk); }
.cv-spk:hover i { opacity: 1; }
.cv-spk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spk); flex-shrink: 0; display: inline-block; }

/* Transcript lines */
.cv-lines { display: flex; flex-direction: column; }
.cv-line {
    display: flex; gap: var(--space-3); padding: 4px var(--space-2); border-radius: 8px;
    border-left: 2px solid transparent; transition: background 0.15s ease;
}
.cv-line--turn { margin-top: var(--space-2); }
.cv-line:hover { background: rgba(255, 255, 255, 0.025); }
.cv-line.is-active { background: rgba(140, 110, 82, 0.13); border-left-color: var(--spk, var(--accent-color)); }
.cv-line-time {
    flex-shrink: 0; width: 52px; padding: 2px 0; border: 0; background: none; text-align: right;
    color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.cv-line-time:hover, .cv-line.is-active .cv-line-time { color: var(--accent-hover); }
.cv-line-body { flex: 1; min-width: 0; }
.cv-line-speaker {
    display: block; padding: 0; border: 0; background: none; margin-bottom: 1px;
    color: var(--spk); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2px;
}
.cv-line-speaker--quiet { display: none; }
.cv-line-text { color: var(--text-color); font-size: var(--text-base); line-height: 1.65; cursor: text; outline: none; border-radius: 4px; }
.cv-line-text.is-editing { background: var(--surface-2); box-shadow: 0 0 0 1px var(--accent-color); padding: 2px 6px; }
.cv-line-text .is-word { color: #fff; background: rgba(196, 154, 114, 0.28); border-radius: 3px; }
.cv-line-edited { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.cv-transcript-empty { padding: var(--space-4); color: var(--text-light); opacity: 0.7; font-size: var(--text-sm); }

/* Popover (speaker menus) */
.cv-popover {
    position: absolute; z-index: 2000; min-width: 220px; max-width: 300px; padding: var(--space-2);
    background: var(--surface-1); border: 1px solid var(--surface-border-strong); border-radius: 10px;
    box-shadow: var(--shadow-lg);
}
.cv-popover--form { width: 290px; padding: var(--space-3); }
.cv-popover-title { font-size: var(--text-xs); font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 6px 6px; }
.cv-popover-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px;
    background: none; color: var(--text-color); font-size: var(--text-sm); text-align: left;
}
.cv-popover-item:hover { background: var(--surface-2); }
.cv-popover-item.is-current { color: #fff; font-weight: 600; }
.cv-popover-label { display: block; margin: var(--space-2) 0 4px; font-size: var(--text-xs); color: var(--text-light); }
.cv-popover-check { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-color); }
.cv-popover-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

/* Import dialog */
.cv-drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
    padding: var(--space-6) var(--space-4); border: 1.5px dashed var(--surface-border-strong); border-radius: 0.85rem;
    background: var(--surface-2); color: var(--text-light); text-align: center; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cv-drop i { font-size: 1.8rem; color: var(--accent-color); }
.cv-drop:hover, .cv-drop.is-over { border-color: var(--accent-color); background: rgba(140, 110, 82, 0.08); }
.cv-drop-title { color: #fff; font-weight: 600; }
.cv-drop-hint { font-size: var(--text-xs); opacity: 0.8; max-width: 440px; }
.cv-import-files { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.cv-import-file {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
    border-radius: 9px; background: var(--surface-2);
}
.cv-import-file > i { color: var(--accent-color); }
.cv-import-file-main { flex: 1; min-width: 0; }
.cv-import-file-name { color: #fff; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-import-file-meta { font-size: var(--text-xs); color: var(--text-light); }
.cv-import-file .cv-progress { margin-top: 6px; }
.cv-import-file-error { font-size: var(--text-xs); color: #f87171; margin-top: 4px; }
.cv-import-file-remove { border: 0; background: none; color: var(--text-light); }
.cv-import-file-remove:hover { color: #f87171; }
.cv-import-status { font-size: var(--text-xs); color: var(--text-light); }
.cv-save-rec { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: 9px; background: var(--surface-2); }
.cv-save-rec > i { font-size: 1.3rem; color: var(--accent-color); }

/* Files tab */
.cv-files-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cv-file {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
    border-radius: 10px; background: var(--surface-1); border: 1px solid var(--surface-border); margin-bottom: var(--space-2);
}
.cv-file > i { font-size: 1.2rem; color: var(--accent-color); width: 22px; text-align: center; }
.cv-file-main { flex: 1; min-width: 0; }
.cv-file-name { color: #fff; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-file-meta { font-size: var(--text-xs); color: var(--text-light); }

/* Details tab */
.cv-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.cv-details-title { margin: var(--space-5) 0 var(--space-3); color: var(--text-light); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.6px; }
.cv-d-rec { margin-bottom: var(--space-3); }
.cv-d-rec-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.cv-d-rec-head > i { color: var(--accent-color); margin-top: 4px; }
.cv-d-rec-head > div { flex: 1; min-width: 0; }
.cv-d-rec-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.cv-d-speakers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--surface-border); }
.cv-d-speakers .form-select { width: auto; }
.cv-d-keep { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-light); }

/* Unsaved recording */
.cv-unsaved-banner {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4);
    border-radius: 0.85rem; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25);
}
.cv-unsaved-banner > i { font-size: 1.3rem; color: #fbbf24; }

/* ==========================================================================
   Call recorder — navbar control + panel (static/js/shared/recorder-pill.js)
   and the level meter (static/js/shared/level-meter.js). Loaded on every page.
   ========================================================================== */

.rec-nav-slot { position: relative; list-style: none; display: flex; align-items: center; }
.rec-nav-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 999px;
    border: 1px solid transparent; background: transparent; color: var(--text-light); font-size: var(--text-sm);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rec-nav-btn:hover, .rec-nav-btn.is-open { color: #fff; background: rgba(255, 255, 255, 0.06); }
.rec-nav-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-nav-time:empty, .rec-nav-btn--idle .rec-nav-meter { display: none; }
.rec-nav-btn .rec-nav-meter { width: 46px; }
.rec-nav-btn--recording { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.45); color: #fecaca; }
.rec-nav-btn--recording .rec-nav-icon { color: #ef4444; font-size: 0.6rem; animation: rec-blink 1.4s ease-in-out infinite; }
.rec-nav-btn--paused { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4); color: #fde68a; }
.rec-nav-btn--testing { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.35); color: #bae6fd; }
.rec-nav-btn.has-warning { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55); }
@keyframes rec-blink { 50% { opacity: 0.25; } }

.rec-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 1060; width: 340px;
    padding: var(--space-4); border-radius: 14px; background: var(--surface-1);
    border: 1px solid var(--surface-border-strong); box-shadow: var(--shadow-lg); color: var(--text-color);
}
.rec-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--space-3); color: #fff; font-weight: 700; }
.rec-panel-head i { color: var(--accent-hover); }
.rec-panel-head span { font-size: var(--text-xs); font-weight: 400; color: var(--text-light); }
.rec-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.rec-mode {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 10px;
    border: 1px solid var(--surface-border); background: var(--surface-2); color: var(--text-light); text-align: left;
}
.rec-mode i { color: var(--accent-color); margin-bottom: 4px; }
.rec-mode b { color: #fff; font-size: var(--text-sm); font-weight: 600; }
.rec-mode small { font-size: 0.7rem; }
.rec-mode.is-active { border-color: var(--accent-color); background: rgba(140, 110, 82, 0.14); }
.rec-label { display: block; margin: var(--space-2) 0 4px; font-size: var(--text-xs); color: var(--text-light); }
.rec-meters { display: flex; flex-direction: column; gap: 8px; margin: var(--space-3) 0; }
.rec-hint, .rec-warning, .rec-error {
    display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px;
    font-size: var(--text-xs); margin-bottom: var(--space-2);
}
.rec-hint { background: var(--surface-2); color: var(--text-light); }
.rec-warning { background: rgba(245, 158, 11, 0.12); color: #fde68a; }
.rec-error { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
.rec-hint i, .rec-warning i, .rec-error i { margin-top: 2px; }
.rec-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-xs); color: var(--text-light); margin: var(--space-2) 0; }
.rec-consent input { margin-top: 2px; }
.rec-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.rec-actions .btn { flex: 1; }
.rec-foot { margin-top: var(--space-3); font-size: 0.7rem; color: var(--text-muted); text-align: center; }
.rec-discard { display: block; margin: var(--space-2) auto 0; border: 0; background: none; color: var(--text-muted); font-size: var(--text-xs); }
.rec-discard:hover { color: #f87171; }
.rec-live-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: rec-blink 1.4s ease-in-out infinite; }
.rec-live-head--paused .rec-dot { background: #f59e0b; animation: none; }
.rec-live-head--stopping .rec-dot { background: var(--text-light); animation: none; }
.rec-live-time { margin-left: auto; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.rec-live-title { margin-top: 2px; color: var(--text-color); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-live-sub { font-size: var(--text-xs); color: var(--text-light); }

/* Level meter */
.rec-meter { display: flex; align-items: center; gap: 8px; }
.rec-meter-label { width: 64px; font-size: var(--text-xs); color: var(--text-light); }
.rec-meter-db { width: 46px; text-align: right; font-size: var(--text-xs); color: var(--text-light); font-variant-numeric: tabular-nums; }
.rec-meter-bar {
    position: relative; flex: 1; height: 10px; border-radius: 999px; overflow: hidden;
    background: linear-gradient(90deg, #2f6f4f 0%, #22c55e 45%, #84cc16 70%, #f59e0b 85%, #ef4444 96%);
}
.rec-meter-target { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.12); border-left: 1px solid rgba(255, 255, 255, 0.25); border-right: 1px solid rgba(255, 255, 255, 0.25); z-index: 2; }
.rec-meter-mask { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; background: #2a2a2a; z-index: 1; transition: width 0.08s linear; }
.rec-meter-peak { position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: #fff; opacity: 0.8; z-index: 3; }
.rec-meter-peak.is-hot { background: #ef4444; opacity: 1; }
.rec-meter.is-off .rec-meter-bar { opacity: 0.35; }
.rec-meter--compact .rec-meter-bar { height: 5px; }
.rec-meter--compact .rec-meter-mask { background: rgba(0, 0, 0, 0.55); }

@media (max-width: 991px) {
    .rec-panel { position: fixed; top: 64px; left: 8px; right: 8px; width: auto; }
}

@media (max-width: 900px) {
    .cv-sidebar { width: 100%; min-width: 0; border-right: 0; }
    .cv-detail { display: none; padding: var(--space-4); }
    .cv-shell.has-selection .cv-sidebar { display: none; }
    .cv-shell.has-selection .cv-detail { display: flex; }
    .cv-back { display: inline-flex; align-items: center; gap: 6px; }
    .cv-details-grid { grid-template-columns: 1fr; }
    .cv-player { flex-wrap: wrap; }
    .cv-wave { order: 10; flex-basis: 100%; }
    .cv-line-time { width: 40px; }
}

/* ==========================================================================
   DASHBOARD SHELL — fixed navbar + fixed sidebar + independently scrolling
   main content. Scoped to body.dashboard-shell so no other page is affected.
   ========================================================================== */

body.dashboard-shell {
    overflow: hidden;
    height: 100vh;
}

body.dashboard-shell .main-content {
    margin-top: 0;
    padding: 0;
    min-height: 0;
    height: 100vh;
}

.dash-shell {
    display: flex;
    height: 100vh;
    padding-top: 80px;
    box-sizing: border-box;
    overflow: hidden;
}

.dash-sidebar {
    width: 250px;
    min-width: 250px;
    height: 100%;
    /* Deliberately not scrollable. World clocks live in the navbar and the
       KPI tiles went from six to four precisely so the content fits; the
       short-viewport rule below keeps that true on a laptop screen. */
    overflow: hidden;
    background: var(--surface-1);
    border-right: 1px solid var(--surface-border);
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    box-sizing: border-box;
}

.dash-sidebar-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-color);
    margin-bottom: var(--space-3);
}

.dash-pulse-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dash-pulse-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
}

.dash-pulse-label {
    font-size: var(--text-xs);
    color: var(--text-light);
}

.dash-pulse-value {
    font-size: var(--text-md);
    font-weight: 700;
    color: #fff;
}

.dash-pulse-value.is-alert {
    color: #f87171;
}

.dash-quick-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-quick-links a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: 0.5rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.15s ease;
}

.dash-quick-links a i {
    width: 18px;
    text-align: center;
    color: var(--text-light);
    transition: color 0.15s ease;
}

.dash-quick-links a:hover {
    background: rgba(140, 110, 82, 0.1);
    color: #fff;
}

.dash-quick-links a:hover i {
    color: var(--accent-color);
}

.dash-main-scroll {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: var(--space-6);
    box-sizing: border-box;
}

/* ── Merged AI card: ask bar (search + risk/opportunity/refresh actions) ── */
.dash-ask-bar {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
}

.dash-ask-input-group {
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--surface-border-strong);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    transition: border-color 0.2s ease;
}

.dash-ask-input-group:focus-within {
    border-color: var(--accent-color);
}

.dash-ask-input-group i {
    color: var(--accent-color);
    font-size: var(--text-sm);
}

.dash-ask-input-group input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: var(--text-base);
    padding: 8px 0;
}

.dash-ask-input-group input::placeholder {
    color: var(--text-light);
}

.dash-ask-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Merged AI card: narrative panel (executive briefing / search / risk / opportunity) ── */
.dash-narrative {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--surface-border);
    border-radius: 0.75rem;
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.dash-narrative-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: rgba(140, 110, 82, 0.06);
    border-bottom: 1px solid var(--surface-border);
}

.dash-narrative-mode {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-color);
}

.dash-narrative-meta {
    font-size: var(--text-xs);
    color: var(--text-light);
    opacity: 0.7;
}

/* Fixed, code-rendered capital figures — never AI-generated, so they can't
   drop digits the way the streamed narrative occasionally does. */
.dash-narrative-capital-strip {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--surface-border);
}

.dash-narrative-capital-strip:empty {
    display: none;
}

.dash-narrative-capital-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-narrative-capital-label {
    font-size: var(--text-xs);
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.dash-narrative-capital-value {
    font-size: var(--text-md);
    font-weight: 700;
    color: #fff;
}

.dash-narrative-body {
    padding: var(--space-5);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-color);
    transition: opacity 0.2s ease;
    max-height: 480px;
    overflow-y: auto;
}

.dash-narrative-body.is-loading {
    opacity: 0.4;
}

.dash-narrative-body h2,
.dash-narrative-body h3,
.dash-narrative-body h4 {
    font-size: var(--text-md);
    font-weight: 700;
    color: #fff;
    margin: var(--space-4) 0 var(--space-2);
    letter-spacing: -0.2px;
}

.dash-narrative-body h2:first-child,
.dash-narrative-body h3:first-child,
.dash-narrative-body h4:first-child {
    margin-top: 0;
}

.dash-narrative-body p {
    margin: 0 0 var(--space-3);
}

.dash-narrative-body ul,
.dash-narrative-body ol {
    margin: 0 0 var(--space-3);
    padding-left: 1.4rem;
}

.dash-narrative-body li {
    margin-bottom: var(--space-1);
}

.dash-narrative-body strong {
    color: #fff;
    font-weight: 700;
}

.dash-narrative-body code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ── Distribution tab: real charts replacing the plain-text stage/status lists ── */
.dash-chart-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dash-chart-col-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    opacity: 0.75;
}

@media (max-width: 992px) {
    body.dashboard-shell {
        overflow: auto;
        height: auto;
    }

    body.dashboard-shell .main-content {
        height: auto;
    }

    .dash-shell {
        flex-direction: column;
        height: auto;
        overflow: visible;
        padding-top: 80px;
    }

    .dash-sidebar {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: 240px;
        border-right: none;
        border-bottom: 1px solid var(--surface-border);
    }

    .dash-main-scroll {
        height: auto;
        overflow: visible;
    }

}

/* ==========================================================================
   AI CHAT V2 — institutional redesign. Structural pattern mirrors the tasks
   page (.tsk-shell/.tsk-sidebar: fixed-height shell, independently scrolling
   panes) but namespaced .chat-* since the sidebar content (conversation list,
   not a task list) is different. Every value pulls from the shared tokens.
   ========================================================================== */

.chat-shell {
    display: flex;
    height: calc(100vh - 70px);
    margin-top: 70px;
    background: var(--primary-bg);
    overflow: hidden;
}

/* ── Sidebar: conversation list ── */
.chat-sidebar {
    width: 320px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border-right: 1px solid var(--surface-border);
}

.chat-toolbar {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-bottom: 1px solid var(--surface-border);
}

.chat-new-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: rgba(140, 110, 82, 0.1);
    border: 1px dashed var(--accent-color);
    color: var(--accent-color);
    border-radius: 0.6rem;
    padding: var(--space-3);
    font-weight: 700;
    font-size: var(--text-sm);
    transition: all 0.15s ease;
}

.chat-new-btn:hover {
    background: rgba(140, 110, 82, 0.18);
    color: #fff;
}

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

.chat-search-wrap i {
    position: absolute;
    left: 12px;
    color: var(--text-light);
    font-size: var(--text-xs);
    opacity: 0.6;
    pointer-events: none;
}

.chat-search {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 32px;
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    color: #fff;
    font-size: var(--text-base);
}

.chat-search:focus {
    border-color: var(--accent-color);
    outline: none;
}

.chat-history-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.chat-history-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 0.6rem;
    margin-bottom: 2px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.chat-history-item:hover {
    background: var(--surface-2);
}

.chat-history-item.active {
    background: rgba(140, 110, 82, 0.12);
    border-color: var(--accent-color);
}

.chat-history-item i.chat-history-icon {
    color: var(--text-light);
    font-size: var(--text-sm);
    opacity: 0.7;
    flex-shrink: 0;
}

.chat-history-item-body {
    flex: 1;
    min-width: 0;
}

.chat-history-item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-history-item-meta {
    font-size: var(--text-xs);
    color: var(--text-light);
    opacity: 0.7;
}

/* "Active" dot — a conversation currently streaming a response. Reuses the
   same green-pulse animation as the navbar's online indicator. */
.chat-active-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
    flex-shrink: 0;
}

.chat-history-item-delete {
    opacity: 0;
    background: transparent;
    border: none;
    color: var(--text-light);
    padding: 4px;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.chat-history-item:hover .chat-history-item-delete {
    opacity: 0.7;
}

.chat-history-item-delete:hover {
    opacity: 1 !important;
    color: #f87171;
}

/* ── Main conversation pane ── */
.chat-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.chat-msg-row {
    display: flex;
    width: 100%;
}

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

.chat-msg-bubble {
    max-width: 78%;
    padding: var(--space-4) var(--space-5);
    border-radius: 1rem;
    font-size: var(--text-base);
    line-height: 1.7;
}

.chat-msg-bubble.user {
    background: var(--accent-color);
    color: #fff;
    border-bottom-right-radius: 0.3rem;
}

.chat-msg-bubble.assistant {
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    color: var(--text-color);
    border-bottom-left-radius: 0.3rem;
}

.chat-msg-bubble .content > *:first-child { margin-top: 0; }
.chat-msg-bubble .content > *:last-child { margin-bottom: 0; }
.chat-msg-bubble .content p { margin: 0 0 var(--space-3); }
.chat-msg-bubble .content h2,
.chat-msg-bubble .content h3,
.chat-msg-bubble .content h4 {
    margin: var(--space-4) 0 var(--space-2);
    font-weight: 700;
    color: #fff;
}
.chat-msg-bubble .content ul,
.chat-msg-bubble .content ol {
    margin: 0 0 var(--space-3);
    padding-left: 1.4rem;
}
.chat-msg-bubble .content li { margin-bottom: var(--space-1); }
.chat-msg-bubble .content strong { color: #fff; font-weight: 700; }
.chat-msg-bubble .content code {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    font-size: var(--text-sm);
}
.chat-msg-bubble .content pre {
    background: rgba(0, 0, 0, 0.25);
    padding: var(--space-3);
    border-radius: 0.6rem;
    overflow-x: auto;
}
.chat-msg-bubble .content pre code { background: none; padding: 0; }
.chat-msg-bubble .content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
}
.chat-msg-bubble .content th,
.chat-msg-bubble .content td {
    border: 1px solid var(--surface-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

.chat-msg-actions {
    margin-top: var(--space-2);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: var(--text-xs);
}

.chat-msg-bubble:hover .chat-msg-actions {
    opacity: 0.6;
}

.chat-msg-actions button {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0;
}

.chat-msg-actions button:hover {
    opacity: 1;
}

/* ── Citations + sources (static/js/ai/citations.js) — chat and dashboard ── */
.ai-cite-group { white-space: nowrap; }
.ai-cite {
    display: inline-block;
    min-width: 1.3em;
    padding: 0 0.3em;
    margin-left: 2px;
    border-radius: 0.35em;
    background: rgba(140, 110, 82, 0.22);
    color: #e9d6c3;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    vertical-align: super;
    text-decoration: none;
}
a.ai-cite:hover { background: var(--accent-color); color: #fff; }

.chat-msg-footer:empty { display: none; }
.chat-msg-footer {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--surface-border);
}
.ai-sources-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: var(--space-2);
}
.ai-source-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.ai-source {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.4;
    min-width: 0;
}
.ai-source-n {
    flex-shrink: 0;
    min-width: 1.5em;
    text-align: center;
    border-radius: 0.35em;
    background: rgba(140, 110, 82, 0.18);
    color: #e9d6c3;
    font-size: var(--text-xs);
    font-weight: 700;
}
.ai-source-icon { flex-shrink: 0; width: 14px; color: var(--text-light); font-size: var(--text-xs); }
.ai-source-body { min-width: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
.ai-source-body a { color: var(--text-color); text-decoration: none; overflow-wrap: anywhere; }
.ai-source-body a:hover { color: #fff; text-decoration: underline; }
.ai-source-meta { color: var(--text-light); font-size: var(--text-xs); }
.ai-sources-more { margin-top: var(--space-2); }
.ai-sources-more summary {
    cursor: pointer;
    color: var(--text-light);
    font-size: var(--text-xs);
    list-style-position: inside;
}
.ai-sources-more[open] summary { margin-bottom: var(--space-2); }
.chat-msg-cost {
    margin-top: var(--space-2);
    color: var(--text-light);
    font-size: var(--text-xs);
    opacity: 0.75;
}

.chat-off-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 0.6rem;
    background: rgba(245, 158, 11, 0.08);
    color: #fde68a;
    font-size: var(--text-sm);
}
.chat-off-link { margin-left: auto; color: #fde68a; font-weight: 600; white-space: nowrap; }
.chat-welcome-hint { color: var(--text-light); }

/* Navbar "Ask AI" (navbar.js) */
/* Calculator button (static/js/calculator/calc-dock.js; the calculator's own styles are calc.css) */
.calc-nav-btn {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-light); font-size: 1rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.calc-nav-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-color); }
.calc-nav-btn.is-open { background: rgba(140, 110, 82, 0.18); color: #e9d6c3; }
.nav-ask-ai { font-size: 1.05rem; }
.nav-ask-ai:hover { color: #e9d6c3 !important; }

/* Navbar tool and account icons (navbar.js): the calculator, world clocks, Ask AI,
   notifications, then Profile / Settings / Log out and who is signed in. Each is
   one click; there is no account dropdown. */
.nav-tools, .nav-account {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
}
.nav-account { padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.nav-tool-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-light); font-size: 1rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.navbar .nav-link.nav-tool-btn { padding: 0; }
.nav-tool-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-color); }
.nav-tool-btn.is-open, .nav-tool-btn.is-current { background: rgba(140, 110, 82, 0.18); color: #e9d6c3; }
.nav-tool-btn.is-danger:hover { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.nav-user {
    display: flex; align-items: center; gap: 10px; margin-left: 4px;
    padding: 3px 3px 3px 12px; border-radius: 999px;
    color: var(--text-color); text-decoration: none;
    transition: background var(--transition-fast);
}
.nav-user:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-user:hover .nav-profile-img { border-color: var(--accent-color); }
.nav-user-name { font-size: 0.85rem; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991px) {
    .nav-tools, .nav-account { flex-wrap: wrap; margin: 0.5rem 0; }
    .nav-account { border-left: 0; padding-left: 0; }
}

.chat-typing {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-light);
}

.chat-typing-dots {
    display: flex;
    gap: 4px;
}

.chat-typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: chat-bounce 1.4s infinite ease-in-out;
    opacity: 0.6;
}

.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* ── Input area ── */
.chat-input-container {
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.chat-input-inner {
    max-width: 900px;
    margin: 0 auto;
}

.chat-attached-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.chat-attached-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(140, 110, 82, 0.1);
    border: 1px solid rgba(140, 110, 82, 0.3);
    color: var(--text-color);
    border-radius: 20px;
    padding: 4px 8px 4px 12px;
    font-size: var(--text-xs);
}

.chat-attached-chip i.chip-type-icon {
    color: var(--accent-color);
}

.chat-attached-chip button {
    background: transparent;
    border: none;
    color: var(--text-light);
    padding: 2px;
    display: flex;
}

.chat-attached-chip button:hover {
    color: #f87171;
}

.chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    background: var(--surface-2);
    border: 1px solid var(--surface-border-strong);
    border-radius: 1.25rem;
    padding: var(--space-2) var(--space-3);
    transition: border-color 0.2s ease;
}

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

.chat-attach-btn,
.chat-send-btn {
    background: transparent;
    border: none;
    color: var(--text-light);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.chat-attach-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.chat-send-btn {
    background: var(--accent-color);
    color: #fff;
}

.chat-send-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.chat-send-btn:disabled {
    opacity: 0.3;
    background: var(--surface-2);
    color: var(--text-light);
}

.chat-textarea {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    resize: none;
    max-height: 200px;
    padding: var(--space-2) 0;
    font-size: var(--text-base);
    line-height: 1.5;
}

.chat-textarea::placeholder {
    color: var(--text-light);
}

.chat-disclaimer {
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-xs);
    opacity: 0.6;
    margin: var(--space-3) 0 0;
}

/* ── Entity attach picker (built on .insight-drawer) ── */
.entity-picker-tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6) 0;
    flex-wrap: wrap;
}

.entity-picker-tab {
    background: transparent;
    border: 1px solid var(--surface-border-strong);
    color: var(--text-light);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: var(--text-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.entity-picker-tab:hover {
    color: #fff;
}

.entity-picker-tab.active {
    background: rgba(140, 110, 82, 0.18);
    border-color: var(--accent-color);
    color: #fff;
}

.entity-picker-search-wrap {
    position: relative;
    padding: var(--space-4) var(--space-6) var(--space-3);
}

.entity-picker-search-wrap i {
    position: absolute;
    left: calc(var(--space-6) + 12px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: var(--text-xs);
    opacity: 0.6;
    pointer-events: none;
}

.entity-picker-search-wrap input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 32px;
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    color: #fff;
    font-size: var(--text-base);
}

.entity-picker-search-wrap input:focus {
    border-color: var(--accent-color);
    outline: none;
}

.entity-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-4) var(--space-4);
}

.entity-picker-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 0.6rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.entity-picker-row:hover {
    background: var(--surface-2);
}

.entity-picker-row.selected {
    background: rgba(140, 110, 82, 0.12);
    border-color: var(--accent-color);
}

.entity-picker-row input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--accent-color);
    width: 16px;
    height: 16px;
}

.entity-picker-row-body {
    min-width: 0;
    flex: 1;
}

.entity-picker-row-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-picker-row-meta {
    font-size: var(--text-xs);
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--surface-border);
    background: var(--surface-2);
}

.entity-picker-count {
    font-size: var(--text-sm);
    color: var(--text-light);
}

@media (max-width: 992px) {
    .chat-sidebar {
        display: none;
    }
}

/* ==========================================================================
   ENTITY PROFILE PAGE V2 — sidebar + tabs shell
   Namespaced `.pf-*` ("profile"). Generic entity-detail-page shell built
   from the shared V2 tokens (--surface-*, --space-*, --text-*, --accent-*)
   plus direct reuse of the People-directory primitives (.ppl-avatar,
   .ppl-role, .ppl-temp, .ppl-tag, .ppl-copy, .ppl-social,
   .ppl-engagement/.ppl-meter) and the Tasks-page chip/status primitives
   (.tsk-chip-row, .tsk-chip, .tsk-row-status-dot, .dash-priority-badge).
   First used by person.html; written generically so company.html's
   eventual redesign can reuse it directly instead of duplicating it.
   ========================================================================== */

/* The shell fills exactly the viewport below the navbar and never scrolls
   itself — .pf-sidebar and .pf-tab-panels each own their own scrollbar, so
   scrolling one never drags the other along with it (page-level scrolling
   made that impossible to avoid). Same fixed-height-shell convention as
   .tsk-shell / .nt-shell, just split into a non-scrolling back-link row
   above a scrolling sidebar+main row instead of sidebar+detail alone. */
.pf-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
    margin-top: 70px;
    overflow: hidden;
}

.pf-body {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
    padding: 0 var(--space-6) var(--space-5);
    min-height: 0;
}

.pf-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    padding-right: var(--space-2);
}

.pf-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pf-tab-panels {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--space-2);
}

/* ── Identity header ── */
.pf-identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
}

.pf-back-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color 0.15s ease;
    padding: var(--space-4) var(--space-6) var(--space-3);
}

.pf-back-link:hover {
    color: #fff;
}

.pf-identity-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ppl-avatar.pf-avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .4);
}

.pf-identity-text {
    min-width: 0;
}

.pf-name {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    margin: 0 0 6px;
    word-break: break-word;
}

.pf-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pf-actions .btn {
    flex: 1;
    white-space: nowrap;
}

/* ── Sidebar cards ── */
.pf-card {
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 0.85rem;
    padding: var(--space-4);
}

.pf-card-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-light);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pf-card-title i {
    color: var(--accent-color);
}

.pf-info-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--surface-border);
}

.pf-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pf-info-row:first-child {
    padding-top: 0;
}

.pf-info-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pf-info-value {
    font-size: var(--text-sm);
    color: #fff;
}

.pf-info-value a {
    color: var(--accent-hover);
    text-decoration: none;
}

.pf-info-value a:hover {
    text-decoration: underline;
}

.pf-tags-row,
.pf-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pf-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: var(--text-light);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    padding: 3px 10px;
}

.pf-date-chip i {
    color: var(--accent-color);
}

.pf-social-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-color);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    padding: 3px 10px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.pf-social-link:hover {
    color: #fff;
    border-color: var(--accent-color);
    background: rgba(140, 110, 82, 0.14);
}

.pf-empty-inline {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

.pf-metadata pre {
    background: rgba(0, 0, 0, .3);
    border-radius: 0.5rem;
    padding: var(--space-3);
    font-size: var(--text-xs);
    color: #a7f3d0;
    max-height: 220px;
    overflow: auto;
    margin: 0;
}

/* ── Tab strip ── */
.pf-tabs {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--surface-border);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.pf-tab {
    background: none;
    border: none;
    color: var(--text-light);
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s ease, border-color 0.15s ease;
    margin-bottom: -1px;
}

.pf-tab:hover {
    color: #fff;
}

.pf-tab.is-active {
    color: #fff;
    border-bottom-color: var(--accent-color);
}

.pf-tab-count {
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text-light);
    border-radius: 999px;
    padding: 1px 7px;
}

.pf-tab.is-active .pf-tab-count {
    background: rgba(140, 110, 82, 0.25);
    color: #D9C4A8;
}

.pf-panel {
    display: none;
}

.pf-panel.is-active {
    display: block;
}

/* ── Activity composer ── */
.pf-composer {
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 0.85rem;
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.pf-composer-toggle {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.pf-composer-btn {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    color: var(--text-light);
    border-radius: 0.6rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.15s ease;
}

.pf-composer-btn:hover {
    color: #fff;
    border-color: var(--surface-border-strong);
}

.pf-composer-btn.is-active {
    color: #fff;
    background: rgba(140, 110, 82, 0.18);
    border-color: var(--accent-color);
}

.pf-composer-form {
    display: none;
}

.pf-composer-form.is-active {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Activity feed ── */
.pf-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pf-activity-item {
    display: flex;
    gap: var(--space-3);
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 0.75rem;
    padding: var(--space-3) var(--space-4);
    transition: border-color 0.15s ease;
}

.pf-activity-item:hover {
    border-color: var(--surface-border-strong);
}

.pf-activity-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    color: #fff;
}

.pf-activity-icon.k-note {
    background: rgba(140, 110, 82, 0.35);
}

.pf-activity-icon.k-conversation {
    background: rgba(34, 197, 94, 0.3);
}

.pf-activity-icon.k-task {
    background: rgba(96, 165, 250, 0.3);
}

.pf-activity-body {
    min-width: 0;
    flex: 1;
}

.pf-activity-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
}

.pf-activity-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
}

.pf-activity-title.is-done {
    text-decoration: line-through;
    color: var(--text-light);
    opacity: .7;
}

.pf-activity-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.pf-activity-preview {
    font-size: var(--text-sm);
    color: var(--text-light);
    opacity: .85;
    margin-top: 2px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pf-activity-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.pf-activity-meta.is-overdue {
    color: #f87171;
    font-weight: 600;
}

.pf-activity-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.pf-icon-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    background: transparent;
    border: 1px solid transparent;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.pf-icon-btn:hover {
    color: #fff;
    background: var(--surface-2);
    border-color: var(--surface-border-strong);
}

.pf-icon-btn.is-danger:hover {
    color: #f87171;
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .3);
}

/* ── Attachments / Deals lists ── */
.pf-file-item,
.pf-deal-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: 0.75rem;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
}

.pf-deal-item {
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s ease;
}

.pf-deal-item:hover {
    border-color: var(--accent-color);
}

.pf-file-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.pf-file-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
}

.pf-file-ext {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(245, 158, 11, .15);
    color: #f59e0b;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
}

.pf-empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-light);
    opacity: .6;
}

.pf-empty-state i {
    font-size: 2rem;
    margin-bottom: var(--space-3);
    display: block;
    opacity: .5;
}

.pf-empty-state p {
    margin: 0;
    font-size: var(--text-sm);
}

/* Generic shimmer placeholder — used while a profile page's data loads */
.pf-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .05) 75%);
    background-size: 200% 100%;
    animation: pfSkeletonShimmer 1.4s infinite;
    border-radius: 6px;
    height: 16px;
}

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

@media (max-width: 960px) {
    .pf-body {
        flex-direction: column;
        gap: var(--space-4);
    }

    .pf-sidebar {
        width: 100%;
        max-height: 40vh;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   NOTIFICATIONS — bell, panel and toasts
   Built on the shared surface / space / text tokens (see DASHBOARD V2)
   rather than a bespoke palette, so the panel reads as the same system as the
   rest of the app. Scoped under .notif-* / #notification-menu so the generic
   .navbar .dropdown-menu rules above are not disturbed for other menus.
   ========================================================================== */

/* ── Bell trigger ── */
#notification-bell {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-light);
    transition: background var(--transition-fast), color var(--transition-fast);
}

#notification-bell:hover,
#notification-bell.show {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-color);
}

#notification-bell i {
    font-size: 1.05rem;
    transform-origin: 50% 15%;
}

/* Fired for ~0.9s whenever a new notification lands on the SSE stream. */
#notification-bell.is-ringing i {
    animation: notif-bell-ring 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes notif-bell-ring {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(16deg); }
    25% { transform: rotate(-14deg); }
    40% { transform: rotate(10deg); }
    55% { transform: rotate(-8deg); }
    70% { transform: rotate(5deg); }
    85% { transform: rotate(-3deg); }
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border: 2px solid var(--primary-bg);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    letter-spacing: -0.02em;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.45);
}

.notif-badge[hidden] {
    display: none;
}

.notif-badge.is-bumped {
    animation: notif-badge-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes notif-badge-bump {
    0% { transform: scale(1); }
    45% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

/* ── Panel shell ── */
#notification-menu.dropdown-menu {
    width: 396px;
    max-width: calc(100vw - 2rem);
    padding: 0;
    overflow: hidden;
    background: var(--surface-1);
    border: 1px solid var(--surface-border-strong);
    border-radius: 1rem;
    box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.75);
}

/* Closed, the panel stays in layout (it fades out on visibility), parked at its
   static position past the right edge, where it widened the page. Anchor it to
   the bell instead; Popper sets the position inline when it opens. */
#notification-menu.dropdown-menu:not(.show) {
    right: 0;
    left: auto;
}

.notif-head {
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--surface-border);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.notif-head-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.notif-head-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin: 0;
}

.notif-head-count {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--accent-hover);
    background: rgba(140, 110, 82, 0.18);
    border: 1px solid rgba(140, 110, 82, 0.35);
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 1.5;
}

.notif-head-actions {
    margin-left: auto;
    display: flex;
    gap: var(--space-1);
}

.notif-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--text-light);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.notif-icon-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--surface-border-strong);
    color: #fff;
}

.notif-icon-btn.is-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.notif-icon-btn:disabled {
    opacity: 0.3;
}

/* ── Filter segmented control ── */
.notif-filters {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-3);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--surface-border);
    border-radius: 0.6rem;
    padding: 3px;
}

.notif-filter {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text-light);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 5px 0;
    border-radius: 0.45rem;
    transition: all var(--transition-fast);
}

.notif-filter:hover {
    color: var(--text-color);
}

.notif-filter.is-active {
    background: rgba(140, 110, 82, 0.22);
    color: #E4D2BC;
    box-shadow: inset 0 0 0 1px rgba(140, 110, 82, 0.4);
}

.notif-filter-count {
    opacity: 0.6;
    font-weight: 500;
    margin-left: 3px;
}

/* ── Scroll body ── */
.notif-list {
    max-height: 440px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.notif-group-label {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-2) var(--space-5);
    background: rgba(26, 26, 26, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--surface-border);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Row ── */
.notif-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-color);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.notif-item:last-child {
    border-bottom: 0;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-color);
}

a.notif-item:hover .notif-item-title {
    color: var(--accent-hover);
}

/* Unread rail — a 3px accent edge rather than a full tinted row, so a burst of
   unread items doesn't turn the whole panel into one solid colour block. */
.notif-item.is-unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-color);
}

.notif-item.is-unread {
    background: rgba(140, 110, 82, 0.06);
}

.notif-item.is-unread:hover {
    background: rgba(140, 110, 82, 0.1);
}

.notif-item.is-new {
    animation: notif-item-in 0.45s ease;
}

@keyframes notif-item-in {
    from { opacity: 0; transform: translateY(-6px); background: rgba(140, 110, 82, 0.22); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-item-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    border: 1px solid transparent;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-top {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.notif-item-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
}

.notif-item-time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.notif-item-msg {
    margin-top: 2px;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-light);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.notif-item-tag {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    padding: 1px 7px;
}

/* Per-row dismiss — revealed on hover so the resting row stays clean. */
.notif-item-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-muted);
    font-size: 0.65rem;
    opacity: 0;
    transition: all var(--transition-fast);
}

.notif-item:hover .notif-item-dismiss {
    opacity: 1;
}

.notif-item-dismiss:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.notif-item.is-leaving {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ── Type accents (icon tile only — the row itself stays neutral) ── */
.notif-tone-info    { background: rgba(13, 202, 240, 0.14); color: #67d6ef; border-color: rgba(13, 202, 240, 0.28); }
.notif-tone-success { background: rgba(16, 185, 129, 0.14); color: #34d399; border-color: rgba(16, 185, 129, 0.28); }
.notif-tone-warning { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border-color: rgba(245, 158, 11, 0.28); }
.notif-tone-error   { background: rgba(239, 68, 68, 0.14);  color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
.notif-tone-accent  { background: rgba(140, 110, 82, 0.2);  color: #D9C4A8; border-color: rgba(140, 110, 82, 0.4); }
.notif-tone-violet  { background: rgba(192, 132, 252, 0.14); color: #c084fc; border-color: rgba(192, 132, 252, 0.28); }

/* ── Empty state ── */
.notif-empty {
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

.notif-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--surface-border);
    color: var(--text-muted);
    font-size: var(--text-lg);
}

.notif-empty-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-color);
}

.notif-empty-text {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Toasts ── */
#toast-container {
    z-index: 1090;
}

.notif-toast {
    width: 372px;
    max-width: calc(100vw - 2rem);
    background: var(--surface-1);
    border: 1px solid var(--surface-border-strong);
    border-radius: 0.85rem;
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    color: var(--text-color);
}

.notif-toast .toast-body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
}

.notif-toast-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    border: 1px solid transparent;
}

.notif-toast-body {
    flex: 1;
    min-width: 0;
}

.notif-toast-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
}

.notif-toast-text {
    margin-top: 2px;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-light);
    white-space: pre-line;
    word-break: break-word;
}

.notif-toast-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-hover);
    text-decoration: none;
}

.notif-toast-link:hover {
    color: #E4D2BC;
    text-decoration: underline;
}

.notif-toast-close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    transition: all var(--transition-fast);
}

.notif-toast-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Timer bar — mirrors the Bootstrap Toast delay so the dismissal isn't a
   surprise. Kept purely decorative; the Toast itself still owns the timing. */
.notif-toast-timer {
    height: 2px;
    background: currentColor;
    opacity: 0.55;
    transform-origin: left center;
    animation: notif-toast-timer linear forwards;
}

@keyframes notif-toast-timer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    #notification-bell.is-ringing i,
    .notif-badge.is-bumped,
    .notif-item.is-new,
    .notif-toast-timer {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    #notification-menu.dropdown-menu {
        width: calc(100vw - 1.5rem);
    }

    .notif-list {
        max-height: 60vh;
    }
}

/* ==========================================================================
   SETTINGS PAGE (settings.html)

   Replaces the inline <style> block the page used to carry, which hard-coded
   Bootstrap's slate palette (var(--bs-dark), #1e2125, var(--bs-primary)) and
   so made Settings the one admin screen that did not read as part of the app.

   Layout primitives only: the surfaces, headers and tables on the page reuse
   the shared .dash-card / .dash-section-* / .dash-table / .kpi-hero-*
   components, same as the dashboard, scheduler and outreach screens.
   ========================================================================== */

/* ── Hero band: same construction as .outreach-hero ── */
.set-hero {
    background: var(--surface-1);
    border-bottom: 1px solid var(--surface-border);
    padding: var(--space-5) 0 var(--space-6);
    margin-top: 70px;
}

.set-hero .dash-section-header {
    margin-bottom: 0;
}

.set-hero p {
    color: var(--text-light);
    font-size: var(--text-sm);
    margin: var(--space-2) 0 0;
    max-width: 680px;
}

/* ── Shell: nav rail beside the panes ──
   Page-level scrolling (not the fixed-height .tsk-shell/.pf-shell treatment)
   because the rail is only six items tall while the panes are far taller —
   a sticky rail follows the reader without giving the panes their own
   scrollbar to get lost in. */
.set-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.set-sidebar {
    position: sticky;
    top: calc(70px + var(--space-4));
}

.set-main {
    min-width: 0;
}

/* Stack a pane's cards with a gap instead of a margin on .dash-card, which is
   shared. Scoped to .active so Bootstrap's `display: none` on the hidden panes
   (lower specificity) still wins for the five panes that are not showing. */
.set-main .tab-content > .tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* A container a pane renders its cards into (Dashboard, Network) gets the same
   gap: the rule above only spaces the pane's direct children. */
.set-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Nav rail ──
   Keeps Bootstrap's .nav/.nav-link markup so the Tab plugin still drives the
   panes; only the appearance is re-skinned onto the brand palette. */
.set-nav {
    gap: var(--space-1);
}

.set-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-3);
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--text-light);
    font-size: var(--text-base);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.set-nav .nav-link i {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-light);
    opacity: 0.8;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.set-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.set-nav .nav-link:hover i {
    color: #fff;
    opacity: 1;
}

.set-nav .nav-link.active {
    background: var(--accent-light);
    border-color: rgba(140, 110, 82, 0.35);
    color: #fff;
}

.set-nav .nav-link.active i {
    color: var(--accent-color);
    opacity: 1;
}

/* ── Inset sub-panel ──
   The "form nested inside a card" surface (SMTP editor, connection tests,
   signature preview). Sits one step above .dash-card so the nesting still
   reads without another border-radius stack. */
.set-subpanel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--surface-border);
    border-radius: 0.75rem;
    padding: var(--space-4);
}

/* Sub-heading inside a form (SMTP OUTBOUND / IMAP INBOUND) */
.set-field-group {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--accent-color);
    opacity: 0.85;
    margin: var(--space-5) 0 var(--space-3);
}

.set-field-group:first-child {
    margin-top: 0;
}

/* Small caption above a preview or a path list */
.set-caption {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-light);
    margin-bottom: var(--space-2);
}

/* Label column of the key/value path tables */
.set-kv-label {
    width: 220px;
    color: var(--text-light);
}

/* Save All while anything on the page differs from what was saved */
#saveAllSettingsBtn.is-dirty::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: var(--space-2);
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
    vertical-align: middle;
}

/* ── Email signatures (static/js/settings/signatures.js) ──
   Account switcher, then that account's signatures as a radio list (one
   active, or "No signature"), then the editor with a white "paper" preview. */
.sig-accounts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.sig-acct {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--surface-border);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-color);
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sig-acct:hover {
    border-color: var(--surface-border-strong);
}

.sig-acct.is-selected {
    border-color: rgba(140, 110, 82, 0.6);
    background: var(--accent-light);
    box-shadow: inset 0 0 0 1px rgba(140, 110, 82, 0.25);
}

.sig-acct-name,
.sig-acct-addr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sig-acct-name {
    padding-right: 64px;
    font-size: var(--text-base);
    font-weight: 600;
}

.sig-acct-addr,
.sig-acct-meta {
    font-size: var(--text-xs);
    color: var(--text-light);
}

.sig-acct-meta {
    margin-top: var(--space-1);
}

.sig-acct-meta b {
    color: var(--accent-hover);
    font-weight: 600;
}

.sig-acct-flag {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}

/* Accounts table: the account's active signature, under its name */
.sig-jump {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    margin-top: var(--space-1);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--text-xs);
    color: var(--accent-hover);
    text-align: left;
}

.sig-jump:hover {
    text-decoration: underline;
}

.sig-jump.is-none {
    color: var(--text-light);
}

.sig-jump i {
    font-size: 0.7rem;
    opacity: 0.8;
}

.sig-list {
    border: 1px solid var(--surface-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.sig-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--surface-border);
    transition: background 0.15s ease;
}

.sig-item:first-child {
    border-top: 0;
}

.sig-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.sig-item.is-open {
    background: var(--accent-light);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.sig-radio {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid var(--surface-border-strong);
    border-radius: 50%;
    background: transparent;
    transition: border-color 0.15s ease;
}

.sig-radio:hover {
    border-color: var(--accent-hover);
}

.sig-radio[aria-checked="true"] {
    border-color: var(--accent-color);
}

.sig-radio[aria-checked="true"]::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent-hover);
}

.sig-item-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

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

.sig-item-excerpt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--text-light);
}

.sig-item--none .sig-item-name {
    color: var(--text-light);
}

.sig-item-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--space-1);
}

.sig-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-light);
}

.sig-empty > i {
    font-size: var(--text-xl);
    color: var(--accent-color);
    opacity: 0.7;
}

.sig-editor {
    margin-top: var(--space-4);
}

.sig-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* Recipients see the signature on white, so the preview does too */
.sig-paper {
    overflow: hidden;
    border: 1px solid var(--surface-border);
    border-radius: 0.6rem;
    background: #fff;
}

.sig-paper iframe {
    display: block;
    width: 100%;
    height: 100px;
    border: 0;
    background: #fff;
}

.sig-unsaved {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 0.6rem;
    background: rgba(251, 191, 36, 0.06);
    font-size: var(--text-sm);
    color: #fbbf24;
}

.sig-unsaved[hidden],
.sig-editor[hidden] {
    display: none;
}

@media (max-width: 575.98px) {
    .sig-item {
        flex-wrap: wrap;
        padding: var(--space-3);
    }

    .sig-item-actions {
        margin-left: calc(18px + var(--space-3));
    }
}

/* A .kpi-hero-grid child that has to span the row (async error state) */
.set-grid-error {
    grid-column: 1 / -1;
}

.set-scroll-320 {
    max-height: 320px;
    overflow-y: auto;
}

/* Path health issue rows: one line per path, full value in the title tooltip */
.set-path-cell {
    max-width: 340px;
    vertical-align: bottom;
}

/* ── Recordings tab (static/js/settings/recordings.js) ── */
.rset-health {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rset-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-light);
    font-size: var(--text-xs);
}

.rset-chip i { opacity: 0.85; }
.rset-chip.is-ok i { color: #6ee7b7; }
.rset-chip.is-warn { border-color: rgba(245, 158, 11, 0.35); color: #fde68a; }

/* Same cards as the recorder pill's .rec-mode, as radio labels */
.rset-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.rset-mode {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--surface-border);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-light);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.rset-mode input { position: absolute; opacity: 0; pointer-events: none; }
.rset-mode i { color: var(--accent-color); width: 20px; text-align: center; }
.rset-mode b { display: block; color: #fff; font-size: var(--text-sm); font-weight: 600; }
.rset-mode small { display: block; font-size: var(--text-xs); }
.rset-mode:hover { border-color: rgba(140, 110, 82, 0.35); }
.rset-mode:has(input:checked) { border-color: var(--accent-color); background: rgba(140, 110, 82, 0.14); }
.rset-mode:has(input:focus-visible) { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.rset-storage-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.rset-purge-list { padding-left: 1.1rem; }

.rset-job-error {
    max-width: 360px;
    white-space: normal;
}

/* ── AI tab (static/js/settings/ai.js) ── */
.aiset-kpi-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-light);
}
.aiset-kpi-sub.is-warn { color: #fbbf24; }
.aiset-feature-table td { vertical-align: middle; }
.aiset-feature-table .form-check { margin: 0; }
.aiset-feature-name { color: #fff; font-weight: 600; }
.aiset-feature-help { color: var(--text-light); font-size: var(--text-xs); }
.aiset-feature-where { opacity: 0.7; }
.aiset-feature-where::before { content: "· "; }
.aiset-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}
.aiset-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-color);
    transition: width 0.3s ease;
}
.aiset-meter.is-warn > span { background: #f59e0b; }
.aiset-meter.is-over > span { background: #ef4444; }
.aiset-meter-mark {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: #fde68a;
    opacity: 0.8;
}
.aiset-meter-mark.is-stop { background: #f87171; }
.aiset-bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 4px;
    height: 72px;
}
.aiset-bar {
    border-radius: 3px 3px 0 0;
    background: rgba(140, 110, 82, 0.45);
    min-height: 2px;
}
.aiset-bar.is-today { background: var(--accent-color); }
.aiset-bar-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-light);
    font-size: var(--text-xs);
    margin-top: 4px;
}
.aiset-test-result { font-size: var(--text-sm); }
.aiset-test-result ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; }

@media (max-width: 576px) {
    .rset-modes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 992px) {

    /* Rail becomes a horizontal strip above the panes. Beats .flex-column on
       specificity, so no !important needed. */
    .set-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .set-sidebar {
        position: static;
    }

    .set-shell .set-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: var(--space-2);
    }

    .set-shell .set-nav .nav-link {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .set-nav .nav-link,
    .set-nav .nav-link i {
        transition: none;
    }
}


/* ==========================================================================
   DASHBOARD V3 — Firm Activity feed, Capital & Offerings, Global Desk

   The feed replaces two cards that rendered the same records twice: an
   "Activity Timeline" table and a "Recent Records" table, both sorted by
   created_at, both containing the firm's emails, notes and deals. One feed
   with type filters says the same thing once.

   Modelled on the notifications panel (.notif-*) rather than reusing it: those
   classes carry panel padding and unread/dismiss semantics that mean nothing
   in a dashboard card.
   ========================================================================== */

/* ── Firm Activity feed ── */
.dash-feed {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 480px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 calc(var(--space-5) * -1);
    padding: 0;
}

.dash-feed-loading {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-light);
    font-size: var(--text-base);
}

/* Day headers stay pinned while their own group scrolls past, so the date a
   row belongs to is never off-screen. */
.dash-feed-group {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--space-2) var(--space-5);
    background: rgba(26, 26, 26, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--surface-border);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dash-feed-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-color);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.dash-feed-item:hover {
    background: rgba(140, 110, 82, 0.08);
}

.dash-feed-item:hover .dash-feed-title {
    color: #fff;
}

.dash-feed-icon {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
}

.dash-feed-icon.is-deal {
    background: rgba(140, 110, 82, 0.2);
    color: #E4D2BC;
}

.dash-feed-icon.is-comm {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.dash-feed-icon.is-task {
    background: rgba(13, 202, 240, 0.14);
    color: #67d6ef;
}

.dash-feed-icon.is-milestone {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

.dash-feed-icon.is-note {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
}

.dash-feed-icon.is-directory {
    background: rgba(167, 139, 250, 0.16);
    color: #a78bfa;
}

.dash-feed-body {
    min-width: 0;
    flex: 1 1 auto;
}

.dash-feed-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.dash-feed-title {
    min-width: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.dash-feed-time {
    flex: none;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.dash-feed-meta {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-feed-search {
    position: relative;
    display: flex;
    align-items: center;
}

.dash-feed-search i {
    position: absolute;
    left: var(--space-3);
    font-size: 0.7rem;
    color: var(--text-muted);
    pointer-events: none;
}

.dash-feed-search input {
    width: 190px;
    padding: 5px var(--space-3) 5px var(--space-6);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
    color: var(--text-color);
    font-size: var(--text-xs);
    transition: border-color var(--transition-fast);
}

.dash-feed-search input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Promoted from a page-local rule in emails/index.html, where it was set to
   #1F1F1F — the border colour, effectively invisible against the card. */
.load-more-sentinel {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-light);
}

/* ── Capital & Offerings ── */
.dash-offerings-asof {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* The unit rides alongside the figure, so a derivative's notional can never be
   misread as capital raised. */
.dash-unit {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.dash-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0.35rem;
    border: 1px solid transparent;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: capitalize;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-light);
}

.dash-status-pill.is-completed {
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.dash-status-pill.is-generating {
    background: rgba(13, 202, 240, 0.14);
    border-color: rgba(13, 202, 240, 0.3);
    color: #67d6ef;
}

.dash-status-pill.is-failed {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* ── Receivables tab ── */
.dash-receivables-head {
    margin-bottom: var(--space-3);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fbbf24;
}

.dash-receivables-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--surface-border);
    font-size: var(--text-sm);
}

.dash-receivables-row:last-child {
    border-bottom: none;
}

.dash-receivables-label {
    color: var(--text-light);
}

.dash-receivables-value {
    font-weight: 700;
    color: #fff;
}

.dash-receivables-badge {
    padding: 2px 8px;
    border-radius: 0.35rem;
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    font-size: 0.65rem;
    font-weight: 600;
}

.dash-receivables-badge.is-alert {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.dash-news {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--surface-border);
    border-radius: 0.6rem;
}

.dash-news-item {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.dash-news .dash-feed-group {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.dash-news-tag {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 1px 6px;
    border-radius: 0.3rem;
    background: rgba(140, 110, 82, 0.22);
    color: #E4D2BC;
    font-size: 0.6rem;
    font-weight: 700;
}

.dash-news-note {
    padding: var(--space-5);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-light);
}

/* ── Short viewports ──
   The sidebar no longer scrolls, so on a laptop screen it has to compress
   instead. Four KPI tiles plus Firm Pulse measure ~628px; below roughly 760px
   of viewport the context lines go and the figures shrink to keep it inside. */
@media (max-height: 760px) {
    .dash-sidebar {
        gap: var(--space-4);
        padding: var(--space-4) var(--space-3);
    }

    .dash-kpi-mini-context {
        display: none;
    }

    .dash-kpi-mini-value {
        font-size: var(--text-md);
    }

    .dash-kpi-mini-list {
        gap: var(--space-2);
    }
}

@media (max-width: 992px) {
    .dash-feed {
        max-height: none;
    }

    .dash-feed-search input {
        width: 140px;
    }
}

/* ==========================================================================
   META RENDER — free-form meta_data JSON rendered as UI (static/js/meta-render.js)
   ========================================================================== */
.meta-kv {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(120px, 30%) 1fr;
}

.meta-kv-row {
    display: contents;
}

.meta-kv-row > dt,
.meta-kv-row > dd {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--surface-border);
    margin: 0;
    min-width: 0;
}

.meta-kv-row:last-child > dt,
.meta-kv-row:last-child > dd {
    border-bottom: none;
}

.meta-kv-row > dt {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-light);
    padding-right: var(--space-4);
}

.meta-kv-row > dd {
    font-size: var(--text-base);
    color: var(--text-color);
    overflow-wrap: anywhere;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .meta-kv { grid-template-columns: 1fr; }
    .meta-kv-row > dt { border-bottom: none; padding-bottom: 0; }
}

.meta-empty { color: var(--text-muted); }
.meta-num { font-variant-numeric: tabular-nums; }

.meta-link {
    color: #d8bfa3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.meta-link i {
    font-size: 0.7em;
    margin-right: 6px;
    opacity: 0.7;
}

.meta-link:hover { color: #fff; text-decoration: underline; }

.meta-code {
    font-size: var(--text-xs);
    color: var(--text-light);
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
}

.meta-bool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.meta-bool.is-yes { background: rgba(16, 185, 129, 0.14); color: #34d399; }
.meta-bool.is-no { background: rgba(255, 255, 255, 0.06); color: var(--text-light); }

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

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--surface-border-strong);
    font-size: var(--text-xs);
    color: var(--text-color);
    line-height: 1.6;
    text-decoration: none;
}

.meta-chip.is-link:hover { border-color: var(--accent-color); color: #fff; }
.meta-chip i { font-size: 0.65rem; opacity: 0.7; }

.meta-bullets,
.meta-linklist {
    margin: 0;
    padding-left: 1.1rem;
}

.meta-bullets li,
.meta-linklist li {
    padding: 2px 0;
    line-height: 1.5;
}

.meta-linklist { list-style: none; padding-left: 0; }

.meta-longtext-body {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta-longtext.is-expanded .meta-longtext-body {
    display: block;
}

.meta-more {
    background: none;
    border: none;
    padding: 0;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--accent-hover);
}

.meta-more:hover { color: #fff; }

.meta-group {
    border: 1px solid var(--surface-border);
    border-radius: 0.6rem;
    margin-top: var(--space-3);
    background: rgba(255, 255, 255, 0.015);
}

.meta-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-color);
}

.meta-group > summary::-webkit-details-marker { display: none; }

.meta-group > summary::before {
    content: '\f054';
    font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--text-light);
    transition: transform var(--transition-fast);
    margin-right: var(--space-2);
}

.meta-group[open] > summary::before { transform: rotate(90deg); }
.meta-group > summary > span:first-child { flex: 1; }

.meta-count {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-light);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 1px 7px;
}

.meta-count:empty { display: none; }

.meta-group-body {
    padding: 0 var(--space-3) var(--space-3);
}

.meta-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--surface-border);
    border-radius: 0.5rem;
}

.meta-table {
    /* Size to content and scroll inside .meta-table-wrap, rather than
       squeezing every column down to a word per line. */
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.meta-table th {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    background: var(--surface-2);
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
}

.meta-table td {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--surface-border);
    vertical-align: top;
    min-width: 90px;
    max-width: 280px;
    overflow-wrap: break-word;
}

.meta-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.meta-card {
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 0.6rem;
    padding: var(--space-3);
    min-width: 0;
}

.meta-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    margin-bottom: var(--space-1);
}

.meta-card .meta-kv { grid-template-columns: minmax(90px, 38%) 1fr; }

.meta-shares { display: flex; flex-direction: column; gap: var(--space-2); }

.meta-share-head {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    margin-bottom: 4px;
}

.meta-share-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.meta-share-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-hover));
}

.meta-raw {
    font-size: var(--text-xs);
    color: var(--text-light);
    background: var(--surface-2);
    border-radius: 0.5rem;
    padding: var(--space-3);
    margin: 0;
    max-height: 360px;
    overflow: auto;
}

/* ── Deal team & links card (static/js/deals/deal-relations.js) ─────────────── */
.dr { display: flex; flex-direction: column; gap: var(--space-4); }
.dr-section { display: flex; flex-direction: column; gap: var(--space-1); }
.dr-eyebrow {
    font-size: var(--text-xs); color: var(--text-light); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 600; margin: var(--space-2) 0 2px;
}
.dr-section > .dr-eyebrow:first-child { margin-top: 0; }
.dr-count {
    display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
    background: var(--surface-2); color: var(--text-light); font-size: .7rem; letter-spacing: 0;
}
.dr-desc { font-size: var(--text-sm); color: var(--text-color); margin: 0; white-space: pre-line; line-height: 1.5; }
.dr-empty { font-size: var(--text-sm); color: var(--text-light); margin: 0; }
.dr-row {
    display: flex; align-items: center; gap: var(--space-2); padding: 6px 8px; border-radius: 8px;
    border: 1px solid var(--surface-border); background: rgba(255, 255, 255, .02);
    color: inherit; text-decoration: none; min-width: 0;
}
.dr-row--link:hover, .dr-row:hover { border-color: var(--surface-border-strong); background: rgba(255, 255, 255, .04); }
.dr-link { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.dr-link:hover .dr-name, .dr-row--link:hover .dr-name { text-decoration: underline; }
.dr-text { display: flex; flex-direction: column; min-width: 0; }
.dr-name { font-size: var(--text-sm); font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-sub { font-size: .7rem; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-ico {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; font-size: .75rem;
    display: flex; align-items: center; justify-content: center;
}
.dr-ico--company { background: rgba(59, 130, 246, .12); color: #60a5fa; }
.dr-ico--person { background: rgba(34, 197, 94, .12); color: #4ade80; }
.dr-ico--deal { background: var(--accent-muted); color: var(--accent-hover); }
.dr-ico--structure { background: rgba(168, 85, 247, .12); color: #c084fc; }
.dr-role {
    flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--surface-border-strong);
    background: transparent; color: var(--text-color); cursor: pointer;
}
.dr-role:hover { border-color: var(--accent-color); }
.dr-role--empty { color: var(--text-light); border-style: dashed; }
.dr-role--fixed { cursor: default; color: var(--accent-hover); border-color: var(--accent-muted); }
.dr-role--fixed:hover { border-color: var(--accent-muted); }
.dr-role-input { max-width: 45%; height: 26px; font-size: .75rem; }
.dr-x {
    flex-shrink: 0; border: 0; background: transparent; color: var(--text-light);
    padding: 2px 4px; opacity: 0; transition: opacity .15s;
}
.dr-row:hover .dr-x, .dr-x:focus-visible { opacity: 1; }
.dr-x:hover { color: #f87171; }
.dr-add { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-2); }
.dr-add-line { display: flex; gap: 6px; }
.dr-add-line .btn:disabled { background: var(--accent-color); border-color: var(--accent-color); opacity: .45; }
.dr-link-btn {
    align-self: flex-start; border: 0; background: transparent; padding: 2px 0;
    font-size: var(--text-xs); color: var(--accent-hover);
}
.dr-link-btn:hover { text-decoration: underline; }
.dr-edit { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--surface-border); }
.dr-hint { font-size: .7rem; color: var(--text-light); }
.dr-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: var(--space-2); }
@media (hover: none) { .dr-x { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════════
   App dialogs (static/js/shared/dialog.js) — styled alert/confirm/prompt.
   Sits above Bootstrap's modal layer (1055) and below toasts (1090).
   ══════════════════════════════════════════════════════════════════ */
.app-dialog-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.app-dialog-overlay.is-open { opacity: 1; }

.app-dialog {
    --dlg-tone: var(--accent-color);
    position: relative;
    width: 440px;
    max-width: 100%;
    max-height: calc(100vh - 2 * var(--space-4));
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--surface-border-strong);
    border-radius: 1rem;
    box-shadow: 0 28px 64px -20px rgba(0, 0, 0, 0.85);
    color: var(--text-color);
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.16s ease;
}
.app-dialog-overlay.is-open .app-dialog { transform: none; }
.app-dialog--wide { width: 560px; }
.app-dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--space-6);
    right: var(--space-6);
    height: 2px;
    background: linear-gradient(90deg, var(--dlg-tone), transparent);
    border-radius: 0 0 2px 2px;
}
.app-dialog--danger  { --dlg-tone: #ef4444; }
.app-dialog--warning { --dlg-tone: #f59e0b; }
.app-dialog--info    { --dlg-tone: #0dcaf0; }
.app-dialog--success { --dlg-tone: #10b981; }
.app-dialog--nudge { animation: app-dialog-nudge 0.3s ease; }
@keyframes app-dialog-nudge {
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.app-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) 0;
}
.app-dialog-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    border: 1px solid transparent;
}
.app-dialog-titles { flex: 1; min-width: 0; padding-top: 2px; }
.app-dialog-title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    word-break: break-word;
}
.app-dialog-subtitle { margin-top: 2px; font-size: var(--text-xs); color: var(--text-light); }
.app-dialog-x {
    border: 0;
    background: transparent;
    color: var(--text-light);
    width: 30px;
    height: 30px;
    border-radius: 0.5rem;
    margin: -4px -6px 0 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.app-dialog-x:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.app-dialog-x:disabled { opacity: 0.4; }

.app-dialog-body {
    padding: var(--space-3) var(--space-5) var(--space-5);
    padding-left: calc(var(--space-5) + 38px + var(--space-3));
    overflow-y: auto;
}
.app-dialog-msg {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-light);
    white-space: pre-line;
    word-break: break-word;
}
.app-dialog-field { margin-top: var(--space-4); }
.app-dialog-msg + .app-dialog-field { margin-top: var(--space-4); }
.app-dialog-body > .app-dialog-field:first-child { margin-top: 0; }
.app-dialog-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.app-dialog-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.02em;
}
.app-dialog-label strong { color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-dialog-count { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.app-dialog-hint { margin-top: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.app-dialog .app-dialog-input {
    background: var(--surface-0);
    border-color: var(--surface-border-strong);
    font-size: var(--text-base);
}
.app-dialog .app-dialog-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(140, 110, 82, 0.22);
    background: var(--surface-0);
    color: var(--text-color);
}
.app-dialog textarea.app-dialog-input { resize: vertical; min-height: 120px; line-height: 1.55; }

.app-dialog-choices { display: flex; flex-direction: column; gap: 6px; }
.app-dialog-choice { position: relative; display: block; cursor: pointer; margin: 0; }
.app-dialog-choice input { position: absolute; opacity: 0; pointer-events: none; }
.app-dialog-choice-body {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border: 1px solid var(--surface-border-strong);
    border-radius: 0.6rem;
    background: var(--surface-0);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.app-dialog-choice-body > i { width: 18px; text-align: center; color: var(--text-light); }
.app-dialog-choice-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-color); }
.app-dialog-choice-desc { display: block; font-size: var(--text-xs); color: var(--text-muted); }
/* Radio marker on the right: the bronze border alone was too close to the
   unselected grey to tell which card was picked. */
.app-dialog-choice-body::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: auto;
    border-radius: 50%;
    border: 1.5px solid var(--surface-border-strong);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.app-dialog-choice:hover .app-dialog-choice-body { border-color: rgba(140, 110, 82, 0.55); }
.app-dialog-choice input:checked + .app-dialog-choice-body {
    border-color: var(--accent-color);
    background: rgba(140, 110, 82, 0.16);
    box-shadow: inset 0 0 0 1px var(--accent-color);
}
.app-dialog-choice input:checked + .app-dialog-choice-body::after {
    border-color: var(--accent-hover);
    background: radial-gradient(circle, var(--accent-hover) 0 3.5px, transparent 4px);
}
.app-dialog-choice input:checked + .app-dialog-choice-body > i { color: var(--accent-hover); }
.app-dialog-choice input:checked + .app-dialog-choice-body .app-dialog-choice-label { color: #fff; }
.app-dialog-choice input:focus-visible + .app-dialog-choice-body { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.app-dialog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.app-dialog-chip {
    border: 1px solid var(--surface-border-strong);
    background: var(--surface-2);
    color: var(--text-light);
    font-size: var(--text-xs);
    padding: 3px 10px;
    border-radius: 999px;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.app-dialog-chip:hover, .app-dialog-chip:focus-visible { border-color: var(--accent-color); color: #fff; outline: none; }

.app-dialog-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-light);
    cursor: pointer;
}
.app-dialog-check input { accent-color: var(--accent-color); width: 15px; height: 15px; }

.app-dialog-details {
    margin-top: var(--space-3);
    border: 1px solid var(--surface-border);
    border-radius: 0.6rem;
    background: var(--surface-0);
    padding: var(--space-2) var(--space-3);
    position: relative;
}
.app-dialog-details summary { font-size: var(--text-xs); color: var(--text-light); cursor: pointer; }
.app-dialog-details pre {
    margin: var(--space-2) 0 0;
    max-height: 200px;
    overflow: auto;
    font-size: 0.72rem;
    color: var(--text-light);
    white-space: pre-wrap;
    word-break: break-word;
}
.app-dialog-copy {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: transparent;
    font-size: var(--text-xs);
    color: var(--accent-hover);
}

.app-dialog-error {
    margin-top: var(--space-3);
    padding: 8px var(--space-3);
    border-radius: 0.55rem;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    font-size: var(--text-xs);
    line-height: 1.5;
}

.app-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--surface-border);
    background: rgba(255, 255, 255, 0.015);
}
.app-dialog-kbd { margin-right: auto; font-size: var(--text-xs); color: var(--text-muted); }
.app-dialog-kbd kbd {
    padding: 1px 5px;
    font-size: 0.68rem;
    background: var(--surface-2);
    border: 1px solid var(--surface-border-strong);
    border-radius: 4px;
    color: var(--text-light);
}
.app-dialog-btn { min-width: 92px; border-radius: 0.5rem; font-size: var(--text-sm); font-weight: 600; padding: 7px 14px; }
.app-dialog .btn-outline-secondary { color: var(--text-light); border-color: var(--surface-border-strong); }
.app-dialog .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: var(--surface-border-strong); }
/* The global .btn-primary override only recolours the resting state, so
   Bootstrap's blue still shows when disabled or pressed. A warning confirm
   uses the same bronze: its amber icon tile and top rule carry the tone, and
   Bootstrap's yellow button read as off-brand. */
.app-dialog .btn-primary,
.app-dialog .btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-bg: var(--accent-color);
    --bs-btn-disabled-border-color: var(--accent-color);
    --bs-btn-focus-shadow-rgb: 140, 110, 82;
}
.app-dialog .app-dialog-btn:disabled { opacity: 0.45; }

@media (max-width: 520px) {
    .app-dialog-overlay { align-items: flex-end; padding: var(--space-2); }
    .app-dialog-body { padding-left: var(--space-5); }
    .app-dialog-foot { flex-wrap: wrap; }
    .app-dialog-foot .app-dialog-btn { flex: 1; }
    .app-dialog-kbd { display: none; }
}


/* ==========================================================================
   WORKSPACE PAGES — company.html and person.html (body.ws-page)
   Hero, KPI strip, tabs, side lists, feeds, Data tab. Moved out of
   company.html so the person workspace shares one copy. Generic class names
   (.back-btn, .tab-badge, .skeleton) are scoped to .ws-page because the deal
   pages define their own.
   ========================================================================== */
.co-hero {
    background: var(--surface-1);
    border-bottom: 1px solid var(--surface-border);
    /* Clears the fixed ~78px navbar, same as .page-hero in styles.css. */
    margin-top: 80px;
    padding: var(--space-5) 0 0;
}

.ws-page .back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-light);
    font-size: var(--text-sm);
    text-decoration: none;
}

.ws-page .back-btn:hover { color: #fff; }

.co-avatar {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    user-select: none;
}

.co-name {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
    overflow-wrap: anywhere;
}

.co-subtitle {
    font-size: var(--text-sm);
    color: var(--text-light);
    margin: 2px 0 0;
}

.co-channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.co-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--surface-border-strong);
    background: var(--surface-2);
    font-size: var(--text-xs);
    color: var(--text-color);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-channel:hover { border-color: var(--accent-color); color: #fff; }
.co-channel i { color: var(--accent-hover); font-size: .7rem; }

.co-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(255, 255, 255, .06);
    color: var(--text-light);
    border: 1px solid transparent;
    white-space: nowrap;
}

.co-pill.is-strong { background: rgba(16, 185, 129, .14); color: #34d399; border-color: rgba(16, 185, 129, .3); }
.co-pill.is-fading { background: rgba(245, 158, 11, .14); color: #fbbf24; border-color: rgba(245, 158, 11, .3); }
.co-pill.is-cold { background: rgba(239, 68, 68, .12); color: #f87171; border-color: rgba(239, 68, 68, .28); }
.co-pill.is-accent { background: rgba(140, 110, 82, .2); color: #E4D2BC; border-color: rgba(140, 110, 82, .4); }

.co-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.co-kpis .kpi-hero-card { padding: var(--space-3) var(--space-4); gap: 2px; min-width: 0; }
.co-kpis .kpi-hero-value { font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-kpis .kpi-hero-context { font-size: var(--text-xs); color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-kpis .kpi-hero-card.is-text .kpi-hero-value { font-size: var(--text-base); font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.co-tabs {
    border-bottom: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: var(--space-5);
    scrollbar-width: none;
}

.co-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: var(--text-light);
    padding: .75rem 1rem;
    font-size: var(--text-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    background: transparent;
}

.co-tabs .nav-link:hover { color: #fff; }
.co-tabs .nav-link.active { color: #fff; border-bottom-color: var(--accent-color); }

.ws-page .tab-badge {
    background: var(--surface-2);
    color: var(--text-light);
    font-size: .65rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: .35rem;
}

.ws-page .nav-link.active .tab-badge { background: var(--accent-color); color: #fff; }

.co-section + .co-section { margin-top: var(--space-4); }

.co-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.co-section-head .dash-section-title--secondary { color: #fff; }
.co-section-head .dash-section-title--secondary i { color: var(--accent-color); opacity: 1; }

.co-muted { color: var(--text-light); font-size: var(--text-sm); }

.co-desc { font-size: var(--text-base); line-height: 1.6; color: var(--text-color); white-space: pre-line; }

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

.co-side-list { list-style: none; margin: 0; padding: 0; }

.co-side-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--surface-border);
    font-size: var(--text-sm);
    min-width: 0;
}

.co-side-list li:last-child { border-bottom: none; }
.co-side-list .co-side-label { color: var(--text-light); flex-shrink: 0; }
.co-side-list .co-side-value { text-align: right; min-width: 0; overflow-wrap: anywhere; }

.co-person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--surface-border);
    text-decoration: none;
    color: var(--text-color);
    min-width: 0;
}

.co-person:last-child { border-bottom: none; }
.co-person:hover .co-person-name { color: #fff; text-decoration: underline; }

.co-initials {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--surface-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-light);
    flex-shrink: 0;
}

.co-person-name { font-size: var(--text-sm); font-weight: 600; }
.co-person-sub { font-size: var(--text-xs); color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.co-empty {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-light);
    font-size: var(--text-sm);
}

.co-empty i { display: block; font-size: 1.4rem; opacity: .45; margin-bottom: var(--space-2); }

.co-toolbar {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

.co-search {
    position: relative;
    flex: 1 1 200px;
    max-width: 320px;
}

.co-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: .75rem;
}

.co-search input { padding-left: 28px; }

.co-filter .btn { font-size: var(--text-xs); }
.co-filter .btn.active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

.dash-table td a.co-row-link { color: #fff; font-weight: 600; text-decoration: none; }
.dash-table td a.co-row-link:hover { text-decoration: underline; }

.co-feed { max-height: 640px; }
.co-feed .dash-feed-item { cursor: pointer; }
.co-feed-actions { display: flex; gap: 4px; flex: none; align-self: center; }

.co-feed-actions .btn {
    padding: 2px 6px;
    font-size: .7rem;
    color: var(--text-light);
    border: none;
    background: transparent;
}

.co-feed-actions .btn:hover { color: #fff; }
.co-feed-actions .btn.is-danger:hover { color: #f87171; }

.co-match {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-left: 6px;
}

.co-log-panel [data-field-group] { display: none; }
.co-log-panel [data-field-group].active { display: block; }

.co-block { margin-top: var(--space-4); }

.co-block > summary {
    list-style: none;
    cursor: pointer;
}

.co-block > summary::-webkit-details-marker { display: none; }

.co-block > summary .co-chevron { transition: transform var(--transition-fast); color: var(--text-light); font-size: .7rem; }
.co-block[open] > summary .co-chevron { transform: rotate(90deg); }
.co-block > summary .co-section-head { margin-bottom: 0; }
.co-block[open] > summary .co-section-head { margin-bottom: var(--space-3); }

.co-data-type {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-light);
    background: var(--surface-2);
    border-radius: 4px;
    padding: 1px 6px;
}

.co-data-preview {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-light);
    font-size: var(--text-sm);
}

.co-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); color: #d8bfa3; overflow-wrap: anywhere; }

textarea.co-json {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-xs);
    min-height: 360px;
    background: var(--surface-0);
}

.ws-page .modal .form-text { color: var(--text-light); }

.co-ai-body { font-size: var(--text-sm); line-height: 1.6; }
.co-ai-body h1, .co-ai-body h2, .co-ai-body h3, .co-ai-body h4 { font-size: var(--text-md); color: #fff; margin-top: var(--space-3); }

.ws-page .skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .05) 75%);
    background-size: 200% 100%;
    animation: ws-skel 1.4s infinite;
    border-radius: 6px;
    height: 16px;
    margin: .4rem 0;
}

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

.co-email-frame { width: 100%; min-height: 420px; border: 0; background: #fff; border-radius: 6px; }

@media (max-width: 575.98px) {
    .co-name { font-size: var(--text-xl); }
    .co-avatar { width: 52px; height: 52px; font-size: 1.3rem; }
    .co-hero-actions { width: 100%; }
    .co-hero-actions .btn { flex: 1 1 auto; }
}


/* ==========================================================================
   CONTACT TAXONOMY — relationship pills, type chips, tag chips
   (static/js/shared/taxonomy.js; colours come from GET /taxonomy)
   ========================================================================== */
.tx-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--tx-color);
    background: var(--tx-bg);
    border: 1px solid var(--tx-border);
}

.tx-pill.is-none { opacity: .75; font-weight: 600; }

.tx-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-color);
    background: var(--surface-2);
    border: 1px solid var(--surface-border-strong);
    white-space: nowrap;
}

.tx-type i { color: var(--accent-hover); font-size: .62rem; }

.tx-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 260px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 500;
    color: var(--tx-color);
    background: var(--tx-bg);
    border: 1px solid var(--tx-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tx-tag-x {
    border: none;
    background: transparent;
    color: inherit;
    padding: 0 0 0 2px;
    line-height: 1;
    font-size: .9rem;
    opacity: .7;
    cursor: pointer;
}

.tx-tag-x:hover { opacity: 1; }
.tx-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Tag input (static/js/shared/tag-input.js) ── */
.tag-input { position: relative; }

.tag-input-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    border-radius: var(--bs-border-radius, 6px);
    border: 1px solid var(--surface-border-strong);
    background: var(--surface-0);
    cursor: text;
}

.tag-input-box:focus-within { border-color: var(--accent-color); box-shadow: 0 0 0 .2rem rgba(140, 110, 82, .2); }
.tag-input-chips { display: contents; }

.tag-input-field {
    flex: 1 1 140px;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-size: var(--text-sm);
    padding: 2px 0;
}

.tag-input-menu {
    display: none;
    position: absolute;
    z-index: 1080;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 300px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--surface-border-strong);
    background: var(--surface-1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    padding: 4px;
}

.tag-input-menu.is-open { display: block; }

.tag-input-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: var(--text-sm);
    color: var(--text-color);
    cursor: pointer;
}

.tag-input-opt.is-active, .tag-input-opt:hover { background: var(--surface-2); color: #fff; }
.tag-input-opt.is-create { color: var(--accent-hover); }
.tag-input-cat { margin-left: auto; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tag-input-exact { font-size: .62rem; color: var(--text-muted); }

.tag-input-hint {
    padding: 6px 10px 8px;
    font-size: var(--text-xs);
    color: #fbbf24;
    border-bottom: 1px solid var(--surface-border);
    margin-bottom: 4px;
}

.tag-input-create { padding: 8px 10px; color: var(--text-color); }
.tag-input-cats { display: flex; flex-wrap: wrap; gap: 6px; }

.tag-input-catbtn {
    border: 1px solid var(--cat);
    color: var(--cat);
    background: transparent;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.tag-input-catbtn:hover { background: var(--cat); color: #111; }

/* ── Person form (static/js/people/person-form.js) ── */
.person-form-modal .form-text { color: var(--text-light); }

.pf-divider {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light);
    border-top: 1px solid var(--surface-border);
    padding-top: var(--space-3);
}

.pf-types { display: flex; flex-wrap: wrap; gap: 6px; }

.pf-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--surface-border-strong);
    background: var(--surface-2);
    color: var(--text-light);
    font-size: var(--text-xs);
    font-weight: 600;
}

.pf-type i { font-size: .65rem; opacity: .8; }
.pf-type:hover { color: #fff; border-color: var(--accent-color); }
.pf-type.is-on { background: rgba(140, 110, 82, .28); border-color: var(--accent-color); color: #fff; }
.pf-link { color: var(--accent-hover); text-decoration: none; font-size: var(--text-xs); }
.pf-more > summary { cursor: pointer; color: var(--text-light); font-size: var(--text-sm); }

.pf-dupes {
    margin-bottom: var(--space-3);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .1);
    color: #fbbf24;
    font-size: var(--text-sm);
}

.pf-dupes a { color: #fde68a; font-weight: 600; }
.meta-editor-modal .form-text { color: var(--text-light); }

/* Person workspace additions (people/person.html) */
.co-avatar.is-person { border-radius: 50%; }
.tx-tag-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 6px; }
.tx-tag-cat { flex: 0 0 auto; min-width: 88px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#cls-types .pf-type { font-size: .66rem; padding: 3px 8px; }

/* ==========================================================================
   PEOPLE DIRECTORY v2 (people/index.html) — relationship/type column, last
   touch column, tag chips, duplicate flag. Every breakpoint lists exactly the
   columns it shows (the old ≤1500px grid had 7 tracks for 8 cells, which
   wrapped the Actions column onto its own line).
   ========================================================================== */
:root {
    --ppl-grid: 34px minmax(220px, 1.55fr) minmax(190px, 1.25fr) minmax(170px, 1.1fr) minmax(130px, 0.9fr) minmax(150px, 1fr) 126px 96px;
}

@media (max-width: 1500px) {
    :root { --ppl-grid: 34px minmax(210px, 1.6fr) minmax(180px, 1.25fr) minmax(160px, 1.1fr) minmax(120px, 0.9fr) minmax(130px, 1fr) 96px; }
    .ppl-col-touch { display: none; }
}

@media (max-width: 1280px) {
    :root { --ppl-grid: 34px minmax(200px, 1.6fr) minmax(170px, 1.2fr) minmax(150px, 1.1fr) minmax(120px, 1fr) 96px; }
    .ppl-col-company { display: none; }
}

@media (max-width: 1050px) {
    :root { --ppl-grid: 34px minmax(190px, 1.7fr) minmax(160px, 1.2fr) minmax(140px, 1fr) 96px; }
    .ppl-col-tags { display: none; }
}

@media (max-width: 860px) {
    :root { --ppl-grid: 34px minmax(170px, 1fr) 96px; }
    .ppl-col-rel, .ppl-col-channels { display: none; }
}

.ppl-col-rel .tx-row { gap: 4px; }
.ppl-col-rel .tx-type { font-size: .62rem; padding: 1px 6px; }
.ppl-col-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ppl-tagbtn { border: none; background: none; padding: 0; max-width: 100%; cursor: pointer; }
.ppl-tagbtn .tx-tag { max-width: 150px; }
.ppl-tagbtn:hover .tx-tag { filter: brightness(1.25); }
.ppl-col-touch { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ppl-li-status { font-size: .66rem; color: var(--text-light); white-space: nowrap; }
.ppl-li-status i { color: #4E8FD8; }
.ppl-title-text { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.ppl-dup-flag {
    border: 1px solid rgba(245, 158, 11, .45);
    background: rgba(245, 158, 11, .12);
    color: #fbbf24;
    border-radius: 6px;
    font-size: .6rem;
    padding: 1px 5px;
    line-height: 1.4;
    cursor: pointer;
}

.ppl-bulk-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Duplicates review + merge dialog (static/js/people/merge-dialog.js) ── */
.merge-group {
    border: 1px solid var(--surface-border-strong);
    border-radius: 10px;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--surface-1);
}

.merge-group-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.merge-why { font-size: var(--text-xs); font-weight: 600; color: #fbbf24; text-transform: uppercase; letter-spacing: .05em; }
.merge-group-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }

.merge-person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-color);
    text-decoration: none;
    font-size: var(--text-sm);
    min-width: 0;
}

.merge-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.merge-person:hover { outline: 1px solid var(--accent-color); color: #fff; }
.merge-table th[scope="row"] { color: var(--text-light); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
.merge-table td, .merge-table th { vertical-align: top; }
.merge-table tr.is-conflict th[scope="row"] { color: #fbbf24; }
.merge-conflict-badge { display: inline-block; font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; border: 1px solid rgba(245, 158, 11, .45); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.merge-cell { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; padding: 3px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.merge-cell.is-chosen { background: rgba(140, 110, 82, .22); color: #fff; }
.merge-keep { display: flex; gap: 6px; align-items: center; cursor: pointer; font-size: var(--text-sm); }
.merge-keep.is-kept { color: #fff; font-weight: 700; }

.merge-summary {
    padding: var(--space-3);
    border-radius: 8px;
    background: rgba(78, 143, 216, .1);
    border: 1px solid rgba(78, 143, 216, .3);
    font-size: var(--text-sm);
    color: var(--text-color);
}

/* Deal team roles (deal-relations.js): registry role + side + detail */
.dr-role--sided { color: var(--tx-color); background: var(--tx-bg); border-color: var(--tx-border); }
.dr-side { margin-left: 5px; padding-left: 5px; border-left: 1px solid currentColor; opacity: .8; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; }
.dr-add-line .form-select { min-width: 0; }
.dr-role-editor {
    display: flex; flex-direction: column; gap: 6px; padding: 8px; margin: -2px 0 4px;
    border: 1px solid var(--surface-border-strong); border-radius: 8px; background: rgba(255, 255, 255, .03);
}

/* ==========================================================================
   Task kit (static/js/shared/task-kit.js): deal Tasks tab, tasks page, editor,
   JSON import and AI suggestions. Shared dash-* tokens only.
   ========================================================================== */
.tk-bar { position: relative; flex: 1 1 auto; min-width: 48px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.tk-bar > span { display: block; height: 100%; border-radius: inherit; transition: width .35s ease; }
.tk-bar-label { font-size: var(--text-xs); color: var(--text-light); min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.tk-label { display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-bottom: var(--space-1); }
.tk-hint { font-size: var(--text-xs); color: var(--text-light); font-weight: 400; text-transform: none; letter-spacing: normal; }
.tk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }

.tk-status, .tk-pri { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600;
    color: var(--tk-c); background: color-mix(in srgb, var(--tk-c) 14%, transparent); white-space: nowrap; }
.tk-status i { font-size: .7em; }
.tk-due { font-size: var(--text-xs); color: var(--text-light); white-space: nowrap; }
.tk-due i { margin-right: 4px; }
.tk-due.is-overdue { color: #f87171; font-weight: 600; }
.tk-record, .tk-source { font-size: var(--text-xs); color: var(--text-light); }

/* Record task list */
.tk-toolbar { display: flex; gap: var(--space-3); justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.tk-quick-add { position: relative; flex: 1 1 280px; }
.tk-quick-add i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-xs); }
.tk-quick-add .form-control { padding-left: 32px; background: var(--surface-0); border-color: var(--surface-border-strong); }
.tk-summary { background: var(--surface-0); border: 1px solid var(--surface-border); border-radius: .75rem; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.tk-summary .tk-bar { display: block; }
.tk-summary-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.tk-summary-pct { font-size: var(--text-xl); font-weight: 700; color: var(--text-color); font-variant-numeric: tabular-nums; }
.tk-summary-stats { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-light); }
.tk-summary-stats strong { color: var(--text-color); }
.tk-group { margin-bottom: var(--space-4); }
.tk-group-head { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light);
    padding: 0 var(--space-1) var(--space-2); border-bottom: 1px solid var(--surface-border); margin-bottom: var(--space-1); }
.tk-group-head span { margin-left: 6px; opacity: .6; font-weight: 500; }
.tk-row { display: grid; grid-template-columns: auto 1fr minmax(90px, 140px) auto; gap: var(--space-3); align-items: start;
    padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--surface-border); }
.tk-row:hover { background: var(--accent-light); }
.tk-row.is-done .tk-title { color: var(--text-light); text-decoration: line-through; }
.tk-row.is-closed { opacity: .6; }
.tk-check, .tk-more, .tk-title, .tk-steps-toggle, .tk-status-btn { background: none; border: 0; padding: 0; color: inherit; text-align: left; }
.tk-check { font-size: 1.15rem; color: var(--text-light); line-height: 1.4; }
.tk-check:hover, .tk-row.is-done .tk-check { color: #22c55e; }
.tk-title { font-size: var(--text-base); font-weight: 600; color: var(--text-color); cursor: pointer; }
.tk-title:hover { color: var(--accent-hover); }
.tk-title-line { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.tk-steps-toggle { font-size: var(--text-xs); color: var(--text-light); display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.tk-meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: 3px; }
.tk-status-btn { display: inline-flex; align-items: center; font-size: var(--text-xs); color: var(--text-light); cursor: pointer; }
.tk-steps { margin-top: var(--space-2); display: grid; gap: 4px; }
.tk-step { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--text-color); cursor: pointer; }
.tk-step .is-done { color: var(--text-light); text-decoration: line-through; }
.tk-prog { display: flex; align-items: center; gap: var(--space-2); padding-top: 6px; }
.tk-prog .tk-bar { height: 6px; }
.tk-more { color: var(--text-light); padding: 2px 6px; cursor: pointer; }
.tk-empty { text-align: center; color: var(--text-light); padding: var(--space-8) var(--space-4); display: grid; gap: var(--space-1); }
.tk-empty > i { font-size: 1.6rem; opacity: .35; margin-bottom: var(--space-2); }
.tk-closed-toggle { font-size: var(--text-xs); color: var(--text-light); }
@media (max-width: 640px) {
    .tk-row { grid-template-columns: auto 1fr auto; }
    .tk-prog { grid-column: 2 / 3; padding-top: 0; }
}

/* Modals */
.tk-modal .modal-content { background: var(--surface-1); border: 1px solid var(--surface-border-strong); color: var(--text-color); }
.tk-modal .modal-header, .tk-modal .modal-footer { border-color: var(--surface-border); }
.tk-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tk-chip { font-size: var(--text-xs); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--surface-border-strong); background: none; color: var(--text-light); }
.tk-chip:hover { color: var(--text-color); border-color: var(--accent-color); }
.tk-checklist-edit { display: grid; gap: 4px; margin-top: var(--space-2); }
.tk-check-row { display: flex; gap: var(--space-2); align-items: center; }
.tk-check-row .form-control { background: var(--surface-0); }
.tk-locked { padding: var(--space-2) var(--space-3); background: var(--surface-0); border: 1px solid var(--surface-border); border-radius: .5rem; font-size: var(--text-sm); }
.tk-side { background: var(--surface-0); border: 1px solid var(--surface-border); border-radius: .75rem; padding: var(--space-4); }
.tk-fields { width: 100%; font-size: var(--text-xs); color: var(--text-light); }
.tk-fields td { padding: 3px 6px 3px 0; vertical-align: top; }
.tk-fields td:first-child { white-space: nowrap; }
.tk-prompt { white-space: pre-wrap; font-size: var(--text-xs); color: var(--text-color); background: var(--surface-1); border: 1px solid var(--surface-border);
    border-radius: .5rem; padding: var(--space-3); max-height: 180px; overflow: auto; margin-bottom: var(--space-2); }
.tk-report { max-height: 260px; overflow: auto; border: 1px solid var(--surface-border); border-radius: .5rem; }
.tk-report td, .tk-report th { font-size: var(--text-xs); }
.tk-report tr.is-error td { background: rgba(239, 68, 68, .08); }
.tk-report tr.is-warn td { background: rgba(245, 158, 11, .06); }
.tk-ai-card { display: flex; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--surface-border); border-radius: .75rem; margin-bottom: var(--space-2); cursor: pointer; }
.tk-ai-card:has(.tk-ai-pick:checked) { border-color: var(--accent-color); background: var(--accent-light); }
.tk-ai-card .tk-ai-title { font-weight: 600; background: transparent; border-color: transparent; padding-left: 0; }
.tk-ai-card .tk-ai-title:focus { background: var(--surface-0); border-color: var(--surface-border-strong); padding-left: 8px; }
.tk-ai-meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-1); }
.tk-ai-desc { font-size: var(--text-sm); color: var(--text-color); margin-bottom: var(--space-1); }
.tk-ai-steps { font-size: var(--text-sm); color: var(--text-light); margin: 0 0 var(--space-1); padding-left: 1.1rem; }
/* Tasks page rows (tasks/index.html) on top of the .tsk-* list */
.tsk-row { align-items: flex-start; }
.tsk-row.is-closed .tsk-row-title { color: var(--text-light); text-decoration: line-through; }
.tsk-row-status-dot { margin-top: 6px; flex: 0 0 auto; }
.tsk-row-sub { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: 2px; font-size: var(--text-xs); color: var(--text-light); }
.tsk-row-record { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.tsk-row-prog { margin-top: 6px; display: flex; }
.tsk-row-prog .tk-bar { display: block; }
.tsk-row-meta { flex-direction: column; align-items: flex-end; gap: 4px; }
.tsk-group-header { display: flex; align-items: center; gap: var(--space-1); }
.tsk-group-prog { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); width: 110px; text-transform: none; letter-spacing: normal; font-weight: 500; }
.tsk-group-prog .tk-bar { display: block; }
.tsk-detail-pct { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.tsk-detail-steps { display: grid; gap: 6px; margin-top: var(--space-3); }
.tsk-ai-modes { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tsk-linked-entity[data-href] { cursor: pointer; }

/* Task tracking (task-kit.js): codes, kinds, document stages, dependencies, owner */
.tk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); font-weight: 700;
    color: var(--accent-hover, #A88060); background: var(--accent-light); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.tk-kind, .tk-wait, .tk-owner { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-light); white-space: nowrap; }
.tk-kind i, .tk-owner i { opacity: .7; }
.tk-wait { color: #fbbf24; }
.tk-stage { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600;
    color: var(--tk-c); border: 1px solid color-mix(in srgb, var(--tk-c) 40%, transparent); white-space: nowrap; }
.tk-stage i { font-size: .7em; }
.tk-group-select { width: auto; min-width: 150px; }
.tk-stepper { display: flex; flex-wrap: wrap; gap: 4px; }
.tk-step-btn { font-size: var(--text-xs); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--surface-border-strong);
    background: none; color: var(--text-light); }
.tk-step-btn:hover { border-color: var(--accent-color); color: var(--text-color); }
.tk-step-btn.is-past { color: var(--text-color); border-color: color-mix(in srgb, #22c55e 45%, transparent); }
.tk-step-btn.is-current { background: var(--accent-color); border-color: var(--accent-color); color: #fff; font-weight: 600; }
.tk-step-btn.is-aside { margin-left: auto; border-style: dashed; }
.tk-deps { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; align-items: center; margin-bottom: var(--space-2); }
.tk-dep-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); padding: 2px 4px 2px 8px; border-radius: 999px;
    background: var(--surface-0); border: 1px solid var(--surface-border-strong); color: var(--text-color); max-width: 100%; }
.tk-dep-chip b { color: var(--accent-hover, #A88060); }
.tk-dep-chip.is-done { opacity: .6; text-decoration: line-through; }
.tk-dep-chip button { background: none; border: 0; color: var(--text-light); padding: 0 4px; }
.tk-dep-search { position: relative; }
.tk-dep-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 240px; overflow: auto; margin-top: 2px;
    background: var(--surface-1); border: 1px solid var(--surface-border-strong); border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.tk-dep-hit { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px; font-size: var(--text-sm); color: var(--text-color); }
.tk-dep-hit:hover { background: var(--accent-light); }
.tk-dep-hit b { color: var(--accent-hover, #A88060); }

/* Deal Tasks tab: the diligence checklist (requirement tasks) */
.tk-dil { margin-top: var(--space-6); padding: var(--space-4); background: var(--surface-0); border: 1px solid var(--surface-border); border-radius: .75rem; }
.tk-dil > .tk-bar { display: block; margin: var(--space-2) 0 var(--space-3); }
.tk-dil-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.tk-dil-score { font-size: var(--text-sm); color: var(--text-light); }
.tk-dil-score strong { color: var(--text-color); font-size: var(--text-lg); }
.tk-dil-cat { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light);
    margin: var(--space-3) 0 var(--space-1); padding-bottom: 4px; border-bottom: 1px solid var(--surface-border); }
.tk-dil-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: start; padding: 6px 2px; border-bottom: 1px solid var(--surface-border); }
.tk-dil-row > i { margin-top: 4px; }
.tk-dil-row.is-waived .tk-title { color: var(--text-light); text-decoration: line-through; }
.tk-dil-main .tk-title { font-size: var(--text-sm); font-weight: 500; }
.tk-dil-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tk-dil-file { font-size: var(--text-xs); background: none; border: 0; padding: 0; color: var(--text-light); max-width: 260px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-dil-file:hover { color: var(--accent-hover, #A88060); text-decoration: underline; }
.tk-dil-actions { display: flex; gap: 4px; align-items: center; }
.tk-dil-actions .btn-xs { padding: 1px 7px; font-size: .7rem; }

/* Record files (record-files.js) */
.rf-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.rf-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--surface-border); }
.rf-row > i { width: 18px; text-align: center; }
.rf-main { min-width: 0; }
.rf-name { background: none; border: 0; padding: 0; color: var(--text-color); font-size: var(--text-sm); font-weight: 500; text-align: left;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rf-name:hover { color: var(--accent-hover, #A88060); }
.rf-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-light); }
.rf-linked { color: #93c5fd; }
.rf-actions { display: flex; gap: 2px; white-space: nowrap; }

/* Dataroom picker (dataroom-picker.js) */
.drp-crumbs { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; font-size: var(--text-sm); min-width: 0; }
.drp-crumb { background: none; border: 0; padding: 2px 4px; color: var(--accent-hover, #A88060); border-radius: 4px; }
.drp-crumb:hover { background: var(--accent-light); }
.drp-sep { color: var(--text-light); }
.drp-list { border: 1px solid var(--surface-border); border-radius: .5rem; max-height: 55vh; overflow: auto; }
.drp-row { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--space-2); align-items: center; width: 100%; text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--surface-border); padding: 7px 10px; color: var(--text-color); font-size: var(--text-sm); }
.drp-row:hover { background: var(--accent-light); }
.drp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drp-meta { font-size: var(--text-xs); color: var(--text-light); white-space: nowrap; }
.drp-room-select { max-width: 320px; }
.drp-search { max-width: 240px; }
@media (max-width: 576px) { .drp-room-select, .drp-search { max-width: none; } }

/* Task detail (tasks page): markdown brief, tracker facts, dependencies, files */
.tsk-description.is-md { white-space: normal; }
.tsk-description.is-md h3, .tsk-description.is-md h4, .tsk-description.is-md h5 { font-size: var(--text-base); font-weight: 700; margin: var(--space-3) 0 var(--space-1); }
.tsk-description.is-md p { margin: 0 0 var(--space-2); }
.tsk-description.is-md ul, .tsk-description.is-md ol { margin: 0 0 var(--space-2); padding-left: 1.25rem; }
.tsk-description.is-md blockquote { margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3); border-left: 3px solid var(--accent-color); color: var(--text-light); }
.tsk-description.is-md table { font-size: var(--text-xs); margin-bottom: var(--space-2); border-collapse: collapse; }
.tsk-description.is-md th, .tsk-description.is-md td { border: 1px solid var(--surface-border); padding: 3px 6px; }
.tsk-description.is-md code { font-size: .9em; }
.tsk-description.is-md a { color: var(--accent-hover, #A88060); }
.tsk-track-line { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-light); }
.tsk-dep-list { display: grid; gap: 4px; }
.tsk-dep-item { display: flex; gap: var(--space-2); align-items: center; background: none; border: 0; padding: 4px 6px; border-radius: 6px; text-align: left;
    color: var(--text-color); font-size: var(--text-sm); }
.tsk-dep-item:hover { background: var(--accent-light); }
.tsk-dep-item.is-done { opacity: .6; }
.tsk-note { border-bottom: 1px solid var(--surface-border); padding: var(--space-2) 0; font-size: var(--text-sm); }
.tsk-note-meta { font-size: var(--text-xs); color: var(--text-light); }

/* Obligations register (obligations-kit.js) */
.ob-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.ob-total { background: var(--surface-0); border: 1px solid var(--surface-border); border-radius: .75rem; padding: var(--space-3); }
.ob-total--bad { border-color: rgba(239, 68, 68, .5); }
.ob-total-cur { font-size: var(--text-xs); color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ob-total-val { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-color); }
.ob-total-val--sm { font-size: var(--text-sm); }
.ob-total-sub { font-size: var(--text-xs); color: var(--text-light); }
.ob-group-sum { margin-left: auto !important; float: right; text-transform: none; letter-spacing: normal; font-weight: 600; opacity: 1 !important; color: var(--text-color); }
.ob-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--surface-border); }
.ob-row.is-closed { opacity: .55; }
.ob-title-line { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.ob-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-light); margin-top: 3px; }
.ob-meta a { color: var(--accent-hover, #A88060); }
.ob-notes { font-size: var(--text-sm); color: var(--text-color); margin-top: var(--space-1); white-space: pre-wrap; }
.ob-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 190px; }
.ob-balance { font-size: var(--text-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-due { font-size: var(--text-xs); color: var(--text-light); white-space: nowrap; }
.ob-due.is-soon { color: #fbbf24; font-weight: 600; }
.ob-due.is-overdue { color: #f87171; font-weight: 700; }
.ob-actions { display: flex; gap: 4px; margin-top: 4px; }
.ob-actions .btn-xs { padding: 1px 7px; font-size: .7rem; }
.ob-pays { margin-top: var(--space-1); font-size: var(--text-xs); }
.ob-pays summary { color: var(--text-light); cursor: pointer; }
.ob-pay { display: grid; grid-template-columns: 110px 130px 1fr auto; gap: var(--space-2); padding: 2px 0; }
@media (max-width: 640px) { .ob-row { grid-template-columns: 1fr; } .ob-side { align-items: flex-start; text-align: left; } }

/* ── Settings → Calendar (static/js/settings/calendar.js) ── */
.calset-days { display: flex; flex-wrap: wrap; gap: 6px; }
.calset-day { margin: 0; cursor: pointer; }
.calset-day input { position: absolute; opacity: 0; pointer-events: none; }
.calset-day span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 34px; padding: 0 10px;
    border: 1px solid var(--surface-border-strong); border-radius: 8px; color: var(--text-light); font-size: var(--text-sm); font-weight: 600;
}
.calset-day input:checked + span { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
.calset-day input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-light); }
.calset-table td { padding: 10px 8px; border-bottom: 1px solid var(--surface-border); background: transparent; }
.calset-table tr:last-child td { border-bottom: none; }
/* Settings → Cache → lifetimes table (static/js/settings/cache.js) */
.cacheset-cell { width: 150px; min-width: 120px; }
.calset-color { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--surface-border-strong); border-radius: 8px; background: none; cursor: pointer; }
.calset-layer-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.calset-layer-name i { color: var(--text-light); width: 16px; text-align: center; }

/* ── SETTINGS → NETWORK (static/js/settings/network.js) ──────────────────── */
.netset-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.netset-jump a {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--surface-border-strong); color: var(--text-light); font-size: var(--text-xs); text-decoration: none;
}
.netset-jump a:hover { color: #fff; border-color: var(--accent-color); }
.netset-card { scroll-margin-top: 90px; }
.netset-chips .calset-day span { min-width: 0; height: 30px; font-size: var(--text-xs); }
.netset-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.netset-weight-group { background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: 10px; padding: 10px 12px; }
.netset-weight-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; margin-bottom: 6px; font-size: var(--text-sm); }
.netset-weight-head i { color: var(--text-light); width: 16px; text-align: center; }
.netset-weight { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; font-size: var(--text-xs); color: var(--text-light); }
.netset-weight input { width: 78px; text-align: right; }
.netset-preview { background: var(--surface-2); border: 1px solid var(--surface-border); border-radius: 10px; padding: 10px 12px; }
.netset-preview-table td, .netset-preview-table th { background: transparent; font-size: var(--text-sm); }
.netset-delta { font-variant-numeric: tabular-nums; color: var(--text-light); }
.netset-delta.is-up { color: #34d399; }
.netset-delta.is-down { color: #f87171; }
.netset-people { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.netset-person {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--text-xs);
    background: rgba(140, 110, 82, .2); border: 1px solid rgba(140, 110, 82, .55); color: #fff;
}
.netset-person button { background: none; border: 0; color: inherit; padding: 0; line-height: 1; opacity: .7; }
.netset-person button:hover { opacity: 1; }
.netset-run { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--surface-border); }
.netset-run > span:first-child { min-width: 54px; color: #34d399; font-weight: 600; }
.netset-run.is-failed > span:first-child { color: #f87171; }

/* ── NETWORK (network/index.html, static/js/network/*) ───────────────────── */
.net-tabs { border-bottom: 1px solid var(--surface-border); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.net-tabs .nav-link { color: var(--text-light); border: 0; border-bottom: 2px solid transparent; white-space: nowrap; background: none; }
.net-tabs .nav-link:hover { color: #fff; }
.net-tabs .nav-link.active { color: #fff; border-bottom-color: var(--accent-color); background: none; }
.net-run { color: var(--text-light); }
.net-status {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700;
    color: #fff; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
    white-space: nowrap;
}
.net-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.net-warmth { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; }
.net-warmth-track { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; min-width: 60px; }
.net-warmth-track > span { display: block; height: 100%; border-radius: 4px; background: var(--c, var(--accent-color)); }
.net-warmth-num { font-variant-numeric: tabular-nums; font-weight: 700; color: #fff; min-width: 24px; text-align: right; font-size: var(--text-sm); }
.net-trend { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.net-trend.is-up { color: #34d399; }
.net-trend.is-down { color: #f87171; }
.net-chan {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
    color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-size: .66rem; margin-right: 3px;
}
.net-chart { position: relative; height: 240px; }
.net-rows { display: flex; flex-direction: column; }
.net-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--surface-border);
    color: inherit; text-decoration: none; border-radius: 6px;
}
.net-row:hover { background: var(--surface-2); color: inherit; }
.net-row:last-child { border-bottom: 0; }
.net-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.net-row-name { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-row-sub { color: var(--text-light); font-size: var(--text-xs); }
.net-row-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.net-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.net-why { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; }
.net-why.is-overdue { color: #fbbf24; }
.net-why.is-cooling { color: #f87171; }
.net-feed { max-height: 520px; overflow-y: auto; }
.net-feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--surface-border); color: inherit; text-decoration: none; }
.net-feed-row:hover { background: var(--surface-2); color: inherit; }
.net-feed-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.net-feed-title { color: #fff; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-feed-sub { color: var(--text-light); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-feed-when { color: var(--text-light); font-size: var(--text-xs); white-space: nowrap; }
.net-toolbar .co-search { min-width: 200px; }
.net-status-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.net-status-chip { margin: 0; cursor: pointer; }
.net-status-chip input { position: absolute; opacity: 0; pointer-events: none; }
.net-status-chip span {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--text-xs); color: var(--text-light);
    border: 1px solid var(--surface-border-strong);
}
.net-status-chip span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.net-status-chip span b { color: #fff; font-weight: 700; }
.net-status-chip input:checked + span { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); }
.net-status-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-light); }
.net-bulk {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
}
.net-table td, .net-table th { white-space: normal; }
.net-table tbody tr { cursor: pointer; }
.net-check { width: 32px; }
.net-cell-sub { color: var(--text-light); font-size: var(--text-xs); }
.net-pills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.net-chans { white-space: nowrap; }
.net-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.net-sort.is-on { color: #fff; }
.net-overdue { color: #fbbf24; }

/* Entity panel */
body.net-panel-open { overflow: hidden; }
.net-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; }
.net-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 1045; background: var(--surface-1);
    border-left: 1px solid var(--surface-border-strong); box-shadow: -12px 0 40px rgba(0,0,0,.45);
    transform: translateX(100%); transition: transform .18s ease; overflow-y: auto;
}
.net-panel.is-open { transform: translateX(0); }
.net-panel-inner { padding: 0 0 var(--space-6); }
.net-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; position: sticky; top: 0; background: var(--surface-1); z-index: 2; border-bottom: 1px solid var(--surface-border); }
.net-panel-kicker { color: var(--text-light); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.net-panel-head h2 { color: #fff; font-size: 1.35rem; font-weight: 700; margin: 2px 0 0; word-break: break-word; }
.net-panel-sub a { color: var(--text-light); font-size: var(--text-sm); }
.net-panel-score { padding: 16px 20px 6px; }
.net-big { font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; min-width: 64px; }
.net-breakbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-top: 14px; background: rgba(255,255,255,.06); }
.net-breakbar > span { display: block; height: 100%; background: var(--c); }
.net-breaklegend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: var(--text-xs); color: var(--text-light); }
.net-breaklegend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 5px; }
.net-breakdetail { margin-top: 8px; font-size: var(--text-xs); }
.net-breakdetail summary { color: var(--text-light); cursor: pointer; }
.net-breakdetail td { background: transparent; font-size: var(--text-xs); }
.net-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 10px 20px; border-radius: 10px; overflow: hidden; background: var(--surface-border); }
.net-fact { background: var(--surface-2); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.net-fact span { color: var(--text-light); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.net-fact strong { color: #fff; font-size: var(--text-sm); font-weight: 600; }
.net-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 20px 4px; }
.net-psec { margin: 14px 20px 0; padding-top: 12px; border-top: 1px solid var(--surface-border); }
.net-psec h3 { font-size: var(--text-sm); font-weight: 700; color: #fff; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.net-psec h3 i { color: var(--text-light); width: 16px; text-align: center; }
.net-owners { list-style: none; margin: 0; padding: 0; }
.net-owners li { display: flex; justify-content: space-between; padding: 3px 0; font-size: var(--text-sm); }
.net-edges { list-style: none; margin: 0; padding: 0; }
.net-edge { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--surface-border); }
.net-edge:last-child { border-bottom: 0; }
.net-edge-main { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: var(--text-sm); }
.net-edge-main a { color: #fff; text-decoration: none; }
.net-edge-main a:hover { text-decoration: underline; }
.net-edge-sub { color: var(--text-light); font-size: var(--text-xs); overflow-wrap: anywhere; }
.net-edge-strength { font-variant-numeric: tabular-nums; color: var(--text-light); font-size: var(--text-xs); }
.net-tl { list-style: none; margin: 0; padding: 0; }
.net-tl-month { color: var(--text-light); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 10px 0 4px; }
.net-tl-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--surface-border); }
.net-tl-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.net-tl-title { color: #fff; font-size: var(--text-sm); overflow-wrap: anywhere; }
.net-tl-sub { color: var(--text-light); font-size: var(--text-xs); }
.net-tl-when { color: var(--text-light); font-size: var(--text-xs); white-space: nowrap; }
.net-paths-mini { padding-left: 1.1rem; margin-bottom: 6px; color: #fff; }
.net-paths-mini li { margin-bottom: 4px; }
@media (max-width: 576px) {
    .net-facts { grid-template-columns: repeat(2, 1fr); }
    .net-row { flex-direction: column; align-items: flex-start; }
    .net-row-side { flex-direction: row; align-items: center; }
}
/* Relationship card on the person/company workspaces (shared/relationship-card.js) */
.net-big--sm { font-size: 2rem; min-width: 48px; }
.net-mix { display: flex; flex-wrap: wrap; gap: 6px; }
.net-mix-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs);
    color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.net-card-sub { border-top: 1px solid var(--surface-border); padding-top: 8px; }
/* Network graph and paths (view-graph.js, view-paths.js) */
.net-graph-card { overflow: hidden; position: relative; }
.net-graph { height: 620px; width: 100%; position: relative; background: radial-gradient(circle at 50% 45%, rgba(140,110,82,.06), transparent 70%); }
.net-graph svg line { stroke-linecap: round; }
.net-graph-label { fill: var(--text-light); font-size: 10px; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; }
.net-graph-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-light); }
.net-graph-legend { position: absolute; left: 12px; bottom: 34px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 70%; font-size: var(--text-xs); color: var(--text-light);
    background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 8px; }
.net-graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.net-graph-note { position: absolute; left: 8px; bottom: 6px; right: 8px; color: var(--text-light); font-size: var(--text-xs); pointer-events: none; }
.net-graph-note:empty { display: none; }
.net-shape { display: inline-block; width: 10px; height: 10px; background: #2a2a2a; border: 1.5px solid var(--text-light); }
.net-shape.is-circle { border-radius: 50%; }
.net-shape.is-diamond { transform: rotate(45deg) scale(.85); }
.net-shape.is-triangle { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--text-light); border-top: 0; background: none; }
.net-ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); }
.net-ring.is-team { border-color: var(--accent-color); background: var(--accent-color); }
.net-graph-name { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 4px 0 8px; word-break: break-word; }
.net-graph-center { min-width: 240px; flex: 1; }
.net-graph-range { min-width: 150px; }
.net-hop { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--surface-border-strong);
    color: #fff; font-size: var(--text-sm); text-decoration: none; }
.net-hop i { color: var(--text-light); font-size: .7rem; }
a.net-hop:hover { border-color: var(--accent-color); color: #fff; }
.net-hop.is-team { background: color-mix(in srgb, var(--accent-color) 25%, transparent); border-color: var(--accent-color); }
.net-hop-sep { color: var(--text-light); margin: 0 6px; font-size: .7rem; }
.net-path { margin-bottom: 12px; }
.net-path-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.net-path-score { font-size: 1.4rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.net-path-story { margin: 10px 0 6px; padding-left: 1.2rem; color: var(--text-color); font-size: var(--text-sm); }
.net-path-links { list-style: none; padding: 0; margin: 6px 0 0; }
.net-path-links li { padding: 4px 0; border-bottom: 1px solid var(--surface-border); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.net-intro-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--surface-border); }
@media (max-width: 576px) { .net-graph { height: 440px; } .net-graph-legend { display: none; } }
/* ── CAPITAL SOURCING (shared/capital-kit.js: Network → Capital, deal Components tab) ── */
.cap-kit { display: flex; flex-direction: column; gap: var(--space-5, 20px); }
.cap-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-radius: 10px; overflow: hidden; background: var(--surface-border); }
.cap-tile { background: var(--surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap-tile span { color: var(--text-light); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.cap-tile strong { color: #fff; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cap-tile em { color: var(--text-light); font-size: var(--text-xs); font-style: normal; }
.cap-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cap-section-head h6 { color: #fff; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.cap-line { color: #fff; font-weight: 600; }
.cap-sub { color: var(--text-light); font-size: var(--text-xs); }
.cap-needs tr.is-muted td:not(.cap-skip) { opacity: .55; }
.cap-skip { color: var(--text-light); font-size: var(--text-xs); }
.cap-opt { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-light);
    border: 1px solid var(--surface-border-strong); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.cap-type { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
    color: #93c5fd; background: rgba(78,143,216,.16); }
.cap-type.is-equity { color: #86efac; background: rgba(63,166,122,.16); }
.cap-cov { display: flex; align-items: center; gap: 8px; }
.cap-cov-track { flex: 1; display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.07); min-width: 60px; }
.cap-cov-track .is-hard { background: #3FA67A; }
.cap-cov-track .is-soft { background: rgba(180,154,60,.75); }
.cap-cov-pct { color: #fff; font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.cap-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.cap-col { background: var(--surface-2); border-radius: 10px; border-top: 3px solid var(--c); padding: 8px; min-width: 0; display: flex; flex-direction: column; }
.cap-col-head { display: flex; justify-content: space-between; color: #fff; font-weight: 700; font-size: var(--text-sm); }
.cap-col-head b { color: var(--text-light); font-weight: 700; }
.cap-col-sum { color: var(--text-light); font-size: var(--text-xs); margin-top: 2px; }
.cap-col-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cap-col-empty { color: var(--text-light); text-align: center; font-size: var(--text-xs); padding: 8px 0; }
.cap-card { background: var(--surface-1); border: 1px solid var(--surface-border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.cap-card.is-editing { border-color: var(--accent-color); }
.cap-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.cap-card-name { color: #fff; font-weight: 600; font-size: var(--text-sm); text-decoration: none; word-break: break-word; }
a.cap-card-name:hover { color: var(--accent-color); }
.cap-card-sub { color: var(--text-light); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cap-card-sub a { color: var(--text-light); }
.cap-card-amt { color: #fff; font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.cap-card-note { color: var(--text-light); font-size: var(--text-xs); white-space: pre-wrap; max-height: 4.5em; overflow: hidden; }
.cap-card-foot { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.cap-card-foot select { flex: 1; min-width: 0; }
.cap-warm { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; color: var(--text-light); font-variant-numeric: tabular-nums; flex: none; }
.cap-warm i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); display: inline-block; }
.cap-finder { border-top: 1px solid var(--surface-border); padding-top: var(--space-4, 16px); }
.cap-cands { display: flex; flex-direction: column; }
.cap-cand { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--surface-border); }
.cap-cand:last-child { border-bottom: 0; }
.cap-cand-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cap-cand-name a { color: #fff; font-weight: 600; text-decoration: none; }
.cap-cand-name a:hover { color: var(--accent-color); }
.cap-why { display: flex; flex-wrap: wrap; gap: 4px; }
.cap-why span { font-size: .68rem; color: var(--text-color); background: rgba(255,255,255,.06); border-radius: 6px; padding: 1px 7px; }
.cap-cand-sub { font-size: var(--text-xs); }
.cap-reach { color: #86efac; }
.cap-reach.is-cold { color: var(--text-light); }
.cap-cand-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.cap-score { display: flex; flex-direction: column; align-items: flex-end; }
.cap-score strong { color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cap-score span { color: var(--text-light); font-size: .66rem; white-space: nowrap; }
.cap-deals { display: flex; flex-direction: column; max-height: 640px; overflow-y: auto; }
.cap-deal { display: flex; flex-direction: column; gap: 3px; padding: 9px 8px; border-radius: 8px; color: inherit; text-decoration: none; border: 1px solid transparent; }
.cap-deal:hover { background: var(--surface-2); color: inherit; }
.cap-deal.is-active { background: var(--surface-2); border-color: var(--accent-color); }
.cap-deal-name { color: #fff; font-weight: 600; font-size: var(--text-sm); }
.cap-deal-sub { color: var(--text-light); font-size: var(--text-xs); text-transform: none; }
.cap-deal-bar { height: 5px; margin-top: 3px; }
@media (max-width: 768px) {
    .cap-summary { grid-template-columns: repeat(2, 1fr); }
    .cap-cand { flex-direction: column; }
    .cap-cand-side { flex-direction: row; align-items: center; justify-content: space-between; }
    .cap-deals { max-height: 260px; }
}
/* Network → Pulse → Analytics (static/js/network/pulse-analytics.js) */
.net-an-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-radius: 10px; overflow: hidden; background: var(--surface-border); }
.net-an-stat { background: var(--surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.net-an-stat span { color: var(--text-light); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.net-an-stat strong { color: #fff; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.net-an-stat em { color: var(--text-light); font-size: var(--text-xs); font-style: normal; }
.net-an-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.06); min-width: 100px; margin-top: 6px; }
.net-an-bar > span { display: block; height: 100%; background: var(--c); }
.net-an-list { max-height: 260px; overflow-y: auto; }
.net-an-cap { padding: 10px 0; border-bottom: 1px solid var(--surface-border); }
.net-an-cap:last-of-type { border-bottom: 0; }
.net-hop i { font-style: normal; color: var(--text-light); font-size: .7rem; }
.net-chart--sm { height: 170px; }
@media (max-width: 768px) { .net-an-stats { grid-template-columns: repeat(2, 1fr); } }
/* Entity panel: AI read (panel-entity.js) */
.net-ai-body { color: var(--text-color); font-size: var(--text-sm); }
.net-ai-next { color: #fff; margin-bottom: 6px; }
.net-ai-next i { color: var(--accent-color); }
.net-ai-points { padding-left: 1.1rem; margin: 4px 0 6px; color: var(--text-color); }
.net-ai-src { display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--accent-color); }
.net-ai-src.is-rules { color: var(--text-light); }
.cap-rationale { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--accent-color);
    font-size: var(--text-xs); color: var(--text-color); display: flex; flex-direction: column; gap: 3px; }
.cap-rationale strong { color: #fff; }
.cap-rationale-src { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--accent-color); margin-top: 2px; }
/* Dashboard → Relationship Pulse (dashboard.js renderRelationshipPulse; reuses .net-row / .net-feed) */
.dash-rel-head { color: #fff; font-weight: 700; font-size: var(--text-sm); margin-bottom: 6px; }
.dash-rel-feed { max-height: 360px; }
.net-an-note { color: var(--text-light); font-size: var(--text-xs); }