/* ============================================================
   FAIDesk — Global compact polish layer
   Loaded AFTER custom-theme.css so it can override densities.
   Goal: tighter spacing, smaller chrome, denser tables, polished
   forms — applied automatically to every page without markup edits.
   ============================================================ */

/* ----- Page container ----------------------------------------- */
.container-fluid.fade-in,
.container-fluid.py-3,
.container-fluid.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    max-width: 1480px;
    margin: 0 auto;
}

/* ----- Page header (h1 + subtitle row) ------------------------ */
.page-header {
    margin-bottom: 1rem !important;
    padding: 0.6rem 0.75rem 0.55rem 0.75rem;
    border-bottom: 1px solid var(--gray-200);

    /* Stay visible when the user scrolls long pages — pinned just under
       the fixed 44px app top bar. Opaque background prevents content
       from showing through. */
    position: sticky;
    top: 44px;
    z-index: 20;
    background-color: #ffffff;
}

.page-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.15rem !important;
    color: var(--text-primary);
    letter-spacing: 0.1px;
}

.page-header .page-title + p,
.page-header .page-title + small,
.page-header small.text-muted {
    font-size: 0.78rem;
}

/* ----- Card --------------------------------------------------- */
.card {
    margin-top: 0 !important;
    margin-bottom: 0.85rem !important;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(33, 33, 33, 0.04), 0 1px 3px rgba(33, 33, 33, 0.06) !important;
}

.card:hover {
    box-shadow: 0 1px 3px rgba(33, 33, 33, 0.06), 0 2px 6px rgba(33, 33, 33, 0.08) !important;
}

.card-header {
    padding: 0.55rem 1rem !important;
    font-size: 0.85rem !important;
}

.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    font-size: 0.9rem !important;
}

.card-body {
    padding: 0.9rem 1.1rem !important;
}

.card-footer {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem;
}

/* ----- Stats cards (Dashboard / Reports) ---------------------- */
.stats-card {
    padding: 0.85rem 1rem !important;
}

.stats-card.compact-stat {
    padding: 0.75rem 0.9rem !important;
}

.stats-value {
    font-size: 1.5rem !important;
    margin-bottom: 0.15rem !important;
}

.stats-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.4px;
}

.stats-icon {
    font-size: 1.4rem !important;
}

/* ----- Tables — denser rows ----------------------------------- */
.table {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.table > thead > tr > th {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 0.55rem 0.75rem !important;
    vertical-align: middle;
    border-color: var(--gray-100);
}

.table-hover > tbody > tr:hover {
    background-color: rgba(0, 122, 204, 0.04);
}

.table .badge {
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* ----- Buttons — slimmer default ------------------------------ */
.btn {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-sm) !important;
    gap: 0.3rem !important;
}

.btn-sm {
    padding: 0.28rem 0.6rem !important;
    font-size: 0.78rem !important;
}

.btn-lg {
    padding: 0.55rem 1.1rem !important;
    font-size: 0.95rem !important;
}

.btn:hover {
    transform: none !important; /* kill the jumpy translateY */
}

.btn-primary:hover {
    box-shadow: 0 2px 4px rgba(0, 122, 204, 0.25) !important;
}

/* ----- Forms — denser default --------------------------------- */
.form-control,
.form-select {
    font-size: 0.85rem;
    padding: 0.4rem 0.65rem;
    border-color: var(--gray-200);
    border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.15rem rgba(0, 122, 204, 0.15);
}

.form-control-sm,
.form-select-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.55rem;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.form-check-label {
    font-size: 0.85rem;
}

/* ----- Badges ------------------------------------------------- */
.badge {
    font-weight: 500;
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
    letter-spacing: 0.2px;
}

/* ----- Alerts ------------------------------------------------- */
.alert {
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.85rem;
}

/* ----- Tabs --------------------------------------------------- */
.nav-tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
}

/* ----- Pagination -------------------------------------------- */
.pagination-sm .page-link {
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
}

/* ----- Modal -------------------------------------------------- */
.modal-content {
    border-radius: var(--radius-md);
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.modal-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
}

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

.modal-body {
    padding: 1rem;
}

.modal-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--gray-200);
}

/* ----- Headings inside cards --------------------------------- */
.card-body h1 { font-size: 1.15rem; font-weight: 600; }
.card-body h2 { font-size: 1.05rem; font-weight: 600; }
.card-body h3 { font-size: 1rem;    font-weight: 600; }
.card-body h4 { font-size: 0.95rem; font-weight: 600; }
.card-body h5 { font-size: 0.9rem;  font-weight: 600; }
.card-body h6 { font-size: 0.85rem; font-weight: 600; }

/* ----- Empty/loading states ---------------------------------- */
.card .text-center.py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.card .text-center.py-5 i[style*="font-size: 4rem"] {
    font-size: 2.75rem !important;
}

/* ----- Tag pills in TicketDetails ---------------------------- */
.ticket-thread .thread-card {
    padding: 0.65rem 0.85rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border-radius: var(--radius-sm) !important;
}

.ticket-thread .thread-marker {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
}

.ticket-thread .thread-item {
    grid-template-columns: 36px 1fr !important;
    gap: 0.6rem !important;
    margin-bottom: 0.55rem !important;
}

.ticket-thread .thread-title {
    font-size: 0.85rem;
    font-weight: 600;
}

.ticket-thread .thread-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.ticket-thread .thread-message {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.4rem;
}

.ticket-thread .thread-footer {
    font-size: 0.72rem;
    margin-top: 0.4rem;
}

.ticket-thread .thread-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
}

/* ----- Spacing utilities reduction (Bootstrap mb-4 / mb-5) --- */
.dashboard-page .row.g-3 { --bs-gutter-x: 0.85rem; --bs-gutter-y: 0.85rem; }

/* ----- Sidebar nav small polish ------------------------------ */
.sidebar .nav-link {
    font-size: 0.85rem;
    padding: 0.45rem 0.85rem;
}

/* ----- Email-thread card (timeline rendering of inbound/outbound emails) ---- */
.ticket-thread .email-message {
    background: #ffffff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-left: 3px solid #3b82f6;
    border-radius: var(--radius-sm, 6px);
    padding: 0.75rem 0.9rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-primary, #111827);
}

.ticket-thread .email-message-note {
    border-left-color: #f59e0b;
    background: #fffdf7;
}

.ticket-thread .email-header {
    font-size: 0.85rem;
    color: var(--text-primary, #111827);
    margin-bottom: 0.35rem;
}

.ticket-thread .email-header strong { font-weight: 600; }

.ticket-thread .email-meta {
    color: var(--text-secondary, #6b7280);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.ticket-thread .email-recipients {
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    background: var(--gray-50, #f9fafb);
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    margin-bottom: 0.5rem;
}

.ticket-thread .email-recipients div + div { margin-top: 0.15rem; }

/* Subject line on the opening Created email card. Renders the ticket
   Title so the agent always sees the canonical subject in the same place
   regardless of whether the ticket was opened from email or the UI. */
.ticket-thread .email-subject {
    font-size: 0.92rem;
    color: #111827;
    background: #f3f4f6;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.ticket-thread .email-subject-label {
    color: #6b7280;
    font-weight: 600;
    margin-right: 0.4rem;
}
.ticket-thread .email-subject-value {
    color: #111827;
    font-weight: 600;
}

.ticket-thread .email-body { font-size: 0.88rem; }
.ticket-thread .email-body p { margin: 0 0 0.5rem 0; }
.ticket-thread .email-body p:last-child { margin-bottom: 0; }
.ticket-thread .email-body img { max-width: 100%; height: auto; }
.ticket-thread .email-body blockquote {
    border-left: 2px solid var(--gray-300, #d1d5db);
    margin: 0.5rem 0;
    padding: 0.25rem 0.75rem;
    color: var(--text-secondary, #6b7280);
}
/* Plain-text descriptions (UI-created tickets) need to preserve the
   newlines the user typed in the textarea, so the body looks the same as
   it did on the create form. */
.ticket-thread .email-body .email-body-text {
    white-space: pre-wrap;
    margin: 0;
}

/* Attachments rendered inside the email card body \u2014 the chip strip
   appears in the \"mail area\" instead of as a separate history block
   below the card. */
.ticket-thread .email-attachments {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #e5e7eb;
}
.ticket-thread .email-attachments-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.4rem;
}
.ticket-thread .email-attachments-label .bi {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Inline images saved against an activity but whose `cid:` rewrite did not
   land in the rendered body (Outlook frequently emits non-matching cid
   identifiers, or omits the Content-Id altogether). Rendered at the bottom
   of the email card so the agent always sees what was attached inline. */
.ticket-thread .email-inline-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.ticket-thread .email-inline-images img {
    max-width: 100%;
    max-height: 360px;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--gray-200, #e5e7eb);
    background: #fff;
}

/* ── Opening email card ────────────────────────────────────────────────
   Rendered at the top of the ticket page (in place of the legacy plain-
   text Description block) by OpeningEmailCard.razor. Re-uses every
   .email-* sub-selector from the timeline by mirroring the .ticket-thread
   scope, so the markup looks identical to the email cards in the
   timeline below \u2014 just lifted up into the hero slot of the page. */
.opening-email {
    /* Extra top space so the card doesn't visually collide with the page
       header above, and a scroll margin so even with the sticky page-header
       the card content scrolls fully into view (instead of being hidden
       behind the 44px app top bar + sticky header strip). */
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    scroll-margin-top: 110px;
}

/* On the ticket details page specifically, drop the sticky behaviour from
   the page-header so the opening email card and timeline are never hidden
   behind it as the agent scrolls through a long conversation. */
.ticket-details-page .page-header {
    position: static;
    top: auto;
    z-index: auto;
}
.opening-email .email-message {
    background: #ffffff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    padding: 1.1rem 1.25rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-primary, #111827);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    /* Hard-clamp overflow so long URLs / wide attachments / pasted
       tables can't push the card past the page width. */
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Sender row — avatar circle + name/verb/recipients. Mirrors the
   Freshdesk-style "P / Pavan M reported via email" layout. */
.opening-email .email-sender-row {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}
.opening-email .email-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    user-select: none;
}
.opening-email .email-sender-info {
    flex: 1 1 auto;
    min-width: 0; /* let inner text truncate / wrap inside the flex item */
}

.opening-email .email-header {
    font-size: 0.9rem;
    color: var(--text-primary, #111827);
}
.opening-email .email-header strong {
    font-weight: 600;
    color: #0047cc;
}
.opening-email .email-verb {
    color: var(--text-secondary, #6b7280);
    margin-left: 0.25rem;
}
.opening-email .email-meta {
    color: var(--text-secondary, #6b7280);
    font-size: 0.78rem;
    margin-left: 0.25rem;
}
.opening-email .email-subject {
    font-size: 0.95rem;
    color: #0f172a;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    margin: 0.25rem 0 0.7rem 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.opening-email .email-subject-label {
    color: #6b7280;
    font-weight: 600;
    margin-right: 0.4rem;
}
.opening-email .email-subject-value {
    color: #0f172a;
    font-weight: 600;
}
.opening-email .email-recipients {
    font-size: 0.8rem;
    color: var(--text-secondary, #475569);
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.opening-email .email-recipients b { font-weight: 600; color: #475569; }
.opening-email .email-body {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #1f2937;
    /* Indent body to align with the sender info column (avatar 36 + 14 gap). */
    padding-left: 50px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.opening-email .email-body p { margin: 0 0 0.6rem 0; }
.opening-email .email-body p:last-child { margin-bottom: 0; }
.opening-email .email-body img {
    max-width: 100%;
    height: auto;
}
.opening-email .email-body table {
    max-width: 100% !important;
    width: auto !important;
    table-layout: auto !important;
    border-collapse: collapse;
}
.opening-email .email-body td,
.opening-email .email-body th {
    max-width: 100% !important;
}
/* Outlook serializes user signatures as `<div id="Signature">` (or
   `id="x_Signature"` after MIME prefixing). Constrain only the column
   width and the logo cap so the signature stays inside the reading
   column without dominating the card — type size, line-height, and
   color stay at the body defaults so it reads exactly like the rest
   of the email (matches the look of Outlook / Gmail / Freshdesk
   conversation views). */
.opening-email .email-body div[id^="Signature"],
.opening-email .email-body div[id^="x_Signature"] {
    max-width: 560px;
}
.opening-email .email-body div[id^="Signature"] table,
.opening-email .email-body div[id^="x_Signature"] table {
    max-width: 100% !important;
    width: auto !important;
    table-layout: auto !important;
}
.opening-email .email-body div[id^="Signature"] img,
.opening-email .email-body div[id^="x_Signature"] img {
    max-width: 200px !important;
    height: auto !important;
}
.opening-email .email-body pre,
.opening-email .email-body code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.opening-email .email-body blockquote {
    border-left: 2px solid var(--gray-300, #d1d5db);
    margin: 0.5rem 0;
    padding: 0.25rem 0.75rem;
    color: var(--text-secondary, #6b7280);
}
.opening-email .email-body .email-body-text {
    white-space: pre-wrap;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.opening-email .email-inline-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.opening-email .email-inline-images img {
    max-width: 100%;
    max-height: 180px;
    height: auto;
    width: auto;
    border-radius: 6px;
    border: 1px solid var(--gray-200, #e5e7eb);
    background: #fff;
    cursor: pointer;
}
.opening-email .email-attachments {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #e5e7eb;
}
.opening-email .email-attachments-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.4rem;
}
.opening-email .email-attachments-label .bi {
    font-size: 0.85rem;
    color: #6b7280;
}

/* ─── Compact attachment chips inside email cards ─────────────────────
   Inside the email-card context (both the opening email at the top of
   the page and the email cards in the timeline below) we override the
   default AttachmentList tile layout so attachments render as small,
   horizontal chips — about the size of one line of text — instead of
   the big 200-240px-tall preview tiles used on the dedicated Attachments
   panel. The agent sees the file name + size + open/download icons, and
   can click through to see the full preview in a new tab if they want. */
.email-attachments .attachment-grid,
.opening-email .email-attachments .attachment-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, max-content));
    gap: 0.4rem;
}
.email-attachments .attachment-card,
.opening-email .email-attachments .attachment-card {
    flex-direction: row !important;
    align-items: center;
    padding: 0.4rem 0.6rem !important;
    gap: 0.55rem;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb !important;
    max-width: 320px;
}
.email-attachments .attachment-card .attachment-preview,
.opening-email .email-attachments .attachment-card .attachment-preview {
    margin: 0 !important;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Image / iframe / video / office tile previews all collapse to a small
   icon-only thumbnail in this context — full preview is one click away
   via the eye icon. */
.email-attachments .attachment-card .attachment-preview img,
.opening-email .email-attachments .attachment-card .attachment-preview img {
    width: 36px;
    height: 36px;
    max-height: 36px;
    object-fit: cover;
    border-radius: 4px;
}
.email-attachments .attachment-card .attachment-preview iframe,
.email-attachments .attachment-card .attachment-preview video,
.opening-email .email-attachments .attachment-card .attachment-preview iframe,
.opening-email .email-attachments .attachment-card .attachment-preview video {
    display: none; /* No iframe / video previews in chip mode — too heavy. */
}
.email-attachments .attachment-card .attachment-preview > div,
.opening-email .email-attachments .attachment-card .attachment-preview > div {
    height: 36px !important;
    width: 36px;
    background: #fff !important;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 !important;
}
.email-attachments .attachment-card .attachment-preview > div .bi,
.email-attachments .attachment-card .attachment-preview > div i,
.opening-email .email-attachments .attachment-card .attachment-preview > div .bi,
.opening-email .email-attachments .attachment-card .attachment-preview > div i {
    font-size: 1.15rem !important;
}
.email-attachments .attachment-card .attachment-preview > div .badge,
.email-attachments .attachment-card .attachment-preview > div small,
.opening-email .email-attachments .attachment-card .attachment-preview > div .badge,
.opening-email .email-attachments .attachment-card .attachment-preview > div small {
    display: none !important;
}
/* File-name + size + actions sit inline next to the icon. */
.email-attachments .attachment-card > .small,
.opening-email .email-attachments .attachment-card > .small {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #111827;
}
.email-attachments .attachment-card > .d-flex,
.opening-email .email-attachments .attachment-card > .d-flex {
    margin-top: 0 !important;
    gap: 0.6rem;
    flex: 0 0 auto;
}
.email-attachments .attachment-card > .d-flex small,
.opening-email .email-attachments .attachment-card > .d-flex small {
    font-size: 0.72rem;
    color: #6b7280;
}
.email-attachments .attachment-card > .d-flex .bi,
.opening-email .email-attachments .attachment-card > .d-flex .bi {
    font-size: 0.9rem;
}

/* Conversation history header — sits between the opening email card and
   the timeline below so the agent has a clear "this is the inline
   reply / note history" affordance. */
.conversation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.25rem 0 0.75rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}
.conversation-header .bi {
    color: #2563eb;
    font-size: 0.95rem;
}
.conversation-header .conversation-count {
    background: #eef2ff;
    color: #1e3a8a;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* Page-level overflow guard — the ticket details page has a deeply
   nested card structure and email HTML can include very long URLs or
   wide tables. Force the whole page tree to honour the viewport width. */
.ticket-details-page,
.ticket-details-page .card,
.ticket-details-page .card-body { max-width: 100%; }
.ticket-details-page .card-body { overflow-x: hidden; }

/* ============================================================
   Re-usable grid chrome (used by SortHeader, GridPager and the
   per-column filter rows on every paginated grid)
   ============================================================ */

/* Sortable column header — click target with sort arrow */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 120ms ease;
}
.sortable-th:hover {
    background-color: rgba(0, 122, 204, 0.06);
}
.sortable-th.active {
    color: var(--primary-color, #007acc);
}
.sortable-arrow {
    font-size: 0.7rem;
    opacity: 0.45;
    transition: opacity 120ms ease;
}
.sortable-arrow.active {
    opacity: 1;
    color: var(--primary-color, #007acc);
}
.sortable-th:hover .sortable-arrow { opacity: 0.85; }

/* Per-column filter row — light grey strip just below the headers */
.table .filter-row > th,
.table thead .filter-row > th {
    background-color: #f8fafc;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    padding: 4px 6px !important;
    font-weight: 400;
}
.filter-row .form-control,
.filter-row .form-select {
    font-size: 0.78rem;
    padding: 2px 6px;
    height: auto;
    min-height: 28px;
}

/* Keep the table header (and sticky filter row underneath) visible while
   the table body scrolls. Works in conjunction with .table-responsive on
   long lists. */
.table thead th {
    position: sticky;
    top: 0;
    background-color: #f8fafc;
    z-index: 2;
}
.table thead .filter-row > th {
    top: 33px; /* sits directly under the title row */
    z-index: 2;
}

/* Standardised GridPager (used by every paginated grid) */
.grid-pager {
    background-color: #fafbfc;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}
.grid-pager .grid-pager-size {
    width: auto;
    min-width: 70px;
}
.grid-pager .pagination .page-link {
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
}

/* Flatpickr overrides removed: ticket-grid date filters use the browser's
   native HTML5 <input type="date"> picker, so no third-party calendar CSS
   needs to be tamed here. */