:root {
    --primary: #053656;
    --secondary: #188caf;
    --accent: #3cb5f2;
    --bkgd: #ffffff;
    --dark-bkgd: #0e283f;
    --dark-bkgd-2: #091722;
    --light-link: #3cb5f2;
    --dark-link: #5e5e5e;
    --dark-text: #5e5e5e;
    --light-text: #ffffff;
    --primary-rgb: rgba(5, 54, 86, 0.80);
    --accent-rgb: rgba(60, 181, 242, 0.80);
    --light-accent-rgb: rgb(236, 248, 254);
    --dark-rgb: rgba(14, 40, 63, 0.90);
    --dark-rgb-low: rgba(14, 40, 63, 0.60);
    --light-rgb: rgb(255, 255, 255);
    --light-primary-bkgd: rgb(230, 235, 238);
    --button-radius: 8px;
}

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

/* No scroll anchoring: opening a record swaps its list for a pane that fills in asynchronously, and
   Chrome's anchoring then dragged the page down by the pane's growth — the record opened mid-way instead
   of at its top. List/record scroll positions are managed in dashboard.js (enterDetailView etc.). */
html {
    overflow-anchor: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--primary);
    color: var(--dark-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 18px;
}

html {
    font-size: 18px;
}

table {
    color: var(--dark-text);
}

.header {
    background-color: var(--primary);
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--dark-rgb-low);
}

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

.header-logo {
    width: auto;
    object-fit: contain;
    max-width: 200px;
    padding-top: 8px;
}

.header-separator {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 300;
}

.header h1 {
    font-size: 1.5rem;
    color: var(--light-text);
    margin: 0;
    flex-grow: 1;
}

.header-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info-text {
    color: var(--light-text);
    font-size: 0.9rem;
}

.user-role-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: var(--accent);
    color: var(--bkgd);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.user-role-badge.admin {
    background-color: var(--accent);
}

.user-role-badge.read-only {
    background-color: var(--dark-rgb-low);
    color: var(--light-text);
}

.logout-button {
    padding: 0.5rem 1rem;
    background-color: var(--primary);
    color: var(--light-text);
    border: 1px solid var(--dark-rgb-low);
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.logout-button:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.tabs {
    display: flex;
    background-color: var(--secondary);
    border-bottom: 1px solid var(--dark-rgb-low);
}

/* Mobile hamburger toggle — hidden on desktop; shown (and the nav collapses to a stacked menu) below
   the 768px breakpoint (see the media query). */
.nav-hamburger { display: none; }

.tab {
    padding: 1rem 2rem;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--light-text);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.tab:hover {
    color: var(--light-text);
    background-color: var(--dark-rgb-low);
}

.tab.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

/* ---- Website-style grouped navigation: top-level menus + hover/focus dropdowns ---- */
.nav-group { position: relative; display: inline-flex; }

/* Top-level triggers (Today, Clients ▾, Pipeline ▾, Calendar ▾, Internal ▾ …) share one flat-tab look. */
.nav-top {
    padding: 1rem 1.6rem; cursor: pointer; border: none; background: none;
    color: var(--light-text); font-size: 0.9rem; transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}
.nav-top:hover { background-color: var(--dark-rgb-low); }
/* Highlight the parent menu whose active tab is inside it (or, for single items like Clients that are
   themselves a .tab.nav-top, the button itself). Needs CSS :has() — fine for evergreen browsers. */
.nav-group:has(.tab.active) > .nav-top,
.nav-top.active { color: var(--accent); border-bottom: 2px solid var(--accent); }

/* Dropdown panel — hidden until its group is hovered or focused (keyboard/touch via :focus-within). */
.nav-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 50; min-width: 100%;
    display: none; flex-direction: column;
    background-color: var(--secondary); border: 1px solid var(--dark-rgb-low);
    border-top: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.nav-group:hover > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown,
.nav-group.open > .nav-dropdown { display: flex; } /* .open = touch/mobile tap-to-reveal (setupMobileNav) */

/* Dropdown items: full-width block buttons; drop the flat-tab bottom border. */
.nav-dropdown .tab,
.nav-dropdown .nav-dropdown-link { display: block; width: 100%; text-align: left; white-space: nowrap; padding: 0.7rem 1.4rem; border-bottom: none; font-size: 0.9rem; }
.nav-dropdown .tab.active { color: var(--accent); border-bottom: none; background-color: var(--dark-rgb-low); }
/* External links in a dropdown (.nav-dropdown-link) — same look as menu items. */
.nav-dropdown .nav-dropdown-link { color: var(--light-text); text-decoration: none; box-sizing: border-box; }
.nav-dropdown .nav-dropdown-link:hover { background-color: var(--dark-rgb-low); }

/* Narrow phones: drop the divider so "Company Brain" fits beside the logo. */
@media (max-width: 420px) { .header-separator { display: none; } }

.tab-content {
    display: none !important;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

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

.tab-content.client-detail.active {
    display: flex !important;
}

/* Search box (the text input at the top of each list's filter rail). */
.searchable-select-input {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--bkgd);
    border: 1px solid var(--dark-rgb-low);
    color: var(--dark-text);
    border-radius: var(--button-radius);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.searchable-select-input:focus {
    outline: none;
    border-color: var(--accent);
}

.detail-content {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.detail-header {
    margin-bottom: 2rem;
}

.detail-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--light-text);
}

.detail-header .meta {
    display: flex;
    gap: 2rem;
    color: var(--light-text);
    font-size: 0.9rem;
}

.detail-header .meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.client-link {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

.project-link {
    color: var(--link);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.project-link:hover {
    color: var(--secondary);
    opacity: 0.8;
}

.detail-section {
    background-color: var(--bkgd);
    border-radius: 15px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.175);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-section h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--secondary);
}

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

.detail-table th,
.detail-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--dark-rgb-low);
    font-size: 0.85rem;
}

.detail-table tr {
    background-color: var(--bkgd);
}

.detail-table th {
    background-color: var(--secondary);
    color: var(--light-text);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--button-radius) / 2);
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.pending { background-color: #f39c12; color: var(--bkgd); }
.status-badge.not-started { background-color: #6c757d; color: var(--light-text); }
.status-badge.in-progress { background-color: var(--secondary); color: var(--light-text); }
.status-badge.completed { background-color: #27ae60; color: var(--light-text); }

/* Tab 3 - Client Detail */
.client-detail {
    width: 100%;
}

.client-filter {
    width: 280px;
    background-color: var(--primary);
    border-right: 1px solid var(--dark-rgb-low);
    padding: 1rem;
}

.client-filter h2 {
    font-size: 0.9rem;
    color: var(--light-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

a {
    color: var(--light-link);
}

.client-filter select {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--bkgd);
    border: 1px solid var(--dark-rgb-low);
    color: var(--dark-text);
    border-radius: var(--button-radius);
    font-size: 0.9rem;
}

.no-client-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted-on-navy);
    font-size: 1rem;
}

/* Clickable rows in tables */
.clickable-row:hover {
    background-color: lightgray;
}

/* Legacy clients-view styles - kept for compatibility */
.clients-view {
    width: 100%;
    padding: 2rem;
    overflow-y: auto;
}

.clients-view h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.clients-table {
    width: 100%;
    background-color: var(--primary);
    border-radius: var(--button-radius);
    overflow: hidden;
    border-collapse: collapse;
}

.clients-table th,
.clients-table td {
    padding: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--dark-rgb-low);
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.clients-table th {
    background-color: var(--primary);
    color: var(--light-text);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clients-table .client-row {
    cursor: pointer;
    height: 40px;
}

.clients-table .client-row td {
    height: 40px;
    line-height: 40px;
}

.clients-table .client-row:hover {
    background-color: var(--dark-rgb-low);
}

.clients-table .contact-count {
    color: var(--light-text);
    font-size: 0.85rem;
}

.clients-table .expand-icon {
    display: inline-block;
    width: 20px;
    transition: transform 0.2s ease;
}

.clients-table .expand-icon.expanded {
    transform: rotate(90deg);
}

.contacts-row {
    display: none;
    background-color: var(--bkgd);
}

.contacts-row.expanded {
    display: table-row;
}

.contacts-row td {
    padding: 0;
    height: auto;
}

.contacts-container {
    padding: 1rem 1rem 1rem 2.5rem;
}

.contacts-table {
    width: 100%;
    background-color: var(--primary);
    border-radius: calc(var(--button-radius) * 0.75);
    border-collapse: collapse;
}

.contacts-table th,
.contacts-table td {
    padding: 0.5rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--dark-rgb-low);
    height: 36px;
    font-size: 0.85rem;
}

.contacts-table th {
    background-color: var(--dark-rgb);
    color: var(--light-text);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
}

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

.no-project-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--light-text);
    font-size: 1rem;
}

/* ============================================
   EXPAND RECORD BUTTONS (record detail panes)
   ============================================ */

.expand-record-btn {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--secondary);
    color: var(--light-text);
    border: none;
    border-radius: var(--button-radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
}

.expand-record-btn:hover {
    background-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.expand-record-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* Mobile Footer Styles */
.mobile-footer {
    display: none;
    background-color: var(--primary);
    border-top: 1px solid var(--dark-rgb-low);
    padding: 1rem;
    /* No fixed/sticky positioning - stays at bottom of content flow */
    flex-shrink: 0;
    margin-top: auto;
}

.mobile-footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.mobile-user-info {
    color: var(--light-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.mobile-logout-button {
    padding: 0.5rem 1.5rem;
    background-color: var(--primary);
    color: var(--light-text);
    border: 1px solid var(--dark-rgb-low);
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.mobile-logout-button:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

/* Mobile devices (up to 768px) */
@media (max-width: 768px) {
    .header {
        padding: 0.75rem 1rem;
    }

    .header-content {
        gap: 0.75rem;
    }

    .header-separator {
        font-size: 1.25rem;
    }

    .header h1 {
        font-size: 1.05rem;
        /* Let the title give way (ellipsis) so the phone header shortcut never pushes the page wider than
           the screen. */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header-content { min-width: 0; }
    .header-logo { flex-shrink: 1; min-width: 0; max-width: 130px; }
    .header-content { gap: 0.5rem; }

    /* Hide user info in header on mobile */
    .header-user-info {
        display: none !important;
    }

    /* Show mobile footer on mobile */
    .mobile-footer {
        display: block;
    }

    /* Collapse the whole grouped nav into a tap-to-open stacked menu (no more horizontal scroll /
       clipped Sales items). The hamburger is the always-visible bar; groups drop below it. */
    .tabs {
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        position: relative;
    }
    .nav-hamburger {
        display: block; width: 100%; text-align: left; box-sizing: border-box;
        padding: 0.9rem 1rem; background: none; border: none;
        color: var(--light-text); font-size: 1rem; cursor: pointer;
    }
    .nav-hamburger-icon { margin-right: 0.5rem; font-size: 1.15rem; vertical-align: -1px; }
    /* Groups hidden until the menu is open; then each stacks full-width. */
    .tabs .nav-group { display: none; width: 100%; }
    .tabs.nav-open .nav-group { display: flex; flex-direction: column; width: 100%; }
    .tabs.nav-open .nav-group { border-top: 1px solid var(--dark-rgb-low); }
    .nav-top { width: 100%; text-align: left; box-sizing: border-box; min-height: 44px; }

    /* Dropdowns render inline (accordion) rather than as an absolute overlay on mobile. */
    .nav-dropdown {
        position: static; box-shadow: none; border: none; min-width: 0;
        background-color: var(--dark-rgb-low);
    }
    .nav-dropdown .tab,
    .nav-dropdown .nav-dropdown-link { padding-left: 2.4rem; min-height: 44px; }

    .tab {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .tab-content {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

    /* Client Detail - Stack vertically on mobile */
    .tab-content.client-detail.active {
        display: block !important;
        flex-direction: column;
    }

    .client-filter {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--dark-rgb-low);
        padding: 0.75rem 1rem;
    }

    .client-filter h2 {
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }

    .detail-content {
        padding: 1rem;
    }

    .detail-header h2 {
        font-size: 1.25rem;
    }

    .detail-header .meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .detail-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .detail-section h3 {
        font-size: 0.95rem;
    }

    /* Card-based layout for tables on mobile */
    .detail-table,
    .clients-table {
        display: block;
        overflow-x: visible;
    }

    /* Detail Table - Card Layout */
    .detail-table thead,
    .detail-table tbody,
    .detail-table th,
    .detail-table td,
    .detail-table tr {
        display: block;
    }

    .detail-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .detail-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--dark-rgb-low);
        border-radius: calc(var(--button-radius) * 0.75);
        background-color: var(--bkgd);
    }

    .detail-table td {
        position: relative;
        padding-left: 40%;
        text-align: left;
        border-bottom: 1px solid var(--dark-rgb-low);
    }

    .detail-table td:before {
        position: absolute;
        left: 0.75rem;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        font-weight: 500;
        color: var(--secondary);
        text-align: left;
    }

    /* Style first field (topic row) with bold text to match the desktop blue table */
    .detail-table td:first-child {
        font-weight: 600;
        background-color: var(--bkgd);
        border-top-left-radius: calc(var(--button-radius) * 0.75);
        border-top-right-radius: calc(var(--button-radius) * 0.75);
    }

    /* Clients Table - Card Layout */
    .clients-table thead,
    .clients-table tbody,
    .clients-table th,
    .clients-table td,
    .clients-table tr {
        display: block;
    }

    .clients-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .clients-table .client-row {
        margin-bottom: 1rem;
        border: 1px solid var(--dark-rgb-low);
        border-radius: calc(var(--button-radius) * 0.75);
        background-color: var(--primary);
        height: auto;
    }

    .clients-table .client-row td {
        position: relative;
        padding: 0.75rem 0.75rem 0.75rem 40%;
        text-align: left;
        border-bottom: 1px solid var(--dark-rgb-low);
        height: auto;
        line-height: 1.4;
    }

    .clients-table .client-row td:last-child {
        border-bottom: none;
    }

    .clients-table .client-row td:before {
        position: absolute;
        left: 0.75rem;
        top: 0.75rem;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 500;
        color: var(--light-text);
        text-align: left;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .clients-table .client-row td:nth-of-type(1):before { content: "Company"; }
    .clients-table .client-row td:nth-of-type(2):before { content: "Email"; }
    .clients-table .client-row td:nth-of-type(3):before { content: "Phone"; }
    .clients-table .client-row td:nth-of-type(4):before { content: "Address"; }
    .clients-table .client-row td:nth-of-type(5):before { content: "Contacts"; }

    /* Style first field (Company) with bold text to match the desktop blue table */
    .clients-table .client-row td:first-child {
        font-weight: 600;
        background-color: var(--primary);
        border-top-left-radius: calc(var(--button-radius) * 0.75);
        border-top-right-radius: calc(var(--button-radius) * 0.75);
    }

    .clients-table .expand-icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .clients-table .contact-count {
        display: inline-block;
        width: 100%;
    }

    /* Contacts nested table on mobile */
    .contacts-row {
        display: none;
        margin-bottom: 1rem;
        padding: 0;
    }

    .contacts-row.expanded {
        display: block;
    }

    .contacts-row td {
        padding: 0;
    }

    .contacts-container {
        padding: 0.75rem;
    }

    .contacts-table {
        border-radius: calc(var(--button-radius) * 0.5);
    }

    .contacts-table thead,
    .contacts-table tbody,
    .contacts-table th,
    .contacts-table td,
    .contacts-table tr {
        display: block;
    }

    .contacts-table thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .contacts-table tbody tr {
        margin-bottom: 0.5rem;
        border: 1px solid var(--dark-rgb-low);
        border-radius: calc(var(--button-radius) * 0.5);
        background-color: var(--bkgd);
    }

    .contacts-table td {
        position: relative;
        padding: 0.5rem 0.5rem 0.5rem 35%;
        text-align: left;
        border-bottom: 1px solid var(--dark-rgb-low);
        height: auto;
    }

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

    .contacts-table td:before {
        position: absolute;
        left: 0.5rem;
        top: 0.5rem;
        width: 30%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 500;
        color: var(--light-text);
        text-align: left;
        font-size: 0.7rem;
        text-transform: uppercase;
    }

    .contacts-table td:nth-of-type(1):before { content: "Name"; }
    .contacts-table td:nth-of-type(2):before { content: "Role"; }
    .contacts-table td:nth-of-type(3):before { content: "Email"; }
    .contacts-table td:nth-of-type(4):before { content: "Phone"; }

    /* Style first field (Name) with bold text and darker background */
    .contacts-table td:first-child {
        font-weight: 600;
        background-color: var(--primary);
        border-top-left-radius: calc(var(--button-radius) * 0.5);
        border-top-right-radius: calc(var(--button-radius) * 0.5);
    }

    /* Clients View */
    .clients-view {
        padding: 1rem;
    }

    .clients-view h2 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

}

/* Tablets (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .header {
        padding: 0.875rem 1.5rem;
    }

    .header-separator {
        font-size: 1.4rem;
    }

    .header h1 {
        font-size: 1.4rem;
    }

    .tab {
        padding: 0.875rem 1.5rem;
    }

    .client-filter {
        width: 240px;
    }

    .detail-content {
        padding: 1.5rem;
    }

    .clients-view {
        padding: 1.5rem;
    }
}

/* Large desktops (1440px and above) */
@media (min-width: 1440px) {
    .header {
        padding: 1.25rem 2.5rem;
    }

    .header-separator {
        font-size: 1.75rem;
    }

    .header h1 {
        font-size: 1.75rem;
    }

    .client-filter {
        width: 320px;
    }

    .detail-content {
        padding: 2.5rem;
    }

    .clients-view {
        padding: 2.5rem;
    }
}

/* Reviews Section Styles */
.reviews-view {
    padding: 2rem;
}

.reviews-container {
    max-width: 1200px;
    margin: 0 auto;
}

.no-reviews {
    text-align: center;
    padding: 3rem;
    color: var(--muted-on-navy);
    font-size: 1.1rem;
}

.review-card {
    background: var(--dark-bkgd-2);
    border: 1px solid var(--dark-rgb-low);
    border-radius: var(--button-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--dark-rgb-low);
}

.review-agent {
    color: var(--accent);
    font-weight: 600;
}

.review-timestamp {
    color: var(--dark-text);
    font-size: 0.9rem;
}

.review-context {
    background: rgba(60, 181, 242, 0.1);
    border-left: 3px solid var(--accent);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.review-context div {
    margin: 0.5rem 0;
}

.review-question {
    padding: 1rem 0;
    font-size: 1.1rem;
}

.review-question strong {
    color: var(--accent);
}

.review-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.review-option-btn {
    background: var(--accent);
    color: var(--bkgd);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.review-option-btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 181, 242, 0.3);
}

.review-custom-response {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.custom-response-input {
    flex: 1;
    background: var(--bkgd);
    border: 1px solid var(--dark-rgb-low);
    color: var(--light-text);
    padding: 0.75rem;
    border-radius: var(--button-radius);
    font-size: 1rem;
}

.submit-custom-btn {
    background: var(--secondary);
    color: var(--light-text);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.submit-custom-btn:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.review-free-form {
    margin-top: 1rem;
}

.review-textarea {
    width: 100%;
    min-height: 100px;
    background: var(--bkgd);
    border: 1px solid var(--dark-rgb-low);
    color: var(--light-text);
    padding: 0.75rem;
    border-radius: var(--button-radius);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.submit-response-btn {
    background: var(--accent);
    color: var(--bkgd);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-weight: 600;
    margin-top: 0.75rem;
    transition: all 0.2s ease;
}

.submit-response-btn:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(60, 181, 242, 0.3);
}

/* Badge for pending reviews count */
.badge {
    background: #ff4444;
    color: white;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    margin-left: 0.5rem;
    font-weight: 700;
}

.badge.hidden {
    display: none;
}

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

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

/* Mobile responsiveness for reviews */
@media (max-width: 768px) {
    .reviews-view {
        padding: 1rem;
    }

    .review-card {
        padding: 1rem;
    }

    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .review-options {
        flex-direction: column;
    }

    .review-option-btn {
        width: 100%;
    }

    .review-custom-response {
        flex-direction: column;
    }

    .submit-custom-btn {
        width: 100%;
    }
}

/* ============================================
   AUTO-REFRESH INDICATOR
   ============================================ */

.refresh-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--light-text);
    background-color: var(--dark-rgb-low);
    padding: 0.4rem 0.75rem;
    border-radius: var(--button-radius);
    margin-right: 1rem;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.refresh-indicator:hover {
    opacity: 1;
}

.refresh-dot {
    width: 8px;
    height: 8px;
    background-color: #27ae60;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile responsiveness for refresh indicator */
@media (max-width: 768px) {
    .refresh-indicator {
        display: none; /* Hide on mobile to save space */
    }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--primary);
    color: var(--light-text);
    border: 1px solid var(--dark-rgb-low);
    width: 48px;
    height: 48px;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--accent);
    color: var(--light-text);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.back-to-top:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 1.5rem;
        right: 1rem;
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
}

/* =============================================
   PIPELINE TAB
   ============================================= */

.pipeline-view {
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

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

.pipeline-header h2 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--light-text);
    margin: 0;
}

.pipeline-edit-btn {
    padding: 0.45rem 1rem;
    background-color: var(--secondary);
    color: var(--light-text);
    border: none;
    border-radius: var(--button-radius);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}

.pipeline-edit-btn:hover {
    background-color: var(--accent);
    color: var(--bkgd);
}

/* KPI Row */
.pipeline-kpi-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.pipeline-kpi-tile {
    flex: 1;
    min-width: 120px;
    background-color: var(--primary);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    text-align: center;
    border-left: 3px solid var(--secondary);
}

.pipeline-kpi-tile.tier-a { border-left-color: #e85d04; }
.pipeline-kpi-tile.tier-b { border-left-color: #f4a261; }
.pipeline-kpi-tile.tier-c { border-left-color: var(--accent); }

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--light-text);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--light-text);
    opacity: 0.8;
}

/* Status grid */
.pipeline-status-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pipeline-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--primary);
    border: 1px solid var(--dark-rgb-low);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    color: var(--light-text);
}

.pipeline-status-chip .chip-count {
    background-color: var(--secondary);
    color: var(--light-text);
    border-radius: 10px;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Sections */
.pipeline-section {
    background-color: var(--primary);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.pipeline-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dark-rgb-low);
}

.pipeline-current-week {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--light-text);
    white-space: pre-wrap;
}

.pipeline-empty {
    color: var(--muted-on-navy);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0;
}

/* Table controls */
.pipeline-table-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.pipeline-filter-input,
.pipeline-filter-select {
    padding: 0.4rem 0.75rem;
    background-color: var(--primary);
    border: 1px solid var(--dark-rgb-low);
    border-radius: var(--button-radius);
    color: var(--light-text);
    font-size: 0.85rem;
}

.pipeline-filter-input {
    flex: 1;
    min-width: 160px;
}

.pipeline-filter-input::placeholder { color: var(--light-text); }

.pipeline-filter-select option { background-color: var(--bkgd); }

/* Tables */
.pipeline-table-wrapper {
    overflow-x: auto;
}

.pipeline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    background: var(--bkgd);
}

.pipeline-table thead th {
    background-color: var(--secondary);
    color: var(--light-text);
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.pipeline-table thead th:hover { color: var(--accent); }
.pipeline-table thead th.sort-asc::after  { content: ' ▲'; font-size: 0.65rem; }
.pipeline-table thead th.sort-desc::after { content: ' ▼'; font-size: 0.65rem; }

.pipeline-table tbody tr { border-bottom: 1px solid var(--dark-rgb-low); }
.pipeline-table tbody tr:hover { background-color: var(--light-accent-rgb); }
/* Prospect tracker rows open a full research profile on click */
.pipeline-table tbody tr.tracker-row { cursor: pointer; }
.pipeline-table tbody tr.tracker-row:hover { background-color: var(--light-accent-rgb); }

.pipeline-table tbody td {
    padding: 0.6rem 0.85rem;
    color: var(--dark-text);
    vertical-align: top;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.status-badge.cold              { background-color: var(--dark-rgb-low); color: var(--light-text); }
.status-badge.researched        { background-color: #1a4a6b; color: #7fc8e8; }
.status-badge.contacted         { background-color: #3b4a1e; color: #a3c46b; }
.status-badge.engaged           { background-color: #4a3b1e; color: #e8b96b; }
.status-badge.active            { background-color: #1e4a2b; color: #6be8a0; }
.status-badge.stalled           { background-color: #4a1e1e; color: #e8736b; }
.status-badge.closed-won        { background-color: #1e3a4a; color: var(--accent); }
.status-badge.closed-lost       { background-color: #2a1a1a; color: #9a6b6b; }
.status-badge.disqualified      { background-color: #2a2a2a; color: #666; }

/* Tier badges */
.tier-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
}

.tier-badge.a { background-color: rgba(232,93,4,0.2); color: #e85d04; }
.tier-badge.b { background-color: rgba(244,162,97,0.2); color: #f4a261; }
.tier-badge.c { background-color: rgba(60,181,242,0.2); color: var(--accent); }

/* Inline editor overlay */
.pipeline-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(9,23,34,0.85);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.pipeline-editor-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    height: 80vh;
    background: var(--bkgd);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 1px solid var(--dark-rgb-low);
}

.pipeline-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
    flex-shrink: 0;
}

.pipeline-editor-close {
    background: none;
    border: none;
    color: var(--light-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.pipeline-editor-close:hover { background: var(--dark-rgb-low); }

.pipeline-editor-textarea {
    flex: 1;
    width: 100%;
    background: var(--dark-bkgd-2);
    color: var(--light-text);
    border: none;
    padding: 1rem 1.25rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    resize: none;
    outline: none;
    overflow-y: auto;
}

.pipeline-editor-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    flex-shrink: 0;
    justify-content: flex-end;
}

.pipeline-editor-status {
    flex: 1;
    font-size: 0.8rem;
    color: var(--accent);
}

.pipeline-editor-cancel,
.pipeline-editor-save {
    padding: 0.45rem 1rem;
    border-radius: var(--button-radius);
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--dark-rgb-low);
    transition: all 0.2s;
}

.pipeline-editor-cancel {
    background: var(--primary);
    color: var(--light-text);
}

.pipeline-editor-cancel:hover { background: var(--dark-rgb-low); }

.pipeline-editor-save {
    background: var(--secondary);
    color: var(--light-text);
    border-color: var(--secondary);
}

.pipeline-editor-save:hover { background: var(--accent); color: var(--bkgd); border-color: var(--accent); }

@media (max-width: 768px) {
    .pipeline-view { padding: 1rem; }
    .pipeline-kpi-row { gap: 0.5rem; }
    .pipeline-kpi-tile { min-width: 80px; padding: 0.75rem 0.5rem; }
    .kpi-value { font-size: 1.5rem; }
    .pipeline-editor-modal { height: 90vh; }
}

/* ============================================================
   Brand theme (override) — Barnes navy #113a72 + blue #2687ff on a deep-navy page (Home v2).
   Placed last so it wins the cascade. The --bb-* tokens are the Home v2 palette; the older generic
   tokens are mapped onto it so every tab shares one look.
   ============================================================ */
:root {
    --bb-ink: #071A38;          /* deepest navy */
    --bb-page: #0C2247;         /* page surface */
    --bb-nav: #0B1F42;          /* nav bar */
    --bb-card: #143566;         /* panels, tiles */
    --bb-raised: #1B4480;       /* chips, pills on a panel */
    --bb-hover: #235096;        /* hover / selected on a panel */
    --bb-navy: #113a72;         /* brand navy: table header rows, links on white */
    --bb-blue: #2687ff;         /* brand blue: actions, focus, active nav */
    --bb-text: #E6EDF3;
    --bb-soft: #D5E1EC;
    --bb-muted: #B8C7DE;
    --bb-faint: #93A8C7;
    --bb-link: #8CBDFF;         /* links and headings on navy */
    --bb-line: rgba(255, 255, 255, 0.07);
    --bb-row-line: #E2E8EE;     /* row rules inside white tables */
    --bb-red: #E35D5D;
    --bb-orange: #E07A2F;
    --bb-amber: #F0A830;
    --bb-green: #43C06A;
    --bb-font: Lato, "Helvetica Neue", Arial, sans-serif;
    --bb-serif: Georgia, "Times New Roman", serif;

    --primary: #0C2247;
    --secondary: #113a72;
    --accent: #2687ff;
    --bkgd: #ffffff;
    --dark-bkgd: #071A38;
    --dark-bkgd-2: #143566;
    --light-link: #8CBDFF;
    --link: #113a72;
    --muted-text: #55657A;
    --muted-on-navy: #B8C7DE;
    --dark-link: #404040;
    --dark-text: #404040;
    --light-text: #ffffff;
    --primary-rgb: rgba(12, 34, 71, 0.80);
    --accent-rgb: rgba(38, 135, 255, 0.80);
    --light-accent-rgb: rgba(38, 135, 255, 0.10);
    --dark-rgb: rgba(7, 26, 56, 0.90);
    --dark-rgb-low: rgba(23, 23, 23, 0.60);
    --light-rgb: rgb(255, 255, 255);
    --light-primary-bkgd: rgb(234, 238, 242);
    --button-radius: 8px;
}

/* Group headings above the grouped list tables (Team roles): name + a count pill. */
.proj-status-title { margin: 1.4rem 0 0.6rem; font: 700 20px var(--bb-font); color: var(--light-text); display: flex; align-items: center; gap: 10px; }
.proj-status-count { font: 700 12px var(--bb-font); background: var(--bb-blue); color: #fff; border-radius: 999px; padding: 3px 10px; }

/* Grouped list tables (per role, Team tab) — fixed layout so every group's columns line up. */
.grouped-list { table-layout: fixed; width: 100%; }
.grouped-list th, .grouped-list td { overflow-wrap: anywhere; }
.grouped-list-3 th:nth-child(1), .grouped-list-3 td:nth-child(1) { width: 52%; }
.grouped-list-3 th:nth-child(2), .grouped-list-3 td:nth-child(2) { width: 33%; }
.grouped-list-3 th:nth-child(3), .grouped-list-3 td:nth-child(3) { width: 15%; }

/* On mobile, .detail-table switches to a stacked card layout (block-display cells labelled via
   data-label) — the fixed per-column widths above must NOT apply there, or every value collapses
   into a character-wide sliver. Same selector specificity as the width rules; later wins. */
@media (max-width: 768px) {
    .grouped-list { table-layout: auto; }
    .grouped-list th:nth-child(n), .grouped-list td:nth-child(n) { width: auto; }
}

/* List pagination bar (Clients and Prospects, 50 rows/page): pill buttons either side of the count. */
.projects-pager {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 0 0 14px; flex-wrap: wrap; font: 400 15px var(--bb-font); color: var(--bb-text);
}
.projects-pager .pager-btn {
    padding: 8px 16px; border: 0; border-radius: 999px; background: #fff; color: var(--bb-navy);
    font: 700 15px var(--bb-font); cursor: pointer;
}
.projects-pager .pager-btn:hover:not(:disabled) { background: #EEF3FA; }
.projects-pager .pager-btn:disabled { background: #3A5A8A; color: #C9D4DE; cursor: default; }
.projects-pager .pager-info { font-size: 15px; color: var(--bb-text); }

/* ---- Calendar tab (Employee Schedule) ---- */
.calendar-view { padding: 1.5rem; }
.calendar-heading { margin: 0 0 0.25rem; color: var(--light-text); }
.calendar-subtitle { margin: 0 0 1rem; font-size: 0.9rem; color: var(--light-text, rgb(255, 255, 255)); }

/* Light card so FullCalendar's default (light) theme is readable on the dark dashboard. */
#employee-calendar-content {
    background: #fff; color: #1a202c; padding: 1rem 1.25rem 1.5rem;
    border-radius: 8px; border: 1px solid var(--dark-rgb-low);
}
#employee-calendar-content a { color: inherit; text-decoration: none; }
.fc .fc-button-primary { background: var(--accent, #113a72); border-color: var(--accent, #113a72); }
.fc .fc-button-primary:not(:disabled):hover { opacity: 0.9; }
.fc .fc-toolbar-title { font-size: 1.15rem; }
.fc-event { cursor: pointer; }

/* ---- Calendar responsiveness ---------------------------------------------------------------- */
/* Kill sideways overflow on small screens (the card is padded; keep it inside the viewport). */
.calendar-view, #employee-calendar-content { box-sizing: border-box; max-width: 100%; }
#employee-calendar-content { overflow-x: hidden; }
/* Toolbar wraps instead of colliding; groups stay centred as they wrap. */
.fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 0.5rem 0.75rem; justify-content: space-between; }

/* Tablet (≤1024px): keep the month grid but shrink fonts + let event titles wrap to 2 lines so they
   stay legible instead of being clipped. */
@media (max-width: 1024px) {
    .fc .fc-toolbar-title { font-size: 1.05rem; }
    .fc .fc-daygrid-day-number { font-size: 0.8rem; padding: 2px 4px; }
    .fc .fc-daygrid-event { font-size: 0.72rem; }
    .fc .fc-event-title { white-space: normal; overflow: hidden; }
    .fc .fc-daygrid-day-frame { min-height: 4.75rem; }
}

/* Phone (≤640px): the JS switches to the agenda list view. Stack the toolbar as centred rows
   (title on top), and give buttons ~44px touch targets. */
@media (max-width: 640px) {
    .calendar-view { padding: 1rem 0.75rem; }
    #employee-calendar-content { padding: 0.75rem; }
    .emp-cal-toolbar { flex-direction: column; align-items: stretch; }
    .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
    .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
    .fc .fc-toolbar-chunk:nth-child(2) { order: -1; }   /* title row first */
    .fc .fc-toolbar-title { font-size: 1.1rem; }
    .fc .fc-button { min-height: 44px; padding: 0.45rem 0.75rem; }
    .fc .fc-list-event-title, .fc .fc-list-event-time { font-size: 0.95rem; }
}

/* Calendar entry modal (clone of the pipeline-editor overlay; height auto) — the Employee Schedule
   add/edit/view dialog. */
.calendar-event-overlay {
    position: fixed; inset: 0; background: rgba(9, 23, 34, 0.85); z-index: 5000;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.calendar-event-modal {
    display: flex; flex-direction: column; width: 100%; max-width: 460px;
    max-height: 80vh; overflow: hidden; background: var(--bkgd);
    border: 1px solid var(--dark-rgb-low); border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.calendar-event-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 1.1rem; background: var(--primary); color: var(--light-text); font-weight: 600;
}
.calendar-event-close { border: none; background: none; color: var(--light-text); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.calendar-event-body { padding: 1rem 1.1rem; overflow-y: auto; }
/* Per-employee colour legend above the calendar. */
#employee-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 10px; font-size: 0.85rem; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--light-text, #333); }
.cal-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Employee Schedule: legend + add button row, and the add/edit modal's form fields. */
.emp-cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 10px; flex-wrap: wrap; }
.emp-cal-toolbar #employee-legend { margin: 0; flex: 1; }
.emp-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
.emp-field label { font-size: 0.8rem; color: var(--dark-text, #889); font-weight: 600; }
.emp-field select, .emp-field input, .emp-field textarea {
    padding: 0.5rem 0.6rem; border: 1px solid var(--dark-rgb-low); border-radius: 6px;
    background: var(--bkgd); color: var(--dark-text); font: inherit; font-size: 0.9rem;
    box-sizing: border-box; width: 100%;
}
.emp-field select:disabled, .emp-field input:disabled, .emp-field textarea:disabled { opacity: 0.6; }
.emp-times { display: flex; align-items: center; gap: 0.5rem; }
.emp-times span { color: var(--dark-text, #889); font-size: 0.85rem; }
.emp-field-hint { font-size: 0.75rem; color: var(--dark-text, #889); }
.emp-ev-error { color: #fc8181; font-size: 0.85rem; padding: 0.25rem 0; }
.emp-ev-footer { gap: 0.6rem; align-items: center; }
.emp-ev-spacer { flex: 1; }
.emp-ev-cancel {
    padding: 0.55rem 1rem; cursor: pointer; background: none; color: var(--dark-text);
    border: 1px solid var(--dark-rgb-low); border-radius: var(--button-radius); font-weight: 600;
}
.emp-ev-delete {
    padding: 0.55rem 1rem; cursor: pointer; background: #C53030; color: #fff;
    border: none; border-radius: var(--button-radius); font-weight: 600;
}
.emp-ev-delete:hover, .emp-ev-cancel:hover { opacity: 0.9; }

.calendar-event-footer { padding: 0.9rem 1.1rem; display: flex; justify-content: flex-end; border-top: 1px solid var(--dark-rgb-low); }
.calendar-event-open { padding: 0.55rem 1rem; cursor: pointer; background: var(--accent, #113a72); color: #fff; border: none; border-radius: var(--button-radius); font-weight: 600; }
.calendar-event-open:hover { opacity: 0.9; }

/* Lost / Cancelled — a dead job. Dark slate to distinguish from Paid grey. */
.status-badge.lost { background: #4a5568; color: #fff; }

/* Standardized project workflow statuses: Upcoming → Ready → Completed → Invoiced → Paid. */
.status-badge.upcoming { background: #dd6b20; color: #fff; }       /* orange — booked, coming up */
.status-badge.ready { background: #38a169; color: #fff; }          /* green — sold, ready to start */
.status-badge.done { background: #ecc94b; color: #744210; }        /* yellow — "Completed" (legacy class name, kept so it doesn't clash with the queue-task green .completed badge) */
.status-badge.invoiced { background: #e53e3e; color: #fff; }       /* red — invoice sent, awaiting payment */
.status-badge.paid { background: #718096; color: #fff; }           /* grey — paid, closed out */
/* Edge statuses (outside the everyday 5-stage flow). */
.status-badge.on-hold { background: #6b46c1; color: #fff; }        /* purple — paused, not dead */
.status-badge.unknown { background: #a0aec0; color: #1a202c; }     /* muted — needs triage (red is reserved for Invoiced) */

/* App footer (mirrors the email footer) — centered, light-gray divider above. */
.app-footer {
    text-align: center;
    padding: 20px 20px 28px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--bb-faint);
    font: 400 13px/1.7 var(--bb-font);
}
.app-footer a { color: var(--bb-link); text-decoration: none; font-weight: 700; }
.app-footer a:hover { text-decoration: underline; }

/* Clickable links: pointer cursor + underline on hover. Links styled as buttons, tiles or menu items keep their own hover. */
a[href], [onclick], .clickable-row { cursor: pointer; }
a[href]:hover:not(.btn):not(.way):not(.back-btn):not(.microsoft-login-button):not(.header-text-shortcut):not(.nav-dropdown-link):not(.claim-btn):not(.hdr-btn):not(.ask-mic) { text-decoration: underline; }

/* ============================================================
   Home v2 — brand bar, nav, Today, Clients, coming-soon pages.
   Sizes are in px to match the approved 1440px design; the rest of the dashboard keeps its rem scale.
   ============================================================ */
body { background-color: var(--bb-page); font-family: var(--bb-font); -webkit-font-smoothing: antialiased; }

/* Material Symbols icon (ligature). Fixed 1em box + overflow hidden, so if the icon font fails to load
   the ligature name is clipped instead of spilling out as text. */
.ms {
    font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1;
    display: inline-block; width: 1em; height: 1em; overflow: hidden; flex-shrink: 0;
    letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
    -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; user-select: none;
}

/* The hidden attribute always wins: several links/badges here set their own display (the mic link,
   dropdown links, the phone chat shortcut), which would otherwise override the browser's [hidden] rule. */
[hidden] { display: none !important; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Visible keyboard focus everywhere on the dark chrome. */
.tabs :focus-visible, .today-view :focus-visible, .clients-v2 :focus-visible, .soon-view :focus-visible,
.header :focus-visible, .reviews-view :focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }

/* ---- Brand bar (white) ---- */
.header {
    background-color: #fff; min-height: 86px; padding: 0 24px; box-sizing: border-box;
    display: flex; align-items: center; border-bottom: 3px solid var(--bb-blue);
}
.header-content { width: 100%; gap: 16px; }
.header-logo { height: 34px; width: auto; max-width: none; padding: 0; display: block; flex-shrink: 0; }
.header-separator { width: 1px; height: 30px; background: #C9D4E3; font-size: 0; flex-shrink: 0; }
.header h1 { font: 700 24px/1 var(--bb-serif); color: var(--bb-navy); letter-spacing: .01em; flex-grow: 1; }
.header-user-info { gap: 18px; }
.refresh-indicator {
    display: flex; align-items: center; gap: 8px; margin: 0; opacity: 1;
    background: #EEF3FA; border-radius: 999px; padding: 7px 14px;
    font: 400 13px var(--bb-font); color: #404040; white-space: nowrap;
}
.refresh-dot { background-color: var(--bb-green); }
.user-info-text { display: flex; align-items: center; gap: 10px; font: 400 15px var(--bb-font); color: #404040; }
.user-role-badge {
    margin: 0; padding: 4px 8px; border-radius: 5px; background: var(--bb-blue); color: #fff;
    font: 700 11px var(--bb-font); letter-spacing: .04em; text-transform: uppercase;
}
.logout-button {
    border: 1px solid var(--bb-navy); border-radius: 999px; padding: 8px 18px; background: transparent;
    font: 700 13px var(--bb-font); letter-spacing: .04em; text-transform: uppercase; color: var(--bb-navy);
}
.logout-button:hover { background-color: var(--bb-navy); border-color: var(--bb-navy); color: #fff; }

/* ---- Nav (dark bar under the brand bar) ---- */
.tabs { background-color: var(--bb-nav); border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 0 6px; min-height: 58px; align-items: stretch; }
.nav-group { align-items: stretch; }
.tab, .nav-top {
    display: flex; align-items: center; gap: 6px; padding: 0 18px; min-height: 58px; box-sizing: border-box;
    font: 400 15px var(--bb-font); color: var(--bb-text); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover, .nav-top:hover { background-color: rgba(255, 255, 255, .04); color: #fff; }
.tab.active, .nav-group:has(.tab.active) > .nav-top, .nav-top.active { color: var(--bb-blue); border-bottom: 2px solid var(--bb-blue); }
.nav-caret { font-size: 9px; opacity: .7; }
.nav-group-end { margin-left: auto; }
.nav-review .ms { font-size: 18px; color: var(--bb-blue); }
.nav-count { font: 700 11px var(--bb-font); background: var(--bb-orange); color: #fff; border-radius: 999px; padding: 2px 7px; }
.nav-dropdown { background-color: var(--bb-nav); border: 1px solid rgba(255, 255, 255, .08); border-top: none; min-width: 210px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); }
.nav-dropdown .tab, .nav-dropdown .nav-dropdown-link { min-height: 0; padding: 12px 18px; font: 400 15px var(--bb-font); }
.nav-dropdown .tab:hover, .nav-dropdown .nav-dropdown-link:hover { background-color: var(--bb-card); }
.nav-dropdown .tab.active { color: var(--bb-blue); background-color: var(--bb-card); border-bottom: none; }
.nav-dropdown .nav-dropdown-link { color: var(--bb-text); }

/* Rollout-stage marker (same look as the chat package's .beta-badge — the dashboard stylesheet is the
   only one loaded here, so the nav item needs its own copy). Dark navy on caution yellow, ~9.4:1. */
.beta-badge {
    display: inline-block; vertical-align: middle; margin-left: 0.4rem; padding: 0.12em 0.55em;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #04263d; background: #f2c53c; border-radius: 999px;
}

/* Phone-only header shortcut to Text the Brain. Hidden on desktop, where the Internal menu is one hover away. */
.header-text-shortcut { display: none; }

/* ---- Shared page frame + panels ---- */
.bb-page {
    max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 26px 28px 34px;
    display: flex; flex-direction: column; gap: 22px; color: var(--bb-text);
}
.bb-panel {
    background: var(--bb-card); border-radius: 14px; padding: 20px 22px; min-width: 0;
    display: flex; flex-direction: column; gap: 14px;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-title { margin: 0; font: 700 19px var(--bb-font); color: var(--bb-link); }
.panel-count {
    font: 700 12px var(--bb-font); background: var(--bb-raised); color: var(--bb-link);
    border-radius: 999px; padding: 3px 9px; vertical-align: middle; margin-left: 6px;
}
.panel-count.count-orange { background: var(--bb-orange); color: #fff; }
.panel-link, .link-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: 400 12.5px var(--bb-font); color: var(--bb-link); text-align: left;
}
.panel-link:hover, .link-btn:hover { color: #BFD8FF; text-decoration: underline; }
/* A link-style button inside a white table or card sits on white: use the same navy as the Clients list's names (≥ 9:1), not the pale blue made for the navy page. */
.bb-table .link-btn, .bb-table-wrap .link-btn { color: var(--bb-navy); font-weight: 700; text-decoration: underline; }
.bb-table .link-btn:hover, .bb-table-wrap .link-btn:hover { color: #0A2A57; }
.panel-note { font: 400 12.5px var(--bb-font); color: var(--bb-faint); }

.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    border-top: 1px solid var(--bb-line); padding: 26px 8px 10px;
}
.empty-state .ms { font-size: 28px; color: var(--bb-faint); margin-bottom: 4px; }
.empty-main { margin: 0; max-width: 46ch; font: 400 14px/1.45 var(--bb-font); color: var(--bb-soft); }
.empty-sub { margin: 0; max-width: 52ch; font: 400 12.5px/1.45 var(--bb-font); color: var(--bb-faint); }

/* White data tables with a navy header row; they scroll sideways inside their own wrapper on narrow screens. */
.bb-table-wrap { background: #fff; border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bb-table { width: 100%; border-collapse: collapse; color: #404040; font: 400 14px var(--bb-font); }
.bb-table th {
    background: var(--bb-navy); color: #fff; text-align: left; white-space: nowrap; padding: 14px 18px;
    font: 700 13px var(--bb-font); letter-spacing: .04em; text-transform: uppercase;
}
.bb-table td { padding: 13px 18px; border-top: 1px solid var(--bb-row-line); vertical-align: middle; }
.bb-table td.bb-table-empty { text-align: center; color: var(--muted-text); font-size: 13.5px; padding: 22px 18px; }
.chip { margin: 0; display: inline-block; font: 700 11px var(--bb-font); letter-spacing: .06em; border-radius: 5px; padding: 5px 10px; }
.chip-orange { background: var(--bb-orange); color: #fff; }

/* ---- Today ---- */
.today-greeting { margin: 0; font: 400 30px/1.1 var(--bb-serif); color: #fff; }
.today-summary { margin: 4px 0 0; font: 400 13.5px var(--bb-font); color: var(--bb-muted); }
.today-summary .link-btn { font-size: 13.5px; }

.ask-bar {
    background: var(--bb-card); border: 1px solid rgba(38, 135, 255, .45); border-radius: 14px;
    box-shadow: 0 0 0 4px rgba(38, 135, 255, .10), 0 18px 40px -24px rgba(0, 0, 0, .8);
    padding: 14px 16px 14px 18px; display: flex; flex-direction: column; gap: 12px;
}
.ask-row { display: flex; align-items: center; gap: 12px; }
.ask-spark { color: var(--bb-blue); font-size: 22px; }
.ask-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1.3 var(--bb-font); color: #fff; }
.ask-input::placeholder { color: var(--bb-faint); opacity: 1; }
.today-view .ask-input:focus-visible { outline: none; }
.ask-bar:focus-within { border-color: var(--bb-blue); }
.ask-mic { display: inline-flex; padding: 6px; border-radius: 8px; color: var(--bb-faint); text-decoration: none; }
.ask-mic:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ask-btn {
    height: 34px; border: 0; border-radius: 8px; background: var(--bb-blue); color: #fff; cursor: pointer;
    display: flex; align-items: center; gap: 6px; padding: 0 14px; font: 700 13px var(--bb-font);
}
.ask-btn .ms { font-size: 16px; }
.ask-btn:hover:not(:disabled) { background: #1f78e6; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 34px; }
.ask-chip {
    border: 1px solid rgba(255, 255, 255, .12); background: var(--bb-raised); border-radius: 999px;
    padding: 6px 12px; font: 400 12.5px var(--bb-font); color: var(--bb-soft); cursor: pointer;
}
.ask-chip:hover:not(:disabled) { background: var(--bb-hover); color: #fff; }
.ask-chat-link { margin-left: auto; align-self: center; white-space: nowrap; }
.ask-btn:disabled { cursor: progress; opacity: .7; }
.ask-status { margin: 0; padding-left: 34px; font: 400 12.5px var(--bb-font); color: var(--bb-muted); }
.ask-status.is-error { color: #F08080; }

/* One collapse toggle for the Ask bar + Your requests. */
.ask-section, .ask-body { display: flex; flex-direction: column; gap: 18px; }
.ask-section { gap: 8px; padding: 6px 14px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; background: rgba(255, 255, 255, .02); }
.ask-section.is-collapsed { padding-bottom: 6px; }
.ask-body[hidden] { display: none; }
.ask-collapse {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 4px 6px 8px;
    border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 8px;
    font: 700 13px var(--bb-font); color: var(--bb-soft); letter-spacing: .02em;
}
.ask-collapse:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.ask-collapse:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }
.ask-collapse-action { margin-left: auto; flex: none; font: 700 12.5px var(--bb-font); color: var(--bb-link); }
.ask-collapse:hover .ask-collapse-action { color: #fff; text-decoration: underline; }
.ask-collapse-sum { font: 400 12.5px var(--bb-font); color: var(--bb-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-collapse-sum::before { content: "·"; margin-right: 8px; color: var(--bb-faint); }
.ask-collapse-sum:empty::before { content: none; }

/* "Email me a copy" switch + per-request email line. */
.ask-email { display: flex; align-items: center; gap: 10px; padding-left: 34px; min-height: 28px; }
.ask-switch {
    position: relative; flex: none; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 999px;
    background: var(--bb-raised); cursor: pointer; transition: background .15s;
}
.ask-switch-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bb-muted); transition: transform .15s, background .15s; }
.ask-switch[aria-checked="true"] { background: var(--bb-blue); }
.ask-switch[aria-checked="true"] .ask-switch-knob { transform: translateX(16px); background: #fff; }
.ask-switch:focus-visible { outline: 2px solid var(--bb-link); outline-offset: 2px; }
.ask-email-label { font: 400 12.5px var(--bb-font); color: var(--bb-soft); }
.req-mail { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 12px var(--bb-font); color: var(--bb-faint); }
.req-mail .ms { font-size: 15px; }
.req-mail[data-sent="true"] { color: #7ED99A; }
.req-mail[data-sent="false"] { color: #F08080; }
@media (prefers-reduced-motion: reduce) { .ask-switch, .ask-switch-knob { transition: none; } }

/* A meeting proposal under a request (the Confirm button). */
.req-prop { margin-top: 4px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.req-prop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.req-prop-title { font: 700 11px/1.2 var(--bb-font); letter-spacing: .1em; text-transform: uppercase; color: var(--bb-link); }
.req-prop-code { font: 400 12px var(--bb-font); color: var(--bb-faint); }
.req-prop-name { font: 700 14.5px/1.35 var(--bb-font); color: #fff; overflow-wrap: anywhere; }
.req-prop-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font: 400 13.5px/1.4 var(--bb-font); }
.req-prop-facts dt { color: var(--bb-faint); font-weight: 700; }
.req-prop-facts dd { margin: 0; color: var(--bb-soft); overflow-wrap: anywhere; }
.req-prop-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--bb-line); }
.req-prop-people li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--bb-line); min-width: 0; }
.req-prop-who { display: flex; flex-direction: column; min-width: 0; font: 400 13.5px/1.35 var(--bb-font); color: #fff; }
.req-prop-email { font-size: 12.5px; color: var(--bb-muted); overflow-wrap: anywhere; }
.req-prop-badge { display: inline-block; border-radius: 4px; padding: 3px 8px; font: 700 11.5px var(--bb-font); white-space: nowrap; }
.req-prop-badge-neutral { background: #1B4480; color: #D5E1EC; }
.req-prop-badge-warn { background: #FCEBC7; color: #7A4A00; }
.req-prop-badge-ok { background: #E3F4E8; color: #1E6B39; }
.req-prop-badge-muted { background: rgba(255, 255, 255, .1); color: var(--bb-soft); }
.req-prop-foot { display: flex; flex-direction: column; gap: 8px; }
.req-prop-until { margin: 0; font: 400 12.5px var(--bb-font); color: var(--bb-muted); }
.req-prop-ask { margin: 0; padding: 10px 12px; border-radius: 8px; background: #FFF4E0; border: 1px solid #F0C27A; color: #5C3300; font: 600 13.5px/1.45 var(--bb-font); }
.req-prop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.req-prop-btn { min-height: 40px; align-self: flex-start; }
.req-prop-go { border: 0; border-radius: 8px; padding: 0 16px; background: #1766D1; color: #fff; font: 700 13px var(--bb-font); cursor: pointer; }
.req-prop-go:hover:not(:disabled) { background: #1259B8; }
.req-prop-btn-ghost { border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: var(--bb-soft); border-radius: 8px; padding: 0 14px; font: 700 13px var(--bb-font); cursor: pointer; }
.req-prop-btn-ghost:hover:not(:disabled) { background: var(--bb-raised); color: #fff; }
.req-prop-btn:disabled { opacity: .65; cursor: progress; }
.req-prop-msg { margin: 0; font: 400 13px/1.45 var(--bb-font); overflow-wrap: anywhere; }
.req-prop-msg.is-ok { color: #7ED99A; }
.req-prop-msg.is-error { color: #F08080; }
.req-prop button:focus-visible { outline: 2px solid var(--bb-link); outline-offset: 2px; }
.req-prop-expired, .req-prop-withdrawn, .req-prop-approved { opacity: .85; }

/* "Earlier requests": the older ones, grouped and closed by default under the live ones. */
.ask-prev { margin-top: 6px; border-top: 1px solid var(--bb-line); }
.ask-prev.is-alone { margin-top: 0; border-top: 0; }
.ask-prev-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px;
    padding: 8px 0; border: 0; background: transparent; cursor: pointer; text-align: left;
    font: 700 13px var(--bb-font); color: var(--bb-soft);
}
.ask-prev-toggle:hover { color: #fff; }
.ask-prev-toggle:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }
.ask-prev-action { font: 700 12.5px var(--bb-font); color: var(--bb-link); }
.ask-prev [hidden] { display: none; }
#ask-requests-list:empty { display: none; }
.ask-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 2px; border-top: 1px solid var(--bb-line); font: 400 12.5px var(--bb-font); color: var(--bb-muted); }
.ask-pager .link-btn { min-height: 44px; padding: 0 4px; }
.ask-pager .link-btn:disabled { opacity: .4; cursor: default; text-decoration: none; }

/* Your requests (under the Ask bar): the signed-in person's own recent requests, newest first. */
.req-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--bb-line); }
.req-item:first-child { border-top: 0; padding-top: 2px; }
.req-icon { font-size: 20px; color: var(--bb-blue); margin-top: 1px; }
.req-item[data-outcome="answered"] .req-icon { color: var(--bb-green); }
.req-item[data-outcome="needs-info"] .req-icon { color: #F5BE5A; }
.req-item[data-outcome="denied"] .req-icon, .req-item[data-outcome="failed"] .req-icon { color: #F08080; }
.req-item[data-outcome="working"] .req-icon { animation: req-spin 1.4s linear infinite; }
@keyframes req-spin { to { transform: rotate(360deg); } }
.req-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.req-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.req-status { font: 700 11px/1.2 var(--bb-font); letter-spacing: .1em; text-transform: uppercase; color: var(--bb-link); }
.req-item[data-outcome="answered"] .req-status { color: #7ED99A; }
.req-item[data-outcome="needs-info"] .req-status { color: #F5BE5A; }
.req-item[data-outcome="denied"] .req-status, .req-item[data-outcome="failed"] .req-status { color: #F08080; }
.req-when { font: 400 12px var(--bb-font); color: var(--bb-faint); }
.req-q { margin: 0; font: 400 14px/1.4 var(--bb-font); color: #fff; overflow-wrap: anywhere; }
/* The padded box holds the text; the CLAMP sits on the text inside it, so the fifth line cannot peek through the padding.
   An answer is block content (Markdown: paragraphs, lists, tables), so the clamp is a max-height of four lines with a fade
   (dashboard.js adds is-cut when something is actually cut off). */
.req-answer { padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .05); min-width: 0; }
.req-answer-text {
    --ans-fs: 13.5px; --ans-lh: 1.5;
    margin: 0; min-width: 0; font: 400 var(--ans-fs)/var(--ans-lh) var(--bb-font); color: var(--bb-soft); overflow-wrap: anywhere;
    max-height: calc(var(--ans-fs) * var(--ans-lh) * 4); overflow: hidden;
}
.req-answer-text.is-plain { white-space: pre-wrap; }           /* the fallback when Markdown cannot be rendered safely */
.req-item:not(.is-open) .req-answer-text.is-cut {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), rgba(0, 0, 0, .2));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), rgba(0, 0, 0, .2));
}
.req-item.is-open .req-answer-text { max-height: none; overflow: visible; }
/* The Markdown an answer may contain (dashboard.js renderAskAnswerMarkdown: p br strong em b i code pre ul ol li blockquote hr h1-h4 table a). */
.req-answer-text > :first-child { margin-top: 0; }
.req-answer-text > :last-child { margin-bottom: 0; }
.req-answer-text p { margin: 0 0 8px; }
.req-answer-text strong, .req-answer-text b { color: #fff; font-weight: 700; }
.req-answer-text h1, .req-answer-text h2, .req-answer-text h3, .req-answer-text h4 {
    margin: 12px 0 4px; font: 700 14px/1.4 var(--bb-font); color: #fff; letter-spacing: 0;
}
.req-answer-text h1, .req-answer-text h2 { font-size: 15px; }
.req-answer-text h4 { font-size: 13.5px; color: var(--bb-link); }
.req-answer-text ul, .req-answer-text ol { margin: 0 0 8px; padding-left: 22px; }
.req-answer-text li { margin: 2px 0; padding-left: 2px; }
.req-answer-text li > p { margin: 0; }
.req-answer-text li > ul, .req-answer-text li > ol { margin: 2px 0 0; }
.req-answer-text blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--bb-raised); color: var(--bb-muted); }
.req-answer-text blockquote > :last-child { margin-bottom: 0; }
.req-answer-text hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .14); margin: 10px 0; }
.req-answer-text code, .req-answer-text pre { font: 400 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.req-answer-text code { padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .3); color: #fff; }
.req-answer-text pre { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .3); overflow-x: auto; max-width: 100%; white-space: pre; overflow-wrap: normal; }
.req-answer-text pre code { padding: 0; background: none; border-radius: 0; }
.req-answer-text a { color: var(--bb-link); text-decoration: underline; text-underline-offset: 2px; }
.req-answer-text a:hover { color: #BFD8FF; }
/* A table scrolls sideways inside its own box, so a wide one never widens the page. */
.req-table-wrap { margin: 0 0 8px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.req-table-wrap table { border-collapse: collapse; font-size: 12.5px; line-height: 1.4; color: var(--bb-soft); }   /* a bare table is dark text for the white tables elsewhere */
.req-table-wrap th, .req-table-wrap td { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .12); text-align: left; vertical-align: top; overflow-wrap: normal; }
.req-table-wrap th { background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; white-space: nowrap; }
.req-table-wrap tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
.req-toggle { align-self: flex-start; }
.req-note { margin: 0; font: 400 12.5px/1.45 var(--bb-font); color: var(--bb-muted); overflow-wrap: anywhere; }
.req-note.is-error { color: #F08080; }

.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat-tile {
    background: var(--bb-card); border-radius: 12px; padding: 18px 22px; min-width: 0;
    display: flex; align-items: center; gap: 18px; border-left: 3px solid transparent;
}
.stat-num { font: 700 34px/1 var(--bb-font); flex-shrink: 0; }
.stat-label { font: 400 15px var(--bb-font); color: #fff; }
.stat-sub { font: 400 12.5px/1.35 var(--bb-font); color: var(--bb-muted); }
.tile-red { border-left-color: var(--bb-red); }      .tile-red .stat-num { color: #F08080; }
.tile-amber { border-left-color: var(--bb-amber); }  .tile-amber .stat-num { color: #F5BE5A; }
.tile-blue { border-left-color: var(--bb-blue); }    .tile-blue .stat-num { color: var(--bb-link); }
.tile-green { border-left-color: var(--bb-green); }  .tile-green .stat-num { color: #7ED99A; }

.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.today-side, .today-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.today-main > .bb-panel { padding: 22px 24px; gap: 16px; }

/* Segmented control (Briefs / Agenda / Summaries) — shown, but inert until the calendar is connected. */
.seg { display: flex; background: var(--bb-page); border-radius: 8px; padding: 3px; }
.seg button { border: 0; background: none; border-radius: 6px; padding: 6px 14px; font: 400 13px var(--bb-font); color: var(--bb-muted); }
.seg button.on { background: var(--bb-hover); color: #fff; }
.seg button:disabled { cursor: not-allowed; }

/* Needs you (pending review-queue items) */
.need-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--bb-line); }
.need-item:first-child { border-top: 0; padding-top: 0; }
.need-kind { font: 700 11px/1 var(--bb-font); letter-spacing: .1em; text-transform: uppercase; color: #F5BE5A; }
.need-item[data-kind="general"] .need-kind, .need-item[data-kind="ramp-suggestion"] .need-kind { color: var(--bb-link); }
.need-item[data-kind="import-check"] .need-kind { color: var(--bb-faint); }
.need-title { font: 400 14px/1.35 var(--bb-font); color: #fff; overflow-wrap: anywhere; }
.need-ctx { font: 400 12.5px/1.4 var(--bb-font); color: var(--bb-muted); overflow-wrap: anywhere; }
.need-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.need-btn { border: 0; border-radius: 6px; padding: 6px 10px; background: var(--bb-blue); color: #fff; font: 700 12px var(--bb-font); cursor: pointer; }
.need-btn.alt { background: var(--bb-hover); }
.need-btn:hover { filter: brightness(1.1); }
.need-btn:disabled { opacity: .6; cursor: wait; }
.need-more { padding-top: 12px; border-top: 1px solid var(--bb-line); }
.need-btn.ghost { background: none; color: var(--bb-muted); font-weight: 400; }
.need-btn.ghost:hover { color: #fff; filter: none; }
/* "Pick client": a client select + File / Cancel under an inbound-email item (hidden until asked for). */
.pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pick-row[hidden] { display: none; }
.pick-select {
    flex: 1 1 200px; min-width: 0; max-width: 100%; border: 0; border-radius: 6px; padding: 6px 8px;
    background: #fff; color: #404040; font: 400 13px var(--bb-font);
}

/* Today's meetings (Google Calendar; empty state until connected) */
.mtg-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--bb-line); }
.mtg-time { font: 700 16px var(--bb-font); color: #fff; white-space: nowrap; }
.mtg-period { margin-left: 3px; font: 400 11px var(--bb-font); color: var(--bb-faint); }
.mtg-meta { font: 400 12px var(--bb-font); color: var(--bb-faint); }
.mtg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mtg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mtg-title { font: 700 16px/1.35 var(--bb-font); color: #fff; min-width: 0; overflow-wrap: anywhere; }
.mtg-title .link-btn { font: 700 16px var(--bb-font); }
.mtg-tags { display: flex; gap: 6px; flex-shrink: 0; }
.mtg-tag { font: 700 11px var(--bb-font); letter-spacing: .04em; border-radius: 5px; padding: 4px 8px; }
.tag-internal { background: var(--bb-hover); color: var(--bb-soft); }
.tag-brief { background: #DCE9FB; color: #0E3A73; text-decoration: none; }
.brief-list-head { font: 700 11px var(--bb-font); letter-spacing: .06em; text-transform: uppercase; color: var(--bb-soft); padding-top: 12px; }
.brief-note { font-size: 12.5px; color: var(--bb-soft); margin: 10px 0 0; }
.mtg-sub { font: 400 13px var(--bb-font); color: var(--bb-muted); overflow-wrap: anywhere; }

/* Brain activity (recently finished requests) */
.act-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--bb-line); }
.act-item .ms { font-size: 17px; color: var(--bb-blue); margin-top: 1px; }
.act-item.failed .ms { color: #F08080; }
.act-text { font: 400 13px/1.45 var(--bb-font); color: var(--bb-soft); overflow-wrap: anywhere; }
.act-text .link-btn { font-size: 13px; }
.act-text .act-fail { color: #F08080; }
.act-when { font: 400 12px var(--bb-font); color: var(--bb-faint); white-space: nowrap; }

/* Due this week */
.due-week { display: flex; flex-direction: column; gap: 10px; }
.due-head { display: flex; align-items: center; gap: 10px; }
.due-all { margin-left: auto; }
.due-table { min-width: 640px; }
.due-table th:nth-child(1) { width: 22%; } .due-table th:nth-child(2) { width: 32%; }
.due-table th:nth-child(3) { width: 16%; } .due-table th:nth-child(4) { width: 14%; }

/* ---- Clients ---- */
.clients-v2 .client-filter {
    width: 300px; flex-shrink: 0; box-sizing: border-box; padding: 26px 16px;
    background: transparent; border-right: 1px solid rgba(255, 255, 255, .08);
    display: flex; flex-direction: column; gap: 22px;
}
.rail-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rail-label { padding: 0; font: 700 13px var(--bb-font); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
legend.rail-label { margin-bottom: 10px; }   /* a fieldset's legend sits outside the flex gap */
.clients-v2 .searchable-select-input, .clients-v2 .rail-select {
    width: 100%; box-sizing: border-box; border: 0; border-radius: 8px; padding: 12px 14px; background-color: #fff;
    font: 400 15px var(--bb-font); color: #404040;
}
.clients-v2 .searchable-select-input::placeholder { color: #8A96A3; }
.clients-v2 .rail-select {
    appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23404040' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.rail-check { display: flex; align-items: flex-start; gap: 10px; font: 400 15px/1.3 var(--bb-font); color: var(--bb-text); cursor: pointer; }
.rail-check input {
    appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0;
    border-radius: 3px; background: #fff; cursor: pointer;
}
.rail-check input:checked {
    background: var(--bb-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.rail-check input:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }
.rail-check.is-disabled { color: var(--bb-faint); cursor: not-allowed; }
.rail-check.is-disabled input { background: rgba(255, 255, 255, .22); cursor: not-allowed; }
.rail-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--bb-faint); }

.clients-v2 #client-list-content { padding: 26px 28px 34px; display: flex; flex-direction: column; min-width: 0; }
/* Space between the pager and the groups lives in margins, not flex gap: showClientList() sets an inline display:block that would drop a gap. */
.clients-v2 #client-list-content > * + * { margin-top: 28px; }
.clients-v2 #client-list-content .projects-pager { margin: 0; }
.client-group { display: flex; flex-direction: column; gap: 12px; }
.client-group-head { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 20px var(--bb-font); color: #fff; }
.group-count { font: 700 12px var(--bb-font); background: var(--bb-blue); color: #fff; border-radius: 999px; padding: 3px 10px; }
.clients-table-v2 { min-width: 760px; table-layout: fixed; }
.clients-table-v2 th:nth-child(1) { width: 28%; } .clients-table-v2 th:nth-child(2) { width: 25%; }
.clients-table-v2 th:nth-child(3) { width: 16%; } .clients-table-v2 th:nth-child(4) { width: 31%; }
.clients-table-v2 td { overflow-wrap: anywhere; }
.clients-table-v2 tbody tr { cursor: pointer; }
.clients-table-v2 tbody tr:hover { background: #F5F8FC; }
.cell-link {
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    font: 700 14px var(--bb-font); color: var(--bb-navy); text-decoration: underline;
}
.cell-link:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; }
.cell-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted-text); }
.cell-small { font-size: 13px; }
.cell-muted { font-size: 13px; color: var(--muted-text); }
.cell-value { font-weight: 700; }
.next-up { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.flag-chip { font: 700 10.5px var(--bb-font); letter-spacing: .04em; border-radius: 4px; padding: 3px 7px; white-space: nowrap; flex-shrink: 0; }
.flag-red { color: #fff; background: var(--bb-red); }
.flag-grey { color: var(--muted-text); background: #EEF2F5; }
.flag-amber { color: #7A4A00; background: #FCEBC7; }
.flag-blue { color: #0E3A73; background: #DCE9FB; }
.next-up .flag-chip + .flag-chip { margin-left: 4px; }
.client-empty { margin: 0; padding: 32px 8px; text-align: center; font: 400 15px/1.5 var(--bb-font); color: var(--bb-muted); }

/* Client detail: the book-of-business fields in a two-column key/value list. */
.client-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 0.85rem; }
.client-facts dt { font-weight: 700; color: var(--secondary); }
.client-facts dd { margin: 0; color: var(--dark-text); overflow-wrap: anywhere; }

/* ---- Coming-soon pages (Policies & plans, Deadlines) ---- */
.soon-card {
    max-width: 760px; box-sizing: border-box; background: var(--bb-card); border-radius: 14px; padding: 32px 36px;
    display: flex; flex-direction: column; gap: 12px; font: 400 15px/1.55 var(--bb-font); color: var(--bb-soft);
}
.soon-icon { font-size: 32px; color: var(--bb-blue); }
.soon-kicker { margin: 0; font: 700 11px var(--bb-font); letter-spacing: .14em; text-transform: uppercase; color: var(--bb-faint); }
.soon-card h2 { margin: 0; font: 400 30px/1.15 var(--bb-serif); color: #fff; }
.soon-card p { margin: 0; }
.soon-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.soon-foot { border-top: 1px solid var(--bb-line); padding-top: 12px; margin-top: 4px !important; font-size: 13.5px; color: var(--bb-muted); }

/* ---- Review queue: light text on the navy panels ---- */
.reviews-view > h2 { margin: 0 auto 1.25rem; max-width: 1200px; font: 400 30px/1.1 var(--bb-serif); color: #fff; }
.review-card { background: var(--bb-card); border-color: rgba(255, 255, 255, .08); color: var(--bb-soft); }
.review-header { border-bottom-color: var(--bb-line); }
.review-agent { color: var(--bb-link); }
.review-timestamp { color: var(--bb-faint); }
.review-context { background: rgba(38, 135, 255, .10); border-left-color: var(--bb-blue); }
.review-question strong { color: var(--bb-link); }
.custom-response-input, .review-textarea { color: #404040; }
.review-header { gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.review-header .review-timestamp { margin-left: auto; }
.review-kind { font: 700 11px var(--bb-font); letter-spacing: .1em; text-transform: uppercase; color: #F5BE5A; }
.review-card[data-kind="ramp-suggestion"] .review-kind, .review-card[data-kind="general"] .review-kind { color: var(--bb-link); }
.review-context div { overflow-wrap: anywhere; }
.review-warn { color: #F5BE5A; }
.review-readonly { margin: .5rem 0 0; font: 400 13px var(--bb-font); color: var(--bb-faint); }
.review-option-btn { background: var(--bb-blue); color: #fff; }
.review-option-btn.secondary, .review-pick-btn { background: var(--bb-hover); color: #fff; }
.review-pick-btn, .review-dismiss-btn {
    border: none; padding: 0.75rem 1.25rem; border-radius: var(--button-radius); cursor: pointer; font-weight: 600;
}
.review-dismiss-btn { background: none; color: var(--bb-muted); font-weight: 400; }
.review-dismiss-btn:hover { color: #fff; }
.review-option-btn:disabled, .review-pick-btn:disabled, .review-dismiss-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.review-card .pick-row { margin: 0 0 1rem; }
.review-free-form .review-options { margin-top: .75rem; }
.review-filters {
    max-width: 1200px; margin: 0 auto 1.25rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px;
}
.review-filter { display: flex; flex-direction: column; gap: 6px; font: 700 12px var(--bb-font); letter-spacing: .08em; text-transform: uppercase; color: var(--bb-muted); }
.review-filter select {
    min-width: 190px; border: 0; border-radius: 8px; padding: 9px 12px; background: #fff; color: #404040;
    font: 400 14px var(--bb-font); letter-spacing: 0; text-transform: none;
}
.review-filter-note { font: 400 13px var(--bb-font); color: var(--bb-faint); padding-bottom: 9px; }

/* ---- Assets under administration (Today) ---- */
.aua-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: center; }
.aua-stats { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aua-total-label { font: 700 11px/1.2 var(--bb-font); letter-spacing: .1em; text-transform: uppercase; color: var(--bb-faint); }
.aua-total { font: 400 34px/1.1 var(--bb-serif); color: #fff; overflow-wrap: anywhere; }
.aua-change { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid var(--bb-line); }
.aua-change-label { font: 400 13px var(--bb-font); color: var(--bb-muted); }
.aua-change-val { font: 700 15px var(--bb-font); display: inline-flex; align-items: baseline; gap: 6px; }
.aua-change-val.is-up { color: var(--bb-green); }
.aua-change-val.is-down { color: var(--bb-red); }
.aua-change-val.is-flat { color: var(--bb-faint); }
.aua-tri { font-size: 11px; }
.aua-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font: 400 12px var(--bb-font); color: var(--bb-muted); }
.aua-key::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 8px; vertical-align: middle; border-top: 3px solid var(--bb-blue); border-radius: 2px; }
.aua-key-prev::before { border-top: 2.5px dashed #F08080; }
.aua-wrap.is-sparse { align-items: start; }
.aua-svg.is-narrow .aua-axis { font-size: 13px; }
.aua-fig { min-width: 0; }
.aua-chart { position: relative; }
.aua-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.aua-grid { stroke: var(--bb-line); stroke-width: 1; }
.aua-axis { fill: var(--bb-faint); font: 400 11.5px var(--bb-font); }
.aua-stop-a { stop-color: var(--bb-blue); stop-opacity: .38; }
.aua-stop-b { stop-color: var(--bb-blue); stop-opacity: 0; }
.aua-area { fill: url(#aua-grad); stroke: none; }
.aua-line-cur { fill: none; stroke: var(--bb-blue); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.aua-line-prev { fill: none; stroke: #F08080; stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linejoin: round; }
.aua-line-cur-dot { fill: var(--bb-blue); }
.aua-line-prev-dot { fill: var(--bb-red); }
.aua-end { fill: var(--bb-blue); stroke: var(--bb-card); stroke-width: 3; }
.aua-guide { stroke: var(--bb-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.aua-tip {
    position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; z-index: 2;
    display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; white-space: nowrap;
    background: var(--bb-ink); border: 1px solid rgba(255, 255, 255, .14); font: 400 12.5px var(--bb-font); color: var(--bb-soft);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
}
.aua-tip[hidden] { display: none; }
.aua-tip b { color: #fff; }
.aua-tip-cur { color: var(--bb-link); }
.aua-tip-prev { color: #F08080; }
.aua-from { font: 400 13px var(--bb-font); color: var(--bb-muted); }
.aua-start { margin: 8px 0 0; font: 400 12.5px var(--bb-font); color: var(--bb-faint); text-align: center; }
.aua-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 400 13px var(--bb-font); color: var(--bb-muted); }
.aua-filter select { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: var(--bb-raised); color: #fff; font: 400 13px var(--bb-font); }
.aua-nochart, .aua-foot { margin: 0; font: 400 13px var(--bb-font); color: var(--bb-faint); }
.aua-foot { margin-top: 14px; }

/* ---- Responsive ---- */
@media (max-width: 1240px) {
    .today-grid { grid-template-columns: minmax(0, 1fr); }
    .aua-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .today-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 1100px) {
    .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clients-v2 .client-filter { width: 250px; }
}
@media (max-width: 960px) {
    .header-content { gap: 12px; }
    .refresh-indicator { display: none; }
    .tab, .nav-top { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 768px) {
    .header { min-height: 64px; padding: 10px 16px; }
    .header-logo { height: 26px; min-width: 0; flex-shrink: 1; object-fit: contain; object-position: left center; max-width: 52vw; }
    .header-separator { height: 24px; }
    .header h1 { font-size: 18px; text-align: right; }

    /* One-tap shortcut to Text the Brain (38px round, chat-bubble icon). */
    .header-text-shortcut {
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 38px; height: 38px; border-radius: 50%; color: var(--bb-navy);
        background: #EEF3FA; border: 1px solid #C9D4E3;
    }
    .header-text-shortcut:hover, .header-text-shortcut:focus-visible { background: #DCE7F5; }
    .header-text-shortcut svg { width: 20px; height: 20px; }

    .tabs { min-height: 0; padding: 0; }
    .tab, .nav-top { min-height: 48px; padding: 0 16px; width: 100%; justify-content: flex-start; }
    .nav-group-end { margin-left: 0; }
    .nav-dropdown { min-width: 0; box-shadow: none; border: none; background-color: rgba(0, 0, 0, .18); }
    .nav-dropdown .tab, .nav-dropdown .nav-dropdown-link { min-height: 44px; padding: 12px 16px 12px 2.4rem; display: flex; align-items: center; }

    .bb-page { padding: 18px 16px 26px; gap: 18px; }
    .today-greeting { font-size: 26px; }
    .ask-section { padding: 4px 10px 10px; border-radius: 16px; }
    .ask-section.is-collapsed { padding-bottom: 4px; }
    .ask-bar { padding: 12px; }
    .ask-row { gap: 8px; }
    .ask-chips, .ask-status, .ask-email { padding-left: 0; }
    .ask-email { min-height: 44px; }
    .today-side { display: flex; }
    .bb-panel, .today-main > .bb-panel { padding: 18px 16px; }
    /* Phone: one column — meetings, needs you, due this week, then Brain activity last. */
    .today-grid { display: flex; flex-direction: column; align-items: stretch; }
    .today-grid > *, .due-week { width: 100%; min-width: 0; box-sizing: border-box; }
    .aua-total { font-size: 30px; }
    .aua-fig { padding-top: 12px; border-top: 1px solid var(--bb-line); }
    .today-main, .today-side { display: contents; }
    .today-meetings { order: 1; }
    .today-needs { order: 2; }
    .due-week { order: 3; }
    .today-activity { order: 4; }
    .mtg-item { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
    .mtg-head { flex-direction: column; gap: 6px; }
    .reviews-view { padding: 1.25rem 16px; }
    .review-card { padding: 1rem; }
    .review-filter, .review-filter select { min-width: 0; width: 100%; }
    .review-filters { gap: 10px; }
    .review-filter { flex: 1 1 160px; }
    .review-custom-response { flex-wrap: wrap; }
    .custom-response-input { min-width: 0; }

    .clients-v2 .client-filter { width: 100%; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 18px 16px; gap: 16px; }
    .clients-v2 #client-list-content { padding: 18px 16px 26px; }
    /* Phone: each client is a card (no sideways scrolling, nothing clipped); every value carries its column label. */
    .clients-table-v2 { min-width: 0; table-layout: auto; }
    .clients-table-v2 thead { display: none; }
    .clients-table-v2, .clients-table-v2 tbody, .clients-table-v2 tr, .clients-table-v2 td { display: block; width: 100%; box-sizing: border-box; }
    .clients-table-v2 tr { padding: 12px 16px; border-top: 1px solid var(--bb-row-line); }
    .clients-table-v2 tr:first-child { border-top: 0; }
    .clients-table-v2 td, .clients-table-v2 td:last-child { padding: 3px 0; border: 0; text-align: left; }
    .clients-table-v2 td[data-label]::before { content: attr(data-label); display: block; font: 700 10.5px/1.3 var(--bb-font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-text); }
    .clients-table-v2 td:first-child { padding-bottom: 6px; }
    .clients-table-v2 .cell-sub { overflow-wrap: anywhere; }
    .client-group-head { margin-bottom: 0; }
    .client-group-head { font-size: 18px; }
    .soon-card { padding: 24px 20px; }
    .soon-card h2 { font-size: 26px; }
}
@media (max-width: 560px) {
    .stat-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .stat-tile { padding: 14px 16px; }
    .stat-num { font-size: 30px; }
    .header-content { gap: 10px; }
    .header-separator { display: none; }
    .header-logo { max-width: 38vw; height: auto; }
    .header h1 { font-size: 15px; text-align: right; }
    .seg button { padding: 6px 10px; }
    /* Until deadlines exist the table is a header + one message row: let it fit the phone instead of scrolling. */
    .due-table { min-width: 0; }
    .due-table th { padding: 10px 8px; font-size: 11px; white-space: normal; }
}

/* Respect a reduced-motion preference: no pulsing dot, slides or hover lifts. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
}

/* DUE THIS WEEK days-left chips (renderDueThisWeek) */
.due-chip { display: inline-block; font: 700 11px var(--bb-font); letter-spacing: .04em; border-radius: 5px; padding: 4px 8px; white-space: nowrap; }
.due-overdue { background: #E35D5D; color: #fff; }
.due-soon { background: var(--bb-orange); color: #fff; }
.due-later { background: #E4EFFF; color: #113a72; }
.bb-table td.due-source { color: #55657A; }
.bb-table .due-client { color: #113a72; text-decoration: underline; font-weight: 500; }

/* Feature pages (pages/registry.js) */
.page-module-denied { max-width: 640px; margin: 48px auto; padding: 0 16px; color: var(--bb-muted); }
.page-module-denied h2 { color: #fff; font: 400 26px/1.2 var(--bb-serif); margin: 0 0 8px; }