body {
    background-color: #f8f9fa;
}

/* Navbar text & icons white for contrast on blue background */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .nav-link i,
.navbar .navbar-text,
.navbar .badge,
.navbar .dropdown-toggle,
.navbar .bi {
    color: #fff !important;
}
/* Dropdown menu icons should use normal dark color (white background) */
.navbar .dropdown-menu .bi,
.navbar .dropdown-menu .dropdown-item {
    color: inherit !important;
}

/* Active nav link: bold + underline only */
.navbar .nav-link.active,
.navbar .navbar-brand.active {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Explicit nav spacing so the top navbar items can't get crushed against
   each other (Bootstrap's defaults are usually enough, but adding this
   makes the layout robust against any later CSS that lowers padding). */
.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    white-space: nowrap;
}
.navbar .nav-link i.bi,
.navbar .navbar-brand i.bi {
    margin-right: 0.35rem;
}
/* Dropdown chevron sits flush against the label by default; give it
   breathing room. */
.navbar .nav-link.dropdown-toggle::after {
    margin-left: 0.4em;
}

.status-badge {
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
}

.priority-high { border-left: 4px solid #dc3545; }
.priority-medium { border-left: 4px solid #ffc107; }
.priority-low { border-left: 4px solid #198754; }

/* Completed / skipped tasks. Deliberately NOT line-through + opacity: that
   struck out every line of the card including the notes and metadata, and at
   0.6 opacity the result was hard to actually read back (2026-07-28). A
   completed task should still be legible — the state is carried by the
   border, a soft tint and an explicit badge instead. */
.todo-done {
    border-left: 4px solid #198754 !important;
    background-color: #f4faf6;
}
.todo-done .card-title > a,
.todo-skipped .card-title > a {
    color: #6c757d !important;
}
.todo-skipped {
    border-left: 4px solid #adb5bd !important;
    background-color: #f8f9fa;
}

.todo-overdue {
    border-left: 4px solid #dc3545 !important;
    background-color: #fff5f5;
}

.time-entry {
    border-left: 3px solid #0d6efd;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

.time-entry.sign_in { border-left-color: #198754; }
.time-entry.sign_out { border-left-color: #dc3545; }
.time-entry.break_start { border-left-color: #ffc107; }
.time-entry.break_end { border-left-color: #0dcaf0; }

.note-card {
    border-left: 3px solid #6c757d;
    margin-bottom: 0.5rem;
}

.keynote-card {
    border-left: 3px solid #6610f2;
}

/* File picker widget */
.file-list-container {
    background: #fff;
    min-height: 38px;
    max-height: 200px;
    overflow-y: auto;
}

.file-list-container:empty::before {
    content: 'No files selected';
    color: #adb5bd;
    font-size: 0.875rem;
    padding: 0.25rem;
}

.file-item a {
    font-size: 0.875rem;
    text-decoration: none;
}

.file-item a:hover {
    text-decoration: underline;
}

.file-item .file-remove-btn {
    flex-shrink: 0;
}

/* Tag chip input container */
.tags-container:empty::before {
    content: 'No tags';
    color: #adb5bd;
    font-size: 0.875rem;
}

/* Google Picker must appear above Bootstrap modals (z-index 1055) */
.picker-dialog-bg {
    z-index: 2000 !important;
}
.picker-dialog {
    z-index: 2001 !important;
}

/* Inbound HTML email containment.
   Marketing emails (Stripe receipts, Mailchimp, etc.) ship fixed-width
   tables, oversized images, and inline width="600". Constrain everything to
   the container's width and let oversized payloads scroll horizontally on
   their own rather than blow out the surrounding layout. */
.email-body-html {
    overflow-x: auto;
    max-width: 100%;
}
.email-body-html img,
.email-body-html table,
.email-body-html video,
.email-body-html iframe {
    max-width: 100% !important;
    height: auto !important;
}
.email-body-html table {
    width: auto !important;
    table-layout: auto !important;
}
.email-body-html * {
    /* Drop any fixed pixel widths the email author hard-coded that exceed
       our column. Doesn't affect intentional narrower elements. */
    max-width: 100%;
    box-sizing: border-box;
}

/* Preformatted blocks WRAP instead of scrolling horizontally. Trix turns
   some pastes into code blocks (<pre>), whose default white-space: pre
   makes the composer scroll sideways — text should always escape to a new
   line (user ask 2026-07-21). Same treatment in rendered email bodies so
   the identical content displays wrapped after send/receive. */
trix-editor pre,
.email-body-html pre {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    overflow-x: hidden;
}

/* Note action buttons (copy link / edit / delete) hide by default; the
   wrapper fades in only when the rep hovers (or focuses something inside)
   the note card. !important guards against Bootstrap btn-link overrides. */
.ticket-note .ticket-note-actions {
    display: none;
}
.ticket-note:hover .ticket-note-actions,
.ticket-note:focus-within .ticket-note-actions {
    display: inline-flex;
}

/* Owner quick-edit dropdown painted in a rep's solid color: the default
   form-select caret is a dark SVG that vanishes on a dark background, so
   swap in a white caret whenever the select carries an owner color. */
.owner-quick-edit.owner-colored {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
.owner-quick-edit.owner-colored option {
    color: #212529;  /* native dropdown list stays readable on white */
}

/* Customer-lookup cards (prior tickets / past email / orders / payments):
   cap the list at roughly 10 table-sm rows and scroll the rest internally
   so one long history can't push the other cards off screen. The thead
   stays pinned while scrolling — sticky needs an explicit background on
   the th or rows show through (.table-light only sets a CSS var). */
.lookup-scroll-body {
    max-height: 22rem;
    overflow-y: auto;
}
.lookup-scroll-body thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-table-bg, #f8f9fa);
}

/* Tickets Tags/Categories strip: the applied-chips line sits below the
   "+ Tag" / "+ Category" buttons and collapses entirely when neither span
   holds a chip (chips render/remove via AJAX, so :has() keeps this correct
   without any JS bookkeeping). */
.ticket-applied-chips:not(:has(.ticket-tag-chip)):not(:has(.ticket-cat-chip)) {
    display: none !important;
}

/* Collapsible list cards (/lists). Bootstrap toggles `.collapsed` on the
   toggle anchor, so the chevron is driven entirely by CSS — no JS bookkeeping.
   Lists render collapsed by default; see the persistence IIFE in lists.html. */
.list-collapse-toggle .list-chevron {
    transition: transform 0.15s ease;
}
.list-collapse-toggle:not(.collapsed) .list-chevron {
    transform: rotate(90deg);
}
.list-collapse-toggle:hover h5 {
    text-decoration: underline;
}

/* Drag-to-reorder on /lists (SortableJS). The grip only shows under the
   "My order" sort — see the data-sortable guard in lists.html. */
.list-drag-handle {
    cursor: grab;
    font-size: 1.1rem;
}
.list-drag-handle:active {
    cursor: grabbing;
}
.list-drag-ghost {
    opacity: 0.4;
}

/* Drag-to-reorder on /notes/history — mirrors .list-drag-handle. */
.note-drag-handle {
    cursor: grab;
    font-size: 1rem;
}
.note-drag-handle:active {
    cursor: grabbing;
}

/* Drag-to-reorder on /minutes — mirrors .list-drag-handle. */
.series-drag-handle {
    cursor: grab;
    font-size: 1rem;
}
.series-drag-handle:active {
    cursor: grabbing;
}

/* Drag-to-reorder on /documents — mirrors .list-drag-handle. */
.doc-drag-handle {
    cursor: grab;
    font-size: 1rem;
}
.doc-drag-handle:active {
    cursor: grabbing;
}

/* Filter chips on /todos — multi-select values (status, tags) that live in
   the same panel as the dropdowns rather than in their own separate row. */
.filter-chip {
    user-select: none;
    font-weight: 500;
    margin-bottom: 0;
}

/* Multi-select filter dropdowns on /todos — mirrors the tickets queue's
   .ticket-filter-multi-* treatment. Menus scroll rather than run off the
   viewport when a group has many options (tags, source). */
.task-multifilter-btn {
    min-width: 8rem;
    text-align: left;
}
.task-multifilter-menu {
    max-height: 18rem;
    overflow-y: auto;
    min-width: 12rem;
}

/* Ticket thread header — the actions menu sits in the corner, always.
   It used to be the last item in a wrapping flex row, which meant that at any
   width where it and the timestamps didn't both fit on one line it wrapped
   onto a second line and sat at the FAR LEFT — the opposite of the corner it
   belongs in (2026-09-04). Pinning it makes "top right" true at every width;
   the header's reserved right padding is what stops the timestamps running
   underneath it. */
.ticket-thread-head { position: relative; padding-right: 1.9rem !important; }
.ticket-thread-actions { position: absolute; top: 0.1rem; right: 0.35rem; }