/* =====================================================================
   TravelCRM — UI Revamp design system  (clean & professional)
   Loaded AFTER bootstrap + adminltev3.css; re-skins existing markup.
   Hand-authored, committed static CSS (no build step).
   ===================================================================== */

:root {
  /* Brand / accent — derived from logo gradient (blue #4d6bbd → violet #6c69b1) */
  --rv-primary:        #4f63c7;
  --rv-primary-600:    #4f63c7;
  --rv-primary-700:    #3f51b5;
  --rv-primary-soft:   #eef0fb;
  --rv-primary-ring:   rgba(79, 99, 199, .25);
  --rv-brand-grad:     linear-gradient(135deg, #4d6bbd 0%, #6c69b1 100%);

  /* Semantic */
  --rv-success: #16a34a;  --rv-success-soft:#e9f7ef;
  --rv-danger:  #dc2626;  --rv-danger-soft: #fdeaea;
  --rv-warning: #d97706;  --rv-warning-soft:#fdf3e7;
  --rv-info:    #0891b2;  --rv-info-soft:   #e6f6fa;

  /* Neutrals */
  --rv-bg:        #f3f5f8;
  --rv-surface:   #ffffff;
  --rv-surface-2: #f8fafc;
  --rv-border:    #e6e9ee;
  --rv-border-2:  #eef1f5;
  --rv-text:      #1f2733;
  --rv-text-soft: #5b6675;
  --rv-text-mute: #8a94a4;

  /* Shape & depth */
  --rv-radius:    12px;
  --rv-radius-sm: 8px;
  --rv-radius-xs: 6px;
  --rv-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --rv-shadow:    0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --rv-shadow-md: 0 4px 12px rgba(16,24,40,.10);
  --rv-shadow-lg: 0 12px 28px rgba(16,24,40,.14);

  --rv-sidebar-w: 252px;
  --rv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
}

/* ---------- Base ---------- */
body,
body.sidebar-mini {
  font-family: var(--rv-font);
  background: var(--rv-bg) !important;
  color: var(--rv-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--rv-primary); }
a:hover { color: var(--rv-primary-700); }
h1,h2,h3,h4,h5,h6 { color: var(--rv-text); font-weight: 600; }
::selection { background: var(--rv-primary-soft); }

/* Refined scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c7cdd6 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c7cdd6; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #aab2bf; background-clip: content-box; }

/* =====================================================================
   LAYOUT
   ===================================================================== */

/* =====================================================================
   SIDEBAR  — redesigned (clean app-shell: pinned brand + quick links,
   single scrolling menu, refined items, animated groups, calm badges)
   ===================================================================== */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background: var(--rv-surface) !important;
  border-right: 1px solid var(--rv-border);
  width: var(--rv-sidebar-w);
  box-shadow: none;
  display: flex; flex-direction: column;
  height: 100vh !important; overflow: hidden;
}
.sidebar-mini .content-wrapper,
.sidebar-mini .main-header,
.sidebar-mini .main-footer { margin-left: var(--rv-sidebar-w); transition: margin-left .2s ease; }

/* Brand header (uses the logo <img> in the component; no extra mark) */
.brand-link {
  border-bottom: 1px solid var(--rv-border) !important;
  padding: 13px 18px !important;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  background: var(--rv-surface) !important;
  flex: 0 0 auto;
}
.brand-link img { width: 30px !important; height: 30px; border-radius: 8px; box-shadow: var(--rv-shadow-sm); }
.brand-link .brand-text,
.brand-link b { color: var(--rv-text) !important; font-weight: 700 !important; letter-spacing: -.02em; font-size: 17px; }

/* Sidebar regions */
.main-sidebar > .sidebar { padding: 8px 10px; border-bottom: 1px solid var(--rv-border) !important; background: transparent; }
.main-sidebar > .sidebar:first-of-type { flex: 0 0 auto; }
.main-sidebar > .sidebar:last-of-type {        /* the big menu — fill & scroll */
  flex: 1 1 auto; min-height: 0;
  max-height: none !important; height: auto !important;
  overflow-y: auto; overflow-x: hidden; border-bottom: 0 !important;
}
/* small label above the pinned quick-links group */
.main-sidebar > .sidebar:first-of-type nav::before {
  content: "Quick Links"; display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rv-text-mute); padding: 2px 12px 6px;
}
.main-sidebar > .sidebar:first-of-type .nav-link { color: var(--rv-text-mute) !important; font-weight: 500; }
.main-sidebar > .sidebar:first-of-type .nav-link:hover { color: var(--rv-primary-700) !important; }

/* Nav items */
.nav-sidebar { margin: 0; }
.nav-sidebar .nav-item { margin-bottom: 1px; }
.nav-sidebar .nav-link {
  color: var(--rv-text-soft) !important;
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 500; font-size: 13.5px; line-height: 1.25;
  display: flex; align-items: center;
  position: relative;
  transition: background .12s ease, color .12s ease;
}
.nav-sidebar .nav-link p { margin: 0; font-weight: inherit; }
.nav-sidebar .nav-link > div { display: flex; align-items: center; min-width: 0; }

/* normalize ALL leading icons (defeat per-icon inline margins), keep chevron untouched */
.nav-sidebar .nav-link > i:not(.right),
.nav-sidebar .nav-link > div > i,
.nav-sidebar .nav-link .nav-icon:not(.right) {
  color: var(--rv-text-mute);
  width: 22px !important; min-width: 22px;
  margin: 0 9px 0 0 !important;
  font-size: 15px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .12s ease;
}
.nav-sidebar .nav-link svg { width: 18px; height: 18px; }

.nav-sidebar .nav-link:hover { background: var(--rv-surface-2) !important; color: var(--rv-text) !important; }
.nav-sidebar .nav-link:hover > i:not(.right),
.nav-sidebar .nav-link:hover > div > i,
.nav-sidebar .nav-link:hover .nav-icon:not(.right) { color: var(--rv-text-soft); }

/* active */
.nav-sidebar .nav-link.active {
  background: var(--rv-primary-soft) !important;
  color: var(--rv-primary-700) !important;
  font-weight: 600;
}
.nav-sidebar .nav-link.active > i:not(.right),
.nav-sidebar .nav-link.active > div > i,
.nav-sidebar .nav-link.active .nav-icon:not(.right) { color: var(--rv-primary-600) !important; }

/* collapsible group: chevron + open-state */
.nav-sidebar .nav-link .right {
  margin-left: auto !important; width: auto !important; min-width: 0 !important;
  font-size: 12px; color: var(--rv-text-mute);
  transition: transform .2s ease;
}
.nav-sidebar .menu-open > .nav-link { color: var(--rv-text) !important; font-weight: 600; }
.nav-sidebar .menu-open > .nav-link .right { transform: rotate(-90deg); }

/* treeview children — indented with a guide line */
.nav-sidebar .nav-treeview { padding: 2px 0 4px !important; position: relative; }
.nav-sidebar .nav-treeview::before {
  content: ""; position: absolute; left: 22px; top: 0; bottom: 6px; width: 1px; background: var(--rv-border);
}
.nav-sidebar .nav-treeview .nav-link {
  font-size: 12.75px; padding: 7px 10px 7px 34px !important; border-radius: 8px;
}
.nav-sidebar .nav-treeview .nav-link > i:not(.right),
.nav-sidebar .nav-treeview .nav-link > div > i {
  width: 16px !important; min-width: 16px; font-size: 12.5px; margin-right: 7px !important;
}
.nav-sidebar .nav-treeview .nav-link.active { background: var(--rv-primary-soft) !important; color: var(--rv-primary-700) !important; }

/* Notification badges (override the component's inline <style>) */
.main-sidebar .notification-badge {
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rv-danger) !important; color: #fff !important;
  border-radius: 9px; font-size: 10.5px; font-weight: 700; box-shadow: none !important;
}
.main-sidebar .notification-badge.warning { background: var(--rv-warning) !important; color: #fff !important; }
.main-sidebar .notification-badge span { line-height: 1; }
.nav-sidebar .badge { font-size: 10px; }

/* Topbar */
.main-header.navbar {
  background: var(--rv-surface) !important;
  border-bottom: 1px solid var(--rv-border) !important;
  min-height: 58px;
  box-shadow: var(--rv-shadow-sm);
  padding: 0 16px;
}
.main-header .nav-link { color: var(--rv-text-soft); }
.main-header #pushmenu { color: var(--rv-text-soft); border-radius: 8px; }
.main-header #pushmenu:hover { background: var(--rv-surface-2); }
.main-header .navbar-nav .nav-link:hover { color: var(--rv-text); }

/* Content + breadcrumb */
.content-wrapper { background: var(--rv-bg) !important; }
.content-header { padding: 18px 0 4px; }
.content-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.breadcrumb {
  background: transparent; padding: 14px 0 6px; margin: 0; font-size: 13px;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--rv-text-mute); }
.breadcrumb-item.active { color: var(--rv-text-soft); }
.content { padding: 8px 18px 28px !important; }

/* Footer */
.main-footer {
  background: var(--rv-surface) !important;
  border-top: 1px solid var(--rv-border) !important;
  color: var(--rv-text-mute); font-size: 12.5px; padding: 14px 18px;
}

/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* Cards */
.card {
  background: var(--rv-surface);
  border: 1px solid var(--rv-border) !important;
  border-radius: var(--rv-radius) !important;
  box-shadow: var(--rv-shadow) !important;
  margin-bottom: 20px;
}
.card-header {
  background: var(--rv-surface) !important;
  border-bottom: 1px solid var(--rv-border-2) !important;
  padding: 14px 18px;
  font-weight: 600;
  border-radius: var(--rv-radius) var(--rv-radius) 0 0 !important;
}
.card-header .card-title { font-weight: 600; font-size: 15px; margin: 0; }
.card-body { padding: 18px; }
.card-footer { background: var(--rv-surface-2) !important; border-top: 1px solid var(--rv-border-2) !important; border-radius: 0 0 var(--rv-radius) var(--rv-radius) !important; }

/* Buttons — tame the rainbow, establish hierarchy */
.btn {
  border-radius: var(--rv-radius-sm);
  font-weight: 600;
  font-size: 13.5px;
  padding: .45rem .9rem;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--rv-primary-ring); }
.btn-sm { padding: .3rem .6rem; font-size: 12.5px; border-radius: var(--rv-radius-xs); }
.btn-lg { padding: .6rem 1.2rem; font-size: 15px; }

.btn-primary { background: var(--rv-primary-600); border-color: var(--rv-primary-600); color:#fff; box-shadow: var(--rv-shadow-sm); }
.btn-primary:hover, .btn-primary:focus { background: var(--rv-primary-700); border-color: var(--rv-primary-700); color:#fff; }

.btn-secondary, .btn-default {
  background: var(--rv-surface); border-color: var(--rv-border); color: var(--rv-text-soft);
}
.btn-secondary:hover, .btn-default:hover { background: var(--rv-surface-2); border-color: #d4d9e0; color: var(--rv-text); }

/* Fix: markup that hard-codes `text-white` on a now-light button (e.g. dashboard "View P/L"
   = btn-secondary text-white) would be white-on-white. Give those a readable slate fill.
   Inline background-color (e.g. the purple "Flyers Pdf") still wins, so it's unaffected. */
.btn-secondary.text-white, .btn-default.text-white, .btn-light.text-white {
  background-color: #64748b; border-color: #64748b; color: #fff !important;
}
.btn-secondary.text-white:hover, .btn-default.text-white:hover, .btn-light.text-white:hover {
  background-color: #475569; border-color: #475569; color: #fff !important;
}

.btn-success { background: var(--rv-success); border-color: var(--rv-success); color:#fff; }
.btn-success:hover { filter: brightness(.94); color:#fff; }
.btn-danger  { background: var(--rv-danger); border-color: var(--rv-danger); color:#fff; }
.btn-danger:hover { filter: brightness(.94); color:#fff; }
.btn-warning { background: var(--rv-warning); border-color: var(--rv-warning); color:#fff; }
.btn-warning:hover { filter: brightness(.94); color:#fff; }
.btn-info    { background: var(--rv-info); border-color: var(--rv-info); color:#fff; }
.btn-info:hover { filter: brightness(.94); color:#fff; }

.btn-outline-primary { color: var(--rv-primary-700); border-color: var(--rv-primary-600); background:#fff; }
.btn-outline-primary:hover { background: var(--rv-primary-soft); color: var(--rv-primary-700); }

.btn-link { color: var(--rv-primary); font-weight:600; }

/* Soft/light variants commonly used for table actions */
.btn-xs { padding: .2rem .5rem; font-size: 12px; border-radius: var(--rv-radius-xs); }

/* Tables */
.table { color: var(--rv-text); margin-bottom: 0; }
.table thead th {
  background: var(--rv-surface-2);
  color: var(--rv-text-mute);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--rv-border) !important;
  border-top: 0 !important;
  padding: 11px 10px;
  white-space: nowrap;
}
.table td { padding: 11px 10px; border-top: 1px solid var(--rv-border-2) !important; vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--rv-primary-soft) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--rv-border-2) !important; }
.card > .table:first-child thead th:first-child,
.card .table-responsive { border-radius: 0 0 var(--rv-radius) var(--rv-radius); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm);
  padding: .35rem .6rem; outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--rv-primary-600); box-shadow: 0 0 0 3px var(--rv-primary-ring); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--rv-primary-600) !important; border-color: var(--rv-primary-600) !important;
  color:#fff !important; border-radius: var(--rv-radius-xs);
}
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--rv-radius-xs); }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { opacity: .4; }

/* Forms */
.form-control, .custom-select {
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-sm);
  color: var(--rv-text);
  font-size: 14px;
  padding: .5rem .75rem;
  height: auto;
  background-color: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--rv-primary-600);
  box-shadow: 0 0 0 3px var(--rv-primary-ring);
}
.form-control::placeholder { color: var(--rv-text-mute); }
label, .col-form-label { font-weight: 600; font-size: 13px; color: var(--rv-text-soft); margin-bottom: 5px; }
.form-text { color: var(--rv-text-mute); }
.input-group-text { background: var(--rv-surface-2); border-color: var(--rv-border); color: var(--rv-text-soft); border-radius: var(--rv-radius-sm); }

/* select2 alignment with our inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--rv-border) !important; border-radius: var(--rv-radius-sm) !important; min-height: 38px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--rv-primary-600) !important;
}
.select2-dropdown { border-color: var(--rv-border) !important; border-radius: var(--rv-radius-sm); box-shadow: var(--rv-shadow-md); }
.select2-results__option--highlighted[aria-selected] { background: var(--rv-primary-600) !important; }

/* Badges — softer, tinted */
.badge { font-weight: 600; font-size: 11.5px; padding: .35em .6em; border-radius: 999px; letter-spacing:.01em; }
.badge-primary   { background: var(--rv-primary-soft); color: var(--rv-primary-700); }
.badge-success   { background: var(--rv-success-soft); color: var(--rv-success); }
.badge-danger    { background: var(--rv-danger-soft);  color: var(--rv-danger); }
.badge-warning   { background: var(--rv-warning-soft); color: var(--rv-warning); }
.badge-info      { background: var(--rv-info-soft);    color: var(--rv-info); }
.badge-secondary { background: #eef1f5; color: var(--rv-text-soft); }

/* Alerts */
.alert { border: 1px solid transparent; border-radius: var(--rv-radius-sm); padding: 12px 16px; font-size: 13.5px; }
.alert-success { background: var(--rv-success-soft); border-color: #c9ecd6; color: #14693a; }
.alert-danger  { background: var(--rv-danger-soft);  border-color: #f6cccc; color: #9b1c1c; }
.alert-warning { background: var(--rv-warning-soft); border-color: #f3dcb8; color: #92560a; }
.alert-info    { background: var(--rv-info-soft);    border-color: #bfe6ef; color: #0b6a7e; }

/* Modals */
.modal-content { border: 0; border-radius: var(--rv-radius); box-shadow: var(--rv-shadow-lg); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--rv-border-2); padding: 16px 20px; }
.modal-title { font-weight: 600; font-size: 16px; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--rv-border-2); padding: 14px 20px; }

/* Pagination (Bootstrap/Laravel) */
.pagination { gap: 4px; }
.page-link { border: 1px solid var(--rv-border); border-radius: var(--rv-radius-xs) !important; color: var(--rv-text-soft); margin: 0; }
.page-link:hover { background: var(--rv-surface-2); color: var(--rv-text); }
.page-item.active .page-link { background: var(--rv-primary-600); border-color: var(--rv-primary-600); }

/* Misc */
hr { border-top-color: var(--rv-border-2); }
.text-muted { color: var(--rv-text-mute) !important; }
.dropdown-menu { border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm); box-shadow: var(--rv-shadow-md); padding: 6px; }
.dropdown-item { border-radius: var(--rv-radius-xs); padding: 8px 12px; font-size: 13.5px; }
.dropdown-item:hover { background: var(--rv-surface-2); }
.dropdown-item.active, .dropdown-item:active { background: var(--rv-primary-600); }

/* DataTables toolbar buttons (get .btn via config) — consistent, calm */
.dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dt-buttons .btn, .dt-button {
  background: var(--rv-surface); border: 1px solid var(--rv-border); color: var(--rv-text-soft);
  border-radius: var(--rv-radius-sm); font-weight: 600; font-size: 12.5px; padding: .35rem .7rem;
}
.dt-buttons .btn:hover, .dt-button:hover { background: var(--rv-surface-2); color: var(--rv-text); }
.dt-button.btn-primary { background: var(--rv-primary-600); color:#fff; border-color: var(--rv-primary-600); }

/* select-all / deselect-all helper buttons → calm secondary */
.btn.select-all, .btn.deselect-all {
  background: var(--rv-surface) !important; border: 1px solid var(--rv-border) !important;
  color: var(--rv-text-soft) !important; font-weight: 600;
}
.btn.select-all:hover, .btn.deselect-all:hover { background: var(--rv-surface-2) !important; color: var(--rv-text) !important; }

/* DataTables column-visibility (colvis) dropdown — match brand dropdown look */
.dt-button-collection {
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-sm);
  box-shadow: var(--rv-shadow-md);
  padding: 6px;
  min-width: 200px;
}
.dt-button-collection .dt-button,
.dt-button-collection .buttons-columnVisibility {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rv-radius-xs);
  color: var(--rv-text-soft);
  font-weight: 500;
  font-size: 13.5px;
  padding: 8px 12px;
  margin: 0;
  text-align: left;
}
.dt-button-collection .dt-button:hover,
.dt-button-collection .buttons-columnVisibility:hover {
  background: var(--rv-surface-2);
  color: var(--rv-text);
  border-color: transparent;
}
.dt-button-collection .dt-button.active,
.dt-button-collection .buttons-columnVisibility.active {
  background: var(--rv-primary-soft);
  color: var(--rv-primary-700);
  font-weight: 600;
  border-color: transparent;
}

/* Breathing room for stacked action buttons inside table cells */
.table td .btn { margin: 2px 1px; }
.table td .btn + .btn { margin-left: 3px; }

/* Tabs (used on show pages) — cleaner */
.nav-tabs { border-bottom: 1px solid var(--rv-border); }
.nav-tabs .nav-link { border: 0; color: var(--rv-text-soft); font-weight: 600; padding: 10px 14px; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--rv-text); border-bottom-color: var(--rv-border); }
.nav-tabs .nav-link.active { color: var(--rv-primary-700); background: transparent; border-bottom: 2px solid var(--rv-primary-600); }

/* Small KPI helper for dashboards (new utility) */
.rv-kpi { display:flex; flex-direction:column; gap:6px; }
.rv-kpi .rv-kpi-label { color: var(--rv-text-mute); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.rv-kpi .rv-kpi-value { font-size:26px; font-weight:700; letter-spacing:-.02em; color: var(--rv-text); }

/* =====================================================================
   STAT WIDGETS  — AdminLTE .info-box (incl. <x-card-widget>)
   Number is the hero; icon becomes a clean rounded chip. Color-coded
   variants (bg-red, inline background) are preserved (no !important on bg).
   ===================================================================== */
.info-box {
  display: flex; align-items: center; gap: 14px;
  background: var(--rv-surface);
  border: 1px solid var(--rv-border) !important;
  border-radius: var(--rv-radius) !important;
  box-shadow: var(--rv-shadow) !important;
  padding: 15px 16px;
  min-height: 0 !important;
  margin-bottom: 18px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.info-box:hover { box-shadow: var(--rv-shadow-md) !important; transform: translateY(-1px); }

/* icon chip */
.info-box .info-box-icon {
  flex: 0 0 46px; width: 46px !important; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--rv-primary-soft);
  color: var(--rv-primary-600);
  font-size: 19px !important;
  box-shadow: none !important;
}
.info-box .info-box-icon i,
.info-box .info-box-icon svg { color: inherit; font-size: 19px; }
/* bg-red marks "needs attention" widgets (the class is undefined in the app CSS)
   -> render as a soft red chip with a red glyph */
.info-box .info-box-icon.bg-red { background: var(--rv-danger-soft); color: var(--rv-danger); }
.info-box .info-box-icon.bg-red i,
.info-box .info-box-icon.bg-red svg { color: var(--rv-danger) !important; }
/* semantic soft chips */
.info-box .info-box-icon.bg-success, .info-box .info-box-icon.bg-green { background: var(--rv-success-soft); color: var(--rv-success); }
.info-box .info-box-icon.bg-success i, .info-box .info-box-icon.bg-green i { color: var(--rv-success) !important; }
.info-box .info-box-icon.bg-warning, .info-box .info-box-icon.bg-yellow { background: var(--rv-warning-soft); color: var(--rv-warning); }
.info-box .info-box-icon.bg-warning i, .info-box .info-box-icon.bg-yellow i { color: var(--rv-warning) !important; }
.info-box .info-box-icon.bg-info, .info-box .info-box-icon.bg-blue { background: var(--rv-info-soft); color: var(--rv-info); }
.info-box .info-box-icon.bg-info i, .info-box .info-box-icon.bg-blue i { color: var(--rv-info) !important; }

/* Entity detail header (group/order summary) */
.rv-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
@media (max-width: 575px){ .rv-detail-grid { grid-template-columns: 1fr; } }
.rv-fact { display: flex; flex-direction: column; padding: 5px 0; min-width: 0; }
.rv-fact-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rv-text-mute); }
.rv-fact-value { font-size: 14px; color: var(--rv-text); font-weight: 500; }
.rv-seat-panel { background: var(--rv-surface-2); border: 1px solid var(--rv-border); border-radius: var(--rv-radius); padding: 16px 16px 14px; text-align: center; }
.rv-seat-panel .rv-seat-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rv-text-mute); }
.rv-seat-panel .rv-seat-count { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.rv-progress { height: 8px; background: var(--rv-border); border-radius: 999px; overflow: hidden; }
.rv-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--rv-primary-600); transition: width .3s ease; }
.rv-pax-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rv-pax-chip { font-size: 11.5px; background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: 8px; padding: 3px 8px; color: var(--rv-text-soft); }
.rv-pax-chip b { color: var(--rv-text); font-weight: 700; }

/* Form section header (group long forms into scannable sections) */
.rv-form-section {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--rv-text-soft); margin: 24px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rv-border); display: flex; align-items: center; gap: 8px;
}
.rv-form-section:first-child { margin-top: 4px; }
.rv-form-section i { color: var(--rv-primary-600); font-size: 13px; }

/* =====================================================================
   RESPONSIVE — sidebar goes off-canvas on tablet/mobile
   (the desktop overrides above pin the content 252px right; undo that here)
   ===================================================================== */
@media (max-width: 991.98px) {
  .sidebar-mini .content-wrapper,
  .sidebar-mini .main-header,
  .sidebar-mini .main-footer { margin-left: 0 !important; }

  .main-sidebar,
  .main-sidebar.sidebar-dark-primary {
    margin-left: -252px;            /* off-canvas by default */
    transition: margin-left .25s ease;
    z-index: 1040;
  }
  body.sidebar-open .main-sidebar { margin-left: 0; box-shadow: var(--rv-shadow-lg); }

  #sidebar-overlay { display: none; }
  body.sidebar-open #sidebar-overlay {
    display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(16, 24, 40, .45); z-index: 1039;
  }

  /* content breathing room on small screens */
  .content { padding: 8px 12px 24px !important; }
  .content-header { padding: 12px 0 2px; }

  /* wide content (mostly tables) scrolls inside its card instead of being clipped */
  .card-body { overflow-x: auto; }
  /* toolbar / header rows wrap instead of clipping their buttons */
  .content .d-flex.justify-content-between { flex-wrap: wrap; row-gap: 6px; }
  /* tab strips (incl. projection month tabs) scroll horizontally rather than clip */
  .nav-tabs, .tab-container, .tab-header {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-link { white-space: nowrap; }
  /* long datatable pagination wraps instead of overflowing */
  .pagination { flex-wrap: wrap; }
  .dataTables_paginate { overflow-x: auto; }
  /* tab panes with wide tables scroll instead of clipping */
  .tab-content > .tab-pane { overflow-x: auto; }
}

/* content: small uppercase label, big bold number */
.info-box .info-box-content { display: flex; flex-direction: column; gap: 2px; padding: 0; flex: 1 1 auto; min-width: 0; }
.info-box .info-box-text {
  color: var(--rv-text-mute) !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.info-box .info-box-number {
  color: var(--rv-text) !important;
  font-size: 18px !important; font-weight: 700 !important;
  letter-spacing: -.02em; line-height: 1.15; margin: 0;
}

/* =====================================================================
   DATA / REPORT TABLES  (.table-sm — reports, expenses, commission, flight…)
   Dense but scannable: clean header, subtle zebra + hover, aligned numbers.
   Scoped to .table-sm so DataTables (which use .table-hover/.datatable) are
   unaffected.
   ===================================================================== */
.table.table-sm { font-variant-numeric: tabular-nums; }            /* numbers line up */
.table.table-sm > thead > tr > th,
.table.table-sm > tbody > tr > td,
.table.table-sm > tbody > tr > th,
.table.table-sm > tfoot > tr > td {
  padding: 7px 11px;                                                /* compact, readable */
  vertical-align: middle;
}
.table.table-sm > thead > tr > th {
  background: var(--rv-surface-2);
  color: var(--rv-text-mute);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 2px solid var(--rv-border) !important;
}
/* subtle zebra + clear hover (these tables lack .table-hover) */
.table-sm.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--rv-surface-2); }
.table-sm.table-striped > tbody > tr:hover > *,
.table-sm > tbody > tr:hover > * { background-color: var(--rv-primary-soft) !important; }
/* lighter grid for bordered data tables */
.table-sm.table-bordered,
.table-sm.table-bordered > thead > tr > th,
.table-sm.table-bordered > tbody > tr > td,
.table-sm.table-bordered > tbody > tr > th { border-color: var(--rv-border-2) !important; }
/* emphasise total/summary rows (marked with .table-active, common in these tables) */
.table-sm > tbody > tr.table-active > *,
.table-sm > tfoot > tr > * {
  background: var(--rv-surface-2) !important;
  font-weight: 700; color: var(--rv-text);
  border-top: 2px solid var(--rv-border) !important;
}

/* ============================================================
   Report charts (Chart.js) + collapsible panels + in-table cues
   ============================================================ */
.rv-chart-block { margin: 2px 0 14px; }
/* own collapsible — NOT Bootstrap's .collapse (Tailwind's .collapse utility sets
   visibility:collapse and would hide the chart/canvas inside) */
.rv-collapse { display: none; }
.rv-collapse.rv-open { display: block; }
.rv-chart-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--rv-primary-600, #4f63c7);
  background: var(--rv-surface-2, #f1f3f9); border: 1px solid var(--rv-border, #e2e6ef);
  border-radius: 7px; padding: 5px 11px; cursor: pointer; transition: background .12s, border-color .12s;
}
.rv-chart-toggle:hover { background: #e8ebf6; border-color: #c9d0e8; }
.rv-chart-toggle .fa, .rv-chart-toggle .fas { font-size: 12px; }
.rv-chart-toggle[aria-expanded="true"] .rv-chart-toggle-show { display: none; }
.rv-chart-toggle:not([aria-expanded="true"]) .rv-chart-toggle-hide { display: none; }
.rv-chart-wrap {
  position: relative; height: 300px; margin-top: 12px;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--rv-border, #e2e6ef); border-radius: 10px;
}
/* metric switcher (e.g. Sales / Pax / Bookings) */
.rv-metric-group { display: inline-flex; gap: 0; }
.rv-metric-btn {
  font-size: 12px; font-weight: 600; color: var(--rv-text-2, #64748b);
  background: #fff; border: 1px solid var(--rv-border, #e2e6ef);
  padding: 4px 12px; cursor: pointer;
}
.rv-metric-btn + .rv-metric-btn { border-left: 0; }
.rv-metric-btn:first-child { border-radius: 7px 0 0 7px; }
.rv-metric-btn:last-child { border-radius: 0 7px 7px 0; }
.rv-metric-btn:hover { background: var(--rv-surface-2, #f1f3f9); }
.rv-metric-btn.active {
  background: var(--rv-primary-600, #4f63c7); color: #fff;
  border-color: var(--rv-primary-600, #4f63c7);
}
/* "report warming up" state — shown when a precomputed cache is cold/expired
   instead of misleading zeros or a blank table */
.rv-warming {
  display: flex; align-items: center; gap: 14px;
  margin: 8px 0; padding: 16px 18px;
  background: var(--rv-surface-2, #f1f3f9); border: 1px dashed var(--rv-border, #cbd5e1);
  border-radius: 10px;
}
.rv-warming-icon {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(217,119,6,.12); color: #d97706; font-size: 16px;
}
.rv-warming-text { display: flex; flex-direction: column; gap: 2px; }
.rv-warming-text strong { color: var(--rv-text, #1e293b); font-size: 13.5px; }
.rv-warming-text span { color: var(--rv-text-2, #64748b); font-size: 12.5px; }

.rv-st-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rv-st-controls .rv-st-label { font-size: 11px; font-weight: 600; color: var(--rv-text-2, #94a3b8); text-transform: uppercase; letter-spacing: .03em; margin-right: 2px; }
.rv-st-controls select { height: 31px; }
.rv-chart-wrap.rv-chart-tall { height: 380px; }
.rv-chart-wrap canvas { max-width: 100%; }

/* KPI sparkline + month-over-month delta inside info-box widgets */
.rv-kpi-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rv-spark { position: relative; height: 26px; flex: 1 1 auto; min-width: 0; }
.rv-delta { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.rv-delta-up { color: #16a34a; }
.rv-delta-down { color: #dc2626; }
.rv-delta-flat { color: #64748b; }

/* in-cell mini bar (relative magnitude within a column) */
.rv-cell-bar { position: relative; }
.rv-cell-bar > .rv-cell-bar-fill {
  position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px;
  background: var(--rv-primary-600, #4f63c7); opacity: .55;
}
/* profit-% cues */
.rv-pct { font-weight: 600; }
.rv-pct-good { color: #16a34a; }
.rv-pct-ok   { color: #d97706; }
.rv-pct-low  { color: #dc2626; }
td.rv-neg, .rv-neg { color: #dc2626 !important; }