.tecology-timer-btn {
    margin-right: 6px;
    cursor: pointer;
}

/* Prevent child elements (including feather SVGs) from absorbing pointer events */
.tecology-timer-btn * {
    pointer-events: none;
}

.tecology-timer-btn .icon-16 {
    vertical-align: middle;
    margin-right: 4px;
}

/* ----------------------------------------------------------------
 * Calendar week/day view: let a task block's height follow its time
 * span (so resizing visibly grows/shrinks it). The custom title-wrap
 * rule (white-space:normal) otherwise lets the wrapped title drive the
 * block's apparent size. Here the title still wraps but clips inside
 * the duration-sized block. Month/list view wrapping is unaffected.
 * ---------------------------------------------------------------- */
.fc-timegrid-event .fc-event-main {
    overflow: hidden;
}
.fc-timegrid-event .fc-event-title,
.fc-timegrid-event .tecology-ev-title {
    white-space: normal;
    overflow: hidden;
}

/* Month view: keep titles on one line and ellipsis-truncate so they don't spill
 * outside the day cell. Hover shows the full title (set via eventDidMount). This
 * overrides the site custom rule that wraps .fc-event-title everywhere. */
.fc-daygrid-event .fc-event-title,
.fc-daygrid-event .fc-event-title-container,
.fc-daygrid-event .tecology-ev-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}
.fc-daygrid-event {
    overflow: hidden;
}

/* (Dark-mode event colours are handled by the accent style in calendar-dnd.js:
 * near-black fill + status-coloured left accent + lightened status-coloured text.) */

/* Dark mode: force every inner part of an event transparent so the dark root
 * fill (set per-event in calendar-dnd.js) shows through uniformly. This kills the
 * bright "title strip" that FullCalendar paints on .fc-event-main for some events
 * — done in CSS (applies on every repaint) because a one-time JS override doesn't
 * survive FC re-applying it on later renders. */
.color-000000 .fc .fc-event .fc-event-main,
.color-000000 .fc .fc-event .fc-event-main-frame,
.color-000000 .fc .fc-event .fc-event-title,
.color-000000 .fc .fc-event .fc-event-title-container,
.color-000000 .fc .fc-event .fc-event-time,
.color-000000 .fc .fc-event .fc-event-main span {
    background-color: transparent !important;
    background: transparent !important;
}

/* Fade the "today" highlight (default FullCalendar mustard) to a subtle neutral
 * in dark mode — week/day view especially. High specificity (.color-000000 prefix)
 * to win over the theme + FC defaults regardless of stylesheet order. */
.color-000000 .fc {
    --fc-today-bg-color: rgba(255, 255, 255, 0.035);
}
.color-000000 .fc .fc-day-today,
.color-000000 .fc .fc-timegrid-col.fc-day-today,
.color-000000 .fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

/* Breathing room between the event content and the coloured left accent bar */
.fc-event .tecology-ev-title,
.fc-event .tecology-ev-time {
    padding-left: 6px;
}

/* Avoid the white/month flash before our JS configures FullCalendar (swaps the
 * feed source, switches mobile default to list view). Hide the calendar element
 * at every viewport until we've marked it ready — and give it the dark-theme
 * background so the gap behind it doesn't paint white. The .color-000000
 * background rule applies in dark mode; the default rule covers light theme. */
#event-calendar:not(.tecology-cal-ready) {
    visibility: hidden;
}
#event-calendar,
.calendar-container,
.event-calendar-wrapper {
    background-color: transparent;
}
.color-000000 #event-calendar:not(.tecology-cal-ready) {
    background-color: #0a0a0a;
}

/* iOS double-tap workaround for the sidebar menu — a :hover background-color on
 * a touch device makes Safari/Chrome require a 2nd tap (first tap = "show
 * hover", second tap = follow link). Disable the hover paint on coarse pointers
 * so the first tap navigates immediately. */
@media (hover: none) and (pointer: coarse) {
    /* Kill every hover background on the sidebar (a, li, and the toggled
     * variants) so iOS doesn't treat the first tap as "show hover". The
     * `.color-000000` prefix beats the theme's `!important` rules. */
    .sidebar-menu li:hover,
    .sidebar-menu li:hover > a,
    .sidebar-menu li a:hover,
    .sidebar-menu li a:focus,
    .sidebar-menu li ul li:hover,
    .sidebar-menu li ul li a:hover,
    .sidebar-menu li ul li a:focus,
    .sidebar-toggled .sidebar-menu li:hover,
    .sidebar-toggled .sidebar-menu li:hover > a,
    .sidebar-toggled .sidebar-menu li ul li a:hover,
    .color-000000 .sidebar-menu li:hover,
    .color-000000 .sidebar-menu li:hover > a,
    .color-000000 .sidebar-menu li a:hover,
    .color-000000 .sidebar-menu li a:focus,
    .color-000000 .sidebar-menu li ul li:hover,
    .color-000000 .sidebar-menu li ul li a:hover,
    .color-000000 .sidebar-menu li ul li a:focus,
    .color-000000 .sidebar-toggled .sidebar-menu li:hover,
    .color-000000 .sidebar-toggled .sidebar-menu li:hover > a,
    .color-000000 .sidebar-toggled .sidebar-menu li ul li a:hover {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* Also tell the browser to skip the synthetic hover dwell and fire the
     * tap immediately on touch-only inputs. */
    .sidebar,
    .sidebar-menu,
    .sidebar-menu a,
    #left-menu-toggle-mask,
    #left-menu-toggle-mask a {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

@media (max-width: 768px) {

    /* List view overflow fix on mobile — the table was extending past the page
     * gutter, making it look misaligned. Constrain to the container width and
     * clip any stray horizontal overflow. */
    #event-calendar {
        max-width: 100%;
        overflow-x: hidden;
    }
    #event-calendar .fc-list,
    #event-calendar .fc-list-table {
        width: 100% !important;
        max-width: 100%;
    }
    /* Tighten the list view: time + dot hug their content (width:1% table trick)
     * so the title column gets the rest of the row, time matches the title font
     * size, and row padding is a touch tighter so more events fit per screen. */
    #event-calendar .fc-list-event-time {
        width: 1%;
        white-space: nowrap;
        padding: 6px 8px !important;
    }
    #event-calendar .fc-list-event-graphic {
        width: 1%;
        padding: 6px 6px !important;
    }
    #event-calendar .fc-list-event-title {
        width: auto;
        word-break: break-word;
        overflow-wrap: anywhere;
        padding: 6px 8px !important;
    }

    /* Mobile modals go FULL-SCREEN: fill the visible viewport (100dvh excludes
     * browser chrome; 100vh falls back), no top/bottom gap, body scrolls inside,
     * footer pinned with all action buttons visible. Specificity matches the
     * theme's `.modal .modal-dialog .modal-content` chain so it wins reliably. */
    .modal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }
    .modal .modal-dialog .modal-content {
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0; /* full-screen looks better without rounded corners */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* contain children so the body scrolls, not the content */
    }
    .modal .modal-dialog .modal-content .modal-body {
        overflow-y: auto !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    /* Action buttons share the row equally (3 buttons → 1/3 each) — no horizontal
     * scroll needed now that the redundant Close button is hidden. Tighter padding
     * and gap so they fit a phone width comfortably. */
    .modal .modal-dialog .modal-content .modal-footer {
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        gap: 6px;
        padding: 0.5rem !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }
    .modal .modal-dialog .modal-content .modal-footer > .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 8px 6px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important; /* spacing between icon and text */
    }
    /* Match icon size to button font and force `display: block` so the SVG
     * has no inline baseline of its own — `align-items: center` on the
     * button then centres it cleanly against the text. */
    .modal .modal-dialog .modal-content .modal-footer > .btn i,
    .modal .modal-dialog .modal-content .modal-footer > .btn svg {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        display: block !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        vertical-align: middle !important;
        position: relative !important;
        top: 0 !important;
    }
    /* Redundant on mobile: the modal already has an X close at the top, so a
     * second Close in the footer just eats space. Hide it. */
    .modal .modal-dialog .modal-content .modal-footer .close-modal {
        display: none !important;
    }
}

/* ----------------------------------------------------------------
 * "Now" indicator (week + day views): Google-Calendar–style minimal
 * line showing the current time.
 *
 * Two pieces:
 *   1. A horizontal dashed line extending across the ENTIRE week (not
 *      just the current day's column). FullCalendar paints the line
 *      inside the current day column by default — we let it overflow
 *      visually by allowing overflow on the column containers and
 *      pushing the line's right edge way off-screen so it spans every
 *      column to its right. The neighbouring days' grid lines paint on
 *      top, which is the look we want.
 *   2. A small filled dot on the time-axis gutter (replaces FC's chunky
 *      default arrow) — anchors the line and reads as a clean marker.
 * ---------------------------------------------------------------- */

/* Let the line escape its parent column so it can stretch full-width
 * AND bridge left into the time-axis gutter. We relax overflow on every
 * wrapper between the indicator and the timegrid body. (Day cells keep
 * normal overflow rules so event blocks still clip correctly.) */
.fc .fc-timegrid-col-frame,
.fc .fc-timegrid-col,
.fc .fc-timegrid-cols,
.fc .fc-timegrid-cols > table,
.fc .fc-timegrid-body,
.fc .fc-timegrid-now-indicator-container {
    overflow: visible !important;
}

.fc .fc-timegrid-now-indicator-line {
    border-top-width: 0 !important;
    border-bottom: 1px dashed var(--fc-now-color, #39b691) !important;
    /* Extend the line across the calendar grid. The line is absolutely
     * positioned inside the current day's column, so we pull the right
     * edge well past any viewport width, and nudge the left edge back
     * by ~100px so it bridges the small gap into the time-axis gutter
     * and visually meets the left-border tick (below). */
    left: -200px !important;       /* bridge into the time-axis gutter */
    right: -10000px !important;
    opacity: 0.9;
    z-index: 4; /* sit above the column grid lines */
    pointer-events: none;
}

/* Replace FC's CSS-border triangle with a thin vertical tick on the right
 * edge of the time-axis gutter — reads like a coloured left-border on the
 * current time row, anchoring the line without the dot's visual weight. */
.fc .fc-timegrid-now-indicator-arrow {
    border: none !important;
    width: 3px !important;
    height: 14px !important;
    background: var(--fc-now-color, #39b691) !important;
    border-radius: 1px !important;
    box-shadow: none !important;
    margin-top: -7px !important;   /* centre the tick on the line */
    margin-right: 0 !important;
    z-index: 5;
}

/* Dark mode: lean into the theme's hover-green accent so the line reads
 * clearly against the dark grid without being noisy. */
.color-000000 .fc {
    --fc-now-color: #39b691;
}

/* Bridge rendered inside `.fc-timegrid-body`, scrolls naturally with the
 * slot content (no JS re-sync, no jitter). JS sets `top` (current-time
 * offset) and `left` (start of the first day column, so the dashes don't
 * bleed into the time-axis gutter). Right edge runs to the body's end =
 * Sunday's right edge. */
.tecology-now-bridge {
    position: absolute;
    right: 0;
    height: 0;
    border-bottom: 1px dashed var(--fc-now-color, #39b691);
    opacity: 0.9;
    pointer-events: none;
    z-index: 4;
}

/* ----------------------------------------------------------------
 * Business-hours shading (Mon–Fri 09:00–17:00, set in calendar-dnd.js).
 * FullCalendar paints `.fc-non-business` over non-business areas. We
 * dim it just enough that the primary work window pops, without making
 * weekends or evenings unreadable — events outside business hours stay
 * fully legible.
 *
 * Light theme: very gentle warm grey.
 * Dark theme:  a touch of extra darkness over the grid base.
 * Month view: leave `.fc-non-business` alone (full-day weekend tint on
 * the month grid is visually heavy — week + day views are where it
 * pays off).
 * ---------------------------------------------------------------- */
.fc .fc-non-business {
    background: rgba(0, 0, 0, 0.05) !important;
}
.color-000000 .fc .fc-non-business {
    /* Dark mode: non-business hours should be DARKER than the working
     * grid, not lighter — "this area is off, the bright bit is what's in
     * use." Earlier versions added a white wash which inverted the read.
     * Pure black overlay at 0.22 sinks weekends/evenings without making
     * events unreadable. */
    background: rgba(0, 0, 0, 0.22) !important;
}
.fc .fc-daygrid-day.fc-non-business {
    background: transparent !important; /* skip month view */
}

/* Apple-style start–finish time line under the event title (week/day view) */
.fc-timegrid-event .tecology-ev-time {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small clock icon before the time range */
.tecology-ev-time svg {
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    margin-right: 3px;
}

/* Dark mode: drive title + time colour from the per-event variable set on the
 * event root (calendar-dnd.js). The variable lives on the root, which survives
 * re-renders, so the text stays the status colour after a drag/resize instead of
 * reverting to the theme's white. */
.color-000000 .fc .fc-event .tecology-ev-title,
.color-000000 .fc .fc-event .tecology-ev-time {
    color: var(--fc-event-text-color, #e8edf3) !important;
}

/* Instant styled tooltip (dark mode) shown on event hover */
.tecology-cal-tip {
    position: fixed;
    z-index: 99999;
    display: none;
    max-width: 320px;
    padding: 6px 10px;
    background: #1f2733;
    color: #e8edf3;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    white-space: normal;
}
.tecology-cal-tip .tecology-tip-title {
    font-weight: 600;
}
.tecology-cal-tip .tecology-tip-time {
    margin-top: 3px;
    opacity: 0.85;
    font-size: 11px;
    display: flex;
    align-items: center;
}
.tecology-cal-tip .tecology-tip-clock {
    margin-right: 4px;
    flex: 0 0 auto;
}

/* ================================================================
 * Retainer hours analytics (Retainers page) — Phase 1
 * Themed to sit naturally inside Rise (light + .color-000000 dark).
 * ================================================================ */

/* Page header: title hard-left, period filter hard-right */
.tec-retainer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
}
.tec-retainer-title { font-size: 18px; font-weight: 600; display: flex; align-items: center; line-height: 1; margin: 0 !important; }
.tec-retainer-title svg, .tec-retainer-title i { vertical-align: middle; flex: 0 0 auto; }
.tec-retainer-filter .form-control { height: 34px; padding: 2px 8px; }
/* On mobile the "Period" label just crowds the pickers — hide it */
@media (max-width: 768px) {
    .tec-period-label { display: none !important; }
}

/* Resource-planning summary band — equal-height flex cards, sub pinned to base.
 * (Row uses g-3 gutters + mb-3, so the card itself carries no extra margin.) */
.tec-summary-band .tec-stat {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    margin-bottom: 0;
    min-height: 104px;
}

/* Client column: wide enough that most names fit on one line, longest on two */
.tec-col-client { min-width: 260px; white-space: normal; line-height: 1.3; word-break: normal; overflow-wrap: break-word; }
/* 12-month trend: sparkline is 184px (fits the w200 column); just centre it */
.tec-col-trend { white-space: nowrap; }
.tec-col-trend .tec-spark { vertical-align: middle; }
.tec-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.7; }
.tec-stat-value { font-size: 28px; font-weight: 600; line-height: 1.2; margin-top: 4px; white-space: nowrap; }
.tec-stat-value .tec-unit { font-size: 15px; font-weight: 500; opacity: 0.6; margin-left: 2px; }
.tec-stat-sub { font-size: 12px; margin-top: auto; padding-top: 6px; }

/* Usage bar inside the table */
.tec-usage { display: inline-block; cursor: default; }
.tec-bar {
    display: inline-block;
    width: 84px; height: 8px;
    background: rgba(128,128,128,0.22);
    border-radius: 5px; overflow: hidden; vertical-align: middle;
}
.tec-bar-fill { display: block; height: 100%; border-radius: 5px; }
.tec-bar-ok   { background: #39b691; }
.tec-bar-near { background: #e0a800; }
.tec-bar-over { background: #f5325c; }
.tec-bar-label { font-size: 11px; margin-left: 6px; opacity: 0.8; vertical-align: middle; }

/* Status pills */
.tec-pill {
    display: inline-block; padding: 2px 9px; border-radius: 11px;
    font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.tec-pill-ok   { background: rgba(57,182,145,0.16); color: #2fae89; }
.tec-pill-near { background: rgba(224,168,0,0.18);  color: #c6951a; }
.tec-pill-over { background: rgba(245,50,92,0.16);  color: #f5325c; }
.tec-pill-none { background: rgba(128,128,128,0.18); color: #999; }
.color-000000 .tec-pill-ok   { color: #4cd3a6; }
.color-000000 .tec-pill-near { color: #ecc14e; }
.color-000000 .tec-pill-over { color: #ff6182; }

/* Sparkline */
.tec-spark { vertical-align: middle; }

/* Drill-down detail */
.tec-retainer-detail .tec-mini-stat {
    text-align: center; padding: 8px 4px;
    border: 1px solid rgba(128,128,128,0.2); border-radius: 8px;
}
.tec-retainer-detail .tec-mini-stat span { display: block; font-size: 11px; text-transform: uppercase; opacity: 0.65; }
.tec-retainer-detail .tec-mini-stat strong {
    font-size: 21px; font-weight: 600; line-height: 1.15;
    display: inline-block; white-space: nowrap;
}
.tec-retainer-detail .tec-mini-stat strong span { font-size: inherit; font-weight: inherit; }
.tec-chart-wrap { padding: 6px 2px; }
.tec-chart { display: block; }

/* Section headings inside the drill-down */
.tec-retainer-detail h5 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
    font-weight: 700; opacity: 0.7;
}

/* Framed panels wrapping each table (header bar + scrollable body) */
.tec-panel {
    border: 1px solid rgba(128,128,128,0.18);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.015);
}
.color-000000 .tec-panel { background: rgba(255,255,255,0.02); }
.tec-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
    border-bottom: 1px solid rgba(128,128,128,0.18);
    background: rgba(128,128,128,0.05);
}
.color-000000 .tec-panel-head { background: rgba(255,255,255,0.03); }
.tec-panel-title { opacity: 0.72; }
.tec-panel-meta { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.9; }
.tec-panel-body { max-height: 300px; min-height: 150px; overflow-y: auto; }

/* Themed data tables — fully self-styled so they DON'T inherit Bootstrap's
 * white .table background in the dark modal. */
.tec-data-table { width: 100%; font-size: 12.5px; margin: 0; background: transparent !important; border-collapse: collapse; }
.tec-data-table thead th {
    position: sticky; top: 0; z-index: 1;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700;
    padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(128,128,128,0.22);
    color: #6b7178; background: #eef0f2;
}
.color-000000 .tec-data-table thead th { color: #aeb6bf; background: #1b2228; }
.tec-data-table tbody td {
    padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(128,128,128,0.12);
    vertical-align: top; background: transparent !important;
}
.color-000000 .tec-data-table tbody td { color: #e3e7ea; }
.tec-data-table tbody tr { background: transparent !important; }
.tec-data-table tbody tr:last-child td { border-bottom: 0; }
.tec-data-table tbody tr:hover td { background: rgba(57,182,145,0.07) !important; }
.color-000000 .tec-data-table tbody tr:hover td { background: rgba(255,255,255,0.045) !important; }
.tec-entry-note { font-size: 11.5px; opacity: 0.6; margin-top: 2px; line-height: 1.35; }
.tec-nowrap { white-space: nowrap; }
.tec-ledger td, .tec-ledger th { font-variant-numeric: tabular-nums; }
.tec-plan-history { font-size: 12.5px; }
.tec-plan-evt { padding: 3px 0; border-bottom: 1px dashed rgba(128,128,128,0.18); }
.tec-plan-month { display: inline-block; min-width: 64px; font-weight: 600; opacity: 0.8; }
.tec-current-allowance { padding: 8px 12px; }

/* Cursor-following tooltip (data-tec-tip) — retainer sparkline + chart */
.tec-tip {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    background: #1f2733;
    color: #e8edf3;
    font-size: 12px;
    line-height: 1.4;
    padding: 5px 9px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    max-width: 320px;
}

/* ---- Phase 2: retainer alerts ---- */

/* Subtle, colour-coded "needs attention" banner (page + drill-down) */
.tec-attention-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 8px;
    font-size: 13px; border: 1px solid transparent;
}
.tec-attention-banner .icon-16 { flex: 0 0 auto; }
.tec-attention-over {
    background: rgba(245,50,92,0.10); border-color: rgba(245,50,92,0.30); color: #f5325c;
}
.tec-attention-near {
    background: rgba(224,168,0,0.10); border-color: rgba(224,168,0,0.30); color: #c6951a;
}
.color-000000 .tec-attention-near { color: #ecc14e; }
.tec-attention-text { opacity: 0.95; }
.tec-attention-text strong { font-weight: 700; }

/* Notification bell text for our event */
.tec-notif-retainer { line-height: 1.4; }

/* Dashboard "Retainers" tile — FIXED body height (matches Events/Open Tickets
 * which use a 280–330px scroll container), with the donut/legend/capacity pinned
 * and the scoreboard list as the scrolling region. */
.tec-ret-widget .card-body.tec-ret-body {
    height: 330px;   /* matches the Events / Open Tickets scroll container exactly */
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
}

/* status dots (shared) */
.tec-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.tec-dot.over { background: #f5325c; }
.tec-dot.near { background: #e0a800; }
.tec-dot.ok   { background: #39b691; }

/* donut + legend row */
.tec-ret-top { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.tec-ret-donut { flex: 0 0 auto; }
.tec-ret-donut-svg .tec-donut-num { font-size: 33px; font-weight: 700; fill: currentColor; }
.tec-ret-donut-svg .tec-donut-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; fill: currentColor; opacity: 0.55; }
.tec-ret-legend { flex: 1 1 auto; }
.tec-ret-leg { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 3px 0; opacity: 0.9; }
.tec-ret-leg b { margin-left: auto; font-weight: 700; font-size: 15px; }
/* count colour matches its status (like All Tasks Overview) */
.tec-ret-leg b.over { color: #f5325c; }
.tec-ret-leg b.near { color: #c6951a; }
.color-000000 .tec-ret-leg b.near { color: #ecc14e; }
.tec-ret-leg b.ok { color: #2fae89; }
.color-000000 .tec-ret-leg b.ok { color: #4cd3a6; }

/* monthly capacity bar */
.tec-ret-capacity { margin-bottom: 18px; }
.tec-ret-cap-label { font-size: 12px; opacity: 0.75; display: flex; justify-content: space-between; margin-bottom: 5px; }
.tec-ret-cap-label span { font-weight: 600; opacity: 1; }
.tec-ret-cap-bar { height: 8px; border-radius: 5px; background: rgba(128,128,128,0.2); overflow: hidden; }
.tec-ret-cap-fill { height: 100%; border-radius: 5px; background: #39b691; }
.tec-ret-cap-fill.over { background: #f5325c; }

/* per-retainer scoreboard — scrolls past ~5 rows so the card stays a
 * consistent height; worst-first sort keeps at-risk retainers visible on top */
.tec-ret-scoreboard {
    flex: 1 1 auto;
    min-height: 0;            /* allow the flex child to shrink so it can scroll */
    margin-bottom: 8px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,0.4) transparent;
}
.tec-ret-scoreboard::-webkit-scrollbar { width: 6px; }
.tec-ret-scoreboard::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.35); border-radius: 3px; }
.tec-ret-scoreboard::-webkit-scrollbar-track { background: transparent; }
.tec-ret-srow { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }
.tec-ret-sname { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.9; min-width: 0; }
.tec-ret-sbar { flex: 0 0 56px; height: 6px; border-radius: 4px; background: rgba(128,128,128,0.2); overflow: hidden; }
.tec-ret-sfill { display: block; height: 100%; border-radius: 4px; }
.tec-ret-sfill.over { background: #f5325c; }
.tec-ret-sfill.near { background: #e0a800; }
.tec-ret-sfill.ok   { background: #39b691; }
.tec-ret-sfig { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }

.tec-ret-link { font-size: 12.5px; font-weight: 600; }

/* Overall monthly delivery progress bar (Retainers page) */
.tec-month-progress .card-body { padding: 16px 18px; }
.tec-mp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tec-mp-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.7; font-weight: 600; }
.tec-mp-figure { font-size: 13px; opacity: 0.9; }
.tec-mp-figure strong { font-size: 15px; }
.tec-mp-bar { height: 14px; border-radius: 8px; background: rgba(128,128,128,0.2); overflow: hidden; }
.tec-mp-fill {
    height: 100%; border-radius: 8px;
    background: linear-gradient(90deg, #2fae89, #39b691);
    min-width: 6px; transition: width .3s ease;
}
.tec-mp-fill.over { background: linear-gradient(90deg, #d32a4f, #f5325c); }

/* ---- Phase 3: client-facing retainer panel ---- */
.tec-client-summary { padding: 18px 20px; }
.tec-cs-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.7; font-weight: 600; margin-bottom: 8px; }
.tec-cs-figure { font-size: 15px; margin-bottom: 12px; }
.tec-cs-figure strong { font-size: 22px; font-weight: 700; }
.tec-cs-bar { margin-bottom: 12px; }
.tec-cs-standing { font-size: 13px; display: flex; align-items: center; }
.tec-cs-standing .icon-16 { margin-right: 6px; flex: 0 0 auto; }
.tec-client-chart-wrap { padding: 8px 2px 2px; }
.tec-client-retainer .tec-chart { display: block; width: 100%; }
.tec-chart-legend { font-size: 11px; opacity: 0.7; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.tec-chart-legend-line { display: inline-block; width: 20px; border-top: 1px dashed rgba(128,128,128,0.7); }
.tec-chart-axis { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 6px; }
.tec-chart-axis span { text-align: center; font-size: 11px; opacity: 0.6; }
/* Client collective table: totals footer + full-width trend sparkline */
#tec-client-retainer-table tfoot th { font-weight: 700; border-top: 2px solid rgba(128,128,128,0.28); padding-top: 10px; }
#tec-client-retainer-table .tec-col-trend .tec-spark { width: 100%; height: 44px; display: block; }

/* ---- Ticket CC row (email-style combo field above the reply editor) ---- */
.tec-cc-row { display:flex; flex-direction:row; align-items:center; gap:10px;
  background:transparent; border:none; padding:0; margin:0 0 10px 0; }
.tec-cc-label { font-weight:600; font-size:12px; opacity:0.5; text-transform:uppercase; letter-spacing:0.6px; flex:0 0 auto; user-select:none;
  align-self:stretch; display:inline-flex; align-items:center; border-right:1px solid rgba(128,128,128,0.3); padding-right:10px; margin-right:4px; }
/* The combo area borrows .form-control so it matches the editor's field
   background in any theme; we just let it grow and lay out chips inside. */
.tec-cc-field { display:flex !important; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px;
  height:auto !important; min-height:42px; padding:6px 10px; cursor:text; flex:1 1 auto; width:auto !important; }
#tec-cc-chips { display:inline-flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px; }
.tec-cc-chip { display:inline-flex; flex-direction:row; align-items:center; gap:7px; padding:3px 9px;
  border-radius:6px; font-size:15px; line-height:1.5; white-space:nowrap; cursor:default;
  background:rgba(128,128,128,0.14); border:1px solid rgba(128,128,128,0.28); }
.tec-cc-chip-text { display:inline-block; }
.tec-cc-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 8px; }
.tec-cc-chip.registered .tec-cc-dot, .tec-cc-dot.reg { background:#39b691; }
.tec-cc-chip.external .tec-cc-dot { background:#f5325c; }
.tec-cc-chip .tec-cc-remove, .tec-cc-chip .tec-cc-promote {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:4px; font-size:15px; line-height:1;
  text-decoration:none; color:inherit; }
.tec-cc-chip .tec-cc-remove { opacity:0.5; }
.tec-cc-chip .tec-cc-remove:hover { opacity:1; color:#f5325c; background:rgba(245,50,92,0.12); }
.tec-cc-chip .tec-cc-promote { color:#39b691; font-weight:700; opacity:0.85; }
.tec-cc-chip .tec-cc-promote:hover { opacity:1; background:rgba(57,182,145,0.14); }
.tec-cc-input-wrap { position:relative; flex:1; min-width:170px; }
#tec-cc-input { width:100%; border:none; outline:none; background:transparent; font-size:15px; padding:3px 2px; color:inherit; box-shadow:none; }
#tec-cc-input::placeholder { opacity:0.45; }
.tec-cc-saved { font-size:12px; color:#39b691; white-space:nowrap; flex:0 0 auto; }

/* Suggestion dropdown + add-contact popover — explicit light/dark variants
   (Rise has no theme class; JS sets .tec-dark from body luminance). */
.tec-cc-suggest { position:absolute; top:calc(100% + 6px); left:0; z-index:1080; min-width:280px;
  border-radius:10px; padding:4px; background:#ffffff; color:#333;
  border:1px solid rgba(0,0,0,0.15); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
.tec-cc-suggest .tec-cc-sug { display:flex; flex-direction:row; align-items:center; gap:9px;
  padding:7px 10px; border-radius:6px; color:inherit; text-decoration:none; }
.tec-cc-suggest .tec-cc-sug:hover { background:rgba(0,0,0,0.07); }
.tec-cc-sug-main { display:flex; flex-direction:column; line-height:1.35; }
.tec-cc-sug-name { font-size:14px; }
.tec-cc-sug-job { opacity:0.55; font-size:12px; margin-left:6px; }
.tec-cc-sug-email { opacity:0.55; font-size:12px; }
.tec-dark .tec-cc-suggest { background:#23272e; color:#dfe3e8; border-color:rgba(255,255,255,0.14); box-shadow:0 6px 18px rgba(0,0,0,0.5); }
.tec-dark .tec-cc-suggest .tec-cc-sug:hover { background:rgba(255,255,255,0.08); }

.tec-cc-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:1090; width:300px;
  border-radius:10px; padding:12px; background:#ffffff; color:#333;
  border:1px solid rgba(0,0,0,0.15); box-shadow:0 8px 22px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; gap:8px; white-space:normal; font-size:14px; }
.tec-dark .tec-cc-pop { background:#23272e; color:#dfe3e8; border-color:rgba(255,255,255,0.14); box-shadow:0 8px 22px rgba(0,0,0,0.55); }
.tec-cc-pop-title { font-weight:600; font-size:14px; }
.tec-cc-pop-email { font-size:12px; opacity:0.6; margin-top:-5px; }
.tec-cc-pop-names { display:flex; flex-direction:row; gap:8px; }
.tec-cc-pop input[type=text] { border:1px solid rgba(128,128,128,0.35); border-radius:6px; padding:6px 9px; font-size:14px;
  background:transparent; color:inherit; outline:none; width:100%; min-width:0; }
.tec-cc-pop input[type=text]:focus { border-color:#39b691; }
.tec-cc-pop-invite { display:flex; flex-direction:row; align-items:center; gap:7px; font-size:13px; opacity:0.85; margin:0; cursor:pointer; font-weight:400; }
.tec-cc-pop-invite input { margin:0; }
.tec-cc-pop-btns { display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:12px; margin-top:2px; }
.tec-cc-pop-btns a { font-size:13px; opacity:0.6; color:inherit; text-decoration:none; }
.tec-cc-pop-btns button { background:#39b691; color:#fff; border:none; border-radius:6px; padding:6px 13px; font-size:13.5px; cursor:pointer; }
.tec-cc-pop-btns button:disabled { opacity:0.6; }

/* ---- Ticket reply drafts ---- */
.tec-draft-status { font-size:12.5px; margin-right:10px; opacity:0.85; display:inline-block; vertical-align:middle; }
.tec-draft-status a { color:#f5325c; text-decoration:none; }
#tec-save-draft-button { margin-right:5px; }
#comment-form-container.tec-has-cc .flex-shrink-0 .avatar-xs { margin-top:6px; }
/* Mobile: keep CC pop-ups inside the viewport */
.tec-cc-suggest, .tec-cc-pop { max-width: calc(100vw - 30px); }

/* Mobile CC row: full-width field with breathing room around the control */
@media (max-width: 575.98px) {
    .tec-cc-row { margin: 8px 12px 10px 12px; gap: 0; }
    .tec-cc-row .tec-cc-field { flex: 1 1 100%; width: 100% !important; }
    .tec-cc-saved { display: none; }
}

/* Defeat iOS/WebKit autofill yellow on the CC input + popover fields */
#tec-cc-input:-webkit-autofill,
#tec-cc-input:-webkit-autofill:hover,
#tec-cc-input:-webkit-autofill:focus,
.tec-cc-pop input:-webkit-autofill,
.tec-cc-pop input:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit;
    box-shadow: inset 0 0 0 1000px transparent;
    transition: background-color 600000s 0s;
}

/* Save-draft button: sized by the same btn-info classes as "Save as note"
   (identical metrics on every device), colours overridden to neutral dark. */
#tec-save-draft-button,
#tec-restore-draft-button,
#tec-ai-draft-button {
    background-color: var(--color-inner-background, #f1f1f5) !important;
    border-color: var(--color-border, rgba(128,128,128,0.35)) !important;
    color: inherit !important;
}
#tec-save-draft-button:hover,
#tec-restore-draft-button:hover,
#tec-restore-draft-button:focus,
#tec-restore-draft-button:active,
#tec-ai-draft-button:hover,
#tec-ai-draft-button:focus,
#tec-ai-draft-button:active,
#tec-save-draft-button:focus,
#tec-save-draft-button:active {
    background-color: var(--color-sidebar-background-hover, rgba(128,128,128,0.2)) !important;
    color: inherit !important;
}

/* "AI from notes" — same neutral utility styling as the other two */
#tec-ai-notes-button {
    background-color: var(--color-inner-background, #f1f1f5) !important;
    border-color: var(--color-border, rgba(128,128,128,0.35)) !important;
    color: inherit !important;
}
#tec-ai-notes-button:hover,
#tec-ai-notes-button:focus,
#tec-ai-notes-button:active {
    background-color: var(--color-sidebar-background-hover, rgba(128,128,128,0.2)) !important;
    color: inherit !important;
}

/* ---- AI summary panel (top of the ticket, auto-updated) ---- */
.tec-ai-summary { border: 1px solid rgba(128,128,128,0.22); border-radius: 10px;
  background: rgba(128,128,128,0.06); padding: 12px 16px; margin: 0 0 12px 0; font-size: 13.5px; }
.tec-ai-summary-head { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.tec-ai-summary-meta { font-weight: 400; font-size: 12px; opacity: 0.55; }
.tec-ai-summary-head a { font-size: 12px; color: #39b691; text-decoration: none; margin-left: auto; white-space: nowrap; }
.tec-ai-summary-body { margin-top: 8px; }
.tec-ai-summary-body p { margin: 0 0 6px 0; }
.tec-ai-summary-body ul { margin: 0 0 6px 0; padding-left: 20px; }
.tec-ai-summary-body li { margin-bottom: 2px; }
@media (max-width: 575.98px) { .tec-ai-summary { margin: 8px 12px 10px 12px; } }

/* ---------------------------------------------------------------
   Mobile header: swap the full wordmark for the compact platform
   favicon (Settings → General → Favicon), reclaiming horizontal
   space in the top bar. Mobile only — the desktop sidebar keeps the
   full wordmark. The favicon URL is injected as --tec-favicon-url by
   the plugin head hook, so it always tracks the uploaded favicon.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    #dashboard-link .dashboard-image { display: none !important; }
    #dashboard-link.brand-logo {
        display: inline-block !important;
        width: 32px;
        height: 32px;
        background-image: var(--tec-favicon-url);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
        vertical-align: middle;
    }
    /* Match the sidebar's mini favicon to the top-bar one: same 32x32 box. */
    .brand-logo-mini .dashboard-image {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        object-fit: contain;
    }
}

/* ---------------------------------------------------------------
   Light-theme header fixes.

   The platform has two active themes: dark (body.color-000000, the
   default) and light (body.color-e8e8e8). In dark mode the navbar and
   the signin card header are already dark, so the white logo reads
   fine. In LIGHT mode they're white, which hides the white logo —
   so these rules paint them brand navy. Scoped to .color-e8e8e8 so
   dark mode is never touched. The runtime theme CSS is appended after
   this file, hence !important.
   --------------------------------------------------------------- */

/* Login page card header -> navy (so the white logo reads), light mode. */
body.color-e8e8e8.signin-page .card .card-header {
    background-color: #0E1924 !important;
    border-color: #0E1924 !important;
}

/* Nudge the login logo 8px lower for better optical centring in the header. */
body.signin-page .form-signin .card .card-header img {
    margin-top: 8px;
}
/* The login logo (max-width 220px) is too large on phones — cap it. */
@media (max-width: 575.98px) {
    body.signin-page .form-signin .card .card-header img {
        max-width: 180px !important;
    }
}

/* Drop the card's outer border/frame so the navy header sits flush to the
   card edges (clip the rounded top corners with overflow:hidden). */
body.color-e8e8e8.signin-page .form-signin .card {
    border: 0 !important;
    overflow: hidden;
}
body.color-e8e8e8.signin-page .form-signin .card .card-header {
    border: 0 !important;
    margin: 0 !important;
}

/* Login page footer -> navy with white text/links, light mode. */
body.color-e8e8e8.signin-page .footer {
    background-color: #0E1924 !important;
    color: #ffffff !important;
    border-top: 0 !important;
}
body.color-e8e8e8.signin-page .footer a {
    color: #ffffff !important;
}

/* Sign in button -> brand navy instead of the green primary, light mode. */
body.color-e8e8e8.signin-page .btn-primary {
    background-color: #0E1924 !important;
    border-color: #0E1924 !important;
    color: #ffffff !important;
}
body.color-e8e8e8.signin-page .btn-primary:hover,
body.color-e8e8e8.signin-page .btn-primary:focus,
body.color-e8e8e8.signin-page .btn-primary:active {
    background-color: #1a2a3a !important;
    border-color: #1a2a3a !important;
}

/* Knowledge base public navbar -> navy with white logo/links, light mode.
   (The public navbar is bg-white, which hides the white wordmark.) */
body.knowledge_base-page .public-navbar {
    background-color: #0E1924 !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Dark mode: the header is NOT navy — it uses the dark theme's own surface
   colour (the same #1d2226 the theme gives any .bg-white element), so it
   matches the rest of the dark UI chrome. Higher specificity (.color-000000)
   wins over the navy rule above; covers the mobile dropdown too. */
body.color-000000.knowledge_base-page .public-navbar,
body.color-000000.knowledge_base-page .public-navbar .navbar-collapse {
    background-color: var(--color-card-background, #1d2226) !important;
}
/* Fixed 65px row only on the expanded (>=sm) navbar; on mobile the bar must
   grow to fit the collapsed dropdown menu. */
@media (min-width: 576px) {
    body.knowledge_base-page .public-navbar {
        min-height: 65px !important;
        height: 65px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center !important;
    }
    body.knowledge_base-page .public-navbar .container-fluid {
        height: 100% !important;
        align-items: center !important;
    }
}
body.knowledge_base-page .public-navbar .nav-link {
    color: #ffffff !important;
}
body.knowledge_base-page .public-navbar .navbar-brand img {
    max-width: 140px !important;
    margin-top: 8px;
    margin-left: 4px;
}
/* Nav buttons, styled to match the main website CTA:
   8px radius, weight 500, padding 0.7rem 1.8rem (the site's 0.9rem/2rem,
   tuned slightly for the 65px navbar). Contact Us = light outline (ghost),
   Sign In = solid white with navy text. */
body.knowledge_base-page .public-navbar .nav-link[href*="contact-us"],
body.knowledge_base-page .public-navbar .nav-link[href*="signin"] {
    padding: 0.7rem 1.8rem !important;
    margin: 0 4px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
body.knowledge_base-page .public-navbar .nav-link[href*="contact-us"] {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}
body.knowledge_base-page .public-navbar .nav-link[href*="contact-us"]:hover,
body.knowledge_base-page .public-navbar .nav-link[href*="contact-us"]:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
}
body.knowledge_base-page .public-navbar .nav-link[href*="signin"] {
    background-color: #ffffff !important;
    color: #0E1924 !important;
    border: 1px solid #ffffff !important;
}
body.knowledge_base-page .public-navbar .nav-link[href*="signin"]:hover,
body.knowledge_base-page .public-navbar .nav-link[href*="signin"]:focus {
    background-color: #E6EBF0 !important;
    border-color: #E6EBF0 !important;
    color: #0E1924 !important;
}
/* Hamburger: white animated icon (morphs to an X when open), no background,
   no border box. Rebuilt from the single .navbar-toggler-icon span: the span
   is the middle bar, ::before/::after are the top/bottom bars. */
body.knowledge_base-page .public-navbar .navbar-toggler {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    /* NB: do NOT set display here — Bootstrap's .navbar-expand-sm hides the
       toggler on desktop via display:none, and a higher-specificity display
       value here would override it and show the hamburger on desktop too.
       Flex centring is applied inside the mobile media query instead. */
}
body.knowledge_base-page .public-navbar .navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    display: block;
    width: 26px;
    height: 2px;
    background-color: #ffffff !important;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}
body.knowledge_base-page .public-navbar .navbar-toggler-icon::before,
body.knowledge_base-page .public-navbar .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 26px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: transform 0.25s ease;
}
body.knowledge_base-page .public-navbar .navbar-toggler-icon::before { top: -8px; }
body.knowledge_base-page .public-navbar .navbar-toggler-icon::after  { top:  8px; }
/* Open state -> X */
body.knowledge_base-page .public-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent !important;
}
body.knowledge_base-page .public-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: translateY(8px) rotate(45deg);
}
body.knowledge_base-page .public-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Mobile (collapsed) knowledge base navbar --- */
@media (max-width: 575.98px) {
    /* Keep the header bar itself a clean 65px; the dropdown grows below it. */
    body.knowledge_base-page .public-navbar {
        min-height: 65px !important;
        padding: 0 16px !important;
    }
    body.knowledge_base-page .public-navbar .container-fluid {
        min-height: 65px;
        align-items: center;
    }
    /* Flex-centre the hamburger bars in a full 65px header row (mobile only,
       so desktop stays hidden). */
    body.knowledge_base-page .public-navbar .navbar-toggler {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 65px !important;
    }
    /* Swap the full wordmark for the compact favicon, vertically centred in
       the 65px header row. */
    body.knowledge_base-page .public-navbar .navbar-brand img {
        display: none !important;
    }
    body.knowledge_base-page .public-navbar .navbar-brand {
        display: inline-block !important;
        width: 32px;
        height: 65px !important;
        margin: 0 !important;
        background-image: var(--tec-favicon-url);
        background-size: 32px 32px;
        background-repeat: no-repeat;
        background-position: left center;
    }
    /* Navy dropdown, compact. Buttons sit side-by-side (50/50) to keep the
       menu shallow and push the page content down as little as possible. */
    /* No vertical padding on the collapsing element itself — Bootstrap animates
       its height from 0, and padding here makes it jump by the padding amount
       at the start/end of the transition. Padding lives on the inner nav. */
    body.knowledge_base-page .public-navbar .navbar-collapse {
        background-color: #0E1924 !important;
        border-top: 0 !important;
        margin: 0 -16px;
        padding: 0;
    }
    body.knowledge_base-page .public-navbar .navbar-nav {
        flex-direction: row !important;
        width: 100%;
        gap: 10px;
        align-items: center;
        padding: 10px 16px 14px;
    }
    body.knowledge_base-page .public-navbar .navbar-nav .nav-item {
        flex: 1 1 0;
        width: auto;
    }
    body.knowledge_base-page .public-navbar .navbar-nav .nav-link {
        text-align: center !important;
    }
    body.knowledge_base-page .public-navbar .navbar-nav .nav-link[href*="contact-us"],
    body.knowledge_base-page .public-navbar .navbar-nav .nav-link[href*="signin"] {
        display: block !important;
        width: 100%;
        margin: 0 !important;
    }
}
/* KB footer -> navy with white text/links, light mode. */
body.knowledge_base-page .footer {
    background-color: #0E1924 !important;
    color: #ffffff !important;
    border-top: 0 !important;
}
body.knowledge_base-page .footer a {
    color: #ffffff !important;
}
/* Dark mode: footer uses the dark theme's own surface colour, not navy. */
body.color-000000.knowledge_base-page .footer {
    background-color: var(--color-inner-background, #11161a) !important;
}

/* Mobile top bar -> navy in light mode, with light icons/links so the
   bar's controls stay visible against the navy. */
@media (max-width: 767px) {
    body.color-e8e8e8 .navbar-custom {
        background-color: #0E1924 !important;
        border-bottom-color: #0E1924 !important;
    }
    body.color-e8e8e8 .navbar-custom .nav-link,
    body.color-e8e8e8 .navbar-custom .nav-link .icon,
    body.color-e8e8e8 .navbar-custom .nav-link i {
        color: #ffffff !important;
    }
}

/* ---------------------------------------------------------------
   Brand styling for the Rise-generated line-items table inside a
   proposal/contract document. Core renders it with inline styles
   (grey #f4f4f4 rows, white gridlines, and a header/total cell in
   the legacy "proposal_color"), so we override with !important:
   clean white cells, brand borders, a light header, and a navy
   total-emphasis cell.
   --------------------------------------------------------------- */
.tec-doc .tc-body table.table-responsive { border: 1px solid #D7DCE0 !important; }
.tec-doc .tc-body table.table-responsive th,
.tec-doc .tc-body table.table-responsive td {
    border: 1px solid #D7DCE0 !important;
    background-color: #ffffff !important;
    color: #3A4654 !important;
    padding: 11px 13px !important;
}
.tec-doc .tc-body table.table-responsive tr:first-child th {
    background-color: #F2F4F7 !important;
    color: #0E1924 !important;
    font-weight: 600 !important;
}
.tec-doc .tc-body table.table-responsive tr:last-child td:last-child {
    background-color: #0E1924 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
/* Item title -> navy + semibold (core renders it as a plain light <p>). */
.tec-doc .tc-body table.table-responsive td p {
    color: #0E1924 !important;
    font-weight: 600 !important;
    margin: 0 0 5px !important;
}
/* Item description -> readable body grey (core inlines a faint #888). */
.tec-doc .tc-body table.table-responsive td span {
    color: #5B6B7A !important;
    font-size: 13px !important;
}

/* ---------------------------------------------------------------
   Proposal / contract preview TOP BAR logo -> navy marque tile.
   The full wordmark already sits inside the document just below, so the
   top bar shows the compact navy marque instead, with 8px-rounded
   corners. Client-facing (non-admin) view only — the admin preview puts
   action buttons inside .proposal-preview-button, where a marque would
   overlap them. Sits over the (space-reserving) hidden logo img.
   --------------------------------------------------------------- */
body:not(.admin-view) .proposal-preview-button,
body:not(.admin-view) .contract-preview-button { position: relative; }
body:not(.admin-view) .proposal-preview-button img.max-height-width-logo,
body:not(.admin-view) .contract-preview-button img.max-height-width-logo { opacity: 0 !important; }
body:not(.admin-view) .proposal-preview-button::before,
body:not(.admin-view) .contract-preview-button::before {
    content: "" !important;
    position: absolute !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    background: url('logo/top-marque-navy.png') no-repeat center / cover !important;
    border-radius: 4px !important;
    overflow: hidden;
}

/* Remove Rise's extra 30px container padding so the document's own margin is
   the only outer padding (avoids the doubled-up outer whitespace). Round the
   corners 8px to match the sticky action bar above. */
.proposal-preview-container,
.contract-preview-container {
    padding: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #D7DCE0;
}

/* Brand page background behind the document on the client-facing preview /
   signing pages (replaces Rise's default #f9f9f9). The frosted action bar
   samples this tint through its blur. */
#contract-preview-scrollbar,
#proposal-preview-scrollbar,
#estimate-preview-scrollbar { background-color: #E6EBF0 !important; }

/* Top bar keeps its uniform 15px padding (the card's own p15) — left/right
   match top/bottom so the marque/buttons aren't stranded with a wide gutter. */

/* Sticky action bar — keep Print/Reject/Accept reachable on long documents.
   `position: sticky` pins to whatever scroll container the bar sits in: the
   in-app `.main-scrollable-page` (below the fixed navbar) for staff, or window
   scroll on the client-facing signing page — one rule covers both. Translucent
   white with a blur so anything scrolling beneath stays subtle, 8px radius and a
   1px border to match the document body. No shadow. */
.proposal-preview .grid-button,
.contract-preview .grid-button {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.80) !important;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border: 1px solid #D7DCE0;
    border-radius: 8px;
    box-shadow: none;
}

/* Proposal/contract document on mobile: tighten the generous 40px desktop
   margins so content isn't squeezed on small screens. */
@media (max-width: 575.98px) {
    .tec-doc .tc-band-top,
    .tec-doc .tc-body,
    .tec-doc .tc-band-bottom {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* ---------------------------------------------------------------
   Additional-signatory blank fields (proposals + contracts): a
   fixed-width label + a fill line that runs to the cell edge, so
   the Name / Title / Date lines all start at the same point and
   end at the same point. Replaces the old inline label + 200px
   input-line (which started/ended unevenly).
   --------------------------------------------------------------- */
.tec-doc .sig-row, .tec-contract .sig-row {
    display: flex; align-items: flex-end; gap: 8px; margin: 9px 0;
}
.tec-doc .sig-row .sig-k, .tec-contract .sig-row .sig-k {
    font-weight: 600; color: #0E1924; width: 44px; flex: none;
}
.tec-doc .sig-row .sig-v, .tec-contract .sig-row .sig-v {
    flex: 1; border-bottom: 1px solid #D7DCE0; min-height: 18px;
}

/* Proposal header brand column (logo + slogan), matching contracts.
   !important beats the per-template embedded `.tc-band-top img.logo`. */
.tec-doc .tc-brand { display: flex; flex-direction: column; }
.tec-doc .tc-brand .logo { width: 195px !important; height: auto !important; }
.tec-doc .tc-slogan { margin-top: 2px; font-size: 14px; line-height: 1.4; color: #5B6B7A; }
.tec-doc .tc-slogan strong { color: #0E1924; font-weight: 600; }

/* Proposal header/footer inset rule lines follow the tighter mobile padding. */
@media (max-width: 575.98px) {
    .tec-doc .tc-band-top::after,
    .tec-doc .tc-band-bottom::before { left: 18px !important; right: 18px !important; }
}

/* Small gap between the "Signature:" label and the signature image in the
   Signer-info sidebar card (they sat flush against each other). Scoped to the
   card body (.p15) so it doesn't affect the signature inside the document. */
.card .p15 .signature-image { display: block; margin-top: 5px; }

/* ---------------------------------------------------------------------------
   Profile cleanups (requested June 2026): hide unused personal/social fields.
   - SSN: not something we collect (general-info tab).
   - Digg / Tumblr / Vine: dead/irrelevant networks.
   Hidden via :has() on the wrapping .form-group so the label goes too. The
   inputs stay in the DOM (just hidden), so saving the form is unaffected.
   Twitter is kept but relabelled to "X" in profile-tweaks.js. --------------- */
.form-group:has(> .row #ssn),
.form-group:has(> .row #digg),
.form-group:has(> .row #tumblr),
.form-group:has(> .row #vine) { display: none !important; }