/*
 * tables.css — bootstrap-table redesign, following DESIGN.md tokens.
 *
 * Covers the whole list-table surface used across the admin panel: the toolbar
 * (filters · action buttons · search), the header, body rows, row action
 * buttons, pagination, the page-size + column-toggle dropdowns, and the
 * empty/loading states.
 *
 * LOAD ORDER MATTERS. This sheet is linked in include.blade.php AFTER the
 * bootstrap-table plugin sheets (which themselves sit after style.css/rtl.css),
 * so it outranks BOTH the legacy Star-Admin table rules and the plugin's own
 * defaults — in LTR and RTL alike. That is why tables live in their own file
 * rather than content.css (which loads before the plugin CSS and so can't beat
 * it on load order). RTL flips are scoped with [dir="rtl"].
 *
 * No hardcoded BRAND hex — brand color comes from var(--theme-color) /
 * var(--secondary-color); neutral grays and semantic status colors (red/green)
 * are intentional and not brand. Radii/shadows are taken from the DESIGN.md
 * scale (sm field 8px, btn 10px; footer/transient-overlay shadow tier).
 */

/* ── Table surface ───────────────────────────────────────────────────── */

.bootstrap-table .fixed-table-container {
    border: 0;
}

/* Drop the heavy full-cell grid (default classes are "table-bordered") in favour
   of clean horizontal row separators only. */
.bootstrap-table .table,
.bootstrap-table .table.table-bordered {
    border: 0;
    margin-bottom: 0 !important;
}

.bootstrap-table .table > tbody > tr > td,
.bootstrap-table .table.table-bordered > tbody > tr > td,
.bootstrap-table .table > thead > tr > th,
.bootstrap-table .table.table-bordered > thead > tr > th {
    border-left: 0;
    border-right: 0;
}

.bootstrap-table .table > tbody > tr > td,
.bootstrap-table .table.table-bordered > tbody > tr > td {
    border-top: 0;
    border-bottom: 1px solid rgba(27, 27, 27, 0.06);
    padding: 0.8125rem 0.9375rem;
    vertical-align: middle;
    color: #343a40;
}

/* Last row carries no separator — the card edge does that job. */
.bootstrap-table .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.bootstrap-table .fixed-table-container .table thead th,
.bootstrap-table .fixed-table-container .table.table-bordered thead th {
    background: color-mix(in srgb, var(--theme-color) 4%, #f7f8fa);
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-color) 12%, rgba(27, 27, 27, 0.08));
    vertical-align: middle;
}

.bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding: 0.6875rem 0.9375rem;
    font-family: "Roboto-Medium", sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #475569;
    text-transform: uppercase;
}

/* Round the header's outer top corners so the table reads as a contained block
   inside the white card (border-collapse keeps inner cells square). */
.bootstrap-table .fixed-table-container .table thead tr > th:first-child {
    border-top-left-radius: 10px;
}

.bootstrap-table .fixed-table-container .table thead tr > th:last-child {
    border-top-right-radius: 10px;
}

[dir="rtl"] .bootstrap-table .fixed-table-container .table thead tr > th:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
}

[dir="rtl"] .bootstrap-table .fixed-table-container .table thead tr > th:last-child {
    border-top-right-radius: 0;
    border-top-left-radius: 10px;
}

/* Sort arrows — repaint the plugin's brand-foreign lilac (#7B83DB) to neutral
   slate so they sit quietly in the redesigned header. (CSS vars can't be
   injected into a url() data-URI, so the active arrow is a fixed neutral rather
   than theme-reactive — neutral, not brand, per DESIGN.md.) */
.bootstrap-table .fixed-table-container .table thead th .both {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23c2c8d2"><path d="m103.05877,41.4c9.37707,-12.5 24.60541,-12.5 33.98248,0l96.02113,128c6.90152,9.2 8.92696,22.9 5.17614,34.9s-12.45274,19.8 -22.20489,19.8l-192.04225,-0.1c-9.67713,0 -18.45406,-7.8 -22.20489,-19.8s-1.65036,-25.7 5.17614,-34.9l96.02113,-128l0.07501,0.1zm0,429.3l-96.02113,-128c-6.90152,-9.2 -8.92696,-22.9 -5.17614,-34.9s12.45274,-19.8 22.20489,-19.8l192.04225,0c9.67713,0 18.45406,7.8 22.20489,19.8s1.65036,25.7 -5.17614,34.9l-96.02113,128c-9.37707,12.5 -24.60541,12.5 -33.98248,0l-0.07501,0z"/></svg>');
}

.bootstrap-table .fixed-table-container .table thead th .asc {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23475569"><path d="m136.9496,41.4c-9.3763,-12.5 -24.60342,-12.5 -33.97972,0l-96.01334,128c-6.90096,9.2 -8.92624,22.9 -5.17572,34.9s12.45173,19.8 22.20309,19.8l192.02668,0c9.67634,0 18.45256,-7.8 22.20309,-19.8s1.65023,-25.7 -5.17572,-34.9l-96.01334,-128l-0.07501,0z"/></svg>');
}

.bootstrap-table .fixed-table-container .table thead th .desc {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23475569"><path d="m136.94959,471.6c-9.3763,12.5 -24.60342,12.5 -33.97972,0l-96.01334,-128c-6.90096,-9.2 -8.92624,-22.9 -5.17572,-34.9s12.45173,-19.8 22.20308,-19.8l192.02667,0c9.67634,0 18.45256,7.8 22.20308,19.8s1.65023,25.7 -5.17572,34.9l-96.01334,128l-0.07501,0z"/></svg>');
}

/* ── Body rows: hover · stripe · selection ───────────────────────────── */

.bootstrap-table .table.table-hover > tbody > tr,
.table-hover tbody tr {
    transition: background-color 0.15s ease;
}

.bootstrap-table .table.table-hover > tbody > tr:hover,
.table-hover tbody tr:hover {
    background-color: color-mix(in srgb, var(--secondary-color, var(--theme-color)) 9%, #ffffff);
}

.bootstrap-table .table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: color-mix(in srgb, var(--theme-color) 2.5%, #ffffff);
}

.bootstrap-table .table.table-striped > tbody > tr:hover {
    background-color: color-mix(in srgb, var(--secondary-color, var(--theme-color)) 9%, #ffffff);
}

.bootstrap-table .fixed-table-container .table > tbody > tr.selected > td {
    background-color: color-mix(in srgb, var(--theme-color) 9%, #ffffff);
}

/* Empty state — centred, muted, breathing room. */
.bootstrap-table .fixed-table-container .table > tbody > tr.no-records-found > td {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #8c8c8c;
    font-style: normal;
}

/* ── Row action buttons ──────────────────────────────────────────────── */
/* Repaint the loud Star-Admin gradient icon-buttons into refined soft-tinted
   icon buttons, scoped to the table body so .btn-gradient-* elsewhere is
   untouched. Icons are Lucide — BootstrapTableService renders SVGs via <x-icon>;
   the many controllers that still build action buttons inline keep their FA <i>,
   which inherits these colours fine.

   COLOUR BY THE GRADIENT / INVERSE CLASS, not by the action-name class. Action
   names are inconsistent across controllers (`editdata` vs `edit-data`,
   `add-questions`, `view-result`, …) but the colour class (`btn-gradient-*` /
   `btn-inverse-*`) is always present and is the real intent. Mapping:
   primary→theme, info→secondary, success→green, danger→red, warning→amber,
   dark/secondary→slate. The base rule itself sets a visible neutral (slate) bg +
   a non-white colour, so ANY .btn-icon stays visible even with no colour class —
   without this the legacy gradient `color:#fff` left the icon white-on-white once
   the gradient bg was stripped (the "invisible action buttons" bug).

   :hover/:focus/:active/.active are grouped so a *clicked* button keeps its tint
   instead of the legacy `.btn-gradient-*:active` reasserting its gradient. The
   4-class scoped selectors outrank those legacy 3-class rules without !important. */
.bootstrap-table .fixed-table-body .btn-icon,
.bootstrap-table .fixed-table-body a.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    line-height: 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: rgba(71, 85, 105, 0.1);
    background-image: none;
    color: #475569;
    box-shadow: none;
    vertical-align: middle;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bootstrap-table .fixed-table-body .btn-icon svg,
.bootstrap-table .fixed-table-body .btn-icon i {
    width: 16px;
    height: 16px;
    font-size: 0.875rem;
    line-height: 1;
    margin: 0;
}

/* Action-cell dropdown/btn-group wrappers (e.g. the "generate document" menu)
   are block-level <div>s, so they break the trigger button onto its own line
   below the inline edit/delete buttons. Render them inline-flex so every action
   — plain icon button or dropdown trigger — sits on one row, aligned and evenly
   spaced (the inline buttons' trailing &nbsp; supplies the gap). The absolutely
   positioned .dropdown-menu inside is unaffected. */
.bootstrap-table .fixed-table-body .dropdown,
.bootstrap-table .fixed-table-body .btn-group {
    display: inline-flex;
    vertical-align: middle;
}

/* Base hover/press/focus (slate) — also kills the legacy gradient re-assert
   and the Bootstrap focus ring for every .btn-icon. */
.bootstrap-table .fixed-table-body .btn-icon:hover,
.bootstrap-table .fixed-table-body .btn-icon:focus,
.bootstrap-table .fixed-table-body .btn-icon:active,
.bootstrap-table .fixed-table-body .btn-icon.active {
    background-color: rgba(71, 85, 105, 0.18);
    background-image: none;
    border-color: rgba(71, 85, 105, 0.3);
    color: #334155;
    box-shadow: none;
    outline: 0;
}

/* primary → theme (edit and most primary actions) */
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-primary,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-primary {
    background-color: color-mix(in srgb, var(--theme-color) 10%, #ffffff);
    color: var(--theme-color);
}

.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-primary:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-primary:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-primary:active,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-primary.active,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-primary:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-primary:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-primary:active {
    background-color: color-mix(in srgb, var(--theme-color) 18%, #ffffff);
    border-color: color-mix(in srgb, var(--theme-color) 30%, transparent);
    color: var(--theme-color);
}

/* info → secondary (view / preview actions) */
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-info,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-info {
    background-color: color-mix(in srgb, var(--secondary-color, var(--theme-color)) 12%, #ffffff);
    color: var(--secondary-color, var(--theme-color));
}

.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-info:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-info:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-info:active,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-info.active,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-info:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-info:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-info:active {
    background-color: color-mix(in srgb, var(--secondary-color, var(--theme-color)) 20%, #ffffff);
    border-color: color-mix(in srgb, var(--secondary-color, var(--theme-color)) 32%, transparent);
    color: var(--secondary-color, var(--theme-color));
}

/* success → green (restore / approve / generate) */
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-success,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-success {
    background-color: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-success:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-success:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-success:active,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-success.active,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-success:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-success:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-success:active {
    background-color: rgba(22, 163, 74, 0.18);
    border-color: rgba(22, 163, 74, 0.32);
    color: #15803d;
}

/* danger → red (delete / reject / permanent delete) */
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-danger,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-danger:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-danger:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-danger:active,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-danger.active,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-danger:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-danger:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-danger:active {
    background-color: rgba(220, 53, 69, 0.18);
    border-color: rgba(220, 53, 69, 0.32);
    color: #c12a3a;
}

/* warning → amber */
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-warning,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-warning {
    background-color: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-warning:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-warning:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-warning:active,
.bootstrap-table .fixed-table-body .btn-icon.btn-gradient-warning.active,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-warning:hover,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-warning:focus,
.bootstrap-table .fixed-table-body .btn-icon.btn-inverse-warning:active {
    background-color: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.34);
    color: #92400e;
}

/* Inline-built action buttons still carry Font Awesome <i> glyphs (the many
   controllers that build operate HTML as strings don't go through <x-icon>).
   Repaint the COMMON ones to Lucide with the same mask + currentColor trick as
   the toolbar, so the whole table's iconography is Lucide and theme-aware. Only
   the glyphs listed here are masked; any other FA icon falls through and still
   renders as a normal (visible) FA glyph. */
.bootstrap-table .fixed-table-body .btn-icon i.fa-edit,
.bootstrap-table .fixed-table-body .btn-icon i.fa-pencil,
.bootstrap-table .fixed-table-body .btn-icon i.fa-pencil-square-o,
.bootstrap-table .fixed-table-body .btn-icon i.fa-trash,
.bootstrap-table .fixed-table-body .btn-icon i.fa-trash-o,
.bootstrap-table .fixed-table-body .btn-icon i.fa-close,
.bootstrap-table .fixed-table-body .btn-icon i.fa-times,
.bootstrap-table .fixed-table-body .btn-icon i.fa-times-circle,
.bootstrap-table .fixed-table-body .btn-icon i.fa-remove,
.bootstrap-table .fixed-table-body .btn-icon i.fa-plus,
.bootstrap-table .fixed-table-body .btn-icon i.fa-eye,
.bootstrap-table .fixed-table-body .btn-icon i.fa-info-circle,
.bootstrap-table .fixed-table-body .btn-icon i.fa-file-pdf-o,
.bootstrap-table .fixed-table-body .btn-icon i.fa-file-text-o,
.bootstrap-table .fixed-table-body .btn-icon i.fa-exclamation-triangle,
.bootstrap-table .fixed-table-body .btn-icon i.fa-dollar,
.bootstrap-table .fixed-table-body .btn-icon i.fa-check,
.bootstrap-table .fixed-table-body .btn-icon i.fa-check-circle,
.bootstrap-table .fixed-table-body .btn-icon i.fa-download,
.bootstrap-table .fixed-table-body .btn-icon i.fa-refresh,
.bootstrap-table .fixed-table-body .btn-icon i.fa-search {
    font-size: 0 !important;
    width: 16px;
    height: 16px;
    line-height: 1;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-edit,
.bootstrap-table .fixed-table-body .btn-icon i.fa-pencil,
.bootstrap-table .fixed-table-body .btn-icon i.fa-pencil-square-o {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-trash,
.bootstrap-table .fixed-table-body .btn-icon i.fa-trash-o {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' x2='10' y1='11' y2='17'/%3E%3Cline x1='14' x2='14' y1='11' y2='17'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-close,
.bootstrap-table .fixed-table-body .btn-icon i.fa-times,
.bootstrap-table .fixed-table-body .btn-icon i.fa-times-circle,
.bootstrap-table .fixed-table-body .btn-icon i.fa-remove {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-eye {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-info-circle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-file-pdf-o,
.bootstrap-table .fixed-table-body .btn-icon i.fa-file-text-o {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-exclamation-triangle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-dollar {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-check,
.bootstrap-table .fixed-table-body .btn-icon i.fa-check-circle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-refresh {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-body .btn-icon i.fa-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
}

/* "kebab" action menu — neutral ghost toggle + transient-overlay dropdown. */
.bootstrap-table .fixed-table-body .table-action-column .btn,
.bootstrap-table .fixed-table-body .table-action-column .btn.btn-inverse-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(27, 27, 27, 0.12);
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bootstrap-table .fixed-table-body .table-action-column .btn svg,
.bootstrap-table .fixed-table-body .table-action-column .btn i {
    width: 16px;
    height: 16px;
    font-size: 0.875rem;
    line-height: 1;
}

.bootstrap-table .fixed-table-body .table-action-column .btn:hover,
.bootstrap-table .fixed-table-body .table-action-column .btn:focus,
.bootstrap-table .fixed-table-body .table-action-column .btn.btn-inverse-dark:hover,
.bootstrap-table .fixed-table-body .table-action-column .btn.btn-inverse-dark:focus,
.bootstrap-table .fixed-table-body .table-action-column .btn.btn-inverse-dark:active,
.bootstrap-table .fixed-table-body .table-action-column.show .btn {
    background: color-mix(in srgb, var(--theme-color) 8%, #fff);
    color: var(--theme-color);
    border-color: color-mix(in srgb, var(--theme-color) 30%, transparent);
    box-shadow: none;
    outline: 0;
}

.action-column-dropdown-menu {
    border: 1px solid rgba(27, 27, 27, 0.06);
    border-radius: 10px;
    padding: 0.375rem;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 4px 12px rgba(16, 24, 40, 0.06);
}

.action-column-dropdown-menu .dropdown-item {
    border-radius: 7px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.action-column-dropdown-menu .dropdown-item:hover,
.action-column-dropdown-menu .dropdown-item:focus {
    background-color: color-mix(in srgb, var(--theme-color) 8%, transparent);
    color: var(--theme-color);
}

/* ── Toolbar (filters · action buttons · search) ─────────────────────── */

.bootstrap-table .fixed-table-toolbar {
    margin-bottom: 0.875rem;
}

/* Refresh / columns / export — neutral ghost segmented group that resolves to
   the theme on hover (same language as the topbar action button). */
.bootstrap-table .fixed-table-toolbar .columns .btn,
.bootstrap-table .fixed-table-toolbar .columns .btn.btn-secondary,
.bootstrap-table .fixed-table-toolbar .columns .btn.dropdown-toggle {
    background: #fff;
    color: #64748b;
    border: 1px solid rgba(27, 27, 27, 0.12);
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bootstrap-table .fixed-table-toolbar .columns .btn:hover,
.bootstrap-table .fixed-table-toolbar .columns .btn:focus,
.bootstrap-table .fixed-table-toolbar .columns .btn:active,
.bootstrap-table .fixed-table-toolbar .columns .btn.btn-secondary:hover,
.bootstrap-table .fixed-table-toolbar .columns .btn.btn-secondary:focus,
.bootstrap-table .fixed-table-toolbar .columns .btn.btn-secondary:active,
.bootstrap-table .fixed-table-toolbar .columns .btn-group.open > .btn,
.bootstrap-table .fixed-table-toolbar .columns .btn-group.show > .btn {
    background: color-mix(in srgb, var(--theme-color) 8%, #fff);
    color: var(--theme-color);
    border-color: color-mix(in srgb, var(--theme-color) 35%, transparent);
    box-shadow: none;
    outline: 0;
    z-index: 2;
}

/* segmented look: round only the outer ends (8px = sm-field radius). */
.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:first-child > .btn,
.bootstrap-table .fixed-table-toolbar .columns > .btn:first-child,
.bootstrap-table .fixed-table-toolbar .columns > .btn-group:first-child > .btn {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:last-child > .btn,
.bootstrap-table .fixed-table-toolbar .columns > .btn:last-child,
.bootstrap-table .fixed-table-toolbar .columns > .btn-group:last-child > .btn {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:first-child > .btn,
[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns > .btn:first-child,
[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns > .btn-group:first-child > .btn {
    border-radius: 0 8px 8px 0;
}

[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:last-child > .btn,
[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns > .btn:last-child,
[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns > .btn-group:last-child > .btn {
    border-radius: 8px 0 0 8px;
}

/* Gap between the button group and the search box. The plugin spaces them with
   `.columns-right { margin-left: 5px }` (search sits to the LEFT of the buttons
   in LTR). RTL mirrors the layout — buttons on the left, search on the right —
   so the margin must move to the inline-end, else the two sit flush. Flip it so
   RTL keeps the same spacing as LTR. */
[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns-right {
    margin-left: 0;
    margin-right: 5px;
}

[dir="rtl"] .bootstrap-table .fixed-table-toolbar .columns-left {
    margin-right: 0;
    margin-left: 5px;
}

/* Toolbar icons → Lucide. The plugin hard-codes Font Awesome <i> glyphs
   (fa-sync / fa-th-list / fa-download) that can't be swapped via its JS `icons`
   option (it expects font classes, not SVG). Instead we hide the FA glyph
   (font-size:0) and paint a Lucide silhouette over the same <i> via CSS mask +
   `background-color: currentColor`, so it inherits the ghost button's
   muted→theme colour exactly like the row-action SVGs. */
.bootstrap-table .fixed-table-toolbar .columns button i.fa {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 1;
    vertical-align: middle;
    font-size: 0 !important;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

.bootstrap-table .fixed-table-toolbar .columns button[name="refresh"] i.fa {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-toolbar .columns .keep-open button i.fa {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E");
}

.bootstrap-table .fixed-table-toolbar .columns .export button i.fa {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
}

/* Column-toggle dropdown — transient-overlay tier (matches Select2 panel). */
.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu,
.bootstrap-table .fixed-table-toolbar .export .dropdown-menu {
    border: 1px solid rgba(27, 27, 27, 0.06);
    border-radius: 10px;
    padding: 0.375rem;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 4px 12px rgba(16, 24, 40, 0.06);
}

.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu label,
.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu .dropdown-item,
.bootstrap-table .fixed-table-toolbar .export .dropdown-menu .dropdown-item {
    border-radius: 7px;
    padding: 0.375rem 0.625rem;
    margin: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu label:hover,
.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu .dropdown-item:hover,
.bootstrap-table .fixed-table-toolbar .export .dropdown-menu .dropdown-item:hover {
    background-color: color-mix(in srgb, var(--theme-color) 8%, transparent);
    color: var(--theme-color);
}

/* Search field — form-field tokens + a leading magnifier glyph (neutral gray,
   not brand). 10px radius + theme focus glow come from content.css's
   .form-control rules; here we add the icon, padding and RTL flip. */
.bootstrap-table .fixed-table-toolbar .search .form-control,
.bootstrap-table .fixed-table-toolbar .search input.search-input {
    padding-left: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.7rem center;
    background-size: 15px 15px;
}

[dir="rtl"] .bootstrap-table .fixed-table-toolbar .search .form-control,
[dir="rtl"] .bootstrap-table .fixed-table-toolbar .search input.search-input {
    padding-left: 0.75rem;
    padding-right: 2.1rem;
    background-position: right 0.7rem center;
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.bootstrap-table .fixed-table-pagination > .pagination-detail,
.bootstrap-table .fixed-table-pagination > .pagination {
    margin-top: 0.875rem;
    margin-bottom: 0.25rem;
}

.bootstrap-table .fixed-table-pagination .pagination-info {
    color: rgba(27, 27, 27, 0.6);
    font-size: 0.8125rem;
}

.bootstrap-table .fixed-table-pagination .page-list .page-detail,
.bootstrap-table .fixed-table-pagination .page-list {
    color: rgba(27, 27, 27, 0.6);
    font-size: 0.8125rem;
}

/* page-size toggle — neutral ghost button. */
.bootstrap-table .fixed-table-pagination .page-list .btn,
.bootstrap-table .fixed-table-pagination .page-list .btn.btn-secondary {
    background: #fff;
    color: #475569;
    border: 1px solid rgba(27, 27, 27, 0.12);
    border-radius: 8px;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bootstrap-table .fixed-table-pagination .page-list .btn:hover,
.bootstrap-table .fixed-table-pagination .page-list .btn:focus,
.bootstrap-table .fixed-table-pagination .page-list .btn:active,
.bootstrap-table .fixed-table-pagination .page-list .show > .btn {
    background: color-mix(in srgb, var(--theme-color) 8%, #fff);
    color: var(--theme-color);
    border-color: color-mix(in srgb, var(--theme-color) 30%, transparent);
    box-shadow: none;
    outline: 0;
}

/* page-size dropdown panel — transient-overlay tier. */
.bootstrap-table .fixed-table-pagination .page-list .dropdown-menu {
    border: 1px solid rgba(27, 27, 27, 0.06);
    border-radius: 10px;
    padding: 0.25rem;
    min-width: 100%;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 4px 12px rgba(16, 24, 40, 0.06);
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-menu .page-item .page-link {
    border: 0;
    border-radius: 7px;
    margin: 0;
    padding: 0.3125rem 0.625rem;
    color: #343a40;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-menu .page-item .page-link:hover {
    background-color: color-mix(in srgb, var(--theme-color) 8%, transparent);
    color: var(--theme-color);
}

.bootstrap-table .fixed-table-pagination .page-list .dropdown-menu .page-item.active .page-link {
    background-color: color-mix(in srgb, var(--theme-color) 12%, transparent);
    color: var(--theme-color);
    font-weight: 500;
}

/* Page pills — soft, spaced, theme-aware. Scoped to the float-right pagination
   list so the page-size dropdown (which reuses .page-link) is unaffected. */
.bootstrap-table .fixed-table-pagination > .pagination .pagination {
    gap: 3px;
}

.bootstrap-table .fixed-table-pagination > .pagination .page-item .page-link {
    position: relative;
    margin: 0;
    min-width: 34px;
    text-align: center;
    padding: 0.4rem 0.6rem;
    line-height: 1.25;
    color: #475569;
    background-color: #fff;
    border: 1px solid rgba(27, 27, 27, 0.1);
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bootstrap-table .fixed-table-pagination > .pagination .page-item .page-link:hover {
    background-color: color-mix(in srgb, var(--theme-color) 8%, #fff);
    border-color: color-mix(in srgb, var(--theme-color) 30%, transparent);
    color: var(--theme-color);
    z-index: 2;
}

.bootstrap-table .fixed-table-pagination > .pagination .page-item .page-link:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--theme-color) 22%, transparent);
    z-index: 3;
}

.bootstrap-table .fixed-table-pagination > .pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

.bootstrap-table .fixed-table-pagination > .pagination .page-item.disabled .page-link {
    color: #b6bcc4;
    background-color: #fff;
    border-color: rgba(27, 27, 27, 0.08);
    opacity: 0.7;
}

/* ── Loading mask ────────────────────────────────────────────────────── */
/* Full-body frosted overlay with a centered pill holding the message + the
   themed three-dot animation. `top: 0` stretches the mask over the whole table
   body (bootstrap-table only anchors it to the bottom by default). */

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
    top: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap {
    align-items: center;
    padding: 9px 18px;
    background: #fff;
    border: 1px solid rgba(27, 27, 27, 0.06);
    border-radius: 999px;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 2px 6px rgba(16, 24, 40, 0.06);
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-text {
    /* Override bootstrap-table's inline auto font-size (often oversized). */
    font-size: 0.9rem !important;
    font-weight: 500;
    color: var(--theme-color);
    margin-right: 8px;
}

/* Tint the three animated dots with the brand color. */
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::before {
    background: var(--theme-color);
}

/* ── Color chip ──────────────────────────────────────────────────────── */
/* A swatch + hex label for a stored color value (e.g. subject bg_color). The
   chip reads cleanly on any swatch color because the label sits on the card,
   not on top of the color — unlike the old filled bar with overlaid text. The
   swatch's own color is data-driven, so it's set inline on the element. */
.color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.7rem 0.25rem 0.3rem;
    border: 1px solid rgba(27, 27, 27, 0.1);
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    color: #5b6677;
}

.color-chip-swatch {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.color-chip-code {
    font-family: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}