/* =====================================================================
   modern-ui.css: Transfer.360 UI layer (rewritten 2026-11)
   Loaded on every page after bootstrap.min.css, app.min.css (Skote) and
   custom-colors.css. Original (2,814 lines, grown by accretion) is kept in
   the session backup; this file is the same behaviour, organised:

     1. Tokens      colours, radii, spacing, shadows, motion; Bootstrap vars
     2. Base        body, focus, selection, scrollbars, icon alignment
     3. Shell       sidebar, topbar, off-canvas menu, view transitions
     4. Components  cards, buttons, forms, tables (+ phone cards), badges and
                    status pills, alerts, dropdowns, modals, navs, pagination,
                    toasts, page header, empty states, skeletons
     5. Contrast    readable shades of the brand colours (WCAG AA-ish)
     6. Pages       transfer details, form action bars, calendars, pickers
     7. Utilities   helpers, keyframes, reduced motion, print

   Rules of the layer
   - Every colour is a token (section 1).
     The app is light only (dark mode was dropped; partials/head-scripts.ejs
     declares color-scheme: light once). No dark rules live here.
   - Never change behaviour: no rule here hides, moves or disables a control
     that a page relies on. Layout fixes are scoped to small screens.
   - Prefer :where() for broad defaults so a page's own rule still wins.
   - Motion respects prefers-reduced-motion (section 7).
   Kept contracts: .skeleton + --t360-sk-*, [data-table-ready],
   partials/table-skeleton.ejs (.t360-skel*), sidebar pre-init rule
   (#side-menu .sub-menu), the hover pill (--t360-nav-pill), view-transition
   names (t360-topbar / t360-sidebar), .ph-* page header, .dt-cards.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* Surfaces and lines */
  --t360-bg:           #f5f7fa;
  --t360-surface:      #ffffff;
  --t360-surface-2:    #f8fafc;
  --t360-surface-3:    #f1f4f8;
  --t360-line:         #e4e9f0;
  --t360-line-strong:  #cfd7e2;
  /* Text */
  --t360-ink:          #172b4d;
  --t360-ink-2:        #44546f;
  --t360-ink-3:        #5f6b7a;   /* muted, still >= 4.5:1 on white */
  /* Brand (from custom-colors.css) */
  --t360-brand:        var(--color-primary, #0A2540);
  --t360-brand-dark:   var(--color-primary-dark, #071B30);
  --t360-accent:       var(--color-secondary, #0091AD);
  --t360-brand-tint:   rgba(10, 37, 64, 0.08);
  --t360-accent-tint:  rgba(0, 145, 173, 0.10);
  /* Semantic: ink = text/icon on white or on its tint (>= 4.5:1),
     solid = fill that carries white text, tint = soft background */
  --mu-ink-success:  #1F7A50;  --mu-solid-success: #1F7A50;  --t360-tint-success: rgba(54, 179, 126, 0.12);
  --mu-ink-info:     #006F82;  --mu-solid-info:    #007A92;  --t360-tint-info:    rgba(0, 145, 173, 0.12);
  --mu-ink-warning:  #8A5A00;                                --t360-tint-warning: rgba(255, 171, 0, 0.16);
  --mu-ink-danger:   #C62828;  --mu-solid-danger:  #D32F2F;  --t360-tint-danger:  rgba(255, 86, 48, 0.12);
  --t360-ink-neutral: #44546f;                               --t360-tint-neutral: #eef1f5;
  /* Transfer status pills: one palette for every page */
  --t360-st-pending-bg:     var(--t360-tint-neutral);  --t360-st-pending-ink:     #44546f;
  --t360-st-assigned-bg:    var(--t360-tint-info);     --t360-st-assigned-ink:    var(--mu-ink-info);
  --t360-st-progress-bg:    var(--t360-tint-warning);  --t360-st-progress-ink:    var(--mu-ink-warning);
  --t360-st-completed-bg:   var(--t360-tint-success);  --t360-st-completed-ink:   var(--mu-ink-success);
  --t360-st-cancelled-bg:   var(--t360-tint-danger);   --t360-st-cancelled-ink:   var(--mu-ink-danger);
  /* Shape */
  --t360-r-sm: 8px;
  --t360-r:    10px;
  --t360-r-lg: 14px;
  --t360-r-pill: 999px;
  /* Elevation */
  --t360-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --t360-shadow-2: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --t360-shadow-pop: 0 16px 40px -12px rgba(15, 23, 42, 0.25), 0 2px 6px rgba(15, 23, 42, 0.06);
  /* Focus */
  --t360-focus-ring: 0 0 0 3px rgba(0, 145, 173, 0.28);
  --t360-focus-color: #0091AD;
  /* Sizes */
  --t360-control-h: 40px;     /* fields + buttons, desktop */
  --t360-tap: 44px;           /* phone tap target */
  --t360-gutter-phone: 16px;
  /* Motion */
  --t360-fast: 0.15s ease;
  --t360-ease: cubic-bezier(.2, .7, .2, 1);
  /* Skeleton (the ONE shimmer of the app) */
  --t360-sk-base: #f0f0f0;
  --t360-sk-hi:   #e0e0e0;
}

/* Bootstrap variables. custom-colors.css pointed some at the wrong shades
   (--bs-primary-bg-subtle was navy, --bs-secondary-rgb was #00B8D9). */
:root,
[data-bs-theme=light] {
  --bs-primary-bg-subtle: #E6EAF0;
  --bs-primary-border-subtle: #C3CCD9;
  --bs-primary-text-emphasis: #0A2540;
  --bs-secondary-rgb: 0, 145, 173;
  --bs-secondary-bg-subtle: #E0F4F8;
  --bs-secondary-border-subtle: #B3E1EA;
  --bs-secondary-text-emphasis: #006F82;
  --bs-border-radius: var(--t360-r);
  --bs-border-radius-sm: var(--t360-r-sm);
  --bs-border-radius-lg: var(--t360-r-lg);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
::selection { background: rgba(0, 145, 173, 0.2); color: inherit; }

/* Numbers line up in tables, stats and money */
.table td, .table th, .ph-stat-value, .text-end, .num, .tnum { font-variant-numeric: tabular-nums; }

/* One focus style for keyboard users (mouse clicks show none) */
:where(a, button, .btn, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--t360-focus-color);
  outline-offset: 2px;
}

/* Scrollbars (WebKit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--t360-surface-3); border-radius: var(--t360-r-pill); }
::-webkit-scrollbar-thumb { background: #c1c9d2; border-radius: var(--t360-r-pill); }
::-webkit-scrollbar-thumb:hover { background: #a8b0b9; }

/* Icon + text alignment. Boxicons glyphs sit on the baseline, so icons rode
   ~2px high next to text; this centres them on the x-height. */
:where(i.bx, i[class^="bx-"], i[class*=" bx-"]) { vertical-align: -0.15em; }
.card-title > i, .card-header h4 > i, .card-header h5 > i, .card-header h6 > i,
.modal-title > i, .page-title-box h4 > i,
.nav-link > i, .badge > i, .list-group-item > i { line-height: 1; vertical-align: -0.15em; }

/* Long e-mails / URLs / tokens break instead of widening the layout */
.card-body, .modal-body, .dropdown-menu { overflow-wrap: break-word; }
a[href^="mailto:"], a[href^="tel:"],
.card-body a[href^="http"]:not(.btn) { overflow-wrap: anywhere; }

/* Media never wider than its column */
.page-content img, .modal-body img { max-width: 100%; }
.page-content iframe, .page-content video, .modal-body iframe, .modal-body video { max-width: 100%; }
.page-content pre { max-width: 100%; overflow-x: auto; }

/* =====================================================================
   3. SHELL
   ===================================================================== */

/* ---- 3.1 Content area ---------------------------------------------- */
.main-content { margin-left: 250px; margin-right: 0; }

/* Phones: 16px page gutters (Skote had 18px + 12px = 30px each side) */
@media (max-width: 575.98px) {
  .page-content { padding-left: 4px; padding-right: 4px; }
  .page-content > .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* ---- 3.2 Sidebar ---------------------------------------------------- */
.navbar-brand-box { background-color: var(--t360-surface); }
.vertical-menu {
  box-shadow: var(--t360-shadow-2);
  border-right: 1px solid var(--t360-line);
  background: var(--t360-surface);
}
.vertical-menu [data-simplebar] { padding-top: 8px; }

#sidebar-menu .menu-title {
  padding: 8px 16px 6px !important;
  margin-top: 8px !important;
  font-size: 0.65rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7a90 !important;
  font-weight: 600;
}
#sidebar-menu ul.metismenu { padding: 0 6px; }
#sidebar-menu ul li { margin: -5px 0; }

/* Rows. The hover / active highlight is a pill painted by ::before, inset
   4px from the row's top and bottom: rows overlap by 5px (li margin -5px),
   so a full-height background merged with the neighbour's. The link (hit
   area) keeps its full height. */
#sidebar-menu ul li a {
  position: relative;
  isolation: isolate;
  --t360-nav-pill: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0 6px;
  padding: 9px 12px;
  border-radius: var(--t360-r-sm);
  font-size: 0.875rem;
  color: #3d4a5c;
  transition: color var(--t360-fast);
}
#sidebar-menu ul li a::before {
  content: "";
  position: absolute;
  inset: 4px 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--t360-nav-pill);
  pointer-events: none;
  transition: background-color var(--t360-fast), box-shadow var(--t360-fast);
}
#sidebar-menu ul li a:hover { --t360-nav-pill: var(--t360-accent-tint); color: var(--t360-accent); }
#sidebar-menu ul li a:focus-visible { outline: none; --t360-nav-pill: var(--t360-accent-tint); }
#sidebar-menu ul li a:focus-visible::before { box-shadow: 0 0 0 2px rgba(0, 145, 173, 0.45); }
#sidebar-menu ul li a.mm-active,
#sidebar-menu ul li a.active {
  --t360-nav-pill: linear-gradient(135deg, rgba(0, 145, 173, 0.12) 0%, rgba(10, 37, 64, 0.08) 100%);
  color: var(--t360-brand);
  font-weight: 500;
}

/* Icons from different sets (boxicons, mdi, feather SVG, the Hermes image)
   share one 22px box, so labels form one column. */
#sidebar-menu ul li a > i,
#sidebar-menu ul li a > img,
#sidebar-menu ul li a > svg {
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  margin: 0 !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  color: #66758a;
  transition: color var(--t360-fast);
}
#sidebar-menu ul li a > i { font-size: 1.15rem; }
#sidebar-menu ul li a > svg { padding: 2px; }
#sidebar-menu ul li a > img { object-fit: contain; padding: 2px; }
#sidebar-menu ul li a:hover > i { color: var(--t360-accent); }
#sidebar-menu ul li a.mm-active > i,
#sidebar-menu ul li a.active > i { color: var(--t360-accent); }
#sidebar-menu ul li a > span:not(.badge) { flex: 1 1 auto; min-width: 0; }

/* Badges and chevrons: right-aligned, vertically centred, never "0" */
#sidebar-menu ul li a .badge {
  float: none !important;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  align-self: center;
  padding: 0.2em 0.5em;
  line-height: 1.2;
  font-size: 0.68rem;
}
#sidebar-menu ul li a > span:not(.badge) + .badge { margin-left: 8px; }
#sidebar-menu .badge:empty { display: none !important; }
#sidebar-menu .has-arrow::after {
  float: none;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  align-self: center;
  line-height: 1;
}

/* Submenus: one indent; the icon sits under the parent's label (6px margin
   + 44px padding = parent's 6px + 12px + 22px icon + 10px gap). */
#sidebar-menu ul li ul.sub-menu { padding: 2px 0; }
#sidebar-menu ul li ul.sub-menu li a {
  justify-content: flex-start;
  text-align: left;
  width: auto;
  min-height: 36px;
  margin: 0 6px;
  padding: 7px 12px 7px 44px;
  gap: 10px;
  font-size: 0.82rem;
}
#sidebar-menu ul li ul.sub-menu li a > i { font-size: 1rem; }
#sidebar-menu ul li ul.sub-menu li a:not(:has(> i, > img, > svg)) { padding-left: 76px; }

#sidebar-menu hr { margin: 10px 16px; border-color: var(--t360-line); opacity: 0.6; }

/* Mobile-apps link at the bottom of the menu: compact */
.vertical-menu hr + div,
#sidebar-menu + hr + div { padding: 8px 0 !important; }
.vertical-menu hr + div a, #sidebar-menu ~ hr ~ div a { font-size: 0.8rem !important; }
.vertical-menu hr + div i, #sidebar-menu ~ hr ~ div i { font-size: 16px !important; }
.vertical-menu hr + div span, #sidebar-menu ~ hr ~ div span { font-size: 0.75rem !important; margin-top: 2px !important; }

/* Pre-init: keep closed groups closed from the first paint. The server
   marks only the active group .mm-show; metisMenu adds .mm-collapse to the
   others at the end of the page, so until then every group flashed open. */
#side-menu .sub-menu:not(.mm-show):not(.mm-collapsing) { display: none; }

/* The Inbox count sits over the row's right end, out of the flow, so its
   arrival never re-wraps the label and pushes the menu down. */
#sidebar-menu ul li a:has(> #inbox-unread-badge) { position: relative; }
#sidebar-menu ul li a > #inbox-unread-badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
#inbox-unread-badge.t360-badge-wait { visibility: hidden; opacity: 0; }
#inbox-unread-badge.is-on { animation: t360-fade-in 150ms ease-out; }

/* ---- 3.3 Collapsed (70px) sidebar, desktop only ---------------------
   Below 993px body.sidebar-enable means the off-canvas menu is OPEN. */
html[data-sidebar-size=sm] .main-content,
body[data-sidebar-size=sm] .main-content { margin-left: 70px; margin-right: 0; }
html[data-sidebar-size=sm] .vertical-menu,
body[data-sidebar-size=sm] .vertical-menu,
html[data-sidebar-size=sm] .navbar-brand-box,
body[data-sidebar-size=sm] .navbar-brand-box { width: 70px !important; }
html[data-sidebar-size=sm] .logo span.logo-lg,
body[data-sidebar-size=sm] .logo span.logo-lg { display: none; }
html[data-sidebar-size=sm] .logo span.logo-sm,
body[data-sidebar-size=sm] .logo span.logo-sm { display: block; }

@media (min-width: 993px) {
  body.sidebar-enable .vertical-menu #sidebar-menu > ul > li > a,
  html.sidebar-collapsed-early .vertical-menu #sidebar-menu > ul > li > a { justify-content: center; padding: 10px; }
  body.sidebar-enable .vertical-menu #sidebar-menu > ul > li > a span,
  body.sidebar-enable .vertical-menu #sidebar-menu .menu-title,
  body.sidebar-enable .vertical-menu hr,
  body.sidebar-enable .vertical-menu hr + div,
  html.sidebar-collapsed-early .vertical-menu #sidebar-menu > ul > li > a span,
  html.sidebar-collapsed-early .vertical-menu #sidebar-menu .menu-title,
  html.sidebar-collapsed-early .vertical-menu hr,
  html.sidebar-collapsed-early .vertical-menu hr + div { display: none; }
  body.sidebar-enable .vertical-menu #sidebar-menu > ul > li > a i,
  html.sidebar-collapsed-early .vertical-menu #sidebar-menu > ul > li > a i { margin: 0; font-size: 1.2rem; }

  /* the hovered top-level row and its fly-out are left-aligned */
  body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a { justify-content: flex-start; padding-left: 12px; }
  body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul { padding: 6px 0; border-radius: 0 8px 8px 0; }
  body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    justify-content: flex-start;
    width: auto;
    margin: 0 6px;
    padding: 8px 12px;
    gap: 10px;
  }
  body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul a:not(:has(> i, > img, > svg)) { padding-left: 44px; }
}

/* ---- 3.4 Off-canvas sidebar (<= 992px, open) ------------------------
   A fixed panel from under the topbar that scrolls natively. SimpleBar's
   wrappers are flattened (they left iOS without a working scroller).
   partials/footer.ejs closes it on outside tap / Escape and locks the page. */
@media (max-width: 992px) {
  body.sidebar-enable .vertical-menu {
    position: fixed !important;
    top: 70px;
    bottom: auto;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.25);
  }
  body.sidebar-enable::after {
    content: '';
    position: fixed;
    inset: 70px 0 0 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000; /* .vertical-menu is 1001, #page-topbar 1054 */
  }
  body.sidebar-enable .vertical-menu > [data-simplebar] { height: auto !important; }
  body.sidebar-enable .vertical-menu .simplebar-wrapper { height: auto !important; overflow: visible !important; }
  body.sidebar-enable .vertical-menu .simplebar-mask,
  body.sidebar-enable .vertical-menu .simplebar-offset { position: static !important; overflow: visible !important; inset: auto !important; }
  body.sidebar-enable .vertical-menu .simplebar-content-wrapper { height: auto !important; max-height: none !important; overflow: visible !important; }
  body.sidebar-enable .vertical-menu .simplebar-placeholder,
  body.sidebar-enable .vertical-menu .simplebar-track,
  body.sidebar-enable .vertical-menu .simplebar-height-auto-observer-wrapper { display: none !important; }
  body.sidebar-enable .vertical-menu #sidebar-menu { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  body.sidebar-scroll-locked { overflow: hidden; }

  /* bigger rows in the open phone menu */
  body.sidebar-enable .vertical-menu #sidebar-menu ul li ul.sub-menu li a { min-height: 44px; }
  body.sidebar-enable .vertical-menu #sidebar-menu ul.sub-menu > li > a {
    justify-content: flex-start;
    padding: 9px 12px 9px 44px !important;
    min-height: 44px;
  }
  body.sidebar-enable .vertical-menu #sidebar-menu ul.sub-menu > li > a:not(:has(> i, > img, > svg)) { padding-left: 76px !important; }
  body.sidebar-enable .vertical-menu #sidebar-menu ul.sub-menu > li > a span:not(.badge) { display: inline-block !important; flex: 1 1 auto; min-width: 0; }
}

/* ---- 3.5 Topbar (admin, hotel and partner headers) ------------------
   Every icon button is the same 44x44 tap box with the same rounded
   hover / open background. */
.navbar-header {
  box-shadow: var(--t360-shadow-1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#page-topbar .navbar-header > .d-flex { align-items: center; height: 100%; }
#page-topbar .navbar-header > .d-flex:last-child { gap: 4px; }
#page-topbar .navbar-header > .d-flex:last-child > .ms-1 { margin-left: 0 !important; }
#page-topbar .header-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-width: 44px;
  padding: 0 10px;
  margin: 0;
  border: 0 !important;
  border-radius: 12px;
  line-height: 1;
  color: #5b6475;
  background: transparent;
  box-shadow: none !important;
  transition: background-color var(--t360-fast), color var(--t360-fast);
}
#page-topbar .header-item > i,
#page-topbar .header-item > i::before { font-size: 22px !important; line-height: 1 !important; vertical-align: 0; }
#page-topbar .header-item > i.mdi-chevron-down,
#page-topbar .header-item > i.mdi-chevron-down::before { font-size: 16px !important; }
#page-topbar .header-item > svg { width: 22px; height: 22px; flex: 0 0 22px; }
#page-topbar #vertical-menu-btn { width: 44px; padding: 0; }
#page-topbar #vertical-menu-btn > i,
#page-topbar #vertical-menu-btn > i::before { font-size: 20px !important; width: auto; }
#page-topbar .header-item:focus { box-shadow: none !important; }
#page-topbar .header-item:focus-visible { outline: 2px solid var(--t360-accent); outline-offset: 1px; }
@media (hover: hover) {
  #page-topbar .header-item:hover { background: rgba(15, 23, 42, 0.06); color: var(--t360-brand); }
}
#page-topbar .header-item:active,
#page-topbar .header-item.show,
#page-topbar .navbar-header .dropdown .show.header-item { background: var(--t360-accent-tint); color: var(--t360-accent); }
/* AI cost pill: text, not an icon; same height, natural width */
#page-topbar #ai-cost-indicator.header-item { padding: 0 10px; line-height: 1.1; }
/* Bell badges on the 44px box's top-right corner */
#page-topbar .tb-bell-btn .tb-badge,
#page-topbar .hn-bell-btn .hn-badge,
#page-topbar .noti-icon .badge {
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  line-height: 18px;
  font-size: 10px;
  border: 2px solid #fff;
  box-sizing: content-box;
}
/* Bell badge without jumps: rendered empty and invisible (never "0"),
   fades in once t360-bell.js knows the count (.is-on). */
#page-topbar .tb-bell-btn .tb-badge,
.tb-bell-btn .tb-badge {
  display: inline-block !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease-out, visibility 0s linear 150ms;
}
#page-topbar .tb-bell-btn .tb-badge.is-on,
.tb-bell-btn .tb-badge.is-on { opacity: 1; visibility: visible; transition: opacity 150ms ease-out; }

/* AI cost pill: its box is there from the first paint, shimmering until
   head-nav.ejs swaps in the value. */
#ai-cost-indicator.is-loading .ai-sk {
  color: transparent !important;
  background: linear-gradient(90deg, var(--t360-sk-base) 25%, var(--t360-sk-hi) 50%, var(--t360-sk-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}
#ai-cost-indicator.is-loading .ai-sk * { color: transparent !important; }
#ai-cost-indicator .ai-sk { transition: color 150ms ease-out; }

.header-item { border-radius: var(--t360-r); }

@media (max-width: 991.98px) {
  #page-topbar .navbar-brand-box {
    border-right: 0;
    box-shadow: none;
    padding: 0 8px 0 12px;
    display: flex;
    align-items: center;
    height: 70px;
  }
  #page-topbar .navbar-header > .d-flex:first-child { gap: 4px; }
  #page-topbar .navbar-header > .d-flex:first-child > .ms-1 { margin-left: 0 !important; }
  #page-topbar .navbar-header { padding-right: 12px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-header .gs-box { width: 240px; }
}
@media (max-width: 600px) {
  /* quick-actions menu: its inline 420px ran off a 375px screen */
  .navbar-header .hn-quick-menu { width: auto !important; }
}
@media (max-width: 380px) {
  #page-topbar .navbar-brand-box { display: none; }
  #page-topbar .navbar-header > .d-flex:first-child { padding-left: 8px; }
}

/* Header dropdowns: pinned under the fixed header (fix for a 72px jump) */
.navbar-header .dropdown-menu { top: 100% !important; margin-top: 2px !important; transform: none !important; }
#page-topbar .dropdown-menu { position: absolute !important; inset: auto !important; top: 100% !important; transform: none !important; }
#page-topbar .dropdown-menu.dropdown-menu-start { left: 0 !important; right: auto !important; }
#page-topbar .dropdown-menu.dropdown-menu-end { left: auto !important; right: 0 !important; }

/* ---- 3.6 Cross-document view transitions ---------------------------
   Page changes cross-fade the content (~150 ms); topbar and sidebar keep
   unique names and swap without animation. Never name a repeated element.
   The at-rule exists only for no-preference, so reduced motion = off. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
#page-topbar { view-transition-name: t360-topbar; }
body:not([data-layout="horizontal"]) .vertical-menu { view-transition-name: t360-sidebar; }
::view-transition-group(t360-topbar),
::view-transition-group(t360-sidebar),
::view-transition-new(t360-topbar),
::view-transition-new(t360-sidebar) { animation: none; }
::view-transition-old(t360-topbar),
::view-transition-old(t360-sidebar) { display: none; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 150ms; animation-timing-function: ease-out; }

/* =====================================================================
   4. COMPONENTS
   ===================================================================== */

/* ---- 4.1 Cards ------------------------------------------------------
   Flat surface with a hairline border. (The old frosted-glass card used
   backdrop-filter, which trapped modals placed inside a card and cost a
   repaint on every scroll.) */
.card {
  border: 1px solid var(--t360-line);
  border-radius: var(--t360-r-lg);
  box-shadow: var(--t360-shadow-1);
  overflow: hidden;
  background: var(--t360-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--t360-line);
  padding: 1rem 1.25rem;
  font-weight: 600;
}
.card-body { padding: 1.25rem; }
.card-footer {
  background: var(--t360-surface-2);
  border-top: 1px solid var(--t360-line);
  padding: 0.875rem 1.25rem;
}
.card-title { font-weight: 600; letter-spacing: -0.01em; color: var(--t360-ink); }
@media (min-width: 1200px) {
  .card-body { padding: 1.5rem; }
  .card-header { padding: 1.125rem 1.5rem; }
}
@media (max-width: 575.98px) {
  .card { border-radius: var(--t360-r); }
  .card-body { padding: 1rem; }
  .card-header { padding: 0.875rem 1rem; }
  .card-footer { padding: 0.75rem 1rem; }
}
/* A modal left inside a filtered ancestor gets position:fixed relative to
   it (clipped, unscrollable): drop the filter while the modal is open. */
.card:has(.modal.show),
.navbar-header:has(.modal.show) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
}

/* ---- 4.2 Buttons ----------------------------------------------------
   Flat, one height (40px), visible borders on outline buttons (the old
   `border:none` removed them), no hover jump, no ripple. Size comes from
   Bootstrap's own variables so .btn-sm / .btn-lg keep working. */
.btn {
  --bs-btn-padding-y: 0.4375rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--t360-r);
  position: relative;
  transition: background-color var(--t360-fast), border-color var(--t360-fast), color var(--t360-fast), box-shadow var(--t360-fast);
}
.btn-sm {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-border-radius: var(--t360-r-sm);
}
.btn-lg {
  --bs-btn-padding-y: 0.65rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 1.05rem;
  --bs-btn-border-radius: var(--t360-r);
}
.btn:focus-visible { box-shadow: var(--t360-focus-ring); }

/* Primary = the ONE main action of an area: solid navy */
.btn-primary {
  --bs-btn-bg: var(--t360-brand);
  --bs-btn-border-color: var(--t360-brand);
  --bs-btn-hover-bg: var(--t360-brand-dark);
  --bs-btn-hover-border-color: var(--t360-brand-dark);
  --bs-btn-active-bg: var(--t360-brand-dark);
  --bs-btn-active-border-color: var(--t360-brand-dark);
  --bs-btn-disabled-bg: var(--t360-brand);
  --bs-btn-disabled-border-color: var(--t360-brand);
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.2);
}

/* Secondary = a quiet, neutral button (Cancel, Back, Clear, Close), so the
   area's single primary button is the one that stands out. */
.btn-secondary {
  --bs-btn-color: var(--t360-ink-2); --bs-btn-bg: var(--t360-surface); --bs-btn-border-color: var(--t360-line-strong);
  --bs-btn-hover-color: var(--t360-ink); --bs-btn-hover-bg: var(--t360-surface-3); --bs-btn-hover-border-color: var(--t360-line-strong);
  --bs-btn-active-color: var(--t360-ink); --bs-btn-active-bg: #e6ebf1; --bs-btn-active-border-color: var(--t360-line-strong);
  --bs-btn-disabled-color: var(--t360-ink-3); --bs-btn-disabled-bg: var(--t360-surface-3); --bs-btn-disabled-border-color: var(--t360-line);
}

/* Solid colour buttons that carry white text: darker fills (>= 4.5:1).
   The old gradients started on the light brand shade (2.7-3.7:1). */
.btn-info {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--mu-solid-info); --bs-btn-border-color: var(--mu-solid-info);
  --bs-btn-hover-bg: #006F82; --bs-btn-hover-border-color: #006F82;
  --bs-btn-active-bg: #006F82; --bs-btn-active-border-color: #006F82;
  --bs-btn-disabled-bg: var(--mu-solid-info); --bs-btn-disabled-border-color: var(--mu-solid-info);
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--mu-solid-success); --bs-btn-border-color: var(--mu-solid-success);
  --bs-btn-hover-bg: #1B6B46; --bs-btn-hover-border-color: #1B6B46;
  --bs-btn-active-bg: #1B6B46; --bs-btn-active-border-color: #1B6B46;
  --bs-btn-disabled-bg: var(--mu-solid-success); --bs-btn-disabled-border-color: var(--mu-solid-success);
}
.btn-danger {
  --bs-btn-bg: var(--mu-solid-danger);
  --bs-btn-border-color: var(--mu-solid-danger);
  --bs-btn-hover-bg: var(--color-danger-dark, #C62828);
  --bs-btn-hover-border-color: var(--color-danger-dark, #C62828);
  --bs-btn-disabled-bg: var(--mu-solid-danger);
}
.btn-warning { --bs-btn-color: var(--color-dark, #172B4D); --bs-btn-hover-color: var(--color-dark, #172B4D); color: var(--color-dark, #172B4D); }
.btn-light {
  --bs-btn-bg: var(--t360-surface-3); --bs-btn-border-color: var(--t360-line);
  --bs-btn-hover-bg: #e6ebf1; --bs-btn-hover-border-color: var(--t360-line-strong);
  --bs-btn-color: var(--t360-ink-2); --bs-btn-hover-color: var(--t360-ink);
}

/* Outline buttons: 1px border, readable text, fill on hover */
.btn-outline-primary {
  --bs-btn-color: var(--t360-brand); --bs-btn-border-color: var(--t360-line-strong);
  --bs-btn-hover-color: var(--t360-brand); --bs-btn-hover-bg: var(--t360-brand-tint); --bs-btn-hover-border-color: var(--t360-brand);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--t360-brand); --bs-btn-active-border-color: var(--t360-brand);
}
.btn-outline-secondary {
  --bs-btn-color: var(--t360-ink-2); --bs-btn-border-color: var(--t360-line-strong);
  --bs-btn-hover-color: var(--t360-ink); --bs-btn-hover-bg: var(--t360-surface-3); --bs-btn-hover-border-color: var(--t360-line-strong);
  --bs-btn-active-color: var(--t360-ink); --bs-btn-active-bg: #e6ebf1; --bs-btn-active-border-color: var(--t360-line-strong);
}
.btn-outline-success {
  --bs-btn-color: var(--mu-ink-success); --bs-btn-border-color: var(--mu-ink-success);
  --bs-btn-hover-bg: var(--mu-solid-success); --bs-btn-hover-border-color: var(--mu-solid-success); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mu-solid-success); --bs-btn-active-border-color: var(--mu-solid-success); --bs-btn-active-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--mu-ink-info); --bs-btn-border-color: var(--mu-ink-info);
  --bs-btn-hover-bg: var(--mu-solid-info); --bs-btn-hover-border-color: var(--mu-solid-info); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mu-solid-info); --bs-btn-active-border-color: var(--mu-solid-info); --bs-btn-active-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: var(--mu-ink-warning); --bs-btn-border-color: var(--color-warning, #FFAB00);
  --bs-btn-hover-bg: var(--color-warning, #FFAB00); --bs-btn-hover-border-color: var(--color-warning, #FFAB00); --bs-btn-hover-color: var(--color-dark, #172B4D);
  --bs-btn-active-bg: var(--color-warning, #FFAB00); --bs-btn-active-border-color: var(--color-warning, #FFAB00); --bs-btn-active-color: var(--color-dark, #172B4D);
}
.btn-outline-danger {
  --bs-btn-color: var(--mu-ink-danger); --bs-btn-border-color: var(--mu-ink-danger);
  --bs-btn-hover-bg: var(--mu-solid-danger); --bs-btn-hover-border-color: var(--mu-solid-danger); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--mu-solid-danger); --bs-btn-active-border-color: var(--mu-solid-danger); --bs-btn-active-color: #fff;
}

/* Soft buttons (theme .btn-soft-*): readable ink on a tint, solid on hover */
.btn-soft-primary   { color: var(--t360-brand); background-color: var(--t360-brand-tint); border-color: transparent; }
.btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active { color: #fff; background-color: var(--t360-brand); }
.btn-soft-secondary,
.btn-soft-info    { color: var(--mu-ink-info); background-color: rgba(0, 145, 173, 0.1); }
.btn-soft-success { color: var(--mu-ink-success); background-color: rgba(54, 179, 126, 0.1); }
.btn-soft-warning { color: var(--mu-ink-warning); background-color: rgba(255, 171, 0, 0.15); }
.btn-soft-danger  { color: var(--mu-ink-danger); background-color: rgba(255, 86, 48, 0.1); }
.btn-soft-secondary:hover, .btn-soft-secondary:focus, .btn-soft-secondary:active,
.btn-soft-info:hover, .btn-soft-info:focus, .btn-soft-info:active { color: #fff; background-color: var(--mu-solid-info); }
.btn-soft-success:hover, .btn-soft-success:focus, .btn-soft-success:active { color: #fff; background-color: var(--mu-solid-success); }
.btn-soft-danger:hover, .btn-soft-danger:focus, .btn-soft-danger:active { color: #fff; background-color: var(--mu-solid-danger); }
.btn-soft-warning:hover, .btn-soft-warning:focus, .btn-soft-warning:active { color: var(--color-dark, #172B4D); background-color: var(--color-warning, #FFAB00); }

/* Buttons with an icon: icon and label centred on one axis. :where() keeps
   this at .btn specificity, so a page rule that hides a button still wins. */
.btn:where(:has(> i, > svg)):where(:not(.btn-close, .header-item)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.35em;
}
.btn.w-100:where(:has(> i, > svg)) { display: flex; }
.btn.text-start:where(:has(> i, > svg)) { justify-content: flex-start; }
.btn.text-end:where(:has(> i, > svg)) { justify-content: flex-end; }
.btn > i, .btn > svg { flex-shrink: 0; line-height: 1; }
.btn > svg.feather { width: 1.15em; height: 1.15em; }

/* ---- 4.3 Forms ------------------------------------------------------
   Clear fields: white, 1px border, 40px tall, a visible focus ring, labels
   in a readable weight. */
.form-label, .col-form-label { font-weight: 500; color: var(--t360-ink-2); margin-bottom: 0.375rem; }
.form-text { color: var(--t360-ink-3); }
.form-control,
.form-select {
  border: 1px solid var(--t360-line-strong);
  border-radius: var(--t360-r);
  padding: 0.5rem 0.875rem;
  background-color: var(--t360-surface);
  transition: border-color var(--t360-fast), box-shadow var(--t360-fast);
}
.form-select { padding-right: 2.25rem; }
:where(input.form-control:not([type="file"]):not([type="color"]):not([type="range"]), .form-select):not(.form-control-sm):not(.form-select-sm):not(.form-control-lg):not(.input-group-sm > *) { min-height: var(--t360-control-h); }
.form-control-sm, .form-select-sm { border-radius: var(--t360-r-sm); }
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: #b4bfcd; }
.form-control:focus,
.form-select:focus {
  border-color: var(--t360-accent);
  box-shadow: var(--t360-focus-ring);
  background-color: var(--t360-surface);
}
.form-control:disabled, .form-select:disabled { background-color: var(--t360-surface-3); }
.form-control::placeholder { color: #6b7280; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--t360-accent); }

/* Input groups: joined, same border colour on both parts */
.input-group-text {
  border: 1px solid var(--t360-line-strong);
  background: var(--t360-surface-3);
  color: var(--t360-ink-2);
  border-radius: var(--t360-r);
}

/* Checkboxes, radios, switches: bigger and clearer */
.form-check-input {
  width: 1.15em;
  height: 1.15em;
  border: 1.5px solid #b4bfcd;
  transition: background-color var(--t360-fast), border-color var(--t360-fast);
}
.form-check-input[type="checkbox"] { border-radius: 4px; }
.form-check-input:checked { background-color: var(--t360-accent); border-color: var(--t360-accent); }
.form-check-input:focus { box-shadow: var(--t360-focus-ring); border-color: var(--t360-accent); }
.form-switch .form-check-input { border-radius: var(--t360-r-pill); width: 2.5em; height: 1.4em; }
/* the wider switch keeps a gap before its label */
.form-switch { padding-left: 3.1em; }
.form-switch .form-check-input { margin-left: -3.1em; margin-top: 0.05em; }
.form-check-label { cursor: pointer; }

/* Validation messages: readable */
.invalid-feedback { color: var(--mu-ink-danger); font-weight: 500; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--mu-ink-danger); }

/* iOS Safari zooms into any focused field under 16px. Touch only, so the
   desktop density is kept. */
@media (pointer: coarse) {
  input.form-control:not([type="range"]):not([type="color"]):not([type="file"]),
  textarea.form-control,
  select.form-select,
  .form-control-sm,
  .form-select-sm,
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select,
  .choices__input,
  .select2-search__field,
  .pm-input,
  .gs-input { font-size: 16px !important; }
}

/* ---- 4.4 Tables -----------------------------------------------------
   Same cell metrics as before (the skeleton heights are measured against
   them); calmer header, row hover, numbers aligned. */
.table { border-collapse: separate; border-spacing: 0; }
.table thead th {
  background: var(--t360-surface-2);
  border: none;
  border-bottom: 1px solid var(--t360-line);
  padding: 1rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t360-ink-3);
}
.table thead th:first-child { border-radius: var(--t360-r) 0 0 0; }
.table thead th:last-child { border-radius: 0 var(--t360-r) 0 0; }
.table tbody tr { transition: background-color var(--t360-fast); }
.table tbody tr:hover { background-color: rgba(0, 145, 173, 0.04); }
.table tbody td { padding: 1rem; vertical-align: middle; border-bottom: 1px solid #eef1f4; }
.table-bordered { border: none; border-radius: var(--t360-r-lg); overflow: hidden; box-shadow: var(--t360-shadow-1); }
.table-bordered th, .table-bordered td { border: none; border-bottom: 1px solid #eef1f4; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(15, 23, 42, 0.02); }
/* Action cells with several buttons: one line, not a tall stack */
.table > tbody > tr > td:has(> .btn + .btn),
.table > tbody > tr > td:has(> .btn-group) { white-space: nowrap; }

/* Friendly "no data" row (DataTables): roomy, muted, with an icon */
table.dataTable td.dataTables_empty,
.table td.dataTables_empty {
  padding: 2.5rem 1rem !important;
  text-align: center;
  color: var(--t360-ink-3);
  font-size: 0.95rem;
}
table.dataTable td.dataTables_empty::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--t360-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* DataTables controls */
.dataTables_wrapper { padding: 0; max-width: 100%; }
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--t360-r);
  border: 1px solid var(--t360-line-strong);
  padding: 0.45rem 0.875rem;
  min-height: 38px;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--t360-accent); box-shadow: var(--t360-focus-ring); outline: 0; }
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--t360-r-sm);
  border: 1px solid var(--t360-line-strong);
  padding: 0.3rem 2rem 0.3rem 0.5rem;
}
.dataTables_wrapper .dt-buttons.btn-group { flex-wrap: wrap; }
.dataTables_wrapper .dataTables_info { color: var(--t360-ink-3); }
@media (max-width: 767.98px) {
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate,
  div.dataTables_wrapper div.dt-buttons { float: none; display: block; text-align: center; }
  div.dataTables_wrapper div.dataTables_length { margin-bottom: 0.5rem; }
  div.dataTables_wrapper div.dataTables_filter label { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-bottom: 0.5rem; }
  div.dataTables_wrapper div.dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0; margin-left: 0; }
  div.dataTables_wrapper div.dataTables_info { white-space: normal; padding-bottom: 0.25rem; }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination { flex-wrap: wrap; justify-content: center !important; row-gap: 4px; margin: 0.25rem 0 0; }
  div.dataTables_wrapper div.dt-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0.5rem 0; }
  div.dataTables_wrapper .top::after,
  div.dataTables_wrapper .bottom::after { content: ''; display: table; clear: both; }
}
/* Tables without the Responsive extension: scroll the table, not the page */
.dataTables_wrapper > .row > [class*="col-"]:has(> table.dataTable:not(.dtr-inline):not(.dtr-column)) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Responsive child rows ("+" details): wrap long values */
table.dataTable > tbody > tr.child > td { white-space: normal; }
table.dataTable > tbody > tr.child ul.dtr-details { display: block; width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li { display: flex; flex-wrap: wrap; gap: 2px 8px; }
table.dataTable > tbody > tr.child span.dtr-data { min-width: 0; overflow-wrap: anywhere; }

/* ---- 4.5 Phone cards for tables (.dt-cards) ------------------------
   Opt-in: table.dt-cards + data-card roles on the <th> (assets/js/
   dt-cards.js copies role + header label onto each cell and toggles
   tr.dtc-open on tap). Same rows, handlers, paging, search and sort.
   >= 768px nothing here applies. */
@media (max-width: 767.98px) {
  table.dt-cards,
  table.dt-cards > tbody { display: block; width: 100% !important; }
  table.dt-cards { border: 0 !important; margin: 0.25rem 0 !important; background: transparent; border-collapse: separate !important; }
  .table-responsive:has(table.dt-cards) { overflow: visible; }

  /* length + search on one compact row */
  .dataTables_wrapper:has(table.dt-cards) > .top,
  .dataTables_wrapper:has(table.dt-cards) > .row:first-child { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0 0 0.5rem; }
  .dataTables_wrapper:has(table.dt-cards) > .row:first-child > [class*="col-"] { width: auto; flex: 1 1 auto; padding: 0; }
  .dataTables_wrapper:has(table.dt-cards) > .row:first-child > [class*="col-"]:first-child { flex: 0 0 auto; }
  .dataTables_wrapper:has(table.dt-cards) .dataTables_length { flex: 0 0 auto; margin: 0 !important; }
  .dataTables_wrapper:has(table.dt-cards) .dataTables_length label { font-size: 0; margin: 0; display: block; }
  .dataTables_wrapper:has(table.dt-cards) .dataTables_length select { font-size: 16px; margin: 0 !important; min-height: var(--t360-tap); width: auto; }
  .dataTables_wrapper:has(table.dt-cards) .dataTables_filter { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
  .dataTables_wrapper:has(table.dt-cards) .dataTables_filter label { margin: 0 !important; }
  .dataTables_wrapper:has(table.dt-cards) .dataTables_filter input { min-height: var(--t360-tap); }

  /* header -> a strip of sort chips (same th, same sort handlers) */
  table.dt-cards > thead { display: block; margin-bottom: 0.5rem; }
  table.dt-cards > thead > tr { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  table.dt-cards > thead > tr::-webkit-scrollbar { display: none; }
  table.dt-cards > thead > tr > th:not(.d-none) {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    width: auto !important;
    min-height: 36px;
    padding: 4px 26px 4px 12px !important;
    border: 1px solid var(--t360-line) !important;
    border-radius: var(--t360-r-pill);
    background: var(--t360-surface-2);
    font-size: 0.72rem;
    white-space: nowrap;
  }
  table.dt-cards > thead > tr > th.sorting_asc,
  table.dt-cards > thead > tr > th.sorting_desc { background: var(--t360-accent-tint); border-color: rgba(0, 145, 173, 0.35) !important; color: var(--mu-ink-info); }
  table.dt-cards > thead > tr > th.sorting_disabled,
  table.dt-cards > thead > tr > th:empty { display: none !important; }
  table.dt-cards > thead > tr > th::before,
  table.dt-cards > thead > tr > th::after { bottom: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
  table.dt-cards > thead > tr > th::before { right: 14px !important; }
  table.dt-cards > thead > tr > th::after { right: 8px !important; }
  table.dt-cards > tbody > tr > td.dtr-control::before,
  table.dt-cards > tbody > tr > th.dtr-control::before { display: none !important; }
  table.dt-cards > tbody > tr.child { display: none !important; }

  /* the card */
  table.dt-cards > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    position: relative;
    margin: 0 0 10px;
    padding: 12px 12px 2px;
    border: 1px solid var(--t360-line);
    border-radius: 12px;
    background: var(--bs-table-bg, #fff);
    box-shadow: var(--t360-shadow-1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  table.dt-cards > tbody > tr.carpool-row { box-shadow: inset 4px 0 0 0 #17a2b8, var(--t360-shadow-1); }
  table.dt-cards > tbody > tr.table-danger { background: #fdf2f2; border-color: #f5c2c7; }
  table.dt-cards > tbody > tr.dtc-open { border-color: rgba(0, 145, 173, 0.35); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
  table.dt-cards > tbody > tr.carpool-row.dtc-open { box-shadow: inset 4px 0 0 0 #17a2b8, 0 4px 14px rgba(15, 23, 42, 0.08); }
  table.dt-cards > tbody > tr > td:not(.d-none) {
    display: block !important;   /* beats Responsive's inline display:none */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  table.dt-cards > tbody > tr > td.dataTables_empty { grid-column: 1 / -1; padding: 24px 0 !important; text-align: center; }
  table.dt-cards > tbody > tr:has(> td.dataTables_empty) { cursor: default; }
  table.dt-cards > tbody > tr:has(> td.dataTables_empty)::after { display: none; }

  /* roles (set by dt-cards.js from the th data-card) */
  table.dt-cards > tbody > tr > td[data-card="title"]  { grid-column: 1; order: 1; font-weight: 600; }
  table.dt-cards > tbody > tr > td[data-card="status"] { grid-column: 2; order: 2; justify-self: end; text-align: right; max-width: 200px !important; }
  table.dt-cards > tbody > tr > td[data-card="main"]   { grid-column: 1 / -1; order: 3; }
  table.dt-cards > tbody > tr > td[data-card="meta"]   { grid-column: 1; order: 4; }
  table.dt-cards > tbody > tr > td[data-card="aside"]  { grid-column: 2; order: 5; justify-self: end; text-align: right; max-width: 160px !important; }
  table.dt-cards > tbody > tr > td[data-card="footer"] {
    grid-column: 1 / -1;
    order: 6;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding-top: 4px !important;
  }
  table.dt-cards > tbody > tr > td[data-card="footer"] > * { margin: 0 !important; }
  table.dt-cards > tbody > tr > td[data-card="detail"],
  table.dt-cards > tbody > tr > td:not([data-card]):not(.dataTables_empty) { grid-column: 1 / -1; order: 7; }
  table.dt-cards > tbody > tr > td[data-card="actions"] { grid-column: 1 / -1; order: 8; }

  /* collapsed: detail + actions hidden */
  table.dt-cards > tbody > tr:not(.dtc-open) > td[data-card="detail"],
  table.dt-cards > tbody > tr:not(.dtc-open) > td[data-card="actions"],
  table.dt-cards > tbody > tr:not(.dtc-open) > td:not([data-card]):not(.dataTables_empty) { display: none !important; }

  /* expanded: label | value rows */
  table.dt-cards > tbody > tr > td[data-card="detail"],
  table.dt-cards > tbody > tr > td[data-card="actions"],
  table.dt-cards > tbody > tr > td:not([data-card]):not(.dataTables_empty) {
    position: relative;
    min-height: 28px;
    padding: 8px 0 2px 104px !important;
    border-top: 1px dashed var(--t360-line) !important;
    font-size: 0.82rem;
  }
  table.dt-cards > tbody > tr > td[data-card="detail"]::before,
  table.dt-cards > tbody > tr > td[data-card="actions"]::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 9px;
    width: 96px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--t360-ink-3);
    line-height: 1.3;
  }
  table.dt-cards > tbody > tr > td[data-label=""] { padding-left: 0 !important; }
  table.dt-cards > tbody > tr > td[data-label=""]::before { display: none; }
  table.dt-cards > tbody > tr > td[data-card="actions"] { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; }
  table.dt-cards > tbody > tr:not(.dtc-open) > td[data-card="actions"] { display: none !important; }
  table.dt-cards > tbody > tr > td[data-card="actions"] > * { margin: 0 !important; }

  /* expand chevron */
  table.dt-cards > tbody > tr::after {
    content: '';
    grid-column: 1 / -1;
    order: 9;
    justify-self: center;
    width: 8px;
    height: 8px;
    margin: 0 0 8px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }
  table.dt-cards > tbody > tr.dtc-open::after { transform: rotate(-135deg); margin-top: 4px; }

  /* common cell contents of the transfer / request lists */
  table.dt-cards td.datetime-cell { min-width: 0; }
  table.dt-cards td.datetime-cell .d-flex { gap: 8px !important; }
  table.dt-cards td.datetime-cell .d-flex > div:first-child,
  table.dt-cards td.datetime-cell:not(:has(.d-flex)) { display: flex !important; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  table.dt-cards td.datetime-cell .time { font-size: 1rem !important; font-weight: 700; order: 1; }
  table.dt-cards td.datetime-cell .date { font-size: 0.85rem !important; font-weight: 600; order: 2; }
  table.dt-cards td.customer-cell { max-width: none !important; }
  table.dt-cards td.customer-cell .customer-name { white-space: normal; font-size: 0.95rem; }
  table.dt-cards td.customer-cell .customer-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 0.9rem; gap: 6px 8px; margin-top: 4px; }
  table.dt-cards td.route-cell { max-width: none !important; }
  table.dt-cards td.route-cell .location {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    line-height: 1.35;
    margin-bottom: 2px;
  }
  table.dt-cards td.route-cell .route-arrow { display: none; }
  table.dt-cards td.assignment-cell { min-width: 0 !important; }
  table.dt-cards td.assignment-cell .assignment-item { flex-wrap: wrap; font-size: 0.8rem; min-height: 28px; }
  table.dt-cards td.cost-cell { min-width: 0 !important; }
  table.dt-cards td.status-cell .driver-event-chips { justify-content: flex-end; }
  table.dt-cards td.partner-cell { min-width: 0 !important; }
  /* transfers: the live-share switch and payment badge are details */
  table.dt-cards > tbody > tr:not(.dtc-open) .share-live-toggle,
  table.dt-cards > tbody > tr:not(.dtc-open) td.cost-cell .payment-badge { display: none !important; }
  table.dt-cards > tbody > tr.dtc-open .share-live-toggle { margin-top: 6px !important; }
  /* inline controls stay thumb-sized inside a card */
  table.dt-cards .btn-link.btn-sm { min-width: 32px; min-height: 32px; }
  /* transfer cards: bigger, tappable meta icons (passengers, hotel, flight) */
  table.dt-cards td.customer-cell .customer-meta > i,
  table.dt-cards td.customer-cell .customer-meta .flight-info-trigger i,
  table.dt-cards td.customer-cell .customer-meta .badge i { font-size: 1.25rem; vertical-align: -0.2em; }
  table.dt-cards td.customer-cell .customer-meta .flight-info-trigger,
  table.dt-cards td.customer-cell .customer-meta .badge,
  table.dt-cards td.customer-cell .customer-meta .carpool-badge {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 36px; min-width: 36px; padding: 6px 10px;
    font-size: 0.85rem; border-radius: 10px; justify-content: center;
  }
  table.dt-cards td.customer-cell .customer-meta .badge .fa-hotel { font-size: 1.05rem; }
}

/* ---- 4.6 Badges and status pills ------------------------------------ */
.badge {
  border-radius: var(--t360-r-pill);
  padding: 0.4em 0.8em;
  font-weight: 500;
  font-size: 0.75em;
  letter-spacing: 0.02em;
}
.badge.bg-soft-primary   { background: var(--t360-brand-tint) !important; color: var(--t360-brand) !important; }
.badge.bg-soft-secondary,
.badge.bg-soft-info      { background: rgba(0, 145, 173, 0.1) !important; color: var(--mu-ink-info) !important; }
.badge.bg-soft-success   { background: rgba(54, 179, 126, 0.1) !important; color: var(--mu-ink-success) !important; }
.badge.bg-soft-warning   { background: rgba(255, 171, 0, 0.15) !important; color: var(--mu-ink-warning) !important; }
.badge.bg-soft-danger    { background: rgba(255, 86, 48, 0.1) !important; color: var(--mu-ink-danger) !important; }
/* theme .badge-soft-*: the light theme colour was used as text (1.6:1) */
.badge-soft-primary   { color: var(--t360-brand) !important; background-color: var(--t360-brand-tint) !important; }
.badge-soft-secondary,
.badge-soft-info      { color: var(--mu-ink-info) !important; background-color: rgba(0, 145, 173, 0.1) !important; }
.badge-soft-success   { color: var(--mu-ink-success) !important; background-color: rgba(54, 179, 126, 0.1) !important; }
.badge-soft-warning   { color: var(--mu-ink-warning) !important; background-color: rgba(255, 171, 0, 0.15) !important; }
.badge-soft-danger    { color: var(--mu-ink-danger) !important; background-color: rgba(255, 86, 48, 0.1) !important; }
.badge-soft-light     { color: var(--color-dark, #172B4D) !important; background-color: var(--color-light, #F4F6F8) !important; }
.badge-soft-dark      { color: var(--color-dark, #172B4D) !important; }

/* Transfer status: ONE palette on every page (lists, cards, dashboards).
   pending = grey, assigned = cyan, in progress = amber, completed = green,
   cancelled = red. Soft tint + dark ink: readable, calm, not shouting.
   Scoped to .page-content so it outranks each page's own inline copy. */
.t360-status,
.page-content .status-badge:is(.pending, .assigned, .in-progress, .completed, .cancelled, .status-pending, .status-assigned, .status-in-progress, .status-completed, .status-cancelled, .active, .inactive) {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.75em;
  border-radius: var(--t360-r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.t360-status::before,
.page-content .status-badge:is(.pending, .assigned, .in-progress, .completed, .cancelled, .status-pending, .status-assigned, .status-in-progress, .status-completed, .status-cancelled, .active, .inactive)::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.t360-status--pending,     .page-content .status-badge:is(.pending, .status-pending)         { background: var(--t360-st-pending-bg);   color: var(--t360-st-pending-ink); }
.t360-status--assigned,    .page-content .status-badge:is(.assigned, .status-assigned)       { background: var(--t360-st-assigned-bg);  color: var(--t360-st-assigned-ink); }
.t360-status--in-progress, .page-content .status-badge:is(.in-progress, .status-in-progress) { background: var(--t360-st-progress-bg);  color: var(--t360-st-progress-ink); }
.t360-status--completed,   .page-content .status-badge:is(.completed, .status-completed, .active) { background: var(--t360-st-completed-bg); color: var(--t360-st-completed-ink); }
.t360-status--cancelled,   .page-content .status-badge:is(.cancelled, .status-cancelled, .inactive) { background: var(--t360-st-cancelled-bg); color: var(--t360-st-cancelled-ink); }
/* the transfers list's clickable pill keeps its pencil hint, no zoom jump */
.page-content .status-badge.clickable-status:hover { transform: none; box-shadow: 0 0 0 2px currentColor; }
/* the coloured side bar of dashboard transfer rows uses the same palette */
.page-content .transfer-item.status-pending::before     { background: #8a96a8; }
.page-content .transfer-item.status-assigned::before    { background: var(--mu-solid-info); }
.page-content .transfer-item.status-in-progress::before { background: var(--color-warning, #FFAB00); }
.page-content .transfer-item.status-completed::before   { background: var(--mu-solid-success); }
.page-content .transfer-item.status-cancelled::before   { background: var(--mu-solid-danger); }

/* ---- 4.7 Alerts ----------------------------------------------------- */
.alert {
  border: 1px solid transparent;
  border-left: 4px solid;
  border-radius: var(--t360-r);
  padding: 0.875rem 1.125rem;
}
.alert-primary   { background: var(--t360-brand-tint);       border-color: rgba(10, 37, 64, 0.12);  border-left-color: var(--t360-brand);                color: var(--t360-brand); }
.alert-secondary { background: rgba(0, 145, 173, 0.08);       border-color: rgba(0, 145, 173, 0.16); border-left-color: var(--t360-accent);               color: var(--mu-ink-info); }
.alert-success   { background: rgba(54, 179, 126, 0.08);      border-color: rgba(54, 179, 126, 0.18); border-left-color: var(--color-success, #36B37E);   color: var(--mu-ink-success); }
.alert-warning   { background: rgba(255, 171, 0, 0.1);        border-color: rgba(255, 171, 0, 0.25);  border-left-color: var(--color-warning, #FFAB00);   color: var(--mu-ink-warning); }
.alert-danger    { background: rgba(255, 86, 48, 0.08);       border-color: rgba(255, 86, 48, 0.18);  border-left-color: var(--color-danger, #FF5630);    color: var(--color-danger-dark, #C62828); }
.alert-info      { background: rgba(0, 145, 173, 0.08);       border-color: rgba(0, 145, 173, 0.16); border-left-color: var(--color-info, #0091AD);       color: var(--mu-ink-info); }

/* ---- 4.8 Dropdowns -------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--t360-line);
  border-radius: var(--t360-r-lg);
  box-shadow: var(--t360-shadow-pop);
  padding: 0.375rem;
  margin-top: 0 !important;
  animation: dropdownFade 0.12s ease-out;
}
@keyframes dropdownFade { from { opacity: 0; } to { opacity: 1; } }
.dropdown-item {
  border-radius: var(--t360-r-sm);
  padding: 0.55rem 0.875rem;
  transition: background-color var(--t360-fast), color var(--t360-fast);
}
.dropdown-item:hover { background: var(--t360-accent-tint); color: var(--t360-brand); }
.dropdown-item:active,
.dropdown-item.active { background: var(--t360-accent); color: #fff; }
.dropdown-divider { margin: 0.375rem 0; border-color: var(--t360-line); }
/* leading icon: a fixed, centred icon column */
.dropdown-item:where(:has(> i:first-child)) { display: flex; align-items: center; column-gap: 0.5rem; }
.dropdown-item > i:first-child { flex: 0 0 1.25em; width: 1.25em; text-align: center; margin-right: 0 !important; line-height: 1; }
@media (pointer: coarse) {
  .dropdown-item { min-height: var(--t360-tap); display: flex; align-items: center; }
}

/* ---- 4.9 Modals -----------------------------------------------------
   Corners live on the edge sections (.modal-content does NOT clip: that
   clipped Choices.js lists and broke the sticky header/footer). */
.modal-content {
  --mu-modal-radius: 12px;
  border: none;
  border-radius: var(--mu-modal-radius);
  box-shadow: var(--t360-shadow-pop);
}
.modal .modal-content { border-radius: var(--mu-modal-radius); }
.modal-header {
  background: var(--t360-brand);
  color: #fff;
  border: none;
  padding: 1.125rem 1.5rem;
  border-top-left-radius: var(--mu-modal-radius, var(--bs-modal-inner-border-radius));
  border-top-right-radius: var(--mu-modal-radius, var(--bs-modal-inner-border-radius));
  flex-shrink: 0;
}
.modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.8; }
.modal-header .btn-close:hover { opacity: 1; }
.modal-title { font-weight: 600; color: #f1f3f4; }
.modal-body { padding: 1.5rem; }
.modal-footer {
  border-top: 1px solid var(--t360-line);
  padding: 0.875rem 1.5rem;
  background: var(--t360-surface-2);
  border-bottom-left-radius: var(--mu-modal-radius, var(--bs-modal-inner-border-radius));
  border-bottom-right-radius: var(--mu-modal-radius, var(--bs-modal-inner-border-radius));
  flex-shrink: 0;
}
.modal-content > .modal-body:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.modal-content > .modal-body:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
/* full-bleed bodies (maps, images, tables) at a rounded edge still clip */
.modal-dialog:not(.modal-dialog-scrollable) .modal-content > .modal-body.p-0:first-child,
.modal-dialog:not(.modal-dialog-scrollable) .modal-content > .modal-body.p-0:last-child { overflow: hidden; }

.modal.fade .modal-dialog { transform: scale(0.96) translateY(-12px); transition: transform 0.2s var(--t360-ease); }
/* none (not scale(1)): a lingering transform makes the dialog the
   containing block for position:fixed children (popper/flatpickr). */
.modal.show .modal-dialog { transform: none; }

.modal { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Non-scrollable dialogs: the whole .modal scrolls; header and footer stick
   to the viewport edges so Save / Close stay reachable. */
.modal-dialog:not(.modal-dialog-scrollable) .modal-header { position: sticky; top: 0; z-index: 3; }
.modal-dialog:not(.modal-dialog-scrollable) .modal-footer { position: sticky; bottom: 0; z-index: 3; }
.modal .choices.is-open { z-index: 4; }
.modal .choices__list--dropdown,
.modal .choices__list[aria-expanded] { z-index: 5; }
/* .modal-dialog-scrollable: a <form> between .modal-content and .modal-body
   broke Bootstrap's flex layout ("can't scroll to Save"). */
.modal-dialog-scrollable .modal-content > form,
.modal-dialog-scrollable .modal-content > .modal-form-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* iPhone: dynamic viewport units keep the footer on-screen */
@supports (height: 100dvh) {
  .modal-dialog-scrollable:not([class*="modal-fullscreen"]) { height: calc(100dvh - var(--bs-modal-margin) * 2); }
  .modal-dialog-scrollable:not([class*="modal-fullscreen"]) .modal-content { max-height: calc(100dvh - var(--bs-modal-margin) * 2); }
  .modal-dialog-scrollable.modal-fullscreen { height: 100dvh; }
}
/* header variants on light fills: dark title + dark close icon */
.modal-header.bg-warning, .modal-header.bg-light, .modal-header.bg-white,
.modal-header.bg-warning .modal-title, .modal-header.bg-light .modal-title, .modal-header.bg-white .modal-title { color: var(--color-dark, #172B4D); }
.modal-header.bg-warning .btn-close, .modal-header.bg-light .btn-close, .modal-header.bg-white .btn-close { filter: none; }
.modal-header.bg-warning.bg-opacity-25 { background-color: #FFF4D6 !important; }
.modal-header.bg-danger { background-color: var(--mu-solid-danger) !important; }
.modal-header.bg-success { background-color: var(--mu-solid-success) !important; }
.modal-header.bg-info,
.modal-header.bg-secondary { background-color: var(--mu-solid-info) !important; }
/* phones: footer buttons share the row and wrap evenly */
@media (max-width: 575.98px) {
  .modal-footer { gap: 0.5rem; }
  .modal-footer > .btn { flex: 1 1 auto; margin: 0; }
  .modal-footer > .btn.me-auto { flex-basis: 100%; }
}

/* SweetAlert2: pinned to the viewport above the sidebar (z up to 9999).
   Only position / inset / z-index: touching display or size clobbers its
   internal grid. */
.swal2-container { position: fixed !important; inset: 0 !important; z-index: 100000 !important; }

/* ---- 4.10 Tabs and pills -------------------------------------------- */
.nav-tabs { border: none; gap: 4px; }
.nav-tabs .nav-link {
  border: none;
  border-radius: var(--t360-r) var(--t360-r) 0 0;
  padding: 0.75rem 1.25rem;
  color: var(--t360-ink-3);
  font-weight: 500;
  background: var(--t360-surface-2);
  transition: background-color var(--t360-fast), color var(--t360-fast);
}
.nav-tabs .nav-link:hover { color: var(--t360-brand); background: var(--t360-surface-3); }
.nav-tabs .nav-link.active { background: var(--t360-surface); color: var(--t360-brand); box-shadow: inset 0 -2px 0 var(--t360-accent), var(--t360-shadow-1); }
.nav-pills { gap: 8px; }
.nav-pills .nav-link {
  border-radius: var(--t360-r-pill);
  padding: 0.5rem 1.125rem;
  color: var(--t360-ink-3);
  font-weight: 500;
  transition: background-color var(--t360-fast), color var(--t360-fast);
}
.nav-pills .nav-link:hover { background: var(--t360-accent-tint); color: var(--mu-ink-info); }
.nav-pills .nav-link.active { background: var(--t360-brand); color: #fff; box-shadow: 0 1px 2px rgba(10, 37, 64, 0.25); }
/* Phones: tab bars scroll sideways instead of wrapping into ragged rows
   (vertical navs and navs holding a dropdown are left alone). */
@media (max-width: 767.98px) {
  .nav-tabs:not(.flex-column):not(:has(.dropdown-menu)),
  .nav-pills:not(.flex-column):not(:has(.dropdown-menu)) {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .nav-tabs:not(.flex-column):not(:has(.dropdown-menu)) > .nav-item,
  .nav-tabs:not(.flex-column):not(:has(.dropdown-menu)) > .nav-link,
  .nav-pills:not(.flex-column):not(:has(.dropdown-menu)) > .nav-item,
  .nav-pills:not(.flex-column):not(:has(.dropdown-menu)) > .nav-link { flex-shrink: 0; }
  .nav-tabs:not(.flex-column):not(:has(.dropdown-menu)) .nav-link,
  .nav-pills:not(.flex-column):not(:has(.dropdown-menu)) .nav-link { white-space: nowrap; }
  .nav-tabs-custom:not(.flex-column):not(:has(.dropdown-menu)) { padding-bottom: 1px; }
}

/* ---- 4.11 Pagination, progress, tooltips, breadcrumbs, avatars ------ */
.pagination { gap: 4px; }
.page-item .page-link {
  border: none;
  border-radius: var(--t360-r-sm);
  padding: 0.5rem 0.85rem;
  color: var(--t360-ink-3);
  transition: background-color var(--t360-fast), color var(--t360-fast);
}
.page-item .page-link:hover { background: var(--t360-accent-tint); color: var(--mu-ink-info); }
.page-item.active .page-link { background: var(--t360-brand); color: #fff; }
.page-item.disabled .page-link { background: var(--t360-surface-2); color: #6c757d; }

.progress { height: 8px; border-radius: var(--t360-r-pill); background: #e9ecef; overflow: hidden; }
.progress-bar { border-radius: var(--t360-r-pill); background: linear-gradient(90deg, var(--t360-accent) 0%, var(--t360-brand) 100%); transition: width 0.6s ease; }

/* Light tooltips (what the app always showed: white with dark text) */
.tooltip { --bs-tooltip-bg: #ffffff; --bs-tooltip-color: #212529; --bs-tooltip-opacity: 1; }
.tooltip-inner { border-radius: var(--t360-r-sm); padding: 0.5rem 0.75rem; font-size: 0.85rem; box-shadow: var(--t360-shadow-2); }

.breadcrumb { background: transparent; padding: 0; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; font-size: 1.2em; color: #adb5bd; }
.breadcrumb-item a { color: var(--t360-ink-3); text-decoration: none; transition: color var(--t360-fast); }
.breadcrumb-item a:hover { color: var(--t360-brand); }
.breadcrumb-item.active { color: var(--t360-brand); font-weight: 500; }

.avatar-xs { width: 32px; height: 32px; }
.avatar-sm { width: 40px; height: 40px; }
.avatar-md { width: 48px; height: 48px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-title { border-radius: var(--t360-r); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.spinner-border { border-width: 3px; }

/* ---- 4.12 Toasts ----------------------------------------------------
   window.showToast(message, type) (areas, predefined locations, products)
   stacks .app-toast in #app-toast-host; auto-dismisses after ~3 s. */
#app-toast-host {
  position: fixed;
  top: 80px;            /* clears the topbar */
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  background: var(--t360-surface);
  color: var(--t360-ink);
  border: 1px solid var(--t360-line);
  border-left: 4px solid #198754;
  padding: 12px 14px 12px 12px;
  border-radius: var(--t360-r);
  box-shadow: var(--t360-shadow-pop);
  min-width: 260px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.app-toast.show { opacity: 1; transform: translateX(0); }
.app-toast.app-toast-error   { border-left-color: #dc3545; }
.app-toast.app-toast-info    { border-left-color: #0dcaf0; }
.app-toast.app-toast-warning { border-left-color: #ffc107; }
.app-toast .app-toast-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #198754;
  font-weight: 700;
  font-size: 0.78rem;
}
.app-toast.app-toast-error   .app-toast-icon { background: #dc3545; }
.app-toast.app-toast-info    .app-toast-icon { background: #0dcaf0; color: #002a31; }
.app-toast.app-toast-warning .app-toast-icon { background: #ffc107; color: #533f03; }
.app-toast .app-toast-msg { flex: 1 1 auto; word-wrap: break-word; }
@media (max-width: 575.98px) {
  /* phones: full width under the topbar */
  #app-toast-host { left: 16px; right: 16px; top: 78px; }
  .app-toast { min-width: 0; max-width: none; }
}

/* ---- 4.13 Page header (partials/page-header.ejs) --------------------
   .ph-wrap > .ph[.ph--brand][.ph--stats][.ph--many][.ph--actions]
     > .ph-main (.ph-title, .ph-subtitle)
     > .ph-stats[.ph-stats--scroll] > .ph-stat.ph-tone-*
     > .ph-actions > .btn
   A container query on .ph-wrap (the card's own width) drives the layout:
     < 480px  stacked; stats = compact tiles; actions = full-width buttons
     >= 480   horizontal stat tiles     >= 720  title + actions on one row
     >= 960   title + stats (no actions; 1140 if > 3 stats)
     >= 1180  title + stats + actions (<= 3 stats) */
.ph-wrap { container: ph / inline-size; margin-bottom: 1.5rem; min-width: 0; }
.ph {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "stats" "actions";
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--t360-r-lg);
  background: linear-gradient(135deg, rgba(0, 145, 173, 0.05) 0%, rgba(10, 37, 64, 0.03) 100%);
  border: 1px solid rgba(0, 145, 173, 0.12);
  min-width: 0;
}
.ph-main { grid-area: main; min-width: 0; }
.ph-title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  color: var(--t360-brand);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.ph-title-icon { flex: none; line-height: inherit; font-size: 1.15em; }
.ph-title-text { min-width: 0; }
.ph-subtitle { margin: 4px 0 0; color: var(--t360-ink-3); font-size: 0.85rem; line-height: 1.45; overflow-wrap: break-word; }

.ph-stats { grid-area: stats; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; min-width: 0; }
.ph-stats--scroll {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 16px) / 3.3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.ph-stats--scroll > .ph-stat { scroll-snap-align: start; }
.ph-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 6px;
  background: var(--t360-surface);
  border: 1px solid var(--t360-line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ph-stat:hover { border-color: var(--t360-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.ph-stat-icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.ph-stat-body { min-width: 0; max-width: 100%; }
.ph-stat-value { font-size: 1.15rem; font-weight: 700; color: #212529; line-height: 1.1; overflow-wrap: anywhere; }
.ph-stat-label {
  margin-top: 3px;
  font-size: 0.65rem;
  color: var(--t360-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ph-tone-info .ph-stat-icon    { background: rgba(0, 145, 173, 0.12); color: var(--mu-ink-info); }
.ph-tone-primary .ph-stat-icon { background: rgba(10, 37, 64, 0.08);  color: var(--t360-brand); }
.ph-tone-success .ph-stat-icon { background: rgba(25, 135, 84, 0.12); color: var(--mu-ink-success); }
.ph-tone-warning .ph-stat-icon { background: rgba(255, 171, 0, 0.16); color: var(--mu-ink-warning); }
.ph-tone-danger .ph-stat-icon  { background: rgba(220, 53, 69, 0.12); color: var(--mu-ink-danger); }
.ph-tone-neutral .ph-stat-icon { background: #f1f3f5; color: #495057; }

.ph-actions { grid-area: actions; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; min-width: 0; }
.ph-actions > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--t360-tap);
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}
.ph-actions > .btn > i { font-size: 1.05em; flex: none; }

@container ph (min-width: 480px) {
  .ph { padding: 20px 24px; gap: 16px; border-radius: 16px; }
  .ph-title { font-size: 1.2rem; }
  .ph-subtitle { font-size: 0.875rem; }
  .ph-stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; }
  .ph-stats--scroll { grid-template-columns: none; grid-auto-columns: minmax(140px, 1fr); }
  .ph-stat { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 12px 14px; }
  .ph-stat-icon { width: 42px; height: 42px; border-radius: 10px; font-size: 1.25rem; }
  .ph-stat-value { font-size: 1.4rem; line-height: 1; }
  .ph-stat-label { font-size: 0.68rem; letter-spacing: 0.5px; }
  .ph-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .ph-actions > .btn { min-height: 38px; white-space: nowrap; }
}
@container ph (min-width: 720px) {
  .ph--actions:not(.ph--stats) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions"; }
  .ph--actions.ph--stats { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "stats stats"; }
  .ph--actions .ph-actions { justify-content: flex-end; }
}
@container ph (min-width: 960px) {
  .ph--stats:not(.ph--actions):not(.ph--many) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main stats"; gap: 24px; }
  .ph--stats:not(.ph--actions):not(.ph--many) .ph-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, auto); overflow: visible; }
  .ph--stats:not(.ph--actions):not(.ph--many) .ph-stat-label { white-space: nowrap; }
}
@container ph (min-width: 1140px) {
  .ph--stats.ph--many:not(.ph--actions) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main stats"; gap: 24px; }
  .ph--stats.ph--many:not(.ph--actions) .ph-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(124px, auto); overflow: visible; }
  .ph--stats.ph--many:not(.ph--actions) .ph-stat-label { white-space: nowrap; }
}
@container ph (min-width: 1180px) {
  .ph--stats.ph--actions:not(.ph--many) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "main stats actions"; gap: 24px; }
  .ph--stats.ph--actions:not(.ph--many) .ph-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(124px, auto); overflow: visible; }
  .ph--stats.ph--actions:not(.ph--many) .ph-stat-label { white-space: nowrap; }
}
/* brand (dark gradient) variant */
.ph--brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--t360-brand) 0%, var(--t360-accent) 100%);
  border-color: transparent;
  color: #fff;
}
.ph--brand::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.ph--brand > * { position: relative; z-index: 1; }
.ph--brand .ph-title { color: #fff; }
.ph--brand .ph-subtitle { color: rgba(255, 255, 255, 0.9); }
.ph--brand .ph-stat { background: rgba(10, 37, 64, 0.32); border-color: rgba(255, 255, 255, 0.18); }
.ph--brand .ph-stat:hover { border-color: rgba(255, 255, 255, 0.45); box-shadow: none; }
.ph--brand .ph-stat-value { color: #fff; }
.ph--brand .ph-stat-label { color: rgba(255, 255, 255, 0.92); }
.ph--brand .ph-stat-icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ph--brand .text-warning { color: var(--color-warning, #FFAB00) !important; }
.ph--brand .text-success { color: #7EE2B8 !important; }
.ph--brand .text-info { color: #7FDDEE !important; }
.ph--brand .text-danger { color: #FF9C85 !important; }
.ph--brand .text-muted { color: rgba(255, 255, 255, 0.8) !important; }

/* ---- 4.14 Classic title rows (Skote .page-title-box) ----------------
   Clear page title, actions wrap instead of overflowing. */
.page-title-box { padding: 1.25rem 0; }
.page-title-box h4 {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--t360-ink);
  text-transform: none;
}
.page-title-box.d-sm-flex,
.page-title-box.d-flex { flex-wrap: wrap; gap: 0.5rem 1rem; }
.page-title-box > h4 { min-width: 0; overflow-wrap: break-word; }
.page-title-box > div:last-child:not(:first-child):not(.page-title-right) { display: flex; flex-wrap: wrap; gap: 8px; }
.page-title-box > div:last-child:not(:first-child):not(.page-title-right) > .btn { margin-right: 0 !important; }
@media (max-width: 575.98px) {
  .page-title-box { padding: 0.75rem 0 1rem; }
  /* phones: the title's own actions become full-width, thumb-sized buttons */
  .page-title-box > div:last-child:not(:first-child):not(.page-title-right) { width: 100%; }
  .page-title-box > div:last-child:not(:first-child):not(.page-title-right) > .btn { flex: 1 1 140px; min-height: var(--t360-tap); }
}
.card-header.d-flex.justify-content-between,
.card-body > .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; row-gap: 0.5rem; }
.card-header > .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.5rem; }

/* Dark "hero" title rows (title block + buttons): .ph-flow */
.ph-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.ph-flow > :first-child { flex: 1 1 260px; min-width: 0; overflow-wrap: break-word; }
.ph-flow > :not(:first-child) { flex: 0 1 auto; max-width: 100%; }
.ph-flow > div:not(:first-child) { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-flow .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  .ph-flow > :not(:first-child) { flex: 1 1 100%; }
  .ph-flow > .btn { display: inline-flex; align-items: center; justify-content: center; }
  .ph-flow > div:not(:first-child) > .btn,
  .ph-flow > div:not(:first-child) > form { flex: 1 1 140px; }
  .ph-flow > div:not(:first-child) > .btn,
  .ph-flow > div:not(:first-child) > form > .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; white-space: normal; }
}
/* In-card section heads ("All Vehicles" + Add button): .section-head */
.section-head { flex-wrap: wrap; gap: 12px; }
.section-head > :first-child { flex: 1 1 220px; min-width: 0; }
@media (max-width: 575.98px) {
  .section-head > :not(:first-child) { flex: 1 1 100%; justify-content: center; }
  .section-head > div:not(:first-child) { display: flex; }
  .section-head > div:not(:first-child) > .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- 4.15 Empty state (partials/empty-state.ejs) --------------------
   Icon, one line saying what is missing, one next-step button. */
.t360-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  color: var(--t360-ink-3);
}
.t360-empty__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--t360-accent-tint);
  color: var(--mu-ink-info);
}
.t360-empty__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--t360-ink); }
.t360-empty__text { margin: 0; max-width: 42ch; font-size: 0.875rem; line-height: 1.5; }
.t360-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 0.75rem; }
.t360-empty--compact { padding: 1.5rem 1rem; }

/* ---- 4.16 Skeletons ("ready when shown", IMPROVEMENTS.md Step 1) -----
   One shimmer (.skeleton + --t360-sk-*). Skeleton tables: partials/
   table-skeleton.ejs + assets/js/table-ready.js. While a container is
   [data-table-ready="pending"] the skeleton is in the flow and the real
   table is absolute + invisible (DataTables still measures it); on init.dt
   the skeleton goes and the table fades in. Keyed on html.t360-js, so
   without JS the plain table shows. */
.skeleton {
  background: linear-gradient(90deg, var(--t360-sk-base) 25%, var(--t360-sk-hi) 50%, var(--t360-sk-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--t360-r-sm);
}
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.t360-skel { display: none; }
html.t360-js [data-table-ready="pending"] { position: relative; overflow: hidden !important; }
html.t360-js [data-table-ready="pending"] > .t360-skel { display: block; }
html.t360-js [data-table-ready="pending"] > :not(.t360-skel) {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden !important;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  [data-table-ready="ready"] > :not(.t360-skel) { animation: t360-fade-in 150ms ease-out; }
}
@keyframes t360-fade-in { from { opacity: 0; } to { opacity: 1; } }

.t360-skel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.t360-skel-top { height: var(--sk-top-h, 56px); padding-bottom: 10px; }
.t360-skel-bottom { height: var(--sk-bottom-h, 92px); padding-top: 12px; align-items: flex-start; }
.t360-skel-bar .skeleton { display: block; height: 30px; }
.t360-skel .sk-len { width: 150px; }
.t360-skel .sk-search { width: 230px; }
.t360-skel .sk-info { width: 190px; height: 16px !important; }
.t360-skel .sk-pages { width: 170px; }
.t360-skel-tr { display: flex; align-items: center; height: var(--sk-row-h, 52px); border-bottom: 1px solid var(--bs-border-color, #eff0f2); }
.t360-skel-th { height: var(--sk-th-h, 51px); }
.t360-skel-td { min-width: 0; padding: 0 12px; }
.t360-skel-td > .skeleton { display: block; height: 10px; max-width: 100%; }
.t360-skel-td > .skeleton + .skeleton { margin-top: 8px; height: 8px; }
.t360-skel-th .t360-skel-td > .skeleton { height: 9px; }
/* day bars (transfers sorted by date): same look as tr.dt-day-row */
.t360-skel-day {
  display: flex;
  align-items: center;
  height: 33px;
  padding: 0 12px;
  background: var(--color-primary, #0A2540);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.t360-skel-day.is-today { box-shadow: inset 4px 0 0 0 var(--color-secondary, #0091AD); }
.t360-skel-day.is-tomorrow { box-shadow: inset 4px 0 0 0 rgba(0, 145, 173, 0.55); }
.t360-skel-day .t360-skel-count {
  --t360-sk-base: rgba(255, 255, 255, 0.16);
  --t360-sk-hi: rgba(255, 255, 255, 0.32);
  display: inline-block;
  width: 7.5em; /* about "· 12 δρομολόγια" */
  height: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  .t360-skel .sk-search { flex: 1 1 auto; }
  .t360-skel--cards .t360-skel-top { height: 52px; }
  .t360-skel--cards .t360-skel-bottom { height: var(--sk-bottom-h-m, 160px); }
  /* the header row is the sort-chip strip on phones (dt-cards) */
  .t360-skel--cards .t360-skel-tr.t360-skel-th { display: flex; height: 44px; margin: 0 0 8px; padding: 0; gap: 8px; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
  .t360-skel--cards .t360-skel-th > .t360-skel-td { flex: 0 0 auto !important; width: 92px; padding: 0; }
  .t360-skel--cards .t360-skel-th > .t360-skel-td > .skeleton { width: 100% !important; height: 34px; border-radius: 999px; }
  .t360-skel--cards .t360-skel-tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 10px 12px;
    height: var(--sk-card-h, 92px);
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
  }
  .t360-skel--cards .t360-skel-td { padding: 0; flex: none !important; max-width: none !important; }
  .t360-skel--cards .t360-skel-tr:not(.t360-skel-th) > .t360-skel-td:nth-child(2) { width: 84px; justify-self: end; }
  .t360-skel--cards .t360-skel-tr:not(.t360-skel-th) > .t360-skel-td:nth-child(2) > .skeleton { height: 20px; width: 100% !important; border-radius: 999px; }
  .t360-skel--cards .t360-skel-tr:not(.t360-skel-th) > .t360-skel-td:nth-child(2) > .skeleton + .skeleton,
  .t360-skel--cards .t360-skel-tr:not(.t360-skel-th) > .t360-skel-td:nth-child(n+5) { display: none; }
  .t360-skel--cards .t360-skel-tr:not(.t360-skel-th) > .t360-skel-td:nth-child(n+3) { grid-column: 1 / -1; }
  /* phones: the bar wraps like the real one */
  .t360-skel--cards .t360-skel-day { display: block; margin: 14px 0 8px; border-radius: 8px; height: auto; min-height: 33px; padding: 7px 12px; line-height: 1.5; white-space: normal; }
  .t360-skel--cards .t360-skel-table > .t360-skel-day:first-child,
  .t360-skel--cards .t360-skel-th + .t360-skel-day { margin-top: 0; }
}

/* ---- 4.17 Tap targets on touch screens ------------------------------
   Small buttons in tables, toolbars and modal footers were 28-31px. */
@media (pointer: coarse) and (max-width: 991.98px) {
  .table .btn-sm,
  .card-header .btn-sm,
  .modal-footer .btn,
  .page-link {
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .table .btn-sm.w-100, .modal-footer .btn.w-100 { display: flex; }
  /* every regular button and field in the page: >= 44px tall */
  .page-content :where(.btn:not(.btn-sm):not(.btn-link):not(.btn-close)) { min-height: var(--t360-tap); }
  .page-content :where(input.form-control:not([type="file"]):not([type="color"]):not([type="range"]):not(.form-control-sm), select.form-select:not(.form-select-sm)) { min-height: var(--t360-tap); }
  .form-check-input { width: 1.3em; height: 1.3em; }
  .form-switch { padding-left: 3.4em; }
  .form-switch .form-check-input { width: 2.75em; height: 1.5em; margin-left: -3.4em; }
}

/* =====================================================================
   5. CONTRAST (WCAG AA-ish, ~4.5:1 for small text)
   Loaded after custom-colors.css, so these win over its !important rules.
   Brand fills stay; only text shades and fills under white text darken.
   ===================================================================== */
.bg-primary-subtle { color: var(--t360-brand); }

/* Text utilities on white: success 2.7:1, warning 1.9:1, info 3.7:1,
   danger 3.2:1 -> ink shades (5-6:1) ... */
.text-success { color: var(--mu-ink-success) !important; }
.text-info,
.text-secondary { color: var(--mu-ink-info) !important; }
.text-warning { color: var(--mu-ink-warning) !important; }
.text-danger { color: var(--mu-ink-danger) !important; }
.text-muted { color: var(--t360-ink-3) !important; }
/* ... but the bright brand shade where the surface is dark */
.bg-primary .text-warning, .bg-dark .text-warning, .modal-header .text-warning,
.page-header-banner .text-warning, .text-bg-primary .text-warning, .text-bg-dark .text-warning { color: var(--color-warning, #FFAB00) !important; }
.bg-primary .text-success, .bg-dark .text-success, .modal-header .text-success,
.page-header-banner .text-success { color: #7EE2B8 !important; }
.bg-primary .text-info, .bg-dark .text-info, .modal-header .text-info,
.bg-primary .text-secondary, .bg-dark .text-secondary, .modal-header .text-secondary,
.page-header-banner .text-info { color: #7FDDEE !important; }
.bg-primary .text-danger, .bg-dark .text-danger, .modal-header .text-danger,
.page-header-banner .text-danger { color: #FF9C85 !important; }
.bg-primary .text-muted, .bg-dark .text-muted, .modal-header .text-muted,
.page-header-banner .text-muted, .text-bg-primary .text-muted, .text-bg-dark .text-muted { color: rgba(255, 255, 255, 0.78) !important; }

/* Solid badges / fills carrying white text */
.badge.bg-warning, .text-bg-warning, .bg-warning.text-white { color: var(--color-dark, #172B4D) !important; }
.badge.bg-success, .text-bg-success, .bg-success.text-white { background-color: var(--mu-solid-success) !important; }
.badge.bg-info, .badge.bg-secondary, .text-bg-info, .text-bg-secondary,
.bg-info.text-white, .bg-secondary.text-white { background-color: var(--mu-solid-info) !important; }
.badge.bg-danger, .text-bg-danger, .bg-danger.text-white { background-color: var(--mu-solid-danger) !important; }
.text-bg-info, .text-bg-secondary, .text-bg-success, .text-bg-danger { color: #fff !important; }
.bg-light.text-white, .bg-white.text-white, .badge.bg-light.text-white { color: var(--color-dark, #172B4D) !important; }
.bg-light.text-light, .bg-white.text-light { color: var(--color-dark-light, #5E6C84) !important; }
/* same-colour pairs (bg-X + text-X, text vanished) -> white text */
.bg-primary.text-primary, .bg-dark.text-dark { color: #fff !important; }

/* "Soft" backgrounds. .bg-soft-* was only defined for .badge, so avatars
   and `.bg-X.bg-soft.text-X` rendered navy on navy / amber on amber. */
.bg-soft-primary   { background-color: rgba(10, 37, 64, 0.1) !important; }
.bg-soft-secondary,
.bg-soft-info      { background-color: rgba(0, 145, 173, 0.12) !important; }
.bg-soft-success   { background-color: rgba(54, 179, 126, 0.12) !important; }
.bg-soft-warning   { background-color: rgba(255, 171, 0, 0.16) !important; }
.bg-soft-danger    { background-color: rgba(255, 86, 48, 0.12) !important; }
.bg-soft-dark      { background-color: rgba(23, 43, 77, 0.1) !important; }
.bg-primary.bg-soft   { background-color: rgba(10, 37, 64, 0.1) !important; }
.bg-secondary.bg-soft,
.bg-info.bg-soft      { background-color: rgba(0, 145, 173, 0.12) !important; }
.bg-success.bg-soft   { background-color: rgba(54, 179, 126, 0.12) !important; }
.bg-warning.bg-soft   { background-color: rgba(255, 171, 0, 0.16) !important; }
.bg-danger.bg-soft    { background-color: rgba(255, 86, 48, 0.12) !important; }
.bg-soft-primary:not(.badge):not([class*="text-"]) { color: var(--t360-brand); }

/* =====================================================================
   6. PAGES
   ===================================================================== */
/* Transfer details header actions (phones): the row takes the full width
   under the title and wraps; buttons stay thumb-sized. */
@media (max-width: 575.98px) {
  .td-header-actions { width: 100%; row-gap: 8px !important; }
  .td-header-actions > .btn,
  .td-header-actions > .dropdown > .btn { min-height: 40px; display: inline-flex; align-items: center; }
}
/* Sticky form action bars (create / edit transfer, hotel new request) */
.action-buttons > .d-flex { flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 575.98px) {
  .action-buttons > .d-flex > *, .action-buttons > .d-flex > div > .btn { flex: 1 1 auto; }
}
/* FullCalendar toolbars wrap on phones */
@media (max-width: 767.98px) {
  .fc .fc-toolbar { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .fc .fc-toolbar-title { font-size: 1.05rem; }
  .fc .fc-toolbar .fc-button { padding: 0.3rem 0.55rem; }
}
/* Flatpickr popups never wider than the screen */
.flatpickr-calendar { max-width: calc(100vw - 16px); }

/* =====================================================================
   7. UTILITIES, MOTION, PRINT
   ===================================================================== */
.min-w-0 { min-width: 0; }

/* Keyframes some pages reference by name (kept for them) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Reduced motion: placeholders stay, static (no shimmer, no fades, no
   slide-ins). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skeleton,
  #ai-cost-indicator.is-loading .ai-sk,
  .ib-skeleton span,
  .tf-loading .tf-ctl:not(.is-ready)::before {
    animation: none !important;
    background: var(--t360-sk-hi) !important;
  }
  .tb-bell-btn .tb-badge,
  .tb-bell-btn .tb-badge.is-on { transition: none !important; }
  #inbox-unread-badge.is-on { animation: none; }
  .dropdown-menu { animation: none; }
  .modal.fade .modal-dialog { transition: none; transform: none; }
  .app-toast { transition: none; transform: none; }
}

@media print {
  .card { box-shadow: none; border: 1px solid #dee2e6; }
  .btn { box-shadow: none; }
}