/* ==========================================================================
   Pulse brand theme for TransitPulse HelpDesk
   Palette + type per the Pulse Brand Guide:
   Pulse Green #34D399 - primary, CTAs, the pulse line
   Pulse Green Deep #0FB67F - hover/active, logo fill
   RideInfo Teal #1C4F42 - deep surfaces, headers
   Ink #0F2A24 / Ink Soft #5B7168 - text
   Mint #E7F9F1 / Mist #F4FBF8 - tints and page backgrounds
   Amber #F5A623 / Amber Soft #FBE7C6 - the human (customer) accent
   Quicksand - display / headings. Figtree - UI / body.
   ========================================================================== */

:root {
    --pulse-green: #34D399;
    --pulse-green-deep: #0FB67F;
    --pulse-teal: #1C4F42;
    --pulse-ink: #0F2A24;
    --pulse-ink-soft: #5B7168;
    --pulse-mint: #E7F9F1;
    --pulse-mist: #F4FBF8;
    --pulse-amber: #F5A623;
    --pulse-amber-soft: #FBE7C6;
    /* Derived shades for accessible link/text use of the green family */
    --pulse-green-ink: #0B7C58;
    --pulse-font-display: 'Quicksand', 'Figtree', sans-serif;
    --pulse-font-body: 'Figtree', 'Segoe UI', sans-serif;
}

/* ---------- Bootstrap variable mapping ---------- */

[data-bs-theme=light] {
    --bs-body-bg: var(--pulse-mist);
    --bs-body-color: var(--pulse-ink);
    --bs-body-color-rgb: 15, 42, 36;
    --bs-emphasis-color: #081712;
    --bs-secondary-color: var(--pulse-ink-soft);
    --bs-tertiary-bg: #ECF6F0;
    --bs-secondary-bg: #E2EFE8;
    --bs-border-color: #D8E9DF;
    --bs-primary: var(--pulse-green-deep);
    --bs-primary-rgb: 15, 182, 127;
    --bs-primary-bg-subtle: var(--pulse-mint);
    --bs-primary-border-subtle: #BFEBD8;
    --bs-primary-text-emphasis: var(--pulse-green-ink);
    --bs-link-color: var(--pulse-green-ink);
    --bs-link-color-rgb: 11, 124, 88;
    --bs-link-hover-color: var(--pulse-teal);
    --bs-link-hover-color-rgb: 28, 79, 66;
    --bs-success: var(--pulse-green-deep);
    --bs-success-rgb: 15, 182, 127;
    --bs-info: var(--pulse-teal);
    --bs-info-rgb: 28, 79, 66;
    --bs-heading-color: var(--pulse-teal);
    --bs-code-color: var(--pulse-green-ink);
}

/* Dark surfaces stay near-neutral (a whisper of teal, ~8% saturation) so the
   green reads as an accent, not a wall. */
[data-bs-theme=dark] {
    --bs-body-bg: #151918;
    --bs-body-color: #DCE3E0;
    --bs-body-color-rgb: 220, 227, 224;
    --bs-emphasis-color: #F2F5F4;
    --bs-secondary-color: #94A09B;
    --bs-tertiary-bg: #1D2321;
    --bs-secondary-bg: #242B29;
    --bs-border-color: #2C3532;
    --bs-primary: var(--pulse-green);
    --bs-primary-rgb: 52, 211, 153;
    --bs-primary-bg-subtle: #1B2A24;
    --bs-primary-border-subtle: #29453A;
    --bs-primary-text-emphasis: #7FE7BF;
    --bs-link-color: #4ADE9F;
    --bs-link-color-rgb: 74, 222, 159;
    --bs-link-hover-color: #7FE7BF;
    --bs-link-hover-color-rgb: 127, 231, 191;
    --bs-success: var(--pulse-green);
    --bs-success-rgb: 52, 211, 153;
    --bs-info: #52706A;
    --bs-info-rgb: 82, 112, 106;
    --bs-heading-color: #CBD6D2;
    --bs-card-bg: #1A1F1E;
}

/* ---------- Typography ---------- */

body {
    font-family: var(--pulse-font-body);
    font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .navbar-brand, .modal-title {
    font-family: var(--pulse-font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bs-heading-color);
}

/* ---------- The pulse line ---------- */

.pulse-divider {
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpolyline points='0,7 150,7 156,3 162,11 168,1 174,12 180,5 186,7 240,7' fill='none' stroke='%2334D399' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 240px 14px;
    background-position: center;
}

.pulse-flatline {
    height: 18px;
    max-width: 260px;
    margin: 0 auto 0.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 18' preserveAspectRatio='none'%3E%3Cpolyline points='0,9 108,9 114,5 120,13 126,9 260,9' fill='none' stroke='%2334D399' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
}

.empty-state {
    text-align: center;
    padding: 1.5rem 0;
}

/* ---------- Navbar ---------- */

.navbar-pulse {
    background: var(--pulse-teal);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
.navbar-pulse .navbar-brand {
    color: #fff;
    font-family: var(--pulse-font-display);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.navbar-pulse .navbar-brand img {
    height: 30px;
    width: auto;
}
.navbar-pulse .navbar-brand:hover { color: var(--pulse-green); }
.navbar-pulse .nav-link {
    color: rgba(231, 249, 241, 0.78);
    border-bottom: 2px solid transparent;
}
.navbar-pulse .nav-link:hover,
.navbar-pulse .nav-link:focus { color: #fff; }
.navbar-pulse .nav-link.active {
    color: #fff;
    border-bottom-color: var(--pulse-green);
}
.navbar-pulse .navbar-toggler {
    color: rgba(231, 249, 241, 0.8);
    border-color: rgba(231, 249, 241, 0.3);
}
.navbar-pulse .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(231,249,241,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-pulse .btn-nav {
    --bs-btn-color: rgba(231, 249, 241, 0.85);
    --bs-btn-border-color: rgba(231, 249, 241, 0.35);
    --bs-btn-hover-color: var(--pulse-ink);
    --bs-btn-hover-bg: var(--pulse-green);
    --bs-btn-hover-border-color: var(--pulse-green);
    --bs-btn-active-color: var(--pulse-ink);
    --bs-btn-active-bg: var(--pulse-green-deep);
    --bs-btn-active-border-color: var(--pulse-green-deep);
}
.navbar-pulse .dropdown-menu {
    font-family: var(--pulse-font-body);
}

/* ---------- Buttons ---------- */

.btn-primary {
    --bs-btn-bg: var(--pulse-green);
    --bs-btn-border-color: var(--pulse-green);
    --bs-btn-color: var(--pulse-ink);
    --bs-btn-hover-bg: var(--pulse-green-deep);
    --bs-btn-hover-border-color: var(--pulse-green-deep);
    --bs-btn-hover-color: var(--pulse-ink);
    --bs-btn-active-bg: var(--pulse-green-deep);
    --bs-btn-active-border-color: var(--pulse-green-deep);
    --bs-btn-active-color: var(--pulse-ink);
    --bs-btn-disabled-bg: var(--pulse-green);
    --bs-btn-disabled-border-color: var(--pulse-green);
    --bs-btn-disabled-color: var(--pulse-ink);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--pulse-green-ink);
    --bs-btn-border-color: var(--pulse-green-deep);
    --bs-btn-hover-bg: var(--pulse-green);
    --bs-btn-hover-border-color: var(--pulse-green);
    --bs-btn-hover-color: var(--pulse-ink);
    --bs-btn-active-bg: var(--pulse-green-deep);
    --bs-btn-active-border-color: var(--pulse-green-deep);
    --bs-btn-active-color: var(--pulse-ink);
}
[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--pulse-green);
}

/* ---------- Cards & surfaces ---------- */

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 0.75rem;
    --bs-card-inner-border-radius: calc(0.75rem - 1px);
    box-shadow: 0 1px 2px rgba(15, 42, 36, 0.05), 0 4px 16px rgba(15, 42, 36, 0.04);
}
[data-bs-theme=dark] .card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.card-header {
    background: transparent;
    border-bottom-color: var(--bs-border-color);
}

/* ---------- Forms ---------- */

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--pulse-green);
    box-shadow: 0 0 0 0.25rem rgba(52, 211, 153, 0.25);
}
.form-check-input:checked {
    background-color: var(--pulse-green-deep);
    border-color: var(--pulse-green-deep);
}

/* ---------- Badges ---------- */

.badge.text-bg-primary { background-color: var(--pulse-teal) !important; color: #fff !important; }
.badge.text-bg-success { background-color: var(--pulse-green) !important; color: var(--pulse-ink) !important; }
.badge.text-bg-info { background-color: var(--pulse-mint) !important; color: var(--pulse-teal) !important; }
[data-bs-theme=dark] .badge.text-bg-info { background-color: #2A3F38 !important; color: #ADE2CB !important; }
.badge-support {
    background-color: var(--pulse-teal);
    color: #fff;
}

/* ---------- Nav pills / tabs ---------- */

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--pulse-teal);
    --bs-nav-pills-link-active-color: #fff;
}
.nav-pills-sm .nav-link {
    padding: 0.3rem 0.75rem;
    font-size: 0.875rem;
}
.nav-pills .nav-link .tab-count {
    background: rgba(15, 42, 36, 0.08);
    color: inherit;
    font-weight: 500;
}
.nav-pills .nav-link.active .tab-count {
    background: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .nav-pills .nav-link .tab-count {
    background: rgba(231, 249, 241, 0.12);
}
.nav-tabs .nav-link.active {
    font-weight: 600;
    color: var(--pulse-green-ink);
    border-bottom-color: transparent;
}
[data-bs-theme=dark] .nav-tabs .nav-link.active { color: var(--pulse-green); }

/* ---------- Tables ---------- */

.table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

/* Banding done by hand rather than .table-striped, so it composes with
   .table-hover and can be tuned separately for the dark theme. */
.table-banded > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(15, 42, 36, 0.022);
}
[data-bs-theme=dark] .table-banded > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(231, 249, 241, 0.028);
}
.table-banded > tbody > tr:hover > * {
    background-color: var(--pulse-mint);
}
[data-bs-theme=dark] .table-banded > tbody > tr:hover > * {
    background-color: rgba(52, 211, 153, 0.07);
}

/* Header sticks while the list scrolls */
.ticket-table-wrap {
    max-height: calc(100vh - 22rem);
    min-height: 12rem;
    overflow-y: auto;
}
/* Scoped to the scrolling wrapper - a sticky header outside one would stick
   to the viewport instead, which reads as a bug. */
.ticket-table-wrap .ticket-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

.sort-header {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.sort-header:hover { color: var(--pulse-green-ink); }
[data-bs-theme=dark] .sort-header:hover { color: var(--pulse-green); }
.sort-header.sorted { color: var(--pulse-green-ink); }
[data-bs-theme=dark] .sort-header.sorted { color: var(--pulse-green); }
.sort-icon { font-size: 0.7rem; }
.sort-icon-idle { opacity: 0; transition: opacity 0.15s; }
.sort-header:hover .sort-icon-idle { opacity: 0.5; }

/* Priority reads as a left accent bar, which scans faster than a chip */
.ticket-table > tbody > tr > td:first-child {
    box-shadow: inset 3px 0 0 var(--row-accent, transparent);
}
.ticket-table > tbody > tr.prio-urgent { --row-accent: var(--bs-danger); }
.ticket-table > tbody > tr.prio-high   { --row-accent: var(--pulse-amber); }
.ticket-table > tbody > tr.prio-normal { --row-accent: transparent; }
.ticket-table > tbody > tr.prio-low    { --row-accent: transparent; }

.ticket-table > tbody > tr.prio-urgent > * {
    background-color: rgba(220, 53, 69, 0.045);
}
[data-bs-theme=dark] .ticket-table > tbody > tr.prio-urgent > * {
    background-color: rgba(220, 53, 69, 0.10);
}
.ticket-table > tbody > tr.row-done > * { opacity: 0.62; }
.ticket-table > tbody > tr.row-selected > * {
    background-color: var(--pulse-mint) !important;
}
[data-bs-theme=dark] .ticket-table > tbody > tr.row-selected > * {
    background-color: rgba(52, 211, 153, 0.13) !important;
}

.ticket-table td, .ticket-table th { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.density-compact .ticket-table td,
.density-compact .ticket-table th { padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.875rem; }

.ticket-table .col-check { width: 2.25rem; }
.ticket-table .col-id {
    width: 4.5rem;
    font-variant-numeric: tabular-nums;
}
.ticket-table .col-updated,
.ticket-table .col-created,
.ticket-table .col-age,
.ticket-table .col-follow_up {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}
.ticket-table .col-status,
.ticket-table .col-priority,
.ticket-table .col-awaiting,
.ticket-table .col-source { white-space: nowrap; }

.ticket-id {
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-weight: 500;
}
.ticket-id:hover { color: var(--pulse-green-ink); }
.ticket-subject {
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    max-width: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.ticket-subject:hover { color: var(--pulse-green-ink); text-decoration: underline; }
[data-bs-theme=dark] .ticket-subject:hover { color: var(--pulse-green); }

/* A ticket waiting on us gets a dot, the way an unread message does */
.unread-dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pulse-green-deep);
    margin-left: 0.4rem;
    vertical-align: middle;
}
[data-bs-theme=dark] .unread-dot { background: var(--pulse-green); }

.awaiting-us {
    color: var(--pulse-green-ink);
    font-weight: 600;
    white-space: nowrap;
}
[data-bs-theme=dark] .awaiting-us { color: var(--pulse-green); }

.follow-up-late { color: var(--bs-danger); font-weight: 600; white-space: nowrap; }
.ticket-table > tbody > tr.row-overdue .col-id { box-shadow: inset 3px 0 0 var(--bs-danger); }

.per-page-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    padding: 0 0.2rem;
}
.per-page-link.active {
    color: var(--pulse-green-ink);
    font-weight: 700;
    text-decoration: underline;
}
[data-bs-theme=dark] .per-page-link.active { color: var(--pulse-green); }

/* ---------- Status dots ---------- */

.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: 0.05rem;
}
.status-label { white-space: nowrap; }
.status-dot-new      { background: var(--pulse-green); }
.status-dot-open     { background: var(--pulse-teal); box-shadow: 0 0 0 2px rgba(28, 79, 66, 0.18); }
.status-dot-pending  { background: var(--pulse-amber); }
.status-dot-resolved { background: var(--pulse-green-deep); }
.status-dot-closed   { background: var(--bs-secondary-color); }
[data-bs-theme=dark] .status-dot-open { background: #7FD8BE; box-shadow: 0 0 0 2px rgba(127, 216, 190, 0.2); }

/* ---------- Tag chips ---------- */

.tag-chip {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0.1rem 0.15rem 0.1rem 0;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tag-teal   { background: #DDF0E9; color: #14544A; border-color: #BEE0D4; }
.tag-green  { background: #DAF6EA; color: #0B7C58; border-color: #B6E9D3; }
.tag-amber  { background: #FBE7C6; color: #7A5312; border-color: #F2D3A0; }
.tag-red    { background: #FADCDF; color: #8B1F2B; border-color: #F2BFC5; }
.tag-blue   { background: #D9E8F7; color: #17496F; border-color: #BBD6EF; }
.tag-purple { background: #E6DFF6; color: #4A2E80; border-color: #D2C6EE; }
.tag-slate  { background: #E4E9E7; color: #3E4C48; border-color: #CFD8D5; }

[data-bs-theme=dark] .tag-teal   { background: #1B3B34; color: #A8DCCB; border-color: #285449; }
[data-bs-theme=dark] .tag-green  { background: #143A2C; color: #8FE3C0; border-color: #1F5541; }
[data-bs-theme=dark] .tag-amber  { background: #3A2E1A; color: #EFC98A; border-color: #55452A; }
[data-bs-theme=dark] .tag-red    { background: #3B1F23; color: #F0A9B2; border-color: #562C33; }
[data-bs-theme=dark] .tag-blue   { background: #1B2C3C; color: #A5C8E8; border-color: #2A4157; }
[data-bs-theme=dark] .tag-purple { background: #271F3B; color: #C4B2EC; border-color: #392E55; }
[data-bs-theme=dark] .tag-slate  { background: #262C2A; color: #B4C0BC; border-color: #363F3C; }

/* ---------- View pills / column picker ---------- */

.view-pills { row-gap: 0.25rem; }
.view-pill-mark {
    font-size: 0.6rem;
    opacity: 0.55;
    margin-left: 0.3rem;
    vertical-align: 0.15rem;
}
.column-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.15rem 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    max-height: 13rem;
    overflow-y: auto;
}
.column-picker .form-check { margin-bottom: 0; font-size: 0.875rem; }

/* ---------- Message thread ---------- */

.message-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.message-bubble {
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    max-width: 85%;
}
/* The agent (us): mint, signed with the pulse green */
.message-bubble.agent {
    background: var(--pulse-mint);
    border-left: 3px solid var(--pulse-green-deep);
    align-self: flex-start;
    border-top-left-radius: 0.25rem;
}
/* The customer (the human): warm amber accent per the brand guide */
.message-bubble.customer {
    background: var(--pulse-amber-soft);
    border-right: 3px solid var(--pulse-amber);
    align-self: flex-end;
    border-top-right-radius: 0.25rem;
}
.message-bubble.system {
    background: var(--bs-tertiary-bg);
    align-self: center;
    font-style: italic;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}
.message-bubble.internal {
    background: var(--bs-warning-bg-subtle);
    border-left: 3px solid var(--bs-warning);
    align-self: flex-start;
}
[data-bs-theme=dark] .message-bubble.agent {
    background: #1D2925;
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .message-bubble.customer {
    background: #2E2820;
    color: #E8E1D4;
}
.message-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
[data-bs-theme=light] .message-bubble.customer .message-meta { color: #7A6032; }

/* History events woven into the conversation: quiet one-liners between bubbles */
.thread-event {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    align-self: center;
    max-width: 85%;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin: -0.4rem 0;
}
.thread-event i { color: var(--bs-tertiary-color); }
.thread-event strong { font-weight: 600; }

/* Quoted email tails collapse behind a toggle */
.quoted-text { margin-top: 0.5rem; }
.quoted-text > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
    padding: 0.1rem 0.5rem;
    user-select: none;
}
.quoted-text > summary::-webkit-details-marker { display: none; }
.quoted-text[open] > summary { margin-bottom: 0.4rem; }
.quoted-text-body {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    border-left: 2px solid var(--bs-border-color);
    padding-left: 0.75rem;
}

/* @username in an internal note */
.mention {
    font-weight: 600;
    color: var(--pulse-green-ink);
    background: var(--pulse-mint);
    border-radius: 0.35rem;
    padding: 0 0.25rem;
}
[data-bs-theme=dark] .mention {
    color: var(--pulse-green);
    background: #1D2925;
}

/* ---------- Attachment chips ---------- */

.attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: 2rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.8rem;
    text-decoration: none;
    max-width: 100%;
}
.attachment-chip:hover {
    border-color: var(--pulse-green-deep);
    color: var(--pulse-green-ink);
}
[data-bs-theme=dark] .attachment-chip:hover { color: var(--pulse-green); }
.attachment-chip .bi { color: var(--pulse-green-deep); }
.attachment-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.attachment-chip-size {
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
}

/* ---------- Loading bar (htmx) ---------- */

.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pulse-green-deep), var(--pulse-green));
    z-index: 9999;
    transition: width 0.2s;
    opacity: 0;
}
.loading-bar.active {
    opacity: 1;
    width: 90%;
    transition: width 2s cubic-bezier(0.1, 0.05, 0, 1);
}

/* ---------- Flash messages ---------- */

.alert-dismissible {
    animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Auth pages ---------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.auth-brand {
    text-align: center;
    margin-bottom: 1.25rem;
}
.auth-brand img {
    height: 56px;
    margin-bottom: 0.5rem;
}
.auth-brand .auth-title {
    font-family: var(--pulse-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--bs-heading-color);
    margin-bottom: 0;
}
.auth-brand .auth-subtitle {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.code-input {
    font-family: var(--pulse-font-display);
    font-weight: 700;
    letter-spacing: 0.5em;
    text-indent: 0.5em; /* balance the trailing letter-spacing */
}

/* ---------- Footer ---------- */

.footer-pulse {
    padding: 1.5rem 0 2rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.footer-pulse .pulse-divider {
    max-width: 340px;
    margin: 0 auto 0.9rem;
    opacity: 0.7;
}

/* ---------- Satisfaction (CSAT) ---------- */

.csat-face { font-size: 1.35rem; line-height: 1; }
.csat-face-good { color: var(--pulse-green-deep); }
.csat-face-ok   { color: var(--pulse-amber); }
.csat-face-bad  { color: var(--bs-danger); }

/* The portal rating widget: three big targets, one click to answer */
.csat-choices {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
.csat-choice {
    flex: 1 1 7rem;
    max-width: 11rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    padding: 1rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, background-color 0.15s;
}
.csat-choice:hover {
    border-color: var(--pulse-green-deep);
    background: var(--pulse-mint);
    transform: translateY(-2px);
}
[data-bs-theme=dark] .csat-choice:hover { background: rgba(52, 211, 153, 0.08); }
.csat-choice i { font-size: 2rem; display: block; margin-bottom: 0.35rem; }
.csat-choice.selected {
    border-color: var(--pulse-green-deep);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

/* ---------- Portal status timeline ---------- */

.status-timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.status-timeline li {
    flex: 1;
    text-align: center;
    position: relative;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    padding-top: 1.9rem;
}
.status-timeline li::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    z-index: 1;
}
/* The connector runs between dots, so the first step has none */
.status-timeline li + li::after {
    content: '';
    position: absolute;
    top: 0.87rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--bs-border-color);
}
.status-timeline li.done::before,
.status-timeline li.current::before {
    background: var(--pulse-green-deep);
    border-color: var(--pulse-green-deep);
}
.status-timeline li.done + li.done::after,
.status-timeline li.done + li.current::after {
    background: var(--pulse-green-deep);
}
.status-timeline li.current {
    color: var(--bs-body-color);
    font-weight: 700;
}
.status-timeline li.current::before {
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
}
.status-timeline li.cancelled::before {
    background: var(--bs-secondary-color);
    border-color: var(--bs-secondary-color);
}

/* ---------- Drag-and-drop file uploads ---------- */

.dropzone {
    border: 1.5px dashed var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1.1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.dropzone:hover, .dropzone.dragover {
    border-color: var(--pulse-green-deep);
    background: var(--pulse-mint);
    color: var(--pulse-green-ink);
}
[data-bs-theme=dark] .dropzone:hover,
[data-bs-theme=dark] .dropzone.dragover {
    background: rgba(52, 211, 153, 0.08);
    color: var(--pulse-green);
}
.dropzone i { font-size: 1.4rem; }
.dropzone-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
    justify-content: center;
}
.dropzone-file {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 0.78rem;
}
.dropzone-file.too-big { color: var(--bs-danger); }

/* ---------- Stat / metric tiles ---------- */

.stat-tile { text-decoration: none; display: block; height: 100%; }
.stat-tile .stat-value {
    font-family: var(--pulse-font-display);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat-tile .stat-label {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stat-tile:hover .stat-value { color: var(--pulse-green-ink); }
[data-bs-theme=dark] .stat-tile:hover .stat-value { color: var(--pulse-green); }

/* Horizontal bar used by the breakdown lists */
.meter {
    height: 0.4rem;
    border-radius: 2rem;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}
.meter > span {
    display: block;
    height: 100%;
    border-radius: 2rem;
    background: var(--pulse-green-deep);
}
.meter-amber > span { background: var(--pulse-amber); }
.meter-danger > span { background: var(--bs-danger); }

/* Created vs resolved sparkline, drawn with plain divs */
.trend-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 5rem;
}
.trend-day {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 100%;
}
.trend-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.trend-bar-created  { background: var(--pulse-teal); }
.trend-bar-resolved { background: var(--pulse-green); }
[data-bs-theme=dark] .trend-bar-created { background: #4E8878; }

/* ---------- Misc ---------- */

.min-width-0 { min-width: 0; }

[x-cloak] { display: none !important; }