/* cx_theme.css — the design layer (2026-11-04, "luminos, compact" + light/dark).
 *
 * Loaded LAST in <head> (after _page_chrome, every page stylesheet and
 * cx_shell.css), so it wins on source order. CSS only: no id or class that the
 * CDN JavaScript or AdminLTE binds to is touched. The sidebar groups and the
 * theme switch are the only markup changes (sidebar.html.twig, header.html.twig).
 *
 * How it works:
 *  1. One set of semantic tokens (`--t-*`), defined twice: light on :root, dark
 *     on :root[data-theme="dark"]. The theme attribute is set in <head> before
 *     first paint (base.html.twig), from localStorage `cx-theme`, else from the
 *     system preference.
 *  2. Every OLDER token family (`--cx-*` from _page_chrome, `--sh-*` from
 *     cx_shell, `--cxc-*` grid cells, `--ab-*` banners, `--px-*` push) is
 *     re-pointed at the `--t-*` tokens, so the rules already written against
 *     them follow the theme without being rewritten.
 *  3. Then the surfaces that are hard-coded (Bootstrap 5.0.1, AdminLTE, the
 *     CDN's basic/main.css, DataTables, select2, datepicker, Lobibox,
 *     jquery-confirm, the navy record bars) are restated against the tokens.
 *
 * Direction: white surfaces, one blue accent, 1px hairlines, regular weights
 * (600 for titles, never 700+ for body text), compact rows, no navy bars.
 */

/* ================================================================ tokens == */

:root {
    --t-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --t-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --t-canvas: #f6f7f9;
    --t-surface: #ffffff;
    --t-subtle: #f9fafb;
    --t-hover: #f3f4f6;
    --t-sunken: #f1f3f5;
    --t-line: #e6e8eb;
    --t-line-2: #d5d9de;
    --t-ink: #111827;
    --t-ink-2: #374151;
    --t-muted: #6b7280;
    --t-faint: #9ca3af;

    --t-accent: #4f46e5;
    --t-accent-hover: #4338ca;
    --t-accent-soft: #eef2ff;
    --t-accent-line: #c7d2fe;
    --t-accent-ink: #4338ca;
    --t-on-accent: #ffffff;
    --t-btn: #4f46e5;
    --t-btn-hover: #4338ca;

    --t-ok: #067647;
    --t-ok-soft: #ecfdf3;
    --t-ok-line: #abefc6;
    --t-warn: #b54708;
    --t-warn-soft: #fffaeb;
    --t-warn-line: #fedf89;
    --t-bad: #b42318;
    --t-bad-soft: #fef3f2;
    --t-bad-line: #fecdca;
    --t-info: #175cd3;
    --t-info-soft: #eff8ff;

    --t-radius: 8px;
    --t-radius-sm: 6px;
    --t-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
    --t-shadow-pop: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
    --t-focus: 0 0 0 3px rgba(79, 70, 229, .2);
    --t-backdrop: rgba(17, 24, 39, .45);

    --t-sidebar: #fbfbfc;
    --t-sidebar-w: 240px;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --t-canvas: #0b0d12;
    --t-surface: #12151c;
    --t-subtle: #161a22;
    --t-hover: #1c212b;
    --t-sunken: #0f1218;
    --t-line: #232834;
    --t-line-2: #2f3542;
    --t-ink: #e7e9ed;
    --t-ink-2: #c3c8d0;
    --t-muted: #8e96a3;
    --t-faint: #69717d;

    --t-accent: #818cf8;
    --t-accent-hover: #a5b4fc;
    --t-accent-soft: rgba(129, 140, 248, .14);
    --t-accent-line: rgba(129, 140, 248, .35);
    --t-accent-ink: #a5b4fc;
    --t-on-accent: #ffffff;
    --t-btn: #6366f1;
    --t-btn-hover: #7376f4;

    --t-ok: #4ade80;
    --t-ok-soft: rgba(74, 222, 128, .12);
    --t-ok-line: rgba(74, 222, 128, .3);
    --t-warn: #fbbf24;
    --t-warn-soft: rgba(251, 191, 36, .12);
    --t-warn-line: rgba(251, 191, 36, .3);
    --t-bad: #f87171;
    --t-bad-soft: rgba(248, 113, 113, .12);
    --t-bad-line: rgba(248, 113, 113, .3);
    --t-info: #60a5fa;
    --t-info-soft: rgba(96, 165, 250, .12);

    --t-shadow: none;
    --t-shadow-pop: 0 16px 40px rgba(0, 0, 0, .5);
    --t-focus: 0 0 0 3px rgba(129, 140, 248, .3);
    --t-backdrop: rgba(0, 0, 0, .6);

    --t-sidebar: #0e1117;

    color-scheme: dark;
}

/* The older token families, re-pointed. */
:root,
:root[data-theme="dark"] {
    --cx-brand: var(--t-accent);
    --cx-brand-deep: var(--t-accent-hover);
    --cx-ink: var(--t-ink);
    --cx-muted: var(--t-muted);
    --cx-line: var(--t-line);
    --cx-surface: var(--t-surface);
    --cx-canvas: var(--t-canvas);
    --cx-radius: var(--t-radius);
    --cx-shadow: var(--t-shadow);
    --cx-rail: var(--t-sidebar);
    --cx-rail-deep: var(--t-sidebar);
    --cx-rail-ink: var(--t-ink-2);
    --cx-rail-ink-on: var(--t-accent-ink);

    --sh-ink: var(--t-ink);
    --sh-ink-2: var(--t-ink-2);
    --sh-muted: var(--t-muted);
    --sh-line: var(--t-line);
    --sh-line-2: var(--t-line-2);
    --sh-canvas: var(--t-canvas);
    --sh-surface: var(--t-surface);
    --sh-subtle: var(--t-subtle);
    --sh-accent: var(--t-accent);
    --sh-accent-2: var(--t-accent);
    --sh-accent-soft: var(--t-accent-soft);
    --sh-rail: var(--t-sidebar);
    --sh-rail-2: var(--t-hover);
    --sh-rail-ink: var(--t-ink-2);
    --sh-radius: var(--t-radius-sm);
    --sh-focus: var(--t-focus);

    --cxc-badge: var(--t-accent);
    --cxc-brand: var(--t-accent);
    --cxc-faint: var(--t-faint);
    --cxc-ink: var(--t-ink);
    --cxc-quiet: var(--t-muted);

    --ab-line: var(--t-line);
    --ab-muted: var(--t-muted);
    --ab-navy: var(--t-accent);
    --ab-navy-dark: var(--t-accent-hover);
    --ab-soft: var(--t-subtle);

    --px-bad: var(--t-bad);
    --px-bad-bg: var(--t-bad-soft);
    --px-ok: var(--t-ok);
    --px-ok-bg: var(--t-ok-soft);
    --px-warn: var(--t-warn);
    --px-warn-bg: var(--t-warn-soft);
    --px-info: var(--t-info);
    --px-info-bg: var(--t-info-soft);

    --cxw-radius: var(--t-radius);
}

/* ============================================================ base type === */

html,
body,
.wrapper,
.content-wrapper,
.main-sidebar,
.main-header,
.modal,
.dropdown-menu,
.select2-container,
.tooltip,
.popover,
button,
input,
select,
textarea {
    font-family: var(--t-font) !important;
}

/* Icon fonts must keep their own family. */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free" !important;
}
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}

body,
body.text-sm {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--t-ink);
    background: var(--t-canvas);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

.content-wrapper,
.content-wrapper > .content {
    color: var(--t-ink);
    background: var(--t-canvas) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--t-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

b, strong, th, .fw-bold, .font-weight-bold {
    font-weight: 600 !important;
}

a {
    color: var(--t-accent-ink);
}

a:hover {
    color: var(--t-accent-hover);
}

.text-muted,
small.text-muted {
    color: var(--t-muted) !important;
}

.text-dark {
    color: var(--t-ink) !important;
}

hr {
    border-color: var(--t-line);
    opacity: 1;
    background: var(--t-line);
}

code, kbd, pre, .cx-mono, .font-monospace {
    font-family: var(--t-mono) !important;
}

::selection {
    background: var(--t-accent-soft);
}

/* ============================================================== top bar === */

.main-header.navbar.cx-navbar {
    background: var(--t-surface) !important;
    border-bottom: 1px solid var(--t-line) !important;
}

.main-header.cx-navbar a.cx-navbar-icon,
.main-header.cx-navbar a.cx-navbar-tool,
.main-header.cx-navbar .cx-navbar-tool,
.main-header.cx-navbar button.cx-navbar-tool {
    color: var(--t-ink-2) !important;
    background: transparent;
}

.main-header.cx-navbar .cx-navbar-icon:hover,
.main-header.cx-navbar .cx-navbar-tool:hover,
.main-header.cx-navbar .cx-navbar-tool[aria-expanded="true"] {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
}

.main-header.cx-navbar .cx-navbar-group,
.main-header.cx-navbar .cx-navbar-user {
    background: var(--t-surface);
    border-color: var(--t-line-2);
}

.main-header.cx-navbar .cx-navbar-action {
    color: var(--t-on-accent) !important;
    background: var(--t-btn);
    border-color: var(--t-btn);
    font-weight: 500;
}

.main-header.cx-navbar .cx-navbar-action:hover {
    color: var(--t-on-accent) !important;
    background: var(--t-btn-hover);
    border-color: var(--t-btn-hover);
}

.main-header.cx-navbar .cx-user-name {
    font-weight: 600;
}

.main-header.cx-navbar .cx-user-role {
    font-size: 10.5px;
    letter-spacing: .04em;
}

.main-header.cx-navbar a.cx-user-logout:hover {
    color: #fff !important;
    background: var(--t-bad) !important;
}

/* The theme switch (header.html.twig): sun in dark, moon in light. */
.cx-theme-toggle .cx-theme-dark,
:root[data-theme="dark"] .cx-theme-toggle .cx-theme-light {
    display: none;
}

:root[data-theme="dark"] .cx-theme-toggle .cx-theme-dark {
    display: inline-block;
}

/* =============================================================== sidebar === */

.main-sidebar {
    background: var(--t-sidebar) !important;
    border-right: 1px solid var(--t-line) !important;
    box-shadow: none !important;
}

.main-sidebar .brand-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: var(--t-ink) !important;
    background: var(--t-sidebar) !important;
    border-bottom: 1px solid var(--t-line) !important;
}

.main-sidebar .brand-link .brand-image {
    float: none !important;
    max-height: 24px;
    border-radius: 4px;
}

.main-sidebar .brand-text {
    font-size: 14px;
    font-weight: 600 !important;
    color: var(--t-ink);
    letter-spacing: -.01em;
}

.main-sidebar .sidebar {
    padding: 8px 10px 24px;
}

/* Group captions (sidebar.html.twig emits `.nav-header.cx-nav-group`). */
.main-sidebar .nav-sidebar > .nav-header.cx-nav-group {
    padding: 16px 10px 6px !important;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-faint) !important;
    background: none !important;
}

.main-sidebar .nav-sidebar > .nav-header.cx-nav-group:first-child {
    padding-top: 6px !important;
}

.main-sidebar .nav-sidebar .nav-item {
    margin-bottom: 1px;
}

.main-sidebar .nav-sidebar .nav-link {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-ink-2) !important;
    background: transparent !important;
    border-radius: var(--t-radius-sm);
    box-shadow: none !important;
}

.main-sidebar .nav-sidebar .nav-link p {
    flex: 1 1 auto;
    margin: 0;
    color: inherit !important;
}

.main-sidebar .nav-sidebar .nav-link .right {
    top: auto !important;
    right: 10px;
    font-size: 11px;
    color: var(--t-faint);
}

.main-sidebar .nav-sidebar .nav-link:hover {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
}

.main-sidebar .nav-sidebar .nav-icon {
    width: 18px;
    margin-right: 10px !important;
    font-size: 13px;
    text-align: center;
    color: var(--t-muted);
    opacity: 1;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
    box-shadow: none !important;
    font-weight: 600;
}

.main-sidebar .nav-sidebar .nav-link.active .nav-icon {
    color: var(--t-accent);
}

.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
    color: var(--t-ink) !important;
}

.main-sidebar .nav-treeview {
    margin: 2px 0 4px 19px;
    padding-left: 8px;
    border-left: 1px solid var(--t-line);
}

.main-sidebar .nav-treeview .nav-link {
    padding: 5px 10px !important;
    font-size: 12.5px;
    font-weight: 400;
}

.main-sidebar .nav-treeview .nav-icon {
    display: none;
}

.main-sidebar .os-scrollbar-handle {
    background: var(--t-line-2) !important;
}

/* AdminLTE's layout widths follow the sidebar's. */
@media (min-width: 992px) {
    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .main-sidebar .brand-link {
        width: var(--t-sidebar-w) !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-footer,
    body:not(.sidebar-collapse) .main-header {
        margin-left: var(--t-sidebar-w) !important;
    }

    body.sidebar-collapse .main-sidebar:not(:hover) .nav-header.cx-nav-group {
        display: none;
    }
}

/* ================================================================ canvas === */

.content-wrapper > .content > .container-fluid {
    max-width: 1640px;
    padding: 20px 24px 32px !important;
}

.cx {
    color: var(--t-ink);
}

/* Page header. */
.cx-head {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: 0;
}

.cx-title,
.cx-head h1 {
    font-size: 20px;
    font-weight: 600 !important;
    line-height: 1.3;
    color: var(--t-ink);
}

.cx-sub,
.cx-head p {
    margin-top: 2px;
    font-size: 13px;
    color: var(--t-muted);
}

.cx-crumb,
.cx-crumb a {
    font-size: 12px;
    color: var(--t-muted);
}

.cx-crumb a:hover {
    color: var(--t-accent-ink);
}

/* ================================================================= cards === */

.cx-card,
.card,
.cx-stat,
.cx-block,
.info-box {
    color: var(--t-ink);
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow) !important;
}

.cx-card-head,
.card-header {
    padding: 12px 16px;
    color: var(--t-ink);
    background: var(--t-surface) !important;
    border-bottom: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) var(--t-radius) 0 0 !important;
}

.cx-card-title,
.card-title,
.cx-block-title {
    font-size: 14px;
    font-weight: 600 !important;
    color: var(--t-ink);
}

.cx-card-note,
.cx-hint {
    font-size: 12.5px;
    color: var(--t-muted);
}

.cx-card-body,
.card-body {
    color: var(--t-ink);
    background: transparent;
}

.card-footer {
    background: var(--t-subtle) !important;
    border-top: 1px solid var(--t-line) !important;
}

/* Figure tiles. */
.cx-stat {
    padding: 14px 16px;
}

.cx-stat dt,
.cx-stat .cx-stat-label {
    font-size: 11.5px;
    font-weight: 500 !important;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--t-muted);
}

.cx-stat dd {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    color: var(--t-ink);
    font-variant-numeric: tabular-nums;
}

.cx-stat-on dd { color: var(--t-ok); }
.cx-stat-off dd { color: var(--t-bad); }

/* Empty states. */
.cx-empty-state,
.cx-empty {
    color: var(--t-muted);
}

.cx-empty-state i,
.cx-empty i {
    color: var(--t-faint);
}

/* =============================================================== buttons === */

/* bootstrap4-toggle (the Activ/Inactiv switches) is built from `.btn`s that it
   positions absolutely; the geometry below must never reach them. */
.cx-btn,
.cxw-btn,
.btn:not(.toggle):not(.toggle-on):not(.toggle-off):not(.toggle-handle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500 !important;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    transition: background-color .12s, border-color .12s, color .12s;
}

.btn-sm:not(.toggle):not(.toggle-on):not(.toggle-off):not(.toggle-handle),
.cx-btn-sm {
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
}

.btn-lg:not(.toggle):not(.toggle-on):not(.toggle-off):not(.toggle-handle) {
    height: 38px;
}

/* Primary: the page's main action. */
.cx-btn,
.btn-primary,
.cx-btn-primary {
    color: var(--t-on-accent) !important;
    background: var(--t-btn) !important;
    border: 1px solid var(--t-btn) !important;
}

.cx-btn:hover,
.cx-btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus {
    color: var(--t-on-accent) !important;
    background: var(--t-btn-hover) !important;
    border-color: var(--t-btn-hover) !important;
}

/* Secondary: white with a hairline. */
.cx-btn.cx-btn-ghost,
.cx-btn-ghost,
.cxw-btn,
.btn-light,
.btn-secondary,
.btn-default,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark {
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
}

.cx-btn.cx-btn-ghost:hover,
.cx-btn-ghost:hover,
.cxw-btn:hover,
.btn-light:hover,
.btn-secondary:hover,
.btn-default:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-dark:hover {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
    border-color: var(--t-line-2) !important;
}

/* Danger. */
.cx-btn.cx-btn-danger,
.btn-outline-danger {
    color: var(--t-bad) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-bad-line) !important;
}

.cx-btn.cx-btn-danger:hover,
.cx-btn.cx-btn-danger:focus-visible,
.btn-outline-danger:hover,
.btn-danger {
    color: #fff !important;
    background: var(--t-bad) !important;
    border-color: var(--t-bad) !important;
}

.btn-success {
    color: #fff !important;
    background: #079455 !important;
    border: 1px solid #079455 !important;
}

.btn-warning {
    color: #1f1300 !important;
    background: #fdb022 !important;
    border: 1px solid #fdb022 !important;
}

.btn-info {
    color: #fff !important;
    background: var(--t-info) !important;
    border: 1px solid var(--t-info) !important;
}

.btn:focus-visible,
.cx-btn:focus-visible,
.cxw-btn:focus-visible {
    outline: none;
    box-shadow: var(--t-focus) !important;
}

.btn:disabled,
.cx-btn:disabled,
.btn.disabled {
    opacity: .5;
}

/* Icon-only buttons in grid rows. */
.btn.btn-xs,
.cxc-action,
.cx-row-actions .btn {
    height: 26px;
    min-width: 26px;
    padding: 0 8px;
    font-size: 12px;
}

/* ================================================================= forms === */

.form-control,
.form-select,
.custom-select,
input[type="text"].form-control,
textarea.form-control,
.input-group-text {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--t-ink) !important;
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
}

.form-control-sm,
.form-select-sm {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 12.5px;
}

.form-select,
select.form-control {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px 14px !important;
    appearance: none;
}

.input-group-text {
    color: var(--t-muted) !important;
    background: var(--t-subtle) !important;
}

.form-control::placeholder {
    color: var(--t-faint);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--t-faint) !important;
}

.form-control:focus,
.form-select:focus,
.cx .form-control:focus,
.cx .form-select:focus {
    border-color: var(--t-accent) !important;
    box-shadow: var(--t-focus) !important;
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--t-muted) !important;
    background-color: var(--t-sunken) !important;
}

label,
.form-label,
.col-form-label,
.cx-label,
.cx-filters-label {
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 500 !important;
    color: var(--t-ink-2);
}

.form-text,
.invalid-feedback {
    font-size: 12px;
}

.form-text {
    color: var(--t-muted);
}

.form-check-input {
    background-color: var(--t-surface);
    border-color: var(--t-line-2);
}

.form-check-input:checked {
    background-color: var(--t-accent);
    border-color: var(--t-accent);
}

.form-check-input:focus {
    box-shadow: var(--t-focus);
}

/* select2 (CDN) — the single and multiple selections, and its dropdown. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 34px !important;
    height: auto !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
    border-radius: var(--t-radius-sm) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 10px !important;
    line-height: 32px !important;
    font-size: 13px;
    color: var(--t-ink) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--t-faint) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--t-muted) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--t-accent) !important;
    box-shadow: var(--t-focus);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--t-ink-2) !important;
    background: var(--t-hover) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 4px !important;
}

.select2-dropdown {
    color: var(--t-ink);
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: var(--t-shadow-pop);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--t-ink);
    background: var(--t-surface);
    border: 1px solid var(--t-line-2) !important;
    border-radius: 4px;
}

.select2-container--default .select2-results__option {
    padding: 6px 10px;
    font-size: 13px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
}

/* bootstrap-datepicker. */
.datepicker.dropdown-menu,
.datepicker-dropdown {
    padding: 8px !important;
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-pop) !important;
}

.datepicker-dropdown::before,
.datepicker-dropdown::after {
    display: none !important;
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: 4px !important;
    color: var(--t-ink);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: var(--t-faint) !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
    background: var(--t-hover) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active {
    color: var(--t-on-accent) !important;
    background: var(--t-accent) !important;
    background-image: none !important;
    text-shadow: none !important;
}

.datepicker table tr td.today {
    background: var(--t-accent-soft) !important;
    background-image: none !important;
}

/* ================================================================ tables === */

.table,
.cx-table,
table.dataTable {
    --bs-table-bg: transparent;
    width: 100%;
    margin-bottom: 0;
    color: var(--t-ink) !important;
    border-color: var(--t-line) !important;
    border-collapse: collapse !important;
}

.table > :not(caption) > * > *,
.cx-table > :not(caption) > * > *,
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
    padding: 9px 12px !important;
    font-size: 13px;
    vertical-align: middle;
    color: inherit;
    background-color: transparent;
    border-bottom: 1px solid var(--t-line) !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

.table > thead > tr > th,
.cx-table > thead > tr > th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--t-muted) !important;
    background: var(--t-subtle) !important;
    border-bottom: 1px solid var(--t-line) !important;
}

.table > tbody > tr:last-child > *,
.cx-table > tbody > tr:last-child > *,
table.dataTable > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

.table > tbody > tr:hover > *,
.cx-table > tbody > tr:hover > *,
table.dataTable > tbody > tr:hover > td,
table.dataTable.hover > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover {
    background-color: var(--t-hover) !important;
}

/* DataTables' own stripes and sorting tints (CDN datatables.css). */
table.dataTable.stripe > tbody > tr.odd,
table.dataTable.display > tbody > tr.odd,
table.dataTable.display > tbody > tr.even,
table.dataTable tbody tr,
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_1 {
    background-color: transparent !important;
}

table.dataTable.no-footer {
    border-bottom: 0 !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
    cursor: pointer;
}

table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    margin-left: 6px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    color: var(--t-accent);
}

table.dataTable thead .sorting_asc::after { content: "\f062"; }
table.dataTable thead .sorting_desc::after { content: "\f063"; }

/* Tables inside a card run edge to edge. */
.cx-card > .cx-card-body > .table,
.cx-card > .cx-card-body > .dataTables_wrapper,
.cx-card > .cx-card-body > .table-responsive {
    margin: 0;
}

.table-responsive {
    border: 0;
}

/* The DataTables controls: length, search, info, pager. */
.dataTables_wrapper {
    color: var(--t-ink-2);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--t-muted);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400 !important;
    color: var(--t-muted);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 32px;
    min-height: 32px;
    margin: 0 !important;
    padding: 4px 10px;
    font-size: 13px;
    color: var(--t-ink) !important;
    background-color: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
    outline: 0;
}

.dataTables_wrapper .dataTables_length select {
    width: auto !important;
    padding-right: 26px;
}

.dataTables_wrapper .dataTables_filter input {
    width: 240px !important;
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='7' cy='7' r='4.5' fill='none' stroke='%239ca3af' stroke-width='1.6'/%3e%3cpath d='M10.5 10.5L14 14' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: 9px center !important;
    background-size: 14px !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--t-accent) !important;
    box-shadow: var(--t-focus) !important;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 12px !important;
    font-size: 12.5px;
    color: var(--t-muted) !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px !important;
}

.dataTables_processing {
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-pop) !important;
}

.dataTables_empty {
    padding: 32px 12px !important;
    color: var(--t-muted) !important;
    text-align: center;
}

/* =============================================================== badges === */

.badge {
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 500 !important;
    letter-spacing: 0;
    border-radius: 999px;
}

.badge.bg-success, .badge.badge-success { color: var(--t-ok) !important; background: var(--t-ok-soft) !important; box-shadow: inset 0 0 0 1px var(--t-ok-line); }
.badge.bg-danger, .badge.badge-danger { color: var(--t-bad) !important; background: var(--t-bad-soft) !important; box-shadow: inset 0 0 0 1px var(--t-bad-line); }
.badge.bg-warning, .badge.badge-warning { color: var(--t-warn) !important; background: var(--t-warn-soft) !important; box-shadow: inset 0 0 0 1px var(--t-warn-line); }
.badge.bg-info, .badge.bg-primary, .badge.badge-info, .badge.badge-primary { color: var(--t-accent-ink) !important; background: var(--t-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--t-accent-line); }
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark, .badge.badge-secondary { color: var(--t-ink-2) !important; background: var(--t-hover) !important; box-shadow: inset 0 0 0 1px var(--t-line); }

.cx-tag,
.cx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500 !important;
    color: var(--t-ink-2);
    background: var(--t-hover);
    border: 1px solid var(--t-line);
    border-radius: 999px;
}

.cx-tag-ok, .cx-tag-on, .cx-chip-on { color: var(--t-ok) !important; background: var(--t-ok-soft) !important; border-color: var(--t-ok-line) !important; }
.cx-tag-warn { color: var(--t-warn) !important; background: var(--t-warn-soft) !important; border-color: var(--t-warn-line) !important; }
.cx-tag-off, .cx-chip-off { color: var(--t-bad) !important; background: var(--t-bad-soft) !important; border-color: var(--t-bad-line) !important; }
.cx-tag-info { color: var(--t-accent-ink) !important; background: var(--t-accent-soft) !important; border-color: var(--t-accent-line) !important; }

.cx-tab-count {
    min-width: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--t-muted);
    background: var(--t-hover);
    border-radius: 999px;
}

/* ============================================ segmented filters, tabs ==== */

/* `.cx-seg` / `.cx-chip-filter` (Toți / Activi / Inactivi, platforms…). */
.cx-seg,
.cx-facets .btn-group {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--t-sunken);
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
}

.cx-seg > *,
.cx-seg a,
.cx-seg button,
.cx-seg label {
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 500 !important;
    color: var(--t-ink-2) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.cx-seg > *:hover,
.cx-seg a:hover,
.cx-seg button:hover {
    color: var(--t-ink) !important;
}

.cx-seg > .active,
.cx-seg > [aria-pressed="true"],
.cx-seg > [aria-current],
.cx-seg .active,
.cx-seg input:checked + label {
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--t-line) !important;
}

/* Horizontal tabs (Bootstrap .nav-tabs, .cx-tabs). */
.nav-tabs,
.cx-tabs {
    gap: 4px;
    border-bottom: 1px solid var(--t-line) !important;
}

.nav-tabs .nav-link,
.cx-tabs .nav-link {
    padding: 8px 12px;
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 500 !important;
    color: var(--t-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
}

.nav-tabs .nav-link:hover,
.cx-tabs .nav-link:hover {
    color: var(--t-ink) !important;
}

.nav-tabs .nav-link.active,
.cx-tabs .nav-link.active {
    color: var(--t-accent-ink) !important;
    border-bottom-color: var(--t-accent) !important;
}

/* ===================================================== record pages ====== */

/* The navy record bars (order, route, provider, user, company files) become a
   white header card. Same markup, same ids. */
.cxw-bar,
.cx-doc-head {
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow) !important;
}

.cxw-bar {
    padding: 12px 16px;
}

.cxw-bar-title,
.cx-doc-head h1,
.cx-doc-title h1 {
    font-size: 17px;
    font-weight: 600 !important;
    color: var(--t-ink) !important;
}

.cxw-bar span,
.cx-doc-head span {
    color: inherit;
}

.cxw-bar .cxw-route,
.cxw-bar .cxw-route i {
    color: var(--t-ink);
}

.cxw-bar .cxw-route i {
    color: var(--t-muted);
}

.cxw-bar .cxw-btn,
.cx-doc-head .cx-btn-ghost {
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
}

.cxw-bar .cxw-btn:hover,
.cxw-bar .cxw-btn:focus-visible,
.cx-doc-head .cx-btn-ghost:hover {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
    border-color: var(--t-line-2) !important;
}

.cxw-bar :focus-visible {
    outline: none;
    box-shadow: var(--t-focus);
}

.cxw-bar .cx-tag,
.cxw-bar .cx-status {
    color: var(--t-ink-2);
    background: var(--t-hover);
    border-color: var(--t-line);
}

.cxw-bar .cx-tag-ok { color: var(--t-ok) !important; background: var(--t-ok-soft) !important; border-color: var(--t-ok-line) !important; }
.cxw-bar .cx-tag-warn { color: var(--t-warn) !important; background: var(--t-warn-soft) !important; border-color: var(--t-warn-line) !important; }

.cxw-bar .cx-status::before {
    box-shadow: none;
}

.cxw-bar .cxw-amount {
    border-left: 1px solid var(--t-line);
    border-right: 1px solid var(--t-line);
}

.cxw-bar .cxw-amount span,
.cxw-bar .cxw-amount small,
.cxw-bar .cxw-field label {
    font-size: 11.5px;
    font-weight: 500 !important;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--t-muted) !important;
}

.cxw-bar .cxw-amount strong {
    font-size: 15px;
    font-weight: 600 !important;
    color: var(--t-ink) !important;
    font-variant-numeric: tabular-nums;
}

.cxw-bar .select2-container .select2-selection--single {
    border-color: var(--t-line-2) !important;
}

/* The old gradient profile banner (.cx-profile) — flat card. */
.cx-profile {
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow) !important;
}

.cx-profile h1,
.cx-profile .cx-identity h1 {
    color: var(--t-ink) !important;
    font-size: 18px;
}

.cx-profile .cx-avatar,
.cx-avatar {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 600;
}

.cx-profile .cx-chip {
    color: var(--t-ink-2) !important;
    background: var(--t-hover) !important;
    border-color: var(--t-line) !important;
}

.cx-profile .cx-chip-on { color: var(--t-ok) !important; background: var(--t-ok-soft) !important; border-color: var(--t-ok-line) !important; }
.cx-profile .cx-chip-off { color: var(--t-bad) !important; background: var(--t-bad-soft) !important; border-color: var(--t-bad-line) !important; }

.cx-doc-head .cx-fact,
.cx-doc-head .cx-facts,
.cx-doc-head .cx-meta,
.cx-doc-head .cx-meta span {
    color: var(--t-muted) !important;
}

.cx-doc-head strong {
    color: var(--t-ink) !important;
}

/* The vertical rail (cx_record.css): a quiet list, accent on the active item. */
.cxr-nav {
    padding: 6px !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow) !important;
}

.cxr-nav .cxr-cap,
.cxw-railnav .cxr-cap,
.cxw-railnav p {
    margin: 10px 8px 4px !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
    color: var(--t-faint) !important;
    background: none !important;
    border: 0 !important;
}

.cxr-nav .cxr-cap:first-child,
.cxw-railnav .cxr-cap:first-child {
    margin-top: 4px !important;
}

.cxr-nav .nav-link,
.cxw-railnav a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--t-ink-2) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--t-radius-sm) !important;
    box-shadow: none !important;
}

.cxr-nav .nav-link i,
.cxw-railnav a i {
    width: 16px;
    text-align: center;
    color: var(--t-muted) !important;
}

.cxr-nav .nav-link:hover,
.cxw-railnav a:hover {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
}

.cxr-nav .nav-link.active,
.cxw-railnav a.active,
.cxw-railnav a[aria-current] {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
    font-weight: 600 !important;
}

.cxr-nav .nav-link.active i,
.cxw-railnav a.active i,
.cxw-railnav a[aria-current] i {
    color: var(--t-accent) !important;
}

.cxr-nav .nav-link .cx-tab-count {
    margin-left: auto;
}

/* Key/value lists on record panes. */
.cx-dl dt,
.cx-kv dt,
.cx-kv .cx-label {
    font-size: 12px;
    font-weight: 500 !important;
    color: var(--t-muted);
}

.cx-dl dd,
.cx-kv dd {
    color: var(--t-ink);
}

/* ================================================================ modals === */

.modal-backdrop.show {
    opacity: 1 !important;
    background: var(--t-backdrop) !important;
}

.modal-content {
    color: var(--t-ink);
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--t-shadow-pop) !important;
}

.modal-header,
.modal-header.modal-general-header {
    padding: 16px 20px !important;
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    border-bottom: 1px solid var(--t-line) !important;
}

.modal-header .modal-title,
.modal-general-header .modal-title,
.modal-header h4,
.modal-header h5 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--t-ink) !important;
}

.modal-body {
    padding: 20px !important;
    color: var(--t-ink);
}

.modal-footer,
.modal-footer.modal-general-footer {
    padding: 12px 20px !important;
    background: var(--t-subtle) !important;
    border-top: 1px solid var(--t-line) !important;
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) !important;
    opacity: .7;
}

/* jquery-confirm (CDN). */
.jconfirm .jconfirm-bg {
    background-color: var(--t-backdrop) !important;
    opacity: 1 !important;
}

.jconfirm .jconfirm-box {
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-top: 1px solid var(--t-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--t-shadow-pop) !important;
}

.jconfirm .jconfirm-box .jconfirm-title-c,
.jconfirm .jconfirm-box .jconfirm-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--t-ink) !important;
}

.jconfirm .jconfirm-box .jconfirm-content {
    color: var(--t-ink-2) !important;
}

.jconfirm .jconfirm-box .jconfirm-buttons button {
    height: 32px;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    border-radius: var(--t-radius-sm) !important;
}

/* Dropdown menus. */
.dropdown-menu {
    padding: 4px !important;
    color: var(--t-ink);
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-pop) !important;
}

.dropdown-item {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--t-ink-2) !important;
    border-radius: 4px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
}

.dropdown-divider {
    border-color: var(--t-line) !important;
}

.cx-menu-title {
    color: var(--t-faint) !important;
}

/* ======================================================== notices etc. === */

.alert {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: var(--t-radius-sm);
}

.alert-success { color: var(--t-ok) !important; background: var(--t-ok-soft) !important; border: 1px solid var(--t-ok-line) !important; }
.alert-danger { color: var(--t-bad) !important; background: var(--t-bad-soft) !important; border: 1px solid var(--t-bad-line) !important; }
.alert-warning { color: var(--t-warn) !important; background: var(--t-warn-soft) !important; border: 1px solid var(--t-warn-line) !important; }
.alert-info, .alert-primary { color: var(--t-accent-ink) !important; background: var(--t-accent-soft) !important; border: 1px solid var(--t-accent-line) !important; }

.cx-flash {
    border-radius: var(--t-radius-sm);
}

.cx-flash-success { color: var(--t-ok) !important; background: var(--t-ok-soft) !important; border-color: var(--t-ok-line) !important; }
.cx-flash-error { color: var(--t-bad) !important; background: var(--t-bad-soft) !important; border-color: var(--t-bad-line) !important; }
.cx-flash-info { color: var(--t-accent-ink) !important; background: var(--t-accent-soft) !important; border-color: var(--t-accent-line) !important; }

/* Lobibox toasts (CDN). */
.lobibox-notify {
    border-radius: var(--t-radius) !important;
    box-shadow: var(--t-shadow-pop) !important;
    font-family: var(--t-font) !important;
}

.progress {
    height: 6px;
    background: var(--t-sunken);
    border-radius: 999px;
}

.progress-bar {
    background-color: var(--t-accent);
}

/* ================================================================ footer === */

.main-footer {
    padding: 8px 24px !important;
    font-size: 12px;
    color: var(--t-faint) !important;
    background: var(--t-canvas) !important;
    border-top: 1px solid var(--t-line) !important;
}

.main-footer strong,
.main-footer a {
    font-weight: 500 !important;
    color: var(--t-muted) !important;
}

/* =============================================================== preloader */

.preloader {
    background: var(--t-canvas) !important;
}

/* ================================================ dark: hard-coded light === */
/* Surfaces that page CSS paints with a literal white or near-white. Only in
   dark: in light they already look right. */

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .accordion-button,
:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .toast {
    color: var(--t-ink) !important;
    background-color: var(--t-surface) !important;
    border-color: var(--t-line) !important;
}

:root[data-theme="dark"] .table-light > * > * {
    color: var(--t-muted) !important;
    background: var(--t-subtle) !important;
}

:root[data-theme="dark"] .accordion-button:not(.collapsed) {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
}

:root[data-theme="dark"] img.flag,
:root[data-theme="dark"] .cx-chip img {
    filter: none;
}

:root[data-theme="dark"] #list_all_booking tbody .booking_ref_number {
    background-color: rgba(251, 191, 36, .07);
}

:root[data-theme="dark"] #list_all_booking tbody .booking_price {
    background-color: rgba(74, 222, 128, .06);
}

/* ====================================================== component fixes == */

/* Every table cell's hairline follows the theme (page CSS set literal ones). */
table td,
table th {
    border-color: var(--t-line) !important;
}

.datepicker table td,
.datepicker table th {
    border: 0 !important;
}

/* Brand: the CDN logo is drawn for a dark ground, so it sits on one. */
.main-sidebar .brand-link .brand-image {
    padding: 3px 6px;
    background: #111827;
    border-radius: 5px;
    max-height: 26px;
}

/* Grid cells (_grid_cells.html.twig). */
.cxc-pill-on { color: var(--t-ok) !important; background: var(--t-ok-soft) !important; }
.cxc-pill-off { color: var(--t-bad) !important; background: var(--t-bad-soft) !important; }
.cxc-money-strong { color: var(--t-ok) !important; }
.cxc-empty, .cxc-route-arrow { color: var(--t-faint) !important; }

:root[data-theme="dark"] .cxc-badge,
:root[data-theme="dark"] [class*="cxc-tag"] {
    background: color-mix(in srgb, var(--cxc-badge) 18%, var(--t-surface)) !important;
    border-color: color-mix(in srgb, var(--cxc-badge) 35%, var(--t-surface)) !important;
}

.cx-table tr:hover .cxc-act {
    background: var(--t-surface) !important;
    border-color: var(--t-line-2) !important;
}

/* The plain search form (.cx-search). */
.cx-search input {
    height: 34px;
    font-size: 13px;
    color: var(--t-ink);
    background: var(--t-surface);
    border: 1px solid var(--t-line-2);
    border-radius: var(--t-radius-sm);
}

.cx-search input:focus {
    border-color: var(--t-accent);
    box-shadow: var(--t-focus);
}

.cx-search input::placeholder {
    color: var(--t-faint);
}

/* Scoped token families: re-pointed on their own scope, where they are
   defined (a definition on the element beats the one on :root). The banner
   previews keep the APP's navy and amber on purpose — they show the phone. */
.ab {
    --ab-line: var(--t-line);
    --ab-soft: var(--t-subtle);
    --ab-muted: var(--t-muted);
}

:root[data-theme="dark"] .ab .ab-name,
:root[data-theme="dark"] .ab #ab_interval_out,
:root[data-theme="dark"] .ab b {
    color: var(--t-accent-ink);
}

.px {
    --px-ok: var(--t-ok);
    --px-ok-bg: var(--t-ok-soft);
    --px-warn: var(--t-warn);
    --px-warn-bg: var(--t-warn-soft);
    --px-bad: var(--t-bad);
    --px-bad-bg: var(--t-bad-soft);
    --px-info: var(--t-info);
    --px-info-bg: var(--t-info-soft);
}

/* waitMe (CDN) loading overlay. */
:root[data-theme="dark"] .waitMe {
    background: rgba(14, 17, 22, .7) !important;
}

:root[data-theme="dark"] .waitMe_text {
    color: var(--t-ink) !important;
}

/* /app-banner: the ADMIN parts use the theme accent (both themes); the phone
   and mini previews (.ab-mini*, .ab-slide*, .ab-phone*, .ab-cta, .ab-badge)
   keep the app's own navy and amber. */
.ab .ab-stat b,
.ab .ab-empty strong,
.ab .ab-name,
.ab .ab-perf b,
.ab .ab-range output,
.ab .ab-pos {
    color: var(--t-accent-ink) !important;
}

.ab .ab-stat {
    background: var(--t-surface);
    border-color: var(--t-line);
}

.ab .ab-stat-live {
    background: var(--t-accent-soft) !important;
    border-color: var(--t-accent-line) !important;
}

.ab .ab-stat-live,
.ab .ab-stat-live * {
    color: var(--t-accent-ink) !important;
}

.ab .ab-pos {
    background: var(--t-hover) !important;
}

.ab .ab-item-live .ab-pos,
.ab .ab-step-nr {
    color: #fff !important;
    background: var(--t-btn) !important;
}

.ab .ab-item {
    background: var(--t-surface);
    border-color: var(--t-line);
}

.ab .ab-item.ab-over {
    border-color: var(--t-accent) !important;
    box-shadow: var(--t-focus) !important;
}

.ab .ab-icon {
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border-color: var(--t-line-2) !important;
}

.ab .ab-icon:hover:not([disabled]) {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
}

.ab .ab-langtab {
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border-color: var(--t-line-2) !important;
}

.ab .ab-langtab.active {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
    border-color: var(--t-accent-line) !important;
}

.ab .ab-check input,
.ab .ab-range input {
    accent-color: var(--t-accent);
}

/* Segmented controls that mark the active segment with `.is-active`
   (cx_filter_bar.css: customers, orders, declarations). */
.cx-seg .is-active,
.cx-seg button.is-active {
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--t-line) !important;
}

.cx-fbar .cx-seg button.is-active .cx-tab-count,
.cx-seg .is-active .cx-tab-count {
    color: var(--t-accent-ink) !important;
    background: var(--t-accent-soft) !important;
}

/* The filter bar's panel and fields (cx_filter_bar.css). */
.cx-fbar {
    background: var(--t-surface) !important;
    border-color: var(--t-line) !important;
}

/* Modals with their own button rules (.cxm, the "Client nou" dialog): the
   secondary button stays secondary — the generated map gives `.cxm .cx-btn` the
   accent fill in both themes, which made "Renunta" blue on blue. */
.cxm .cx-btn.cx-btn-ghost,
.modal .cx-btn.cx-btn-ghost {
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
}

.cxm .cx-btn.cx-btn-ghost:hover,
.modal .cx-btn.cx-btn-ghost:hover {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
}

.modal .modal-header .modal-title,
.modal-content .modal-header h5,
.modal-content .modal-header h4 {
    color: var(--t-ink) !important;
}

.cxm-label {
    font-size: 12.5px;
    font-weight: 500 !important;
    color: var(--t-ink-2) !important;
}

/* Phones: the search form wraps, and a wide table scrolls inside its card
   instead of pushing the page sideways. */
@media (max-width: 767.98px) {
    .content-wrapper > .content > .container-fluid {
        padding: 16px 12px 24px !important;
    }

    .cx-search {
        flex-wrap: wrap;
        width: 100%;
    }

    .cx-search input {
        flex: 1 1 100%;
        width: 100% !important;
    }

    .cx-card-body:has(> table),
    .cx-card:has(> table) {
        overflow-x: auto;
    }
}

/* ======================================================================
 * POLISH LAYER (v2, 2026-11-04 — "mult mai enterprise, mai smecher")
 * Glass top bar, command palette, a raised active item in the sidebar,
 * buttons with relief, softer cards, status dots, and
 * a short entrance. Later in the file on purpose: it refines what is above.
 * ====================================================================== */

/* ------------------------------------------------------------ top bar */

.main-header.navbar.cx-navbar {
    background: color-mix(in srgb, var(--t-surface) 78%, transparent) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
}

/* The search trigger of the command palette. */
.cx-cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 300px;
    height: 32px;
    margin-left: 8px;
    padding: 0 6px 0 10px;
    font-size: 13px;
    color: var(--t-faint);
    text-align: left;
    background: var(--t-subtle);
    border: 1px solid var(--t-line);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.cx-cmdk-trigger:hover {
    color: var(--t-muted);
    background: var(--t-surface);
    border-color: var(--t-line-2);
}

.cx-cmdk-trigger:focus-visible {
    outline: none;
    border-color: var(--t-accent);
    box-shadow: var(--t-focus);
}

.cx-cmdk-trigger .cx-cmdk-label {
    flex: 1 1 auto;
}

.cx-cmdk-kbd {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    font-family: var(--t-font) !important;
    font-size: 11px;
    font-weight: 500;
    color: var(--t-muted);
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: none;
}

/* ------------------------------------------------------ command palette */

.cx-cmdk {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: var(--t-backdrop);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: cx-fade .12s ease-out;
}

.cx-cmdk[hidden] {
    display: none;
}

.cx-cmdk-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 70vh;
    overflow: hidden;
    color: var(--t-ink);
    background: var(--t-surface);
    border: 1px solid var(--t-line);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .28), 0 0 0 1px rgba(16, 24, 40, .04);
    animation: cx-pop .16s cubic-bezier(.2, .9, .3, 1.2);
}

.cx-cmdk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--t-line);
}

.cx-cmdk-head > i {
    color: var(--t-faint);
}

.cx-cmdk-input {
    flex: 1 1 auto;
    height: 52px;
    padding: 0;
    font-size: 15px;
    color: var(--t-ink);
    background: transparent;
    border: 0;
    outline: none;
}

.cx-cmdk-input::placeholder {
    color: var(--t-faint);
}

.cx-cmdk-list {
    flex: 1 1 auto;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
}

.cx-cmdk-section {
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-faint);
}

.cx-cmdk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.cx-cmdk-item[aria-selected="true"] {
    background: var(--t-accent-soft);
}

.cx-cmdk-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: 12px;
    color: var(--t-muted);
    background: var(--t-subtle);
    border: 1px solid var(--t-line);
    border-radius: 7px;
}

.cx-cmdk-item[aria-selected="true"] .cx-cmdk-icon {
    color: var(--t-accent);
    background: var(--t-surface);
    border-color: var(--t-accent-line);
}

.cx-cmdk-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.cx-cmdk-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--t-ink);
}

.cx-cmdk-ctx {
    font-size: 12px;
    color: var(--t-muted);
}

.cx-cmdk-go {
    font-size: 12px;
    color: var(--t-faint);
    opacity: 0;
}

.cx-cmdk-item[aria-selected="true"] .cx-cmdk-go {
    opacity: 1;
    color: var(--t-accent-ink);
}

.cx-cmdk-empty {
    padding: 32px 12px;
    text-align: center;
    color: var(--t-muted);
}

.cx-cmdk-foot {
    display: flex;
    gap: 16px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--t-muted);
    background: var(--t-subtle);
    border-top: 1px solid var(--t-line);
}

.cx-cmdk-foot .cx-cmdk-kbd {
    margin-right: 2px;
}

html.cx-cmdk-open,
html.cx-cmdk-open body {
    overflow: hidden;
}

@keyframes cx-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cx-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- sidebar */

/* Exactly the top bar's height, so the brand's hairline continues the bar's
   (AdminLTE starts the menu list at that height too). It was 56px against a
   48px bar: the two bottom lines did not meet and the brand covered the top
   of the menu. */
.main-sidebar .brand-link {
    height: var(--sh-bar-h) !important;
    padding: 0 14px !important;
    box-sizing: border-box;
}

.main-sidebar .brand-link .brand-image {
    max-height: 26px;
    padding: 4px 6px;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}

.main-sidebar .brand-text {
    display: inline-flex !important;
    flex-direction: column;
    line-height: 1.1;
    font-size: 14.5px;
    font-weight: 600 !important;
}

.main-sidebar .cx-brand-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--t-faint);
}

.main-sidebar .nav-sidebar .nav-link {
    position: relative;
    padding: 7px 10px !important;
    border-radius: 8px;
    transition: background-color .12s, color .12s;
}

/* The current page is a raised card, with the accent on its edge. */
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active {
    color: var(--t-ink) !important;
    background: var(--t-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px var(--t-line) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active::before,
.main-sidebar .nav-sidebar .nav-treeview .nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    background: var(--t-accent);
    border-radius: 0 3px 3px 0;
}

:root[data-theme="dark"] .main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
:root[data-theme="dark"] .main-sidebar .nav-sidebar .nav-treeview .nav-link.active {
    background: var(--t-hover) !important;
    box-shadow: 0 0 0 1px var(--t-line-2) !important;
}

.main-sidebar .nav-sidebar .nav-link.active .nav-icon {
    color: var(--t-accent) !important;
}

/* An open module (Feribot) reads as the parent of the active child. */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link.active {
    background: transparent !important;
    box-shadow: none !important;
}

.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link.active::before {
    display: none;
}

.main-sidebar .nav-treeview .nav-link.active::before {
    left: -9px;
}

/* ------------------------------------------------------------- buttons */

.cx-btn,
.btn-primary,
.cx-btn-primary,
.main-header.cx-navbar .cx-navbar-action {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.cx-btn:active,
.btn-primary:active {
    transform: translateY(.5px);
}

.cx-btn.cx-btn-ghost,
.cx-btn-ghost,
.cxw-btn,
.btn-light,
.btn-secondary,
.btn-default,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark,
.cx-btn.cx-btn-danger {
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}

:root[data-theme="dark"] .cx-btn.cx-btn-ghost,
:root[data-theme="dark"] .cx-btn-ghost,
:root[data-theme="dark"] .cxw-btn,
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-secondary {
    box-shadow: none !important;
}

.cx-btn:focus-visible,
.btn:focus-visible,
.cxw-btn:focus-visible {
    box-shadow: var(--t-focus) !important;
}

/* --------------------------------------------------------- page header */

.cx-title,
.cx-head h1 {
    font-size: 22px;
    font-weight: 600 !important;
    letter-spacing: -.022em;
}

.cx-sub,
.cx-head p {
    font-size: 13.5px;
}

/* --------------------------------------------------------------- cards */

.cx-card,
.card,
.cx-block,
.cxr-nav,
.cxw-bar,
.cx-doc-head,
.cx-profile {
    border-radius: 12px !important;
}

.cx-card-head,
.card-header {
    padding: 14px 18px;
    border-radius: 12px 12px 0 0 !important;
}

.cx-card-body,
.card-body {
    padding: 18px;
}

/* Figure tiles: a quiet gradient, the figure large, a status dot. */
.cx-stat {
    position: relative;
    padding: 16px 18px;
    border-radius: 12px !important;
    background: linear-gradient(180deg, var(--t-surface) 0%, var(--t-subtle) 100%) !important;
    transition: border-color .15s, box-shadow .15s;
}

.cx-stat:hover {
    border-color: var(--t-line-2) !important;
}

.cx-stat dt,
.cx-stat .cx-stat-label {
    font-size: 12px;
    color: var(--t-muted);
}

.cx-stat dd {
    margin-top: 6px;
    font-size: 26px;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.cx-stat-on::after,
.cx-stat-off::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cx-stat-on::after {
    background: var(--t-ok);
    box-shadow: 0 0 0 4px var(--t-ok-soft);
}

.cx-stat-off::after {
    background: var(--t-bad);
    box-shadow: 0 0 0 4px var(--t-bad-soft);
}

/* -------------------------------------------------------- status dots */

.badge.bg-success::before,
.badge.bg-danger::before,
.badge.bg-warning::before,
.cx-tag-ok::before,
.cx-tag-on::before,
.cx-tag-off::before,
.cx-tag-warn::before,
.cxc-pill-on::before,
.cxc-pill-off::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    vertical-align: 1px;
    background: currentColor;
    border-radius: 50%;
}

/* Elements that already draw their own dot or icon keep it alone. */
.cx-tag-ok:has(> i)::before,
.cx-tag-off:has(> i)::before,
.cx-tag-warn:has(> i)::before,
.cxc-pill-on:has(> i)::before,
.cxc-pill-off:has(> i)::before {
    display: none;
}

/* -------------------------------------------------------------- tables */

/* No sticky table heads: several pages wrap their tables in overflow
   containers, which re-anchor `position: sticky` and drew the head over the
   first rows (order file, declarations). */

.table > tbody > tr,
.cx-table > tbody > tr,
table.dataTable > tbody > tr {
    transition: background-color .1s;
}

.table td a:not(.btn):not(.cx-btn),
.cx-table td a:not(.btn):not(.cx-btn),
table.dataTable td a:not(.btn):not(.cx-btn) {
    font-weight: 500;
    text-decoration: none;
}

/* ---------------------------------------------------------------- tabs */

.nav-tabs,
.cx-tabs {
    gap: 2px;
}

.nav-tabs .nav-link.active,
.cx-tabs .nav-link.active {
    color: var(--t-ink) !important;
}

/* --------------------------------------------------------------- forms */

.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    transition: border-color .12s, box-shadow .12s;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--t-sunken) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: var(--t-focus) !important;
}

/* --------------------------------------------------------------- motion */

/* NO entrance animation on the page container. An animation on transform /
   opacity with fill-mode `both` keeps the container a stacking context, and
   every modal rendered INSIDE the page (most of them: user, company,
   documents, prices…) then sat under Bootstrap's backdrop, which is appended
   to <body> — the click landed on the backdrop. Live from ~17:10 to the fix,
   2026-11-04. Do not animate an ancestor of .modal. */

@keyframes cx-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cx-cmdk,
    .cx-cmdk-panel {
        animation: none;
    }
}

/* -------------------------------------------------------------- scrollbars */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--t-line-2) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--t-line-2);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------- login */

/* The brand panel is the one place with a strong ground, the same deep
   indigo in both themes (its gradient used to end on --cx-rail-deep, which is
   now the white sidebar). Text on it is always light. */
.cx .auth-brand {
    color: #fff !important;
    background:
        radial-gradient(900px 520px at 12% -5%, rgba(129, 140, 248, .55), transparent 62%),
        radial-gradient(700px 420px at 100% 100%, rgba(56, 189, 248, .18), transparent 60%),
        linear-gradient(160deg, #312e81 0%, #1e1b4b 52%, #0b0d17 100%) !important;
}

.cx .auth-brand h1,
.cx .auth-brand-copy h1,
.cx .auth-brand-name {
    color: #fff !important;
}

.cx .auth-brand-copy h1 {
    font-weight: 600 !important;
    letter-spacing: -.03em;
}

.cx .auth-brand p,
.cx .auth-brand li,
.cx .auth-brand-tagline,
.cx .auth-brand-foot,
.cx .auth-brand-foot span {
    color: rgba(224, 231, 255, .78) !important;
}

.cx .auth-brand li i,
.cx .auth-brand li::before {
    color: #a5b4fc !important;
}

.auth-logo {
    max-height: 34px;
    padding: 5px 8px;
    background: #111827;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
}

.auth-card {
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04) !important;
}

:root[data-theme="dark"] .auth-card {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important;
}

.auth-card .form-control {
    min-height: 40px;
}

.auth-card .cx-btn,
.auth-card button[type="submit"] {
    height: 40px;
    width: 100%;
}

/* ======================================================================
 * PAGE HEADER BAND (2026-11-04) — cx_pagehead.js marks the header that opens
 * the page `.cx-lead`. It becomes a full-width white band under the top bar:
 * eyebrow, an icon tile, the title, the subtitle, and the actions on the
 * right. The band sticks under the top bar and turns compact on scroll; see below.
 * both edges without widening the page (no horizontal scroll).
 * ====================================================================== */

/* Sticky band (2026-11-04). The full-width ground is a ::before that reaches
   past both edges; `.content-wrapper { overflow-x: clip }` stops it widening
   the page, and unlike `overflow: hidden` it does NOT create a scroll
   container, so `position: sticky` still works. (The first version used a
   spread box-shadow + clip-path; clip-path would also cut off anything that
   opens below the band.) */
.content-wrapper {
    overflow-x: clip;
}

:root {
    /* Where every other sticky block parks: under the top bar AND the compact
       band. `--cx-lead-h` is set by cx_pagehead.js (0 when there is no band). */
    --cx-sticky-top: calc(var(--sh-bar-h) + var(--cx-lead-h, 0px) + 16px);
    --cxr-rail-top: var(--cx-sticky-top);
}

.content-wrapper .cx-lead {
    position: relative;
    z-index: 1020;
    isolation: isolate;
    margin: -20px 0 22px !important;
    padding: 22px 0 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.content-wrapper .cx-lead::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-line);
    pointer-events: none;
    transition: box-shadow .2s ease;
}

/* The indigo glow, inside the content column. */
.content-wrapper .cx-lead::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: radial-gradient(300px 120px at 72% 0%, var(--t-accent-soft), transparent 100%);
    pointer-events: none;
}

:root[data-theme="dark"] .content-wrapper .cx-lead::after {
    background: radial-gradient(300px 120px at 72% 0%, rgba(129, 140, 248, .10), transparent 100%);
}

@media (min-width: 992px) {
    .content-wrapper .cx-lead {
        position: sticky;
        top: var(--sh-bar-h);
    }
}

/* Compact, once the page scrolls (cx_pagehead.js adds .is-stuck). */
.content-wrapper .cx-lead.is-stuck {
    padding: 10px 0 !important;
}

.content-wrapper .cx-lead.is-stuck::before {
    background: color-mix(in srgb, var(--t-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 6px 16px -10px rgba(16, 24, 40, .25);
}

:root[data-theme="dark"] .content-wrapper .cx-lead.is-stuck::before {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7);
}

.cx-lead.is-stuck::after,
.cx-lead.is-stuck .cx-sub,
.cx-lead.is-stuck .cx-eyebrow,
.cx-lead.is-stuck .cxw-facts,
.cx-lead.is-stuck .cxw-sub,
.cx-lead.is-stuck .cx-doc-facts,
.cx-lead.is-stuck .cx-facts {
    display: none !important;
}

.cx-lead.is-stuck .cx-title,
.cx-lead.is-stuck h1,
.cx-lead.is-stuck .cxw-title,
.cx-lead.is-stuck .cxw-bar-title {
    font-size: 17px !important;
}

.cx-lead.is-stuck .cx-head-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 9px;
}

.cx-lead.is-stuck .cxw-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

.cx-lead.is-stuck .cxw-route i {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
}

/* Every other sticky block parks under the band. */
.cxr {
    --cxr-rail-top: var(--cx-sticky-top) !important;
}

@media (min-width: 992px) {
    .cx-sticky,
    .px-reach,
    .pxa-rail,
    .ab-edit-side,
    .cxr-pane .cx-split .cx-aside,
    .cx-split .cx-aside {
        top: var(--cx-sticky-top) !important;
    }
}

/* The in-page crumbs are superseded by the band's eyebrow. */
.cx-has-lead .cx-crumb,
.cx-has-lead .cxw-crumb {
    display: none !important;
}

/* ---------------------------------------------------- list page header */

.cx-head.cx-lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}

.cx-head-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cx-head-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    font-size: 18px;
    color: var(--t-accent);
    background: linear-gradient(180deg, var(--t-surface), var(--t-accent-soft));
    border: 1px solid var(--t-accent-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), inset 0 1px 0 rgba(255, 255, 255, .6);
}

:root[data-theme="dark"] .cx-head-icon {
    background: var(--t-accent-soft);
    box-shadow: none;
}

.cx-eyebrow {
    margin: 0 0 2px !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-accent-ink);
}

.cx-lead .cx-title,
.cx-lead h1 {
    margin: 0;
    font-size: 24px !important;
    font-weight: 650 !important;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: var(--t-ink) !important;
}

.cx-lead .cx-sub {
    max-width: 82ch;
    margin: 4px 0 0 !important;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--t-muted);
}

/* Actions sit on the title's line, aligned to the right. */
.cx-head.cx-lead > :not(.cx-head-main):last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cx-head.cx-lead .cx-btn {
    height: 34px;
    padding: 0 14px;
}

/* -------------------------------------------------- record page header */

.cxw-bar.cx-lead:not(.is-stuck),
.cx-doc-head.cx-lead:not(.is-stuck),
.cxw-head.cx-lead:not(.is-stuck),
.cxw-panel.cx-lead:not(.is-stuck) {
    padding: 18px 0 !important;
}

.cxw-bar.cx-lead .cxw-bar-title,
.cx-doc-head.cx-lead h1,
.cx-lead .cxw-title {
    font-size: 21px !important;
    font-weight: 650 !important;
    letter-spacing: -.02em;
}

.cxw-bar.cx-lead .cxw-route i {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    font-size: 14px;
    color: var(--t-accent) !important;
    background: var(--t-accent-soft);
    border: 1px solid var(--t-accent-line);
    border-radius: 9px;
}

.cx-lead .cxw-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    color: var(--t-accent-ink) !important;
    background: linear-gradient(180deg, var(--t-surface), var(--t-accent-soft)) !important;
    border: 1px solid var(--t-accent-line) !important;
    border-radius: 14px !important;
}

/* The "Inapoi" button on a band: quiet, square-ish. */
.cx-lead .cxw-btn,
.cx-lead #general_btn_back_page {
    height: 32px;
}

@media (max-width: 767.98px) {
    .content-wrapper .cx-lead:not(.is-stuck) {
        margin-top: -16px !important;
        padding: 16px 0 !important;
    }

    .cx-head-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .cx-lead .cx-title,
    .cx-lead h1 {
        font-size: 20px !important;
    }
}

/* The customer file's panel only holds its header; as a band, the header
   inside loses its own padding and card look. */
.cxw-panel.cx-lead > .cxw-head {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

/* ======================================================================
 * APP HEADER (2026-11-04) — menu toggle and breadcrumb trail on the left;
 * search, the primary action, the tools and the user on the right.
 * The CDN's `.navbar-my-blue a { color:#fff !important }` is (0,1,1), so the
 * link rules here go through `.main-header.cx-navbar` with !important.
 * ====================================================================== */

.main-header.navbar.cx-navbar {
    gap: 10px;
    padding: 0 14px 0 10px !important;
}

.main-header.cx-navbar .cx-nav-toggle {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    color: var(--t-muted) !important;
    border-radius: 8px;
}

.main-header.cx-navbar .cx-nav-toggle:hover {
    color: var(--t-ink) !important;
    background: var(--t-hover);
}

/* ------------------------------------------------------- breadcrumb trail */

.main-header.cx-navbar .cx-trail {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 4px;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--t-line);
}

.main-header.cx-navbar .cx-trail ol {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1;
}

.main-header.cx-navbar .cx-trail li {
    display: flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    color: var(--t-muted);
}

.main-header.cx-navbar .cx-trail li + li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0 8px 0 4px;
    border-top: 1.5px solid var(--t-faint);
    border-right: 1.5px solid var(--t-faint);
    transform: rotate(45deg);
    opacity: .9;
}

.main-header.cx-navbar .cx-trail a,
.main-header.cx-navbar .cx-trail .cx-trail-here {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border-radius: 7px;
}

.main-header.cx-navbar .cx-trail a {
    font-weight: 500;
    color: var(--t-muted) !important;
    text-decoration: none;
    transition: background-color .12s, color .12s;
}

.main-header.cx-navbar .cx-trail a:hover,
.main-header.cx-navbar .cx-trail a:focus-visible {
    color: var(--t-ink) !important;
    background: var(--t-hover);
    outline: none;
}

.main-header.cx-navbar .cx-trail a:focus-visible {
    box-shadow: var(--t-focus);
}

/* Home: a square icon button. */
.main-header.cx-navbar .cx-trail li:first-child a {
    justify-content: center;
    width: 28px;
    padding: 0;
}

.main-header.cx-navbar .cx-trail i {
    font-size: 12px;
    color: var(--t-faint);
}

.main-header.cx-navbar .cx-trail a:hover i {
    color: var(--t-muted);
}

/* Where you are: the page, in ink, a tile behind it (on the inner span, so
   the chevron drawn by the <li> stays outside the tile). */
.main-header.cx-navbar .cx-trail .cx-trail-here {
    font-weight: 600;
    color: var(--t-ink);
    background: var(--t-subtle);
    box-shadow: inset 0 0 0 1px var(--t-line);
}

.main-header.cx-navbar .cx-trail .cx-trail-here span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-header.cx-navbar .cx-trail .cx-trail-here i {
    color: var(--t-accent);
}

/* ---------------------------------------------------------- right side */

.main-header.cx-navbar .cx-navbar-tools {
    gap: 8px;
}

/* The search sits first visually; "Client nou" stays the first <li> (the
   header contract pins it). */
.main-header.cx-navbar .cx-navbar-tools > li:has(.cx-cmdk-trigger) {
    order: -1;
}

.main-header.cx-navbar .cx-cmdk-trigger {
    width: 240px;
    margin: 0;
}

/* A hairline between the actions and the identity. */
.main-header.cx-navbar .cx-navbar-tools > li:has(.cx-navbar-user) {
    margin-left: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--t-line);
}

.main-header.cx-navbar .cx-navbar-group {
    height: 32px;
    background: var(--t-surface);
    border: 1px solid var(--t-line) !important;
    border-radius: 8px;
    overflow: hidden;
}

.main-header.cx-navbar .cx-navbar-group > * + *,
.main-header.cx-navbar .cx-navbar-group > .dropdown + * {
    border-left: 1px solid var(--t-line) !important;
}

.main-header.cx-navbar .cx-navbar-tool {
    height: 30px;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 500;
}

.main-header.cx-navbar .cx-navbar-tool-icon {
    width: 32px;
    padding: 0;
    justify-content: center;
}

.main-header.cx-navbar .cx-navbar-action {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* The user: avatar + name/role, then sign out — no box, a quiet hover. */
.main-header.cx-navbar .cx-navbar-user {
    height: 36px;
    gap: 10px;
    padding: 0 4px 0 2px;
    background: transparent;
    border: 0 !important;
}

.main-header.cx-navbar .cx-user-avatar {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--t-accent), #7c3aed);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--t-surface), 0 0 0 3px var(--t-accent-line);
}

.main-header.cx-navbar .cx-user-meta {
    line-height: 1.2;
}

.main-header.cx-navbar .cx-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-ink);
}

.main-header.cx-navbar .cx-user-role {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-faint);
}

.main-header.cx-navbar a.cx-user-logout {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    color: var(--t-faint) !important;
    border-radius: 8px;
}

.main-header.cx-navbar a.cx-user-logout:hover {
    color: var(--t-bad) !important;
    background: var(--t-bad-soft) !important;
}

/* The band's eyebrow is gone (the trail says it); hide any cached copy. */
.cx-eyebrow {
    display: none !important;
}

/* ------------------------------------------------------------ narrower */

@media (max-width: 1599.98px) {
    .main-header.cx-navbar .cx-cmdk-trigger {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .main-header.cx-navbar .cx-cmdk-trigger .cx-cmdk-label,
    .main-header.cx-navbar .cx-cmdk-trigger .cx-cmdk-kbd {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .main-header.cx-navbar .cx-user-meta,
    .main-header.cx-navbar .cx-navbar-tool-label {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    /* Only home and the page. */
    .main-header.cx-navbar .cx-trail li:not(:first-child):not([aria-current]) {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .main-header.cx-navbar .cx-trail {
        display: none;
    }
}

/* Record bars: the last white-on-navy texts (country names, the switch label). */
.cxw-bar .cxw-flags,
.cxw-bar .cxw-flag,
.cxw-bar .cx-chip-label,
.cxw-bar .cx-switch-label,
.cxw-bar .cx-switch input:checked ~ .cx-switch-label {
    color: var(--t-ink-2) !important;
}

.cxw-bar .cxw-flags > i {
    color: var(--t-faint) !important;
}

/* The old navy-bar rule painted the current <li> itself; the tile is now on
   .cx-trail-here only. */
.main-header.cx-navbar .cx-trail li[aria-current] {
    height: auto;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Only the page itself may shorten; home, module and submodule keep their
   width (at 1440px they were cut to "Feri…", "R…"). */
.main-header.cx-navbar .cx-trail li:not([aria-current]) {
    flex-shrink: 0;
}

.main-header.cx-navbar .cx-trail li[aria-current] {
    flex: 0 1 auto;
}

/* Collapsed sidebar (icons only): an open submenu showed its active child as an
   empty raised box (treeview icons are hidden, labels too). Hidden until the
   rail is hovered, when AdminLTE expands it. */
@media (min-width: 992px) {
    body.sidebar-collapse .main-sidebar:not(:hover) .nav-treeview {
        display: none !important;
    }
}

/* ======================================================================
 * MODAL SYSTEM (2026-11-04) — one shape for the ~36 modals of both
 * generations (`.cxm` and the legacy `modal-general-header`), the CDN's
 * jquery-confirm dialogs and the file-upload widget. Markup and ids are
 * untouched; public/js/cx_modal.js strips label colons, adds a "Renunta"
 * where a footer had no way out, and focuses the first field.
 *
 * Every modal: centred, at most the viewport tall, header and footer fixed,
 * the body scrolls. (select2 drops into the .modal itself and the datepicker
 * into <body>, so the scrolling body clips neither.)
 * ====================================================================== */

.modal-backdrop.show {
    opacity: 1 !important;
    background: var(--t-backdrop) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@media (min-width: 576px) {
    .modal-dialog:not(.modal-fullscreen) {
        display: flex;
        align-items: center;
        min-height: calc(100% - 3.5rem);
    }

    .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-xxl):not(.modal-sm):not(.cx-modal-90):not(.modal-fullscreen) {
        max-width: 560px;
    }
}

.modal.fade .modal-dialog {
    opacity: 0;
    transform: translateY(12px) scale(.985);
    transition: transform .22s cubic-bezier(.2, .9, .3, 1), opacity .18s ease;
}

.modal.show .modal-dialog {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
    border-radius: 14px !important;
}

/* A thin accent across the top: the one coloured line of a dialog. */
.modal-content::before {
    content: "";
    flex: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--t-accent), #7c3aed);
}

/* ------------------------------------------------------------- header */

.modal-header,
.modal-header.modal-general-header,
.modal-header.cxm-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 18px 60px 16px 22px !important;
    background: var(--t-surface) !important;
    border-bottom: 1px solid var(--t-line) !important;
    border-radius: 0 !important;
}

.modal-header > div:not([class]) {
    min-width: 0;
}

.modal .modal-header .modal-title,
.modal-content .modal-header h5,
.modal-content .modal-header h4 {
    margin: 0 !important;
    font-size: 16.5px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: var(--t-ink) !important;
}

.modal-header .cxm-sub,
.modal-header > p,
.modal-header > div > p {
    margin: 4px 0 0 !important;
    font-size: 13px;
    line-height: 1.45;
    color: var(--t-muted) !important;
}

/* The close button: a quiet square, top right. */
.modal-header .btn-close,
.modal-header .close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    background-size: 11px !important;
    border-radius: 8px;
    opacity: .55;
    transition: background-color .12s, opacity .12s;
}

.modal-header .btn-close:hover,
.modal-header .close:hover {
    opacity: 1;
    background-color: var(--t-hover) !important;
}

.modal-header .btn-close:focus {
    box-shadow: var(--t-focus) !important;
}

/* --------------------------------------------------------------- body */

.modal-body,
.modal-body.cxm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px !important;
    font-size: 13.5px;
    color: var(--t-ink);
}

.modal-body.p-0,
.modal-body.cxm-body.p-0 {
    padding: 0 !important;
}

.modal-body .row {
    --bs-gutter-x: 16px;
}

.modal-body label,
.modal-body .form-label,
.modal .cxm-label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 500 !important;
    color: var(--t-ink-2) !important;
}

.modal-body .form-check-label {
    margin-bottom: 0;
    font-weight: 400 !important;
}

.modal-body .required_field,
.modal-body label .text-danger {
    color: var(--t-bad) !important;
}

.modal-body .form-control,
.modal-body .form-select,
.modal-body .select2-container--default .select2-selection--single {
    min-height: 36px !important;
}

.modal-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}

.modal-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

.modal-body .input-group > .form-control {
    min-height: 36px !important;
}

.modal-body .cxm-hint,
.modal-body .form-text,
.modal-body small.text-muted {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--t-muted) !important;
}

/* Section titles: small caps with a hairline running to the edge. */
.modal-body .cxm-legend,
.modal-body p.blue-text {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-muted) !important;
}

.modal-body p.blue-text strong {
    font-weight: 600 !important;
    color: inherit !important;
}

.modal-body .cxm-legend::after,
.modal-body p.blue-text::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--t-line);
}

.modal-body hr {
    margin: 18px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--t-line) !important;
    background: none !important;
    opacity: 1;
}

.modal-body .alert {
    border-radius: 10px;
}

/* ------------------------------------------------------------- footer */

.modal-footer,
.modal-footer.modal-general-footer,
.modal-footer.cxm-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px !important;
    background: var(--t-subtle) !important;
    border-top: 1px solid var(--t-line) !important;
    border-radius: 0 !important;
}

.modal-footer > * {
    margin: 0 !important;
}

.modal-footer .cx-btn,
.modal-footer .btn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

/* One primary colour in a dialog: green / blue Bootstrap buttons become the
   accent. Danger stays red. */
.modal-footer .btn-success,
.modal-footer .btn-primary,
.modal-footer .btn-info {
    color: var(--t-on-accent) !important;
    background: var(--t-btn) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)) !important;
    border: 1px solid var(--t-btn) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.modal-footer .btn-success:hover,
.modal-footer .btn-primary:hover,
.modal-footer .btn-info:hover {
    background-color: var(--t-btn-hover) !important;
    border-color: var(--t-btn-hover) !important;
}

/* ------------------------------------------------- inside the dialogs */

/* /ferry-route › Pret cumparare: the live total was a loud yellow box. */
#form_new_ferry_route_purchase_summary_wrapper {
    padding: 18px !important;
    color: var(--t-ink) !important;
    background: linear-gradient(180deg, var(--t-surface), var(--t-accent-soft)) !important;
    border: 1px solid var(--t-accent-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.form_new_ferry_route_purchase_summary_label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-muted) !important;
}

#form_new_ferry_route_purchase_total_price {
    min-height: 34px;
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
    color: var(--t-accent-ink) !important;
    font-variant-numeric: tabular-nums;
}

/* The file-upload widget (bootstrap-fileinput, CDN). */
.modal .file-input {
    width: 100%;
}

.modal .file-preview {
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.modal .file-drop-zone {
    min-height: 150px;
    margin: 0 !important;
    background: var(--t-subtle) !important;
    border: 1.5px dashed var(--t-line-2) !important;
    border-radius: 12px !important;
    transition: border-color .15s, background-color .15s;
}

.modal .file-drop-zone:hover,
.modal .file-drop-zone.file-highlighted {
    background: var(--t-accent-soft) !important;
    border-color: var(--t-accent-line) !important;
}

.modal .file-drop-zone-title {
    padding: 52px 12px !important;
    font-size: 14px !important;
    color: var(--t-faint) !important;
}

.modal .file-preview .fileinput-remove {
    top: 8px !important;
    right: 10px !important;
    color: var(--t-muted) !important;
}

.modal .file-caption .form-control,
.modal .file-caption-name {
    min-height: 36px !important;
    color: var(--t-muted) !important;
    background: var(--t-surface) !important;
}

.modal .file-input .input-group .btn,
.modal .file-input .input-group-btn .btn {
    height: 36px !important;
    border-radius: 0 !important;
}

.modal .file-input .input-group > :last-child,
.modal .file-input .input-group-btn:last-child .btn:last-child {
    border-top-right-radius: var(--t-radius-sm) !important;
    border-bottom-right-radius: var(--t-radius-sm) !important;
}

.modal .file-input .btn-file {
    color: var(--t-on-accent) !important;
    background: var(--t-btn) !important;
    border-color: var(--t-btn) !important;
}

/* jquery-confirm (CDN): same dialog as the modals. */
.jconfirm .jconfirm-box {
    padding: 0 !important;
    overflow: hidden;
}

.jconfirm .jconfirm-box::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--t-accent), #7c3aed);
}

.jconfirm .jconfirm-box div.jconfirm-title-c {
    padding: 18px 22px 0 !important;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane {
    margin: 0 !important;
    padding: 8px 22px 18px !important;
}

.jconfirm .jconfirm-box div.jconfirm-content {
    font-size: 13.5px !important;
    line-height: 1.5;
}

.jconfirm .jconfirm-box .jconfirm-buttons {
    float: none !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 22px !important;
    background: var(--t-subtle);
    border-top: 1px solid var(--t-line);
}

.jconfirm .jconfirm-box .jconfirm-buttons button {
    margin: 0 !important;
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line-2) !important;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-green,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-primary,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-success {
    color: var(--t-on-accent) !important;
    background: var(--t-btn) !important;
    border-color: var(--t-btn) !important;
}

.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-danger {
    color: #fff !important;
    background: var(--t-bad) !important;
    border-color: var(--t-bad) !important;
}

.jconfirm .jconfirm-box div.jconfirm-closeIcon {
    top: 16px !important;
    right: 16px !important;
    color: var(--t-muted) !important;
}

@media (max-width: 575.98px) {
    .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ======================================================================
 * TABLE SYSTEM (2026-11-04) — DataTables grids (CDN-initialised, bootstrap-5
 * integration markup: three `.row`s — tools / table / info+pager) and the
 * server-rendered `.cx-table`s, in one shape:
 *   - edge to edge in their card, a tool bar above and a footer bar below;
 *   - the table area scrolls sideways on its own when it is wider than the card
 *     (the customer grid was 1199px in a 1136px card: Status cut off);
 *   - quiet header with clear sort marks, a light accent hover on rows;
 *   - a spinner pill while loading, an icon on the empty state.
 * No markup or id changes; the CDN scripts keep their contract.
 * ====================================================================== */

.cx-card-body:has(> .dataTables_wrapper),
.card-body:has(> .dataTables_wrapper),
.cx-card-body:has(> .table-responsive > .dataTables_wrapper) {
    padding: 0 !important;
}

.dataTables_wrapper {
    position: relative;
}

.dataTables_wrapper > .row {
    --bs-gutter-x: 0;
    margin: 0 !important;
    align-items: center;
}

/* Tool bar: page length on the left, search on the right. */
.dataTables_wrapper > .row:first-child {
    gap: 12px 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--t-line);
}

/* Footer bar: "1–14 din 529" on the left, pager on the right. */
.dataTables_wrapper > .row:last-child {
    gap: 10px 0;
    padding: 10px 16px;
    background: var(--t-subtle);
    border-top: 1px solid var(--t-line);
    border-radius: 0 0 12px 12px;
}

.dataTables_wrapper > .row > [class*="col-"] {
    padding: 0 !important;
}

/* The table area scrolls sideways by itself; nothing in a cell opens a
   dropdown, so the scroll clips nothing. */
.dataTables_wrapper > .row:has(table) > [class*="col-"] {
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin: 0 !important;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_filter {
    text-align: right;
}

.dataTables_wrapper .dataTables_filter input {
    padding-left: 32px !important;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
}

.dataTables_wrapper .dataTables_info {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.dataTable {
    margin: 0 !important;
    border-spacing: 0;
}

/* Edge cells breathe like the card. */
table.dataTable > thead > tr > :first-child,
table.dataTable > tbody > tr > :first-child,
.cx-table > thead > tr > :first-child,
.cx-table > tbody > tr > :first-child {
    padding-left: 16px !important;
}

table.dataTable > thead > tr > :last-child,
table.dataTable > tbody > tr > :last-child,
.cx-table > thead > tr > :last-child,
.cx-table > tbody > tr > :last-child {
    padding-right: 16px !important;
}

/* ------------------------------------------------------------ header */

table.dataTable > thead > tr > th,
.cx-table > thead > tr > th,
.table > thead > tr > th {
    height: 40px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    vertical-align: middle !important;
    color: var(--t-muted) !important;
    background: var(--t-subtle) !important;
    border-bottom: 1px solid var(--t-line) !important;
}

/* Sort marks: a faint ⇅ on every sortable column, the accent arrow on the
   sorted one. (The CDN's absolute ::before/::after arrows are retired.) */
table.dataTable > thead .sorting,
table.dataTable > thead .sorting_asc,
table.dataTable > thead .sorting_desc {
    position: relative;
    padding-right: 26px !important;
    cursor: pointer;
    user-select: none;
}

table.dataTable > thead .sorting::before,
table.dataTable > thead .sorting_asc::before,
table.dataTable > thead .sorting_desc::before {
    display: none !important;
}

table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::after {
    content: "\f0dc" !important;
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    margin: -6px 0 0 !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    line-height: 12px;
    color: var(--t-faint) !important;
    opacity: .55 !important;
}

table.dataTable > thead .sorting_asc::after {
    content: "\f0de" !important;
    color: var(--t-accent) !important;
    opacity: 1 !important;
}

table.dataTable > thead .sorting_desc::after {
    content: "\f0dd" !important;
    color: var(--t-accent) !important;
    opacity: 1 !important;
}

table.dataTable > thead .sorting:hover::after {
    opacity: 1 !important;
    color: var(--t-muted) !important;
}

table.dataTable > thead .sorting_asc,
table.dataTable > thead .sorting_desc {
    color: var(--t-ink-2) !important;
}

/* -------------------------------------------------------------- rows */

table.dataTable > tbody > tr > td,
.cx-table > tbody > tr > td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.table > tbody > tr:hover > *,
.cx-table > tbody > tr:hover > *,
table.dataTable > tbody > tr:hover > td,
table.dataTable.hover > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover {
    background-color: color-mix(in srgb, var(--t-accent) 4%, var(--t-surface)) !important;
}

:root[data-theme="dark"] .table > tbody > tr:hover > *,
:root[data-theme="dark"] .cx-table > tbody > tr:hover > *,
:root[data-theme="dark"] table.dataTable > tbody > tr:hover > td {
    background-color: color-mix(in srgb, var(--t-accent) 7%, var(--t-surface)) !important;
}

/* The row-number column: small and quiet. */
table.dataTable > tbody > tr > td:first-child .cxc-nr,
.cxc-nr {
    font-size: 12px;
    color: var(--t-faint);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------- loading and empty state */

.dataTables_wrapper div.dataTables_processing,
div.dataTables_processing.card {
    position: absolute !important;
    top: 64px !important;
    left: 50% !important;
    z-index: 5;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 16px 8px 38px !important;
    font-size: 12.5px !important;
    font-weight: 500;
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 999px !important;
    box-shadow: var(--t-shadow-pop) !important;
    transform: translateX(-50%);
    text-align: left !important;
}

.dataTables_wrapper div.dataTables_processing::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--t-accent-line);
    border-top-color: var(--t-accent);
    border-radius: 50%;
    animation: cx-spin .7s linear infinite;
}

.dataTables_wrapper div.dataTables_processing > div {
    display: none !important;
}

@keyframes cx-spin {
    to { transform: rotate(360deg); }
}

table.dataTable td.dataTables_empty {
    padding: 44px 16px !important;
    font-size: 13px;
    color: var(--t-muted) !important;
    text-align: center !important;
    background: var(--t-surface) !important;
}

table.dataTable td.dataTables_empty::before {
    content: "\f01c";
    display: block;
    margin-bottom: 10px;
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 24px;
    color: var(--t-faint);
}

/* ----------------------------------------------- server-rendered tables */

.cx-table {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper > .row:first-child > [class*="col-"],
    .dataTables_wrapper > .row:last-child > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate {
        justify-content: flex-start;
        text-align: left;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
}

/* Alignment: text reads from the left (the CDN centred most columns); a column
   the scripts mark right-aligned stays right; the action button at the end of a
   row sits at the end. */
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
    text-align: left !important;
}

table.dataTable > thead > tr > th.text-end,
table.dataTable > thead > tr > th.dt-right,
table.dataTable > thead > tr > th.dt-head-right,
table.dataTable > tbody > tr > td.text-end,
table.dataTable > tbody > tr > td.dt-right,
table.dataTable > tbody > tr > td.dt-body-right {
    text-align: right !important;
}

table.dataTable > tbody > tr > td:last-child:has(> .btn, > a.btn, > .cx-btn, > .cxc-act, > .cxc-actions) {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
}

table.dataTable:has(> tbody > tr > td:last-child > .btn, > tbody > tr > td:last-child > .cxc-act, > tbody > tr > td:last-child > .cxc-actions) > thead > tr > th:last-child {
    text-align: right !important;
}

table.dataTable > tbody > tr > td.dataTables_empty {
    text-align: center !important;
}

/* ======================================================================
 * BOOKING FILE (2026-11-04) — "Fisa rezervare", #modal_ferry_booking_information
 * (templates/customer/_ferrybooking_information.html.twig +
 * public/js/ferry_booking_modal.js). Tokens only: light and dark alike.
 *
 * 90% of the viewport. Left column (.fbm-side): the two tabs, vertical, then
 * the summary and the owner. Right (.fbm-main): the open tab, scrolling on
 * its own. Under 992px everything stacks and the tabs go back across.
 * ====================================================================== */

/* !important: the MODAL SYSTEM caps every unsized dialog at 560px with a
   chain of :not() that out-ranks two classes. */
.modal-dialog.fbm-dialog {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 90vh;
    min-height: 0 !important;
    margin: 5vh auto;
}

.fbm-dialog > .modal-content {
    height: 100%;
    max-height: 100%;
}

.fbm .fbm-header {
    flex-direction: row !important;
    align-items: center !important;
}

.fbm-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.fbm-title-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--t-accent-soft);
    color: var(--t-accent-ink);
    font-size: 16px;
}

.fbm .fbm-meta {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fbm-order a,
.fbm-order {
    font-weight: 600;
    color: var(--t-accent-ink) !important;
}

.fbm-status .badge {
    font-size: 11.5px;
    font-weight: 600;
}

.fbm .fbm-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    background: var(--t-canvas);
}

/* --------------------------------------------------- loading / error */
.fbm-state {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1px solid var(--t-line);
    border-radius: 999px;
    background: var(--t-surface);
    box-shadow: var(--t-shadow-pop);
    font-size: 13px;
    color: var(--t-ink-2);
}

.fbm-state[hidden] {
    display: none;
}

.fbm-state-error {
    border-color: var(--t-bad-line);
    background: var(--t-bad-soft);
    color: var(--t-bad);
}

.fbm-state-error .cx-btn {
    padding: 3px 10px;
    font-size: 12.5px;
}

.fbm-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid var(--t-accent-line);
    border-top-color: var(--t-accent);
    border-radius: 50%;
    animation: fbm-spin .7s linear infinite;
}

@keyframes fbm-spin {
    to { transform: rotate(360deg); }
}

.fbm-content {
    transition: opacity .15s ease;
}

.fbm-content.is-dim {
    opacity: .35;
    pointer-events: none;
}

/* --------------------------------------------------- the two columns */
.fbm-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    height: 100%;
}

.fbm-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding: 18px 16px;
    overflow-y: auto;
    border-right: 1px solid var(--t-line);
    background: var(--t-surface);
}

.fbm-main {
    min-width: 0;
    min-height: 0;
    padding: 18px 22px 22px !important;
    overflow-y: auto;
}

/* main.css (CDN) frames every .tab-content: navy 5px bars, #fdfdfd, 30px padding. */
.fbm .tab-content {
    border: 0 !important;
    background: transparent !important;
    line-height: inherit;
}

/* --------------------------------------------------- vertical tabs */
.fbm .fbm-tabs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    border: 0;
}

.fbm .fbm-tabs .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid transparent !important;
    border-radius: var(--t-radius) !important;
    background: transparent !important;
    color: var(--t-ink-2) !important;
    text-align: left;
}

.fbm .fbm-tabs .nav-link:hover {
    background: var(--t-hover) !important;
    color: var(--t-ink) !important;
}

.fbm .fbm-tabs .nav-link.active {
    border-color: var(--t-accent-line) !important;
    background: var(--t-accent-soft) !important;
    color: var(--t-accent-ink) !important;
}

.fbm .fbm-tabs .nav-link.active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--t-accent);
}

.fbm-tab-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--t-sunken);
    color: var(--t-ink-2);
    font-size: 13px;
}

.fbm .fbm-tabs .nav-link.active .fbm-tab-icon {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

.fbm-tab-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.fbm-tab-text strong {
    font-size: 13.5px;
    font-weight: 600;
}

.fbm-tab-text small {
    font-size: 11.5px;
    color: var(--t-muted);
}

.fbm-dot {
    margin-left: auto;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--t-ok);
    box-shadow: 0 0 0 3px var(--t-ok-soft);
}

.fbm-dot[hidden] {
    display: none;
}

/* --------------------------------------------------- summary */
.fbm-kicker {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t-faint);
}

.fbm-summary {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-subtle);
}

.fbm-summary > * {
    padding: 12px 14px;
}

.fbm-summary > * + * {
    border-top: 1px solid var(--t-line);
}

.fbm-route-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.fbm-port {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--t-ink);
}

.fbm-port img {
    align-self: center;
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--t-line);
}

.fbm-port small {
    font-size: 12px;
    font-weight: 400;
    color: var(--t-muted);
}

.fbm-arrow {
    margin-left: 4px;
    color: var(--t-accent);
    font-size: 11px;
}

.fbm-arrow i {
    transform: rotate(90deg);
}

.fbm-price strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    color: var(--t-ink);
}

.fbm-price strong small {
    font-size: 13px;
    font-weight: 500;
    color: var(--t-muted);
}

.fbm-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 0;
}

.fbm-fact-wide {
    grid-column: 1 / -1;
}

.fbm-facts dt {
    margin: 0 0 2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-faint);
}

.fbm-facts dd {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-ink);
    overflow-wrap: anywhere;
}

.fbm-facts dd.is-alert {
    font-weight: 600;
    color: var(--t-bad);
}

.fbm-plate {
    display: inline-block;
    margin-left: 2px;
    padding: 0 6px;
    border: 1px solid var(--t-line-2);
    border-radius: 4px;
    background: var(--t-surface);
    font-family: var(--t-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--t-ink);
}

.fbm-plate:empty,
.fbm-plate[hidden] {
    display: none;
}

.fbm-owner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
}

.fbm-owner-who {
    flex: 1 1 auto;
    min-width: 0;
}

.fbm-owner .fbm-kicker {
    margin-bottom: 2px;
}

.fbm-owner-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--t-ink);
}

.fbm-owner-name.is-empty {
    font-weight: 400;
    font-style: italic;
    color: var(--t-muted);
}

.fbm-owner-actions {
    flex: 0 0 auto;
}

.fbm-owner-actions .cx-btn {
    width: 100%;
    justify-content: center;
    padding: 5px 10px;
    font-size: 12.5px;
    white-space: nowrap;
}

.fbm-owner-actions .cx-btn[hidden] {
    display: none;
}

/* --------------------------------------------------- cards */
.fbm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.fbm-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.fbm-ref {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr);
    gap: 16px;
    align-items: start;
}

.fbm-card {
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    box-shadow: var(--t-shadow);
}

.fbm-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--t-line);
}

.fbm-card-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.fbm-card-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--t-ink);
}

.fbm-card-head p {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--t-muted);
}

.fbm-card-head > .cx-btn {
    flex: 0 0 auto;
    align-self: center;
}

.fbm-card-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--t-sunken);
    color: var(--t-ink-2);
    font-size: 13px;
}

.fbm-card-body {
    padding: 14px 16px 16px;
}

.fbm-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.fbm-span-2 {
    grid-column: span 2;
}

.fbm-field > label,
.fbm-field > .fbm-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t-ink-2);
}

.fbm-field .form-control,
.fbm-field .form-select {
    height: 36px;
    font-size: 13.5px;
}

.fbm-upper {
    text-transform: uppercase;
}

.fbm-mono {
    font-family: var(--t-mono);
    letter-spacing: .03em;
}

.fbm-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--t-sunken);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--t-faint);
    cursor: help;
}

.fbm-locked .form-select:disabled,
.fbm-locked input:disabled {
    background-color: var(--t-subtle) !important;
    color: var(--t-muted) !important;
    opacity: 1;
    cursor: not-allowed;
}

.fbm-radios {
    display: flex;
    gap: 8px;
}

.fbm-radio {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    background: var(--t-subtle);
    font-size: 13px;
    color: var(--t-muted);
    cursor: not-allowed;
}

.fbm-radio input {
    margin: 0;
    flex: 0 0 auto;
}

.fbm-radio:has(input:checked) {
    border-color: var(--t-accent-line);
    background: var(--t-accent-soft);
    color: var(--t-accent-ink);
    font-weight: 500;
}

.fbm-inline {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.fbm-grow {
    flex: 1 1 0;
    min-width: 0;
}

/* The CDN pins the old date box to 150px. */
.fbm #ferrybooking_date_box {
    width: auto !important;
    max-width: none !important;
}

.fbm-inline > .cx-btn {
    flex: 0 0 auto;
    height: 36px;
}

.fbm-card-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--t-line);
}

.fbm .cx-btn[aria-busy="true"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.fbm .cx-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fbm-spin .7s linear infinite;
}

/* --------------------------------------------------- reference + ticket */
.fbm-ref-current {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border: 1px dashed var(--t-line-2);
    border-radius: var(--t-radius);
    background: var(--t-subtle);
}

.fbm-ref-empty {
    font-size: 13px;
    color: var(--t-muted);
}

.fbm-ref-code {
    flex: 1 1 auto;
    font-family: var(--t-mono);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--t-ink);
    overflow-wrap: anywhere;
}

.fbm-ref-current:has(.fbm-ref-code:not([hidden])) {
    border-style: solid;
    border-color: var(--t-ok-line);
    background: var(--t-ok-soft);
}

.fbm-ref-empty[hidden],
.fbm-ref-code[hidden],
.fbm-copy[hidden],
.fbm-ref-locked[hidden],
.fbm-inline[hidden] {
    display: none;
}

.fbm-copy {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    color: var(--t-ink-2);
}

.fbm-copy:hover {
    border-color: var(--t-accent-line);
    color: var(--t-accent-ink);
}

.fbm-ref-locked {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--t-warn-line);
    border-radius: var(--t-radius);
    background: var(--t-warn-soft);
    font-size: 13px;
    color: var(--t-warn);
}

.fbm-ref-locked i {
    margin-top: 2px;
}

#ferrybooking_reference_number.is-loading .fbm-card {
    opacity: .5;
    transition: opacity .15s ease;
}

.fbm-ticket {
    max-height: calc(90vh - 260px);
    overflow: auto;
    border-radius: var(--t-radius-sm);
}

/* The ticket is the e-mail's own HTML (white paper): it keeps its colours in dark mode too. */
.fbm-ticket > :not(.fbm-ticket-empty) {
    background: #fff;
    color: #111827;
}

.fbm-ticket-empty {
    margin: 0;
    padding: 34px 12px;
    border: 1px dashed var(--t-line-2);
    border-radius: var(--t-radius);
    text-align: center;
    font-size: 13px;
    color: var(--t-muted);
}

/* --------------------------------------------------- narrower screens */
@media (max-width: 1280px) {
    .fbm-grid,
    .fbm-ref {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .modal-dialog.fbm-dialog {
        width: auto !important;
        max-width: none !important;
        height: auto;
        margin: 8px;
    }

    .fbm-dialog > .modal-content {
        height: auto;
        max-height: calc(100vh - 16px);
    }

    .fbm .fbm-body {
        overflow-y: auto;
    }

    .fbm-layout {
        display: block;
        height: auto;
    }

    .fbm-side {
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--t-line);
    }

    .fbm .fbm-tabs {
        flex-direction: row;
    }

    .fbm .fbm-tabs .nav-link {
        flex: 1 1 0;
    }

    .fbm-tab-text small {
        display: none;
    }

    .fbm-owner {
        flex-direction: row;
        align-items: center;
    }

    .fbm-owner-actions .cx-btn {
        width: auto;
    }

    .fbm-main {
        overflow: visible;
    }
}

/* ======================================================================
 * BOOKINGS PAGE (2026-11-04) — Feriboat › Rezervari (#fbl,
 * templates/ferryboat/booking.html.twig + public/js/ferry_booking_list.js).
 * Counters that are filters, a filter bar, rows that open the booking file.
 * ====================================================================== */

.fbl-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.fbl-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    box-shadow: var(--t-shadow);
    color: var(--t-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.fbl-stat:hover {
    border-color: var(--t-line-2);
}

.fbl-stat:focus-visible {
    outline: none;
    box-shadow: var(--t-focus);
}

.fbl-stat.is-on {
    border-color: var(--t-accent);
    background: var(--t-accent-soft);
    box-shadow: 0 0 0 1px var(--t-accent) inset;
}

.fbl-stat-icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--t-sunken);
    color: var(--t-ink-2);
    font-size: 14px;
}

.fbl-stat-info .fbl-stat-icon { background: var(--t-info-soft); color: var(--t-info); }
.fbl-stat-warn .fbl-stat-icon { background: var(--t-warn-soft); color: var(--t-warn); }
.fbl-stat-ok .fbl-stat-icon { background: var(--t-ok-soft); color: var(--t-ok); }
.fbl-stat-off .fbl-stat-icon { background: var(--t-bad-soft); color: var(--t-bad); }

.fbl-stat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fbl-stat-label {
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--t-muted);
}

.fbl-stat-text strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- toolbar */
.fbl .fbl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
}

.fbl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.fbl-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.fbl-filter .cx-label {
    margin: 0;
}

.fbl-reset[hidden] {
    display: none;
}

/* --------------------------------------------------- rows */
.fbl #list_all_booking tbody td,
.fbl #list_all_booking thead th {
    padding: 10px 8px !important;
    vertical-align: middle;
}

.fbl #list_all_booking td.fbl-c-customer {
    max-width: 190px;
    overflow-wrap: anywhere;
}

.fbl-order {
    white-space: nowrap;
}

.fbl-owner-name {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fbl .cxc-route .cxc-leg-country {
    white-space: nowrap;
}

.fbl #list_all_booking thead th {
    white-space: nowrap;
}

.fbl #list_all_booking tbody tr.fbl-row {
    cursor: pointer;
}

.fbl #list_all_booking tbody tr.fbl-row:focus-visible {
    outline: 2px solid var(--t-accent);
    outline-offset: -2px;
}

.fbl #list_all_booking tbody tr.is-open > td {
    background: var(--t-accent-soft) !important;
}

.fbl #list_all_booking tbody tr.is-open > td:first-child {
    box-shadow: inset 3px 0 0 var(--t-accent);
}

.fbl #list_all_booking tbody tr.is-deleted > td {
    color: var(--t-muted);
}

.fbl #list_all_booking tbody tr.is-deleted .fbl-id,
.fbl #list_all_booking tbody tr.is-deleted .fbl-plate {
    text-decoration: line-through;
    text-decoration-color: var(--t-faint);
}

.fbl-id {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--t-ink);
}

.fbl-deleted {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 2px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--t-bad-soft);
    font-size: 11px;
    font-weight: 600;
    color: var(--t-bad);
}

.fbl-time {
    font-weight: 600;
    color: var(--t-ink-2) !important;
}

.fbl-rel {
    white-space: nowrap;
}

.fbl #list_all_booking td.fbl-c-reference {
    max-width: 130px;
}

.fbl #list_all_booking td.fbl-c-reference .cxc-code {
    overflow-wrap: anywhere;
}

.fbl #list_all_booking td.fbl-c-open,
.fbl #list_all_booking thead th:last-child {
    width: 34px;
    padding-left: 4px !important;
    padding-right: 8px !important;
}

.fbl-when.is-soon .fbl-rel {
    font-weight: 600;
    color: var(--t-warn);
}

.fbl-when.is-past .cxc-strong {
    font-weight: 500;
    color: var(--t-ink-2);
}

.fbl-plate {
    display: inline-block;
    align-self: flex-start;
    padding: 1px 7px;
    border: 1px solid var(--t-line-2);
    border-radius: 4px;
    background: var(--t-subtle);
    font-family: var(--t-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--t-ink);
}

.fbl-missing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--t-warn-soft);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--t-warn);
}

.fbl-order {
    margin-top: 3px;
    font-size: 12px;
}

.fbl-unassigned {
    font-size: 12.5px;
    font-style: italic;
    color: var(--t-faint);
}

.fbl-owner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.fbl-avatar {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--t-accent-soft);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--t-accent-ink);
}

.fbl-provider {
    margin-top: 3px;
}

.fbl-provider i,
.fbl-c-customer .cxc-sub i {
    margin-right: 2px;
    font-size: 10px;
    color: var(--t-faint);
}

.fbl-c-price {
    white-space: nowrap;
}

.fbl .fbl-open {
    color: var(--t-faint);
}

.fbl tr.fbl-row:hover .fbl-open,
.fbl tr.is-open .fbl-open {
    color: var(--t-accent);
}

.fbl-error {
    padding: 28px 12px !important;
    text-align: center !important;
    color: var(--t-bad);
}

@media (max-width: 1400px) {
    .fbl-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .fbl-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fbl-filter {
        min-width: 0;
        flex: 1 1 140px;
    }
}

/* Auto table layout ignores a <td>'s max-width: the cap goes on the content. */
.fbl #list_all_booking td.fbl-c-reference .cxc-code {
    display: inline-block;
    max-width: 112px;
}

.fbl #list_all_booking td.fbl-c-customer > .cxc-stack {
    display: inline-flex;
    max-width: 150px;
}

/* ======================================================================
 * PAGER SYSTEM (2026-11-04) — one pager for the whole app.
 *
 * Two sources, one look: the DataTables grids (bootstrap-5 markup:
 * ul.pagination > li.paginate_button.page-item > a.page-link) and the lists
 * rendered here (templates/_pagination.html.twig: .cx-pager >
 * .cx-pager-info + nav.cx-pager-links > a | button | span). The older rules
 * that fought each other (two borders per button — the <li> AND its link —,
 * an inline <style> in _page_chrome outranking this file, a navy current
 * page, push's own pager) are gone.
 *
 * DataTables: first/last are hidden (the numbers already show 1 and the last
 * page, as the server pager does), previous/next are chevrons, a single page
 * shows no pager (cx_theme.js marks the wrapper .cx-one-page).
 * ====================================================================== */

/* ---- the list footer: count on the left, pages on the right */
.cx-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--t-line);
}

.cx-pager-info,
.dataTables_wrapper .dataTables_info {
    margin: 0;
    font-size: 12.5px !important;
    font-variant-numeric: tabular-nums;
    color: var(--t-muted) !important;
}

.cx-pager-info strong,
.dataTables_wrapper .dataTables_info strong {
    font-weight: 600;
    color: var(--t-ink-2);
}

.cx-pager-sep {
    margin: 0 4px;
    color: var(--t-faint);
}

/* ---- the row of pages */
.cx-pager-links,
.dataTables_wrapper .dataTables_paginate .pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* The <li> is a bare box; the link inside is the button (one border, not two). */
.dataTables_wrapper .dataTables_paginate li.paginate_button,
.dataTables_wrapper .dataTables_paginate li.paginate_button:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button.current,
.dataTables_wrapper .dataTables_paginate li.paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button.active,
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate li.paginate_button:active {
    display: block;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.cx-pager-links > a,
.cx-pager-links > button,
.cx-pager-links > span,
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 10px !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    text-decoration: none !important;
    color: var(--t-ink-2) !important;
    background: var(--t-surface) !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.cx-pager-links > a:hover,
.cx-pager-links > button:hover,
.dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    color: var(--t-ink) !important;
    background: var(--t-hover) !important;
    border-color: var(--t-line-2) !important;
}

.cx-pager-links > a:focus-visible,
.cx-pager-links > button:focus-visible,
.dataTables_wrapper .dataTables_paginate .page-link:focus-visible,
.dataTables_wrapper .dataTables_paginate .page-link:focus {
    outline: none;
    box-shadow: var(--t-focus) !important;
}

.cx-pager-links > .is-current,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    color: var(--t-on-accent) !important;
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    font-weight: 600;
    cursor: default;
}

.cx-pager-links > .is-disabled,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: var(--t-faint) !important;
    background: transparent !important;
    border-color: var(--t-line) !important;
    opacity: .6;
    cursor: default;
    pointer-events: none;
}

/* "…": a gap, not a button. */
.cx-pager-links > .cx-pager-gap,
.dataTables_wrapper .dataTables_paginate li.disabled:not(.previous):not(.next):not(.first):not(.last) .page-link {
    min-width: 20px;
    padding: 0 2px !important;
    color: var(--t-faint) !important;
    background: transparent !important;
    border-color: transparent !important;
    opacity: 1;
    cursor: default;
}

/* Arrows: chevrons in both pagers. DataTables' «‹›» text is hidden. */
.cx-pager-links > .cx-pager-arrow {
    padding: 0 !important;
    width: 32px;
    font-size: 11px !important;
}

.dataTables_wrapper .dataTables_paginate li.first,
.dataTables_wrapper .dataTables_paginate li.last {
    display: none !important;
}

.dataTables_wrapper .dataTables_paginate li.previous .page-link,
.dataTables_wrapper .dataTables_paginate li.next .page-link {
    width: 32px;
    padding: 0 !important;
    font-size: 0 !important;
}

.dataTables_wrapper .dataTables_paginate li.previous .page-link::before,
.dataTables_wrapper .dataTables_paginate li.next .page-link::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    line-height: 1;
}

.dataTables_wrapper .dataTables_paginate li.previous .page-link::before { content: "\f053"; }
.dataTables_wrapper .dataTables_paginate li.next .page-link::before { content: "\f054"; }

/* One page: nothing to page through. */
.dataTables_wrapper.cx-one-page .dataTables_paginate {
    display: none !important;
}

/* Narrow screens: the count over the pages, both from the left. */
@media (max-width: 575.98px) {
    .cx-pager {
        flex-direction: column;
        align-items: flex-start;
    }

    .cx-pager-links > a,
    .cx-pager-links > button,
    .cx-pager-links > span,
    .dataTables_wrapper .dataTables_paginate .page-item .page-link {
        min-width: 30px;
        height: 30px;
    }
}

/* ======================================================================
 * DASHBOARD (2026-11-04) — /dashboard (templates/dashboard/index.html.twig +
 * public/js/dashboard.js). Rail of reports, period bar, report blocks.
 *
 * Chart palette (--dv-*): the dataviz reference palette, validated against
 * this theme's surfaces (#ffffff light, #12151c dark): every check passes;
 * three light slots sit below 3:1, so every chart also has a table view.
 * Status tones are separate from the categorical slots.
 * ====================================================================== */
.db {
    --dv-1: #2a78d6; --dv-2: #eb6834; --dv-3: #1baf7a; --dv-4: #eda100;
    --dv-5: #e87ba4; --dv-6: #008300; --dv-7: #6250d6; --dv-8: #e34948;
    --dv-good: #0ca30c; --dv-warn: #fab219; --dv-serious: #ec835a; --dv-bad: #d03b3b; --dv-muted: #a3a29c;
    --dv-compare: #a3a29c;
    --dv-grid: #eceef1;
    --dv-axis: #8a8f98;
    --dv-text: #4b5563;
    --dv-surface: #ffffff;
    --dv-tip: #111827;
    --dv-heat: 42, 120, 214;
}

:root[data-theme="dark"] .db {
    --dv-1: #3987e5; --dv-2: #d95926; --dv-3: #199e70; --dv-4: #c98500;
    --dv-5: #d55181; --dv-6: #008300; --dv-7: #9085e9; --dv-8: #e66767;
    --dv-compare: #6b6d74;
    --dv-grid: #232833;
    --dv-axis: #7d8390;
    --dv-text: #c3c7cf;
    --dv-surface: #12151c;
    --dv-tip: #0b0d12;
    --dv-heat: 57, 135, 229;
}

/* ---------------------------------------------------------- period bar */
.db-period {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    box-shadow: var(--t-shadow);
}

.db-presets {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 3px;
    border-radius: 10px;
    background: var(--t-sunken);
    gap: 2px;
}

.db-preset {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t-muted);
    white-space: nowrap;
    cursor: pointer;
}

.db-preset:hover {
    color: var(--t-ink);
}

.db-preset.is-on {
    background: var(--t-surface);
    color: var(--t-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.db-custom {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.db-custom[hidden] {
    display: none;
}

.db-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.db-field .cx-label {
    margin: 0;
}

.db-field .form-control,
.db-field .form-select {
    height: 32px;
    font-size: 13px;
}

.db-custom .db-field {
    width: 140px;
}

.db-compare {
    min-width: 210px;
}

.db-range {
    margin: 0 0 6px auto;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--t-muted);
}

/* ---------------------------------------------------------- layout */
.db-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.db-rail {
    position: sticky;
    top: calc(var(--cx-sticky-top, 72px));
    max-height: calc(100vh - var(--cx-sticky-top, 72px) - 16px);
    overflow-y: auto;
    padding: 10px 8px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    box-shadow: var(--t-shadow);
}

.db-rail ul {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.db-rail-group {
    margin: 10px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t-faint);
}

.db-rail-group:first-child {
    margin-top: 2px;
}

.db-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    color: var(--t-ink-2) !important;
}

.db-rail-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--t-faint);
}

.db-rail-item:hover {
    background: var(--t-hover);
    color: var(--t-ink) !important;
}

.db-rail-item.is-active {
    background: var(--t-accent-soft);
    color: var(--t-accent-ink) !important;
    font-weight: 600;
}

.db-rail-item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--t-accent);
}

.db-rail-item.is-active i {
    color: var(--t-accent);
}

.db-rail-spin {
    display: none;
    width: 12px;
    height: 12px;
    margin-left: auto;
    border: 2px solid var(--t-accent-line);
    border-top-color: var(--t-accent);
    border-radius: 50%;
    animation: fbm-spin .7s linear infinite;
}

.db-rail-item.is-loading .db-rail-spin {
    display: inline-block;
}

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

.db-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.db-report-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--t-ink);
}

.db-report-desc {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--t-muted);
}

.db-report-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.db-updated {
    font-size: 12px;
    color: var(--t-faint);
}

/* ---------------------------------------------------------- blocks */
.db-blocks {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.db-block {
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    box-shadow: var(--t-shadow);
}

.db-span-12 { grid-column: span 12; }
.db-span-8 { grid-column: span 8; }
.db-span-7 { grid-column: span 7; }
.db-span-6 { grid-column: span 6; }
.db-span-5 { grid-column: span 5; }
.db-span-4 { grid-column: span 4; }

.db-kpis.db-block,
.db-block.db-kpis {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.db-block.db-note {
    padding: 10px 14px;
    background: var(--t-subtle);
    box-shadow: none;
}

.db-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.db-block-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--t-ink);
}

.db-block-sub {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--t-muted);
}

.db-tools {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.db-tool {
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--t-line);
    border-radius: 6px;
    background: var(--t-surface);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--t-ink-2);
    cursor: pointer;
}

.db-tool:hover {
    border-color: var(--t-line-2);
    background: var(--t-hover);
}

/* KPI tiles */
.db-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.db-kpi {
    padding: 12px 14px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    box-shadow: var(--t-shadow);
}

.db-kpi-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--t-muted);
}

.db-kpi-info {
    font-size: 11px;
    color: var(--t-faint);
    cursor: help;
}

.db-kpi-value {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--t-ink);
}

.db-kpi-delta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
}

.db-kpi-delta.is-good { color: var(--t-ok); }
.db-kpi-delta.is-bad { color: var(--t-bad); }
.db-kpi-delta.is-flat { color: var(--t-muted); font-weight: 500; }

.db-kpi-prev {
    font-weight: 400;
    color: var(--t-faint);
}

/* charts */
.db-chart {
    position: relative;
}

.db-chart[hidden],
.db-chart-table[hidden] {
    display: none;
}

/* tables */
.db-table-wrap {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.db-table th {
    padding: 0;
    border-bottom: 1px solid var(--t-line);
    text-align: left;
    white-space: nowrap;
}

.db-sort {
    width: 100%;
    padding: 7px 8px;
    border: 0;
    background: none;
    text-align: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t-muted);
    cursor: pointer;
}

.db-table th.is-num,
.db-table td.is-num {
    text-align: right;
    white-space: nowrap;
}

.db-table th[aria-sort] .db-sort {
    color: var(--t-accent-ink);
}

.db-table th[aria-sort="ascending"] .db-sort::after { content: " ↑"; }
.db-table th[aria-sort="descending"] .db-sort::after { content: " ↓"; }

.db-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--t-line);
    color: var(--t-ink-2);
    vertical-align: top;
    white-space: nowrap;
}

/* long free text (reviews, recommended actions) wraps, within reason */
.db-table td.is-long {
    min-width: 220px;
    max-width: 420px;
    white-space: normal;
}

.db-table tbody tr:hover td {
    background: var(--t-hover);
}

.db-table td.is-up { color: var(--t-ok); font-weight: 600; }
.db-table td.is-down { color: var(--t-bad); font-weight: 600; }

.db-link {
    font-weight: 600;
    color: var(--t-accent-ink) !important;
    text-decoration: none !important;
}

.db-link:hover {
    text-decoration: underline !important;
}

.db-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.db-badge.is-good { background: var(--t-ok-soft); color: var(--t-ok); }
.db-badge.is-warn { background: var(--t-warn-soft); color: var(--t-warn); }
.db-badge.is-bad { background: var(--t-bad-soft); color: var(--t-bad); }
.db-badge.is-info { background: var(--t-info-soft); color: var(--t-info); }
.db-badge.is-muted { background: var(--t-sunken); color: var(--t-muted); }

.db-more {
    display: block;
    margin: 8px auto 0;
    padding: 4px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--t-accent-ink);
    cursor: pointer;
}

.db-more[hidden] {
    display: none;
}

.db-more:hover {
    background: var(--t-accent-soft);
}

/* heatmap */
.db-heat {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.db-heat th {
    padding: 2px 4px;
    font-weight: 600;
    text-align: center;
    color: var(--t-muted);
    white-space: nowrap;
}

.db-heat .db-heat-row {
    text-align: left;
    padding-right: 10px;
    color: var(--t-ink-2);
}

.db-heat-note {
    padding: 0 8px;
    font-size: 11px;
    color: var(--t-faint);
    white-space: nowrap;
}

.db-heat-cell {
    min-width: 34px;
    height: 28px;
    padding: 0 4px;
    border-radius: 4px;
    text-align: center;
    color: var(--t-ink-2);
    background: rgba(var(--dv-heat), calc(0.08 + var(--heat, 0) * 0.0088));
}

.db-heat-cell.is-dark {
    color: #fff;
    font-weight: 600;
}

.db-heat-cell.is-none {
    background: var(--t-subtle);
}

/* funnel */
.db-funnel-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.db-step {
    padding: 8px 0;
    border-bottom: 1px solid var(--t-line);
}

.db-step:last-child {
    border-bottom: 0;
}

.db-step-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--t-ink-2);
}

.db-step-value {
    font-variant-numeric: tabular-nums;
    color: var(--t-ink);
}

.db-step-bar {
    height: 8px;
    margin-top: 6px;
    border-radius: 4px;
    background: var(--t-sunken);
    overflow: hidden;
}

.db-step-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--dv-1);
}

.db-step-meta {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--t-muted);
}

/* insights */
.db-insights-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.db-insights-list li {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--t-line);
    font-size: 13px;
    line-height: 1.45;
    color: var(--t-ink-2);
}

.db-insights-list li:last-child {
    border-bottom: 0;
}

.db-insights-list i {
    margin-top: 2px;
}

.db-insights-list .is-good i { color: var(--t-ok); }
.db-insights-list .is-warn i { color: var(--t-warn); }
.db-insights-list .is-bad i { color: var(--t-bad); }
.db-insights-list .is-info i { color: var(--t-info); }

.db-note-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--t-muted);
}

.db-note-text i {
    color: var(--t-faint);
}

/* states */
.db-empty {
    margin: 0;
    padding: 24px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--t-muted);
}

.db-state {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    border: 1px dashed var(--t-line-2);
    border-radius: var(--t-radius);
    text-align: center;
    color: var(--t-muted);
}

.db-state i {
    font-size: 24px;
}

.db-state-error i { color: var(--t-bad); }

.db-state p {
    margin: 0;
}

.db-skeleton {
    min-height: 140px;
}

.db-sk-line,
.db-sk-box {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--t-sunken) 25%, var(--t-hover) 50%, var(--t-sunken) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.2s ease-in-out infinite;
}

.db-sk-line {
    width: 40%;
    height: 12px;
    margin-bottom: 14px;
}

.db-sk-box {
    height: 90px;
}

@keyframes db-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .db-sk-line,
    .db-sk-box,
    .db-rail-spin {
        animation: none;
    }
}

@media (max-width: 1280px) {
    .db-span-8, .db-span-7, .db-span-6, .db-span-5, .db-span-4 { grid-column: span 12; }
}

@media (max-width: 991.98px) {
    .db-layout {
        grid-template-columns: 1fr;
    }

    .db-rail {
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .db-rail ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        margin: 0;
    }

    .db-rail-group {
        width: 100%;
        margin: 6px 4px 0;
    }

    .db-range {
        margin-left: 0;
        width: 100%;
    }
}

/* ---------------------------------------------------------- dashboard help tooltips (2026-11-04) */
.db-info {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1;
    color: var(--t-faint);
    cursor: help;
    transition: color .12s ease, background-color .12s ease;
}

.db-info:hover,
.db-info.is-open,
.db-info:focus-visible {
    color: var(--t-accent);
    background: var(--t-accent-soft);
    outline: none;
}

.db-info:focus-visible {
    box-shadow: var(--t-focus);
}

.db-info[hidden] {
    display: none;
}

.db-info-lg {
    width: 22px;
    height: 22px;
    margin-left: 8px;
    font-size: 15px;
}

.db-info-sm {
    width: 15px;
    height: 15px;
    margin-left: 2px;
    font-size: 10px;
}

.db-kpi-label .db-info {
    margin-left: auto;
}

.db-table th .db-sort {
    width: auto;
}

.db-table th {
    padding-right: 4px;
}

.db-tip {
    position: fixed;
    z-index: 2000;
    width: max-content;
    max-width: min(400px, calc(100vw - 16px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--t-line);
    border-radius: 10px;
    background: var(--t-surface);
    box-shadow: var(--t-shadow-pop);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--t-ink-2);
    animation: db-tip-in .12s ease-out;
}

.db-tip[hidden] {
    display: none;
}

.db-tip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(var(--arrow, 20px) - 6px);
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--t-line);
    border-left: 1px solid var(--t-line);
    background: var(--t-surface);
    transform: rotate(45deg);
}

.db-tip.is-above::before {
    top: auto;
    bottom: -6px;
    transform: rotate(225deg);
}

@keyframes db-tip-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .db-tip { animation: none; }
}

.db-tip-title {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--t-line);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--t-ink);
}

.db-tip-sec + .db-tip-sec {
    margin-top: 8px;
}

.db-tip-label {
    margin: 0 0 1px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-faint);
}

.db-tip-text {
    margin: 0;
}

.db-tip-how .db-tip-text {
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--t-subtle);
    font-size: 12px;
}

.db-tip-read .db-tip-label,
.db-tip-use .db-tip-label {
    color: var(--t-accent-ink);
}

.db-tip-extra .db-tip-text {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--t-ink);
}

.db-tip-source .db-tip-text {
    font-size: 11.5px;
    color: var(--t-muted);
}

.db-info-bar {
    align-self: center;
    margin: 0 -8px 0 0;
}

.db-field .cx-label {
    display: inline-flex;
    align-items: center;
}

.db-rail-head {
    display: flex;
    align-items: center;
    margin: 0 8px 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--t-line);
    font-size: 12px;
    font-weight: 700;
    color: var(--t-ink);
}

.db-rail-head .db-info {
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .db-rail-head { width: 100%; }
}

/* ======================================================================
 * CUSTOMER FILE (2026-11-04) — /customer/view/{key}: the "Rezumat" and "IMI"
 * tabs (customer/_overview, _posting_declarations; CustomerOverview) and the
 * grids the CDN draws, calmed down on this page only.
 * ====================================================================== */

/* -- async panes */
.cvo-lazy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    border: 1px dashed var(--t-line-2);
    border-radius: var(--t-radius);
    font-size: 13px;
    color: var(--t-muted);
}

.cvo-lazy [hidden] {
    display: none;
}

.cvo-lazy:not([aria-busy]) .cvo-spinner {
    display: none;
}

.cvo-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--t-accent-line);
    border-top-color: var(--t-accent);
    border-radius: 50%;
    animation: fbm-spin .7s linear infinite;
}

.cvo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cvo .cx-card {
    margin: 0;
}

/* -- alerts */
.cvo-alerts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvo-alerts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    font-size: 13px;
    line-height: 1.45;
    background: var(--t-surface);
    color: var(--t-ink-2);
}

.cvo-alerts li i { margin-top: 2px; }
.cvo-alerts .is-bad { border-color: var(--t-bad-line); background: var(--t-bad-soft); color: var(--t-bad); }
.cvo-alerts .is-warn { border-color: var(--t-warn-line); background: var(--t-warn-soft); color: var(--t-warn); }

/* -- KPIs */
.cvo-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 1800px) { .cvo-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cvo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cvo-kpi {
    padding: 12px 14px;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    box-shadow: var(--t-shadow);
}

.cvo-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--t-muted);
}

.cvo-value {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--t-ink);
}

.cvo-sub {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--t-faint);
}

.cvo-delta { font-weight: 600; }
.cvo-delta.is-up { color: var(--t-ok); }
.cvo-delta.is-down { color: var(--t-bad); }

.cvo-seg {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.cvo-seg.is-good, .cvo-pill.is-good { background: var(--t-ok-soft); color: var(--t-ok); }
.cvo-seg.is-warn, .cvo-pill.is-warn { background: var(--t-warn-soft); color: var(--t-warn); }
.cvo-seg.is-bad, .cvo-pill.is-bad { background: var(--t-bad-soft); color: var(--t-bad); }
.cvo-seg.is-info, .cvo-pill.is-info { background: var(--t-info-soft); color: var(--t-info); }
.cvo-seg.is-muted, .cvo-pill.is-muted { background: var(--t-sunken); color: var(--t-muted); }

/* -- grid of cards */
.cvo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.cvo-span-2 {
    grid-column: 1 / -1;
}

/* -- revenue bars */
.cvo-bars {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    height: 150px;
    padding-bottom: 18px;
}

.cvo-bar {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
    border-bottom: 1px solid var(--t-line);
    cursor: default;
}

.cvo-bar span {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: var(--t-accent);
    opacity: .85;
}

.cvo-bar:hover span {
    opacity: 1;
}

.cvo-bar em {
    position: absolute;
    left: 0;
    bottom: -18px;
    font-size: 10px;
    font-style: normal;
    white-space: nowrap;
    color: var(--t-faint);
}

/* -- facts and small tables */
.cvo-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin: 0;
}

.cvo-facts dt {
    margin: 0 0 1px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t-faint);
}

.cvo-facts dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--t-ink);
}

.cvo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cvo-table th {
    padding: 8px 16px;
    border-bottom: 1px solid var(--t-line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--t-muted);
    white-space: nowrap;
}

.cvo-table td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--t-line);
    vertical-align: middle;
    color: var(--t-ink-2);
}

.cvo-table tr:last-child td {
    border-bottom: 0;
}

.cvo-table tbody tr:hover td {
    background: var(--t-hover);
}

.cvo-end {
    text-align: right !important;
    white-space: nowrap;
}

.cvo-muted {
    font-size: 12px;
    color: var(--t-faint);
}

.cvo-link {
    font-weight: 600;
    color: var(--t-accent-ink) !important;
    text-decoration: none !important;
}

.cvo-link:hover {
    text-decoration: underline !important;
}

.cvo-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: color-mix(in srgb, var(--pill, var(--t-muted)) 14%, transparent);
    color: var(--pill, var(--t-muted));
}

.cvo-empty {
    margin: 0;
    padding: 12px 0;
    font-size: 13px;
    text-align: center;
    color: var(--t-muted);
}

.cvo-plates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvo-plate {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--t-line-2);
    border-radius: 4px;
    background: var(--t-subtle);
    font-family: var(--t-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--t-ink);
}

/* -- the CDN grids on this page: no loud column fills, fewer redundant columns */
.cxw #list_all_booking_ferryboat td.booking_price,
.cxw #list_all_booking_ferryboat td.booking_reference_number,
.cxw #customer_list_orders td.final_order_value,
.cxw #customer_list_orders td.initial_order_value {
    background: transparent !important;
}

.cxw #list_all_booking_ferryboat td.booking_reference_number {
    font-family: var(--t-mono);
    letter-spacing: .03em;
}

/* the row number and the creation date of a ticket; the row number and the
   customer (it is this page's customer) of an order */
.cxw #list_all_booking_ferryboat th:nth-child(1),
.cxw #list_all_booking_ferryboat td:nth-child(1),
.cxw #list_all_booking_ferryboat th:nth-child(9),
.cxw #list_all_booking_ferryboat td:nth-child(9),
.cxw #customer_list_orders th:nth-child(1),
.cxw #customer_list_orders td:nth-child(1),
.cxw #customer_list_orders th:nth-child(4),
.cxw #customer_list_orders td:nth-child(4) {
    display: none;
}

.cxw .dt-buttons .btn,
.cxw .dt-buttons .dt-button {
    height: 30px;
    padding: 0 10px !important;
    border: 1px solid var(--t-line) !important;
    border-radius: 6px !important;
    background: var(--t-surface) !important;
    font-size: 12px !important;
    color: var(--t-ink-2) !important;
    box-shadow: none !important;
}

/* The tickets grid is built by the CDN with dom 'lBftipr' (customer_ferryboat.js):
   length, buttons, filter, table, info, pager and the spinner are FLAT children of
   the wrapper, without the three .row the TABLE SYSTEM lays out. A grid puts them
   back: tools on top, the table scrolling sideways on its own, info + pager below. */
.cxw #list_all_booking_ferryboat_wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    position: relative;
}
.cxw #list_all_booking_ferryboat_wrapper > .dataTables_length { grid-column: 1; padding: 10px 16px; }
.cxw #list_all_booking_ferryboat_wrapper > .dt-buttons { grid-column: 3; padding: 10px 16px; display: flex; gap: 6px; }
.cxw #list_all_booking_ferryboat_wrapper > .dataTables_filter { grid-column: 2; justify-self: end; padding: 10px 0; }
.cxw #list_all_booking_ferryboat_wrapper > table {
    grid-column: 1 / -1;
    display: block;
    overflow-x: auto;
    width: 100% !important;
    margin: 0 !important;
    border-top: 1px solid var(--t-line);
    border-bottom: 1px solid var(--t-line);
}
.cxw #list_all_booking_ferryboat_wrapper > .dataTables_info {
    grid-column: 1 / 3;
    padding: 12px 16px !important;
}
.cxw #list_all_booking_ferryboat_wrapper > .dataTables_paginate {
    grid-column: 3;
    padding: 8px 16px !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cxw #list_all_booking_ferryboat_wrapper > .dataTables_processing { position: absolute; }

.cxc-doc-order {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .cvo-grid { grid-template-columns: 1fr; }
    .cvo-bars { gap: 2px; }
}

/* A disabled action reads as unavailable, not as a broken primary button. */
.cx-btn[disabled],
.cx-btn:disabled {
    border-color: var(--t-line) !important;
    background: var(--t-subtle) !important;
    color: var(--t-faint) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
}