/* ManagedTrip admin theme: the calm, consistent look first built for the Trip page, applied to every admin page, legacy report and popup.
   Loaded by common/header.jsp after managedtrip.css (not on the AI Reporting hub, which has its own design, nor on Live Flights).
   Page-specific pieces stay in their own files (static/ai/trip/trip-detail.css, ai-admin.css, profile.css).

   Every colour is a variable on :root, so dark mode (html[data-mt-theme="dark"], admin-theme-dark section at the end) only swaps values.
   Rules scoped with :is(..., #mt-ai-s) carry ID weight on purpose: they replace rules that were written for #tripForm and must keep
   winning over AdminLTE and managedtrip.css the same way. */

:root {
    --mt-page: #ecf0f5;
    --mt-surface: #fff;
    --mt-surface-2: #f8f9fb;
    --mt-surface-3: #f3f4f6;
    --mt-surface-detail: #fafbfc;
    --mt-text: #1f2937;
    --mt-text-strong: #111827;
    --mt-text-body: #374151;
    --mt-text-label: #4b5563;
    --mt-muted: #6b7280;
    --mt-faint: #9ca3af;
    --mt-fainter: #c0c4cc;
    --mt-border: #d1d5db;
    --mt-border-soft: #e5e7eb;
    --mt-divider: #eef0f3;
    --mt-dashed: #c0c7d1;
    --mt-blue: #3c8dbc;
    --mt-blue-hover: #337ab0;
    --mt-blue-text: #2a6f97;
    --mt-blue-text-hover: #1f5f86;
    --mt-blue-border: #8fbcd8;
    --mt-blue-tint: #eaf3f9;
    --mt-blue-ring: rgba(60, 141, 188, .15);
    --mt-green: #00a65a;
    --mt-green-hover: #008d4c;
    --mt-green-text: #17663a;
    --mt-green-text-hover: #0f5130;
    --mt-green-border: #7cc49b;
    --mt-green-tint: #e7f6ec;
    --mt-green-tint-border: #8fd1a6;
    --mt-red: #dd4b39;
    --mt-red-text: #b42318;
    --mt-red-tint-text: #a32020;
    --mt-red-border: #f0b4b4;
    --mt-red-tint: #fdecec;
    --mt-red-tint-border: #f0a8a8;
    --mt-amber: #f39c12;
    --mt-amber-text: #92580b;
    --mt-amber-strong: #5c3a06;
    --mt-amber-border: #f1c98a;
    --mt-amber-tint: #fdf3e1;
    --mt-on-solid: #fff;
    --mt-shadow-box: 0 1px 2px rgba(16, 24, 40, .05);
    --mt-shadow-menu: 0 6px 16px rgba(17, 24, 39, .12);
}

/* ===== Forms ===== */
/* labels: one weight and colour; hover-help underline a soft dotted line; long labels wrap instead of being cut off */
:is(.content-wrapper, .modal, #mt-ai-s) .control-label { color: var(--mt-text-label); font-size: 13px; font-weight: 600; }
:is(.content-wrapper, .modal, #mt-ai-s) .control-label abbr[title] { border-bottom: 1px dotted var(--mt-fainter); cursor: help; text-decoration: none; }
:is(.content-wrapper, .modal, #mt-ai-s) .control-label.text-nowrap { white-space: normal; }
/* a checkbox or radio's own text: muted, not Bootstrap's near-black (keeps its semi-bold weight) */
:is(.content-wrapper, .modal, #mt-ai-s) :is(.checkbox, .radio) label { color: var(--mt-muted); }

/* inputs, dropdowns and their side pieces */
:is(.content-wrapper, .modal, #mt-ai-s) .form-control { border-color: var(--mt-border); border-radius: 4px; box-shadow: none; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group .form-control { border-radius: 0; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group .form-control:first-child { border-radius: 4px 0 0 4px; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group .form-control:last-child { border-radius: 0 4px 4px 0; }
:is(.content-wrapper, .modal, #mt-ai-s) .form-control:focus { border-color: var(--mt-blue); box-shadow: 0 0 0 3px var(--mt-blue-ring); }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-addon { background: var(--mt-surface-2); border-color: var(--mt-border); color: var(--mt-muted); }
:is(.content-wrapper, .modal, #mt-ai-s) .select2-container--default .select2-selection--single,
:is(.content-wrapper, .modal, #mt-ai-s) .select2-container--default .select2-selection--multiple { border-color: var(--mt-border); border-radius: 4px; }

/* helper buttons attached to fields (today, me, notes, +7/+14 date shortcuts, calculator): quiet, blue text */
:is(.content-wrapper, .modal, #mt-ai-s) :is(.today, .today-time, .mt-today-button, .mt-me-button), :is(.content-wrapper, .modal, #mt-ai-s) .mt-date-calculator .btn {
    background: var(--mt-surface-2); border-color: var(--mt-border); color: var(--mt-blue); font-weight: 600; text-shadow: none; }
:is(.content-wrapper, .modal, #mt-ai-s) :is(.today, .today-time, .mt-today-button, .mt-me-button):hover, :is(.content-wrapper, .modal, #mt-ai-s) .mt-date-calculator .btn:hover {
    background: var(--mt-blue-tint); border-color: var(--mt-blue); color: var(--mt-blue-text-hover); }
:is(.content-wrapper, .modal, #mt-ai-s) .mt-date-calculator .btn { color: var(--mt-text-label); font-size: 12px; padding-left: 9px; padding-right: 9px; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn .btn-info { background: var(--mt-surface-2); border-color: var(--mt-border); color: var(--mt-blue); }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn .btn-info:hover { background: var(--mt-blue-tint); border-color: var(--mt-blue); color: var(--mt-blue-text-hover); }

/* highlighted fields (mt.highlight adds bg-green/red/yellow/gray): a soft tint with a coloured edge instead of a solid fill */
:is(.content-wrapper, .modal, #mt-ai-s) :is(.form-control.bg-green, .bg-green + .select2-container .select2-selection, .select2-selection.bg-green, .input-group-addon.bg-green) {
    background: var(--mt-green-tint) !important; border-color: var(--mt-green-tint-border) !important; color: var(--mt-green-text) !important; }
:is(.content-wrapper, .modal, #mt-ai-s) :is(.form-control.bg-red, .bg-red + .select2-container .select2-selection, .select2-selection.bg-red, .input-group-addon.bg-red) {
    background: var(--mt-red-tint) !important; border-color: var(--mt-red-tint-border) !important; color: var(--mt-red-tint-text) !important; }
:is(.content-wrapper, .modal, #mt-ai-s) :is(.form-control.bg-yellow, .bg-yellow + .select2-container .select2-selection, .select2-selection.bg-yellow) {
    background: var(--mt-amber-tint) !important; border-color: var(--mt-amber-border) !important; color: var(--mt-amber-text) !important; }
:is(.content-wrapper, .modal, #mt-ai-s) :is(.form-control.bg-gray, .bg-gray + .select2-container .select2-selection, .select2-selection.bg-gray) {
    background: var(--mt-surface-3) !important; border-color: var(--mt-border) !important; color: var(--mt-muted) !important; }
/* disabled dropdowns look like those soft grey fields too (Fare Logic's read-only season pickers matched Bootstrap's darker #eee) */
:is(.content-wrapper, .modal, #mt-ai-s) :is(select.form-control:disabled, .select2-container--disabled .select2-selection) {
    background: var(--mt-surface-3) !important; border-color: var(--mt-border) !important; color: var(--mt-muted) !important; cursor: not-allowed; opacity: 1; }
:is(.content-wrapper, .modal, #mt-ai-s) :is(.bg-green, .bg-red, .bg-yellow, .bg-gray) + .select2-container .select2-selection__rendered { color: inherit !important; font-weight: 600; }

/* ===== Boxes and tabs ===== */
.content-wrapper .box { border-radius: 8px; box-shadow: var(--mt-shadow-box); }
.content-wrapper .box-header.with-border { border-bottom-color: var(--mt-divider); }
.content-wrapper .box-header .box-title { color: var(--mt-text); font-size: 15px; font-weight: 500; }
/* Cards: AdminLTE's look (a 3px bar along the top, grey or the box's colour), modernised: the bar follows the rounder corners, the colours
   are the theme's softer ones, and the rest of the card has a hairline outline (a shadow, so heights stay exactly as before) instead of a
   hard drop shadow. Cards inside cards (the quote pricing cards) keep the outline but no shadow below. */
.content-wrapper .box:not(.box-solid), .modal .box:not(.box-solid) { border-radius: 10px; border-top: 3px solid var(--mt-border); }
.content-wrapper .box:not(.box-solid) { box-shadow: 0 0 0 1px var(--mt-border-soft), 0 1px 2px rgba(16, 24, 40, .04); }
.content-wrapper .box .box:not(.box-solid) { box-shadow: 0 0 0 1px var(--mt-border-soft); }
.content-wrapper .box.box-success:not(.box-solid) { border-top-color: var(--mt-green); }
.content-wrapper .box:is(.box-primary, .box-info):not(.box-solid) { border-top-color: var(--mt-blue); }
.content-wrapper .box.box-warning:not(.box-solid) { border-top-color: var(--mt-amber); }
.content-wrapper .box.box-danger:not(.box-solid) { border-top-color: var(--mt-red); }
.content-wrapper .box > .box-footer:last-child { background: transparent; border-radius: 0 0 10px 10px; border-top-color: var(--mt-divider); }
/* tabs: the AdminLTE design (blue bar on the active tab), muted regular-weight inactive tabs, a grey bar on hover */
.content-wrapper .nav-tabs-custom > .nav-tabs { border-bottom-color: var(--mt-divider); }
.content-wrapper .nav-tabs-custom > .nav-tabs > li > a { color: var(--mt-muted); font-weight: 400; transition: color .15s; }
.content-wrapper .nav-tabs-custom > .nav-tabs > li:not(.active):not(.pull-right):not(.header):hover { border-top-color: var(--mt-border); }
.content-wrapper .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover { color: var(--mt-text); }
.content-wrapper .nav-tabs-custom > .nav-tabs > li.active > a { border-left-color: var(--mt-divider); border-right-color: var(--mt-divider); color: var(--mt-text); font-weight: 500; }

/* ===== Buttons: one consistent look, no icons on text buttons =====
   Solid green: the main save of each place (Save Changes, each form's ...SaveButton, a modal's green action). Solid blue: a modal's blue action.
   Green outline: other green (add) buttons. Blue outline: everyday actions. Red outline: risky actions (btn-danger).
   Neutral grey: the table export group. Editor toolbars and box +/- controls are left alone. */
:is(.content-wrapper, .modal, .main-footer) .btn:not(.btn-box-tool):not(.btn-link):not(.note-editor .btn):not(.note-btn) {
    border-radius: 6px; box-shadow: none !important; font-weight: 600; text-shadow: none; transition: background-color .15s, border-color .15s; }
:is(.content-wrapper, .modal, .main-footer) :is(.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning):not(.btn-box-tool):not(.note-editor .btn):not(.note-btn) {
    background: var(--mt-surface) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-text) !important; }
:is(.content-wrapper, .modal, .main-footer) :is(.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning):not(.btn-box-tool):not(.note-editor .btn):not(.note-btn):not([disabled]):hover {
    background: var(--mt-surface-3) !important; border-color: var(--mt-faint) !important; }
:is(.content-wrapper, .modal, .main-footer) .btn-danger:not(.btn-box-tool) {
    background: var(--mt-surface) !important; border: 1px solid var(--mt-red-border) !important; color: var(--mt-red-text) !important; }
:is(.content-wrapper, .modal, .main-footer) .btn-danger:not(.btn-box-tool):not([disabled]):hover { background: var(--mt-red-tint) !important; border-color: var(--mt-red-text) !important; }
/* the helper buttons keep their blue text */
:is(.content-wrapper, .modal, #mt-ai-s) :is(.today, .today-time, .mt-today-button, .mt-me-button):is(.btn) { color: var(--mt-blue) !important; }
/* a modal's blue main action: solid blue */
.modal-footer .btn-primary {
    background: var(--mt-blue) !important; border: 1px solid var(--mt-blue) !important; color: var(--mt-on-solid) !important; }
.modal-footer .btn-primary:not([disabled]):hover { background: var(--mt-blue-hover) !important; border-color: var(--mt-blue-hover) !important; }
:is(.content-wrapper, .modal, .main-footer) .btn[disabled], :is(.content-wrapper, .modal, .main-footer) .btn.disabled { opacity: .5; }
/* no icons on buttons that also have text (marked by admin-theme.js); dropdown arrows stay */
.mt-ai-btn-text-icon:not(.mt-ai-keep-icon) :is(.fa, .ion, .glyphicon):not(.fa-caret-down):not(.fa-caret-up):not(.fa-angle-down):not(.fa-chevron-down) { display: none !important; }/* mt-ai-keep-icon: a button that keeps its icon (the extras calculator's Keypad) */
/* everyday actions: blue outline and blue text, so they read as clickable */
:is(.content-wrapper, .modal, .main-footer) :is(.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning):not(.btn-box-tool):not(.note-editor .btn):not(.note-btn):not(.dt-buttons .btn):not(.input-group-btn .btn) {
    border-color: var(--mt-blue-border) !important; color: var(--mt-blue-text) !important; }
:is(.content-wrapper, .modal, .main-footer) :is(.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning):not(.btn-box-tool):not(.note-editor .btn):not(.note-btn):not(.dt-buttons .btn):not(.input-group-btn .btn):not([disabled]):hover {
    background: var(--mt-blue-tint) !important; border-color: var(--mt-blue) !important; color: var(--mt-blue-text-hover) !important; }
/* green stays green (agents know it as add/save): green outline and green text */
:is(.content-wrapper, .modal, .main-footer) .btn-success:not(.btn-box-tool):not(.note-editor .btn):not(.note-btn):not(.dt-buttons .btn):not(.input-group-btn .btn) {
    border-color: var(--mt-green-border) !important; color: var(--mt-green-text) !important; }
:is(.content-wrapper, .modal, .main-footer) .btn-success:not(.btn-box-tool):not(.note-editor .btn):not(.note-btn):not(.dt-buttons .btn):not(.input-group-btn .btn):not([disabled]):hover {
    background: var(--mt-green-tint) !important; border-color: var(--mt-green) !important; color: var(--mt-green-text-hover) !important; }
/* Cancel: a soft red outline and red text (marked by admin-theme.js), the counterpart of the green Save; Delete (btn-danger) stays stronger */
:is(.content-wrapper, .modal, .main-footer) .btn.mt-ai-cancel:not(.btn-box-tool):not(.btn-link):not(#mt-ai-none) {
    background: var(--mt-surface) !important; border-color: var(--mt-red-tint-border) !important; color: var(--mt-red-text) !important; }
:is(.content-wrapper, .modal, .main-footer) .btn.mt-ai-cancel:not(.btn-box-tool):not(.btn-link):not(#mt-ai-none):not([disabled]):hover {
    background: var(--mt-red-tint) !important; border-color: var(--mt-red-border) !important; color: var(--mt-red-text) !important; }
/* the main save: solid green */
#saveButton, #footerSaveButton, [id$="SaveButton"].btn, .modal-footer .btn-success {
    background: var(--mt-green) !important; border: 1px solid var(--mt-green) !important; color: var(--mt-on-solid) !important; }
#saveButton:not([disabled]):hover, #footerSaveButton:not([disabled]):hover, [id$="SaveButton"].btn:not([disabled]):hover, .modal-footer .btn-success:not([disabled]):hover {
    background: var(--mt-green-hover) !important; border-color: var(--mt-green-hover) !important; color: var(--mt-on-solid) !important; }

/* buttons attached to fields (copy, insert, look up, details): the same outlines, green for green buttons and blue for the rest;
   the quiet helpers (date shortcuts, today, me, notes, % pickers) keep their own look */
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn:not(.mt-date-calculator) > .btn-success:not(.today):not(.today-time):not(.mt-today-button):not(.mt-me-button) {
    background: var(--mt-surface) !important; border-color: var(--mt-green-border) !important; color: var(--mt-green-text) !important; font-weight: 600; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn:not(.mt-date-calculator) > .btn-success:not(.today):not(.today-time):not(.mt-today-button):not(.mt-me-button):not([disabled]):hover {
    background: var(--mt-green-tint) !important; border-color: var(--mt-green) !important; color: var(--mt-green-text-hover) !important; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn:not(.mt-date-calculator) > :is(.btn-primary, .btn-info):not(.today):not(.today-time):not(.mt-today-button):not(.mt-me-button):not(.dropdown-toggle):not([data-target="#modalNotes"]),
:is(.content-wrapper, .modal, #mt-ai-s) .mt-insert-canned-remark {
    background: var(--mt-surface) !important; border-color: var(--mt-blue-border) !important; color: var(--mt-blue-text) !important; font-weight: 600; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn:not(.mt-date-calculator) > :is(.btn-primary, .btn-info):not(.today):not(.today-time):not(.mt-today-button):not(.mt-me-button):not(.dropdown-toggle):not([data-target="#modalNotes"]):not([disabled]):hover,
:is(.content-wrapper, .modal, #mt-ai-s) .mt-insert-canned-remark:not([disabled]):hover { background: var(--mt-blue-tint) !important; border-color: var(--mt-blue) !important; color: var(--mt-blue-text-hover) !important; }

/* joined groups (field + button, field + box, button + button): square where pieces meet, rounded only at the outer ends */
:is(.content-wrapper, .modal) :is(.input-group-btn, .btn-group) > .btn:not(:last-child) { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; }
:is(.content-wrapper, .modal) :is(.input-group-btn, .btn-group) > .btn:not(:first-child) { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; margin-left: -1px; }
:is(.content-wrapper, .modal) .input-group > .input-group-btn:first-child:not(:last-child) > .btn:last-child,
:is(.content-wrapper, .modal) .input-group > .input-group-btn:first-child:not(:last-child) > .dropdown-toggle { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; }
:is(.content-wrapper, .modal) .input-group > .input-group-btn:last-child:not(:first-child) > .btn:first-child { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }
:is(.content-wrapper, .modal) .input-group > .input-group-btn:not(:first-child):not(:last-child) > .btn { border-radius: 0 !important; }
:is(.content-wrapper, .modal) .input-group > .input-group-addon:first-child { border-radius: 4px 0 0 4px !important; }
:is(.content-wrapper, .modal) .input-group > .input-group-addon:last-child { border-radius: 0 4px 4px 0 !important; }
:is(.content-wrapper, .modal) .input-group > .input-group-addon:not(:first-child):not(:last-child) { border-radius: 0 !important; }
:is(.content-wrapper, .modal) .input-group > .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }
:is(.content-wrapper, .modal) .input-group > .select2-container:not(:last-child) .select2-selection { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; }
:is(.content-wrapper, .modal) .input-group > .select2-container:not(:first-child):not(:nth-child(2)) .select2-selection,
:is(.content-wrapper, .modal) .input-group > :is(.input-group-btn, .input-group-addon) + select + .select2-container .select2-selection,
:is(.content-wrapper, .modal) .input-group > :is(.input-group-btn, .input-group-addon) + .select2-container .select2-selection { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }

/* Restricted Save Mode: a calm amber pill in place of the Save button */
.mt-primary-save-restricted:not([style*="display: none"]):not([style*="display:none"]) {
    align-items: center; background: var(--mt-amber-tint); border: 1px solid var(--mt-amber-border); border-radius: 6px; color: var(--mt-amber-text); display: inline-flex !important;
    font-size: 12px; gap: 5px; line-height: 1.4; padding: 3px 10px; }
.mt-primary-save-restricted .mt-primary-save-restricted-label { border-bottom: 0 !important; color: var(--mt-amber-text) !important; cursor: help; font-weight: 600; text-decoration: none; }
.mt-primary-save-restricted .mt-primary-save-restricted-text { color: var(--mt-amber-strong); font-weight: 600; }

/* "Select All Passengers" (and similar) joins the right end of its passenger box on the same line */
div:has(> .input-group-btn > [id$=".selectAllPassengersButton"]) { align-items: stretch; display: flex; }
div:has(> .input-group-btn > [id$=".selectAllPassengersButton"]) > .select2-container { flex: 1 1 0; min-width: 0; width: auto !important; }
div:has(> .input-group-btn > [id$=".selectAllPassengersButton"]) > .select2-container .select2-selection { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; height: 100%; }
div:has(> .input-group-btn > [id$=".selectAllPassengersButton"]) > .input-group-btn { display: flex; flex: none; width: auto; }
.input-group-btn > .btn[id$=".selectAllPassengersButton"] {
    border-radius: 0 4px 4px 0 !important; margin-left: -1px; padding-left: 14px; padding-right: 14px; white-space: nowrap; width: auto; }

/* ===== Tables (DataTables) ===== */
/* toolbar (bulk actions / Show N entries / export / search): size to content, search takes the rest, wrap when narrow */
.content-wrapper .dataTables_wrapper > .row:first-child { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-left: 0; margin-right: 0; }
.content-wrapper .dataTables_wrapper > .row:first-child::before, .content-wrapper .dataTables_wrapper > .row:first-child::after { content: none; display: none; }
.content-wrapper .dataTables_wrapper > .row:first-child > [class*="col-"] { flex: 0 0 auto; float: none; padding: 0; width: auto; }
.content-wrapper .dataTables_wrapper > .row:first-child > [class*="col-"]:last-child { flex: 1 1 220px; min-width: 0; }
.content-wrapper .dataTables_wrapper .dataTables_filter { text-align: right; }
.content-wrapper .dataTables_wrapper .dataTables_filter label { align-items: center; display: inline-flex; gap: 6px; justify-content: flex-end; margin: 0; max-width: 100%; white-space: nowrap; }
.content-wrapper .dataTables_wrapper .dataTables_filter input { margin-left: 0; min-width: 120px; width: 220px; } /* #hardcoded widths */
.content-wrapper .dataTables_wrapper .dataTables_length label { margin: 0; }
/* export buttons (Copy / Excel / CSV / PDF / Print): one joined, compact, neutral group (:not(#mt-ai-none) outranks the general button rule) */
.content-wrapper .dt-buttons { display: inline-flex; flex-wrap: wrap; row-gap: 4px; }
.content-wrapper .dt-buttons .btn { border-radius: 0; font-size: 12px; margin-left: -1px; padding: 4px 10px; }
.content-wrapper .dt-buttons .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.content-wrapper .dt-buttons .btn:last-child { border-radius: 0 6px 6px 0; }
:is(.content-wrapper, .modal) .dt-buttons .btn:not(#mt-ai-none) { background: var(--mt-surface) !important; border-color: var(--mt-border) !important; color: var(--mt-text-label) !important; font-weight: 500 !important; }
:is(.content-wrapper, .modal) .dt-buttons .btn:not(#mt-ai-none):hover { background: var(--mt-surface-3) !important; color: var(--mt-text) !important; }
/* cells: fixed-width text previews and action groups shrink with the column; compact buttons; tighter spacing */
.content-wrapper table.dataTable td .input-group[style*="min-width"] { min-width: 0 !important; }
.content-wrapper table.dataTable td .btn { font-size: 12px; line-height: 1.4; padding: 3px 8px; }
.content-wrapper table.dataTable td .input-group { display: inline-flex; flex-wrap: nowrap; width: auto; }
/* a cell's button group (Pay For My Trip Link's text, email and copy) stays one group on one line: Bootstrap's width 1% squeezed it into a column */
.content-wrapper table.dataTable td .input-group > .input-group-btn { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; width: auto; }
.content-wrapper table.dataTable td .input-group > .btn:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -1px; }
.content-wrapper table.dataTable td .input-group > .btn:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.content-wrapper table.dataTable thead > tr > th { padding-left: 6px; padding-right: 18px; }
.content-wrapper table.dataTable thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc)::after { right: 4px; }
/* no sort arrow, no room kept for one: columns that don't sort (the preview icon), and the select-all checkbox column, whose arrow sorted
   nothing anyone could see (the click is the checkbox's) */
.content-wrapper table.dataTable thead > tr > th:is(.sorting_disabled, :has(input[type="checkbox"])) { padding-right: 6px; }
.content-wrapper table.dataTable thead > tr > th:has(input[type="checkbox"])::after { display: none; }
/* review lists: the Trip Id kept an empty icon's width in front of it (and the header a blank icon to match) for the lock that shows when
   someone else has the Trip open; the space now opens only when there is a lock to show */
.content-wrapper table.dataTable td i.mt-lockable.mt-unlocked:not(.fa-lock) { display: none; }
.content-wrapper table.dataTable thead th > i[class="fa fa-fw"] { display: none; }
.content-wrapper table.dataTable tbody > tr > td { padding-left: 6px; padding-right: 6px; }
.content-wrapper table.dataTable td .mt-preview-html,
.content-wrapper table.dataTable td [style*="width: 10em"], .content-wrapper table.dataTable td [style*="width:10em"] {
    display: block; max-width: none; min-width: 100%; width: 0 !important; }
/* text: calm greys instead of #333 and bold black headers */
:is(.content-wrapper, .modal) table.dataTable { color: var(--mt-text-body); }
:is(.content-wrapper, .modal) table.dataTable > thead > tr > th,
:is(.content-wrapper, .modal) table.dataTable > tfoot > tr > th { color: var(--mt-text-label); font-size: 13px; font-weight: 600; }
:is(.content-wrapper, .modal) table.dataTable > tbody > tr > td { color: var(--mt-text-body); }
:is(.content-wrapper, .modal) .dataTables_wrapper :is(.dataTables_info, .dataTables_length label, .dataTables_filter label) { color: var(--mt-muted); font-weight: 400; }
/* coloured status text in tables (Completed, Active, Completed By, ...): medium weight, not bold */
:is(.content-wrapper, .modal) table.dataTable td :is(.text-success, .text-green, .text-yellow, .text-red, .text-grey, .text-danger, .text-warning) strong,
:is(.content-wrapper, .modal) table.dataTable td strong:is(.text-success, .text-green, .text-yellow, .text-red, .text-grey, .text-danger, .text-warning) { font-weight: 500; }
/* paging (Previous 1 2 Next): small separate rounded buttons, muted, the current page a soft blue tint */
:is(.content-wrapper, .modal) .dataTables_paginate .pagination { display: inline-flex; gap: 4px; margin: 0; }
:is(.content-wrapper, .modal) .dataTables_paginate .pagination > li > :is(a, span) {
    background: var(--mt-surface); border: 1px solid var(--mt-border-soft); border-radius: 6px !important; color: var(--mt-text-label); font-size: 13px; line-height: 1.4;
    margin: 0; min-width: 30px; padding: 4px 10px; text-align: center; }
:is(.content-wrapper, .modal) .dataTables_paginate .pagination > li:not(.disabled):not(.active) > a:hover { background: var(--mt-surface-3); border-color: var(--mt-border); color: var(--mt-text); }
:is(.content-wrapper, .modal) .dataTables_paginate .pagination > li.active > :is(a, span) { background: var(--mt-blue-tint); border-color: var(--mt-blue-border); color: var(--mt-blue-text-hover); font-weight: 600; }
:is(.content-wrapper, .modal) .dataTables_paginate .pagination > li.disabled > :is(a, span) { background: var(--mt-surface); border-color: var(--mt-divider); color: var(--mt-fainter); }

/* expanded table rows (built from mt.getLabelValueRow): a tight label/value list; the halves size to their content */
td.mt-ai-row-detail { background: var(--mt-surface-detail); padding: 10px 16px !important; }
td.mt-ai-row-detail > .row { display: flex; gap: 24px; margin-left: 0; margin-right: 0; }
td.mt-ai-row-detail > .row::before, td.mt-ai-row-detail > .row::after { content: none; display: none; }
td.mt-ai-row-detail > .row > [class*="col-md-6"] { align-content: start; column-gap: 14px; display: grid; float: none; grid-template-columns: max-content minmax(0, 1fr); padding: 0; row-gap: 6px; }
td.mt-ai-row-detail > .row > [class*="col-md-6"]:first-child { flex: 1 1 0; min-width: 0; width: auto; }
td.mt-ai-row-detail > .row > [class*="col-md-6"]:last-child:not(:first-child):has(.mt-ai-txn-list) { flex: 0 1 auto; max-width: 65%; width: auto; }
td.mt-ai-row-detail > .row > .mt-ai-detail-full { width: 100%; }
td.mt-ai-row-detail > .row > [class*="col-md-6"] > .col-md-5,
td.mt-ai-row-detail > .row > [class*="col-md-6"] > .col-md-7 { float: none; min-height: 0; padding: 0; width: auto; }
td.mt-ai-row-detail .col-md-5 > strong.pull-right { color: var(--mt-muted); float: none !important; font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 22px; text-transform: uppercase; }
td.mt-ai-row-detail .col-md-7 { line-height: 22px; }
/* the details as a card joined to the row that opened it: a soft panel with a blue left edge (the sidebar cards' look); the halves
   (6/6 on payments, 4/8 on reviews, marked mt-ai-detail-half by admin-theme.js) are label/value grids */
table.dataTable > tbody > tr.shown > td { background: var(--mt-blue-tint) !important; border-bottom-color: transparent !important; }
td.mt-ai-row-detail { padding: 6px 12px 12px !important; }
td.mt-ai-row-detail .row.mt-ai-detail-card { background: var(--mt-surface); border: 1px solid var(--mt-border-soft); border-left: 3px solid var(--mt-blue-border); border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); display: flex; gap: 24px; margin: 0; padding: 10px 14px; width: auto !important; }
/* the edge in the row's brand color (data-brand-theme from Brand.theme), as the Trip page's Our Pricing card: blue, red, or green for black */
td.mt-ai-row-detail .row.mt-ai-detail-card[data-brand-theme="blue"], td.mt-ai-row-detail .row.mt-ai-detail-card[data-brand-theme="light-blue"] { border-left-color: var(--mt-blue); }
td.mt-ai-row-detail .row.mt-ai-detail-card[data-brand-theme="red"] { border-left-color: var(--mt-red); }
td.mt-ai-row-detail .row.mt-ai-detail-card[data-brand-theme="yellow"] { border-left-color: var(--mt-amber); }
td.mt-ai-row-detail .row.mt-ai-detail-card[data-brand-theme="black"], td.mt-ai-row-detail .row.mt-ai-detail-card[data-brand-theme="green"] { border-left-color: var(--mt-green); }
td.mt-ai-row-detail .row.mt-ai-detail-card[data-brand-theme="purple"] { border-left-color: #7c5cbf; } /* #hardcoded: AdminLTE purple, no theme variable */
td.mt-ai-row-detail .row.mt-ai-detail-card::before, td.mt-ai-row-detail .row.mt-ai-detail-card::after { content: none; display: none; }
td.mt-ai-row-detail .mt-ai-detail-card > .mt-ai-detail-half { align-content: start; column-gap: 14px; display: grid; float: none; grid-template-columns: max-content minmax(0, 1fr); padding: 0; row-gap: 6px; }
td.mt-ai-row-detail .mt-ai-detail-card > .mt-ai-detail-half:first-child { flex: 0 1 auto; min-width: 260px; width: auto; } /* #hardcoded: fits the short facts */
td.mt-ai-row-detail .mt-ai-detail-card > .mt-ai-detail-half + .mt-ai-detail-half { border-left: 1px solid var(--mt-divider); flex: 1 1 0; min-width: 0; padding-left: 20px; width: auto; }
td.mt-ai-row-detail .mt-ai-detail-card > .mt-ai-detail-half:not(:has(*)) { display: none; }
td.mt-ai-row-detail .mt-ai-detail-half > .col-md-5, td.mt-ai-row-detail .mt-ai-detail-half > .col-md-7 { float: none; min-height: 0; padding: 0; width: auto; }
td.mt-ai-row-detail .col-md-7 { color: var(--mt-text-strong); overflow-wrap: anywhere; }
td.mt-ai-row-detail .col-md-7 p:last-child { margin-bottom: 0; }
td.mt-ai-row-detail .mt-ai-detail-strong { font-weight: 600; }
.mt-ai-detail-person { align-items: center; background: var(--mt-surface-2); border: 1px solid var(--mt-border-soft); border-radius: 999px; display: inline-flex; font-size: 12.5px;
    gap: 6px; line-height: 20px; padding: 0 9px 0 7px; white-space: nowrap; }
.mt-ai-detail-person .fa { color: var(--mt-faint); font-size: 11px; }
.mt-ai-detail-person.is-assigned { background: var(--mt-blue-tint); border-color: var(--mt-blue-border); color: var(--mt-blue-text); font-weight: 600; }
.mt-ai-detail-person.is-assigned .fa { color: var(--mt-blue); }
/* Passenger(s): name tags in even columns, "NAME ..... M | 69 | 1957-03-21" */
.mt-ai-traveler-tags { display: grid; gap: 4px 6px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } /* #hardcoded: fits a long name + details */
.mt-ai-traveler-tag {
    align-items: center; background: var(--mt-surface); border: 1px solid var(--mt-border-soft); border-radius: 4px; display: flex; font-size: 12.5px; gap: 0;
    line-height: 22px; min-width: 0; padding: 0 8px; white-space: nowrap; }
.mt-ai-traveler-name { flex: 1; min-width: 0; overflow: hidden; padding-right: 10px; text-overflow: ellipsis; }
.mt-ai-traveler-gender, .mt-ai-traveler-age, .mt-ai-traveler-dob { box-sizing: content-box; color: var(--mt-muted); flex: none; font-variant-numeric: tabular-nums; padding: 0 8px; text-align: right; }
.mt-ai-traveler-gender { text-align: center; width: 10px; } /* #hardcoded column widths */
.mt-ai-traveler-age { width: 20px; }
.mt-ai-traveler-dob { padding-right: 0; width: 72px; }
.mt-ai-traveler-age, .mt-ai-traveler-dob { position: relative; }
.mt-ai-traveler-age::before, .mt-ai-traveler-dob::before { background: var(--mt-border); content: ""; height: 12px; left: 0; margin-top: -6px; position: absolute; top: 50%; width: 1px; }
/* Transaction(s): type (dot: green taken, amber held, red refunded/voided), amount, date, tag (click to copy) */
.mt-ai-txn-list { display: grid; grid-template-columns: max-content max-content max-content minmax(0, 1fr); max-width: 100%; row-gap: 2px; }
.mt-ai-txn { display: contents; }
.mt-ai-txn > * { border-bottom: 1px solid var(--mt-divider); line-height: 22px; min-width: 0; padding: 1px 14px 1px 0; white-space: nowrap; }
.mt-ai-txn:last-child > * { border-bottom: 0; }
.mt-ai-txn-type { color: var(--mt-text-strong); font-weight: 600; }
.mt-ai-txn-type::before { background: var(--mt-fainter); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 7px; vertical-align: 1px; width: 7px; }
.mt-ai-txn-in .mt-ai-txn-type::before { background: var(--mt-green); }
.mt-ai-txn-hold .mt-ai-txn-type::before { background: var(--mt-amber); }
.mt-ai-txn-out .mt-ai-txn-type::before { background: var(--mt-red); }
.mt-ai-txn-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.mt-ai-txn-date { color: var(--mt-muted); font-variant-numeric: tabular-nums; }
.mt-ai-txn-tag { color: var(--mt-muted) !important; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; justify-self: start; overflow: hidden; text-overflow: ellipsis; }
a.mt-ai-txn-tag { display: block; min-width: 0; }

/* ===== Text that copies to the clipboard: a small copy icon after it; a green check for a moment once copied ===== */
:is(.content-wrapper, .modal, .main-footer) a.mt-copy-to-clipboard:not(.btn):not(:has(.fa, .glyphicon)) {
    border-radius: 4px; cursor: pointer; margin: 0 -3px; padding: 1px 3px; transition: background-color .15s; }
:is(.content-wrapper, .modal, .main-footer) a.mt-copy-to-clipboard:not(.btn):not(:has(.fa, .glyphicon))::after {
    color: var(--mt-faint); content: "\f0c5"; display: inline-block; font: normal normal normal .82em/1 FontAwesome; margin-left: 5px;
    transition: color .15s; vertical-align: .05em; }
:is(.content-wrapper, .modal, .main-footer) a.mt-copy-to-clipboard:not(.btn):not(:has(.fa, .glyphicon)):hover { background: var(--mt-blue-tint); text-decoration: none; }
:is(.content-wrapper, .modal, .main-footer) a.mt-copy-to-clipboard:not(.btn):not(:has(.fa, .glyphicon)):hover::after { color: var(--mt-blue-text); }
:is(.content-wrapper, .modal, .main-footer) a.mt-copy-to-clipboard.mt-ai-copied:not(.btn):not(:has(.fa, .glyphicon))::after { color: var(--mt-green) !important; content: "\f00c"; }
/* a copy link with its own icon (the quote's Record Locator label): that icon becomes the green check for a moment (no ::after, which drew a box) */
:is(.content-wrapper, .modal, .main-footer) a.mt-copy-to-clipboard.mt-ai-copied:not(.btn) > .fa::before { content: "\f00c"; }
:is(.content-wrapper, .modal, .main-footer) a.mt-copy-to-clipboard.mt-ai-copied:not(.btn) > .fa { color: var(--mt-green) !important; }

/* ===== Rich text editors: the field's label at the start of the editor's toolbar (admin-theme.js); calmer toolbar text ===== */
:is(.content-wrapper, .modal, #mt-ai-s) .form-group.mt-ai-note-labeled > label.control-label { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
:is(.content-wrapper, .modal, #mt-ai-s) .form-group.mt-ai-note-labeled > div:has(> .note-editor) { margin-left: 0 !important; width: 100% !important; }
.note-toolbar > .mt-ai-note-label {
    align-items: center; border-right: 1px solid var(--mt-border-soft); color: var(--mt-text-body); display: inline-flex; float: left; font-size: 13px; font-weight: 600;
    margin: 5px 8px 0 0; min-height: 30px; padding: 0 12px 0 4px; white-space: nowrap; }
:is(.content-wrapper, .modal) .note-toolbar .note-btn { color: var(--mt-text-label); }
:is(.content-wrapper, .modal) .note-toolbar .note-btn:hover { color: var(--mt-text); }

/* ===== File fields: a large drop zone (admin-theme.js) ===== */
input[type="file"].mt-ai-dropzone-input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.mt-ai-dropzone {
    align-items: center; background: var(--mt-surface-detail); border: 1px dashed var(--mt-dashed); border-radius: 4px; color: var(--mt-muted); cursor: pointer; display: flex;
    flex-direction: column; font-size: 13px; gap: 4px; justify-content: center; min-height: 112px; padding: 14px 16px; text-align: center;
    transition: background-color .15s, border-color .15s; } /* #hardcoded: easy to hit */
.mt-ai-dropzone u { color: var(--mt-blue-text); font-weight: 600; text-decoration: none; }
.mt-ai-dropzone:hover, .mt-ai-dropzone:focus { border-color: var(--mt-blue); outline: 0; }
.mt-ai-dropzone:focus { box-shadow: 0 0 0 3px var(--mt-blue-ring); }
.mt-ai-dropzone.mt-ai-drag-over { background: var(--mt-blue-tint); border-color: var(--mt-blue); border-style: solid; color: var(--mt-blue-text-hover); }
.mt-ai-dropzone-icon { color: var(--mt-faint); font-size: 30px; line-height: 1; transition: color .15s, transform .15s; }
.mt-ai-dropzone:hover .mt-ai-dropzone-icon, .mt-ai-dropzone:focus .mt-ai-dropzone-icon { color: var(--mt-blue); }
.mt-ai-dropzone.mt-ai-drag-over .mt-ai-dropzone-icon { color: var(--mt-blue); transform: translateY(-2px); }
.mt-ai-dropzone-prompt { color: var(--mt-muted); font-size: 13px; }
.mt-ai-dropzone .mt-ai-dropzone-file:empty { display: none; }
.mt-ai-dropzone.mt-ai-has-file { background: var(--mt-surface-detail); border-style: dashed; color: var(--mt-text-strong); }
.mt-ai-dropzone.mt-ai-has-file .mt-ai-dropzone-icon { color: var(--mt-blue-text); }
.mt-ai-dropzone.mt-ai-has-file .mt-ai-dropzone-file { color: var(--mt-text-strong); flex: none; font-size: 13.5px; font-weight: 600; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ai-dropzone.mt-ai-has-file .mt-ai-dropzone-prompt { font-size: 12px; }

/* ===== Page header (AdminLTE content-header): one calm line. Title, muted tagline, a small grey reload icon, breadcrumb with › ===== */
.content-wrapper > .content-header:not(.mt-ai-page-head) { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 15px 8px; }
.content-wrapper > .content-header:not(.mt-ai-page-head) > h1 { color: var(--mt-text-strong); flex: 1 1 auto; font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; min-width: 0; }
.content-wrapper > .content-header:not(.mt-ai-page-head) > h1 > small { color: var(--mt-muted); font-size: 13px; font-weight: 400; padding-left: 6px; }
.content-wrapper > .content-header:not(.mt-ai-page-head) > h1 > a:first-child { color: var(--mt-faint); font-size: 15px; margin-right: 4px; vertical-align: 2px; }
.content-wrapper > .content-header:not(.mt-ai-page-head) > h1 > a:first-child:hover { color: var(--mt-blue); }
.content-wrapper > .content-header:not(.mt-ai-page-head) > .breadcrumb {
    align-items: center; background: none; border-radius: 0; display: flex; flex-wrap: wrap; float: none; font-size: 12px; gap: 0; margin: 0 0 0 auto; padding: 0; position: static; }
.content-wrapper > .content-header > .breadcrumb > li > a { color: var(--mt-muted); }
.content-wrapper > .content-header > .breadcrumb > li.active, .content-wrapper > .content-header > .breadcrumb > li.active > a { color: var(--mt-text-body); }
.content-wrapper > .content-header:not(.mt-ai-page-head) > .breadcrumb > li + li::before { color: var(--mt-fainter); content: "\203A"; padding: 0 6px; }
.content-wrapper > .content-header:not(.mt-ai-page-head) > .breadcrumb > li > a > .fa-dashboard, .content-wrapper > .content-header:not(.mt-ai-page-head) > .breadcrumb > li > a > .fa-home { display: none; }
.content-wrapper > .content-header > .breadcrumb .btn { font-size: 12px; line-height: 1.4; margin-left: 4px; padding: 3px 10px; }

/* date range clear (eraser) and other red buttons attached to fields: quiet, with a red icon */
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn > .btn-danger:not(#mt-ai-none) { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; color: var(--mt-red-text) !important; }
:is(.content-wrapper, .modal, #mt-ai-s) .input-group-btn > .btn-danger:not(#mt-ai-none):not([disabled]):hover { background: var(--mt-red-tint) !important; border-color: var(--mt-red-border) !important; }

/* select2: chosen items as soft tags, dropdowns with the theme's borders */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--mt-blue-tint) !important; border: 1px solid var(--mt-blue-border) !important; border-radius: 4px; color: var(--mt-blue-text-hover) !important; font-size: 12.5px; padding: 0 6px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--mt-blue-text) !important; margin-right: 4px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--mt-red-text) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--mt-blue) !important; }
.select2-dropdown { border-color: var(--mt-border) !important; box-shadow: var(--mt-shadow-menu); }

/* ===== Popups (Bootstrap modals): rounded card, quiet header and footer ===== */
.modal-content { border: 0; border-radius: 10px; box-shadow: 0 12px 32px rgba(17, 24, 39, .22); overflow: hidden; }
.modal-header { border-bottom-color: var(--mt-divider); padding: 12px 16px; }
.modal-header .modal-title, .modal-header > h4 { color: var(--mt-text); font-size: 16px; font-weight: 500; } /* the same ink and weight as box titles */
.modal-header .close { color: var(--mt-muted); opacity: .8; text-shadow: none; }
.modal-footer { border-top-color: var(--mt-divider); padding: 10px 16px; }
.modal-backdrop.in { opacity: .35; }
/* table toolbars inside popups: the same flexible row as on pages */
.modal .dataTables_wrapper > .row:first-child { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-left: 0; margin-right: 0; }
.modal .dataTables_wrapper > .row:first-child::before, .modal .dataTables_wrapper > .row:first-child::after { content: none; display: none; }
.modal .dataTables_wrapper > .row:first-child > [class*="col-"] { flex: 0 0 auto; float: none; padding: 0; width: auto; }
.modal .dataTables_wrapper > .row:first-child > [class*="col-"]:last-child { flex: 1 1 220px; min-width: 0; }
.modal .dataTables_wrapper .dataTables_filter { text-align: right; }
.modal .dt-buttons { display: inline-flex; flex-wrap: nowrap; }
.modal .dt-buttons .btn { border-radius: 0; font-size: 12px; margin-left: -1px; padding: 4px 10px; }
.modal .dt-buttons .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.modal .dt-buttons .btn:last-child { border-radius: 0 6px 6px 0; }
.modal table.dataTable thead > tr > th { padding-left: 6px; padding-right: 18px; }
.modal table.dataTable tbody > tr > td { padding-left: 6px; padding-right: 6px; }

/* ===== Top bar menus (favorites, reports, notifications, user): rounded cards with soft shadows ===== */
.main-header .navbar .dropdown-menu { border: 1px solid var(--mt-border-soft); border-radius: 8px; box-shadow: var(--mt-shadow-menu); padding: 4px 0; }
.main-header .navbar .dropdown-menu > li > a { color: var(--mt-text); font-size: 13.5px; padding: 6px 16px; }
.main-header .navbar .dropdown-menu > li > a > .fa, .main-header .navbar .dropdown-menu > li > a > .glyphicon, .main-header .navbar .dropdown-menu > li > a > .ion { color: var(--mt-faint); margin-right: 6px; }
.main-header .navbar .dropdown-menu > li > a:hover { background: var(--mt-surface-3); color: var(--mt-text-strong); }
.main-header .navbar .dropdown-menu > li > a:hover > .fa { color: var(--mt-blue); }
.main-header .navbar .dropdown-menu > .divider { background: var(--mt-divider); margin: 4px 0; }
/* user menu: name and title, Profile and Logout, the Dark mode switch, delegated users */
.navbar-custom-menu .user-menu > .dropdown-menu { overflow: hidden; padding: 0; width: 260px; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-header { background: var(--mt-surface-2) !important; border-bottom: 1px solid var(--mt-divider); height: auto !important; padding: 14px 16px; text-align: left; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-header > p { color: var(--mt-text-strong) !important; font-size: 15px; font-weight: 600; margin: 0; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-header > p > small { color: var(--mt-muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-footer { background: var(--mt-surface); display: flex; gap: 8px; justify-content: space-between; padding: 10px 16px !important; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-footer::before, .navbar-custom-menu .user-menu > .dropdown-menu > li.user-footer::after { content: none; display: none; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-footer > div { float: none; padding: 0; width: auto; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-footer .btn {
    background: var(--mt-surface) !important; border: 1px solid var(--mt-blue-border) !important; border-radius: 6px; color: var(--mt-blue-text) !important; font-size: 12.5px; font-weight: 600; padding: 4px 12px; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-footer .btn:hover { background: var(--mt-blue-tint) !important; border-color: var(--mt-blue) !important; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-body { background: var(--mt-surface); border-top: 1px solid var(--mt-divider); padding: 8px 16px 10px; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-body > p { color: var(--mt-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; margin: 2px 0 4px; text-transform: uppercase; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-body > p > strong { font-weight: inherit; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-body > a { border-radius: 4px; color: var(--mt-text) !important; display: block; font-size: 13.5px; margin: 0 -8px; padding: 4px 8px; }
.navbar-custom-menu .user-menu > .dropdown-menu > li.user-body > a:hover { background: var(--mt-surface-3); }
.navbar-custom-menu .user-menu > .dropdown-menu > li.mt-ai-theme-row {
    align-items: center; background: var(--mt-surface); border-top: 1px solid var(--mt-divider); display: flex; justify-content: space-between; padding: 10px 16px; }
.mt-ai-theme-row > label { color: var(--mt-text); cursor: pointer; font-size: 13.5px; font-weight: 500; margin: 0; }
.mt-ai-theme-row > label > .fa { color: var(--mt-faint); margin-right: 8px; width: 14px; }
.mt-ai-theme-row > label > .mt-ai-rainbow-icon { display: inline-block; font-size: 12px; line-height: 1; margin-right: 8px; text-align: center; width: 14px; }/* Rainbow mode: an emoji, as Font Awesome 4 has no rainbow */

/* a switch (dark mode) */
.mt-ai-switch { cursor: pointer; flex: none; height: 22px; margin: 0; position: relative; width: 40px; }
.mt-ai-switch input { height: 0; opacity: 0; position: absolute; width: 0; }
.mt-ai-switch span { background: var(--mt-border); border-radius: 22px; inset: 0; position: absolute; transition: background .15s; }
.mt-ai-switch span::before { background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); content: ""; height: 18px; left: 2px; position: absolute; top: 2px; transition: transform .15s; width: 18px; }
.mt-ai-switch input:checked + span { background: var(--mt-blue); }
.mt-ai-switch input:checked + span::before { transform: translateX(18px); }
.mt-ai-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--mt-blue-ring); }

/* ===== Report charts (Highcharts): the page's own surface and greys instead of a black panel (CSS outranks the chart's colour attributes) ===== */
.content-wrapper .highcharts-background { fill: var(--mt-surface) !important; }
.content-wrapper .highcharts-plot-background { fill: transparent !important; }
.content-wrapper :is(.highcharts-title, .highcharts-subtitle) { color: var(--mt-text) !important; fill: var(--mt-text) !important; font-weight: 600 !important; }
.content-wrapper :is(.highcharts-axis-labels, .highcharts-axis-title) text { color: var(--mt-muted) !important; fill: var(--mt-muted) !important; }
.content-wrapper .highcharts-axis-labels text tspan, .content-wrapper .highcharts-axis-title tspan { fill: var(--mt-muted) !important; }
.content-wrapper .highcharts-legend-item text { color: var(--mt-text-body) !important; fill: var(--mt-text-body) !important; }
.content-wrapper .highcharts-grid-line { stroke: var(--mt-divider) !important; }
.content-wrapper :is(.highcharts-axis-line, .highcharts-tick) { stroke: var(--mt-border) !important; }
.content-wrapper .highcharts-data-label text { fill: var(--mt-text-body) !important; }
.content-wrapper .highcharts-data-label text .highcharts-text-outline { fill: var(--mt-surface) !important; stroke: var(--mt-surface) !important; }
.content-wrapper .highcharts-credits { fill: var(--mt-faint) !important; }
/* the date range clear button (eraser), styled pink in managedtrip.css: quiet, with a red icon, like the other field helpers */
:is(.content-wrapper, .modal, #mt-ai-s) .btn.mt-date-range-clear-button { background: var(--mt-surface-2) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-red-text) !important; }
:is(.content-wrapper, .modal, #mt-ai-s) .btn.mt-date-range-clear-button:hover { background: var(--mt-red-tint) !important; border-color: var(--mt-red-border) !important; }
/* box "Clear" links (pink text on a box header): the theme's red */
.content-wrapper .box-header .btn-box-tool[style*="f49b95"] { color: var(--mt-red-text) !important; font-size: 12px; }

/* =====================================================================================================================================
   DARK MODE (html[data-mt-theme="dark"], set by the switch in the user menu). Slate surfaces, soft light text, the same blue/green/red/amber
   meanings in calmer, lighter shades. Part 1 swaps the theme's variables; part 2 recolours AdminLTE, Bootstrap and plugin surfaces that
   use their own fixed colours.
   ===================================================================================================================================== */
html[data-mt-theme="dark"] {
    color-scheme: dark;
    --mt-page: #0f141b;
    --mt-surface: #161d26;
    --mt-surface-2: #1b2430;
    --mt-surface-3: #222c39;
    --mt-surface-detail: #131a22;
    --mt-text: #e5e7eb;
    --mt-text-strong: #f3f4f6;
    --mt-text-body: #d1d5db;
    --mt-text-label: #b4bcc8;
    --mt-muted: #94a0b0;
    --mt-faint: #6b7787;
    --mt-fainter: #4b5563;
    --mt-border: #334155;
    --mt-border-soft: #2a3442;
    --mt-divider: #232d3a;
    --mt-dashed: #3d4a5c;
    --mt-blue: #4a9fd8;
    --mt-blue-hover: #5aaee6;
    --mt-blue-text: #7cc0ee;
    --mt-blue-text-hover: #a3d4f5;
    --mt-blue-border: #2f5f80;
    --mt-blue-tint: #15304a;
    --mt-blue-ring: rgba(74, 159, 216, .25);
    --mt-green: #1f9d5c;
    --mt-green-hover: #23b068;
    --mt-green-text: #5fd39a;
    --mt-green-text-hover: #8ae3b6;
    --mt-green-border: #2a6e4b;
    --mt-green-tint: #11301f;
    --mt-green-tint-border: #2a6e4b;
    --mt-red: #e5604f;
    --mt-red-text: #f19387;
    --mt-red-tint-text: #f4a399;
    --mt-red-border: #7a3530;
    --mt-red-tint: #3a1a18;
    --mt-red-tint-border: #7a3530;
    --mt-amber: #f0a73a;
    --mt-amber-text: #f2c27a;
    --mt-amber-strong: #f8dcab;
    --mt-amber-border: #6e5222;
    --mt-amber-tint: #33270f;
    --mt-on-solid: #fff;
    --mt-shadow-box: 0 1px 2px rgba(0, 0, 0, .4);
    --mt-shadow-menu: 0 8px 24px rgba(0, 0, 0, .5);
}

/* page, text, links */
html[data-mt-theme="dark"], html[data-mt-theme="dark"] body, html[data-mt-theme="dark"] .wrapper, html[data-mt-theme="dark"] .content-wrapper, html[data-mt-theme="dark"] .right-side { background: var(--mt-page) !important; }
html[data-mt-theme="dark"] body { color: var(--mt-text-body); }
html[data-mt-theme="dark"] a { color: var(--mt-blue-text); }
html[data-mt-theme="dark"] a:hover, html[data-mt-theme="dark"] a:focus { color: var(--mt-blue-text-hover); }
html[data-mt-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, strong, b, th, legend) { color: inherit; }
html[data-mt-theme="dark"] :is(h1, h2, h3, h4, h5, h6) { color: var(--mt-text-strong); }
html[data-mt-theme="dark"] .text-muted, html[data-mt-theme="dark"] small, html[data-mt-theme="dark"] .help-block { color: var(--mt-muted); }
html[data-mt-theme="dark"] hr { border-top-color: var(--mt-divider); }
html[data-mt-theme="dark"] .text-green, html[data-mt-theme="dark"] .text-success { color: var(--mt-green-text) !important; }
html[data-mt-theme="dark"] .text-red, html[data-mt-theme="dark"] .text-danger { color: var(--mt-red-text) !important; }
html[data-mt-theme="dark"] .text-yellow, html[data-mt-theme="dark"] .text-warning { color: var(--mt-amber-text) !important; }
html[data-mt-theme="dark"] :is(.text-light-blue, .text-blue, .text-aqua, .text-info, .text-primary) { color: var(--mt-blue-text) !important; }
html[data-mt-theme="dark"] .text-black { color: var(--mt-text-strong) !important; }
html[data-mt-theme="dark"] ::placeholder { color: var(--mt-faint) !important; }

/* top bar and left sidebar (every brand skin) */
html[data-mt-theme="dark"] .main-header .navbar, html[data-mt-theme="dark"] .main-header .logo { background: #111821 !important; border-bottom: 1px solid var(--mt-divider); }
html[data-mt-theme="dark"] .main-header .navbar :is(.nav > li > a, .sidebar-toggle), html[data-mt-theme="dark"] .main-header .logo { color: var(--mt-text-body) !important; border-color: var(--mt-divider) !important; }
html[data-mt-theme="dark"] .main-header .navbar :is(.nav > li > a, .sidebar-toggle):hover, html[data-mt-theme="dark"] .main-header .navbar .nav > li.open > a { background: var(--mt-surface-3) !important; color: var(--mt-text-strong) !important; }
html[data-mt-theme="dark"] .main-header .navbar-form .form-control, html[data-mt-theme="dark"] .main-header .navbar .form-control { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .main-header .navbar .btn { background: var(--mt-surface-3) !important; border-color: var(--mt-border) !important; color: var(--mt-text-body) !important; }
html[data-mt-theme="dark"] .main-sidebar, html[data-mt-theme="dark"] .left-side { background: #0c1117 !important; }
html[data-mt-theme="dark"] .sidebar-menu > li > a, html[data-mt-theme="dark"] .sidebar-menu .treeview-menu > li > a { color: var(--mt-muted) !important; }
html[data-mt-theme="dark"] .sidebar-menu > li:hover > a, html[data-mt-theme="dark"] .sidebar-menu > li.active > a { background: var(--mt-surface-2) !important; color: var(--mt-text-strong) !important; }
html[data-mt-theme="dark"] .sidebar-menu > li.header { background: #0a0e13 !important; color: var(--mt-faint) !important; }
html[data-mt-theme="dark"] .main-footer { background: var(--mt-surface) !important; border-top-color: var(--mt-divider) !important; color: var(--mt-text-body); }
html[data-mt-theme="dark"] .control-sidebar, html[data-mt-theme="dark"] .control-sidebar-bg { background: #0c1117 !important; }
/* the right-hand panel (Recent Activity) is AdminLTE's light variant: its tabs, hover rows and the header button that opens it */
html[data-mt-theme="dark"] .control-sidebar-light { border-left-color: var(--mt-divider) !important; color: var(--mt-text-body) !important; }
html[data-mt-theme="dark"] .control-sidebar-light .nav-tabs.control-sidebar-tabs { background: #0c1117 !important; border-bottom-color: var(--mt-divider) !important; }
html[data-mt-theme="dark"] .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a { background: #0a0e13 !important; border-color: var(--mt-divider) !important; color: var(--mt-faint) !important; }
html[data-mt-theme="dark"] .control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover { background: var(--mt-surface-2) !important; color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .control-sidebar-light .nav-tabs.control-sidebar-tabs > li.active > a { background: #0c1117 !important; border-bottom-color: transparent !important; color: var(--mt-text-strong) !important; }
html[data-mt-theme="dark"] .control-sidebar-light :is(.control-sidebar-heading, .control-sidebar-subheading) { color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .control-sidebar-light .control-sidebar-menu > li > a:hover { background: var(--mt-surface-2) !important; }
html[data-mt-theme="dark"] .control-sidebar-light .control-sidebar-menu .menu-info > .control-sidebar-subheading { color: var(--mt-blue-text) !important; }
html[data-mt-theme="dark"] .control-sidebar-light .control-sidebar-menu .menu-info > p { color: var(--mt-muted) !important; }
/* every header button (user menu, notifications, the panel button...): hover, focus and open are a dark highlight, never AdminLTE's white */
html[data-mt-theme="dark"] .main-header .navbar .nav > li > a:is(:hover, :focus, :active),
html[data-mt-theme="dark"] .main-header .navbar .nav > li.open > a,
html[data-mt-theme="dark"] .main-header .navbar .nav > .open > a:is(:hover, :focus),
html[data-mt-theme="dark"] .control-sidebar-open .main-header .navbar .nav > li > a[data-toggle="control-sidebar"] { background: var(--mt-surface-2) !important; color: var(--mt-text-strong) !important; }

/* boxes, tabs, panels, wells, alerts, labels */
html[data-mt-theme="dark"] :is(.box, .nav-tabs-custom, .panel, .well, .info-box, .callout, .list-group-item, .jumbotron, .thumbnail) { background: var(--mt-surface) !important; border-color: var(--mt-border-soft); color: var(--mt-text-body); }
html[data-mt-theme="dark"] .box .box { background: var(--mt-surface) !important; }
html[data-mt-theme="dark"] :is(.box-header, .box-footer, .panel-heading, .panel-footer) { background: transparent !important; border-color: var(--mt-divider) !important; color: var(--mt-text); }
html[data-mt-theme="dark"] .box.box-solid > .box-header { background: var(--mt-surface-2) !important; }
html[data-mt-theme="dark"] .box-header .btn-box-tool { color: var(--mt-faint); }
html[data-mt-theme="dark"] .nav-tabs-custom > .nav-tabs { background: transparent !important; border-bottom-color: var(--mt-divider) !important; }
html[data-mt-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a, html[data-mt-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active:hover > a { background: var(--mt-surface) !important; border-left-color: var(--mt-divider) !important; border-right-color: var(--mt-divider) !important; }
html[data-mt-theme="dark"] .nav-tabs-custom > .tab-content { background: var(--mt-surface) !important; }
html[data-mt-theme="dark"] .nav-tabs > li > a:hover { background: transparent; }
html[data-mt-theme="dark"] .nav-tabs { border-bottom-color: var(--mt-divider); }
html[data-mt-theme="dark"] .alert-info, html[data-mt-theme="dark"] .callout.callout-info { background: var(--mt-blue-tint) !important; border-color: var(--mt-blue-border) !important; color: var(--mt-blue-text-hover) !important; }
html[data-mt-theme="dark"] .alert-success, html[data-mt-theme="dark"] .callout.callout-success { background: var(--mt-green-tint) !important; border-color: var(--mt-green-border) !important; color: var(--mt-green-text-hover) !important; }
html[data-mt-theme="dark"] .alert-warning, html[data-mt-theme="dark"] .callout.callout-warning { background: var(--mt-amber-tint) !important; border-color: var(--mt-amber-border) !important; color: var(--mt-amber-strong) !important; }
html[data-mt-theme="dark"] .alert-danger, html[data-mt-theme="dark"] .callout.callout-danger { background: var(--mt-red-tint) !important; border-color: var(--mt-red-border) !important; color: var(--mt-red-tint-text) !important; }
html[data-mt-theme="dark"] .label-default { background: var(--mt-surface-3); color: var(--mt-text-body); }

/* forms */
html[data-mt-theme="dark"] :is(.form-control, input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="search"], textarea, select) {
    background-color: var(--mt-surface-2); border-color: var(--mt-border); color: var(--mt-text); }
html[data-mt-theme="dark"] .form-control[disabled], html[data-mt-theme="dark"] .form-control[readonly], html[data-mt-theme="dark"] fieldset[disabled] .form-control { background-color: var(--mt-surface-3) !important; color: var(--mt-muted); }
html[data-mt-theme="dark"] .input-group-addon { background: var(--mt-surface-3); border-color: var(--mt-border); color: var(--mt-muted); }
html[data-mt-theme="dark"] option { background: var(--mt-surface-2); color: var(--mt-text); }
html[data-mt-theme="dark"] label { color: var(--mt-text-label); }
html[data-mt-theme="dark"] .checkbox label, html[data-mt-theme="dark"] .radio label { color: var(--mt-text-body); }

/* buttons that keep Bootstrap's own grey (btn-default outside the themed areas, flat buttons) */
html[data-mt-theme="dark"] .btn-default { background-color: var(--mt-surface-3); border-color: var(--mt-border); color: var(--mt-text-body); }
html[data-mt-theme="dark"] .btn-default:hover { background-color: var(--mt-surface-2); color: var(--mt-text-strong); }

/* tables */
html[data-mt-theme="dark"] .table, html[data-mt-theme="dark"] table.dataTable { background: transparent !important; color: var(--mt-text-body); }
html[data-mt-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(th, td), html[data-mt-theme="dark"] table.dataTable :is(thead th, tfoot th, tbody td), html[data-mt-theme="dark"] table.dataTable.no-footer { border-color: var(--mt-divider) !important; }
html[data-mt-theme="dark"] .table > thead > tr > th { border-bottom-color: var(--mt-border-soft) !important; }
html[data-mt-theme="dark"] table.dataTable tbody tr, html[data-mt-theme="dark"] .table > tbody > tr { background-color: transparent !important; }
html[data-mt-theme="dark"] :is(.table-striped > tbody > tr:nth-of-type(odd), table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd) { background-color: var(--mt-surface-detail) !important; }
html[data-mt-theme="dark"] :is(.table-hover > tbody > tr:hover, table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover) { background-color: var(--mt-surface-3) !important; }
html[data-mt-theme="dark"] table.dataTable tbody tr.selected { background-color: var(--mt-blue-tint) !important; }
html[data-mt-theme="dark"] table.dataTable.display tbody tr > .sorting_1, html[data-mt-theme="dark"] table.dataTable.display tbody tr > :is(.sorting_2, .sorting_3) { background-color: transparent !important; }
html[data-mt-theme="dark"] table.dataTable thead :is(.sorting, .sorting_asc, .sorting_desc)::after { opacity: .5; }
html[data-mt-theme="dark"] .dataTables_wrapper .dataTables_processing { background: var(--mt-surface-2) !important; color: var(--mt-text); }
html[data-mt-theme="dark"] .pagination > li > :is(a, span) { background: var(--mt-surface); border-color: var(--mt-border-soft); color: var(--mt-text-label); }

/* menus and popups */
html[data-mt-theme="dark"] .dropdown-menu { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; }
html[data-mt-theme="dark"] .dropdown-menu > li > a { color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .dropdown-menu > li > a:hover, html[data-mt-theme="dark"] .dropdown-menu > li > a:focus { background: var(--mt-surface-3) !important; color: var(--mt-text-strong) !important; }
html[data-mt-theme="dark"] .dropdown-menu > .divider { background: var(--mt-divider) !important; }
html[data-mt-theme="dark"] .navbar-nav > :is(.messages-menu, .notifications-menu, .tasks-menu) > .dropdown-menu > :is(li.header, li.footer), html[data-mt-theme="dark"] .navbar-nav > :is(.messages-menu, .notifications-menu, .tasks-menu) > .dropdown-menu > li.footer > a, html[data-mt-theme="dark"] .navbar-nav > :is(.messages-menu, .notifications-menu, .tasks-menu) > .dropdown-menu > li .menu > li > a { background: var(--mt-surface-2) !important; border-color: var(--mt-divider) !important; color: var(--mt-text-body) !important; }
html[data-mt-theme="dark"] :is(.modal-content, .modal-header, .modal-body, .modal-footer) { background: var(--mt-surface) !important; color: var(--mt-text-body); }
html[data-mt-theme="dark"] .modal-backdrop.in { opacity: .6; }
html[data-mt-theme="dark"] .close { color: var(--mt-text); }
html[data-mt-theme="dark"] .popover, html[data-mt-theme="dark"] .popover-title { background: var(--mt-surface-2); border-color: var(--mt-border); color: var(--mt-text-body); }
html[data-mt-theme="dark"] .tooltip-inner { background: #000; }
html[data-mt-theme="dark"] .swal2-popup, html[data-mt-theme="dark"] .swal2-modal { background: var(--mt-surface) !important; color: var(--mt-text-body) !important; }
html[data-mt-theme="dark"] :is(.swal2-title, .swal2-content) { color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .swal2-input { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .bootstrap-dialog .modal-header { background: var(--mt-surface-2) !important; }
html[data-mt-theme="dark"] .mt-date-offset-box { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; }
html[data-mt-theme="dark"] .mt-date-offset-box .mt-date-offset-preview { color: var(--mt-text-strong) !important; }

/* select2 */
html[data-mt-theme="dark"] .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; }
html[data-mt-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .select2-container--default.select2-container--disabled :is(.select2-selection--single, .select2-selection--multiple) { background: var(--mt-surface-3) !important; }
html[data-mt-theme="dark"] .select2-dropdown { background: var(--mt-surface-2) !important; color: var(--mt-text); }
html[data-mt-theme="dark"] .select2-search__field { background: var(--mt-surface) !important; border-color: var(--mt-border) !important; color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--mt-surface-3) !important; }

/* date pickers */
html[data-mt-theme="dark"] :is(.datepicker, .datepicker-dropdown, .daterangepicker, .bootstrap-datetimepicker-widget) { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; color: var(--mt-text-body); }
html[data-mt-theme="dark"] .datepicker-dropdown::after, html[data-mt-theme="dark"] .daterangepicker::after { border-bottom-color: var(--mt-surface-2) !important; }
html[data-mt-theme="dark"] :is(.datepicker, .daterangepicker, .bootstrap-datetimepicker-widget) table :is(td, th) { background: transparent; color: var(--mt-text-body); }
html[data-mt-theme="dark"] :is(.datepicker, .daterangepicker, .bootstrap-datetimepicker-widget) table td:is(.day, span):hover, html[data-mt-theme="dark"] .datepicker table tr td span:hover { background: var(--mt-surface-3) !important; }
html[data-mt-theme="dark"] :is(.datepicker, .daterangepicker) td:is(.old, .new, .off) { color: var(--mt-fainter) !important; }
html[data-mt-theme="dark"] .daterangepicker :is(.calendar-table, .ranges li) { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; color: var(--mt-text-body); }
html[data-mt-theme="dark"] .daterangepicker td.in-range { background: var(--mt-blue-tint) !important; color: var(--mt-text); }

/* rich text editors */
html[data-mt-theme="dark"] .note-editor.note-frame { border-color: var(--mt-border) !important; }
html[data-mt-theme="dark"] .note-editor .note-toolbar, html[data-mt-theme="dark"] .note-editor .note-statusbar { background: var(--mt-surface-2) !important; border-color: var(--mt-border) !important; }
html[data-mt-theme="dark"] .note-editor .note-editable { background: var(--mt-surface) !important; color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .note-editor .note-btn, html[data-mt-theme="dark"] .note-toolbar .note-btn { background: var(--mt-surface-3) !important; border-color: var(--mt-border) !important; color: var(--mt-text-body) !important; }
html[data-mt-theme="dark"] .note-editor .note-codable { background: #0b0f14 !important; color: var(--mt-text) !important; }

/* toasts (toastr, every notification): a card in the theme's surface with the type's color on its left edge and icon, dark text, a thin
   progress bar. Info blue, success green, warning amber, error red. */
#toast-container > div.toast { background: var(--mt-surface) !important; background-image: none !important; border: 1px solid var(--mt-border); border-left: 4px solid var(--mt-ai-toast, var(--mt-blue));
    border-radius: 10px; box-shadow: var(--mt-shadow-menu, 0 10px 30px rgba(0, 0, 0, .16)) !important; color: var(--mt-text); opacity: 1; padding: 12px 34px 12px 46px; position: relative; }
#toast-container > div.toast:hover { box-shadow: var(--mt-shadow-menu, 0 10px 30px rgba(0, 0, 0, .2)) !important; }
#toast-container > div.toast::before { color: var(--mt-ai-toast, var(--mt-blue)); content: "\f05a"; font: normal normal normal 18px/1 FontAwesome; left: 16px; position: absolute; top: 14px; }
#toast-container > div.toast-info { --mt-ai-toast: var(--mt-blue); }
#toast-container > div.toast-success { --mt-ai-toast: var(--mt-green); }
#toast-container > div.toast-success::before { content: "\f058"; }
#toast-container > div.toast-warning { --mt-ai-toast: var(--mt-amber); }
#toast-container > div.toast-warning::before { content: "\f071"; }
#toast-container > div.toast-error { --mt-ai-toast: var(--mt-red); }
#toast-container > div.toast-error::before { content: "\f06a"; }
#toast-container .toast-title { color: var(--mt-text-strong); font-size: 14px; font-weight: 700; margin-bottom: 2px; }
#toast-container .toast-message { color: var(--mt-text); font-size: 13px; line-height: 1.45; }
#toast-container .toast-message a:not(.btn) { color: var(--mt-blue-text); }
#toast-container .toast-message .btn { margin-top: 6px; }
#toast-container .toast-close-button { color: var(--mt-muted); font-size: 18px; opacity: .8; position: absolute; right: 10px; text-shadow: none; top: 8px; }
#toast-container .toast-close-button:hover { color: var(--mt-text-strong); opacity: 1; }
#toast-container .toast-progress { background: var(--mt-ai-toast, var(--mt-blue)); border-radius: 0 0 0 6px; height: 3px; opacity: .55; }

/* charts follow the variables already (light panel in light mode, dark in dark mode) */
/* brand logos are JPGs on white: keep their box a white tile in dark mode so they stay visible */
html[data-mt-theme="dark"] #tripForm .input-group-addon.mt-ai-brand-logo-box { background: var(--mt-surface) !important; border-color: var(--mt-border) !important; }
html[data-mt-theme="dark"] #tripForm .mt-ai-brand-logo-box img { mix-blend-mode: screen; } /* the inverted logo (below) blends into the dark box; light mode multiplies */
html[data-mt-theme="dark"] .text-navy { color: var(--mt-blue-text) !important; }
html[data-mt-theme="dark"] .select2-selection--multiple .select2-search__field { background: transparent !important; }
/* legacy inline colours (itinerary tables, pricing rows, hidden helper text) in dark mode */
html[data-mt-theme="dark"] :is(.content-wrapper, .modal) :is([style*="color: #ffffff"], [style*="color:#ffffff"], [style*="color: #fff;"], [style*="color:#fff;"]):not(.btn):not(.label):not(.badge):not([style*="background"]) { color: transparent !important; }
html[data-mt-theme="dark"] :is(.content-wrapper, .modal) :is([style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="background-color:#fff;"], [style*="background-color: #fff;"], [style*="background:#fff;"], [style*="background: #fff;"], [style*="background-color: white"]) { background-color: var(--mt-surface) !important; }
html[data-mt-theme="dark"] :is(.content-wrapper, .modal) :is([style*="#dcebf7"], [style*="#DCEBF7"]) { background-color: var(--mt-blue-tint) !important; color: var(--mt-blue-text-hover) !important; }
html[data-mt-theme="dark"] :is(.content-wrapper, .modal) :is([style*="#efefef"], [style*="#eeeeee"], [style*="#f0f0f0"], [style*="#f5f5f5"], [style*="#f9f9f9"], [style*="#E2E4EA"], [style*="#e2e4ea"]) { background-color: var(--mt-surface-2) !important; }
html[data-mt-theme="dark"] :is(.content-wrapper, .modal) :is([style*="color: #000000"], [style*="color:#000000"], [style*="color: #000;"], [style*="color:#000;"], [style*="color: #333333"], [style*="color:#333333"], [style*="color: #333;"], [style*="color:#333;"], [style*="color: black"]) { color: var(--mt-text) !important; }
html[data-mt-theme="dark"] :is(.content-wrapper, .modal) :is([style*="color: #225b8a"], [style*="color:#225b8a"]) { color: var(--mt-blue-text) !important; }
html[data-mt-theme="dark"] .nav-tabs > li.active > a, html[data-mt-theme="dark"] .nav-tabs > li.active > a:hover, html[data-mt-theme="dark"] .nav-tabs > li.active > a:focus {
    background: var(--mt-surface) !important; border-color: var(--mt-border-soft) var(--mt-border-soft) transparent !important; color: var(--mt-text) !important; }
html[data-mt-theme="dark"] .nav-pills > li.active > a { background: var(--mt-blue-tint) !important; color: var(--mt-blue-text-hover) !important; }

/* ===== Leftover colour buttons (AdminLTE bg-* colours, brand-coloured login buttons, inline-coloured links such as Open in CRM):
   everyday blue outline like every other action; the button text already says which brand or tool it opens ===== */
:is(.content-wrapper, .modal) .btn:is([class*=" bg-"], [class^="bg-"], .mt-btn-blue, .mt-btn-red, .mt-btn-black, .mt-btn-pink, [style*="#ff7a59"]):not(.mt-date-range-clear-button):not(#mt-ai-none) {
    background: var(--mt-surface) !important; border: 1px solid var(--mt-blue-border) !important; color: var(--mt-blue-text) !important; font-weight: 600; }
:is(.content-wrapper, .modal) .btn:is([class*=" bg-"], [class^="bg-"], .mt-btn-blue, .mt-btn-red, .mt-btn-black, .mt-btn-pink, [style*="#ff7a59"]):not(.mt-date-range-clear-button):not(#mt-ai-none):hover {
    background: var(--mt-blue-tint) !important; border-color: var(--mt-blue) !important; color: var(--mt-blue-text-hover) !important; }

/* ===== Expanded detail panels (CRM contact/company and similar): calm label/value tables, the panel's main Save solid green ===== */
:is(.content-wrapper, .modal) .mt-persist-box { border-top: 1px solid var(--mt-divider); border-radius: 8px; box-shadow: none; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 > .fa { color: var(--mt-faint); font-size: 18px; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header .btn-success:not(#mt-ai-none) {
    background: var(--mt-green) !important; border-color: var(--mt-green) !important; color: var(--mt-on-solid) !important; order: 99; margin-left: auto; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header .btn-success:not(#mt-ai-none):hover { background: var(--mt-green-hover) !important; border-color: var(--mt-green-hover) !important; }
:is(.content-wrapper, .modal) .table :is(td, th).col-md-5 > strong, :is(.content-wrapper, .modal) .table-condensed td:first-child > strong:only-child {
    color: var(--mt-text-label); font-size: 13px; font-weight: 600; }
:is(.content-wrapper, .modal) .table-condensed > tbody > tr > td { border-top-color: var(--mt-divider); color: var(--mt-text-body); }
/* detail panel header: icon, first/last name fields, brand logins, Open in CRM and Save on one centred line, evenly spaced */
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 { gap: 8px; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 > strong { display: contents; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 > strong > .form-control { font-weight: 600; width: 180px; } /* #hardcoded: fits a name */
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 > form { display: inline-flex !important; margin: 0 !important; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 :is(.btn, input[type="submit"]) {
    align-items: center; display: inline-flex; float: none !important; font-size: 12px; height: 30px; line-height: 1; margin: 0 !important; padding: 0 12px; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 > form + :not(form) { margin-left: 4px !important; }
/* table action cells (Trips, Open in CRM, ...): the same size and spacing, no stray margins */
:is(.content-wrapper, .modal) table.dataTable td > a.btn:is([style*="margin-bottom"], [style*="margin-left"]) { margin: 0 6px 0 0 !important; vertical-align: middle; }
/* detail panel label/value tables: label and value centred on the same line (labels sat at the top of rows with a field in them) */
:is(.content-wrapper, .modal) .mt-persist-box .table > tbody > tr > td { vertical-align: middle; }
:is(.content-wrapper, .modal) .mt-persist-box .table > tbody > tr > td > .form-control { margin: 2px 0; }
:is(.content-wrapper, .modal) .mt-persist-box .table > thead > tr > th { border-bottom-color: var(--mt-border-soft); color: var(--mt-text-label); font-size: 13px; font-weight: 600; }
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 { width: 100%; } /* so Save Changes can sit at the right edge */
:is(.content-wrapper, .modal) .mt-persist-box > .box-header > h3 > .btn-success:not(#mt-ai-none) { margin-left: auto !important; }

/* ===== Sign-in pages (public/login.jsp, public/authy.jsp): a centred card on the page background, larger fields, one solid Sign In ===== */
body.login-page { background: var(--mt-page) !important; }
body.login-page .login-box { margin: 9vh auto 40px; max-width: calc(100% - 32px); width: 380px; } /* #hardcoded: card width */
body.login-page .login-box .logo { margin-bottom: 18px; text-align: center; }
body.login-page .login-box .logo > a { color: var(--mt-text-strong) !important; font-family: inherit !important; font-size: 30px !important; font-weight: 300; letter-spacing: -.01em; }
body.login-page .login-box .logo > a > b { color: var(--mt-blue); font-weight: 700; }
body.login-page .login-box-body {
    background: var(--mt-surface); border: 1px solid var(--mt-border-soft); border-radius: 12px; box-shadow: 0 8px 28px rgba(17, 24, 39, .08); padding: 26px 28px 24px; }
body.login-page .login-box-msg { color: var(--mt-text); font-size: 16px; font-weight: 500; padding: 0 0 18px; text-align: left; }
body.login-page .form-group { margin-bottom: 14px; }
body.login-page .form-control { background: var(--mt-surface); border-color: var(--mt-border); border-radius: 6px; box-shadow: none; color: var(--mt-text); font-size: 14px; height: 42px; padding-right: 40px; }
body.login-page .form-control:focus { border-color: var(--mt-blue); box-shadow: 0 0 0 3px var(--mt-blue-ring); }
body.login-page .form-control-feedback { color: var(--mt-faint); height: 42px; line-height: 42px; width: 40px; }
body.login-page .login-box-body label { color: var(--mt-muted); font-size: 13px; font-weight: 400; }
body.login-page .login-box-body input[type="checkbox"] { accent-color: var(--mt-blue); vertical-align: -1px; }
body.login-page .login-box-body .row { align-items: center; display: flex; flex-wrap: wrap; margin-top: 4px; }
body.login-page .login-box-body .row::before, body.login-page .login-box-body .row::after { content: none; display: none; }
body.login-page .login-box-body .row > [class*="col-"] { float: none; }
body.login-page .login-box-body .row .form-group, body.login-page .login-box-body .row .checkbox { margin: 0; }
/* Sign In: the one solid button; Help (Authy): a quiet outline */
body.login-page .btn-primary { background: var(--mt-blue) !important; border: 1px solid var(--mt-blue) !important; border-radius: 6px !important; color: var(--mt-on-solid) !important; font-size: 14px; font-weight: 600; height: 40px; }
body.login-page .btn-primary:hover { background: var(--mt-blue-hover) !important; border-color: var(--mt-blue-hover) !important; }
body.login-page .btn-warning { background: var(--mt-surface) !important; border: 1px solid var(--mt-blue-border) !important; border-radius: 6px !important; color: var(--mt-blue-text) !important; font-size: 14px; font-weight: 600; height: 40px; }
body.login-page .btn-warning:hover { background: var(--mt-blue-tint) !important; border-color: var(--mt-blue) !important; }
/* sign-in error: a soft red note inside the card */
body.login-page .login-box-body > .box { background: none; border: 0; box-shadow: none; margin: 0 0 16px; }
body.login-page .login-box-body .callout-danger { background: var(--mt-red-tint) !important; border: 1px solid var(--mt-red-tint-border) !important; border-radius: 8px; color: var(--mt-red-tint-text) !important; margin: 0; padding: 10px 14px; }
body.login-page .login-box-body .callout-danger h4 { color: inherit; font-size: 14px; font-weight: 600; margin: 0 0 2px; }
body.login-page .login-box-body .callout-danger p { color: inherit; font-size: 13px; margin: 0; }
/* sign-in: the show/hide password eye (public/login.jsp) sits where the lock icon was, and can be clicked */
body.login-page .mt-ai-password-toggle { background: none; border: 0; color: var(--mt-faint); cursor: pointer; padding: 0; pointer-events: auto; }
body.login-page .mt-ai-password-toggle:hover, body.login-page .mt-ai-password-toggle:focus-visible { color: var(--mt-blue); outline: 0; }
body.login-page .mt-ai-password-toggle .fa { font-size: 15px; }

/* ===== "Open" links (an id with a magnifying glass, e.g. users, Fare Logic, Trips in reports): the id itself is the link, no magnifier.
   Links that open a new tab get a small ↗. Applies wherever the old markup is produced (7 places in pages and scripts). ===== */
:is(.content-wrapper, .modal) a:has(> .fa-search-plus) {
    align-items: baseline; color: var(--mt-blue-text); display: inline-flex; font-variant-numeric: tabular-nums; font-weight: 600; gap: 4px; text-decoration: none; white-space: nowrap; width: auto; }
:is(.content-wrapper, .modal) a:has(> .fa-search-plus) > .fa-search-plus { display: none; }
:is(.content-wrapper, .modal) a:has(> .fa-search-plus) > b { font-weight: inherit; }
:is(.content-wrapper, .modal) a:has(> .fa-search-plus):hover { color: var(--mt-blue-text-hover); text-decoration: underline; text-underline-offset: 2px; }
:is(.content-wrapper, .modal) a[target]:not([target="_self"]):has(> .fa-search-plus)::after { color: var(--mt-faint); content: "\f08e"; font: normal normal normal 10px/1 FontAwesome; }
:is(.content-wrapper, .modal) a[target]:not([target="_self"]):has(> .fa-search-plus):hover::after { color: var(--mt-blue-text-hover); }

/* ===== Yes/no status icons in tables (Enabled, ...): small round tags in the theme's soft tints instead of large solid circles ===== */
:is(.content-wrapper, .modal) td :is(.fa-check-circle, .fa-check-circle-o, .fa-times-circle, .fa-times-circle-o):is(.text-green, .text-red, .text-success, .text-danger) {
    align-items: center; border-radius: 50%; display: inline-flex; font-size: 0 !important; height: 22px; justify-content: center; vertical-align: middle; width: 22px; }
:is(.content-wrapper, .modal) td :is(.fa-check-circle, .fa-check-circle-o):is(.text-green, .text-success) { background: var(--mt-green-tint); box-shadow: inset 0 0 0 1px var(--mt-green-tint-border); }
:is(.content-wrapper, .modal) td :is(.fa-check-circle, .fa-check-circle-o):is(.text-green, .text-success)::before { color: var(--mt-green-text); content: "\f00c"; font-size: 11px; }
:is(.content-wrapper, .modal) td :is(.fa-times-circle, .fa-times-circle-o):is(.text-red, .text-danger) { background: var(--mt-red-tint); box-shadow: inset 0 0 0 1px var(--mt-red-tint-border); }
:is(.content-wrapper, .modal) td :is(.fa-times-circle, .fa-times-circle-o):is(.text-red, .text-danger)::before { color: var(--mt-red-text); content: "\f00d"; font-size: 11px; }
/* Test Mode (bug icon) in tables: the same round tag, in amber */
:is(.content-wrapper, .modal) td .fa-bug:is(.text-yellow, .text-orange, .text-warning, [style*="color"]) {
    align-items: center; background: var(--mt-amber-tint); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mt-amber-border); color: var(--mt-amber-text) !important;
    display: inline-flex; font-size: 12px !important; height: 22px; justify-content: center; vertical-align: middle; width: 22px; }

/* ===== Rows with an "open" link (the id that used to have a magnifier): the whole row opens the record (admin-theme.js).
   A soft blue tint and a pointer on hover say so; the id underlines with the row. ===== */
:is(.content-wrapper, .modal) table tbody > tr:has(a > .fa-search-plus) { cursor: pointer; }
:is(.content-wrapper, .modal) table.dataTable tbody > tr:has(a > .fa-search-plus):hover,
:is(.content-wrapper, .modal) table.dataTable tbody > tr:has(a > .fa-search-plus):hover > td { background-color: var(--mt-blue-tint) !important; }
:is(.content-wrapper, .modal) table tbody > tr:has(a > .fa-search-plus):hover a:has(> .fa-search-plus) { color: var(--mt-blue-text-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Recent Activity (right sidebar): some saved icon names are Font Awesome 5 names this app's Font Awesome 4.7 doesn't have
   (RecentlyViewed.Type), which left empty circles. Map them to their 4.7 glyphs so saved history shows icons too. */
.fa-dollar-sign::before { content: "\f155"; }
.fa-sun::before { content: "\f185"; }
.fa-graduation::before { content: "\f19d"; }

/* Fields with date shortcut buttons (Deposit Due, Final Names Due, ...): one flex row, so the field and every button share one top, bottom and height */
:is(.content-wrapper, .modal) .input-group:has(> .mt-date-calculator) { align-items: stretch; display: flex; width: 100%; }
:is(.content-wrapper, .modal) .input-group:has(> .mt-date-calculator) > .form-control { flex: 1 1 auto; height: auto; min-height: 34px; min-width: 96px; width: auto; }
:is(.content-wrapper, .modal) .input-group:has(> .mt-date-calculator) > :is(.input-group-btn, .input-group-addon) { align-items: stretch; display: flex; flex: none; width: auto; }
:is(.content-wrapper, .modal) .input-group:has(> .mt-date-calculator) > .input-group-btn > .btn { align-items: center; display: inline-flex; height: auto; justify-content: center; }
:is(.content-wrapper, .modal) .input-group:has(> .mt-date-calculator) > .input-group-addon { align-items: center; }
/* a value switch in a form row (Credit Card Surcharge on the Trip page): the switch and its value text on the field's line */
.mt-ai-value-switch-row { align-items: center; display: flex; gap: 10px; min-height: 34px; }
.mt-ai-value-switch-text { color: var(--mt-text); font-size: 13px; font-weight: 600; }

/* Every "Select All ..." button attached to a multi-select (review Quotes, passengers, ...): joined to the right end of the field on the same
   line, instead of a full-width button squeezed under it */
div:has(> .input-group-btn > [onclick*="select2SelectAll"]) { align-items: stretch; display: flex; }
div:has(> .input-group-btn > [onclick*="select2SelectAll"]) > .select2-container { flex: 1 1 0; min-width: 0; width: auto !important; }
div:has(> .input-group-btn > [onclick*="select2SelectAll"]) > .select2-container .select2-selection { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; height: 100%; }
div:has(> .input-group-btn > [onclick*="select2SelectAll"]) > .input-group-btn { display: flex; flex: none; width: auto; }
.input-group-btn > .btn[onclick*="select2SelectAll"] {
    border-radius: 0 4px 4px 0 !important; margin-left: -1px; padding-left: 14px; padding-right: 14px; white-space: nowrap; width: auto; }

/* Restricted Save Mode: one identical pill in the page header and in the bottom bar (the bottom bar's 14px value style must not reach it) */
.mt-primary-save-restricted:not([style*="display: none"]):not([style*="display:none"]) {
    box-sizing: border-box; font-size: 12px !important; font-weight: 600; gap: 5px; height: 27px; letter-spacing: 0; line-height: 1; padding: 0 10px; text-transform: none; }
.mt-primary-save-restricted :is(.mt-primary-save-restricted-label, .mt-primary-save-restricted-text) {
    font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1; margin: 0 !important; text-transform: none !important; }
#tripDetailFooter > .mt-primary-save-restricted { vertical-align: middle; }
/* Restricted Save Mode: the same amber colours in the header and the bottom bar (the bottom bar's value colour must not reach it) */
.mt-primary-save-restricted .mt-primary-save-restricted-label { color: var(--mt-amber-text) !important; }
.mt-primary-save-restricted .mt-primary-save-restricted-text { color: var(--mt-amber-strong) !important; }

/* Multi-selects (select2): the placeholder and chips start at the same 12px indent as the text in every other field */
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding-left: 12px; padding-right: 8px; }
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { margin-left: 0; margin-top: 6px; padding-left: 0; }

/* =====================================================================================================================================
   CONDENSED MODE (html[data-mt-density="condensed"], the switch in the user menu, saved per browser; works with light and dark).
   For agents who want as much on one screen as possible: 12px text, 26px fields and buttons, tight rows, a 38px top bar, a narrower
   sidebar, thin page header, panels, tabs, tables and popups. Desktop only by design.
   ===================================================================================================================================== */
html[data-mt-density="condensed"] body { font-size: 12px; line-height: 1.35; }
html[data-mt-density="condensed"] :is(h1, .h1) { font-size: 18px; }
html[data-mt-density="condensed"] :is(h3, .h3) { font-size: 15px; }
html[data-mt-density="condensed"] :is(h4, .h4) { font-size: 13px; }

/* top bar and sidebar */
html[data-mt-density="condensed"] .main-header .navbar { min-height: 38px; }
html[data-mt-density="condensed"] .main-header .logo { font-size: 17px; height: 38px; line-height: 38px; }
html[data-mt-density="condensed"] .main-header .navbar :is(.nav > li > a, .sidebar-toggle) { padding-bottom: 9px; padding-top: 9px; line-height: 20px; }
html[data-mt-density="condensed"] .main-header .navbar .navbar-form, html[data-mt-density="condensed"] .main-header .navbar form { margin-bottom: 0; margin-top: 5px; }
html[data-mt-density="condensed"] .main-header .navbar :is(.form-control, .btn) { height: 28px; padding-bottom: 2px; padding-top: 2px; }
html[data-mt-density="condensed"] :is(.main-sidebar, .left-side) { padding-top: 38px; }
@media (min-width: 768px) {
    html[data-mt-density="condensed"] body:not(.sidebar-collapse) :is(.main-sidebar, .left-side) { width: 190px; } /* #hardcoded: narrower sidebar */
    html[data-mt-density="condensed"] body:not(.sidebar-collapse) :is(.content-wrapper, .right-side, .main-footer) { margin-left: 190px; }
    html[data-mt-density="condensed"] body:not(.sidebar-collapse) .main-header .logo { width: 190px; }
    html[data-mt-density="condensed"] body:not(.sidebar-collapse) .main-header .navbar { margin-left: 190px; }
}
html[data-mt-density="condensed"] .sidebar-menu > li > a { padding: 6px 10px 6px 12px; }
html[data-mt-density="condensed"] .sidebar-menu > li.header { padding: 6px 12px; }

/* page header and content */
html[data-mt-density="condensed"] .content { padding: 6px 8px; }
html[data-mt-density="condensed"] .content-wrapper > .content-header { padding: 5px 10px 1px !important; }
html[data-mt-density="condensed"] .content-wrapper > .content-header > h1 { font-size: 18px; }
html[data-mt-density="condensed"] .content-wrapper > .content-header > .breadcrumb { font-size: 11px; }

/* panels and tabs */
html[data-mt-density="condensed"] .box { margin-bottom: 6px; }
html[data-mt-density="condensed"] .box-header { padding: 5px 8px; }
html[data-mt-density="condensed"] .box-header .box-title { font-size: 13px !important; }
html[data-mt-density="condensed"] .box-header > .box-tools { top: 3px; }
html[data-mt-density="condensed"] :is(.box-body, .box-footer) { padding: 5px 8px; }
html[data-mt-density="condensed"] .nav-tabs-custom { margin-bottom: 6px; }
html[data-mt-density="condensed"] .nav-tabs-custom > .nav-tabs > li > a { font-size: 12px; padding: 5px 10px; }
html[data-mt-density="condensed"] .nav-tabs-custom > .nav-tabs > li { margin-bottom: -2px; }
html[data-mt-density="condensed"] .nav-tabs-custom > .tab-content { padding: 5px 8px; }

/* forms */
html[data-mt-density="condensed"] .form-group { margin-bottom: 4px; }
html[data-mt-density="condensed"] .form-horizontal .control-label { padding-top: 4px; }
html[data-mt-density="condensed"] :is(.content-wrapper, .modal, #mt-ai-s) .control-label { font-size: 12px; }
html[data-mt-density="condensed"] .form-control { font-size: 12px; height: 26px; padding: 2px 8px; }
html[data-mt-density="condensed"] textarea.form-control { height: auto; padding: 4px 8px; }
html[data-mt-density="condensed"] select.form-control { padding-bottom: 0; padding-top: 0; }
html[data-mt-density="condensed"] .input-group-addon { font-size: 12px; padding: 2px 8px; }
html[data-mt-density="condensed"] :is(.checkbox, .radio) { margin-bottom: 4px; margin-top: 4px; }
html[data-mt-density="condensed"] .help-block { margin: 2px 0 4px; }
html[data-mt-density="condensed"] .select2-container--default .select2-selection--single { height: 26px; }
html[data-mt-density="condensed"] .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 12px; line-height: 24px; padding-left: 8px; }
html[data-mt-density="condensed"] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 24px; }
html[data-mt-density="condensed"] .select2-container--default .select2-selection--multiple { min-height: 26px; }
html[data-mt-density="condensed"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding-left: 8px; }
html[data-mt-density="condensed"] .select2-container--default .select2-selection--multiple .select2-selection__choice { font-size: 11.5px; line-height: 18px; margin-top: 3px; }
html[data-mt-density="condensed"] .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { font-size: 12px; height: 20px; margin-top: 3px; }
html[data-mt-density="condensed"] .select2-results__option { padding: 3px 8px; }

/* buttons */
html[data-mt-density="condensed"] .btn:not(.btn-box-tool) { font-size: 12px; line-height: 1.5; padding: 2px 8px; }
html[data-mt-density="condensed"] .input-group-btn > .btn { height: 26px; }
html[data-mt-density="condensed"] .btn-box-tool { padding: 2px 4px; }

/* tables */
html[data-mt-density="condensed"] .table > :is(thead, tbody, tfoot) > tr > :is(th, td) { padding: 3px 5px; }
html[data-mt-density="condensed"] :is(.content-wrapper, .modal) table.dataTable > :is(thead, tfoot) > tr > th { font-size: 12px; padding: 3px 16px 3px 5px; }
html[data-mt-density="condensed"] :is(.content-wrapper, .modal) table.dataTable > tbody > tr > td { padding: 3px 5px; }
html[data-mt-density="condensed"] table.dataTable thead :is(.sorting, .sorting_asc, .sorting_desc)::after { bottom: 3px; }
html[data-mt-density="condensed"] .dataTables_wrapper > .row:first-child { gap: 4px 10px !important; margin-bottom: 2px; }
html[data-mt-density="condensed"] .dataTables_wrapper :is(.dataTables_length select, .dataTables_filter input) { height: 24px; padding: 1px 6px; }
html[data-mt-density="condensed"] .dataTables_wrapper .dataTables_info { padding-top: 4px; }
html[data-mt-density="condensed"] :is(.content-wrapper, .modal) .dataTables_paginate .pagination > li > :is(a, span) { font-size: 12px; min-width: 24px; padding: 1px 7px; }
html[data-mt-density="condensed"] :is(.content-wrapper, .modal) .dt-buttons .btn { padding: 2px 8px; }
html[data-mt-density="condensed"] td.mt-ai-row-detail { padding: 6px 10px !important; }

/* rich text editors */
html[data-mt-density="condensed"] .note-editor .note-toolbar { padding: 0 4px 4px; }
html[data-mt-density="condensed"] .note-editor .note-toolbar .note-btn-group { margin-top: 4px; }
html[data-mt-density="condensed"] .note-editor .note-btn { font-size: 12px; padding: 2px 7px; }
html[data-mt-density="condensed"] .note-editor .note-editable { padding: 6px 8px; }
html[data-mt-density="condensed"] .note-toolbar > .mt-ai-note-label { font-size: 12px; margin-top: 4px; min-height: 24px; }

/* popups, menus and the bottom bar */
html[data-mt-density="condensed"] .modal-header { padding: 6px 10px; }
html[data-mt-density="condensed"] .modal-header :is(.modal-title, h4) { font-size: 14px; }
html[data-mt-density="condensed"] .modal-body { padding: 8px 10px; }
html[data-mt-density="condensed"] .modal-footer { padding: 6px 10px; }
html[data-mt-density="condensed"] .main-header .navbar .dropdown-menu > li > a { font-size: 12.5px; padding: 4px 14px; }
html[data-mt-density="condensed"] .main-footer { font-size: 12px; padding: 4px 10px !important; }
html[data-mt-density="condensed"] .mt-primary-save-restricted:not([style*="display: none"]):not([style*="display:none"]) { height: 24px; }
html[data-mt-density="condensed"] :is(.content-wrapper, .modal) .input-group:has(> .mt-date-calculator) > .form-control { min-height: 26px; }
html[data-mt-density="condensed"] .mt-ai-value-switch-row { min-height: 26px; }
/* condensed: every label on one line (shortened with ... when it doesn't fit; the full label is its hover text), so no row grows to two lines */
html[data-mt-density="condensed"] :is(.content-wrapper, .modal, #mt-ai-s) .form-horizontal .control-label,
html[data-mt-density="condensed"] :is(.content-wrapper, .modal, #mt-ai-s) .form-group > .control-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }

/* Date highlights in the Trip and Review lists (today / the buffer day): rounded tags with a soft tint, a coloured border and coloured text,
   instead of solid colour blocks. Red: due today; green: departs today; amber: the buffer day. */
:is(.content-wrapper, .modal) table :is(.todayRed, .todayGreen, .bufferDate) {
    border: 1px solid; border-radius: 6px; display: inline-block; font-weight: 600; line-height: 1.35; padding: 1px 7px; white-space: nowrap; }
:is(.content-wrapper, .modal) table .todayRed { background: var(--mt-red-tint); border-color: var(--mt-red-tint-border); color: var(--mt-red-tint-text); }
:is(.content-wrapper, .modal) table .todayGreen { background: var(--mt-green-tint); border-color: var(--mt-green-tint-border); color: var(--mt-green-text); }
:is(.content-wrapper, .modal) table .bufferDate { background: var(--mt-amber-tint); border-color: var(--mt-amber-border); color: var(--mt-amber-text); }
/* coloured text in those lists (CAC, overdue values): the theme's calmer shades, semi-bold */
:is(.content-wrapper, .modal) table .textBlue { color: var(--mt-green-text); font-weight: 600; }

/* The CAC, one look everywhere: the chip the Trip page header uses (trip-detail.css .mt-ai-cac-chip), on the Trip list's CAC (a span that
   filters the list), the review lists' CAC links, and the CRM company links in Trip Search and the Report Generator. Clicking still does
   what it did. The Trip list's green CAC (the Trip's clientAccess) is dropped: one look, whatever the row. */
:is(.content-wrapper, .modal) table :is(span[onclick*="CLIENT_CAC"], a[href*="operationName=CLIENT_CAC"], a[data-mt-crm-contact-admin-initial-company-ids]),
.mt-ai-cac-chip {
    align-items: center; background: transparent; border: 1px solid var(--mt-border); border-radius: 4px; color: var(--mt-text-label);
    display: inline-flex; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600; gap: 5px; letter-spacing: .02em; line-height: 1;
    max-width: 100%; overflow: hidden; padding: 3px 6px; text-decoration: none; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
:is(.content-wrapper, .modal) table :is(span[onclick*="CLIENT_CAC"], a[href*="operationName=CLIENT_CAC"], a[data-mt-crm-contact-admin-initial-company-ids]):hover {
    background: var(--mt-blue-tint); border-color: var(--mt-blue-border); color: var(--mt-blue-text); cursor: pointer; text-decoration: none; }
:is(.content-wrapper, .modal) table a[data-mt-crm-contact-admin-initial-company-ids] > .fa { font-size: 10px; opacity: .6; }
:is(.content-wrapper, .modal) table :is(span[onclick*="CLIENT_CAC"], a[href*="operationName=CLIENT_CAC"]):empty { display: none; } /* no CAC: nothing, not an empty chip */
html[data-mt-density="condensed"] :is(.content-wrapper, .modal) table :is(span[onclick*="CLIENT_CAC"], a[href*="operationName=CLIENT_CAC"], a[data-mt-crm-contact-admin-initial-company-ids]) { padding: 2px 5px; }
:is(.content-wrapper, .modal) table .textRed { color: var(--mt-red-text); }
html[data-mt-density="condensed"] :is(.content-wrapper, .modal) table :is(.todayRed, .todayGreen, .bufferDate) { line-height: 1.25; padding: 0 6px; }

/* Dark mode: our brand logos (dark text on white JPGs) are inverted and their hues turned back (white -> black, black text -> white, red
   stays red), then screened onto the card so the now-black background disappears. Agency logos get the same. Airline logos are transparent
   PNGs, left alone. */
html[data-mt-theme="dark"] img[src*="/custom/brand/"] { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
html[data-mt-theme="dark"] img.mt-ai-agent-logo { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; } /* agency logos: the same treatment as ours */
/* the read-only fields' $ / % boxes (managedtrip.css .mt-disabled is a light grey) */
html[data-mt-theme="dark"] .input-group-addon.mt-disabled { background: var(--mt-surface-3) !important; border-color: var(--mt-border) !important; color: var(--mt-faint) !important; }

/* a question-mark help icon: the help text shows on hover (title) */
.mt-ai-help { color: var(--mt-faint); cursor: help; font-size: 13px; margin-left: 2px; vertical-align: -1px; }
.mt-ai-help:hover { color: var(--mt-blue); }

/* long values in expanded rows (review notes, Trip internal notes): the itinerary panel's look, collapsed to about five lines with a fade
   and Show all / Show less (admin-theme.js collapseLongValues) */
.mt-ai-notes { background: var(--mt-surface-2); border: 1px solid var(--mt-border-soft); border-radius: 8px; overflow: hidden; }
.mt-ai-notes-body { padding: 6px 10px; position: relative; }
.mt-ai-notes[data-collapsed="true"] .mt-ai-notes-body { max-height: 110px; overflow: hidden; } /* #hardcoded: NOTES_MAX_PX */
.mt-ai-notes-fade { display: none; }
.mt-ai-notes[data-collapsed="true"] .mt-ai-notes-fade { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--mt-surface-2)); display: block; height: 40px; margin-top: -40px; pointer-events: none; position: relative; }
.mt-ai-notes-toggle { align-items: center; background: transparent; border: 0; border-top: 1px solid var(--mt-divider); color: var(--mt-blue-text); cursor: pointer; display: flex; font-size: 12px; font-weight: 600; gap: 5px; justify-content: center; padding: 4px; width: 100%; }
.mt-ai-notes-toggle:hover { background: var(--mt-blue-tint); }
.mt-ai-notes[data-collapsed="true"] .mt-ai-notes-less, .mt-ai-notes[data-collapsed="false"] .mt-ai-notes-more { display: none; }
.mt-ai-notes[data-collapsed="false"] .mt-ai-notes-toggle .fa { transform: rotate(180deg); }
.mt-ai-notes-body p { margin: 0 0 4px; }

/* a review's priority in review tables and expanded rows (the banner keeps its bordered tag, trip-detail.css): a colored dot and
   its label, as the bottom bar's status dots. P1 red (its label red too, so it stands out), P2 amber, P3 blue, P4 grey */
.mt-ai-detail-priority { align-items: center; display: inline-flex; font-size: 13px; gap: 7px; line-height: 1.3; white-space: nowrap; }
.mt-ai-detail-priority::before { border-radius: 50%; content: ""; flex: none; height: 8px; width: 8px; }
.mt-ai-detail-priority[data-priority="CRITICAL"] { color: var(--mt-red-text); font-weight: 600; }
.mt-ai-detail-priority[data-priority="CRITICAL"]::before { background: var(--mt-red); }
.mt-ai-detail-priority[data-priority="IMPORTANT"]::before { background: var(--mt-amber); }
.mt-ai-detail-priority[data-priority="NORMAL"]::before { background: var(--mt-blue); }
.mt-ai-detail-priority[data-priority="LOW"] { color: var(--mt-muted); }
.mt-ai-detail-priority[data-priority="LOW"]::before { background: var(--mt-fainter); }

/* the review list (pages/protected/review/list.jsp) scrolls sideways, so its cells stay on one line: a wrapped Payment Scenario, list of
   airlines or name made some rows two or three lines tall. The expanded detail rows (one cell spanning the row) still wrap. */
#reviewList > tbody > tr > td:not([colspan]) { white-space: nowrap; }

/* airline logos in the lists' A column (admin-theme.js): logo then code, several side by side */
td.mt-ai-airlines { white-space: nowrap; }
/* the table fills the page, and the browser shares the width left over among the columns; the A column takes none of it (width 1% is
   "as narrow as its widest cell"). With a scrolling table the header copies the body's widths, so only its own copy is left alone. */
table.dataTable td.mt-ai-airlines, table.dataTable th.mt-ai-airlines-head:not(.dataTables_scrollHead th),
table.dataTable th.mt-ai-narrow-head:not(.dataTables_scrollHead th) { width: 1% !important; }
/* the Trip list's T column (tags, list.jsp sizes its header 6em): each tag stays on one line */
table.dataTable td > a[href*="operationName=TAG"] { white-space: nowrap; }
.mt-ai-airline { align-items: center; display: inline-flex; gap: 4px; margin-right: 4px; vertical-align: middle; }
.mt-ai-airline:last-child { margin-right: 0; }
.mt-ai-airline img { flex: none; height: 18px; object-fit: contain; width: 18px; } /* #hardcoded: about the text's height */
/* more than one airline: the first, then a "+N" tag; hovering or focusing it lists the rest in a small card (placed by admin-theme.js) */
.mt-ai-airline-more { background: var(--mt-surface-2); border: 1px solid var(--mt-border); border-radius: 999px; color: var(--mt-text-label); cursor: default;
    display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 2px 5px; position: relative; vertical-align: middle; }
.mt-ai-airline-list { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    color: var(--mt-text); display: none; font-size: 13px; font-weight: 400; gap: 6px 10px; grid-template-columns: repeat(3, auto); padding: 8px 10px;
    position: fixed; white-space: nowrap; z-index: 1050; }
.mt-ai-airline-list .mt-ai-airline { margin-right: 0; }
.mt-ai-airline-list.is-open { display: grid; }
.mt-ai-airline-more:is(:hover, :focus) { border-color: var(--mt-blue-border); color: var(--mt-blue-text); outline: none; }

/* The lists' quick preview button (Trip list, Trip Search, Payments: the P file icon that opened "Preview Coming Soon"): a small blue eye
   button that invites a click, solid on hover. When someone has the Trip open, managedTrip.js swaps the icon for a lock, shown red. */
:is(.content-wrapper, .modal) table a[data-target="#modalPreview"] {
    align-items: center; background: var(--mt-blue-tint); border: 1px solid var(--mt-blue-border); border-radius: 6px; display: inline-flex;
    height: 22px; justify-content: center; transition: background .12s, border-color .12s; width: 26px; }
:is(.content-wrapper, .modal) table a[data-target="#modalPreview"] > .fa { color: var(--mt-blue-text) !important; font-size: 13px; width: auto; }
:is(.content-wrapper, .modal) table a[data-target="#modalPreview"] > .fa-file-powerpoint-o::before { content: "\f06e"; } /* fa-eye */
:is(.content-wrapper, .modal) table a[data-target="#modalPreview"]:hover { background: var(--mt-blue); border-color: var(--mt-blue); }
:is(.content-wrapper, .modal) table a[data-target="#modalPreview"]:hover > .fa { color: #fff !important; }
:is(.content-wrapper, .modal) table a[data-target="#modalPreview"]:has(> .fa-lock) { background: var(--mt-red-tint); border-color: var(--mt-red-tint-border); }
:is(.content-wrapper, .modal) table a[data-target="#modalPreview"]:has(> .fa-lock) > .fa { color: var(--mt-red-text) !important; }
/* the review lists' eye sits just before the Trip Id (where the lock icon shows when someone has the Trip open) */
:is(.content-wrapper, .modal) table a.mt-ai-review-eye { height: 20px; margin-right: 4px; vertical-align: -1px; width: 24px; }
/* a locked Trip: the eye itself shows the lock (red), as on the Trip list, instead of a second icon beside it */
:is(.content-wrapper, .modal) table td:has(a.mt-ai-review-eye) i.mt-lockable.fa-lock { display: none; }/* only where an eye stands in for it: on the Trip list the lock is the button's own icon, and hiding it left an empty red button */
:is(.content-wrapper, .modal) table td:has(i.mt-lockable.fa-lock) a.mt-ai-review-eye { background: var(--mt-red-tint); border-color: var(--mt-red-tint-border); }
:is(.content-wrapper, .modal) table td:has(i.mt-lockable.fa-lock) a.mt-ai-review-eye > .fa { color: var(--mt-red-text) !important; }
:is(.content-wrapper, .modal) table td:has(i.mt-lockable.fa-lock) a.mt-ai-review-eye > .fa-eye::before { content: "\f023"; } /* fa-lock */

/* The quick preview opens as a drawer from the right (common/footer.jsp #modalPreview; the content is pages/protected/ai/trip/preview.jspf,
   styled by static/ai/trip/trip-preview.css). Its own header carries the close button, so the modal's empty one goes. */
#modalPreview.modal { padding-right: 0 !important; }
#modalPreview.modal .modal-dialog { bottom: 0; height: 100%; margin: 0; max-width: 100vw; position: fixed; right: 0; top: 0;
    transform: translateX(100%) !important; transition: transform .22s ease-out !important; width: 620px; } /* #hardcoded: the drawer's width */
#modalPreview.modal.in .modal-dialog { transform: none !important; }
#modalPreview .modal-content { background: var(--mt-surface); border: 0; border-radius: 0; box-shadow: -12px 0 32px rgba(0, 0, 0, .18); display: flex;
    flex-direction: column; height: 100%; overflow: hidden; }
#modalPreview .modal-header { display: none; }
#modalPreview .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 0; }
.mt-ai-tp-loading { padding: 18px 20px; }
.mt-ai-tp-loading .mt-ai-tp-close { float: right; }
.mt-ai-tp-skeleton { animation: mtAiTpPulse 1.2s ease-in-out infinite; background: var(--mt-surface-2); border-radius: 6px; height: 14px; margin: 10px 0; }
.mt-ai-tp-skeleton.is-title { height: 26px; width: 70%; }
.mt-ai-tp-skeleton.is-block { height: 64px; }
@keyframes mtAiTpPulse { 50% { opacity: .5; } }
.mt-ai-tp-close { background: transparent; border: 0; border-radius: 6px; color: var(--mt-muted); font-size: 24px; height: 32px; line-height: 1; padding: 0; width: 32px; }
.mt-ai-tp-close:hover { background: var(--mt-surface-2); color: var(--mt-text-strong); }

/* rich Priority dropdowns (admin-theme.js mtAiRichPriority): the highlighted option reads white on the highlight, its dot ringed */
.select2-results__option--highlighted .mt-ai-detail-priority { color: #fff !important; }
.select2-results__option--highlighted .mt-ai-detail-priority::before { box-shadow: 0 0 0 1.5px #fff; }

/* Error boxes (AdminLTE .error-page: the 403 and other errors on the Trip list and admin pages): a slim full-width banner lined up with the
   boxes below, the code in a small soft red tile, then the title and the message. Overrides the pages' inline negative margin and width. */
.content-wrapper .error-page { align-items: center; background: var(--mt-surface); border: 1px solid var(--mt-border); border-left: 4px solid var(--mt-red); border-radius: 10px;
    box-shadow: var(--mt-shadow-box); display: flex; gap: 14px; margin: 0 0 12px; max-width: none; padding: 10px 16px; width: auto !important; }
.content-wrapper .error-page > .headline { background: var(--mt-red-tint); border: 1px solid var(--mt-red-tint-border); border-radius: 8px; color: var(--mt-red-text) !important;
    flex: none; float: none; font-size: 20px; font-weight: 700; line-height: 1; margin: 0 !important; padding: 8px 10px; }
.content-wrapper .error-page > .headline:empty { display: none; }
.content-wrapper .error-page > .error-content { align-items: center; align-self: center; display: flex; flex-wrap: wrap; gap: 2px 10px; margin-left: 0; min-width: 0; }
.content-wrapper .error-page > .error-content > h3, .content-wrapper .error-page > .error-content p { line-height: 1.4; }
.content-wrapper .error-page > .error-content > h3 { color: var(--mt-text-strong); font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; }
.content-wrapper .error-page > .error-content > h3 .fa { color: var(--mt-red) !important; margin-right: 3px; }
.content-wrapper .error-page > .error-content p { color: var(--mt-text); font-size: 13.5px; margin: 0; }

/* small tables (admin-theme.js: 10 rows or fewer, all on one page): only Copy / CSV / Excel stay above them */
.dataTables_wrapper.mt-ai-dt-compact :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) { display: none !important; }
/* the row holding the table sits exactly inside its wrapper: Bootstrap's -15px row margins otherwise pushed it past the card's edge as a
   strip below the table (the Trip's Communication tab) */
.dataTables_wrapper > .row:has(> [class*="col-"] > table.dataTable, > [class*="col-"] > .dataTables_scroll) { margin-left: 0; margin-right: 0; }
.dataTables_wrapper > .row:has(> [class*="col-"] > table.dataTable, > [class*="col-"] > .dataTables_scroll) > [class*="col-"] { padding-left: 0; padding-right: 0; }
/* and the row that held the info and paging, now empty, goes too (its row margins drew a strip past the card's edge, as on the Communication tab) */
.dataTables_wrapper.mt-ai-dt-compact > .row:has(.dataTables_info, .dataTables_paginate):not(:has(.dt-buttons, table)) { display: none; }

/* Fare Logic commissions (gds/fare/logic/detail.jsp, Commission type): one row per brand (brand and season, Airline, then Basic, Member,
   Silver, Gold and Onyx) instead of two, the column names once on the first brand, each tier's color as a stripe under its name. In a
   tier, our percentage is the field, the agent's resulting percentage reads as plain text after it. Same fields, checks and copy buttons;
   Markup Limit blocks are left as they were. Only when the commissions box is at least 1100px wide (a container query, so the side menu
   counts); narrower keeps the two-row layout. */
.box-body:has(> .mt-fare-logic-profit-container .mt-fare-logic-consolidator-commission-percent-basic) { container-type: inline-size; }
@container (min-width: 1100px) {
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) {
        align-items: end; border-bottom: 1px solid var(--mt-divider); column-gap: 12px; display: grid; padding: 8px 0;
        grid-template-columns: minmax(190px, 1.25fr) minmax(120px, .75fr) repeat(5, minmax(140px, 1fr)); }
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic):last-of-type { border-bottom: 0; }
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) > .form-group { display: contents; }
    /* the form groups' clearfix pseudo elements would take grid cells; the page's horizontal form right-aligns labels */
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) > .form-group::before,
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) > .form-group::after { content: none; display: none; }
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) label { text-align: left !important; }
    /* an empty field is blank: its long placeholder ("Centrav's Silver Commission %") only showed cut off, and the column name says it */
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) .input-group > .form-control::placeholder { color: transparent; }
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) > .form-group > [class*="col-"] {
        float: none; min-width: 0; padding: 0; width: auto !important; }
    /* column names once: only the first shown brand keeps them (the brand's own name stays on every row) */
    .mt-fare-logic-profit-container:not(.hide) ~ .mt-fare-logic-profit-container :is(label[for$="airlineCommissionPercent"], label[for*="consolidatorCommissionPercent"]) { display: none; }
    .mt-fare-logic-profit-container :is(label[for$="airlineCommissionPercent"], label[for*="consolidatorCommissionPercent"]) {
        border-bottom: 3px solid var(--mt-border); display: block; margin-bottom: 6px; padding-bottom: 3px; }
    .mt-fare-logic-profit-container label[for$="consolidatorCommissionPercentBasic"] { border-bottom-color: #990000; } /* #hardcoded: managedtrip.css tier colors */
    .mt-fare-logic-profit-container label[for$="consolidatorCommissionPercent"] { border-bottom-color: #90ee90; }
    .mt-fare-logic-profit-container label[for$="consolidatorCommissionPercentSilver"] { border-bottom-color: #c0c0c0; }
    .mt-fare-logic-profit-container label[for$="consolidatorCommissionPercentGold"] { border-bottom-color: #daa520; }
    .mt-fare-logic-profit-container label[for$="consolidatorCommissionPercentOnyx"] { border-bottom-color: #1f2937; }
    .mt-fare-logic-profit-container label[for$="seasonIndicator"] { color: var(--mt-text-strong); display: block; font-weight: 600; margin-bottom: 4px; }
    /* a tier: our % field, a small % chip in the tier's color, the agent's % as text after an arrow, the copy button */
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) .input-group { display: flex; flex-wrap: nowrap; width: 100%; }
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) .input-group > .form-control { flex: 1 1 auto; min-width: 60px; width: auto; }
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) .input-group > .input-group-addon { align-items: center; display: flex; flex: none; padding: 0 7px; width: auto; }
    .mt-fare-logic-profit-container .input-group > .mt-fare-logic-agent-commission-percent {
        background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--mt-muted) !important; flex: 0 0 56px !important;
        font-variant-numeric: tabular-nums; padding: 0 0 0 16px; position: relative;
        background-image: linear-gradient(var(--mt-muted), var(--mt-muted)) !important; background-position: 4px 50% !important; background-repeat: no-repeat !important; background-size: 7px 1px !important; } /* a short line before it: "becomes" */
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) .input-group > .input-group-btn { display: flex; width: auto; }
    .mt-fare-logic-profit-container:has(.mt-fare-logic-consolidator-commission-percent-basic) .input-group > .input-group-btn > .btn { border-radius: 0 4px 4px 0; height: 100%; }
}

/* Fare Logic's Sort View (detail.jsp displaySortView, a SweetAlert of each filter's values sorted): each filter one row, its name, a
   Whitelist or Blacklist tag and its values as soft chips; filters with no values greyed as "Not set". admin-theme.js shapes the rows. */
.swal2-modal:has(#sortedView) { border-radius: 12px; max-width: 980px; padding: 22px 26px !important; }
.swal2-modal:has(#sortedView) .swal2-title { align-items: center; color: var(--mt-text-strong); display: flex !important; font-size: 18px !important; font-weight: 600;
    gap: 12px; justify-content: space-between; margin: 0 0 12px !important; text-align: left; }
.swal2-modal:has(#sortedView) .swal2-title .btn-group { order: 2; }
.swal2-modal:has(#sortedView) .swal2-title .btn { font-size: 12px; padding: 4px 10px; }
.swal2-modal:has(#sortedView) .swal2-content { text-align: left; }
#sortedView { border-top: 1px solid var(--mt-divider); }
#sortedView > .mt-ai-sv-row { align-items: start; border-bottom: 1px solid var(--mt-divider); display: grid; gap: 4px 16px; grid-template-columns: minmax(220px, 30%) 1fr; margin: 0 !important; padding: 7px 2px; }
#sortedView > .mt-ai-sv-row::before, #sortedView > .mt-ai-sv-row::after { content: none; display: none; } /* Bootstrap's clearfix would take grid cells */
#sortedView > .mt-ai-sv-row > label { float: none; justify-content: flex-start; align-items: center; color: var(--mt-text-label); display: flex; font-size: 13px; font-weight: 600; gap: 8px; margin: 0; padding: 0 !important;
    text-align: left !important; width: auto !important; }
#sortedView > .mt-ai-sv-row > div { float: none; min-width: 0; padding: 0 !important; text-align: left !important; width: auto !important; }
.mt-ai-sv-type { border: 1px solid; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; line-height: 1; padding: 3px 5px; text-transform: uppercase; }
.mt-ai-sv-type.is-white { background: var(--mt-green-tint); border-color: var(--mt-green-tint-border); color: var(--mt-green-text); }
.mt-ai-sv-type.is-black { background: var(--mt-red-tint); border-color: var(--mt-red-tint-border); color: var(--mt-red-text); }
#sortedView .mt-ai-sv-chip { background: var(--mt-blue-tint); border: 1px solid var(--mt-blue-border); border-radius: 999px; color: var(--mt-blue-text); display: inline-block;
    font-size: 12px; font-weight: 600; line-height: 1.2; margin: 0 4px 4px 0; padding: 3px 9px; }
#sortedView .mt-ai-sv-row.is-black .mt-ai-sv-chip { background: var(--mt-red-tint); border-color: var(--mt-red-tint-border); color: var(--mt-red-text); }
#sortedView .mt-ai-sv-row.is-empty > label { color: var(--mt-muted); font-weight: 500; }
#sortedView .mt-ai-sv-row.is-empty .mt-ai-sv-type { opacity: .55; }
.mt-ai-sv-none { color: var(--mt-faint, var(--mt-muted)); font-size: 12.5px; }
.swal2-modal:has(#sortedView) .swal2-buttonswrapper { margin-top: 16px; }
.swal2-modal:has(#sortedView) .swal2-confirm { border-radius: 6px; font-size: 14px !important; padding: 7px 22px !important; }


/* Trip list (admin-theme.js): its text columns keep list.jsp's own 10em with ... (the theme squeezes these cells elsewhere), Wrap lets
   them wrap instead, Table puts the rows in a box with both scrollbars, and Page adds a sideways scrollbar at the top of the table */
.mt-ai-trip-list table.dataTable td .mt-preview-html, .mt-ai-trip-list table.dataTable td [style*="width: 10em"] { min-width: 0; width: 10em !important; }
.mt-ai-trip-list.mt-ai-wrap table.dataTable td .mt-preview-html, .mt-ai-trip-list.mt-ai-wrap table.dataTable td [style*="width: 10em"] {
    overflow: visible !important; text-overflow: clip !important; white-space: normal !important; }
.mt-ai-trip-list-view { align-items: center; display: inline-flex; gap: 12px; margin-right: 12px; white-space: nowrap; }
.mt-ai-segment { align-items: center; display: inline-flex; }
.mt-ai-segment-label { color: var(--mt-muted); font-size: 12px; font-weight: 400; margin-right: 6px; }
.mt-ai-segment-option { background: var(--mt-surface); border: 1px solid var(--mt-border-soft); color: var(--mt-text-label); font-size: 12px; line-height: 1.4; padding: 3px 9px; }
.mt-ai-segment-option + .mt-ai-segment-option { border-left: 0; }
.mt-ai-segment-option:first-of-type { border-radius: 6px 0 0 6px; }
.mt-ai-segment-option:last-of-type { border-radius: 0 6px 6px 0; }
.mt-ai-segment-option:hover { color: var(--mt-text); }
.mt-ai-segment-option.active { background: var(--mt-blue-tint); border-color: var(--mt-blue-border); color: var(--mt-blue-text-hover); font-weight: 600; }
.mt-ai-top-scroll { display: none; height: 14px; margin-bottom: 2px; overflow-x: auto; overflow-y: hidden; }
.mt-ai-top-scroll > div { height: 1px; }
.mt-ai-bottom-sentinel { height: 1px; margin-top: -1px; }
.mt-ai-box .dataTables_scrollBody { overflow: auto !important; }
/* the scrollbars are always drawn (macOS otherwise hides them until you scroll) */
.mt-ai-trip-list .dataTables_scrollBody, .mt-ai-top-scroll { scrollbar-color: var(--mt-muted) var(--mt-surface-detail); }
.mt-ai-trip-list .dataTables_scrollBody::-webkit-scrollbar, .mt-ai-top-scroll::-webkit-scrollbar { height: 12px; width: 12px; }
.mt-ai-trip-list .dataTables_scrollBody::-webkit-scrollbar-track, .mt-ai-top-scroll::-webkit-scrollbar-track { background: var(--mt-surface-detail); }
.mt-ai-trip-list .dataTables_scrollBody::-webkit-scrollbar-thumb, .mt-ai-top-scroll::-webkit-scrollbar-thumb { background: var(--mt-muted); border: 3px solid var(--mt-surface-detail); border-radius: 8px; }
.mt-ai-trip-list .dataTables_scrollBody::-webkit-scrollbar-thumb:hover, .mt-ai-top-scroll::-webkit-scrollbar-thumb:hover { background: var(--mt-text-label); }
.mt-ai-trip-list .dataTables_scrollBody::-webkit-scrollbar-corner, .mt-ai-top-scroll::-webkit-scrollbar-corner { background: var(--mt-surface-detail); }
/* Trip list columns (admin-theme.js): a header's right edge resizes the column; double-click it to fit the data. A fitted column's
   header gets a small blue mark under its name, a dragged one a grey mark, so you can see which columns aren't at the list's width */
.mt-ai-trip-list table.dataTable > thead > tr > th { position: relative; }
.mt-ai-column-edge { bottom: 0; cursor: col-resize; position: absolute; right: 0; top: 0; width: 8px; z-index: 2; }
.mt-ai-column-edge:hover { box-shadow: inset -2px 0 0 var(--mt-blue); }
body.mt-ai-column-resizing, body.mt-ai-column-resizing * { cursor: col-resize !important; user-select: none !important; }
.mt-ai-trip-list th.mt-ai-column-fit { box-shadow: inset 0 -2px 0 var(--mt-blue); }
.mt-ai-trip-list th.mt-ai-column-sized { box-shadow: inset 0 -2px 0 var(--mt-muted); }
.mt-ai-trip-list-view .mt-ai-columns-reset { border-radius: 6px; white-space: nowrap; }/* a lone .mt-ai-segment-option: the Text and Scroll buttons' look, rounded all round */
.mt-ai-trip-list-view .mt-ai-columns-reset .fa { margin-right: 3px; }
.mt-ai-trip-list-view .mt-ai-columns-reset:active { background: var(--mt-blue-tint); border-color: var(--mt-blue-border); }

/* ===== Rainbow mode (user menu; html[data-mt-theme="rainbow"], set before the page draws by common/header.jsp): the solid AdminLTE colors
   from before the redesign, for the people who want them back. Only colors change, not the layout. Every rule starts with
   html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2): no element has those ids, they
   only add two ids' weight, so these rules outweigh the redesign's (some of which carry an id and many classes). The PNR itinerary
   shows its old table (pnr-itinerary.jspf). */
.mt-ai-pnr-itinerary-rainbow { display: none; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .mt-ai-pnr-itinerary-rainbow { display: block; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .mt-ai-pnr-itinerary-new { display: none; }
/* the Trip page's money boxes in the left bar: solid colors, white text, as they were */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .main-sidebar .sidebar-menu .small-box { border-left-width: 0 !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .1) !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .main-sidebar .sidebar-menu .small-box .inner h3, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .main-sidebar .sidebar-menu .small-box .inner p { color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .main-sidebar .sidebar-menu .small-box .icon { color: rgba(0, 0, 0, .15) !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-aqua:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-aqua, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-aqua, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-aqua { background: #00c0ef !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-aqua, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-aqua, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-aqua { color: #00c0ef !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-green:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-green, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-green, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-green { background: #00a65a !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-green, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-green, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-green { color: #00a65a !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-yellow:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-yellow, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-yellow, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-yellow { background: #f39c12 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-yellow, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-yellow, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-yellow { color: #f39c12 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-red:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-red, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-red, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-red { background: #dd4b39 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-red, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-red, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-red { color: #dd4b39 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-blue:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-blue { background: #0073b7 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-blue { color: #0073b7 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-light-blue:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-light-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-light-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-light-blue { background: #3c8dbc !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-light-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-light-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-light-blue { color: #3c8dbc !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-navy:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-navy, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-navy, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-navy { background: #001f3f !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-navy, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-navy, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-navy { color: #001f3f !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-teal:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-teal, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-teal, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-teal { background: #39cccc !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-teal, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-teal, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-teal { color: #39cccc !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-olive:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-olive, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-olive, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-olive { background: #3d9970 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-olive, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-olive, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-olive { color: #3d9970 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-lime:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-lime, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-lime, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-lime { background: #01ff70 !important; color: #111 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-lime, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-lime, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-lime { color: #01ff70 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-orange:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-orange, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-orange, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-orange { background: #ff851b !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-orange, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-orange, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-orange { color: #ff851b !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-fuchsia:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-fuchsia, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-fuchsia, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-fuchsia { background: #f012be !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-fuchsia, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-fuchsia, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-fuchsia { color: #f012be !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-purple:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-purple, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-purple, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-purple { background: #605ca8 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-purple, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-purple, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-purple { color: #605ca8 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-maroon:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-maroon, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-maroon, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-maroon { background: #d81b60 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-maroon, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-maroon, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-maroon { color: #d81b60 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-black:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-black, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-black, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-black { background: #111111 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-black, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-black, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-black { color: #111111 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-gray:not(.form-control):not(.select2-selection):not(.input-group-addon), html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .small-box.bg-gray, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.bg-gray, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.bg-gray { background: #d2d6de !important; color: #111 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-gray, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-title.text-gray, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) i.text-gray { color: #d2d6de !important; }
/* buttons: the solid Bootstrap/AdminLTE colors */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-primary:not(.btn-box-tool) { background: #3c8dbc !important; border-color: #367fa9 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-primary:not(.btn-box-tool):hover, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-primary:not(.btn-box-tool):focus { background: #367fa9 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-primary:not(.btn-box-tool) i, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-primary:not(.btn-box-tool) .fa { color: inherit !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-success:not(.btn-box-tool) { background: #00a65a !important; border-color: #008d4c !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-success:not(.btn-box-tool):hover, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-success:not(.btn-box-tool):focus { background: #008d4c !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-success:not(.btn-box-tool) i, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-success:not(.btn-box-tool) .fa { color: inherit !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-info:not(.btn-box-tool) { background: #00c0ef !important; border-color: #00acd6 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-info:not(.btn-box-tool):hover, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-info:not(.btn-box-tool):focus { background: #00acd6 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-info:not(.btn-box-tool) i, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-info:not(.btn-box-tool) .fa { color: inherit !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-warning:not(.btn-box-tool) { background: #f39c12 !important; border-color: #e08e0b !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-warning:not(.btn-box-tool):hover, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-warning:not(.btn-box-tool):focus { background: #e08e0b !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-warning:not(.btn-box-tool) i, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-warning:not(.btn-box-tool) .fa { color: inherit !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-danger:not(.btn-box-tool) { background: #dd4b39 !important; border-color: #d73925 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-danger:not(.btn-box-tool):hover, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-danger:not(.btn-box-tool):focus { background: #d73925 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-danger:not(.btn-box-tool) i, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-danger:not(.btn-box-tool) .fa { color: inherit !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-default:not(.btn-box-tool) { background: #f4f4f4 !important; border-color: #dddddd !important; color: #444 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-default:not(.btn-box-tool):hover, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-default:not(.btn-box-tool):focus { background: #dddddd !important; color: #444 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-default:not(.btn-box-tool) i, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .btn.btn-default:not(.btn-box-tool) .fa { color: inherit !important; }
/* labels, badges, alerts and callouts */
/* the lists' date highlights (due today, departs today, the buffer day) and coloured text: the pages' own solid colours (trip/list.jsp and 15 others), keeping the tag shape */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) :is(.content-wrapper, .modal) table .todayRed { background: #ed5565 !important; border-color: #ed5565 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) :is(.content-wrapper, .modal) table .todayGreen { background: #9cdacd !important; border-color: #9cdacd !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) :is(.content-wrapper, .modal) table .bufferDate { background: #fafaaf !important; border-color: #fafaaf !important; color: #333 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) :is(.content-wrapper, .modal) table .textBlue { color: #38bca1 !important; font-weight: bold; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) :is(.content-wrapper, .modal) table .textRed { color: #ed5565 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.label-default, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.badge-default { background: #d2d6de !important; border-color: #d2d6de !important; color: #444 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.label-primary, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.badge-primary { background: #3c8dbc !important; border-color: #3c8dbc !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.label-success, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.badge-success { background: #00a65a !important; border-color: #00a65a !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.label-info, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.badge-info { background: #00c0ef !important; border-color: #00c0ef !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.label-warning, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.badge-warning { background: #f39c12 !important; border-color: #f39c12 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .label.label-danger, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .badge.badge-danger { background: #dd4b39 !important; border-color: #dd4b39 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-success, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-success { background: #00a65a !important; border-color: #00a65a !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-success a, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-success a { color: #fff !important; text-decoration: underline; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-info, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-info { background: #00c0ef !important; border-color: #00c0ef !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-info a, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-info a { color: #fff !important; text-decoration: underline; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-warning, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-warning { background: #f39c12 !important; border-color: #f39c12 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-warning a, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-warning a { color: #fff !important; text-decoration: underline; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-danger, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-danger { background: #dd4b39 !important; border-color: #dd4b39 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .alert.alert-danger a, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .callout.callout-danger a { color: #fff !important; text-decoration: underline; }
/* Bootstrap text colors used for states (Restricted Save Mode, notices) */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-primary { color: #3c8dbc !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-success { color: #3c763d !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-info { color: #31708f !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-warning { color: #8a6d3b !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-danger { color: #a94442 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .text-muted { color: #777777 !important; }
/* boxes: the colored top border, and solid headers on solid boxes */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-primary { border-top: 3px solid #3c8dbc !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-solid.box-primary > .box-header { background: #3c8dbc !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-success { border-top: 3px solid #00a65a !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-solid.box-success > .box-header { background: #00a65a !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-info { border-top: 3px solid #00c0ef !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-solid.box-info > .box-header { background: #00c0ef !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-warning { border-top: 3px solid #f39c12 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-solid.box-warning > .box-header { background: #f39c12 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-danger { border-top: 3px solid #dd4b39 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-solid.box-danger > .box-header { background: #dd4b39 !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-default { border-top: 3px solid #d2d6de !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box.box-solid.box-default > .box-header { background: #d2d6de !important; color: #fff !important; }
/* tabs: the active tab's blue top border, as AdminLTE drew it */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .nav-tabs-custom > .nav-tabs > li.active { border-top: 3px solid #3c8dbc !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .nav-tabs-custom > .nav-tabs > li.active > a { color: #444 !important; }
/* the progress bars and the date tags in the lists */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar.progress-bar-primary, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar-primary { background: #3c8dbc !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar.progress-bar-success, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar-success { background: #00a65a !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar.progress-bar-info, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar-info { background: #00c0ef !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar.progress-bar-warning, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar-warning { background: #f39c12 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar.progress-bar-danger, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .progress-bar-danger { background: #dd4b39 !important; }
/* the PNR sections' titles (Passenger & Current Pricing, Itinerary, Fare Logic ...): their own colors and icons again */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-header .box-title > i, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-header .box-title > .fa { color: inherit; display: inline-block !important; margin-right: 4px; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-header .box-title > i.text-grey, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .box-header .box-title > i.text-gray { color: #777 !important; }
/* the bottom bar: each total's label and amount in its own color (Profit green, Price blue, Payments orange, Due red) */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter [class*="text-"], html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter [class*="text-"] > span { color: inherit; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-green, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-green > span { color: #00a65a !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-aqua, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-aqua > span { color: #00c0ef !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-light-blue, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-light-blue > span { color: #3c8dbc !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-yellow, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-yellow > span { color: #f39c12 !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-red, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) #tripDetailFooter > .text-red > span { color: #dd4b39 !important; }
/* Rainbow mode's show (mtAiRainbowShow in admin-theme.js): one canvas over the whole window, never in the way of a click */
.mt-ai-rainbow-show { height: 100vh; inset: 0; pointer-events: none; position: fixed; width: 100vw; z-index: 99999; }
/* Rainbow mode's pretend checkout (pages/protected/ai/user/rainbow-checkout.jspf, in a SweetAlert) */
.mt-ai-rainbow-checkout { text-align: left; }
.mt-ai-rainbow-product { align-items: center; border: 1px solid var(--mt-border-soft); border-radius: 10px; display: flex; gap: 12px; margin-bottom: 10px; padding: 12px; }
.mt-ai-rainbow-art { font-size: 34px; line-height: 1; }
.mt-ai-rainbow-product > div { flex: 1; font-size: 14px; }
.mt-ai-rainbow-product small { color: var(--mt-muted); }
.mt-ai-rainbow-price { align-items: flex-end; display: flex; flex-direction: column; line-height: 1.15; }
.mt-ai-rainbow-price > s { color: var(--mt-muted); font-size: 13px; }
.mt-ai-rainbow-price > strong { color: #dd4b39; font-size: 22px; }
.mt-ai-rainbow-price > strong > small { font-size: 13px; font-weight: 600; margin-left: 1px; }
.mt-ai-rainbow-price > span { background: #dd4b39; border-radius: 4px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; margin-top: 3px; padding: 2px 6px; text-transform: uppercase; }
.mt-ai-rainbow-pref .mt-ai-rainbow-name { white-space: nowrap; }
.mt-ai-rainbow-pref .mt-ai-rainbow-name > span { display: inline; margin-left: 4px; }
.mt-ai-rainbow-pref .mt-ai-rainbow-buy s { margin-right: 4px; opacity: .7; }
.mt-ai-rainbow-line { border-bottom: 1px dashed var(--mt-border-soft); display: flex; font-size: 13px; justify-content: space-between; padding: 6px 2px; }
.mt-ai-rainbow-line > span:first-child { color: var(--mt-muted); }
.mt-ai-rainbow-pref .mt-ai-rainbow-buy { white-space: nowrap; }
/* Rainbow mode: the Trip page's review banner and notice bar in solid, dark-bright yellow with white text (a P1 review in strong red),
   nothing grey or blue in them */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > :is(.mt-ai-review-bar, .warning-page.mt-ai-notice-bar) {
    background: #f39c12 !important; border-bottom-color: #c87f0a !important; border-left-color: #c87f0a !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > .mt-ai-review-bar[data-priority="CRITICAL"] {
    background: #dd4b39 !important; border-bottom-color: #a5281a !important; border-left-color: #a5281a !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > :is(.mt-ai-review-bar, .mt-ai-notice-bar) :is(*, .fa) {
    color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > .mt-ai-review-bar .mt-ai-review-priority {
    background: transparent !important; border-color: rgba(255, 255, 255, .85) !important; color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > .mt-ai-review-bar .mt-ai-review-complete-notes {
    background: #fff !important; border-color: #fff !important; color: #c87f0a !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > .mt-ai-review-bar[data-priority="CRITICAL"] .mt-ai-review-complete-notes { color: #a5281a !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > .mt-ai-review-bar .mt-ai-review-complete {
    background: #00a65a !important; border-color: #008d4c !important; color: #fff !important; }
/* Rainbow mode: the review banner's previous/next arrows stay see-through with white arrows; hover and focus give a light white tint
   (the theme's white hover box hid the white arrow) */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > .mt-ai-review-bar .mt-ai-review-nav button:not(.mt-ai-review-complete-notes):not(.mt-ai-review-complete) {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #fff !important; outline: none; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .content-wrapper > .mt-ai-review-bar .mt-ai-review-nav button:not(.mt-ai-review-complete-notes):not(.mt-ai-review-complete):is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, .22) !important; border-color: rgba(255, 255, 255, .7) !important; }
/* dark mode: DataTables' group rows (the Misc table's subtotal per originator, rowGroup) were the plugin's light grey with dark mode's
   light text on top; now a dark band with readable text */
html[data-mt-theme="dark"] table.dataTable tr:is(.group, .dtrg-group) > td {
    background: var(--mt-surface-2) !important; border-color: var(--mt-border-soft) !important; color: var(--mt-text) !important; font-weight: 600; }

/* Rainbow mode: no muted colors. Highlighted fields (mt.highlight's bg-green/red/yellow/gray) are solid with white text again, as before
   the redesign (Date Cancelled, Date Refunded, Status...); Restricted Save Mode is a solid amber pill as tall as the buttons beside it */
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .form-control.bg-green, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-green + .select2-container .select2-selection, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .select2-selection.bg-green, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .input-group-addon.bg-green {
    background: #00a65a !important; border-color: #008d4c !important; color: #fff !important; font-weight: 600; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .form-control.bg-red, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-red + .select2-container .select2-selection, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .select2-selection.bg-red, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .input-group-addon.bg-red {
    background: #dd4b39 !important; border-color: #d73925 !important; color: #fff !important; font-weight: 600; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .form-control.bg-yellow, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-yellow + .select2-container .select2-selection, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .select2-selection.bg-yellow, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .input-group-addon.bg-yellow {
    background: #f39c12 !important; border-color: #e08e0b !important; color: #fff !important; font-weight: 600; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .form-control.bg-gray, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .bg-gray + .select2-container .select2-selection, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .select2-selection.bg-gray, html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .input-group-addon.bg-gray {
    background: #d2d6de !important; border-color: #b5bbc8 !important; color: #000 !important; font-weight: 600; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) :is(.bg-green, .bg-red, .bg-yellow) + .select2-container .select2-selection__arrow b { border-top-color: #fff !important; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .mt-primary-save-restricted:not([style*="display: none"]):not([style*="display:none"]) {
    background: #f39c12 !important; border-color: #e08e0b !important; color: #fff !important; font-size: 13px; font-weight: 700; }
html:is([data-mt-theme="rainbow"], #mt-ai-rainbow-weight) body:is(body, #mt-ai-rainbow-weight-2) .mt-primary-save-restricted :is(.mt-primary-save-restricted-label, .mt-primary-save-restricted-text) { color: #fff !important; font-weight: 700 !important; }
.mt-profile-fields[hidden] { display: none !important; }/* the grid would otherwise override hidden (profile.jsp hides Trip reminders and the Pay For My Trip setting for users who cannot own Trips) */

/* just bought Rainbow mode: its switch in the user menu, pointed out for a few seconds (admin-theme.js) */
@keyframes mt-ai-theme-row-show { 0%, 100% { box-shadow: inset 0 0 0 2px transparent; } 50% { box-shadow: inset 0 0 0 2px #ff9500; } }
.mt-ai-theme-row.mt-ai-theme-row-show { animation: mt-ai-theme-row-show 1s ease-in-out 4; background: rgba(255, 204, 0, .15); }