/* ===============================================================================
Project Name    : Travelcorp DMC, CRM
Module      	: Application Layout Custom Stylesheet
Version       	: V1.0.0 
Programmed by   : Hedayat
Company Name	: TRAVELCORP DMC PVT. LTD.
================================================================================== */
@charset "utf-8";
/* ===============================================================================
Project Name    : Travelcorp DMC, CRM
Module      	: Application Layout Custom Stylesheet
Version       	: V1.0.0 
Programmed by   : Hedayat
Company Name	: TRAVELCORP DMC PVT. LTD.
================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400&family=Hind+Madurai:wght@300;400;500&display=swap");

/*
01. Basic Styles
02. DailySheet Page
03. Datatable Custom Style
*/

/*--------------------------------------------
01. Basic Styles
---------------------------------------------*/
.dark {
  color: #333;
}
.color-orange {
  color: #d9534f !important;
}
.color-green {
  color: green !important;
}
.table thead tr.tamil-font th {
  font-family: "Hind Madurai", sans-serif;
  font-size: 13px !important;
  font-weight: 500;
}
.label-tamil {
  font-family: "Hind Madurai", sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.bg-dark {
  background-color: #262b36;
  color: rgba(255, 255, 255, 0.8);
}
.bg-blue {
  background-color: #1967d2;
  color: rgba(255, 255, 255, 0.8);
}
.bg-dark-blue {
  background-color: #071820;
  color: rgba(255, 255, 255, 0.8);
}
.bg-green {
  background-color: #1fa67a;
  color: rgba(255, 255, 255, 0.8);
}
.bg-dark-green {
  background-color: #084540;
  color: rgba(255, 255, 255, 0.8);
}
.bg-pink {
  background-color: #d43a69;
  color: rgba(255, 255, 255, 0.8);
}
.bg-orange {
  background-color: #e6ad5c;
  color: rgba(255, 255, 255, 0.8);
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb35 {
  margin-bottom: 35px;
}
.mb40 {
  margin-bottom: 40px;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mt0 {
  margin-top: 0;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.mlr15 {
  margin: 0 15px;
}
.padding5 {
  padding: 5px;
}
.padding10 {
  padding: 10px;
}
.nomargin {
  margin: 0;
}
.noshadow {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.nopadding {
  padding: 0;
}
.nopaddingtop {
  padding-top: 0 !important;
}
.nopaddingbottom {
  padding-bottom: 0 !important;
}
.italic {
  font-style: italic;
}
.width100p {
  width: 100%;
}
.width20 {
  width: 20px;
}
.width30 {
  width: 30px;
}
.width50 {
  width: 50px;
}
.width60 {
  width: 60px;
}
.width70 {
  width: 70px;
}
.width80 {
  width: 80px;
}
.width100 {
  width: 100px;
}
.width120 {
  width: 120px;
}
.width200 {
  width: 200px;
}
.inblock {
  display: inline-block;
}
.none {
  display: none;
}
.block {
  display: block;
}
.align-center {
  text-align: center;
}
.bootstrap-select > .dropdown-toggle {
  padding: 7px 15px !important;
}

/*--------------------------------------------
02. Sales and Daily Sheet Header
---------------------------------------------*/
.shed_header {
  font-family: "Hind Madurai", sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.shed_header span {
  display: block;
}
.shed_header span.shed_text {
  margin-top: 10px;
}

/*--------------------------------------------
02. Datatable Custom Style
---------------------------------------------*/
table.dataTable > tbody > tr.child ul.dtr-details > li {
  font-family: "Hind Madurai", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
}
table.dataTable > tbody > tr.child span.dtr-title {
  width: 51%;
  font-weight: 500 !important;
}
table.dataTable > tbody > tr.child span.dtr-title:after {
  content: ":";
}
.datatable_grouping_header {
  background: #3a7fd5;
  background: -webkit-linear-gradient(left, #3a7fd5, #6ebce2);
  background: -o-linear-gradient(left, #3a7fd5, #6ebce2);
  background: linear-gradient(to right, #3a7fd5, #6ebce2);
  color: #fff;
}

/*--------------------------------------------
03. Toast Notifications (showGlobalMessage)
---------------------------------------------*/
/* ===============================================================================
   Toast notifications (.crm-toast) — the ONE place AJAX outcomes are shown.
   Rendered by showGlobalMessage() in application.js on top of jQuery Gritter:
   top-right, square corners, one solid tone per type, a real FontAwesome
   icon in the markup (any icon name works, no per-icon CSS), title line only
   when the caller gave one. Everything else (alert-div wrappers, old class
   names) is normalised away in JS before it gets here.
   =============================================================================== */
#gritter-notice-wrapper {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  width: 360px !important;
  max-width: calc(100vw - 40px) !important;
  z-index: 99999 !important;
}

.gritter-item-wrapper.crm-toast {
  margin: 0 0 10px 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.35), 0 2px 6px -2px rgba(15, 23, 42, 0.2) !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  cursor: pointer;
  animation: crm-toast-in 0.25s ease-out !important;
}

@keyframes crm-toast-in {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

.gritter-item-wrapper.crm-toast .gritter-top,
.gritter-item-wrapper.crm-toast .gritter-bottom {
  display: none !important;
}

.gritter-item-wrapper.crm-toast .gritter-item {
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Gritter emits: .gritter-item > a.gritter-close + .gritter-title + p.
   The p carries our own two-part markup: icon + body. */
.gritter-item-wrapper.crm-toast .gritter-title {
  display: none !important;
}

.gritter-item-wrapper.crm-toast.crm-toast--titled .gritter-title {
  display: block !important;
  padding: 12px 40px 0 52px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  text-transform: none !important;
}

.gritter-item-wrapper.crm-toast p {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 40px 12px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.gritter-item-wrapper.crm-toast.crm-toast--titled p {
  padding-top: 4px !important;
  padding-left: 52px !important;
}

.gritter-item-wrapper.crm-toast .crm-toast-icon {
  flex: 0 0 26px;
  width: 26px;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  margin-top: 1px;
  opacity: 0.95;
}

.gritter-item-wrapper.crm-toast.crm-toast--titled .crm-toast-icon {
  position: absolute;
  left: 14px;
  top: 13px;
}

.gritter-item-wrapper.crm-toast .crm-toast-body {
  flex: 1 1 auto;
  min-width: 0;
  word-wrap: break-word;
}

.gritter-item-wrapper.crm-toast .crm-toast-body a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* One solid tone per type — no gradients, no inner boxes */
.gritter-item-wrapper.crm-toast--success { background: #1f9d6e !important; }
.gritter-item-wrapper.crm-toast--danger  { background: #d23c3c !important; }
.gritter-item-wrapper.crm-toast--warning { background: #d98a1f !important; }
.gritter-item-wrapper.crm-toast--info    { background: #2f6fd1 !important; }
.gritter-item-wrapper.crm-toast--primary { background: #1f3a52 !important; }
.gritter-item-wrapper.crm-toast--update  { background: #6d3fc4 !important; }

/* Close button: visible on hover, top-right of the toast */
.gritter-close {
  display: none;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 20px !important;
  height: 20px !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background: none !important;
  cursor: pointer !important;
  z-index: 9999 !important;
}

.gritter-item-wrapper:hover .gritter-close,
.gritter-item-wrapper.hover .gritter-close {
  display: block;
}

.gritter-close:before {
  text-indent: 0 !important;
  content: "\f00d" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  text-align: center !important;
  font-family: "FontAwesome" !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  opacity: 1 !important;
  transition: color 0.15s ease-in-out !important;
}

.gritter-close:hover:before {
  color: #ffffff !important;
}

/* Zebra Datepicker Styling */
.Zebra_DatePicker {
  z-index: 2100 !important; /* above .headerpanel (2000) — otherwise a calendar that
                                pops upward from a field near the top of a modal
                                renders behind the fixed app header and gets cropped */
}
.Zebra_DatePicker .dp_actions td {
  background-color: #1f3a52 !important;
  color: #fff !important;
}
.Zebra_DatePicker .dp_actions .dp_hover {
  background-color: #3b82f6 !important;
  color: #fff !important;
}
.Zebra_DatePicker .dp_daypicker th {
  background-color: #f1f5f9 !important;
  color: #1f3a52 !important;
}
.Zebra_DatePicker .dp_body .dp_selected {
  background-color: #3b82f6 !important;
  color: #fff !important;
}
.Zebra_DatePicker .dp_footer td {
  background-color: #1f3a52 !important;
  color: #fff !important;
}
.Zebra_DatePicker .dp_footer .dp_hover {
  background-color: #3b82f6 !important;
  color: #fff !important;
}

/* ===============================================================================
   04. Lightweight Utility Footer Bar & Right Canvas
   =============================================================================== */
#crm-mini-footer {
  position: fixed;
  bottom: 0;
  left: 250px;
  right: 0;
  height: 32px;
  line-height: 32px;
  background: #1e293b;
  color: #94a3b8;
  z-index: 1020;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  border-top: 1px solid #334155;
  box-sizing: border-box;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  user-select: none;
  transition: left 0.2s ease;
}

@media (max-width: 991px) {
  #crm-mini-footer {
    left: 0 !important;
  }
}

#crm-mini-footer .crm-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #94a3b8;
  font-size: 12px;
}

#crm-mini-footer .crm-footer-left strong {
  color: #f1f5f9;
  font-weight: 600;
  font-size: 12px;
}

#crm-mini-footer .crm-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

#crm-mini-footer .crm-footer-btn {
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  color: #cbd5e1 !important;
  font-size: 12px;
  font-weight: 500;
  padding: 0 10px;
  height: 22px;
  line-height: 20px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out;
}

#crm-mini-footer .crm-footer-btn:hover {
  background: #334155;
  color: #ffffff !important;
  border-color: #475569;
}

#crm-mini-footer .crm-footer-btn.active {
  background: #2563eb;
  color: #ffffff !important;
  border-color: #2563eb;
}

/* Right Canvas Panel */
#crm-right-canvas {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 32px;
  width: 380px;
  max-width: 90vw;
  background: #ffffff;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.18);
  z-index: 3000;
  overflow-y: auto;
  border-left: 1px solid #e2e8f0;
  box-sizing: border-box;
}

#crm-right-canvas.open {
  display: flex;
  flex-direction: column;
}

#crm-right-canvas .canvas-header {
  padding: 12px 16px;
  background: #1e293b;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #334155;
  flex-shrink: 0;
}

#crm-right-canvas .canvas-body {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: #f8fafc;
}

/* ===============================================================================
   Row Actions dropdown — a single compact "Actions" trigger + menu, replacing
   a row of inline buttons packed edge-to-edge in a datatable's Actions column
   (introduced for Packages/Itinerary; safe to reuse in any other listing).
   The .dropdown-menu is switched to position:fixed on open (see application.js)
   so it escapes .table-responsive's overflow clipping instead of being cut off.
   =============================================================================== */
.row-actions-dropdown .dropdown-toggle {
  padding: 3px 8px;
}

.row-actions-dropdown .dropdown-menu {
  min-width: 150px;
  padding: 4px 0;
}

.row-actions-dropdown .dropdown-menu > li > a {
  display: block;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}

.row-actions-dropdown .dropdown-menu > li > a i {
  width: 16px;
  display: inline-block;
  text-align: center;
  margin-right: 4px;
}

/* Truncate a long listing-column title to one line with an ellipsis; the full
   text is shown on hover via the existing data-toggle="popover" idiom already
   used elsewhere in these same tables (Audit Info, image counts). */
.crm-title-truncate {
  display: inline-block;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

/* ===============================================================================
   Info tooltip / popover — modernized, single global definition.
   Previously copy-pasted into ~15 modules/views/*.php <style> blocks (drifted:
   some added a font-family, some an .open-right / .align-right variant). This is
   the superset, restyled: soft slate border, layered soft shadow, roomier
   padding, a dark navy header bar, and SQUARE corners (no border-radius) to
   match the theme. The per-file copies were removed; this is the only definition.
   =============================================================================== */
.crm-tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0284c7;
  margin-left: 5px;
  font-size: 13px;
  transition: color 0.2s ease;
}

.crm-tooltip-trigger:hover {
  color: #0369a1;
}

.crm-tooltip-dropdown {
  display: none;
  position: absolute;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  width: 280px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 0;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.10);
  color: #334155;
  text-align: left;
  white-space: normal;
  line-height: 1.55;
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  font-family: inherit;
}

/* Header bar — broken out to the card edges against the 14x16 padding (no
   overflow:hidden, which would clip the arrows). Dark navy to match the
   app's modal headers. Only the first h5 is the header; a later h5 (e.g. an
   "Improvement Tips" sub-heading) keeps its own in-body styling. */
.crm-tooltip-dropdown h5:first-of-type {
  margin: -14px -16px 12px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  background: #1f3a52;
  color: #ffffff;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
}

.crm-tooltip-dropdown h5:first-of-type i {
  color: inherit;
}

.crm-tooltip-dropdown strong {
  color: #1e293b;
}

.crm-tooltip-dropdown::before,
.crm-tooltip-dropdown::after {
  content: '';
  position: absolute;
  bottom: 100%;
  /* --arrow-left is set by application.js only on the JS-portaled clone
     (.crm-tooltip-portal), so the arrow keeps pointing at the trigger even
     when the box itself has been shifted to stay inside the viewport. Every
     other instance has no custom property set and falls back to 50%,
     unchanged from before. */
  left: var(--arrow-left, 50%);
  border-style: solid;
}

.crm-tooltip-dropdown::before {
  margin-left: -8px;
  border-width: 8px;
  border-color: transparent transparent #e6eaf0 transparent;
}

.crm-tooltip-dropdown::after {
  margin-left: -7px;
  border-width: 7px;
  border-color: transparent transparent #ffffff transparent;
}

.crm-tooltip-trigger:hover .crm-tooltip-dropdown {
  display: block;
}

/* JS-driven portal (application.js): the hovered .crm-tooltip-dropdown is
   cloned into <body> as position:fixed with its top/left computed from the
   trigger's real screen coordinates and clamped inside the viewport — this is
   what escapes both a clipping ancestor (e.g. a .table-responsive header,
   which no left/right-only CSS fix can escape) and the viewport edge itself.
   Geometry (position/top/left/transform/margin) is set inline from JS; this
   class only carries the one thing CSS alone still needs to know: whether the
   box ended up flipped above its trigger. */
.crm-tooltip-portal {
  display: block;
}

/* Flipped above the trigger (would have overflowed the bottom of the
   viewport): the arrow moves from the top edge to the bottom edge and points
   down instead of up. Mirrors the base ::before/::after pair exactly, just
   inverted top<->bottom and the triangle's open side. */
.crm-tooltip-portal.crm-tooltip-flip-up::before,
.crm-tooltip-portal.crm-tooltip-flip-up::after {
  top: 100%;
  bottom: auto;
}

.crm-tooltip-portal.crm-tooltip-flip-up::before {
  border-color: #e6eaf0 transparent transparent transparent;
}

.crm-tooltip-portal.crm-tooltip-flip-up::after {
  border-color: #ffffff transparent transparent transparent;
}

/* Taller than the room beside its trigger (e.g. the Query statuses guide):
   application.js caps the height and the box scrolls inside itself. The arrow
   would be clipped by the scroll box, so it is hidden; the header stays pinned
   while the list scrolls, and the scroll never runs on into the page. */
.crm-tooltip-portal.crm-tooltip-scroll {
  overscroll-behavior: contain;
}

.crm-tooltip-portal.crm-tooltip-scroll::before,
.crm-tooltip-portal.crm-tooltip-scroll::after {
  display: none;
}

.crm-tooltip-portal.crm-tooltip-scroll h5:first-of-type {
  position: sticky;
  top: -14px;
  z-index: 1;
}

/* Variant: keep the card below the trigger but right-align it so it doesn't
   overflow the viewport edge (used where the trigger sits near the right). */
.crm-tooltip-trigger.align-right .crm-tooltip-dropdown {
  left: auto;
  right: 0;
  transform: none;
}

.crm-tooltip-trigger.align-right .crm-tooltip-dropdown::before,
.crm-tooltip-trigger.align-right .crm-tooltip-dropdown::after {
  left: auto;
  right: 12px;
  margin-left: 0;
}

/* Variant: open the card to the RIGHT of the trigger, arrow pointing left. */
.crm-tooltip-trigger.open-right .crm-tooltip-dropdown {
  top: 50%;
  left: 125%;
  right: auto;
  transform: translateY(-50%);
  margin-left: 0;
}

.crm-tooltip-trigger.open-right .crm-tooltip-dropdown::before,
.crm-tooltip-trigger.open-right .crm-tooltip-dropdown::after {
  top: 50%;
  bottom: auto;
  left: auto;
  right: 100%;
  margin-left: 0;
}

.crm-tooltip-trigger.open-right .crm-tooltip-dropdown::before {
  margin-top: -8px;
  border-width: 8px;
  border-color: transparent #e6eaf0 transparent transparent;
}

.crm-tooltip-trigger.open-right .crm-tooltip-dropdown::after {
  margin-top: -7px;
  border-width: 7px;
  border-color: transparent #ffffff transparent transparent;
}

/* Bootstrap popover (Audit Info columns, image thumbnails, truncated titles)
   brought to the same modern card as the tooltip above — overrides tcd.css's
   Bootstrap-3 defaults. SQUARE corners, dark navy header, to match the theme. */
.popover {
  padding: 0;
  border: 1px solid #e6eaf0;
  border-radius: 0;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.10);
  font-family: inherit;
  font-size: 12px;
}

.popover-title {
  background: #1f3a52;
  border-bottom: none;
  border-radius: 0;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  font-family: inherit;
  color: #ffffff;
}

.popover-content {
  padding: 12px 14px;
  color: #334155;
  line-height: 1.55;
}

.popover.top > .arrow { border-top-color: #e6eaf0; }
.popover.top > .arrow:after { border-top-color: #ffffff; }
.popover.right > .arrow { border-right-color: #e6eaf0; }
.popover.right > .arrow:after { border-right-color: #ffffff; }
.popover.bottom > .arrow { border-bottom-color: #e6eaf0; }
.popover.bottom > .arrow:after { border-bottom-color: #ffffff; }
.popover.left > .arrow { border-left-color: #e6eaf0; }
.popover.left > .arrow:after { border-left-color: #ffffff; }

/* ===============================================================================
   Selectpicker dropdown height cap — app-wide.
   bootstrap-select 1.13.14 (bundled in assets/js/plugin.js) sizes an open menu
   from the available window space with windowPadding:0, which on a long option
   list (the ~4000-row State list on the Vehicle form, for one) computes to
   ~400px and runs the menu up under the fixed header. Capping the *scroll
   container* keeps the list short and scrollable; the outer .dropdown-menu then
   shrinks to fit, so the search box and Select All / Deselect All action bar are
   never clipped. !important is required — the plugin writes max-height inline.
   =============================================================================== */
.bootstrap-select .dropdown-menu .inner,
.bootstrap-select .dropdown-menu.inner {
  max-height: 240px !important;
  overflow-y: auto !important;
}

/* ===============================================================================
   Repeatable "+ Add Line" list (Package Terms, Itinerary Inclusions/Exclusions).
   One hint callout per panel instead of the same sentence under every field, and
   a row whose input and trash button share one height so they line up.
   Square corners throughout — house rule.
   =============================================================================== */
.crm-line-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #1f3a52;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #475569;
}

.crm-line-hint > i {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 13px;
  color: #1f3a52;
}

/* Blue "read this" variant of the hint callout — for instructions that explain
   how a settings screen works, where a flat grey <p class="text-muted"> was
   getting skipped over entirely. */
.crm-line-hint.crm-line-hint--info {
  background: #eaf3fb;
  border-color: #cfe2f3;
  border-left-color: #1a5c9e;
  color: #1f4b73;
}

.crm-line-hint.crm-line-hint--info > i {
  color: #1a5c9e;
}

/* Amber "pay attention" variant — same structure as --info, for a warning
   that needs surfacing rather than hiding (e.g. conflicting scoring evidence). */
.crm-line-hint.crm-line-hint--warning {
  background: #fdf3e3;
  border-color: #f0dcae;
  border-left-color: #b8790a;
  color: #7a5100;
}

.crm-line-hint.crm-line-hint--warning > i {
  color: #b8790a;
}

.crm-line-hint strong {
  color: inherit;
}

/* Daily Inflow plate rows (dashboard). The divider is a class rather than an
   inline border so the last *rendered* row always closes the list cleanly —
   Agents/Prospects are conditionally hidden on a B2C-only CRM, which would
   otherwise leave a trailing rule under whichever row came last. */
.inflow-plate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 4px;
  border-bottom: 1px solid #f1f5f9;
}

.inflow-plate-row:last-child {
  border-bottom: none;
}

.terms-line-row {
  margin-bottom: 6px;
}

.terms-line-row .terms-item-input,
.terms-line-row .btn-remove-terms-item {
  height: 34px;
  border-radius: 0;
}

.terms-line-row .terms-item-input {
  font-size: 12px;
}

.terms-line-row .btn-remove-terms-item {
  padding: 0 11px;
  line-height: 32px;
}

.btn-add-terms-item {
  border-radius: 0;
  margin-top: 2px;
}

/* ===============================================================================
   Row Actions menu — semantic colour coding, app-wide.
   A menu of five black-on-white links reads as an undifferentiated list; the
   destructive item looks exactly like the routine one. Every action anchor
   emitted through crm_row_actions_menu() carries exactly ONE class following a
   verb_noun convention (edit_package, delete_vehicle, toggle_status, ...), so
   the whole app can be coloured from here with no PHP change.

   Prefix (^=) matching, never substring (*=): "edit_" is a substring of
   "credit_", so [class*="edit_"] would wrongly paint delete_credit_note,
   manage_credit_notes and preview_credit_note as edit-blue.

   Light tint + dark same-hue text, so the label stays high-contrast and the
   category is readable at a glance.
   =============================================================================== */
.row-actions-dropdown .dropdown-menu > li > a {
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.row-actions-dropdown .dropdown-menu > li > a i {
  color: inherit;
}

/* Edit — blue. The routine "open this record" action. */
.row-actions-dropdown .dropdown-menu > li > a[class^="edit_"] {
  background-color: #e8f1fb;
  border-left-color: #1a5c9e;
  color: #1a5c9e;
}
.row-actions-dropdown .dropdown-menu > li > a[class^="edit_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="edit_"]:focus {
  background-color: #d5e6f7;
  color: #14487c;
}

/* Builders, tools and one-off operations — teal. */
.row-actions-dropdown .dropdown-menu > li > a[class^="build_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="manage_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="issue_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="record_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="convert_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="refresh_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="preview_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="btn_preview_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="btn_email_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="change_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="reset_"] {
  background-color: #e2f4f6;
  border-left-color: #10707d;
  color: #10707d;
}
.row-actions-dropdown .dropdown-menu > li > a[class^="build_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="manage_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="issue_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="record_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="convert_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="refresh_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="preview_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="btn_preview_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="btn_email_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="change_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="reset_"]:hover {
  background-color: #cfeaee;
  color: #0b5a65;
}

/* Approve / finalize / reactivate — green, the "commit it" family. */
.row-actions-dropdown .dropdown-menu > li > a[class^="approve_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="finalize_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="reactivate_"] {
  background-color: #e6f5ec;
  border-left-color: #1a7f45;
  color: #1a7f45;
}
.row-actions-dropdown .dropdown-menu > li > a[class^="approve_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="finalize_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="reactivate_"]:hover {
  background-color: #d3ecdd;
  color: #146336;
}

/* Status toggles and reject/cancel — amber, "this changes availability". */
.row-actions-dropdown .dropdown-menu > li > a[class^="toggle_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="reject_"],
.row-actions-dropdown .dropdown-menu > li > a[class^="cancel_"] {
  background-color: #fdf3e0;
  border-left-color: #9a6508;
  color: #9a6508;
}
.row-actions-dropdown .dropdown-menu > li > a[class^="toggle_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="reject_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="cancel_"]:hover {
  background-color: #fae7c6;
  color: #7d5206;
}

/* One class serves both directions of a status toggle, so the *intent* is in
   data-status: 1 = clicking activates (green), 0 = clicking deactivates (amber
   above). Keeps "Activate" visually distinct from "Deactivate". */
.row-actions-dropdown .dropdown-menu > li > a[class^="toggle_"][data-status="1"] {
  background-color: #e6f5ec;
  border-left-color: #1a7f45;
  color: #1a7f45;
}
.row-actions-dropdown .dropdown-menu > li > a[class^="toggle_"][data-status="1"]:hover {
  background-color: #d3ecdd;
  color: #146336;
}

/* Delete — red. Always the most visually distinct item in the menu. */
.row-actions-dropdown .dropdown-menu > li > a[class^="delete_"] {
  background-color: #fdeaea;
  border-left-color: #b02525;
  color: #b02525;
}
.row-actions-dropdown .dropdown-menu > li > a[class^="delete_"]:hover,
.row-actions-dropdown .dropdown-menu > li > a[class^="delete_"]:focus {
  background-color: #f9d5d5;
  color: #8e1c1c;
}

/* History / read-only views — neutral grey, deliberately the quietest. */
.row-actions-dropdown .dropdown-menu > li > a[class^="view_"] {
  background-color: #eef1f5;
  border-left-color: #4a5568;
  color: #4a5568;
}
.row-actions-dropdown .dropdown-menu > li > a[class^="view_"]:hover {
  background-color: #e0e5ec;
  color: #364152;
}

/* ===============================================================================
   Content Presets — grouped category picker (Configurations > Content Presets).
   Seven equal tabs in one horizontal row made the two categories people actually
   reach for (Inclusion / Exclusion) hard to spot. A grouped vertical list labels
   them by where the content is used and scales as categories are added.
   =============================================================================== */
.preset-category-nav {
  border: 1px solid #e2e8f0;
  background: #fbfcfd;
}

.preset-category-group {
  padding: 7px 12px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}

.preset-category-group:not(:first-child) {
  border-top: 1px solid #e2e8f0;
}

.preset-category-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid #eef2f6;
  border-left: 3px solid transparent;
  font-size: 12px;
  color: #334155;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.preset-category-item:last-child {
  border-bottom: none;
}

.preset-category-item > i {
  width: 14px;
  text-align: center;
  color: #94a3b8;
}

.preset-category-item:hover,
.preset-category-item:focus {
  background: #eef4fa;
  color: #1a5c9e;
  text-decoration: none;
}

.preset-category-item.active {
  background: #e8f1fb;
  border-left-color: #1f3a52;
  color: #1f3a52;
  font-weight: 700;
}

.preset-category-item.active > i {
  color: #1f3a52;
}

/* Per-category preset count, filled in by configurations.js after each load. */
.preset-count {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.preset-category-item.active .preset-count {
  background: #1f3a52;
  color: #ffffff;
}

.preset-count:empty {
  display: none;
}

/* ===============================================================================
   Sticky Notes (modules/views/user_notes.php).
   The page used to carry its own inline styling and rounded corners; these
   classes bring it onto the same footing as the other listings. Square corners
   throughout — house rule. The note background colours stay inline because they
   are per-record data, not chrome.
   =============================================================================== */
.note-tabs {
  margin-bottom: 0;
  border-bottom: 2px solid #e2e8f0;
}

.note-tabs > li > a {
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  border-radius: 0;
}

.note-tabs > li.active > a,
.note-tabs > li.active > a:hover,
.note-tabs > li.active > a:focus {
  color: #1f3a52;
}

.note-tab-content {
  padding: 18px 0 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.note-empty {
  padding: 45px 20px;
  text-align: center;
  border: 1px dashed #cbd5e1;
  background: #fbfcfd;
}

.note-empty > i {
  color: #cbd5e1;
  margin-bottom: 10px;
}

.note-empty h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}

.note-empty p {
  margin: 5px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

/* Colour picker / filter chips — square, per the sharp-corner rule. The radio
   itself is the state; the chip beside it is what's actually visible. */
.note-colour-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 34px;
}

.note-colour-filter label {
  margin: 0;
  cursor: pointer;
  line-height: 1;
}

.note-colour-filter input[type="radio"] {
  display: none;
}

.note-colour-chip {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1.5px solid #cbd5e1;
  border-radius: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.note-colour-chip--lg {
  width: 26px;
  height: 26px;
}

.note-colour-all {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.note-colour-filter label:hover .note-colour-chip,
.note-colour-filter label:hover .note-colour-all {
  transform: scale(1.08);
}

.note-colour-filter input[type="radio"]:checked + .color-filter-btn,
.note-colour-filter input[type="radio"]:checked + .color-select-btn,
.note-colour-filter .color-filter-btn.active {
  border-color: #1f3a52;
  box-shadow: 0 0 0 2px rgba(31, 58, 82, 0.25);
}

.note-colour-filter input[type="radio"]:checked + .note-colour-all,
.note-colour-filter .note-colour-all.active {
  background: #1f3a52;
  border-color: #1f3a52;
  color: #ffffff;
}

/* ===============================================================================
   Listing cell components — chips, route, thumbnails, review/source markers.
   Shared by the Vehicles and Itinerary listings. Square corners throughout.
   =============================================================================== */

/* Chips — used for the Vehicle State(s) cell. A vehicle mapped to a dozen
   states used to print every name into the cell and stretch the row; now the
   first few show and the rest live behind a "+N more" hover. */
.crm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.crm-chip {
  display: inline-block;
  padding: 2px 7px;
  background: #eef2f6;
  border: 1px solid #dde3ea;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #334155;
  white-space: nowrap;
}

.crm-chip--more {
  background: #e8f1fb;
  border-color: #c9ddf5;
  color: #1a5c9e;
  font-weight: 700;
  cursor: help;
}

/* Route — "From -> To" on ONE line. Previously the origin was stacked under
   the destination as a separate muted line, which read as two facts instead
   of one journey. */
.crm-route {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.4;
}

.crm-route > .fa-map-marker {
  color: #b02525;
  flex: 0 0 auto;
}

.crm-route-from {
  color: #64748b;
}

.crm-route-arrow {
  color: #94a3b8;
  font-size: 11px;
}

.crm-route-to {
  font-weight: 700;
  color: #1e293b;
}

/* Listing thumbnail + hover gallery */
.crm-thumb {
  display: block;
  width: 52px;
  height: 38px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  border-radius: 0;
  background: #f8fafc;
}

.crm-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 15px;
}

.crm-thumb-wrap {
  position: relative;
  display: inline-block;
  cursor: help;
}

.crm-thumb-count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 0 4px;
  background: #1f3a52;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
}

.crm-thumb-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}

.crm-thumb-gallery img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

/* Source + Status + Review, stacked in one cell */
.crm-state-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

/* Review state is deliberately NOT a filled badge. It used to be, and
   "Approved" green sat next to "Active" green so the two read as the same
   fact. An underlined marker in its own hue separates them by shape AND
   colour. */
.crm-review {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 1px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-bottom: 2px solid currentColor;
  white-space: nowrap;
}

.crm-review--approved {
  color: #4c3fa8;   /* indigo — never used by a status label */
}

.crm-review--pending {
  color: #9a6508;   /* amber */
}

.crm-blink {
  animation: crm-blink-fade 1.4s ease-in-out infinite;
}

@keyframes crm-blink-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Source — a quiet outline, so it doesn't compete with the status label */
.crm-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.crm-source--builder {
  color: #9a6508;
}

.crm-source--master {
  color: #10707d;
}

/* Small icon + label + value rows, stacked — reusable wherever a listing
   cell needs to show several short facts at once (hotel Occupancy &
   Operational Rules, supplier Contact & Location). Square corners, slate
   palette, matches .crm-state-stack / .crm-tooltip-dropdown. */
.crm-fact-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1.4;
}

.crm-fact-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #334155;
}

.crm-fact-icon {
  flex-shrink: 0;
  width: 13px;
  text-align: center;
  color: #94a3b8;
  margin-top: 1px;
}

.crm-fact-row strong {
  color: #1e293b;
  font-weight: 600;
}

/* A "Label value" pair inside a .crm-fact-row that must never split across two
   lines (e.g. "Child 5-11") — a plain space-wrap already breaks a narrow
   listing column cleanly between pairs; without this, the browser was free to
   wrap mid-pair too, on a hyphen or space inside the value itself ("Infant <
   5y" / "Child 5-11" rendering as "5-" then "11" on the next line). */
.crm-fact-nowrap {
  white-space: nowrap;
}

/* A fact row whose whole content is a hover trigger (hotel "4 rooms · view").
   The trigger is inline-flex, which drops the whitespace between its children,
   so the icon, count and "view" link ran together; its default margin-left
   also pushed this row's icon out of line with the rows below it. */
.crm-fact-row > .crm-tooltip-trigger {
  gap: 5px;
  margin-left: 0;
  justify-content: flex-start;
  color: inherit;
  font-size: inherit;
}

/* A labelled sub-section inside a .crm-tooltip-dropdown that already has
   its own dark h5 header — for a card with more than one grouped list
   (e.g. Room Types / Meal Plans / Amenities under one "Room Types, Meal
   Plans & Amenities" header) so only the first h5 needs the banner style
   and the rest read as clear, consistent sub-labels instead of unstyled
   browser default headings. */
.crm-tooltip-dropdown .crm-subheading {
  margin: 10px 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #64748b;
}

.crm-tooltip-dropdown .crm-subheading:first-of-type {
  margin-top: 0;
}

/* Star rating + reliability progress bar, stacked in one cell (supplier
   Rating & Reliability). Was referenced in markup with zero CSS backing
   it — rendered as unstyled inline HTML. */
.crm-ratings-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ===============================================================================
   Select2 — themed to the house select (bootstrap-select .selectpicker).
   Loaded from the CDN on every page; this block lives in application.css so it
   loads after both tcd.css and the CDN sheet and wins on plain specificity.
   Every measurement below is the theme's own: .form-control / .btn-default
   for the control, .dropdown-menu > li > a for the list, .bs-searchbox for
   the search box, .form-control[disabled] / .has-error for the states.
   Behaviour defaults (width, modal parent, focus) are in application.js.
   =============================================================================== */

/* --- Control (single) ------------------------------------------------------- */
.select2-container--default .select2-selection--single {
  height: 35px;
  background-color: #ffffff;
  border: 1px solid #bdc3d1;
  border-radius: 2px;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 33px;
  line-height: 33px;
  padding-left: 12px;
  padding-right: 30px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #696c74;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #9fa8bc;
}
/* Arrow → the theme's .caret triangle */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 30px;
  height: 33px;
  right: 1px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #696c74 transparent transparent transparent;
  border-width: 4px 4px 0 4px;
  margin-left: -4px;
  margin-top: -2px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #696c74 transparent;
  border-width: 0 4px 4px 4px;
}
/* allowClear × */
.select2-container--default .select2-selection--single .select2-selection__clear {
  float: right;
  margin-right: 4px;
  font-size: 16px;
  font-weight: normal;
  color: #9fa8bc;
  line-height: 33px;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #d9534f;
}

/* --- Control (multiple) ----------------------------------------------------- */
.select2-container--default .select2-selection--multiple {
  min-height: 35px;
  background-color: #ffffff;
  border: 1px solid #bdc3d1;
  border-radius: 2px;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  outline: none;
  padding-bottom: 2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 6px;
  line-height: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 5px 4px 0 0;
  padding: 0 8px 0 6px;
  height: 23px;
  line-height: 23px;
  border: none;
  border-radius: 2px;
  background-color: #1f3a52;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #ffffff;
  opacity: 0.8;
  margin-right: 6px;
  font-size: 14px;
  font-weight: normal;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ffffff;
  opacity: 1;
}
.select2-container--default .select2-search--inline .select2-search__field {
  margin-top: 6px;
  height: 23px;
  line-height: 23px;
  padding-left: 6px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #262b36;
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
  color: #9fa8bc;
}

/* --- Focus / open (same as .form-control:focus) ----------------------------- */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #66afe9;
  background-color: #ffffff;
  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}

/* --- Disabled (same as the selectpicker's: white, muted text) --------------- */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #ffffff;
  border-color: #d5d9e2;
  cursor: not-allowed;
  box-shadow: none;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: #9fa8bc;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
  border-top-color: #9fa8bc;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
  background-color: #9fa8bc;
}

/* --- Validation states (same as .has-error / .has-success .form-control) ---- */
.has-error .select2-container--default .select2-selection--single,
.has-error .select2-container--default .select2-selection--multiple {
  border-color: #d9534f;
}
.has-error .select2-container--default.select2-container--focus .select2-selection--single,
.has-error .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #c9302c;
  box-shadow: 0 0 6px rgba(217, 83, 79, 0.5);
}
.has-success .select2-container--default .select2-selection--single,
.has-success .select2-container--default .select2-selection--multiple {
  border-color: #1fa67a;
}

/* --- Small size: <select class="… input-sm"> (filter bars) ------------------- */
.select2-container--default .select2-selection--single.select2-selection--sm,
select.input-sm + .select2-container--default .select2-selection--single {
  height: 30px;
}
select.input-sm + .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: 28px;
  line-height: 28px;
  font-size: 11.5px;
}
select.input-sm + .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 28px;
}
select.input-sm + .select2-container--default .select2-selection--multiple {
  min-height: 30px;
}

/* --- Dropdown (same as .dropdown-menu) -------------------------------------- */
.select2-container--default .select2-dropdown,
.select2-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  background-color: #ffffff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #333333;
  z-index: 1065; /* above .modal (1050) and its backdrop */
}
.select2-container--default .select2-dropdown--below {
  margin-top: 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.select2-container--default .select2-dropdown--above {
  margin-top: -2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.select2-container--default .select2-results > .select2-results__options {
  margin: 4px;
  max-height: 240px;
}
.select2-container--default .select2-results__option {
  padding: 5px 7px;
  margin: 0 0 1px;
  border-radius: 2px;
  line-height: 1.42857143;
  color: #333333;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #bdc3d1;
  color: #ffffff;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #2574ab;
  color: #ffffff;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: #9fa8bc;
  cursor: not-allowed;
}
.select2-container--default .select2-results__group {
  padding: 6px 7px 3px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #9fa8bc;
}
.select2-container--default .select2-results__option .select2-results__group + .select2-results__options--nested .select2-results__option,
.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 14px;
}
.select2-container--default .select2-results__message {
  color: #9fa8bc;
  font-style: italic;
}
.select2-container--default .select2-results__option.loading-results {
  color: #9fa8bc;
}

/* --- Search box in the dropdown (same as .bs-searchbox .form-control) ------- */
.select2-container--default .select2-search--dropdown {
  padding: 4px 8px 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 30px;
  padding: 5px 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #262b36;
  background-color: #fcfcfd;
  border: 1px solid #bdc3d1;
  border-radius: 2px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #66afe9;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

/* --- Container ----------------------------------------------------------------- */
.select2-container {
  display: block;
  font-family: "Open Sans", sans-serif;
}
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
  text-align: left;
}

/* ===============================================================================
   Selects - one height, one look (the three kinds: native, bootstrap-select, Select2)
   Early in this file on purpose: a page's own rule for a compact select (same or higher specificity) still wins.
   =============================================================================== */
/* Native <select class="form-control">: as tall as the inputs (35px; input-sm 32px), the house caret instead of the OS arrow, and NO vertical padding - a fixed
   height plus vertical padding is what cut the text at the bottom (the browser centres the text itself). Multi-line lists keep the browser's look. */
select.form-control:where(:not([multiple]):not([size])) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 35px;
  padding: 0 30px 0 12px;
  line-height: normal;
  font-size: 12px;
  text-overflow: ellipsis;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23696c74'/%3E%3C/svg%3E") no-repeat right 12px center;
}
select.form-control.input-sm:where(:not([multiple]):not([size])) {
  height: 32px;
  padding: 0 26px 0 8px;
  background-position: right 9px center;
}
select.form-control:where(:not([multiple]):not([size]))[disabled] {
  background-color: #f1f3f8;
}
/* bootstrap-select toggle: as tall as the control it replaces (it was 33px beside 35px inputs), the text centred. btn-sm toggles are the compact bars' own. */
.bootstrap-select.form-control > .dropdown-toggle:where(:not(.btn-sm)) {
  min-height: 35px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* A button group standing in a filter row (Leads > Temperature) is as tall as the selects beside it */
.crm-af-body .btn-group-justified > .btn-group > .btn { height: 35px; }

/* Inline "action" link on a field label, e.g. <label>Location / Zone <a class="crm-label-action">+ Add Zone</a></label> */
label:has(> .crm-label-action) {
  display: block;
}
.crm-label-action {
  float: right;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #2574ab;
  cursor: pointer;
  text-decoration: none;
  line-height: inherit;
}
.crm-label-action:hover,
.crm-label-action:focus {
  color: #1f3a52;
  text-decoration: none;
}
.crm-label-action i {
  margin-right: 3px;
}

/* ------------------------------------------------------------------
   Repeater tables (hotel rooms / child bands / season dates / extras)
   and the Hotel Rate Sheet grid. Square corners, house colours.
   ------------------------------------------------------------------ */
.crm-repeater > thead > tr > th {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  vertical-align: middle;
  border-radius: 0;
}
.crm-repeater > tbody > tr > td {
  vertical-align: middle;
  padding: 4px 6px;
}
.crm-repeater .form-control.input-sm {
  height: 30px;
  border-radius: 0;
}
.crm-repeater .bootstrap-select > .dropdown-toggle {
  height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.crm-rate-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.crm-rate-tool {
  display: flex;
  align-items: center;
  gap: 8px;
}
.crm-rate-tool label {
  margin: 0;
  font-size: 12px;
  color: #475569;
  font-weight: 600;
}
.crm-rate-tool .form-control.input-sm {
  height: 30px;
  border-radius: 0;
}

.crm-rate-grid-wrap {
  border: 1px solid #e2e8f0;
  background: #fff;
}
.crm-rate-grid {
  margin-bottom: 0;
  min-width: 900px;
}
.crm-rate-grid > thead > tr > th {
  background: #1f3a52;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  border-color: #2c5075 !important;
  padding: 6px 4px;
  white-space: nowrap;
}
.crm-rate-grid > thead > tr.crm-rate-subhead > th {
  background: #2574ab;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 4px;
}
.crm-rate-grid > thead > tr > th.crm-rate-th-sticky,
.crm-rate-grid > tbody > tr > td.crm-rate-td-room,
.crm-rate-grid > tbody > tr > td.crm-rate-td-meal {
  position: sticky;
  z-index: 2;
}
.crm-rate-grid > thead > tr > th.crm-rate-th-sticky { left: 0; }
.crm-rate-grid > tbody > tr > td.crm-rate-td-room { left: 0; background: #f8fafc; }
.crm-rate-grid > tbody > tr > td.crm-rate-td-meal { left: 190px; background: #fff; }
.crm-rate-grid > thead > tr > th.crm-rate-th-sticky.crm-rate-th-meal { left: 190px; }
/* The Meal Plan column's sticky offset above is hard-pinned to 190px, so the
   Room column must always render at exactly that width — otherwise a room
   with few badges leaves a gap before Meal Plan, and one with many badges
   pushes Meal Plan to overlap it. Room name/short code and the pax-allowed
   badges below are capped and wrapped (rather than left to size the column
   on their own) so neither can force the column wider. */
.crm-rate-grid > thead > tr > th.crm-rate-th-sticky:not(.crm-rate-th-meal),
.crm-rate-grid > tbody > tr > td.crm-rate-td-room {
  width: 190px;
  min-width: 190px; /* a wide grid (Buy + Sell columns, many child bands) must not squeeze the Room column below the Meal Plan's pinned offset */
  max-width: 190px;
}
.crm-rate-grid > tbody > tr > td {
  vertical-align: middle;
  padding: 3px 4px;
  border-color: #e2e8f0;
}
.crm-rate-grid .crm-rate-room-name {
  font-weight: 700;
  color: #1e293b;
  font-size: 12.5px;
  white-space: normal;
  word-wrap: break-word;
}
.crm-rate-grid .crm-rate-room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 178px;
  margin-top: 4px;
}
.crm-rate-grid .crm-rate-room-meta .label {
  font-weight: normal;
  font-size: 9.5px;
  background: #e2e8f0;
  color: #334155;
}
.crm-rate-grid .crm-rate-meal {
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
  min-width: 110px;
}
.crm-rate-grid td.crm-rate-cell {
  padding: 2px 3px;
  min-width: 82px;
}
.crm-rate-grid td.crm-rate-cell.crm-rate-buy { background: #fffbeb; }
.crm-rate-grid td.crm-rate-cell.crm-rate-sell { background: #f0fdf4; }
.crm-rate-grid td.crm-rate-cell.crm-rate-na {
  background: #f1f5f9;
  color: #94a3b8;
  text-align: center;
  font-size: 11px;
}
.crm-rate-grid input.rate-in {
  width: 100%;
  min-width: 72px;
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
  text-align: right;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  background: #fff;
  color: #1e293b;
}
.crm-rate-grid input.rate-in:focus {
  outline: none;
  border-color: #2574ab;
  box-shadow: 0 0 0 2px rgba(37, 116, 171, 0.15);
}
.crm-rate-grid input.rate-in::-webkit-outer-spin-button,
.crm-rate-grid input.rate-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.crm-rate-grid input.rate-in { -moz-appearance: textfield; }
.crm-rate-grid tr.crm-rate-row-first > td { border-top: 2px solid #cbd5e1; }
.crm-rate-grid .crm-rate-clear {
  color: #94a3b8;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.crm-rate-grid .crm-rate-clear:hover { color: #dc2626; }

/* Hotel Master rooms repeater — per-room image strip filled by the shared
   Media Library picker (its multi-select preview markup, shrunk to 40px
   inline thumbs so the strip lives inside a table cell). */
.crm-room-images-cell { vertical-align: top !important; }
.crm-room-images { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.crm-room-images .preview-image-item { width: auto; padding: 0; float: none; }
.crm-room-images .preview-image-item .thumbnail {
  position: relative; width: 44px; height: 40px; margin: 0; padding: 0;
  border: 1px solid #e2e8f0; border-radius: 0; overflow: hidden; background: #f8fafc;
}
.crm-room-images .preview-image-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-room-images .preview-image-item .btn-remove-preview-media {
  position: absolute; top: 0; right: 0; padding: 0 3px; line-height: 14px; font-size: 9px; border-radius: 0;
}
.crm-room-images-foot { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.crm-room-images-foot .label { font-weight: 600; font-size: 10px; }
td.crm-room-images-short .crm-room-images { outline: 1px dashed #fca5a5; outline-offset: 2px; }

/* Hotel Rate Sheet — one window per contract. A rate row (Applies On +
   booking window) holds one price box per season type; the boxes carry the
   same type colours as the State Seasons calendar so the two screens read
   as one system. */
.crm-rate-row { position: relative; }
.crm-rate-row.crm-rate-row-base { border-left: 4px solid #2574ab; }
.crm-rate-row-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-rate-row-no {
  flex: 0 0 auto; width: 26px; height: 26px; line-height: 24px; text-align: center;
  border: 1px solid #cbd5e1; background: #fff; color: #1e3a5f; font-weight: 700; font-size: 12px;
}
.crm-rate-row-fields { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
.crm-rate-row-fields > div { flex: 1 1 150px; min-width: 130px; }
.crm-rate-row-fields label { display: block; font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 3px; }
.crm-rate-row-head .btn-remove-rate-row { flex: 0 0 auto; margin-bottom: 2px; }
.crm-rate-row-title { font-size: 12px; color: #475569; margin-bottom: 12px; }
.crm-rate-row-title i { color: #2574ab; }

.crm-rate-box { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; margin-bottom: 12px; }
.crm-rate-box-on   { border-left-color: #2574ab; }
.crm-rate-box-off  { border-left-color: #64748b; }
.crm-rate-box-peak { border-left-color: #d97706; }
.crm-rate-box-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
.crm-rate-box-dates { color: #334155; font-weight: 600; }
.crm-rate-box-hint { margin-left: auto; font-size: 11.5px; }
.crm-rate-box:not(.crm-rate-box-priced) .crm-rate-box-head { background: #f8fafc; }
.crm-rate-box.crm-rate-box-priced .crm-rate-box-head { background: #f0fdf4; }

/* Sightseeing Prices (modules/views/activity_rates.php, activity_rates.js): the
   rate sheet's boxes and grids above — one box per validity period, holding
   the Ticket, Shared transfer and Private transfer grids. */
.ssp-sections { display: flex; flex-wrap: wrap; gap: 8px; }
.ssp-section { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid #cbd5e1; background: #fff; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; }
.ssp-section input { margin: 0; accent-color: #1e3a5f; }
.ssp-section.is-on { border-color: #2574ab; background: #eff6ff; color: #1e3a5f; }
.ssp-period { border-left-color: #2574ab; }
.ssp-period.ssp-period-error { border-left-color: #dc2626; }
.ssp-period .crm-rate-box-head { gap: 8px 14px; }
.ssp-period-dates { display: inline-flex; align-items: center; gap: 6px; }
.ssp-period-dates label { margin: 0; font-size: 11px; font-weight: 700; color: #475569; }
.ssp-period-dates .form-control.input-sm { width: 118px; height: 28px; border-radius: 0; }
.ssp-period-days { font-size: 11.5px; white-space: nowrap; }
.ssp-period-note { font-size: 11.5px; }
.ssp-period .crm-rate-box-hint + .crm-label-action { margin-left: 0; float: none; }
.ssp-period-body { padding: 12px 12px 0; }
.ssp-block { margin-bottom: 12px; }
.ssp-block-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; color: #1e3a5f; text-transform: uppercase; letter-spacing: 0.03em; }
.ssp-block-title small { font-size: 11px; font-weight: 400; color: #64748b; text-transform: none; letter-spacing: 0; }
.ssp-grid-wrap { display: inline-block; max-width: 100%; vertical-align: top; overflow-x: auto; border: 1px solid #e2e8f0; background: #fff; }
.crm-rate-grid.ssp-grid { min-width: 0; width: auto; }
.ssp-grid > tbody > tr.ssp-group > td { background: #eef2f7; color: #1e3a5f; font-size: 11.5px; font-weight: 700; }
.ssp-grid .crm-rate-room-meta .label-danger { background: #fee2e2; color: #b91c1c; }
.ssp-readonly .ssp-grid input.rate-in { background: #f8fafc; }
.ssp-list .ssp-chip { display: inline-block; margin: 1px 0; background: #e2e8f0; color: #334155; font-weight: 600; }
/* Inactive periods (deactivated, or ended before today): grey, and folded when loaded. */
.ssp-period.ssp-period-inactive { border-left-color: #94a3b8; background: #f8fafc; }
.ssp-period.ssp-period-inactive .crm-rate-box-head { background: #f1f5f9; }
.ssp-period.ssp-folded .ssp-period-body { display: none; }
.ssp-period.ssp-folded .crm-rate-box-head { border-bottom: 0; }
.ssp-period-state .label { font-weight: 600; background: #e2e8f0; color: #475569; }
.ssp-period .crm-rate-box-head .crm-label-action { margin-left: 0; float: none; white-space: nowrap; }
.ssp-inactive-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 12px; border: 1px dashed #cbd5e1; background: #fff; font-size: 12.5px; color: #475569; }
.ssp-inactive-line .crm-label-action { margin-left: 0; float: none; }
.section-card-title .ssp-head-actions { margin-left: auto; display: inline-flex; gap: 16px; flex-wrap: wrap; }
.section-card-title .ssp-head-actions .crm-label-action { margin-left: 0; }
/* Transfer Prices (modules/views/transfer_rates.php, transfer_rates.js): the shared transfer's pax slabs - "1 - [3] adults", the next row starts after it. */
.trp-slabs .trp-from { display: inline-block; min-width: 14px; font-weight: 700; color: #1e3a5f; text-align: right; }
.trp-slabs input.trp-to { display: inline-block; width: 62px; height: 28px; padding: 3px 6px; border-radius: 0; text-align: center; }
.trp-slabs input.trp-to.trp-bad { border-color: #dc2626; background: #fef2f2; }
.trp-locs > tbody > tr > td { vertical-align: middle; }
.trp-locs select.trp-loc-mode { height: 28px; border-radius: 0; font-size: 12px; }
.ssp-grid > tbody > tr.trp-sur-row > td { background: #fffbeb; }
.ssp-grid > tbody > tr.trp-sur-row > td:first-child { min-width: 200px; }
.trp-sur-label { font-size: 11.5px; font-weight: 700; color: #92400e; }
.trp-sur-label small { font-weight: 500; color: #a16207; }
.trp-loc-note { font-size: 11.5px; }
.trp-slab-note { margin-top: 6px; font-size: 11.5px; color: #475569; }
.ssp-block-title .crm-label-action { float: none; }
/* Copy prices from another supplier (popup). */
.ssp-copy-periods { border: 1px solid #e2e8f0; background: #fff; max-height: 240px; overflow-y: auto; }
.ssp-copy-period { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-weight: 400; font-size: 12.5px; cursor: pointer; }
.ssp-copy-period:last-child { border-bottom: 0; }
.ssp-copy-period input, .ssp-copy-mode input { margin: 0; accent-color: #1e3a5f; }
.ssp-copy-mode { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ssp-copy-mode label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; font-size: 12.5px; cursor: pointer; }
@media (max-width: 767px) {
  .ssp-period-dates, #form-ss-prices .crm-rate-tool { flex-wrap: wrap; }
}

.crm-season-dates-block { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #cbd5e1; margin-bottom: 12px; }
.crm-season-dates-on   { border-left-color: #2574ab; }
.crm-season-dates-off  { border-left-color: #64748b; }
.crm-season-dates-peak { border-left-color: #d97706; }
.crm-season-dates-empty-block { background: #f8fafc; border-left-color: #cbd5e1; }
.crm-season-dates-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid #e2e8f0; font-size: 12px; background: #f8fafc; }
.crm-season-dates-empty-block .crm-season-dates-head { border-bottom: 0; }
.crm-season-dates-sum { font-weight: 700; color: #1e293b; }
.crm-season-dates-src { font-size: 11.5px; white-space: nowrap; }
.crm-season-dates-actions { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.crm-season-dates-actions .crm-label-action { margin-left: 0; float: none; }
.crm-season-dates-table { margin-bottom: 0; }
/* Past ranges (ended before today): folded behind "Show N past ranges", greyed when open. */
.crm-season-dates-table tr.crm-season-range-past > td { background: #f8fafc; color: #94a3b8; }
.crm-season-dates-table tr.crm-season-past-toggle > td { background: #fff; font-size: 12px; }
.crm-season-dates-table tr.crm-season-past-toggle .crm-label-action { margin-left: 0; float: none; }
.crm-season-dates-table > thead > tr > th {
  border-top: 0; border-bottom: 1px solid #e2e8f0; background: #fff;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #64748b; font-weight: 700; padding: 7px 12px;
}
.crm-season-dates-table > tbody > tr > td { vertical-align: middle; border-top-color: #eef2f7; padding: 7px 12px; }
.crm-season-dates-table > tbody > tr:last-child > td { border-bottom: 0; }
.crm-season-dates-table .label { font-weight: 600; font-size: 10.5px; }
.crm-season-dates-empty { color: #64748b; font-size: 12px; padding: 4px 0; }
.crm-season-dates-empty i { color: #94a3b8; margin-right: 4px; }

/* State Seasons — one chronological calendar. Rows carry the season type as a
   coloured left edge (Off slate, On blue, Peak amber); gap / overlap rows are
   the callout colours so a missing stretch reads at a glance. */
.crm-season-calendar > tbody > tr > td { vertical-align: middle; }
.crm-season-calendar > tbody > tr > td:first-child { border-left: 4px solid transparent; }
.crm-season-calendar > tbody > tr.crm-season-row-off  > td:first-child { border-left-color: #94a3b8; }
.crm-season-calendar > tbody > tr.crm-season-row-on   > td:first-child { border-left-color: #2574ab; }
.crm-season-calendar > tbody > tr.crm-season-row-peak > td:first-child { border-left-color: #d97706; }
.crm-season-calendar > tbody > tr.crm-season-row-inactive > td { color: #94a3b8; }
.crm-season-calendar > tbody > tr.crm-season-row-current > td { background: #eff6ff; }
.crm-season-calendar > tbody > tr.ss-state-row:hover > td { background: #f8fafc; }
.crm-season-calendar > tbody > tr.crm-season-row-gap > td { background: #fffbeb; color: #92400e; font-size: 12px; }
.crm-season-calendar > tbody > tr.crm-season-row-gap > td:first-child { border-left-color: #d97706; }
.crm-season-calendar > tbody > tr.crm-season-row-gap a { color: #b45309; font-weight: 600; cursor: pointer; }
.crm-season-calendar > tbody > tr.crm-season-row-overlap > td { background: #fef2f2; color: #991b1b; font-size: 12px; }
.crm-season-calendar > tbody > tr.crm-season-row-overlap > td:first-child { border-left-color: #dc2626; }
.crm-season-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.crm-season-stat {
  display: flex; align-items: center; gap: 10px; min-width: 150px; padding: 10px 14px;
  background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #2574ab; border-radius: 0;
}
.crm-season-stat > i { font-size: 18px; color: #2574ab; }
.crm-season-stat strong { display: block; font-size: 17px; line-height: 1.1; color: #1e293b; }
.crm-season-stat span { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.crm-season-stat.crm-season-stat-off    { border-left-color: #64748b; background: #f8fafc; }
.crm-season-stat.crm-season-stat-off    > i { color: #64748b; }
.crm-season-stat.crm-season-stat-on     { border-left-color: #2574ab; background: #eff6ff; }
.crm-season-stat.crm-season-stat-on     > i { color: #2574ab; }
.crm-season-stat.crm-season-stat-peak   { border-left-color: #d97706; background: #fff7ed; }
.crm-season-stat.crm-season-stat-peak   > i { color: #d97706; }
.crm-season-stat.crm-season-stat-ok     { border-left-color: #16a34a; background: #f0fdf4; }
.crm-season-stat.crm-season-stat-ok     > i { color: #16a34a; }
.crm-season-stat.crm-season-stat-muted  { border-left-color: #cbd5e1; background: #fff; }
.crm-season-stat.crm-season-stat-muted  > i { color: #cbd5e1; }
.crm-season-stat.crm-season-stat-warn   { border-left-color: #eab308; background: #fefce8; }
.crm-season-stat.crm-season-stat-warn   > i { color: #ca8a04; }
.crm-season-stat.crm-season-stat-danger { border-left-color: #dc2626; background: #fef2f2; }
.crm-season-stat.crm-season-stat-danger > i { color: #dc2626; }
.crm-callout a.ss-add-next { font-weight: 600; cursor: pointer; }

/* The masters listing's public-facing Description column: readable, but never
   tall enough to push the row's actions out of reach. */
.crm-master-description {
  display: block;
  max-width: 640px;
  font-size: 12px;
  color: #475569;
  line-height: 1.45;
}

/* Highlighted inline note (square corners, house colours): info / warning / danger */
.crm-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #1e293b;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #2574ab;
  border-radius: 0;
}
.crm-callout > i { font-size: 15px; margin-top: 2px; color: #2574ab; }
.crm-callout-warning { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; }
.crm-callout-warning > i { color: #d97706; }
.crm-callout-danger { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; }
.crm-callout-danger > i { color: #dc2626; }

/* Queries list cells (ajax_datatable.php queries branch): a main line + small
   muted detail lines, square corners. */
.crm-ql-sub { font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.35; white-space: normal; }
.crm-ql-sub > .fa { width: 12px; text-align: center; color: #94a3b8; }
.crm-ql-info { font-size: 11px; color: #334155; line-height: 1.45; white-space: nowrap; }
.crm-ql-info > .fa { width: 12px; text-align: center; color: #94a3b8; }
.crm-ql-info--muted { color: #64748b; font-size: 10.5px; white-space: normal; }
.crm-ql-who { font-size: 11px; color: #64748b; padding-left: 16px; line-height: 1.35; }
.crm-ql-infocell { cursor: help; min-width: 130px; }
.crm-ql-rating { cursor: help; font-size: 9.5px; font-weight: 700; border-radius: 0; }

/* Leads list — Sort by (right of the Date Added bar) and the Work queue
   reason tag under Status & Score. Square corners. */
.crm-lead-sort { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.crm-lead-sort > label { margin: 0; font-weight: 700; font-size: 12px; color: #1e293b; white-space: nowrap; }
.crm-lead-sort .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.crm-queue-tag { display: inline-block; margin-top: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid #cbd5e1; border-left-width: 3px; background: #f8fafc; color: #334155; border-radius: 0; }
.crm-queue-tag--1 { border-color: #fecaca; border-left-color: #dc2626; background: #fef2f2; color: #b91c1c; }
.crm-queue-tag--2 { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; color: #92400e; }
.crm-queue-tag--3 { border-color: #bfdbfe; border-left-color: #2574ab; background: #eff6ff; color: #1e3a8a; }
@media (max-width: 767px) { .crm-lead-sort { margin-left: 0; width: 100%; } }

/* Create Quotation — package picker. Each option is two lines (name +
   chips, then the package's own itinerary / State / pickup → drop); the
   card under it breaks the match score down. Square corners. */
.bootstrap-select.crm-pkg-select .dropdown-menu li a { white-space: normal; padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
.crm-pkg-opt-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-pkg-opt-name { font-weight: 600; color: #1e293b; margin-right: auto; }
.crm-pkg-opt-sub { font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.4; }
.crm-pkg-opt-sub .fa { color: #94a3b8; }
.bootstrap-select.crm-pkg-select .dropdown-menu li.disabled .crm-pkg-opt { opacity: 0.75; }
.bootstrap-select.crm-pkg-select .dropdown-menu li.active a .crm-pkg-opt-name,
.bootstrap-select.crm-pkg-select .dropdown-menu li.active a .crm-pkg-opt-sub,
.bootstrap-select.crm-pkg-select .dropdown-menu li.active a .crm-pkg-opt-sub .fa { color: #fff; }
.crm-pkg-chip { display: inline-block; padding: 1px 6px; font-size: 10.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; border-radius: 0; }
.crm-pkg-chip--best { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.crm-pkg-chip--strong { background: #dcfce7; border-color: #86efac; color: #166534; }
.crm-pkg-chip--fair { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.crm-pkg-chip--weak { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.crm-pkg-chip--blocked { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.crm-pkg-why { margin: 6px 0 0; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #2574ab; border-radius: 0; font-size: 12px; color: #1e293b; }
.crm-pkg-why-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.crm-pkg-why-head .fa-star { color: #2574ab; }
.crm-pkg-why-list { list-style: none; margin: 0; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.crm-pkg-why-list li { white-space: nowrap; }
.crm-pkg-why-list li > span:last-child { color: #475569; }
.crm-pkg-why-mark { display: inline-block; width: 14px; font-weight: 700; }
.crm-pkg-why-ok .crm-pkg-why-mark { color: #16a34a; }
.crm-pkg-why-near .crm-pkg-why-mark { color: #d97706; }
.crm-pkg-why-no .crm-pkg-why-mark { color: #dc2626; }
.crm-pkg-why-info .crm-pkg-why-mark { color: #94a3b8; }
.crm-pkg-why-foot { padding: 0 12px 7px; font-size: 11px; color: #64748b; }

/* Quotation builder — Terms & Policies editor (same line rows as Packages)
   and the Transfer Details vehicle table. Square corners. */
.qt-terms-field { border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; padding: 10px 12px 12px; margin-bottom: 12px; background: #fff; }
.qt-terms-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.qt-terms-field-head > .control-label { margin: 0; font-size: 12.5px; font-weight: 700; color: #1e293b; }
.qt-terms-field-head > .control-label > .fa { color: #1f3a52; margin-right: 3px; }
.qt-terms-field .qt-terms-preset { margin-bottom: 8px; border-radius: 0; }
.qt-terms-source { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; border-radius: 0; }
.qt-terms-source--package { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.qt-terms-source--preset { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.qt-terms-source--saved { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
.qt-terms-source--edited { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.qt-terms-source--none { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.qt-transfer-table { margin-bottom: 10px; font-size: 12.5px; }
.qt-transfer-table > thead > tr > th { background: #f8fafc; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #334155; }
.qt-transfer-table > tbody > tr > td { vertical-align: middle; }
.qt-transfer-table .form-control { border-radius: 0; }
.qt-type-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.3px; }
.qt-type-tag--package { background: #1f3a52; color: #fff; }
.qt-type-tag--manual { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Create Quotation — card 4, the Package Preview / Trip Plan beside the
   Package card (quotations.js renderPackagePreview / renderTripPlan).
   The body scrolls inside the card so a long itinerary keeps the page short.
   Square corners, theme navy. */
.crm-pkg-preview { padding-bottom: 12px; }
.crm-pkg-preview-empty { text-align: center; color: #94a3b8; padding: 40px 16px; }
.crm-pkg-preview-empty > .fa { font-size: 30px; color: #cbd5e1; display: block; margin-bottom: 10px; }
.crm-pkg-preview-empty > p { margin: 0; font-size: 12.5px; }
.crm-pkg-preview-head { margin-bottom: 10px; }
.crm-pkg-preview-img { display: block; width: 100%; height: 120px; object-fit: cover; border: 1px solid #e2e8f0; border-radius: 0; margin-bottom: 10px; }
.crm-pkg-preview-title { font-size: 14px; font-weight: 700; color: #1e293b; line-height: 1.35; }
.crm-pkg-preview-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.crm-pkg-preview-chips .fa { color: #64748b; }
.crm-pkg-tabs { margin-bottom: 0; }
.crm-pkg-tabs > li > a { padding: 7px 10px; font-size: 12px; font-weight: 600; border-radius: 0; }
.crm-pkg-tabs .badge { background: #1f3a52; border-radius: 0; font-size: 10px; padding: 2px 5px; }
.crm-pkg-preview-body { max-height: 420px; overflow-y: auto; padding-top: 10px; }
.crm-pkg-day { border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; margin-bottom: 6px; background: #fff; }
.crm-pkg-day-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: #1e293b; text-decoration: none; }
a.crm-pkg-day-head:hover, a.crm-pkg-day-head:focus { background: #f8fafc; color: #1e293b; text-decoration: none; }
.crm-pkg-day-no { flex: 0 0 auto; background: #1f3a52; color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 0; white-space: nowrap; }
.crm-pkg-day-title { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; }
.crm-pkg-day-dest { flex: 0 0 auto; font-size: 11px; color: #64748b; white-space: nowrap; }
.crm-pkg-day-caret { color: #94a3b8; }
.crm-pkg-day-body { padding: 0 10px 10px; font-size: 12px; color: #475569; }
.crm-pkg-day-body > p { margin: 6px 0 0; line-height: 1.55; }
.crm-pkg-day-img { display: block; width: 100%; height: 90px; object-fit: cover; margin-bottom: 6px; border-radius: 0; }
.crm-pkg-day-stay { font-size: 11.5px; color: #334155; }
.crm-pkg-sub { font-size: 11.5px; font-weight: 700; color: #1e293b; text-transform: uppercase; letter-spacing: 0.3px; margin: 4px 0 6px; }
.crm-pkg-list { list-style: none; padding: 0; margin: 0 0 10px; font-size: 12px; color: #334155; }
.crm-pkg-list > li { padding: 3px 0; line-height: 1.45; }
.crm-pkg-list > li > .fa { width: 14px; color: #64748b; }
.crm-pkg-list--in > li > .fa { color: #16a34a; }
.crm-pkg-list--out > li > .fa { color: #dc2626; }
.crm-pkg-preview .crm-line-hint { margin: 0 0 8px; }

/* Add / Edit Query form — four section cards in a 2 × 2 grid (equal height
   per row) and a sticky action bar above the fixed mini footer (32px).
   Same card device as .crm-season-dates-block; square corners. */
.crm-qf-grid { display: flex; flex-wrap: wrap; }
.crm-qf-grid > [class*="col-"] { display: flex; margin-bottom: 16px; }
.crm-qf-card { flex: 1; min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #1f3a52; border-radius: 0; }
.crm-qf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.crm-qf-card-head > h5 { margin: 0; font-size: 12px; font-weight: 700; color: #1e293b; text-transform: uppercase; letter-spacing: 0.4px; display: flex; align-items: center; gap: 8px; }
.crm-qf-step { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; background: #1f3a52; color: #fff; font-size: 11px; border-radius: 0; }
.crm-qf-card-body { padding: 12px 14px 0; }
.crm-qf-card-body .form-group { margin-bottom: 12px; }
.crm-qf-card-body .control-label { font-size: 12px; margin-bottom: 4px; }
.crm-qf-label { display: flex !important; justify-content: space-between; align-items: center; gap: 6px; text-align: left; }
.crm-qf-link { font-size: 11px; font-weight: 600; color: #0284c7; text-decoration: none; white-space: nowrap; }
.crm-qf-link:hover, .crm-qf-link:focus { color: #0369a1; text-decoration: none; }
.crm-qf-help { font-size: 11px; margin: 3px 0 0; }
.crm-qf-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-qf-inline > .control-label { margin: 0; }
.crm-qf-card-body .crm-age-picker-root { margin-bottom: 12px; }
.crm-qf-subpanel { margin: 0 0 12px; padding: 12px 14px 0; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #2574ab; border-radius: 0; }
.crm-qf-subpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.crm-qf-subpanel-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #1e293b; text-transform: uppercase; letter-spacing: 0.4px; }
.crm-qf-subpanel-head > .crm-qf-subpanel-title { margin: 0; }
.crm-qf-subpanel .table-responsive { margin-bottom: 12px; }
.crm-qf-footer > .alert { flex: 1 1 100%; margin: 0; }
.crm-vehicle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.crm-vehicle-row-select { flex: 1 1 auto; min-width: 0; }
.crm-vehicle-row .vehicle-row-count { flex: 0 0 90px; width: 90px; }
.crm-vehicle-row .btn-remove-vehicle-row { flex: 0 0 auto; }
.crm-line-hint.crm-line-hint--warning .fa-car { color: #d97706; }
.crm-qf-footer {
    position: sticky; bottom: 32px; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 -15px -15px; padding: 10px 15px; background: #fff; border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 14px rgba(15, 23, 42, 0.06);
}
.crm-qf-footer-status { display: flex; align-items: center; gap: 8px; }
.crm-qf-footer-status > .control-label { margin: 0; font-size: 12px; }
.crm-qf-footer-status .label { margin-top: 0 !important; font-size: 11.5px !important; padding: 5px 10px !important; }
.crm-qf-footer-remark { flex: 1 1 220px; }
.crm-qf-footer-remark textarea { resize: vertical; min-height: 34px; }
.crm-qf-footer-ack { margin: 0; padding-top: 0; white-space: nowrap; }
.crm-qf-footer-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 767px) {
    .crm-qf-footer { position: static; margin: 0; padding: 10px 0 0; box-shadow: none; }
    .crm-qf-footer-actions { width: 100%; margin-left: 0; }
    .crm-qf-footer-actions > .btn { flex: 1 1 auto; }
}

/* Passenger age picker (Query + Quotation) — crmAgePicker in application.js.
   Compact chips that wrap, children and infants side by side. Square corners. */
.crm-age-picker { border: 1px solid #e2e8f0; background: #fbfcfd; padding: 10px 12px; margin: 10px 0 5px; border-radius: 0; }
.crm-age-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.crm-age-title { font-size: 12px; font-weight: 700; color: #1f3a52; text-transform: uppercase; letter-spacing: 0.4px; }
.crm-age-title > i { margin-right: 4px; }
.crm-age-hint { font-size: 11px; color: #64748b; }
.crm-age-groups { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.crm-age-group { flex: 1 1 260px; min-width: 0; }
.crm-age-group-label { font-size: 11.5px; font-weight: 700; color: #334155; margin-bottom: 5px; }
.crm-age-range { font-weight: 500; color: #94a3b8; margin-left: 4px; }
.crm-age-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-age-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 4px 3px 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 0; font-weight: 400; cursor: pointer; }
.crm-age-chip-label { font-size: 11px; font-weight: 600; color: #475569; white-space: nowrap; }
.crm-age-chip .crm-age-select { width: 78px; height: 26px; padding: 2px 4px; font-size: 12px; border-radius: 0; }
.crm-age-chip.is-invalid { border-color: #dc2626; background: #fef2f2; }
.crm-age-chip.is-invalid .crm-age-select { border-color: #dc2626; color: #b91c1c; }
.crm-age-summary { margin-top: 8px; font-size: 11.5px; color: #475569; }
.crm-age-warning { margin-top: 6px; font-size: 11.5px; color: #b91c1c; }
.crm-age-warning > div + div { margin-top: 2px; }

/* Lead Assign modal — who holds the lead now, who you are picking, and how
   loaded they already are. Square corners, house colours (see .crm-callout). */
.crm-assign-current { display: flex; border: 1px solid #e2e8f0; background: #f8fafc; margin-bottom: 14px; border-radius: 0; }
.crm-assign-current > div { flex: 1 1 0; min-width: 0; padding: 8px 12px; border-left: 1px solid #e2e8f0; }
.crm-assign-current > div:first-child { border-left: 0; }
.crm-assign-lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #64748b; margin-bottom: 2px; }
.crm-assign-val { display: block; font-size: 12.5px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-assign-val.is-empty { color: #94a3b8; font-weight: 500; font-style: italic; }
.crm-assign-mode { border: 1px solid #e2e8f0; background: #fbfcfd; padding: 8px 12px; margin-bottom: 12px; border-radius: 0; }
.crm-assign-mode label { margin: 0; font-weight: 600; font-size: 12.5px; color: #1e293b; cursor: pointer; }
.crm-assign-mode .crm-assign-hint { display: block; margin: 2px 0 0 20px; font-size: 11px; color: #64748b; }
.crm-assign-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crm-assign-opt-name { font-weight: 600; font-size: 12.5px; }
.crm-assign-opt-meta { font-size: 11px; color: #64748b; }
.crm-assign-opt-load { display: flex; gap: 4px; flex-shrink: 0; }
.crm-assign-load { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; border-radius: 0; white-space: nowrap; }
.select2-results__option--highlighted .crm-assign-opt-meta { color: #dbeafe; }
.select2-results__option--highlighted .crm-assign-load { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.crm-assign-card { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #1f3a52; border-radius: 0; font-size: 12.5px; color: #1e293b; }
.crm-assign-card > i { font-size: 22px; color: #1f3a52; margin-top: 1px; }
.crm-assign-card .crm-assign-card-sub { font-size: 11.5px; color: #475569; margin-top: 3px; line-height: 1.45; }
.crm-callout-success { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; }
.crm-callout-success > i { color: #16a34a; }

/* ==========================================================================
   Lead sales workspace (leads/?action=view)
   Built from the components already in this file — callouts for what needs
   attention, season-stat tiles for the numbers — plus the header, timeline
   and preset chips this page needed. Square corners throughout, like the
   rest of the theme.
   ========================================================================== */
.crm-ws-header .panel-body { padding: 16px 18px 12px; }
.crm-ws-identity { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.crm-ws-avatar {
    flex: 0 0 auto; width: 46px; height: 46px; background: #1f3a52; color: #fff;
    font-size: 20px; font-weight: 700; line-height: 46px; text-align: center;
}
.crm-ws-who { flex: 1 1 auto; min-width: 200px; }
.crm-ws-who h4 { margin: 0 0 3px; font-size: 19px; color: #1e293b; font-weight: 700; }
.crm-ws-contact { font-size: 12.5px; color: #475569; }
.crm-ws-contact > span:not(:empty) { margin-right: 14px; white-space: nowrap; }
.crm-ws-contact i { color: #94a3b8; margin-right: 4px; }
.crm-ws-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-ws-badges .label { font-size: 11px; font-weight: 600; padding: 4px 8px; }
.crm-ws-badges a.label:hover { color: #fff; text-decoration: none; opacity: 0.9; }
.crm-ws-back { flex: 0 0 auto; }

.crm-ws-temp { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; padding: 4px 8px; color: #fff; }
.crm-ws-temp-hot  { background: #dc2626; }
.crm-ws-temp-warm { background: #d97706; }
.crm-ws-temp-cold { background: #64748b; }

.crm-ws-meta {
    display: flex; flex-wrap: wrap; gap: 8px 26px;
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e2e8f0;
}
.crm-ws-fact { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.crm-ws-fact > i { font-size: 15px; color: #94a3b8; }
.crm-ws-fact span { display: block; font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.crm-ws-fact strong { display: block; font-size: 12.5px; color: #1e293b; white-space: nowrap; }
/* A "+2" chip belongs beside the destination it counts, not wrapped under it,
   which would make this fact taller than the ones either side of it. */
.crm-ws-fact strong .crm-chip { margin-left: 4px; padding: 0 5px; font-size: 10px; vertical-align: 1px; }

.crm-ws-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 15px; }
.crm-ws-actions-label { font-weight: 700; font-size: 12px; color: #1e293b; margin-right: 8px; }
.crm-ws-actions-label i { color: #d97706; }

.crm-ws-table { margin-bottom: 0; }
.crm-ws-table > tbody > tr > td,
.crm-ws-table > thead > tr > th { border-top-color: #eef2f7; padding: 7px 4px; font-size: 12.5px; vertical-align: top; }
.crm-ws-table > thead > tr > th {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px;
    color: #64748b; border-bottom: 1px solid #e2e8f0;
}
.crm-ws-table td.crm-ws-k { color: #64748b; font-weight: 600; width: 150px; white-space: nowrap; }
.crm-ws-row-overdue > td { background: #fef2f2; }
.crm-ws-subhead {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
    color: #64748b; font-weight: 700; margin: 14px 0 4px;
}
.crm-ws-subhead:first-child { margin-top: 0; }

/* Notes — their own panel now, not just a truncated Timeline line. */
.crm-ws-note { font-size: 12.5px; color: #334155; padding-bottom: 8px; border-bottom: 1px dashed #eef2f7; }
.crm-ws-note:last-child { border-bottom: 0; padding-bottom: 0; }

/* First Call Feedback panel — the one panel in this column that is a step
   the executive still owes, so it carries the app's #1f3a52 accent (the
   same bar every modal header uses) instead of blending into the plain
   white headings of Notes and Follow-ups around it. */
.crm-fcf-panel-highlight { border: 1px solid #1f3a52; }
.crm-fcf-panel-highlight > .panel-heading {
    background-color: #1f3a52; border-color: #1f3a52; color: #fff;
}
.crm-fcf-panel-highlight > .panel-heading .panel-title,
.crm-fcf-panel-highlight > .panel-heading .panel-title > i { color: #fff; }

/* Requirement form — numbered sections rather than steps, so nothing is
   hidden behind a "next" the salesperson has to find. */
.crm-ws-section { border-top: 1px solid #eef2f7; padding-top: 14px; margin-top: 14px; }
.crm-ws-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.crm-ws-section > h5 {
    font-size: 12.5px; font-weight: 700; color: #1e293b; text-transform: uppercase;
    letter-spacing: 0.4px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.crm-ws-section > h5 > span {
    display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center;
    background: #1f3a52; color: #fff; font-size: 11px;
}

/* Quick Set Follow-up chips — the one scheduling control in the module. */
.crm-ws-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.crm-ws-preset {
    display: inline-block; padding: 6px 12px; font-size: 12px; cursor: pointer;
    border: 1px solid #cbd5e1; background: #fff; color: #334155; user-select: none;
}
.crm-ws-preset:hover { border-color: #2574ab; color: #2574ab; text-decoration: none; }
.crm-ws-preset.active { background: #2574ab; border-color: #2574ab; color: #fff; font-weight: 600; }

/* Timeline — one chronological stream, grouped by day. */
.crm-ws-timeline { position: relative; }
.crm-ws-tl-day {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: #64748b; background: #f8fafc; border-left: 3px solid #cbd5e1;
    padding: 5px 10px; margin: 14px 0 10px;
}
.crm-ws-tl-day:first-child { margin-top: 0; }
.crm-ws-tl-item { display: flex; gap: 10px; padding: 0 0 14px 6px; position: relative; }
.crm-ws-tl-item:not(:last-child)::before {
    content: ''; position: absolute; left: 17px; top: 24px; bottom: 0; width: 1px; background: #e2e8f0;
}
.crm-ws-tl-dot {
    flex: 0 0 auto; width: 24px; height: 24px; line-height: 24px; text-align: center;
    background: #f1f5f9; color: #64748b; font-size: 11px; z-index: 1;
}
.crm-ws-tl-body { flex: 1 1 auto; min-width: 0; }
.crm-ws-tl-body strong { display: block; font-size: 12.5px; color: #1e293b; font-weight: 600; }
.crm-ws-tl-detail { font-size: 12px; color: #475569; word-break: break-word; }
.crm-ws-tl-meta { font-size: 11px; color: #94a3b8; margin-top: 1px; }

.crm-ws-tl-item.ev-create   .crm-ws-tl-dot { background: #eff6ff; color: #2574ab; }
.crm-ws-tl-item.ev-assign   .crm-ws-tl-dot { background: #f5f3ff; color: #6a1b9a; }
.crm-ws-tl-item.ev-call     .crm-ws-tl-dot { background: #f0fdf4; color: #16a34a; }
.crm-ws-tl-item.ev-followup .crm-ws-tl-dot { background: #fff7ed; color: #d97706; }
.crm-ws-tl-item.ev-note     .crm-ws-tl-dot { background: #fefce8; color: #ca8a04; }
.crm-ws-tl-item.ev-status   .crm-ws-tl-dot { background: #eff6ff; color: #1d4ed8; }
.crm-ws-tl-item.ev-req      .crm-ws-tl-dot { background: #f0f9ff; color: #0369a1; }
.crm-ws-tl-item.ev-query    .crm-ws-tl-dot { background: #16a34a; color: #fff; }

/* Lead dashboard cards — clickable filters above the list. Nine of them,
   one row on desktop; below that each one only needs to be wide enough for
   its own label, not an even fifth/third/half of the bar. */
.crm-lead-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-lead-card {
    flex: 1 1 0; min-width: 92px;
    background: #fff; border: 1px solid #e2e8f0;
    border-left: 3px solid #cbd5e1; padding: 7px 10px; cursor: pointer; text-decoration: none;
}
@media (max-width: 767px) {
    .crm-lead-card { flex: 1 1 calc(33.333% - 6px); min-width: 0; }
}
.crm-lead-card:hover, .crm-lead-card:focus { text-decoration: none; border-color: #2574ab; border-left-color: #2574ab; }
.crm-lead-card.active { border-color: #2574ab; border-left-color: #2574ab; background: #eff6ff; }
.crm-lead-card strong { display: block; font-size: 17px; line-height: 1.1; color: #1e293b; }
.crm-lead-card span {
    display: block; font-size: 9.5px; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-lead-card.is-hot     { border-left-color: #dc2626; }
.crm-lead-card.is-due     { border-left-color: #d97706; }
.crm-lead-card.is-missed  { border-left-color: #dc2626; }
.crm-lead-card.is-mine    { border-left-color: #2574ab; }
.crm-lead-card.is-open    { border-left-color: #16a34a; }

@media (max-width: 767px) {
    .crm-ws-back { width: 100%; }
    .crm-ws-table td.crm-ws-k { width: auto; }
}

/* Ages for the children and infants travelling. Queries has an equivalent
   block inline in its own view (.age-inputs-container), but that one is
   rounded — this project's rule is square corners, so this is its own. */
.crm-age-grid {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2574ab;
    padding: 10px 12px 4px;
    margin-top: 12px;
}
.crm-age-grid > h6 {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #475569;
}
.crm-age-item { margin-bottom: 8px; }
.crm-age-item > label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 3px;
}

/* ==========================================================================
   First Call — Executive Feedback wizard
   One question per screen, selectable option cards instead of a <select>,
   a slim progress bar. Same visual language as .crm-lead-card / .crm-ws-preset
   — sharp corners, the theme's #2574ab accent, no new library.

   Lives as its own section inside the Collect Requirement modal (not a
   separate popup) — visually set apart with its own tinted background and
   left border, same device .crm-age-grid already uses to separate itself
   from the plain form fields around it.
   ========================================================================== */
.crm-fcf-section {
    background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #2574ab;
    padding: 10px 14px; margin-bottom: 14px;
}
.crm-fcf-section-head { margin-bottom: 8px; }
.crm-fcf-section-head > h5 {
    margin: 0; font-size: 12px; font-weight: 700; color: #1e293b;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.crm-fcf-section-head > h5 > i { color: #2574ab; margin-right: 4px; }
/* The explanation earns its place while the section is idle (locked, not
   started, resuming, completed); once the wizard or review is actually on
   screen the question's own text already carries that weight, so
   leads.js hides this line there — one less thing taking up room. */
.crm-fcf-section-head > p { font-size: 11.5px; margin: 2px 0 0; }
.crm-fcf-progress-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.crm-fcf-progress-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; }
.crm-fcf-progress-bar { height: 3px; background: #eef2f6; margin-bottom: 10px; }
.crm-fcf-progress-fill { height: 100%; background: #2574ab; transition: width 0.25s ease; }

.crm-fcf-question { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0 0 3px; }
.crm-fcf-helper { font-size: 11.5px; color: #64748b; margin: 0 0 8px; }

.crm-fcf-option {
    display: block; position: relative; border: 1px solid #dde3ea; background: #fff;
    padding: 7px 12px 7px 34px; margin-bottom: 5px; cursor: pointer; font-weight: 600;
    font-size: 12.5px; color: #334155;
}
.crm-fcf-option input[type="radio"] { position: absolute; left: 12px; top: 9px; margin: 0; }
.crm-fcf-option:hover { border-color: #2574ab; }
.crm-fcf-option.is-selected { border-color: #2574ab; background: #eff6ff; color: #1e293b; }
.crm-fcf-option.is-selected::after {
    content: '\f00c'; font-family: FontAwesome; position: absolute; right: 12px; top: 8px;
    color: #2574ab; font-size: 12px;
}

#fcf_text_answer { resize: vertical; }

/* Help canvas — FAQ System panel (renderCanvasFaq() in application.js).
   Cards use the same left-accent-border shape the Reminders cards and
   .crm-fcf-option already use, so this reads as a native canvas panel
   rather than a bolted-on one. Sharp corners throughout, per house rule. */
.crm-canvas-faq-item {
    background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #2574ab;
    margin-bottom: 8px; overflow: hidden;
}
.crm-canvas-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: #1e293b; cursor: pointer;
}
.crm-canvas-faq-q:hover { background: #f8fafc; }
.crm-canvas-faq-q .fa-chevron-down { color: #94a3b8; font-size: 11px; transition: transform 0.15s ease; flex-shrink: 0; }
.crm-canvas-faq-item.is-open .crm-canvas-faq-q .fa-chevron-down { transform: rotate(180deg); }
.crm-canvas-faq-a {
    display: none; padding: 0 12px 12px; font-size: 12px; color: #475569;
    line-height: 1.5; white-space: pre-wrap; background: #f8fafc; border-top: 1px dashed #eef2f7;
}
.crm-canvas-faq-a-inner { padding-top: 10px; }
.crm-canvas-faq-cat {
    display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.2px;
    color: #2574ab; background: #eff6ff; border: 1px solid #bfdbfe; padding: 1px 6px; margin-left: 6px;
}

/* The review screen, the modal's completed panel, and the workspace's own
   status panel all show the same Q&A shape — but these questions are full
   sentences, not short facts like "Manager", and .crm-ws-k's inherited
   nowrap forced every question onto one line, crushing the answer column
   into a sliver. One class covers every place this table gets built. */
#fcf_review_table, #fcf_completed_table, .crm-fcf-qa-table { table-layout: fixed; width: 100%; }
#fcf_review_table td.crm-ws-k, #fcf_completed_table td.crm-ws-k, .crm-fcf-qa-table td.crm-ws-k { width: 46%; white-space: normal; }
#fcf_review_table td:last-child, #fcf_completed_table td:last-child, .crm-fcf-qa-table td:last-child { width: 54%; }

/* Quotation builder — Accommodation: one card per stay of the route
   (quotations.js qhRender). From master / Manual per stay, occupancy counts,
   price line with a per-night breakdown; Hotel Option tabs on an
   international CRM. Square corners, theme navy. */
.qh-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; background-color: #fcfdfe; border-bottom: 1px solid #e2e8f0; }
/* Accommodation filters and the Hotel chart (quotations.js qhRenderFilters / qhChartHtml) */
.qh-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 10px; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.qh-filters label { display: block; margin: 0 0 2px; font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.qh-filters select { min-width: 150px; height: 30px; padding: 2px 6px; font-size: 12.5px; border: 1px solid #cbd5e1; background: #fff; }
.qh-filters .qh-filters-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.qh-chart-stay { margin: 0 0 14px; }
.qh-chart-stay h5 { margin: 0 0 6px; padding: 6px 10px; background: #1f3a52; color: #fff; font-size: 12.5px; font-weight: 700; }
.qh-chart-stay h5 small { color: #cbd5e1; font-weight: 400; margin-left: 6px; }
.qh-chart table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qh-chart th { padding: 5px 8px; background: #f1f5f9; border-bottom: 2px solid #cbd5e1; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #475569; }
.qh-chart td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.qh-chart .qh-chart-cur { background: #f0fdf4; }
.qh-chart .qh-use { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border: 1px solid #1f3a52; background: #fff; color: #1f3a52; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.qh-chart .qh-use:hover { background: #1f3a52; color: #fff; }
.qh-chart .qh-use.is-on { background: #1f3a52; color: #fff; }
.qh-chart .qh-use small { opacity: 0.85; margin-left: 3px; }
.qh-head-total { font-size: 12.5px; color: #475569; }
.qh-head-total strong { color: #1f3a52; font-size: 13.5px; }
.qh-loading { color: #64748b; font-size: 12.5px; padding: 12px 0; }
.qh-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.qh-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 0; }
.qh-tab small { font-weight: 500; color: #64748b; }
.qh-tab.active { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.qh-tab.active small { color: #cbd5e1; }
.qh-tab-remove { color: inherit; opacity: 0.6; }
.qh-tab-remove:hover { opacity: 1; }
.qh-card { border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; background: #fff; margin-bottom: 10px; }
.qh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.qh-stay { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qh-stay-dest { font-size: 13px; font-weight: 700; color: #1e293b; }
.qh-stay-dest > .fa { color: #1f3a52; }
.qh-stay-nights { font-size: 11.5px; font-weight: 700; color: #1f3a52; background: #e8eef4; padding: 1px 7px; }
.qh-stay-dates { font-size: 11.5px; color: #64748b; }
.qh-source > .btn { border-radius: 0; }
.qh-card-body { padding: 10px 12px; }
.qh-card-body .row + .row { margin-top: 8px; }
.qh-label { display: block; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 3px; }
.qh-link { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 6px; }
.qh-card-body .form-control, .qh-card-body .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.qh-grid { margin-top: 12px; border: 1px solid #e2e8f0; background: #fff; }
.qh-grid-row { display: grid; grid-template-columns: 170px repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 7px 10px; }
.qh-grid-row + .qh-grid-row { border-top: 1px solid #eef2f6; }
.qh-grid-row--head { padding-top: 6px; padding-bottom: 6px; background: #f8fafc; }
.qh-grid-col { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; }
.qh-grid-label { font-size: 12px; font-weight: 700; color: #1e293b; }
.qh-grid-label .fa { width: 15px; color: #64748b; }
.qh-grid-label small { display: block; margin-left: 19px; font-size: 10.5px; font-weight: 600; color: #64748b; }
.qh-grid-row--count { background: #f8fafc; }
.qh-grid-row--count .qh-grid-label .fa { color: #1f3a52; }
.qh-grid-row--price { background: #f0fdf4; }
.qh-grid-row--price .qh-grid-label .fa { color: #15803d; }
.qh-grid-cell .form-control { width: 100%; border-radius: 0; }
.qh-grid-row--count .form-control { max-width: 90px; text-align: center; font-weight: 700; }
.qh-grid-cell .input-group-addon { border-radius: 0; font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; border-color: #bbf7d0; padding: 4px 6px; }
.qh-grid-mob { display: none; }
.qh-grid--prices { margin-top: 6px; }
.qh-grid-fit { margin-top: 6px; font-size: 12px; color: #64748b; }
.qh-fit { font-size: 12px; color: #166534; padding-bottom: 6px; }
.qh-fit--bad { color: #b91c1c; }
.qh-fit--muted { color: #64748b; }
.qh-note { font-size: 11.5px; color: #64748b; margin-top: 6px; }
.qh-price { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; font-size: 12.5px; color: #1e293b; }
.qh-price strong { color: #1f3a52; font-size: 13.5px; }
.qh-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; margin-left: 6px; border-radius: 0; }
.qh-badge--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.qh-badge--bad { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.qh-bd-toggle { margin-left: 8px; font-size: 12px; }
.qh-breakdown { margin-top: 6px; max-width: 420px; }
.qh-breakdown .table { margin: 0; font-size: 12px; }
.qh-apply-same { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; }
@media (max-width: 767px) {
    .qh-card-body [class*="col-sm-"] + [class*="col-sm-"] { margin-top: 8px; }
    .qh-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qh-grid-row--head { display: none; }
    .qh-grid-label { grid-column: 1 / -1; }
    .qh-grid-mob { display: block; font-size: 10.5px; font-weight: 600; color: #64748b; margin-bottom: 2px; }
    .qh-grid-row--count .form-control { max-width: none; }
}
/* Accommodation — strict source tag, quotation-only rate, card actions,
   "from Hotel master" tag and the hotel / room name suggestions
   (jQuery UI autocomplete, .qh-ac). Square corners, theme navy. */
.qh-source-tag { font-size: 11px; font-weight: 700; color: #1f3a52; background: #e8eef4; border: 1px solid #cbd5e1; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.qh-badge--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.qh-quote { margin-top: 10px; padding: 8px 10px; background: #fffbeb; border: 1px dashed #fcd34d; }
.qh-quote-title { font-size: 11.5px; font-weight: 700; color: #92400e; }
.qh-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.qh-actions .btn { border-radius: 0; }
.qh-ref-tag { text-transform: none; letter-spacing: 0; font-weight: 600; color: #166534; margin-left: 4px; }
.ui-autocomplete.qh-ac { border-radius: 0; border: 1px solid #cbd5e1; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); max-height: 240px; overflow-y: auto; z-index: 1060; font-size: 12.5px; }
.ui-autocomplete.qh-ac .ui-menu-item-wrapper { padding: 6px 10px; border: 0; border-radius: 0; }
.ui-autocomplete.qh-ac .ui-state-active { background: #1f3a52; border: 0; margin: 0; color: #fff; }

/* Central Media Library window (media_library.js) — browse, search and
   upload in the same window. Square corners, theme navy. */
.crm-media-dialog { width: 90%; max-width: 1000px; }
.crm-media-head { background-color: #1f3a52; color: #fff; border-bottom: none; display: flex; align-items: center; justify-content: space-between; }
.crm-media-head .modal-title { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; }
.crm-media-head .close { color: #fff; opacity: 0.8; margin: 0; padding: 0; line-height: 1; }
.crm-media-help { color: #fff; font-size: 14px; margin-left: 5px; }
.crm-media-body { background-color: #f7f9fc; padding: 16px 20px 20px; }
.crm-media-upload { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; background: #fff; border: 2px dashed #cbd5e1; border-radius: 0; transition: border-color 0.15s ease, background-color 0.15s ease; }
.crm-media-upload.is-over { border-color: #1f3a52; background: #eef4fa; }
.crm-media-upload-text { display: flex; align-items: center; gap: 12px; color: #475569; font-size: 12.5px; }
.crm-media-upload-text > .fa { font-size: 26px; color: #1f3a52; }
.crm-media-upload-text strong { display: block; color: #1e293b; font-size: 13px; }
.crm-media-upload-btn { margin: 0; border-radius: 0; background-color: #1f3a52; border-color: #1f3a52; }
.crm-media-upload-list { margin-bottom: 12px; border: 1px solid #e2e8f0; background: #fff; }
.crm-media-upload-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) minmax(0, 2fr); gap: 10px; align-items: center; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid #f1f5f9; }
.crm-media-upload-row:last-child { border-bottom: 0; }
.crm-media-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e293b; }
.crm-media-upload-bar { display: block; height: 6px; background: #e2e8f0; }
.crm-media-upload-bar > span { display: block; height: 100%; background: #1f3a52; transition: width 0.2s ease; }
.crm-media-upload-row.is-done .crm-media-upload-bar > span { background: #16a34a; }
.crm-media-upload-row.is-done .crm-media-upload-state { color: #166534; }
.crm-media-upload-row.is-failed .crm-media-upload-bar > span { background: #dc2626; width: 100% !important; }
.crm-media-upload-row.is-failed .crm-media-upload-state { color: #b91c1c; }
.crm-media-filters { margin-bottom: 16px; }
.crm-media-filters .input-group-addon { background-color: #fff; border-radius: 0; }
.crm-media-filters .form-control { border-radius: 0; }
.crm-media-filter-btn { background-color: #1f3a52; border-color: #1f3a52; border-radius: 0; }
.crm-media-state { padding: 50px 0; }
.crm-media-state p { margin-top: 10px; font-weight: 500; }
.crm-media-grid { max-height: 420px; overflow-y: auto; padding: 5px; }
.crm-media-pager { margin-top: 12px; }
.crm-media-pager .pagination { margin: 0; }
.crm-media-foot { background-color: #f7f9fc; border-top: 1px solid #e2e8f0; }
.crm-media-foot .btn { border-radius: 0; }
#btn-media-confirm-selection { background-color: #16a34a; border-color: #16a34a; }
#media-selected-count-msg { padding-top: 8px; font-size: 13px; }
.crm-media-card { border: 2px solid #e2e8f0; border-radius: 0; background-color: #fff; margin-bottom: 20px; cursor: pointer; position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.crm-media-card:hover { border-color: #1f3a52; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); }
.crm-media-card.selected { border-color: #16a34a; background-color: #f0fdf4; }
.crm-media-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; background-color: #fff; border: 2px solid #cbd5e1; border-radius: 0; z-index: 10; display: flex; align-items: center; justify-content: center; }
.crm-media-card.selected .crm-media-check { background-color: #16a34a; border-color: #16a34a; }
.crm-media-card.selected .crm-media-check::after { content: '\f00c'; font-family: 'FontAwesome'; color: #fff; font-size: 11px; }
.crm-media-thumb { height: 120px; display: flex; align-items: center; justify-content: center; background-color: #f1f5f9; overflow: hidden; }
.crm-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.crm-media-meta { padding: 8px; font-size: 11px; color: #475569; }
.crm-media-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1e293b; }
.crm-media-dims { color: #64748b; margin-top: 2px; }
.crm-media-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.crm-media-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 0; text-transform: uppercase; color: #fff; letter-spacing: 0.3px; }
.crm-media-badge--new { background: #1f3a52; }
.crm-media-badge--perfect { background: #f59e0b; }
.crm-media-badge--dest { background: #3b82f6; }
.crm-media-badge--cat { background: #06b6d4; }
@media (max-width: 767px) {
    .crm-media-dialog { width: auto; margin: 10px; }
    .crm-media-body { padding: 12px; }
    .crm-media-filters > [class*="col-"] { margin-bottom: 8px; }
    .crm-media-upload-row { grid-template-columns: 1fr; gap: 4px; }
}
/* Accommodation — Supplements & surcharges of the hotel's rate sheet
   (quotations.js qhSupplementsHtml). Mandatory rows locked, optional rows one
   tick. Square corners, theme navy. */
.qh-supp { margin-top: 10px; border: 1px solid #e2e8f0; background: #fbfcfe; }
.qh-supp-title { font-size: 11px; font-weight: 700; color: #1f3a52; text-transform: uppercase; letter-spacing: 0.3px; padding: 6px 10px; border-bottom: 1px solid #e2e8f0; background: #f1f5f9; }
.qh-supp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 7px 10px; font-weight: 400; font-size: 12.5px; color: #334155; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.qh-supp-row:last-child { border-bottom: 0; }
.qh-supp-row:hover { background: #f8fafc; }
.qh-supp-row.is-mandatory { cursor: default; }
.qh-supp-row.is-on { background: #f0fdf4; }
.qh-supp-row input[type="checkbox"] { margin: 0; width: 15px; height: 15px; accent-color: #1f3a52; }
.qh-supp-name { font-weight: 600; color: #1e293b; }
.qh-supp-meta { color: #64748b; font-size: 11.5px; }
.qh-supp-when { color: #64748b; font-size: 11.5px; }
.qh-supp-when select { height: 24px; padding: 0 4px; font-size: 12px; border: 1px solid #cbd5e1; background: #fff; color: #1e293b; }
.qh-supp-amt { margin-left: auto; font-weight: 700; color: #1f3a52; }
.qh-supp-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 6px; border-radius: 0; background: #e8eef4; color: #1f3a52; }
.qh-supp-tag--opt { background: #fff; border: 1px solid #cbd5e1; color: #475569; }
.qh-supp-row:not(:has(.qh-supp-amt)) .qh-supp-tag { margin-left: auto; }

/* Quotation builder — Price (quotations.js qp*): the rounding rule in the panel
   head, then one card per hotel option, side by side when two fit — the services
   (Selling | Supplier cost), the services total, one markup, the rounding, the
   selling price with per person, and the profit. Every amount is the server's
   (ajax price_preview). Square corners, theme navy, like the Accommodation cards. */
.qp-rounding-rule { display: flex; align-items: center; gap: 8px; }
.qp-rounding-rule label { margin: 0; font-size: 12px; font-weight: 600; color: #475569; }
.qp-rounding-rule .form-control { width: auto; min-width: 190px; border-radius: 0; }
.qp-panel > .panel-body { padding: 12px; }
.qp-display { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; padding: 10px 14px 0; }
.qp-display-field { flex: 1 1 260px; min-width: 0; }
.qp-display-field label { display: block; margin: 0 0 3px; font-size: 11.5px; font-weight: 700; color: #475569; }
.qp-display-field .form-control { border-radius: 0; }
.qp-display-note { flex: 1 1 100%; font-size: 11.5px; color: #64748b; }
.qp-statemk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid #eef2f7; font-size: 12.5px; }
.qp-statemk-label { font-weight: 600; color: #334155; }
.qp-statemk-value { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.qp-statemk-value .form-control { width: 90px; height: 26px; padding: 2px 6px; font-size: 12px; text-align: right; border-radius: 0; }
.qp-statemk-amount { color: #166534; white-space: nowrap; }
.qp-statemk-detail { flex: 1 1 100%; font-size: 11.5px; color: #64748b; line-height: 1.5; }
.qp-statemk-detail:empty { display: none; }
.qp-tax { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid #eef2f7; font-size: 12.5px; }
.qp-tax-label { font-weight: 600; color: #334155; }
.qp-tax-controls { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.qp-tax-controls .form-control { width: auto; max-width: 150px; height: 26px; padding: 2px 6px; font-size: 12px; border-radius: 0; }
.qp-taxrow { margin: 0; padding: 6px 12px; background: #fffbeb; border: 1px solid #fde68a; border-top: 0; font-size: 12px; color: #78350f; }
.qp-taxrow > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.qp-taxrow small { color: #a16207; }
.qp-taxrow-total { margin-top: 3px; padding-top: 4px; border-top: 1px dashed #fcd34d; font-weight: 700; }
.qp-taxrow-total strong { font-size: 14px; color: #78350f; }
.qp-client { margin: 8px 12px 0; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #0f766e; font-size: 12px; }
.qp-client-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #0f766e; }
.qp-client-head small { text-transform: none; letter-spacing: 0; font-weight: 600; color: #64748b; }
.qp-client table { width: 100%; }
.qp-client td { padding: 2px 0; color: #334155; }
.qp-client td.qp-num { text-align: right; font-weight: 700; color: #1f3a52; white-space: nowrap; width: 1%; }
.qp-client-total { color: #334155; font-weight: 600; }
.qp-notes:empty { display: none; }
.qp-notes { margin-bottom: 10px; }
.qp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; align-items: start; }
.qp-card { border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; background: #fff; min-width: 0; }
.qp-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: #fcfdfe; border-bottom: 1px solid #e2e8f0; }
.qp-card-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 13.5px; color: #1e293b; }
.qp-card-mode { font-size: 11.5px; font-weight: 600; color: #64748b; }
.qp-card-status { margin-left: auto; font-size: 11.5px; color: #64748b; white-space: nowrap; }
.qp-card-status:empty { display: none; }
.qp-mode-switch > .btn, .qp-markup-switch > .btn { border-radius: 0; }
.qp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qp-table th { padding: 7px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.qp-table td { padding: 7px 12px; border-bottom: 1px solid #eef2f7; vertical-align: middle; color: #334155; }
.qp-table .qp-num { text-align: right; white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
.qp-table td.qp-num { font-weight: 700; color: #1f3a52; }
.qp-table td.qp-b { font-weight: 600; color: #64748b; }
.qp-label { font-weight: 600; color: #334155; }
.qp-label > .fa { color: #1f3a52; width: 16px; }
.qp-hint { display: block; margin-left: 20px; font-size: 11.5px; font-weight: 500; color: #64748b; }
.qp-hint:empty { display: none; }
.qp-line[data-line="total"] .qp-hint, .qp-line[data-line="total"] .qp-use-services { margin-left: 0; }
.qp-table .form-control { width: 120px; display: inline-block; border-radius: 0; text-align: right; }
.qp-table .qp-other-label { width: 100%; max-width: 280px; text-align: left; }
.qp-sum td { font-weight: 700; color: #1e293b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.qp-sum td.qp-num { font-size: 13px; color: #1e293b; }
.qp-warn { color: #d97706; }
/* "Use services total" (Total cost): a real button with the amount it fills in. */
.qp-use-services { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 0; font-size: 11.5px; font-weight: 700; color: #fff; border-color: #1f3a52; background: #1f3a52; }
.qp-use-services:hover, .qp-use-services:focus { color: #fff; background: #2563eb; border-color: #2563eb; }
.qp-use-services.is-empty { color: #94a3b8; border-color: #cbd5e1; background: #f8fafc; }
.qp-use-services.is-empty:hover { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }
.qp-flash { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.35); border-color: #16a34a !important; transition: box-shadow 0.3s ease; }
.qp-muted { color: #64748b; font-weight: 600; font-size: 12px; }
.qp-bad { color: #b91c1c; font-size: 12px; font-weight: 600; white-space: normal; }
.qp-markup, .qp-rounding { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid #eef2f7; font-size: 12.5px; }
.qp-markup-label { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #334155; }
.qp-markup-value { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.qp-markup-value .form-control { width: 110px; border-radius: 0; text-align: right; }
.qp-markup-amount { font-size: 12.5px; color: #166534; white-space: nowrap; }
.qp-rounding span { color: #334155; font-weight: 600; }
.qp-rounding small { margin-left: 6px; font-weight: 500; color: #64748b; }
.qp-rounding strong { margin-left: auto; color: #166534; }
.qp-low-markup { margin: 8px 12px 0; }
.qp-sell { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; margin-top: 8px; padding: 10px 12px; background: #1f3a52; color: #fff; }
.qp-sell-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #cbd5e1; }
.qp-sell-amount { font-size: 20px; font-weight: 800; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.qp-sell-pp { grid-column: 1 / -1; font-size: 12px; color: #e2e8f0; text-align: right; }
.qp-sell-pp:empty { display: none; }
.qp-sell-pp strong { color: #fff; }
.qp-sell-pp span { color: #cbd5e1; }
.qp-profit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 12px; font-size: 12.5px; background: #f0fdf4; border-top: 1px solid #bbf7d0; color: #166534; }
.qp-profit:empty { display: none; }
.qp-profit span { font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.4px; }
.qp-profit strong { font-size: 14px; margin-left: auto; font-variant-numeric: tabular-nums; }
.qp-profit small { flex-basis: 100%; text-align: right; color: #15803d; }
.qp-profit small:empty { display: none; }
.qp-profit.is-loss { background: #fef2f2; border-top-color: #fecaca; color: #b91c1c; }
.qp-profit.is-loss small { color: #b91c1c; }
.qp-warnings:empty { display: none; }
.qp-warnings { padding: 8px 12px 2px; }
.qp-warnings .crm-line-hint { margin-bottom: 6px; }
/* The builder's save bar: kept in view at the foot of the page, above the 32px footer. */
.qb-savebar { position: sticky; bottom: 32px; z-index: 1025; /* over the page footer (1020), under modals (1040+) */ display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 4px; padding: 7px 14px; background: #fff; border: 1px solid #cbd5e1; border-top: 2px solid #1f3a52; box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08); }
.qb-savebar-state { font-size: 12.5px; font-weight: 600; color: #15803d; white-space: nowrap; }
.qb-savebar-state.is-dirty { color: #b45309; }
.qb-savebar-prices { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #475569; }
.qb-savebar-price strong { color: #1f3a52; font-variant-numeric: tabular-nums; }
.qb-savebar-btn { margin-left: auto; border-radius: 0; padding: 5px 16px; font-weight: 700; }
.qb-savebar-lock { font-size: 12.5px; font-weight: 600; color: #b91c1c; }
@media (max-width: 767px) {
    .qp-cards { grid-template-columns: 1fr; }
    .qp-rounding-rule { width: 100%; flex-wrap: wrap; }
    .qp-rounding-rule .form-control { min-width: 0; flex: 1; }
    .qp-table { table-layout: fixed; }
    .qp-table th, .qp-table td { padding-left: 8px; padding-right: 8px; }
    .qp-table th.qp-num { width: 29%; white-space: normal; }
    .qp-table .form-control { width: 100%; padding-left: 6px; padding-right: 6px; }
    .qp-hint { margin-left: 0; }
    .qp-markup-value { width: 100%; justify-content: flex-end; }
    .qb-savebar { padding: 7px 10px; }
    .qb-savebar-prices { order: 3; width: 100%; }
}

/* Quotation builder — Day-by-Day itinerary (quotations.js qday*): one card
   per day, folded to a header line (grip · Day N · date · type · destination
   · title · status). Customized days drag by the grip; a Pre-defined
   quotation's package days are read-only. Square corners, theme navy. */
.qday-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qday-tools .btn { border-radius: 0; }
.qday-counter { font-size: 12px; font-weight: 700; color: #1f3a52; background: #e8eef4; padding: 2px 8px; }
.qday-counter--warn { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #fde68a; }
.qday-list { list-style: none; margin: 10px 0 0; padding: 0; }
.qday { border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; background: #fff; margin-bottom: 8px; }
.qday--locked { border-left-color: #94a3b8; }
.qday--extra { border-left-color: #d97706; background: #fffdf5; }
.qday-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; background: #f8fafc; flex-wrap: wrap; }
.qday--open > .qday-head { border-bottom: 1px solid #eef2f7; }
.qday-grip { cursor: grab; color: #94a3b8; padding: 0 2px; }
.qday-grip:hover { color: #1f3a52; }
.qday-grip:active { cursor: grabbing; }
.qday-no { font-size: 11.5px; font-weight: 700; color: #fff; background: #1f3a52; padding: 2px 8px; white-space: nowrap; }
.qday-date { font-size: 12px; color: #64748b; white-space: nowrap; }
.qday-type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 7px; white-space: nowrap; }
.qday-type--arrival { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px #a7f3d0; }
.qday-type--middle { background: #eff6ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px #bfdbfe; }
.qday-type--departure { background: #fef2f2; color: #b91c1c; box-shadow: inset 0 0 0 1px #fecaca; }
.qday-via { font-size: 11px; font-weight: 600; color: #8a5a00; background: #fff4d6; border: 1px solid #f0d58a; padding: 1px 7px; white-space: nowrap; }
.qday-dest { font-size: 12.5px; font-weight: 600; color: #1f3a52; white-space: nowrap; }
.qday-title { flex: 1 1 200px; min-width: 0; font-size: 13px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qday-title em { color: #94a3b8; font-style: normal; }
.qday-flag--ok { color: #16a34a; }
.qday-flag--bad { color: #b91c1c; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.qday-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.qday-actions .btn { border-radius: 0; }
.qday-caret { color: #64748b; transition: transform 0.15s ease; }
.qday--open .qday-caret { transform: rotate(180deg); }
.qday-body { padding: 12px; }
.qday-label { display: block; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.qday-label--in { color: #15803d; }
.qday-optional { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.qday-label--out { color: #b91c1c; }
.qday-field { margin-top: 10px; }
.qday-body .form-control, .qday-body .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.qday-master-note { font-size: 11px; color: #64748b; margin-top: 3px; min-height: 14px; }
.qday-stay { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: #1f3a52; background: #e8eef4; padding: 3px 8px; }
.qday-lists { margin-top: 12px; }
.qday-line-row { margin-bottom: 4px; }
.qday-line-row .btn { border-radius: 0; }
.qday-add-line { display: inline-block; font-size: 12px; font-weight: 600; margin-top: 2px; }
.qday-images { margin-top: 12px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
.qday-images-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qday-images-head .qday-label { margin: 0; }
.qday-images .preview-image-item { position: relative; margin-bottom: 8px; }
.qday-images .preview-image-item img { height: 60px; width: 100%; object-fit: cover; border-radius: 0; }
.qday-images .btn-remove-preview-media { position: absolute; top: -5px; right: 10px; border-radius: 0; width: 20px; height: 20px; padding: 0; line-height: 18px; }
.qday-placeholder { height: 42px; border: 2px dashed #94a3b8; background: #f1f5f9; margin-bottom: 8px; }
.qday.ui-sortable-helper { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); }
.qday-empty { padding: 14px; color: #64748b; font-size: 12.5px; border: 1px dashed #cbd5e1; }
.qday-ro-desc { font-size: 13px; color: #334155; line-height: 1.55; margin-top: 8px; }
.qday-ro-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qday-ro-images img { width: 110px; height: 70px; object-fit: cover; border: 1px solid #e2e8f0; }
.qday-ro-lists { margin-top: 12px; }
.qday-list-in, .qday-list-out { list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: #334155; }
.qday-list-in li, .qday-list-out li { padding: 2px 0 2px 18px; position: relative; }
.qday-list-in li:before { content: '\f00c'; font-family: FontAwesome; color: #16a34a; position: absolute; left: 0; }
.qday-list-out li:before { content: '\f00d'; font-family: FontAwesome; color: #dc2626; position: absolute; left: 0; }
.qday-muted { color: #94a3b8; font-size: 12px; margin: 0; }
@media (max-width: 767px) {
    .qday-head { gap: 6px; }
    .qday-title { flex-basis: 100%; order: 10; white-space: normal; }
    .qday-body [class*="col-sm-"] + [class*="col-sm-"] { margin-top: 8px; }
}

/* ===============================================================================
   UI messages — every page (commands/ui-messages-and-forms-pass-plan.md; first built
   for the builder, commands/quotation-builder-notes-plan.md). Colour + icon + a short
   bold label by importance, so a note is noticed before it is read:
     --info     blue   ⓘ  TIP        how-to explanations
     --warning  orange ⚠  CHECK      needs attention, does not block
     --danger   red    ●! IMPORTANT  blocks the save / needs action now
     --success  green  ✓  OK         a good state
     (no level)  slate             a plain note
   The icon follows the level (Font Awesome 4 glyphs), whatever the markup chose.
   The label sits before the first <span>; data-badge="…" on that <span> names it differently.
   Field help under an input is .help-block (ⓘ, slate blue); .help-block.is-warn
   is amber (⚠). "(optional)" after a label is .crm-optional.
   =============================================================================== */
.crm-line-hint { font-size: 12px; line-height: 1.55; padding: 9px 12px; border-left-width: 4px; }
.crm-line-hint > i { font-size: 15px; margin-top: 0; }
.crm-line-hint > span:first-of-type::before { display: inline-block; margin-right: 7px; padding: 1px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.5; text-transform: uppercase; color: #fff; vertical-align: 1px; }
.crm-line-hint.crm-line-hint--info { background: #f0f9f8; border-color: #c7e6e2; border-left-color: #0f766e; color: #134e4a; }
.crm-line-hint.crm-line-hint--info > i { color: #0f766e; }
.crm-line-hint.crm-line-hint--info > i::before { content: "\f05a"; }
.crm-line-hint.crm-line-hint--info > span:first-of-type::before { content: "Tip"; background: #0f766e; }
.crm-line-hint.crm-line-hint--warning { background: #fff7ed; border-color: #fed7aa; border-left-color: #ea580c; color: #9a3412; }
.crm-line-hint.crm-line-hint--warning > i { color: #ea580c; }
.crm-line-hint.crm-line-hint--warning > i::before { content: "\f071"; }
.crm-line-hint.crm-line-hint--warning > span:first-of-type::before { content: "Check"; background: #ea580c; }
.crm-line-hint.crm-line-hint--danger { display: flex; background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626; color: #991b1b; }
.crm-line-hint.crm-line-hint--danger > i { color: #dc2626; }
.crm-line-hint.crm-line-hint--danger > i::before { content: "\f06a"; }
.crm-line-hint.crm-line-hint--danger > span:first-of-type::before { content: "Important"; background: #dc2626; }
.crm-line-hint.crm-line-hint--success { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; color: #166534; }
.crm-line-hint.crm-line-hint--success > i { color: #16a34a; }
.crm-line-hint.crm-line-hint--success > i::before { content: "\f058"; }
.crm-line-hint.crm-line-hint--success > span:first-of-type::before { content: "OK"; background: #16a34a; }
.crm-line-hint strong { color: inherit; font-weight: 700; }
.crm-line-hint > span[data-badge]:first-of-type::before { content: attr(data-badge) !important; } /* attr() reads the span itself */
.crm-line-hint:last-child { margin-bottom: 0; }
.crm-line-hint > span { flex: 1 1 auto; min-width: 0; }
/* Field help and field warnings (one line under an input). */
.help-block { margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: #4b6360; }
.help-block::before { content: "\f05a"; font-family: FontAwesome; margin-right: 5px; color: #5f9a93; font-size: 11px; }
.help-block.is-warn { color: #9a3412; }
.help-block.is-warn::before { content: "\f071"; color: #ea580c; }
.has-error .help-block, .has-error .help-block::before { color: #b91c1c; }
.help-block.no-icon::before, .help-block:empty::before { content: none; }
/* "(optional)" after a label. */
.crm-optional { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: 0.3px; text-transform: lowercase; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; vertical-align: 1px; }
/* The trip badge: red within QUOTATION_TRAVEL_URGENT_DAYS, orange within QUOTATION_TRAVEL_SOON_DAYS. */
.crm-qb-when { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 12px; font-weight: 700; border: 1px solid; white-space: nowrap; }
.crm-qb-when .fa { color: inherit !important; margin: 0 !important; }
.crm-qb-when--urgent { color: #fff; background: #dc2626; border-color: #dc2626; animation: crm-qb-pulse 2s ease-in-out 3; }
.crm-qb-when--soon { color: #9a3412; background: #fff7ed; border-color: #fdba74; }
.crm-qb-when--later { color: #1e3a8a; background: #eff6ff; border-color: #bfdbfe; }
.crm-qb-when--now { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.crm-qb-when--past { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; font-weight: 600; }
.crm-qb-when-top { margin-top: 8px; }
.crm-qb .crm-qd-when { margin-top: 6px; }
@keyframes crm-qb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); } }
/* Remarks / Special notes: something to read before quoting. */
.crm-qtd-note.crm-qtd-note--read { background: #fff7ed; border-color: #fed7aa; border-left: 4px solid #ea580c; color: #431407; }
.crm-qtd-note-tag { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #c2410c; white-space: normal; }
/* Sightseeing rows: their warnings as tinted chips. */
.crm-qb .qss-w--bad { display: inline-block; padding: 2px 7px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.crm-qb .qss-w--warn { display: inline-block; padding: 2px 7px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.crm-qb .qss-w--info { display: inline-block; padding: 2px 7px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }

/* Quotation builder — Sightseeing & Activities (quotation_sightseeing.js, qss-*):
   one panel lists every day with its add-ons, one compact row each (visible
   without opening a day); details open in #qss_modal. Green edge = included,
   navy lock = mandatory, grey = optional and unticked, red = a mandatory one
   that does not run that day. House palette, square corners. */
.qss-summary { font-size: 12.5px; color: #1e293b; }
.qss-root { margin-top: 10px; }
.qss-empty { padding: 10px 12px; color: #64748b; font-size: 12.5px; border: 1px dashed #cbd5e1; }
.qss-day { border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; background: #fff; margin-bottom: 8px; transition: box-shadow 0.3s ease; }
.qss-day.is-empty { border-left-color: #cbd5e1; }
.qss-day.is-flash { box-shadow: 0 0 0 3px rgba(37, 116, 171, 0.35); }
.qss-day-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 7px 12px; background: #f8fafc; font-size: 12.5px; }
.qss-day:not(.is-empty) > .qss-day-head { border-bottom: 1px solid #eef2f7; }
.qss-day-no { font-size: 11.5px; font-weight: 700; color: #fff; background: #1f3a52; padding: 2px 8px; white-space: nowrap; }
.qss-day.is-empty .qss-day-no { background: #94a3b8; }
.qss-day-date { color: #64748b; white-space: nowrap; }
.qss-day-dest { font-weight: 600; color: #1f3a52; white-space: nowrap; }
.qss-day-tools { margin-left: auto; display: flex; gap: 12px; }
.qss-link { font-size: 12px; font-weight: 600; white-space: nowrap; }
.qss-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-left: 3px solid transparent; }
.qss-row + .qss-row { border-top: 1px solid #f1f5f9; }
.qss-row.is-on { border-left-color: #16a34a; background: #fbfefc; }
.qss-row.is-closed .qss-name { color: #94a3b8; }
.qss-row.is-mandatory.is-closed { border-left-color: #dc2626; background: #fef2f2; }
.qss-row-tick { flex: 0 0 18px; padding-top: 1px; text-align: center; }
.qss-row-tick input { margin: 0; width: 16px; height: 16px; cursor: pointer; }
.qss-row-tick input:disabled { cursor: not-allowed; }
.qss-lock { color: #1f3a52; font-size: 14px; }
.qss-row.is-closed .qss-lock { color: #dc2626; }
.qss-row-text { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.qss-row-title { font-size: 13px; color: #1e293b; }
.qss-name { font-weight: 700; }
.qss-variant { color: #475569; }
.qss-badge { display: inline-block; margin-left: 8px; padding: 0 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; vertical-align: 1px; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }
.qss-badge--m { color: #1f3a52; background: #e8eef4; border-color: #cbd5e1; }
.qss-badge--a { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.qss-row-sub { margin-top: 2px; font-size: 11.5px; color: #64748b; }
.qss-row-warn { margin-top: 3px; font-size: 11.5px; }
.qss-w--bad { color: #b91c1c; font-weight: 600; }
.qss-w--warn { color: #92400e; }
.qss-w--info { color: #1d4ed8; }
.qss-w--muted { color: #94a3b8; }
.qss-row-price { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #1f3a52; white-space: nowrap; padding-top: 1px; }
.qss-row-act { flex: 0 0 auto; }
.qss-muted { color: #94a3b8; font-weight: 400; font-size: 11.5px; }
.qss-bad { color: #b91c1c; font-size: 11.5px; font-weight: 700; }
.qss-chip { display: inline-block; font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; box-shadow: inset 0 0 0 1px #e2e8f0; padding: 2px 7px; white-space: nowrap; cursor: pointer; }
.qss-chip.is-on { color: #166534; background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; }
.qss-panel .btn, .qss-panel .form-control, #qss_modal .btn, #qss_modal .form-control, #qss_modal .bootstrap-select > .dropdown-toggle { border-radius: 0; }
/* The popup */
.qss-modal-dialog { width: 680px; max-width: calc(100% - 20px); }
#qss_modal .modal-title small { color: rgba(255, 255, 255, 0.75); font-weight: 400; margin-left: 6px; }
.qss-m-facts { font-size: 12px; color: #475569; padding: 8px 10px; background: #f8fafc; border: 1px solid #eef2f7; margin-bottom: 10px; }
.qss-m-facts .fa { color: #94a3b8; }
.qss-m-include { font-size: 12.5px; color: #334155; margin-bottom: 12px; }
.qss-m-loading { font-size: 12px; color: #64748b; margin-bottom: 10px; }
.qss-m-sec { border-top: 1px dashed #e2e8f0; padding-top: 10px; margin-top: 10px; }
.qss-m-label { display: block; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; }
.qss-m-grid { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; align-items: center; }
.qss-m-k { font-size: 12px; font-weight: 600; color: #475569; }
.qss-m-v { min-width: 0; }
.qss-m-hint { margin-top: 4px; font-size: 11.5px; }
.qss-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: #334155; cursor: pointer; }
.qss-check input { margin: 0; }
.qss-m-extras { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.qss-vehicle-group { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.qss-vehicle-group .bootstrap-select.form-control.qss-sel { flex: 0 1 auto; min-width: 0; }
.qss-vehicle-group input.qss-count { flex: 0 0 64px; width: 64px; }
.qss-x { color: #64748b; }
#qss_modal .bootstrap-select.form-control.qss-sel { width: auto; max-width: 100%; }
#qss_modal .qss-pick + .dropdown-toggle, #qss_modal .bootstrap-select.qss-pick { width: 100% !important; }
.qss-m-table { margin: 0 0 4px; font-size: 12px; }
.qss-m-table > tbody > tr > td, .qss-m-table > tfoot > tr > th { padding: 4px 6px; }
.qss-m-table > tfoot > tr > th { border-top: 1px solid #cbd5e1; color: #1f3a52; background: #f8fafc; text-transform: none; letter-spacing: 0; font-size: 12px; }
.qss-m-table > tbody > tr > td { background: #fff; }
.qss-m-problem { margin-top: 8px; padding: 8px 10px; font-size: 12px; color: #92400e; background: #fffbeb; border: 1px dashed #fcd34d; }
.qss-m-problem > div + div { margin-top: 2px; }
.qss-m-problem label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; font-weight: 600; color: #92400e; }
.qss-m-problem input.qss-manual { width: 130px; }
.qss-m-moved { margin-top: 8px; padding: 6px 10px; font-size: 12px; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.qss-m-pricefoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.qss-m-total { margin-left: auto; font-size: 15px; font-weight: 700; color: #1f3a52; }
.qss-m-covers { margin-top: 10px; font-size: 11.5px; color: #475569; }
.qss-m-covers .fa { color: #94a3b8; }
.qss-m-buttons { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e2e8f0; text-align: right; }
.qss-m-buttons::after { content: ''; display: table; clear: both; }
@media (max-width: 767px) {
    .qss-row { flex-wrap: wrap; }
    .qss-row-text { flex-basis: calc(100% - 28px); }
    .qss-row-price { margin-left: 28px; }
    .qss-row-act { margin-left: auto; }
    .qss-day-tools { margin-left: 0; width: 100%; }
    .qss-m-grid { grid-template-columns: 1fr; gap: 4px; }
    .qss-m-k { margin-top: 6px; }
    .qss-m-table > tbody > tr > td:nth-child(2) { display: none; }
    .qss-m-table > tfoot > tr > th[colspan] { width: auto; }
}

/* Query Builder — Query Details sidebar (modules/views/queries.php, crm-qd-*).
   Summary + quick actions first, then Trip, Contact, Team, and folded "More
   details". Same type scale as the Lead Workspace (crm-ws-*): labels 10.5px
   uppercase grey, values 12.5–13px dark; one thin rule between sections.
   Square corners throughout. Sticky on desktop (tooltips are portaled to
   <body> by application.js, so the inner scroll never clips them). */
.crm-qd { background: #fff; border: 1px solid #d3d7de; border-top: 3px solid #1f3a52; margin-bottom: 15px; }
.crm-qd-head { padding: 9px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 13px; font-weight: 700; color: #1e293b; }
.crm-qd-head .fa { color: #1f3a52; margin-right: 4px; }
.crm-qd-section { padding: 12px 14px; border-bottom: 1px solid #eef2f7; }
.crm-qd-section:last-child { border-bottom: 0; }
.crm-qd-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.crm-qd-label .fa { color: #94a3b8; }
.crm-qd-idrow { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.crm-qd-code { border: 0; border-radius: 0; background: #1f3a52; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; padding: 4px 8px; cursor: pointer; font-family: inherit; }
.crm-qd-code .fa { opacity: 0.7; margin-left: 3px; font-size: 10px; }
.crm-qd-code:hover { background: #2574ab; }
.crm-qd-status { display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.3px; }
.crm-qd-idrow > .crm-qd-code { flex: 0 0 auto; white-space: nowrap; }
.crm-qd-idrow > .crm-qd-status, .crm-qd-idrow > .crm-qd-status-wrap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-qd-idrow > .crm-qd-help { flex: 0 0 auto; }
.crm-qd-status--sm { font-size: 9.5px; padding: 1px 6px; margin-bottom: 3px; }
.crm-qd-status-wrap { margin-left: 0; color: inherit; }
.crm-qd-help { margin-left: 0; }
.crm-qd-guide-row { display: block; padding: 5px 0; border-bottom: 1px solid #f1f5f9; }
.crm-qd-guide-row:last-child { border-bottom: 0; }
.crm-qd-guide-text { display: block; color: #475569; }
.crm-qd-title { margin-top: 8px; font-size: 14.5px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.crm-qd-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.crm-qd-flag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 7px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 0; }
.crm-qd-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.crm-qd-actions .btn { border-radius: 0; flex: 1 1 auto; font-weight: 600; }
.crm-qd-btn-edit { flex: 1 1 100% !important; }
.crm-qd-wa { color: #25d366; }
.crm-qd-dates { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 700; color: #1e293b; }
.crm-qd-dates .fa { color: #94a3b8; }
.crm-qd-when { margin-top: 3px; font-size: 11.5px; color: #64748b; }
.crm-qd-when .fa { color: #94a3b8; margin-right: 2px; }
.crm-qd-sub { margin-top: 10px; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.crm-qd-dest { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #eef2f7; font-size: 12.5px; font-weight: 600; color: #1e293b; }
.crm-qd-dest:last-of-type { border-bottom: 0; }
.crm-qd-dest .fa { color: #1f3a52; margin-right: 3px; }
.crm-qd-chip { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; background: #e8eef4; color: #1f3a52; border-radius: 0; white-space: nowrap; }
.crm-qd-chip--navy { background: #1f3a52; color: #fff; }
.crm-qd-chip--pax { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.crm-qd-pax { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.crm-qd-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; }
.crm-qd-kv > span { color: #64748b; white-space: nowrap; }
.crm-qd-kv > span .fa { color: #94a3b8; margin-right: 3px; }
.crm-qd-kv > strong { color: #1e293b; text-align: right; font-weight: 600; word-break: break-word; }
.crm-qd-kv--stack { display: block; }
.crm-qd-kv--stack > strong { display: block; text-align: left; font-weight: 400; font-size: 12px; margin-top: 2px; word-break: break-all; }
.crm-qd-section .crm-qd-kv + .crm-qd-kv { border-top: 1px dashed #eef2f7; }
/* Add-ons & Terms rows (modules/views/quotations.php): one line per item - icon, name, count / tick, arrow - like the label / value rows above. */
.crm-qd-row { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 7px 4px; border: 0; border-bottom: 1px dashed #eef2f7; background: transparent; text-align: left; font-size: 12.5px; color: #334155; cursor: pointer; }
.crm-qd-row:last-of-type { border-bottom: 0; }
.crm-qd-row:hover, .crm-qd-row:focus { background: #f8fafc; outline: 0; }
.crm-qd-row-ico { flex: 0 0 22px; color: #1f3a52; text-align: center; }
.crm-qd-row-name { flex: 1 1 auto; font-weight: 600; color: #1e293b; }
.crm-qd-row .crm-qd-chip { flex: 0 0 auto; min-width: 22px; text-align: center; }
.crm-qd-row-go { flex: 0 0 auto; color: #94a3b8; font-size: 16px; }
.crm-qd-tag { margin-left: auto; font-size: 9.5px; font-weight: 700; padding: 2px 6px; color: #fff; border-radius: 0; letter-spacing: 0.3px; }
.crm-qd-tag--b2b { background: #2574ab; }
.crm-qd-tag--b2c { background: #64748b; }
.crm-qd-party { font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.crm-qd-person { font-size: 12.5px; color: #334155; font-weight: 600; margin-bottom: 2px; }
.crm-qd-person .fa { color: #94a3b8; width: 14px; }
.crm-qd-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12.5px; padding: 2px 0; }
.crm-qd-line a { color: #1f3a52; word-break: break-all; }
.crm-qd-line a .fa { color: #94a3b8; width: 14px; }
.crm-qd-copy-btn { flex: 0 0 auto; border: 1px solid #e2e8f0; background: #fff; color: #64748b; border-radius: 0; padding: 1px 6px; font-size: 11px; line-height: 1.6; cursor: pointer; }
.crm-qd-copy-btn:hover { border-color: #1f3a52; color: #1f3a52; }
.crm-qd-cc { margin-top: 8px; }
.crm-qd-empty { color: #94a3b8; font-style: normal; font-size: 12px; font-weight: 400; }
.crm-qd-more { padding-top: 8px; padding-bottom: 8px; }
.crm-qd-more-toggle { display: block; font-size: 11.5px; font-weight: 700; color: #1f3a52; text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none; }
.crm-qd-more-toggle:hover, .crm-qd-more-toggle:focus { color: #2574ab; text-decoration: none; }
.crm-qd-more-toggle .fa { transition: transform 0.15s ease; margin-right: 4px; }
.crm-qd-more-toggle:not(.collapsed) .fa { transform: rotate(90deg); }
#qd_more { padding-top: 6px; }
@media (min-width: 992px) {
    .crm-qd-col { position: -webkit-sticky; position: sticky; top: 75px; z-index: 5; }
    .crm-qd-col > .crm-qd { max-height: calc(100vh - 95px); overflow-y: auto; }
}

/* Quotation Builder — Quotation Details card (modules/views/quotations.php,
   #quotation_details_sidebar): the crm-qd-* look of the Query sidebar plus
   the action rows, the Remarks note and the Lead's special requirements.
   Not sticky (the column also holds Finalize, Add-ons & Terms). */
.crm-qd-status.label { border-radius: 0; line-height: 1.4; }
.crm-qtd-actions .btn { flex: 1 1 0; }
.crm-qtd-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crm-qtd-tools .btn { border-radius: 0; flex: 1 1 auto; font-weight: 600; color: #334155; }
.crm-qtd-note { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; color: #1e293b; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; padding: 8px 10px; max-height: 240px; overflow-y: auto; }
/* Quotation versions & links (builder sidebar, Save / Sync popups — quotations.js qv*) */
.crm-qv-version { padding: 8px 0 8px 9px; border-top: 1px dashed #eef2f7; border-left: 3px solid transparent; }
.crm-qv-version:first-child { border-top: 0; padding-top: 2px; }
.crm-qv-version--current { border-left-color: #1f3a52; }
.crm-qv-head { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.crm-qv-name { font-size: 12.5px; font-weight: 700; color: #1e293b; word-break: break-word; }
.crm-qv-chip--final { background: #ecfdf5; color: #15803d; border: 1px solid #bbf7d0; }
/* Version keys (class.crm_quotation_versions.php V2) */
.crm-qv-key { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 800; color: #1f3a52; background: #eef3f8; border: 1px solid #cdd9e5; padding: 1px 6px; letter-spacing: 0.2px; }
/* Quotation builder: one tone per kind of action (commands/builder-buttons-packages-nights-default-docs-plan.md, part 4) —
   outline buttons keep their light face, the icon carries the colour, the border tints on hover. */
.crm-qb-btn--add .fa { color: #16a34a; }
.qss-link.qss-add .fa { color: #16a34a; }
.crm-qb-btn--add:hover, .crm-qb-btn--add:focus { border-color: #16a34a; background: #f0fdf4; color: #166534; }
.crm-qb-btn--sync .fa { color: #2563eb; }
.crm-qb-btn--sync:hover, .crm-qb-btn--sync:focus { border-color: #2563eb; background: #eff6ff; color: #1e40af; }
.crm-qb-btn--ask .fa, .crm-qb-btn--edit .fa { color: #d97706; }
.crm-qb-btn--ask:hover, .crm-qb-btn--ask:focus, .crm-qb-btn--edit:hover, .crm-qb-btn--edit:focus { border-color: #d97706; background: #fffbeb; color: #92400e; }
.crm-qb-btn--remove .fa { color: #dc2626; }
.crm-qb-btn--remove:hover, .crm-qb-btn--remove:focus { border-color: #dc2626; background: #fef2f2; }
.crm-qb-btn--pdf .fa { color: #dc2626; }
.crm-qb-btn--word .fa { color: #2563eb; }
.crm-qb-btn--print .fa { color: #475569; }
.crm-qb-btn--link .fa { color: #0d9488; }
.crm-qb-btn--pdf:hover, .crm-qb-btn--pdf:focus { border-color: #dc2626; background: #fef2f2; }
.crm-qb-btn--word:hover, .crm-qb-btn--word:focus { border-color: #2563eb; background: #eff6ff; }
.crm-qb-btn--print:hover, .crm-qb-btn--print:focus { border-color: #475569; background: #f8fafc; }
.crm-qb-btn--link:hover, .crm-qb-btn--link:focus { border-color: #0d9488; background: #f0fdfa; }
.crm-qv-key.qv-copy-key { cursor: pointer; border-radius: 0; line-height: 1.5; }
.crm-qv-key.qv-copy-key .fa { margin-left: 3px; font-size: 10.5px; opacity: 0.6; }
.crm-qv-key.qv-copy-key:hover { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.crm-qv-key.qv-copy-key:hover .fa { opacity: 0.85; }
.crm-qv-chip--sent { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.crm-qv-chip--draft { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.crm-qv-version--draft { border-left-style: dashed; }
.crm-qv-summary { margin-top: 4px; font-size: 12px; color: #334155; }
.crm-qv-summary .fa { color: #64748b; }
.crm-qv-version.is-target { background: #fff7ed; box-shadow: inset 0 0 0 2px #fb923c; animation: qvTarget 1s ease 2; }
@keyframes qvTarget { 50% { background: #ffedd5; } }
.crm-qv-meta { margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: #64748b; }
.crm-qv-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crm-qv-tools .btn { border-radius: 0; font-weight: 600; color: #334155; }
.crm-qv-history { margin-top: 6px; max-height: 240px; overflow-y: auto; background: #f8fafc; border: 1px solid #eef2f7; }
.crm-qv-rev { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 8px; font-size: 11.5px; color: #1e293b; border-top: 1px solid #eef2f7; }
.crm-qv-rev:first-child { border-top: 0; }
.crm-qv-rev small { display: block; margin-top: 1px; color: #94a3b8; }
.crm-qv-rev--internal { color: #64748b; }
.crm-qv-rev-tools { flex: 0 0 auto; white-space: nowrap; }
.crm-qv-rev-tools a { color: #1f3a52; font-weight: 600; }
.crm-qv-sync { margin-top: 10px; }
.crm-qv-sync .btn { border-radius: 0; font-weight: 600; }
.crm-qv-sync { padding: 8px; background: #fff7ed; border: 1px solid #fed7aa; border-left: 3px solid #ea580c; }
.crm-qv-sync-count { display: inline-block; margin-left: 4px; padding: 0 6px; background: #ea580c; color: #fff; font-size: 11px; font-weight: 700; }
.crm-qv-sync-hint { margin-top: 5px; font-size: 11.5px; color: #9a3412; }
.crm-qv-intro { margin: 0 0 12px; font-size: 13px; color: #334155; }
.crm-qv-choice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 11px 12px; border: 1px solid #e2e8f0; border-left: 3px solid #cbd5e1; background: #fff; cursor: pointer; font-weight: 400; }
.crm-qv-choice:hover { border-color: #94a3b8; }
.crm-qv-choice.is-on { border-color: #1f3a52; border-left-color: #1f3a52; background: #f0f7ff; }
.crm-qv-choice input[type="radio"] { flex: 0 0 auto; margin: 3px 0 0; accent-color: #1f3a52; width: 15px; height: 15px; }
.crm-qv-choice-body strong { display: block; font-size: 13.5px; color: #0f172a; }
.crm-qv-choice-body small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #64748b; }
.crm-qv-label-field { margin: -2px 0 10px 28px; }
.crm-qv-label-field .form-control { border-radius: 0; }
.crm-qv-choice-body small.is-warn { color: #b45309; }
.crm-qv-note { margin: 4px 0 0; font-size: 11.5px; color: #64748b; }
.crm-qv-kinds-bar { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 12px; color: #64748b; }
.crm-qv-kinds-sum { margin-right: auto; font-weight: 700; color: #334155; }
.crm-qv-kinds { border: 1px solid #e2e8f0; }
.crm-qv-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; border-top: 1px solid #eef2f6; background: #fff; }
.crm-qv-kind:first-child { border-top: 0; }
.crm-qv-kind.is-on { background: #f0f7ff; }
.crm-qv-kind .ckbox { margin: 0; flex: 1 1 auto; font-weight: 700; color: #1e293b; }
.crm-qv-kind.is-none .ckbox { color: #94a3b8; font-weight: 600; }
.crm-qv-kind-n { flex: 0 0 auto; padding: 2px 8px; font-size: 11px; font-weight: 700; background: #1f3a52; color: #fff; }
.crm-qv-kind-n--ok { background: transparent; color: #15803d; padding: 0; }
.crm-qv-kind-hint { flex: 1 1 100%; padding-left: 19px; font-size: 11.5px; line-height: 1.4; color: #64748b; }
.crm-qv-kind.is-none .crm-qv-kind-hint { color: #a0aec0; }
.crm-qv-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; }
.crm-qv-buttons .btn { border-radius: 0; }
.crm-qtd-special { font-size: 12.5px; line-height: 1.5; color: #1e293b; background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #d97706; padding: 7px 10px; margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
.crm-qtd-special > span { display: block; font-size: 10.5px; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; white-space: normal; }
.crm-qtd-query { margin-bottom: 6px; }
.crm-qtd-link { font-size: 12.5px; font-weight: 700; color: #1f3a52; white-space: nowrap; }
.crm-qtd-link .fa { font-size: 11px; color: #94a3b8; }
a.crm-qtd-leadtag, a.crm-qtd-leadtag:hover, a.crm-qtd-leadtag:focus { color: #fff; text-decoration: none; }
.crm-qtd .crm-qd-summary .crm-qd-flags { margin-top: 6px; }
#qtd_more { padding-top: 6px; }
.crm-qtd-lastsaved { font-size: 12px; color: #64748b; margin-left: 10px; }
.crm-qtd-lastsaved .fa { color: #16a34a; }

/* Quotation Preview modal — the modern quotation (quotations.js qmOpenModernPreview):
   width toggle, Customise this quotation, the customer page in an iframe. */
.crm-qm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.crm-qm-bar .btn { border-radius: 0; font-weight: 600; }
.crm-qm-flag { font-size: 11.5px; font-weight: 700; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; padding: 3px 8px; }
.crm-qm-old { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #475569; }
.crm-qm-customise { padding: 12px 12px 10px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.crm-qm-customise label { font-size: 11.5px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; display: block; }
.crm-qm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.crm-qm-color { display: flex; gap: 6px; }
.crm-qm-color input[type="color"] { width: 38px; height: 30px; padding: 2px; border: 1px solid #cbd5e1; background: #fff; border-radius: 0; cursor: pointer; }
.crm-qm-color .form-control { border-radius: 0; font-family: monospace; }
.crm-qm-sections { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; }
.crm-qm-customise label.crm-qm-check { display: inline-block; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #1e293b; margin: 0; cursor: pointer; }
.crm-qm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-qm-actions .btn { border-radius: 0; font-weight: 600; }
.crm-qm-actions small { color: #64748b; font-size: 11.5px; }
.crm-qm-stage { background: #e2e8f0; padding: 12px; text-align: center; }
.crm-qm-stage iframe { width: 100%; height: 72vh; border: 0; background: #fff; display: inline-block; vertical-align: top; transition: width .2s; }

/* Settings → Quotation Design (modules/views/quotation_settings.php, quotation_settings.js):
   the choices on the left, a sticky live preview of a sample quotation on the right. */
.qds-loading { padding: 30px; color: #64748b; }
.qds-choice { display: block; margin: 0 0 8px; font-weight: normal; }
.qds-choice span { font-size: 13px; line-height: 1.45; color: #334155; }
.qds-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #4a6584; }
.qds-hint:not(:has(> .fa:first-child))::before { content: "\f05a"; font-family: FontAwesome; margin-right: 5px; color: #6b8bb0; }
.qds-hint > .fa:first-child { color: #6b8bb0; }
/* Quotation Design: what a layout is — a tip, not small print (commands/ui-messages-and-forms-pass-plan.md). */
.qds-hint.qds-layout-hint { padding: 9px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb; color: #1e3a8a; }
.qds-hint.qds-layout-hint > .fa:first-child { color: #2563eb; }
.qds-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.qds-row .qds-field { flex: 1 1 200px; }
.qds-field label, .qds-color label { display: block; font-size: 11.5px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.qds-inline-btn { border-radius: 0; font-weight: 600; }
.qds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.qds-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.qds-color-inputs { display: flex; gap: 6px; }
.qds-color-inputs input[type="color"] { width: 38px; height: 30px; padding: 2px; border: 1px solid #cbd5e1; background: #fff; border-radius: 0; cursor: pointer; flex: 0 0 auto; }
.qds-color-inputs .form-control { border-radius: 0; font-family: monospace; min-width: 0; }
.qds-contrast { margin-top: 10px; font-size: 12.5px; }
.qds-contrast-ok { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 7px 10px; }
.qds-contrast-bad { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; padding: 7px 10px; }
.qds-contrast-bad ul { margin: 4px 0 0; padding-left: 18px; }
.qds-sections { margin: 0; }
.qds-sections .list-group-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 0; }
.qds-grip { color: #94a3b8; cursor: move; }
.qds-sec { margin: 0; font-weight: 600; font-size: 13px; color: #1e293b; cursor: pointer; }
.qds-check { margin-top: 10px; font-size: 13px; color: #334155; }
.qds-linkmode { margin-top: 14px; }
.qds-linkmode label.qds-choice { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: normal; color: #334155; margin-bottom: 6px; }
.qds-layout-hint { padding: 8px 10px; background: #f6faf7; border: 1px solid #d5e6da; color: #334155; } /* Premium Travel Experience chosen */
.qds-preview-wrap { position: sticky; top: 20px; } .qds-preview { border: 1px solid #cbd5e1; background: #fff; min-width: 0; }
.qds-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; }
.qds-preview-bar .btn { border-radius: 0; font-weight: 600; }
.qds-docx { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #475569; }
.qds-stage { background: #e2e8f0; padding: 12px; text-align: center; }
.qds-stage iframe { width: 100%; height: calc(100vh - 220px); min-height: 520px; border: 0; background: #fff; display: inline-block; vertical-align: top; transition: width .2s; }
@media (max-width: 991px) { .qds-preview-wrap { position: static; } .qds-stage iframe { height: 640px; } }

/* Sightseeing Master (modules/views/sightseeing.php, sightseeing.js): the Query
   form's crm-qf cards plus day chips and compact rows (there is no details page). */
/* Cards keep their own height (no stretched blank space); a column may stack two. */
#frmSightseeing .crm-qf-grid > [class*="col-"], #frmTransfer .crm-qf-grid > [class*="col-"] { display: block; }
#frmSightseeing .crm-qf-grid .crm-qf-card + .crm-qf-card, #frmTransfer .crm-qf-grid .crm-qf-card + .crm-qf-card { margin-top: 16px; }
/* Card bodies have no bottom padding (their last field's margin gives it); a card
   that ends with a help line (Operating days) gets the same space. */
#frmSightseeing .crm-qf-card-body > .crm-qf-help:last-child, #frmTransfer .crm-qf-card-body > .crm-qf-help:last-child { margin-bottom: 14px; }
.ss-time input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
/* A start time's end: worked out from the Duration, read-only (the Hotel rate sheet's read-only field look). */
/* A start time before 5 AM: a line under its row saying it is at night (12:30 AM vs 12:30 PM). */
.ss-table tr.ss-t-night-row > td.ss-t-night { padding: 2px 8px 8px; border-top: 0; font-size: 11.5px; color: #b45309; background: #fffbeb; }
.ss-t-end { background: #eef2f7; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.ss-optional { font-size: 10.5px; font-weight: 600; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.ss-errors .ss-alert { margin: 0 0 10px; padding: 8px 12px; border-radius: 0; font-size: 12.5px; }
.ss-errors .ss-alert ul { margin: 0; padding-left: 18px; }
.crm-qf-card.ss-card-error { border-top-color: #b91c1c; }
.ss-row-error td { background: #fef2f2 !important; }
.ss-row-error .form-control { border-color: #b91c1c; }
.ss-hint { font-size: 11.5px; font-weight: 600; }
.ss-summary { margin: 8px 0 12px; font-size: 12.5px; font-weight: 600; color: #334155; }
.ss-summary .fa { color: #2574ab; margin-right: 3px; }
.ss-empty { margin: 0 0 12px; padding: 7px 10px; font-size: 12.5px; color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; }
.ss-duration, .ss-hours, .ss-ages { display: flex; gap: 10px; flex-wrap: wrap; }
.ss-duration .input-group { flex: 1 1 120px; }
.ss-hours > div, .ss-ages > .form-group { flex: 1 1 150px; margin-bottom: 12px; }
.ss-hours .control-label { font-size: 12px; margin-bottom: 4px; }
.ss-quick { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.ss-quick .btn { border-radius: 0 !important; font-weight: 600; }
.ss-quick .btn.active { background: #1f3a52; border-color: #1f3a52; color: #fff; box-shadow: none; }
.ss-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-day { position: relative; margin: 0; cursor: pointer; }
.ss-day input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ss-day span { display: inline-block; min-width: 48px; padding: 7px 10px; text-align: center; font-size: 12.5px; font-weight: 700; color: #334155; background: #fff; border: 1px solid #cbd5e1; border-radius: 0; user-select: none; }
.ss-day input:checked + span { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.ss-day input:focus-visible + span { outline: 2px solid #2574ab; outline-offset: 2px; }
.ss-variant-row, #frmSightseeing .terms-line-row, #frmTransfer .terms-line-row { margin-bottom: 6px; }
.ss-variant-row .btn, #frmSightseeing .terms-line-row .btn, #frmTransfer .terms-line-row .btn { border-radius: 0; }
.ss-table { margin-bottom: 8px; background: #fff; }
.ss-table > thead > tr > th { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; background: #f8fafc; }
.ss-table > tbody > tr > td { vertical-align: middle; }
.ss-table .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.ss-terms-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.ss-terms-label.ss-in { color: #15803d; }
.ss-terms-label.ss-out { color: #b91c1c; }
.ss-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.ss-thumb { position: relative; width: 120px; border: 1px solid #e2e8f0; padding: 3px; background: #fff; }
.ss-thumb img { display: block; width: 100%; height: 80px; object-fit: cover; }
.ss-thumb .btn { position: absolute; top: -8px; right: -8px; border-radius: 0; padding: 1px 6px; }
.ss-footer .ss-dirty { font-size: 12px; font-weight: 700; color: #92400e; }
.ss-footer .ss-dirty .fa { font-size: 8px; vertical-align: 2px; }
/* Phones: rows become stacked label / value pairs; nothing wider than the screen */
@media (max-width: 640px) {
  .ss-table > thead { display: none; }
  .ss-table, .ss-table > tbody, .ss-table > tbody > tr, .ss-table > tbody > tr > td { display: block; width: 100%; }
  .ss-table > tbody > tr { margin-bottom: 8px; border: 1px solid #e2e8f0; padding: 6px 8px; }
  .ss-table > tbody > tr > td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; }
  .ss-table > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
  .ss-day span { min-width: 40px; padding: 6px 7px; }
}

/* Package builder → a linked day's sightseeing, read live from its master day. */
.pkb-day-ss { margin: 8px 0 4px; padding: 8px 10px; border: 1px solid #e2e8f0; border-left: 3px solid #2574ab; background: #f8fafc; }
.pkb-day-ss-head { font-size: 11.5px; font-weight: 700; color: #1e3a5f; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.pkb-day-ss-head .fa { color: #2574ab; }
.pkb-day-ss-head span { text-transform: none; font-weight: 400; color: #64748b; letter-spacing: 0; }
.pkb-day-ss-chip { display: inline-block; margin: 0 6px 6px 0; padding: 4px 8px; border: 1px solid #cbd5e1; background: #fff; font-size: 12px; color: #334155; }
.pkb-day-ss-chip--gone { text-decoration: line-through; color: #94a3b8; }
.pkb-day-ss-need { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }
.pkb-day-ss-need--on { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

/* Itinerary day → Sightseeing on this day (itinerary.js, window.ITN_SS): one
   compact row per tagged sightseeing; stacked label / value pairs on phones. */
.itn-ss-optional { font-size: 10.5px; font-weight: 600; color: #94a3b8; text-transform: none; letter-spacing: 0; }
.itn-ss-table { margin: 0 0 8px; background: #fff; }
.itn-ss-table > thead > tr > th { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; background: #f8fafc; }
.itn-ss-table > tbody > tr > td { vertical-align: top; }
.itn-ss-table .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.itn-ss-cost { display: flex; flex-wrap: wrap; }
.itn-ss-cost .btn { border-radius: 0 !important; font-size: 11.5px; padding: 5px 8px; }
.itn-ss-cost .btn.active { background: #1f3a52; border-color: #1f3a52; color: #fff; box-shadow: none; }
.itn-ss-novariant { display: inline-block; padding-top: 6px; color: #94a3b8; }
.itn-ss-warn { margin-top: 4px; font-size: 11px; color: #b45309; }
.itn-ss-warn:empty { display: none; }
.itn-ss-warn .itn-ss-rule { color: #475569; }
.itn-ss-cost .btn[disabled] { opacity: 0.45; }
.itn-ss-need { display: flex; flex-wrap: wrap; }
.itn-ss-need .btn { border-radius: 0 !important; font-size: 11.5px; padding: 5px 8px; }
.itn-ss-need .btn.active { background: #1f3a52; border-color: #1f3a52; color: #fff; box-shadow: none; }
.itn-ss-empty { padding: 10px 12px; border: 1px dashed #cbd5e1; color: #64748b; font-size: 12.5px; margin-bottom: 8px; }
.itn-ss-summary { margin: 4px 0 12px; font-size: 12.5px; font-weight: 600; color: #334155; }
.itn-ss-summary:empty { display: none; }
.itn-ss-summary .fa { color: #2574ab; margin-right: 3px; }
@media (max-width: 640px) {
  .itn-ss-table > thead { display: none; }
  .itn-ss-table, .itn-ss-table > tbody, .itn-ss-table > tbody > tr, .itn-ss-table > tbody > tr > td { display: block; width: 100%; }
  .itn-ss-table > tbody > tr { margin-bottom: 8px; border: 1px solid #e2e8f0; padding: 6px 8px; }
  .itn-ss-table > tbody > tr > td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; }
  .itn-ss-table > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
}

/* Settings → Configurations (modules/views/configurations.php): a section menu on
   the left (Bootstrap tab links), the section as crm-qf cards on the right. */
.cfg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cfg-company { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.cfg-company-form { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.cfg-company-form .control-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin: 0; }
.cfg-company .btn { border-radius: 0; }
.cfg-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.cfg-section-select { display: none; }
.cfg-nav { margin: 0; padding: 0 0 6px; list-style: none; background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #1f3a52; position: sticky; top: 70px; }
.cfg-nav > li.cfg-nav-group { padding: 12px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #94a3b8; }
.cfg-nav > li > a { display: flex; align-items: center; gap: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #334155; border-left: 3px solid transparent; border-radius: 0; }
.cfg-nav > li > a .fa { width: 16px; text-align: center; color: #64748b; }
.cfg-nav > li > a:hover, .cfg-nav > li > a:focus { background: #f8fafc; color: #1f3a52; }
.cfg-nav > li.active > a, .cfg-nav > li.active > a:hover, .cfg-nav > li.active > a:focus { background: #eef2f7; color: #1f3a52; border-left-color: #1f3a52; }
.cfg-nav > li.active > a .fa { color: #1f3a52; }
.cfg-content { min-width: 0; padding-top: 0; }
.cfg-content > .tab-pane { padding-top: 0; } /* the theme pads tab panes; the menu and the first card line up */
.cfg-page .crm-qf-grid > [class*="col-"] { display: block; }
.cfg-page .crm-qf-card-head .btn { border-radius: 0; }
.cfg-head-actions { display: flex; gap: 6px; }
.cfg-card-table { padding-bottom: 12px; }
.cfg-card-table > .help-block { margin: 0 0 10px; }
.cfg-mt { margin-top: 16px; }
.cfg-image { margin-bottom: 8px; padding: 6px; background: #f8fafc; border: 1px solid #e2e8f0; text-align: center; }
.cfg-image img { max-width: 100%; max-height: 90px; }
.cfg-saved { font-size: 11px; font-weight: 700; color: #15803d; }
.cfg-pair { display: flex; gap: 6px; }
.cfg-pair .bootstrap-select { flex: 0 0 auto; }
.cfg-pair .form-control { flex: 1 1 auto; min-width: 0; }
.cfg-mailbox { margin-bottom: 12px; }
.cfg-mail-label { margin: 2px 0 6px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.cfg-mailbox .control-label { font-size: 12px; margin-bottom: 4px; }
.cfg-test { padding-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-test .btn { border-radius: 0; }
.cfg-test-result { font-size: 12px; }
.cfg-code-example { font-size: 11px; font-weight: 600; color: #64748b; font-family: monospace; }
.cfg-footer-note { font-size: 12px; color: #64748b; }
.cfg-inline-actions { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.cfg-table { margin-bottom: 0; background: #fff; }
.cfg-table > thead > tr > th { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; background: #f8fafc; border-bottom-width: 1px; }
.cfg-table > tbody > tr > td { vertical-align: middle; font-size: 13px; }
@media (max-width: 991px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); }
  .cfg-nav { display: none; }
  .cfg-section-select { display: block; margin-bottom: 12px; border-radius: 0; font-weight: 600; }
  .cfg-test { padding-top: 0; }
}

/* Itinerary Master & Package Master (modules/views/itinerary.php, packages.php):
   the Query form's crm-qf cards and sticky save bar; in the package builder a
   summary strip, then Configurations' section menu (cfg-layout / cfg-nav). */
.itn-form .crm-qf-grid > [class*="col-"], .pkb-form .crm-qf-grid > [class*="col-"] { min-width: 0; }
@media (max-width: 991px) {
  /* below md a col-md-* has no width of its own — in the flex grid it would shrink or grow to its content */
  .itn-form .crm-qf-grid > [class*="col-"], .pkb-form .crm-qf-grid > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}
.itn-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.itn-head-actions .btn { border-radius: 0; }
.itn-quality { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.itn-quality-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.itn-quality .label { font-size: 11.5px; padding: 4px 8px; border-radius: 0; }
.itn-types, .pkb-radios, .pkb-checks { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 2px; }
.itn-types .rdiobox-inline, .pkb-radios .rdiobox-inline, .pkb-checks .ckbox { margin: 0; }
.itn-review { margin: 4px 0 12px; padding-bottom: 2px; }
.itn-review .help-block { margin-bottom: 10px; }
.itn-upload { display: flex; gap: 8px; align-items: stretch; }
.itn-upload .form-control { flex: 1 1 auto; min-width: 0; }
.itn-upload .btn { flex: 0 0 auto; border-radius: 0; white-space: nowrap; }
.itn-list-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.itn-list-label--inclusion, .itn-list-label--inclusions { color: #15803d; }
.itn-list-label--exclusion, .itn-list-label--exclusions { color: #b91c1c; }
.itn-form .terms-line-row, #frmItineraryDay .terms-line-row, #frmPackageTerms .terms-line-row { margin-bottom: 6px; }
.itn-form .terms-line-row .btn, #frmItineraryDay .terms-line-row .btn, #frmPackageTerms .terms-line-row .btn, .itn-form .btn-add-terms-item, #frmItineraryDay .btn-add-terms-item, #frmPackageTerms .btn-add-terms-item { border-radius: 0; }
.itn-form .crm-line-hint, .pkb-form .crm-line-hint, #frmPackageTerms .crm-line-hint, #frmItineraryDay .crm-line-hint { margin: 0 0 12px; }

/* Image tiles — the saved ones and the Media Library picks (its own col-* tiles laid out as a strip) */
.crm-media-strip { display: flex !important; flex-wrap: wrap; gap: 10px; margin: 0 0 12px !important; }
.crm-media-strip::before, .crm-media-strip::after { display: none !important; }
.crm-media-strip:empty { display: none !important; }
.crm-media-strip > .preview-image-item, .crm-media-strip > .img-box-wrapper { flex: 0 0 auto; width: 120px !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.crm-media-strip .thumbnail { height: 84px !important; margin-bottom: 0 !important; padding: 2px; border-radius: 0; }
.crm-media-strip .img-box-wrapper > div { margin-bottom: 0 !important; border-radius: 0 !important; }
.crm-media-strip .img-box-wrapper img { height: 76px !important; }
.crm-media-strip .btn-danger { border-radius: 0 !important; }
.crm-media-tile { position: relative; flex: 0 0 auto; width: 120px; padding: 3px; background: #fff; border: 1px solid #e2e8f0; }
.crm-media-tile img { display: block; width: 100%; height: 80px; object-fit: cover; }
.crm-media-tile .btn { position: absolute; top: -8px; right: -8px; padding: 1px 6px; border-radius: 0; }
.crm-media-tile--wide { width: 220px; }
.crm-media-tile--wide img { height: 120px; }
.pkb-homepage-preview > .preview-image-item { width: 220px !important; }
.pkb-homepage-preview .thumbnail { height: auto !important; }
.crm-media-strip-title { margin: 2px 0 6px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }

/* Package builder — summary strip */
.pkb-summary { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; padding: 14px; }
.pkb-summary-img { flex: 0 0 180px; height: 124px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f1f5f9; border: 1px solid #e2e8f0; }
.pkb-summary-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pkb-summary-noimg, .pkb-summary-img--none::after { font-size: 12px; font-weight: 600; color: #94a3b8; }
.pkb-summary-img--none::after { content: "No image"; }
.pkb-summary-main { flex: 1 1 auto; min-width: 0; }
.pkb-summary-name { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #1e293b; }
.pkb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; margin: 0 0 10px; }
.pkb-facts dt { font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.pkb-facts dd { margin: 2px 0 0; font-size: 13px; color: #1e293b; }
.pkb-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-top: 10px; border-top: 1px solid #e2e8f0; font-size: 12.5px; color: #1f3a52; }
.pkb-route-label { margin-right: 4px; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; }
.pkb-route-label .fa { color: #2574ab; }
.pkb-route-sep { color: #94a3b8; }
.pkb-route--empty { color: #94a3b8; }

/* Package builder — sections */
.pkb-nav-count { margin-left: auto; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; }
.pkb-layout .cfg-content > .tab-pane > .crm-qf-card, .pkb-layout .cfg-content > .tab-pane > form > .crm-qf-card { display: block; }
.pkb-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pkb-head-actions .btn { border-radius: 0; }
.pkb-same-cost { font-size: 12px; font-weight: 600; color: #475569; }
.pkb-same-cost .ckbox { margin: 0; }
.pkb-card-pad { padding-bottom: 12px; }
.pkb-intro { margin: 0 0 10px; }
.pkb-none { margin: 0 0 6px; padding: 8px 10px; font-size: 12.5px; color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; }
.pkb-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding: 10px 0 12px; border-top: 1px solid #e2e8f0; }
.pkb-card-actions .help-block { margin: 0; }
.pkb-card-actions .btn, .pkb-form-actions .btn { border-radius: 0; }
.pkb-form-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 22px; margin-bottom: 12px; }
.pkb-table { margin-bottom: 10px; background: #fff; }
.pkb-table > thead > tr > th { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; background: #f8fafc; border-bottom-width: 1px; }
.pkb-table > tbody > tr > td { vertical-align: middle; }
.pkb-table .input-group-addon { border-radius: 0; }
.pkb-rates-matrix .form-group { margin: 0; }
.pkb-rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pkb-rate-grid > .pkb-none, .pkb-rate-grid > p { grid-column: 1 / -1; }
.pkb-rate-grid .pricing-row-card, .pkb-rate-grid .rate-row-card { margin: 0 !important; border-radius: 0 !important; background: #fff !important; border-left: 3px solid #2574ab !important; }
.pkb-terms-grid { display: flex; flex-wrap: wrap; }
.pkb-terms-grid > [class*="col-"] { display: flex; }
.pkb-terms-field { flex: 1; min-width: 0; }
.pkb-terms-field .form-group { margin-bottom: 8px; }
.pkb-terms-field .btn-add-terms-item { margin-bottom: 12px; }

/* Package builder — the day timeline (house look: square blocks, no shadows; the
   left border says what a day is: blue = linked to master, amber = custom, red = last) */
.package-builder-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.package-builder-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 23px; width: 2px; background: #e2e8f0; }
.package-builder-timeline > li { position: relative; margin-bottom: 14px; }
.package-builder-timeline > li > .timeline-badge { position: absolute; top: 0; left: 0; z-index: 2; width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; font-size: 17px; font-weight: 700; color: #fff; background: #1f3a52; border-radius: 0; }
.package-builder-timeline > li > .timeline-badge small { margin-bottom: 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.8; }
.package-builder-timeline > li > .timeline-panel { position: relative; margin-left: 64px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #f59e0b; border-radius: 0; transition: border-color 0.2s; }
.package-builder-timeline > li > .timeline-panel:hover { border-top-color: #94a3b8; border-right-color: #94a3b8; border-bottom-color: #94a3b8; }
.package-builder-timeline > li > .timeline-panel--master { border-left-color: #3b82f6; }
.package-builder-timeline > li > .timeline-panel--last { border-left-color: #dc2626; }
.itinerary-actions-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.pkb-day-title { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #1e293b; }
.pkb-day-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pkb-day-actions .btn { border-radius: 0; }
.itinerary-meta-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.itinerary-meta-badges .label { font-size: 10.5px; padding: 3px 7px; border-radius: 0; }
.pkb-day-desc { margin-top: 10px; font-size: 13px; line-height: 1.55; color: #475569; }
.pkb-day-desc p { margin: 0 0 6px; }
.pkb-day-images { margin: 10px 0 0 !important; }
.pkb-day-lists { margin-top: 10px; }
.pkb-day-list-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.pkb-day-list-title--in { color: #15803d; }
.pkb-day-list-title--out { color: #b91c1c; }
.pkb-day-lists ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: #475569; }
.pkb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 11.5px; color: #64748b; }
.pkb-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pkb-legend-item::before { content: ""; width: 10px; height: 10px; background: #f59e0b; }
.pkb-legend-item--master::before { background: #3b82f6; }
.pkb-legend-item--last::before { background: #dc2626; }
.pkb-days-body { padding-bottom: 6px; }
.pkb-empty { padding: 36px 10px; text-align: center; color: #64748b; }
.pkb-empty .fa-calendar-times-o { margin-bottom: 10px; font-size: 40px; color: #cbd5e1; }
.pkb-empty p { margin: 0 0 14px; font-size: 12.5px; }
.pkb-empty .pkb-empty-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #334155; }
.pkb-empty .btn { border-radius: 0; }

/* Package builder — modals */
.pkb-modal-body { background: #fcfdfe; }
#modalItineraryDay .pkb-modal-body { max-height: 70vh; overflow-y: auto; }
.pkb-modal-body .crm-qf-subpanel-title { display: flex; align-items: center; gap: 8px; }
.pkb-modal-lede { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #475569; }
.pkb-save-master { margin: 0 0 12px; }
.pkb-save-master .help-block { margin: 4px 0 0 26px; }
.pkb-sync { padding-bottom: 6px; }
.pkb-sync-all { margin-bottom: 10px; }
.pkb-sync-fields { display: grid; gap: 8px; padding: 10px 0 6px 22px; border-top: 1px solid #e2e8f0; }
.pkb-sync-fields .ckbox { margin: 0; }
.pkb-reorder { margin: 0; cursor: move; }
.pkb-reorder > .list-group-item { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; border-radius: 0 !important; border-left: 3px solid #2574ab; }
.pkb-reorder .day-num-badge { flex: 0 0 auto; padding: 4px 8px; font-size: 11px; font-weight: 700; color: #fff; background: #1f3a52; }
.pkb-reorder-text { flex: 1 1 auto; min-width: 0; }
.pkb-reorder-text strong { display: block; font-size: 13px; color: #1e293b; }
.pkb-reorder-text span { font-size: 11.5px; color: #64748b; }
.pkb-reorder-grip { font-size: 16px; color: #94a3b8; }

/* Phones: one column, stacked rows, nothing wider than the screen */
@media (max-width: 767px) {
  .itn-head-actions { width: 100%; }
  .itn-upload { flex-direction: column; }
  .pkb-summary { flex-direction: column; }
  .pkb-summary-img { flex-basis: auto; width: 100%; height: 150px; }
  .pkb-form-actions { padding-top: 0; }
  .pkb-form-actions .btn { flex: 1 1 auto; }
  .pkb-card-actions { flex-direction: column; align-items: stretch; }
  .package-builder-timeline::before { left: 17px; }
  .package-builder-timeline > li > .timeline-badge { width: 36px; height: 36px; font-size: 14px; }
  .package-builder-timeline > li > .timeline-badge small { display: none; }
  .package-builder-timeline > li > .timeline-panel { margin-left: 46px; padding: 10px; }
  .itinerary-actions-header { flex-direction: column; }
  .pkb-table > thead { display: none; }
  .pkb-table, .pkb-table > tbody, .pkb-table > tbody > tr, .pkb-table > tbody > tr > td { display: block; width: 100%; }
  .pkb-table > tbody > tr { margin-bottom: 8px; padding: 6px 8px; border: 1px solid #e2e8f0; }
  .pkb-table > tbody > tr > td { padding: 3px 0 !important; border: 0 !important; }
  .pkb-table > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; }
  .pkb-reorder > .list-group-item { gap: 8px; }
}

/* Dashboard — Hotel rate requests card (modules/views/dashboard.php): the
   "Ask ops for a missing rate" requests waiting for the signed-in user. */
.dash-rr { margin-bottom: 20px; border: 1px solid #f3d9a4; border-left: 4px solid #d97706; border-radius: 0; background: #fffbf3; box-shadow: none; }
.dash-rr-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f3e3c2; }
.dash-rr-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #d97706; color: #fff; font-size: 15px; }
.dash-rr-titles h5 { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #92400e; }
.dash-rr-titles span { font-size: 11.5px; color: #a16207; }
.dash-rr-list { list-style: none; margin: 0; padding: 0; }
.dash-rr-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px dashed #f3e3c2; background: #fff; }
.dash-rr-item:last-child { border-bottom: 0; }
.dash-rr-text { min-width: 0; flex: 1 1 auto; }
.dash-rr-title { display: block; font-size: 12.5px; font-weight: 700; color: #1e293b; }
.dash-rr-title:hover, .dash-rr-title:focus { color: #2574ab; }
.dash-rr-msg { font-size: 11.5px; color: #475569; margin-top: 2px; }
.dash-rr-meta { font-size: 10.5px; color: #94a3b8; margin-top: 3px; }
.dash-rr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dash-rr-actions .btn { border-radius: 0; font-weight: 600; }
.dash-rr-more { padding: 7px 16px; font-size: 11px; color: #a16207; border-top: 1px solid #f3e3c2; }
@media (max-width: 767px) {
	.dash-rr-item { flex-direction: column; align-items: stretch; }
	.dash-rr-actions .btn { flex: 1 1 0; }
}

/* HR Settings (modules/views/hr_settings.php, assets/js/hr_settings.js) — the
   setup-status strip, the salary ladder and the section tables. Sharp corners. */
.hrs-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.hrs-tile { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid #e2e8f0; border-left: 4px solid #16a34a; background: #fff; color: #334155; border-radius: 0; text-decoration: none; }
a.hrs-tile:hover, a.hrs-tile:focus { background: #f8fafc; color: #334155; text-decoration: none; }
.hrs-tile--warn { border-left-color: #d97706; background: #fffbf3; }
a.hrs-tile--warn:hover, a.hrs-tile--warn:focus { background: #fff6e5; }
.hrs-tile--loading { grid-column: 1 / -1; border-left-color: #cbd5e1; color: #64748b; }
.hrs-tile-icon { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #1f3a52; color: #fff; font-size: 14px; }
.hrs-tile--warn .hrs-tile-icon { background: #d97706; }
.hrs-tile-body { display: flex; flex-direction: column; min-width: 0; }
.hrs-tile-title { font-size: 12px; font-weight: 700; color: #1f3a52; text-transform: uppercase; letter-spacing: .3px; }
.hrs-tile-state { color: #16a34a; margin-left: 2px; }
.hrs-tile--warn .hrs-tile-state { color: #d97706; }
.hrs-tile-main { font-size: 12.5px; margin-top: 2px; }
.hrs-tile-note { font-size: 11.5px; color: #92400e; margin-top: 3px; }
.hrs-tile-note .fa { margin-right: 3px; }
.hrs-tabs .badge { background: #e2e8f0; color: #334155; font-size: 10.5px; border-radius: 0; margin-left: 3px; }
.hrs-tabs li.active .badge { background: #1f3a52; color: #fff; }
.hrs-tab-warn { color: #d97706; }
.hrs-content { padding-top: 16px; }
.hrs-intro { font-size: 12.5px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #2574ab; padding: 9px 12px; margin: 0 0 14px; }
.hrs-intro > .fa { color: #2574ab; margin-right: 4px; }
.hrs-intro span { color: #64748b; }
.hrs-section-head { display: flex; gap: 14px; align-items: flex-start; }
.hrs-section-head .hrs-intro { flex: 1 1 auto; }
.hrs-section-head > .btn { flex-shrink: 0; }
.hrs-toolbar { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.hrs-try { flex: 1 1 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hrs-try label { margin: 0; font-weight: 700; color: #1f3a52; font-size: 12px; }
.hrs-try .input-group { width: 170px; }
.hrs-try-result { font-size: 12.5px; color: #64748b; flex: 1 1 260px; }
.hrs-try-result--ok { color: #166534; }
.hrs-try-result--warn { color: #92400e; }
.hrs-ladder { border-top: 1px solid #e2e8f0; }
.hrs-slab { display: flex; gap: 16px; align-items: center; padding: 12px 14px; border: 1px solid #e2e8f0; border-top: 0; border-left: 4px solid #2574ab; background: #fff; }
.hrs-slab--scheduled { border-left-color: #7c3aed; background: #faf8ff; }
.hrs-slab--replaced, .hrs-slab--off { border-left-color: #cbd5e1; background: #f8fafc; color: #64748b; }
.hrs-slab-range { flex: 0 0 210px; font-size: 14px; font-weight: 700; color: #1f3a52; }
.hrs-slab--replaced .hrs-slab-range, .hrs-slab--off .hrs-slab-range { color: #64748b; }
.hrs-slab-range small { display: block; font-size: 11px; font-weight: 400; color: #94a3b8; }
.hrs-slab-body { flex: 1 1 auto; min-width: 0; }
.hrs-slab-terms { font-size: 12.5px; color: #334155; line-height: 1.6; }
.hrs-slab--replaced .hrs-slab-terms, .hrs-slab--off .hrs-slab-terms { color: #64748b; }
.hrs-slab-meta { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.hrs-slab-note { font-size: 11.5px; color: #475569; margin-top: 4px; }
.hrs-slab-actions { flex-shrink: 0; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.hrs-gap { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border: 1px dashed #f59e0b; border-left: 4px solid #d97706; background: #fffbf3; color: #92400e; font-size: 12.5px; margin-top: -1px; }
.hrs-gap > .fa { font-size: 15px; }
.hrs-gap-text { flex: 1 1 auto; }
.hrs-alert { padding: 9px 12px; border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; font-size: 12.5px; margin-bottom: 10px; }
.hrs-empty-state { text-align: center; padding: 30px 16px; border: 1px dashed #cbd5e1; border-top: 0; background: #fff; color: #64748b; }
.hrs-empty-state > .fa { font-size: 26px; color: #94a3b8; }
.hrs-empty-state h5 { margin: 8px 0 4px; font-weight: 700; color: #1f3a52; }
.hrs-empty-state p { max-width: 560px; margin: 0 auto 12px; font-size: 12.5px; }
.hrs-empty { text-align: center; color: #64748b; padding: 18px 10px !important; }
.hrs-group { margin-top: 18px; }
.hrs-group-title { font-size: 12.5px; font-weight: 700; color: #1f3a52; margin: 0 0 8px; }
.hrs-group-title small, .hrs-group-toggle small { color: #94a3b8; font-weight: 400; }
.hrs-group-toggle { display: inline-block; font-size: 12.5px; font-weight: 700; color: #1f3a52; margin-bottom: 8px; }
.hrs-group-toggle:hover, .hrs-group-toggle:focus { color: #2574ab; text-decoration: none; }
.hrs-table > thead > tr > th { background: #f4f6f9; color: #505b72; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.hrs-table > tbody > tr > td { vertical-align: middle; font-size: 12.5px; }
.hrs-row-off td { color: #94a3b8; background: #fafafa; }
.hrs-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.hrs-col-actions .btn + .btn, .hrs-col-actions .btn + .hrs-always-on { margin-left: 4px; }
.hrs-always-on { display: inline-block; font-size: 11px; color: #64748b; padding: 1px 6px; border: 1px solid #e2e8f0; background: #f8fafc; cursor: help; }
.hrs-system { cursor: help; border-radius: 0; }
.hrs-days-chips { display: inline-flex; gap: 2px; vertical-align: middle; }
.hrs-day { display: inline-block; min-width: 30px; padding: 1px 0; text-align: center; font-size: 10.5px; color: #94a3b8; border: 1px solid #e2e8f0; background: #f8fafc; }
.hrs-day--on { color: #fff; background: #1f3a52; border-color: #1f3a52; }
.hrs-days-label { font-size: 11px; color: #64748b; margin-left: 6px; }
.hrs-form label { font-weight: 600; color: #1f3a52; }
.hrs-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hrs-inline .input-group { flex: 1 1 140px; }
.hrs-inline .input-group.hrs-w-sm { flex: 0 0 110px; }
.hrs-inline-word { color: #64748b; font-size: 12.5px; }
.hrs-w-md { max-width: 220px; }
.hrs-date-summary { font-size: 13px; color: #334155; padding: 6px 0; }
.hrs-preview { font-size: 12.5px; color: #334155; background: #f0f7fc; border: 1px solid #cfe2f1; border-left: 3px solid #2574ab; padding: 9px 12px; margin: 4px 0 10px; line-height: 1.6; }
.hrs-preview--warn { background: #fffbeb; border-color: #fcd34d; border-left-color: #d97706; color: #92400e; }
.hrs-preview-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: #64748b; }
.hrs-form-note { font-size: 12px; color: #64748b; margin: 0 0 12px; }
#slab_mode_note, #department_system_note { background: #f8fafc; border: 1px solid #e2e8f0; padding: 8px 10px; color: #475569; }
.hrs-presets { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.hrs-preset { margin-left: 8px; }
.hrs-days { display: flex; gap: 16px; flex-wrap: wrap; }
.hrs-days label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: #334155; cursor: pointer; margin: 0; }
.hrs-days input { width: 16px; height: 16px; margin: 0; accent-color: #1e3a5f; cursor: pointer; }
@media (max-width: 991px) {
	.hrs-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.hrs-strip { grid-template-columns: 1fr; }
	.hrs-toolbar, .hrs-section-head { flex-direction: column; align-items: stretch; }
	.hrs-slab { flex-direction: column; align-items: stretch; gap: 8px; }
	.hrs-slab-range { flex-basis: auto; }
	.hrs-slab-actions { justify-content: flex-start; }
	.hrs-gap { flex-wrap: wrap; }
	.hrs-tabs > li > a { padding-left: 8px; padding-right: 8px; }
}

/* Query Details — "Quotation SLA & follow-ups" (modules/views/queries.php,
   QuotationFollowupAutomationService::getQuerySummary()). Square corners. */
.crm-qa-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.crm-qa-badge { flex-shrink: 0; display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 7px; color: #fff; background: #64748b; border-radius: 0; }
.crm-qa-badge--ok { background: #16a34a; }
.crm-qa-badge--warn { background: #d97706; }
.crm-qa-badge--bad { background: #dc2626; }
.crm-qa-badge--muted { background: #94a3b8; }
.crm-qa-note { font-size: 11.5px; color: #475569; line-height: 1.4; }
.crm-qa-more { display: block; font-style: normal; font-weight: 400; color: #64748b; font-size: 11px; margin-top: 2px; }
.crm-qa-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.crm-qa-steps-label { flex-basis: 100%; font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.crm-qa-step { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 6px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; cursor: help; }
.crm-qa-step--done { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.crm-qa-step--skipped { border-color: #e2e8f0; background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
.crm-qa-step--due { border-color: #fde68a; background: #fffbeb; color: #92400e; }

/* ===============================================================================
   Activity Review Center (modules/views/activity_review.php, activity_review.js,
   ar-*): flat house tiles, tabs + one filter row, a calm table, and the case
   popup — what happened / tasks / record on the left, the timeline every
   reviewer sees on the right, the holder's decision as choice cards on top.
   Square corners; colour carries meaning (red concern, orange escalated,
   purple waiting for the employee, green closed).
   =============================================================================== */
.ar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ar-head p { margin: 4px 0 0; color: #64748b; font-size: 12.5px; }
.ar-head .btn { border-radius: 0; }
.ar-tiles { margin-bottom: 4px; display: flex; flex-wrap: wrap; }
.ar-tiles > [class*="col-"] { display: flex; }
.ar-tiles .ar-tile { flex: 1 1 auto; }
.ar-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 15px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; color: #1e293b; text-decoration: none; transition: box-shadow 0.15s ease; }
.ar-tile:hover, .ar-tile:focus { text-decoration: none; color: #1e293b; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
.ar-tile > .fa { font-size: 22px; color: #94a3b8; width: 26px; text-align: center; }
.ar-tile-n { font-size: 24px; font-weight: 800; line-height: 1; min-width: 28px; }
.ar-tile-l { font-size: 11.5px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
.ar-tile--mine { border-left-color: #1f3a52; } .ar-tile--mine > .fa { color: #1f3a52; }
.ar-tile--mine.is-hot { background: #fef2f2; border-left-color: #dc2626; } .ar-tile--mine.is-hot > .fa, .ar-tile--mine.is-hot .ar-tile-n { color: #dc2626; }
.ar-tile--employee { border-left-color: #7c3aed; } .ar-tile--employee > .fa { color: #7c3aed; }
.ar-tile--escalated { border-left-color: #ea580c; } .ar-tile--escalated > .fa { color: #ea580c; }
.ar-tile--closed { border-left-color: #16a34a; } .ar-tile--closed > .fa { color: #16a34a; }
.ar-own-banner { margin-bottom: 15px; }
.ar-tabs { margin-bottom: 12px; }
.ar-tabs > li > a { cursor: pointer; }
.ar-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ar-filters .bootstrap-select > .dropdown-toggle, .ar-filters .form-control { border-radius: 0; }
.ar-filters .ar-date { width: 130px; background: #fff; }
/* bootstrap-select copies form-control onto its wrapper (width 100%): one compact row instead */
.ar-filters .bootstrap-select.ar-f { width: 170px !important; flex: 0 0 auto; }
.ar-filters .bootstrap-select.ar-f-wide { width: 220px !important; }
.ar-reset { font-size: 12px; font-weight: 600; margin-left: 4px; }
.ar-table { margin: 0; }
.ar-table > thead > tr > th { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.3px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.ar-table > tbody > tr { cursor: pointer; }
.ar-table > tbody > tr > td { vertical-align: middle; font-size: 12.5px; color: #1e293b; }
.ar-table > tbody > tr > td small { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.ar-table > tbody > tr.is-mine > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.ar-table .btn { border-radius: 0; white-space: nowrap; }
.ar-code { color: #1f3a52; white-space: nowrap; }
.ar-signals { max-width: 320px; }
.ar-with { font-weight: 600; }
.ar-empty { padding: 30px 12px !important; text-align: center; color: #64748b; cursor: default; }
.ar-empty .fa-check-circle { color: #16a34a; margin-right: 4px; }
.ar-muted { color: #94a3b8; }
.ar-late { color: #c2410c; font-weight: 600; }
.ar-st { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700; border: 1px solid; white-space: nowrap; }
.ar-st--open { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.ar-st--review { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.ar-st--employee { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.ar-st--escalated { color: #9a3412; background: #fff7ed; border-color: #fdba74; }
.ar-st--closed { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.ar-st--concern { color: #fff; background: #dc2626; border-color: #dc2626; }
.ar-st--muted { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.ar-risk { display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; white-space: nowrap; }
.ar-risk--critical { color: #fff; background: #b91c1c; }
.ar-risk--high { color: #fff; background: #ea580c; }
.ar-risk--medium { color: #92400e; background: #fef3c7; }
.ar-risk--observe { color: #1d4ed8; background: #eff6ff; }
/* The case popup */
.ar-modal-dialog { width: 1080px; max-width: calc(100% - 20px); }
#ar_modal .modal-title small { color: rgba(255, 255, 255, 0.75); font-weight: 400; margin-left: 6px; }
#ar_modal .modal-body { background: #f8fafc; padding: 14px 16px; }
.ar-c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ar-c-with { font-size: 12.5px; color: #1e293b; margin-left: 4px; }
.ar-c-with .fa { color: #64748b; }
.ar-c-meta { margin-left: auto; font-size: 11.5px; color: #64748b; }
.ar-sec { background: #fff; border: 1px solid #e2e8f0; padding: 10px 12px; margin-bottom: 12px; }
.ar-sec-t { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.ar-sec-t .fa { color: #1f3a52; margin-right: 3px; }
.ar-signal-list { margin: 0; padding-left: 18px; font-size: 13px; color: #1e293b; }
.ar-signal-list li { margin-bottom: 3px; }
.ar-tasks { margin: 0; font-size: 12px; }
.ar-tasks > thead > tr > th { font-size: 10.5px; color: #64748b; text-transform: uppercase; border-bottom-width: 1px; }
.ar-tasks td small { display: block; color: #94a3b8; font-size: 11px; }
.ar-remark { max-width: 220px; color: #334155; }
.ar-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ar-stats > div { padding: 8px; background: #f8fafc; border: 1px solid #eef2f7; font-size: 11px; color: #64748b; text-align: center; }
.ar-stats > div > span { display: block; font-size: 20px; font-weight: 800; color: #1e293b; }
.ar-stats > div.is-warn > span { color: #c2410c; }
.ar-stats > div.is-bad > span { color: #dc2626; }
.ar-timeline { list-style: none; margin: 0; padding: 0; }
.ar-tl { display: flex; gap: 10px; padding: 0 0 12px; position: relative; }
.ar-tl:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: #e2e8f0; }
.ar-tl > .fa { flex: 0 0 20px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 13px; color: #fff; background: #94a3b8; position: relative; z-index: 1; }
.ar-tl--ask > .fa, .ar-tl--reply > .fa { background: #7c3aed; }
.ar-tl--escalate > .fa, .ar-tl--take_over > .fa { background: #ea580c; }
.ar-tl--genuine > .fa, .ar-tl--coach > .fa { background: #16a34a; }
.ar-tl--concern > .fa { background: #dc2626; }
.ar-tl--raised > .fa { background: #1f3a52; }
.ar-tl-h { font-size: 12.5px; color: #1e293b; }
.ar-tl-m { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.ar-tl-c { margin-top: 4px; padding: 6px 8px; font-size: 12px; color: #334155; background: #f8fafc; border-left: 2px solid #cbd5e1; }
.ar-decide { background: #fff; border: 1px solid #1f3a52; border-left-width: 4px; padding: 12px; margin-bottom: 12px; }
.ar-decide-t { font-size: 12px; font-weight: 800; color: #1f3a52; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.ar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ar-card { display: block; margin: 0; padding: 9px 10px; border: 1px solid #e2e8f0; border-left: 3px solid #cbd5e1; background: #fff; cursor: pointer; font-weight: 400; }
.ar-card input { display: none; }
.ar-card:hover { background: #f8fafc; }
.ar-card.is-on { background: #eff6ff; border-color: #1f3a52; box-shadow: inset 0 0 0 1px #1f3a52; }
.ar-card-t { display: block; font-size: 12.5px; font-weight: 700; color: #1e293b; }
.ar-card-h { display: block; margin-top: 2px; font-size: 11.5px; color: #64748b; line-height: 1.4; }
.ar-card--good { border-left-color: #16a34a; } .ar-card--good .fa { color: #16a34a; }
.ar-card--info { border-left-color: #2563eb; } .ar-card--info .fa { color: #2563eb; }
.ar-card--warn { border-left-color: #d97706; } .ar-card--warn .fa { color: #d97706; }
.ar-card--bad { border-left-color: #dc2626; } .ar-card--bad .fa { color: #dc2626; }
.ar-card--muted { border-left-color: #94a3b8; } .ar-card--muted .fa { color: #94a3b8; }
.ar-decide-f { margin-top: 10px; }
.ar-comment-l { font-size: 12px; font-weight: 700; color: #334155; }
.ar-decide textarea { border-radius: 0; margin-bottom: 8px; }
.ar-decide .btn { border-radius: 0; }
.ar-decide--reply { border-color: #7c3aed; }
.ar-question { padding: 8px 10px; margin-bottom: 10px; background: #f5f3ff; border-left: 3px solid #7c3aed; font-size: 13px; color: #1e293b; }
.ar-decide--admin { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-color: #cbd5e1; font-size: 12.5px; color: #334155; }
.ar-takeover-f { flex: 1 1 100%; }
.ar-takeover-f textarea { margin: 4px 0 8px; border-radius: 0; }
.ar-closed-note { margin-bottom: 12px; }
.ar-howto-body ol { padding-left: 18px; margin: 0; font-size: 13px; color: #1e293b; }
.ar-howto-body li { margin-bottom: 8px; }
.ar-howto-body ul { padding-left: 16px; margin-top: 4px; }
@media (max-width: 991px) { .ar-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
    .ar-cards, .ar-stats { grid-template-columns: 1fr 1fr; }
    .ar-c-meta { margin-left: 0; width: 100%; }
    .ar-filters .bootstrap-select.ar-f, .ar-filters .Zebra_DatePicker_Icon_Wrapper { width: calc(50% - 4px) !important; }
    .ar-filters .Zebra_DatePicker_Icon_Wrapper .ar-date { width: 100% !important; }
    .ar-filters .bootstrap-select.ar-f-wide { width: 100% !important; }
    /* tiles two by two: the list stays near the top */
    .ar-tiles > [class*="col-"]:nth-child(odd) { padding-right: 5px; }
    .ar-tiles > [class*="col-"]:nth-child(even) { padding-left: 5px; }
    .ar-tile { gap: 8px; padding: 10px 10px; margin-bottom: 10px; }
    .ar-tile > .fa { font-size: 17px; width: 18px; }
    .ar-tile-n { font-size: 20px; min-width: 0; }
    .ar-tile-l { font-size: 10px; letter-spacing: 0.2px; line-height: 1.25; }
}
.dash-review-banner { margin-bottom: 20px; align-items: center; }
.dash-review-banner .dash-review-btn { margin-left: 8px; border-radius: 0; font-weight: 700; }
#ar_modal .ar-tasks > thead > tr > th { background: #f8fafc; color: #64748b; border-bottom: 1px solid #e2e8f0; }

/* ===============================================================================
   Sticky Notes V2 (modules/views/user_notes.php, assets/js/user_notes.js;
   chips also on the dashboard panel and the footer drawer). Square corners;
   the note colour stays per-record inline.
   =============================================================================== */
.nt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nt-head .panel-title { margin: 0 0 4px; }
.nt-head p { margin: 0; color: #64748b; font-size: 13px; }
.nt-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; }
.nt-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.nt-search > .fa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 12px; }
.nt-search .form-control { padding-left: 28px; border-radius: 0; }
.nt-toolbar .bootstrap-select.nt-f { width: 160px !important; flex: 0 0 auto; }
.nt-toolbar .bootstrap-select.nt-f-wide { width: 220px !important; }
.nt-toolbar .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.nt-colours { min-height: 30px; padding: 0 4px; }
.nt-reset { font-size: 12px; font-weight: 600; margin-left: 4px; }
.nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; padding-top: 14px; }
.nt-grid > .note-empty, .nt-grid > .nt-loading { grid-column: 1 / -1; }
.nt-loading { padding: 30px; text-align: center; color: #64748b; }
.nt-card { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-left: 4px solid #eab308; border-radius: 0; transition: box-shadow 0.15s ease; }
.nt-card:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
.nt-card.is-pinned { box-shadow: inset 0 3px 0 rgba(31, 58, 82, 0.55); }
.nt-card.is-done { opacity: 0.75; }
.nt-card.is-done .nt-title, .nt-card.is-done .nt-body { text-decoration: line-through; }
.nt-card.is-flash { animation: ntFlash 0.9s ease 3; }
@keyframes ntFlash { 50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.45); } }
.nt-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; }
.nt-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13px; font-weight: 700; color: #1e293b; word-break: break-word; }
.nt-muted { color: #94a3b8; font-weight: 600; }
.nt-pin { color: rgba(30, 41, 59, 0.28); font-size: 14px; cursor: pointer; }
.nt-pin:hover { color: #1f3a52; }
.nt-pin.is-on { color: #1f3a52; }
.nt-pin.is-on .fa { transform: rotate(-35deg); }
.nt-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.nt-actions a { color: #475569; cursor: pointer; }
.nt-actions a:hover { color: #1f3a52; }
.nt-actions .nt-delete { color: #b02525; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 6px; }
.nt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 10.5px; font-weight: 700; line-height: 1.4; background: #fff; border: 1px solid #cbd5e1; color: #475569; white-space: nowrap; }
.nt-chip--high { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.nt-chip--low { background: #f8fafc; border-color: #cbd5e1; color: #64748b; }
.nt-chip--upcoming { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.nt-chip--today { background: #fff7ed; border-color: #fdba74; color: #c2410c; }
.nt-chip--overdue { background: #dc2626; border-color: #dc2626; color: #fff; }
.nt-chip--muted { color: #94a3b8; }
.nt-chip--pin { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.nt-body { padding: 2px 10px 8px; max-height: 190px; overflow-y: auto; font-size: 12px; line-height: 1.5; color: #334155; word-break: break-word; }
.nt-cl { list-style: none; margin: 0; padding: 2px 10px 4px; }
.nt-cl li { padding: 2px 0; font-size: 12px; color: #1e293b; }
.nt-cl label { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-weight: 400; cursor: pointer; }
.nt-cl input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; }
.nt-cl li.is-done span { text-decoration: line-through; color: #64748b; }
.nt-progress { display: flex; align-items: center; gap: 8px; padding: 2px 10px 8px; }
.nt-progress-bar { flex: 1 1 auto; height: 4px; background: rgba(15, 23, 42, 0.1); }
.nt-progress-bar > span { display: block; height: 100%; background: #16a34a; }
.nt-progress-t { font-size: 10.5px; font-weight: 700; color: #475569; white-space: nowrap; }
.nt-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 6px 10px; border-top: 1px solid rgba(0, 0, 0, 0.06); background: rgba(255, 255, 255, 0.35); }
.nt-card-foot .btn { border-radius: 0; font-weight: 700; }
.nt-date { font-size: 10px; color: #64748b; }
.nt-modal-dialog { width: 640px; max-width: calc(100% - 20px); }
.nt-cl-edit { list-style: none; margin: 0 0 6px; padding: 0; }
.nt-cl-edit li { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.nt-cl-edit li .form-control { flex: 1 1 auto; border-radius: 0; }
.nt-cl-edit li a { color: #64748b; padding: 0 3px; }
.nt-cl-edit li a:hover { color: #1f3a52; }
.nt-cl-edit li .nt-cl-del:hover { color: #b02525; }
.nt-cl-tick { cursor: pointer; color: #475569; width: 16px; text-align: center; }
.nt-cl-edit li[data-d="1"] .form-control { text-decoration: line-through; color: #64748b; }
.nt-cl-add { display: flex; gap: 6px; }
.nt-cl-add .form-control, .nt-cl-add .btn { border-radius: 0; }
.nt-prio-pick { display: flex; }
.nt-prio-pick label { margin: 0; cursor: pointer; }
.nt-prio-pick input { display: none; }
.nt-prio-pick span { display: inline-block; padding: 6px 14px; border: 1px solid #cbd5e1; margin-right: -1px; font-size: 12px; font-weight: 700; color: #475569; background: #fff; }
.nt-prio-pick input:checked + .nt-prio--high { background: #dc2626; border-color: #dc2626; color: #fff; }
.nt-prio-pick input:checked + .nt-prio--normal { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.nt-prio-pick input:checked + .nt-prio--low { background: #64748b; border-color: #64748b; color: #fff; }
.nt-remind { display: flex; align-items: center; gap: 6px; }
.nt-remind .Zebra_DatePicker_Icon_Wrapper { flex: 1 1 auto; }
.nt-remind .Zebra_DatePicker_Icon_Wrapper .form-control, .nt-remind > .form-control { border-radius: 0; background: #fff; }
.nt-remind #nt_remind_time { width: 120px; flex: 0 0 auto; }
.nt-remind-clear { color: #94a3b8; padding: 0 4px; }
.nt-remind-clear:hover { color: #b02525; }
.nt-pin-pick { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 600; cursor: pointer; }
.nt-pin-pick input { margin: 0; }
/* the dashboard panel and the footer drawer */
.nt-mini-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.nt-mini-chips .nt-chip { padding: 1px 5px; font-size: 9.5px; }
@media (max-width: 767px) {
    .nt-head { flex-wrap: wrap; }
    .nt-search { flex: 1 1 100%; max-width: none; }
    .nt-toolbar .bootstrap-select.nt-f { width: calc(50% - 4px) !important; }
    .nt-toolbar .bootstrap-select.nt-f-wide { width: 100% !important; }
    .nt-grid { grid-template-columns: 1fr; }
    .nt-remind { flex-wrap: wrap; }
}

/* ===============================================================================
   Presence & Activity (modules/views/presence_report.php, assets/js/presence_report.js).
   Flat tiles, one filter panel, square corners.
   =============================================================================== */
.pr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pr-head .panel-title { margin: 0 0 4px; }
.pr-head p { margin: 0; color: #64748b; font-size: 13px; }
.pr-tiles { margin-bottom: 4px; display: flex; flex-wrap: wrap; }
.pr-tiles > [class*="col-"] { display: flex; } /* equal heights: the 2 × 2 grid never staggers */
.pr-tiles .pr-tile { flex: 1 1 auto; }
.pr-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 15px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; color: #1e293b; }
.pr-tile > .fa { font-size: 22px; width: 26px; text-align: center; color: #94a3b8; }
.pr-tile > div { min-width: 0; }
.pr-tile-n { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.pr-tile-n--sm { font-size: 16px; display: flex; flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.pr-tile-l { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.4px; }
.pr-tile-s { display: block; font-size: 11.5px; color: #64748b; }
.pr-tile--active { border-left-color: #16a34a; } .pr-tile--active > .fa { color: #16a34a; }
.pr-tile--away { border-left-color: #d97706; } .pr-tile--away > .fa { color: #d97706; }
.pr-tile--total { border-left-color: #2563eb; } .pr-tile--total > .fa { color: #2563eb; }
.pr-tile--now { border-left-color: #1f3a52; } .pr-tile--now > .fa { color: #1f3a52; }
.pr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; vertical-align: middle; }
.pr-dot--active { background: #16a34a; } .pr-dot--away { background: #f59e0b; } .pr-dot--offline { background: #cbd5e1; }
.pr-filter { border-radius: 0; }
.pr-filter-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #f7f9fc !important; cursor: pointer; }
.pr-filter-head .panel-title { margin: 0; font-size: 13px; color: #1f3a52; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-filter > .pr-filter-head .panel-title, .pr-filter > .pr-filter-head .panel-title > .fa { color: #1f3a52 !important; } /* the theme paints panel titles white */
.pr-now { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
.pr-now small { font-size: 11px; font-weight: 600; color: #64748b; }
.pr-table > tbody > tr.pr-day-first > td { border-top: 2px solid #cbd5e1; }
.pr-filter-sum { margin-left: 8px; font-weight: 600; color: #475569; text-transform: none; letter-spacing: 0; }
.pr-filter-chev { color: #64748b; }
.pr-filter .form-group { margin-bottom: 12px; }
.pr-filter .bootstrap-select > .dropdown-toggle, .pr-filter .form-control { border-radius: 0; }
.pr-range { display: flex; gap: 6px; }
.pr-range .Zebra_DatePicker_Icon_Wrapper { flex: 1 1 50%; }
.pr-range .form-control { background: #fff; }
.pr-seg { display: flex; }
.pr-seg label { flex: 1 1 50%; margin: 0; cursor: pointer; }
.pr-seg input { display: none; }
.pr-seg span { display: block; padding: 7px 10px; margin-right: -1px; text-align: center; border: 1px solid #cbd5e1; background: #fff; font-size: 12px; font-weight: 700; color: #475569; white-space: nowrap; }
.pr-seg input:checked + span { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.pr-team-filters.is-off { opacity: 0.5; }
.pr-team-hint { margin: -4px 0 10px; font-size: 12px; color: #64748b; }
.pr-filter-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; border-top: 1px solid #eef2f6; padding-top: 12px; }
.pr-filter-actions .btn { border-radius: 0; font-weight: 700; }
.pr-reset { font-size: 12px; font-weight: 600; }
.pr-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-sec-head .panel-title { margin: 0; }
.pr-sec-meta { font-size: 12px; color: #64748b; }
.pr-table > thead > tr > th { background: #f8fafc; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.pr-table > tbody > tr > td { vertical-align: middle; font-size: 12.5px; }
.pr-table td small { display: block; color: #64748b; font-size: 11px; }
.pr-table tr.is-none td, .pr-table tr.is-off td { color: #94a3b8; }
.pr-active { color: #15803d; font-weight: 700; }
.pr-away { color: #b45309; font-weight: 700; }
.pr-muted { color: #94a3b8; }
.pr-bar { display: block; height: 3px; margin-top: 4px; margin-left: auto; width: 70px; background: #fde68a; }
.pr-bar > span { display: block; height: 100%; background: #16a34a; }
.pr-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 11px; font-weight: 700; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; white-space: nowrap; }
.pr-pill--on { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.pr-pill--away { background: #fffbeb; border-color: #fcd34d; color: #b45309; }
.pr-pill--off { color: #94a3b8; }
.pr-empty { padding: 30px 10px; text-align: center; color: #64748b; }
.pr-live-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #cbd5e1; background: #fff; color: #475569; font-size: 12px; font-weight: 700; text-decoration: none; }
.pr-chip:hover, .pr-chip:focus { text-decoration: none; color: #1f3a52; border-color: #1f3a52; }
.pr-chip.is-on { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.pr-chip b { font-weight: 800; }
.pr-live-search { position: relative; flex: 0 1 280px; }
.pr-live-search > .fa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 12px; }
.pr-live-search .form-control { padding-left: 28px; border-radius: 0; }
.pr-howto h5 { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: #1e293b; }
.pr-howto h5:first-child { margin-top: 0; }
.pr-howto ul { padding-left: 18px; margin: 0; font-size: 13px; color: #334155; }
.pr-howto li { margin-bottom: 4px; }
@media (max-width: 767px) {
    .pr-head { flex-wrap: wrap; }
    .pr-tiles > [class*="col-"]:nth-child(odd) { padding-right: 5px; }
    .pr-tiles > [class*="col-"]:nth-child(even) { padding-left: 5px; }
    .pr-tile { gap: 8px; padding: 10px; margin-bottom: 10px; }
    .pr-tile > .fa { font-size: 17px; width: 18px; }
    .pr-tile-n { font-size: 17px; }
    .pr-tile-n--sm { font-size: 14px; }
    .pr-tile-l { font-size: 10px; letter-spacing: 0.2px; }
    .pr-tile-s { font-size: 10.5px; }
    .pr-filter-sum { display: block; margin: 3px 0 0; white-space: normal; }
    .pr-filter-head .panel-title { white-space: normal; }
    .pr-live-search { flex: 1 1 100%; }
}

/* Hotels a day-plan change removed (quotations.js qhShowDropped) */
.qh-dropped { position: relative; margin-bottom: 12px; padding-right: 30px; }
.qh-dropped ul { margin: 4px 0 4px 16px; padding: 0; }
.qh-dropped-x { position: absolute; top: 8px; right: 10px; color: #991b1b; }
.qh-dropped-x:hover { color: #7f1d1d; }
#qh_dropped_save a { font-weight: 700; text-decoration: underline; }


/* Quotation Design → 8. About your company (quotation_settings.js) */
.qds-about .qds-field { margin-bottom: 12px; }
.qds-about .form-control { border-radius: 0; }
.qds-about .note-editor.note-frame { border-radius: 0; border-color: #cbd5e1; }
.qds-muted { font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.qds-why-row { margin-bottom: 6px; }
.qds-why-row .btn { border-radius: 0; }
.qds-why-add { border-radius: 0; font-weight: 700; }

/* Master popups (modules/views/masters.php — every master type) and option cards
   (a tick with its explanation, e.g. the Guest Document's Default). */
.crm-master-modal .modal-body { padding: 16px 18px 6px; }
.crm-master-modal .form-group { margin-bottom: 10px; }
.crm-master-modal .form-control { border-radius: 0; }
.crm-master-modal .crm-master-order-help { margin: -4px 0 12px; }
.crm-master-modal textarea.form-control { resize: vertical; min-height: 58px; }
.crm-master-modal-footer { display: flex; justify-content: flex-end; gap: 6px; margin: 0; padding: 10px 18px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.crm-master-modal-footer .btn { border-radius: 0; }
.crm-master-modal #errordiv .alert { border-radius: 0; margin-bottom: 12px; }
.crm-option-card { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 12px; padding: 10px 12px; font-weight: 400; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #cbd5e1; cursor: pointer; }
.crm-option-card:hover { border-color: #94a3b8; }
.crm-option-card input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #1f3a52; }
.crm-option-card-body strong { display: block; font-size: 13px; color: #0f172a; }
.crm-option-card-body strong .fa { color: #1f3a52; margin-right: 3px; }
.crm-option-card-body small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: #64748b; }
.crm-option-card:has(input:checked) { border-color: #1f3a52; border-left-color: #16a34a; background: #f0fdf4; }
.crm-option-card:has(input:checked) .crm-option-card-body strong .fa { color: #16a34a; }

/* House modals: a semantic colour (lost / confirm / follow-up…) stays as the header's
   top edge and icon, on the house dark header (commands/ui-messages-and-forms-pass-plan.md). */
.modal-content { border-radius: 0; }
.modal-header[class*="crm-modal-head--"] { border-top: 4px solid; }
.modal-header.crm-modal-head--danger { border-top-color: #ef4444; }
.modal-header.crm-modal-head--success { border-top-color: #22c55e; }
.modal-header.crm-modal-head--warning { border-top-color: #f59e0b; }
.modal-header.crm-modal-head--info { border-top-color: #6366f1; }
.modal-header.crm-modal-head--danger .modal-title > .fa:first-child { color: #fca5a5; }
.modal-header.crm-modal-head--success .modal-title > .fa:first-child { color: #86efac; }
.modal-header.crm-modal-head--warning .modal-title > .fa:first-child { color: #fcd34d; }
.modal-header.crm-modal-head--info .modal-title > .fa:first-child { color: #c4b5fd; }

/* Query → Guest documents: the document picker (Select Required Documents). */
.crm-doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 600px) { .crm-doc-grid { grid-template-columns: 1fr; } }
.crm-doc-pick { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; font-weight: 400; font-size: 12.5px; color: #1e293b; background: #fff; border: 1px solid #e2e8f0; cursor: pointer; }
.crm-doc-pick:hover { border-color: #94a3b8; }
.crm-doc-pick input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: #1f3a52; flex: 0 0 auto; }
.crm-doc-pick span { flex: 1 1 auto; min-width: 0; }
.crm-doc-pick:has(input:checked) { border-color: #1f3a52; background: #f0f7ff; font-weight: 600; }
.crm-doc-pick-default { flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 0 5px; color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; }
.crm-modal-divider { margin: 12px 0; border-top: 1px dashed #cbd5e1; }
#required_docs_summary_list .crm-line-hint { margin: 0; }

/* Quotation builder "add-ons & terms" popups keep the colour of their sidebar button. */
.modal-header.crm-modal-head--flight { border-top-color: #3b82f6; }
.modal-header.crm-modal-head--transfer { border-top-color: #10b981; }
.modal-header.crm-modal-head--insurance { border-top-color: #f59e0b; }
.modal-header.crm-modal-head--visa { border-top-color: #06b6d4; }
.modal-header.crm-modal-head--addons { border-top-color: #8b5cf6; }
.modal-header.crm-modal-head--terms { border-top-color: #be123c; }

.crm-req-docs { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; }
.crm-req-docs-title { flex: 0 0 auto; padding-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #334155; white-space: nowrap; }
.crm-req-docs-list { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.crm-req-doc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: 12px; font-weight: 600; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
@media (max-width: 600px) { .crm-req-docs { flex-direction: column; gap: 6px; } }

/* Query → guests: cards, documents, the Add / Edit popup's lookup (commands/guests-edit-lookup-and-ui-step2-plan.md). */
.crm-guest-card { margin: 0 0 12px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8; }
.crm-guest-card.is-primary { border-left-color: #16a34a; }
.crm-guest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.crm-guest-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.crm-guest-name { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.crm-guest-name .fa { color: #1f3a52; margin-right: 3px; }
.crm-guest-contacts { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: #475569; }
.crm-guest-contacts .fa { color: #94a3b8; margin-right: 2px; }
.crm-guest-contacts .is-hit { font-weight: 700; color: #1e3a8a; background: #dbeafe; padding: 0 5px; }
.crm-guest-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: 11px; font-weight: 700; border: 1px solid; }
.crm-guest-chip.is-primary { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.crm-guest-chip.is-done { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.crm-guest-chip.is-pending { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.crm-guest-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 0 auto; }
.crm-guest-actions .btn { border-radius: 0; }
.crm-guest-body { padding: 10px 12px; }
.crm-guest-body .crm-line-hint { margin: 0; }
.crm-guest-docs { margin: 0; font-size: 12.5px; }
.crm-guest-docs > thead > tr > th { padding: 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.crm-guest-docs > tbody > tr > td { padding: 8px; vertical-align: middle; border-top: 1px solid #f1f5f9; }
.crm-guest-docs tr.is-pending { background: #fffdf8; }
.crm-guest-doc-name { font-weight: 600; color: #1e293b; }
.crm-guest-doc-state { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; }
.crm-guest-docs tr.is-done .crm-guest-doc-state { color: #16a34a; }
.crm-guest-docs tr.is-pending .crm-guest-doc-state { color: #d97706; }
.crm-guest-file { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: #1d4ed8; }
.crm-guest-file-at { display: block; font-size: 10.5px; color: #94a3b8; }
.crm-guest-upload { display: flex; gap: 6px; align-items: center; margin: 0; }
.crm-guest-upload .form-control { max-width: 320px; height: 30px; padding: 3px 6px; border-radius: 0; }
.crm-guest-upload .btn { border-radius: 0; }
.crm-guest-docs .btn { border-radius: 0; }
.crm-guest-empty { padding: 36px 15px; text-align: center; background: #fff; border: 1px dashed #cbd5e1; }
.crm-guest-empty > .fa { font-size: 36px; color: #94a3b8; }
.crm-guest-empty h4 { margin: 10px 0 4px; font-weight: 700; color: #334155; }
.crm-guest-empty p { margin: 0 0 12px; color: #64748b; }
.crm-guest-lookup { margin: -2px 0 12px; border: 1px solid #bfdbfe; background: #f8fbff; }
.crm-guest-lookup-head { padding: 6px 10px; font-size: 11.5px; font-weight: 700; color: #1e3a8a; background: #eff6ff; border-bottom: 1px solid #dbeafe; }
.crm-guest-match { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-top: 1px solid #e0ecff; }
.crm-guest-match:first-of-type { border-top: 0; }
.crm-guest-match-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: #0f172a; }
.crm-guest-match .btn { flex: 0 0 auto; border-radius: 0; }
.crm-guest-lookup-none { padding: 8px 10px; font-size: 12px; color: #475569; }
.crm-guest-lookup-none .fa { color: #16a34a; margin-right: 4px; }
@media (max-width: 600px) { .crm-guest-head, .crm-guest-match { flex-direction: column; align-items: stretch; } .crm-guest-actions { justify-content: flex-start; } .crm-guest-upload { flex-direction: column; align-items: stretch; } }

/* Lead workspace → Score Explanation: what the score knows (commands/guests-edit-lookup-and-ui-step2-plan.md, C). */
.crm-score-coverage { margin: 8px 0 12px; border: 1px solid #e2e8f0; }
.crm-score-coverage > div { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; font-size: 12px; border-top: 1px solid #f1f5f9; }
.crm-score-coverage > div:first-child { border-top: 0; }
.crm-score-coverage strong { flex: 0 0 86px; }
.crm-score-coverage em { font-style: normal; color: #64748b; }
.crm-score-coverage .is-known .fa { color: #16a34a; }
.crm-score-coverage .is-unknown .fa { color: #d97706; }
.crm-score-coverage .is-unsupported .fa { color: #94a3b8; }
.crm-score-coverage .fa { margin-top: 2px; }

/* Bootstrap alerts (save errors, results): square, with a coloured edge — the same family as the callouts. */
.alert { border-radius: 0; border-left-width: 4px; }
.alert-danger { border-left-color: #dc2626; }
.alert-warning { border-left-color: #ea580c; }
.alert-success { border-left-color: #16a34a; }
.alert-info { border-left-color: #0f766e; }

/* Callouts written without an inner <span> (older markup) get their label next to the icon. */
.crm-line-hint:not(:has(> span)) > i:first-child::after { display: inline-block; margin-left: 7px; padding: 1px 6px; font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.5; text-transform: uppercase; color: #fff; vertical-align: 2px; }
.crm-line-hint--info:not(:has(> span)) > i:first-child::after { content: "Tip"; background: #0f766e; }
.crm-line-hint--warning:not(:has(> span)) > i:first-child::after { content: "Check"; background: #ea580c; }
.crm-line-hint--danger:not(:has(> span)) > i:first-child::after { content: "Important"; background: #dc2626; }
.crm-line-hint--success:not(:has(> span)) > i:first-child::after { content: "OK"; background: #16a34a; }
.crm-line-hint:not(:has(> span)) > i:first-child { white-space: nowrap; }

/* The older .crm-callout family (sightseeing, activity rates…) gets the same labels as .crm-line-hint. */
.crm-callout > i:first-child + *::before { display: inline-block; margin-right: 7px; padding: 1px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.5; text-transform: uppercase; color: #fff; vertical-align: 1px; }
.crm-callout.crm-callout-info > i:first-child + *::before { content: "Tip"; background: #0f766e; }
.crm-callout.crm-callout-warning > i:first-child + *::before { content: "Check"; background: #ea580c; }
.crm-callout.crm-callout-danger > i:first-child + *::before { content: "Important"; background: #dc2626; }
.crm-callout.crm-callout-success > i:first-child + *::before { content: "OK"; background: #16a34a; }
.crm-callout { border-left-width: 4px; }
.crm-callout-info { background: #f0f9f8; border-color: #c7e6e2; border-left-color: #0f766e; color: #134e4a; }
.crm-callout-info > i { color: #0f766e; }

/* Offer Master (commands/quotation-offers-plan.md). */
.crm-offer-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.crm-offer-types .crm-option-card { margin: 0; }
.crm-offer-types .crm-option-card input[type="radio"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #1f3a52; }
.crm-offer-types .crm-option-card:has(input:checked) { border-color: #1f3a52; border-left-color: #2563eb; background: #f0f7ff; }
@media (max-width: 600px) { .crm-offer-types { grid-template-columns: 1fr; } }
.crm-offer-value { font-weight: 800; font-size: 13px; }
.crm-offer-value--pct { color: #1d4ed8; }
.crm-offer-value--flat { color: #166534; }
.crm-offer-chip--running { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.crm-offer-chip--upcoming { color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; }
.crm-offer-chip--expired { color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; }


.crm-qv-offer-who.is-blocked { color: #9a3412; }
.crm-qv-offer-who.is-blocked .fa { color: #dc2626; }

/* Sightseeing & Activities: a 0-night stop passed through on a day */
.qss-via { margin: 6px 0 2px 14px; padding-left: 10px; border-left: 3px solid #f0d58a; }
.qss-via-head { font-size: 12.5px; color: #8a5a00; padding: 4px 0; overflow: hidden; }
.qss-via-head .qss-day-tools { float: right; }
.qss-via-empty { font-size: 12px; padding: 2px 0 6px; }

/* Builder: the one Offers card — per option: prices, who chose what (highlighted), every offer, history */
.crm-qo-opt { border: 1px solid #dbe3ec; margin-bottom: 12px; background: #fff; }
.crm-qo-opt-head { padding: 9px 12px; background: #f4f7fa; border-bottom: 1px solid #dbe3ec; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; font-size: 13px; }
.crm-qo-opt-price { font-size: 12px; color: #475569; }
.crm-qo-opt-price b { color: #0f172a; font-size: 13px; }
.crm-qo-opt-sub { flex: 0 0 100%; font-size: 11px; color: #94a3b8; }
.crm-qo-status { padding: 8px 12px; font-size: 12.5px; color: #64748b; border-bottom: 1px solid #eef2f6; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-qo-status small { display: block; font-size: 11px; color: #4d7c5b; font-weight: 400; }
.crm-qo-status.is-chosen { color: #166534; background: #f0fdf4; border-bottom-color: #bbf7d0; }
.crm-qo-status.is-chosen .fa-check-circle { color: #16a34a; }
.crm-qo-reset { flex: 0 0 auto; }
.crm-qo-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #eef2f6; font-size: 12.5px; }
.crm-qo-row:last-child { border-bottom: 0; }
.crm-qo-row.is-chosen { background: #f0fdf4; box-shadow: inset 4px 0 0 #16a34a; }
.crm-qo-row.is-ended { opacity: .6; }
.crm-qo-row-main strong { color: #0f172a; }
.crm-qo-row-label { color: #64748b; }
.crm-qo-tags { margin-top: 3px; }
.crm-qo-tags:empty { display: none; }
.crm-qo-row-price { white-space: nowrap; text-align: right; font-weight: 700; color: #0f172a; }
.crm-qo-row-price small { display: block; font-weight: 400; color: #166534; font-size: 11px; }
.crm-qo-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; margin-right: 4px; text-transform: uppercase; letter-spacing: .02em; }
.crm-qo-tag--best { background: #fff4d6; color: #8a5a00; border: 1px solid #f0d58a; }
.crm-qo-tag--chosen { background: #16a34a; color: #fff; }
.crm-qo-tag--timer { background: #fff4d6; color: #8a5a00; border: 1px solid #f0d58a; text-transform: none; }
.crm-qo-tag--ended { background: #fee2e2; color: #b91c1c; }
.crm-qo-note { padding: 7px 12px; font-size: 11.5px; color: #64748b; background: #fafbfc; border-top: 1px solid #eef2f6; }
.crm-qo-note .fa { color: #dc2626; margin-right: 3px; }
.crm-qo-history { border-top: 1px solid #eef2f6; padding: 7px 12px; background: #fafbfc; }
.crm-qo-history-toggle { font-size: 11.5px; font-weight: 700; color: #475569; text-decoration: none; }
.crm-qo-history-list { margin-top: 6px; }
.crm-qo-hist { font-size: 12px; padding: 3px 0; }
.crm-qo-hist small { display: block; color: #94a3b8; margin-left: 17px; }
.crm-qo-hist--reset { color: #b45309; }
.crm-offer-chip--timer { background: #fff4d6; color: #8a5a00; border: 1px solid #f0d58a; }

/* Settings → System Settings (modules/views/app_settings.php, assets/js/app_settings.js): a group menu on the left,
   each group a numbered crm-qf card; every setting a row: label + (i), control, where the value comes from. */
.as-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.as-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 10px; }
.as-tools .btn, .as-search .form-control { border-radius: 0; }
.as-search { position: relative; }
.as-search > .fa { position: absolute; left: 10px; top: 10px; color: #94a3b8; }
.as-search .form-control { padding-left: 30px; width: 240px; }
.as-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 12px; }
.as-nav-select { display: none; border-radius: 0; margin-bottom: 10px; }
.as-nav-wrap { position: sticky; top: 70px; align-self: start; }
.as-nav-wrap .cfg-nav { position: static; }
.as-row .crm-qf-label { justify-content: flex-start; }
.as-lock { color: #94a3b8; font-size: 11px; margin-left: auto; }
.as-content { min-width: 0; }
.as-card { margin-bottom: 16px; }
.as-card .crm-qf-card-body { padding-bottom: 6px; }
.as-about { margin: 0 0 6px; font-size: 12px; color: #64748b; }
.as-row { padding: 10px 0 2px; border-top: 1px solid #eef2f7; transition: background 0.2s ease; }
.as-row:first-of-type { border-top: 0; }
.as-row .form-group { margin-bottom: 8px; }
.as-row.is-dirty { background: #fffbeb; box-shadow: inset 3px 0 0 #f59e0b; }
.as-row.is-reset .form-control { text-decoration: line-through; color: #94a3b8; }
.as-row.is-locked .control-label { color: #64748b; }
.as-key code { padding: 0; font-size: 10.5px; color: #94a3b8; background: transparent; }
.as-num .form-control, .as-row .form-control, .as-row .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.as-num .input-group-addon { border-radius: 0; font-size: 11.5px; color: #64748b; background: #f8fafc; }
.as-yesno .btn { border-radius: 0; min-width: 58px; font-weight: 600; }
.as-yesno .btn.active { background: #1f3a52; border-color: #1f3a52; color: #fff; box-shadow: none; }
.as-yesno .btn:disabled { opacity: 0.7; }
.as-range, .as-why { font-size: 11px; margin-top: 3px; }
.as-why.is-warn { color: #9a3412; }
.as-meta { font-size: 11.5px; color: #64748b; }
.as-meta { overflow-wrap: break-word; min-width: 0; }
.as-meta > div { margin-top: 3px; }
.as-default { line-height: 1.35; }
.as-row .bootstrap-select { max-width: 100%; }
.as-badge { display: inline-block; padding: 1px 8px; font-size: 10.5px; font-weight: 700; border: 1px solid; letter-spacing: 0.2px; cursor: help; }
.as-badge.is-default { color: #64748b; background: #f8fafc; border-color: #cbd5e1; }
.as-badge.is-env { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.as-badge.is-saved { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }
.as-badge.is-server { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.as-links a { margin-right: 12px; font-weight: 600; font-size: 11.5px; }
.as-tag { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: 0.3px; text-transform: uppercase; border: 1px solid; vertical-align: 1px; }
.as-tag--high { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.as-tag--lock { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; margin: 0; }
.as-empty { padding: 30px; text-align: center; color: #94a3b8; background: #fff; border: 1px solid #e2e8f0; }
.as-summary { margin: 8px 0 12px; font-size: 12.5px; text-align: left; }
.as-summary th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; }
.qb-savebar-state.is-dirty { color: #b45309; }
@media (max-width: 991px) {
    .as-layout { grid-template-columns: 1fr; }
    .as-nav-select { display: block; }
    .as-nav { display: none; }
    .as-search .form-control { width: 100%; }
    .as-tools { width: 100%; }
    .as-search { flex: 1; }
}

/* Header panel — reminders & the latest 10 notifications (updateNoticeDropdown in application.js) */
.dm-notice.crm-np { width: 390px; max-width: 94vw; padding: 0; border-radius: 6px; border: 1px solid #d3d7de; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16); overflow: hidden; background: #fff; }
.crm-np-tabs { margin: 0; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.crm-np-tabs > li > a { border: 0 !important; border-radius: 0 !important; margin: 0; padding: 10px 8px; font-size: 12px; font-weight: 700; color: #64748b; text-align: center; cursor: pointer; background: transparent !important; }
.crm-np-tabs > li.active > a { color: #1e293b; box-shadow: inset 0 -2px 0 #2574ab; }
.crm-np-count { font-weight: 600; color: #94a3b8; }
.crm-np-content { max-height: 420px; overflow-y: auto; background: #f8fafc; padding: 0; }
.crm-np-content .tab-pane { padding: 0; }
.crm-np-empty { padding: 28px 12px; text-align: center; font-size: 12.5px; color: #94a3b8; }
.crm-np-empty .fa { display: block; font-size: 26px; margin-bottom: 6px; color: #cbd5e1; }
.crm-np-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 11.5px; color: #64748b; background: #fff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 3; }
.crm-np-bar b { color: #dc2626; }
.crm-np-markall { border: 0; background: transparent; color: #2574ab; font-weight: 700; font-size: 11.5px; cursor: pointer; padding: 0; }
.crm-np-markall:hover { text-decoration: underline; }
.crm-np-item { display: flex; gap: 10px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #eef2f6; border-left: 3px solid transparent; position: relative; }
.crm-np-item.is-unread { background: #f1f7fd; border-left-color: #2574ab; }
.crm-np-item.is-urgent { border-left-color: #ef4444; background: #fff7f7; }
.crm-np-item.is-read { background: #fff; }
.crm-np-item.is-read .crm-np-title { font-weight: 500; color: #64748b; }
.crm-np-item.is-read .crm-np-msg { color: #94a3b8; }
.crm-np-item.is-read .crm-np-ico { opacity: .55; }
.crm-np-ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; margin-top: 1px; }
.crm-np-ico .fa { margin: 0; padding: 0; width: auto; height: auto; border: 0; opacity: 1; line-height: 1; }
.crm-np-body { flex: 1 1 auto; min-width: 0; }
.crm-np-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.crm-np-chip { color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 3px; }
.crm-np-chip--danger { background: #dc2626 !important; }
.crm-np-prio, .crm-np-when { font-size: 10.5px; color: #94a3b8; margin-left: auto; }
.crm-np-when { margin-left: 0; }
.crm-np-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; margin-left: auto; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(239, 68, 68, .2); }
.crm-np-read { border: 1px solid #cbd5e1; background: #fff; color: #64748b; border-radius: 50%; width: 20px; height: 20px; padding: 0; font-size: 10px; line-height: 18px; text-align: center; cursor: pointer; flex: 0 0 auto; }
.crm-np-read:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
.crm-np-title { display: block; font-size: 12.5px; font-weight: 700; color: #1e293b; line-height: 1.35; text-decoration: none; }
.crm-np-title:hover { color: #2574ab; text-decoration: none; }
.crm-np-msg { font-size: 11.5px; color: #64748b; line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-np-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: #94a3b8; }
.crm-np-go { font-weight: 700; color: #2574ab; text-decoration: none; }
.crm-np-go:hover { text-decoration: underline; }

/* Lists: a row's code / title open the builder */
a.crm-row-link { color: inherit; text-decoration: none; }
a.crm-row-link:hover strong, a.crm-row-link:hover { color: #2574ab; text-decoration: underline; }

/* Assign Lead / Bulk Assign — one family */
.crm-assign-sub { font-size: 12px; color: #cbd5e1; margin-top: 3px; }
.modal-header .crm-assign-sub { color: rgba(255, 255, 255, .78); }
.crm-assign-card.is-blocked { border-left-color: #dc2626; background: #fef2f2; }
.crm-assign-card.is-blocked > i { color: #dc2626; }
.crm-assign-card-mgr { margin-top: 5px; font-size: 11.5px; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 4px 8px; }
.crm-assign-card-warn { margin-top: 5px; font-size: 11.5px; color: #991b1b; background: #fee2e2; border: 1px solid #fecaca; padding: 4px 8px; }
.crm-assign-note { margin: 8px 0 0; font-size: 11.5px; color: #64748b; }
.crm-assign-note .fa { color: #2574ab; }
.crm-bulk-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: -6px 0 14px; }
.crm-bulk-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; background: #eef2f6; border: 1px solid #dbe3ec; color: #1f3a52; }
.crm-bulk-chip--more { background: #fff; color: #64748b; cursor: help; }
#modalBulkAssign .crm-assign-current > div { flex: 1 1 25%; }

/* Advanced Filters panel — the same on every list page (crm_af_open / crm_af_close in library/function.php) */
.panel.crm-af { margin-bottom: 15px; }
.crm-af-head { padding: 11px 15px; cursor: pointer; user-select: none; }
.crm-af-head:hover { background: #f8fafc; }
.crm-af-title { margin: 0; font-size: 13px; font-weight: 700; color: #1f3a52; display: flex; align-items: center; gap: 6px; }
.crm-af-title .fa-filter { color: #2574ab; }
.crm-af-count { font-size: 10px; font-weight: 700; color: #fff; background: #2574ab; padding: 1px 7px; border-radius: 10px; }
.crm-af-chevron { margin-left: auto; font-size: 11px; color: #64748b; transition: transform .2s ease; transform: rotate(180deg); }
.crm-af-head.collapsed .crm-af-chevron { transform: none; }
.crm-af-body { padding: 14px 15px 12px; border-top: 1px solid #e2e8f0; }
.crm-af-body .control-label { font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 4px; }
.crm-af-body .row { margin-bottom: 10px; }
.crm-af-body .row:last-of-type { margin-bottom: 0; }
.crm-af-actions { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }

/* Rate sheet: price sets inside a season box */
.crm-rate-sets { padding: 0; }
.crm-rate-set { border-top: 1px solid #e2e8f0; }
.crm-rate-set:first-child { border-top: 0; }
.crm-rate-set-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; background: #fafbfc; border-bottom: 1px solid #eef2f6; min-height: 38px; }
.crm-rate-set-head:has(.crm-rate-set-title:empty):has(.crm-rate-set-tools:empty) { display: none; }
.crm-rate-set-title { font-size: 12px; color: #334155; }
.crm-rate-set-range { display: inline-block; font-size: 11px; font-weight: 600; background: #eef2f6; border: 1px solid #dbe3ec; padding: 1px 7px; margin-right: 4px; }
.crm-rate-set-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.crm-rate-set-tools .rate-set-copy { width: 170px; }
.crm-rate-set-pct { display: inline-flex; gap: 4px; align-items: center; }
.crm-rate-set-pct input.rate-set-pct { width: 78px; }
.crm-rate-box-split, .crm-rate-box-compare { margin-left: auto; font-size: 12px; }
.crm-rate-set-pv { margin-left: 8px; font-size: 11.5px; color: #475569; }
.crm-rate-set-pv strong { color: #1f3a52; }
.crm-rate-set-new { font-size: 11.5px; color: #92400e; }
.crm-rate-set.crm-rate-set-new-list { border-left: 3px solid #f59e0b; }
.crm-rate-set.crm-rate-set-new-list > .crm-rate-set-head { background: #fffbeb; }
.crm-rate-set.crm-rate-set-flash > .crm-rate-set-head { background: #fef3c7; box-shadow: inset 0 0 0 2px #f59e0b; transition: background 0.4s; }
.crm-rate-set-allrows { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 11.5px; font-weight: 600; color: #475569; white-space: nowrap; }
.crm-rate-set-allrows input { margin: 0; }
#rate-new-banner ul { margin-bottom: 0; }
.crm-season-dates-table .rate-set-select { min-width: 110px; }

/* Client date warnings (ClientDates::renderChips): small, high-priority, square */
.crm-dw-strip { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 8px; }
.crm-dw { display: inline-block; font-size: 11px; line-height: 1.35; padding: 2px 7px; border: 1px solid #cbd5e1; background: #f1f5f9; color: #334155; border-radius: 0; max-width: 100%; }
.crm-dw .fa { margin-right: 3px; }
.crm-dw-high { background: #fef2f2; border-color: #dc2626; color: #991b1b; font-weight: 600; }
.crm-dw-high b { font-weight: 700; }
.crm-dw-medium { background: #fffbeb; border-color: #d97706; color: #92400e; }
.crm-dw-info { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

/* Client profile + form (Clients page) — same family as the Query Details card and the guest cards */
.crm-cl-code { margin-left: 8px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); }
.crm-cl { background: #f8fafc; }
.crm-cl-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 0 12px; }
.crm-cl-who { flex: 1 1 auto; min-width: 200px; }
.crm-cl-who h4 { margin: 0 0 3px; font-size: 19px; font-weight: 700; color: #1e293b; }
.crm-cl-contact { display: flex; flex-wrap: wrap; gap: 3px 16px; font-size: 12.5px; color: #475569; }
.crm-cl-contact i { color: #94a3b8; margin-right: 4px; }
.crm-cl-edit { flex: 0 0 auto; }
.crm-cl-card { background: #fff; border: 1px solid #d3d7de; border-top: 3px solid #1f3a52; margin-bottom: 14px; }
.crm-cl-card-head { padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 12.5px; font-weight: 700; color: #1e293b; }
.crm-cl-card-head .fa { color: #1f3a52; margin-right: 5px; }
.crm-cl-kv { padding: 4px 12px 6px; }
.crm-cl-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #eef2f7; font-size: 12.5px; color: #1e293b; }
.crm-cl-row:last-child { border-bottom: 0; }
.crm-cl-row > span { flex: 0 0 96px; font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.crm-cl-row > div { flex: 1 1 auto; min-width: 0; }
.crm-cl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 0; vertical-align: 1px; }
.crm-cl-chip.is-ok { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.crm-cl-chip.is-warn { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.crm-cl-chip.is-bad { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.crm-cl-chip.is-info { color: #134e4a; background: #f0f9f8; border-color: #c7e6e2; }
.crm-cl-people { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.crm-cl-person { display: flex; align-items: center; gap: 8px; min-width: 230px; padding: 7px 10px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8; color: #1e293b; text-decoration: none; }
.crm-cl-person:hover { border-left-color: #1f3a52; background: #f8fafc; text-decoration: none; color: #1e293b; }
.crm-cl-person-av { flex: 0 0 auto; width: 30px; height: 30px; line-height: 30px; text-align: center; font-weight: 700; color: #fff; background: #1f3a52; }
.crm-cl-person-main { flex: 1 1 auto; min-width: 0; }
.crm-cl-person-main strong { display: block; font-size: 12.5px; }
.crm-cl-person-main small { color: #94a3b8; font-size: 10.5px; }
.crm-cl-empty { padding: 4px 2px; color: #64748b; font-size: 12.5px; }
.crm-cl-empty .fa { color: #94a3b8; margin-right: 4px; }
.crm-cl-table { margin: 0; font-size: 12.5px; background: #fff; border: 1px solid #e2e8f0; }
.crm-cl-table > thead > tr > th { padding: 7px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.crm-cl-table > tbody > tr > td { padding: 8px; border-top: 1px solid #f1f5f9; vertical-align: middle; }
#clientDetailTabs .badge { background: #1f3a52; margin-left: 3px; font-size: 10px; }
.crm-cl-sec { display: flex; align-items: center; gap: 6px; margin: 18px 0 10px; padding: 0 0 6px; border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: 700; color: #1e293b; text-transform: uppercase; letter-spacing: 0.3px; }
.crm-cl-sec .fa { color: #1f3a52; }
.crm-cl-sec small { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.crm-cl-sec--first { margin-top: 0; }
#modalClientForm .control-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }

/* Dashboard performance cards (Active CRM Time, Tasks, Queries, Leads) */
.crm-pf { margin-bottom: 20px; }
.crm-pf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; margin-bottom: 14px; background: #2574ab; color: #fff; }
.crm-pf-title { flex: 1 1 220px; min-width: 200px; }
.crm-pf-title h4 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; }
.crm-pf-title h4 .fa { margin-right: 6px; }
.crm-pf-title p { margin: 2px 0 0; font-size: 11.5px; color: rgba(255,255,255,0.88); }
.crm-pf-title strong { color: #ffe699; }
.crm-pf-vs { opacity: 0.8; }
.crm-pf-scope { display: flex; align-items: center; gap: 8px; }
.crm-pf-scope label { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: 0.85; }
.crm-pf-periods { display: flex; flex-wrap: wrap; gap: 2px; }
.crm-pf-period { border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff; padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 0; cursor: pointer; }
.crm-pf-period:hover { background: rgba(255,255,255,0.16); }
.crm-pf-period.is-on { background: #fff; color: #1f3a52; border-color: #fff; }
.crm-pf-link { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.crm-pf-link:hover { color: #ffe699; text-decoration: none; }
.crm-pf-live { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 14px; margin-bottom: 14px; background: #fff; border: 1px solid #d3d7de; font-size: 12px; color: #64748b; }
.crm-pf-live b { margin-left: 4px; color: #1e293b; font-family: monospace; font-size: 13px; }
.crm-pf-live .fa { margin-right: 3px; color: #94a3b8; }
.crm-pf-live .is-teal b { color: #259dab; }
.crm-pf-live .is-amber b { color: #d9822b; }
.crm-pf-grid.is-loading { opacity: 0.55; transition: opacity 0.15s; }
.crm-pf-card { background: #fff; border: 1px solid #d3d7de; border-top: 3px solid #1f3a52; margin-bottom: 15px; }
.crm-pf-card-head { padding: 9px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 13px; font-weight: 700; color: #1e293b; }
.crm-pf-card-head .fa { margin-right: 5px; }
.crm-pf-kpis { display: flex; flex-wrap: wrap; border-bottom: 1px solid #eef2f7; }
.crm-pf-kpi { flex: 1 1 100px; min-width: 100px; padding: 10px 12px; border-right: 1px solid #eef2f7; }
.crm-pf-kpi:last-child { border-right: 0; }
.crm-pf-kpi-label { display: block; font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.crm-pf-kpi strong { display: block; margin: 2px 0; font-size: 20px; line-height: 1.15; color: #1e293b; font-family: monospace; }
.crm-pf-kpi.is-bad strong { color: #dc2626; }
.crm-pf-kpi-foot { display: block; font-size: 10.5px; color: #94a3b8; }
.crm-pf-kpi-foot small { display: block; font-size: 10.5px; }
.crm-pf-delta { display: inline-block; margin-right: 4px; padding: 0 5px; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.crm-pf-delta.is-good { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.crm-pf-delta.is-bad { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.crm-pf-delta.is-flat { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }
.crm-pf-split { padding: 10px 14px; border-bottom: 1px solid #eef2f7; }
.crm-pf-split-title { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.crm-pf-split-items { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crm-pf-split-item { position: relative; flex: 1 1 120px; padding: 4px 8px 6px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 11.5px; color: #475569; overflow: hidden; }
.crm-pf-split-item b { margin-left: 5px; color: #1e293b; }
.crm-pf-split-item i { position: absolute; left: 0; bottom: 0; height: 3px; background: #94a3b8; }
.crm-pf-chart { padding: 10px 14px 6px; }
.crm-pf-chart-legend { margin-bottom: 8px; font-size: 10px; color: #818da7; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-pf-svg { position: relative; height: 175px; }
.crm-pf-attn { margin: 0; padding: 8px 14px; list-style: none; background: #fff7ed; border-top: 1px solid #fed7aa; font-size: 12px; color: #9a3412; }
.crm-pf-attn li { padding: 1px 0; }
.crm-pf-ok { padding: 8px 14px; font-size: 12px; color: #166534; background: #f0fdf4; border-top: 1px solid #bbf7d0; }
.crm-pf-team { padding: 8px 14px 10px; border-top: 1px solid #eef2f7; }
.crm-pf-team-toggle { border: 1px solid #cbd5e1; background: #fff; padding: 3px 10px; font-size: 11.5px; font-weight: 600; color: #1f3a52; border-radius: 0; }
.crm-pf-team-table { width: 100%; margin-top: 8px; font-size: 12px; }
.crm-pf-team-table th { padding: 5px 6px; font-size: 10px; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.crm-pf-team-table td { padding: 5px 6px; border-bottom: 1px solid #f1f5f9; }
.crm-pf-team-table th:not(:first-child), .crm-pf-team-table td:not(:first-child) { text-align: right; font-family: monospace; }
.crm-pf-team-table tr.is-bad td { background: #fef2f2; color: #991b1b; }

/* Accommodation: room groups, who stays here, capacity checks */
.qh-card--group { margin-left: 22px; border-left-color: #94a3b8; position: relative; }
.qh-card--group::before { content: ""; position: absolute; left: -14px; top: -10px; bottom: 50%; width: 11px; border-left: 2px solid #cbd5e1; border-bottom: 2px solid #cbd5e1; }
.qh-card--group .qh-card-head { background: #f1f5f9; }
.qh-pax-sub { display: block; font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
.qh-kid { border: 1px solid #cbd5e1; background: #fff; color: #64748b; padding: 3px 9px; margin-right: 4px; font-size: 12px; font-weight: 700; border-radius: 0; }
.qh-kid.is-on { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.qh-capf { position: relative; display: block; }
.qh-capf .form-control { padding-right: 24px; }
.qh-capf-ico { display: none; position: absolute; right: 7px; top: 8px; color: #d97706; font-size: 13px; cursor: help; }
.qh-capf.is-warn .qh-capf-ico { display: block; }
.qh-capf.is-warn .form-control { border-color: #f59e0b; background: #fffbeb; }
.qh-capf-max { display: block; margin-top: 2px; font-size: 10.5px; color: #94a3b8; cursor: help; }
.qh-capf.is-warn .qh-capf-max { color: #b45309; font-weight: 700; }
.qh-req { color: #dc2626; font-weight: 700; }
.qh-stay-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -2px 0 14px; padding: 0 2px; font-size: 12px; }
.qh-stay-foot:empty { display: none; }
.qh-place { font-size: 12px; font-weight: 600; padding: 3px 9px; border: 1px solid; }
.qh-place small { font-weight: 400; }
.qh-place.is-ok { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.qh-place.is-warn { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.qh-place.is-bad { color: #991b1b; background: #fef2f2; border-color: #fecaca; }

/* Guest booking link card (Query page) */
.crm-bl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.crm-bl-chip { display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 0; }
.crm-bl-chip.is-ok { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.crm-bl-chip.is-wait { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.crm-bl-chip.is-bad { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.crm-bl-chip.is-off { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }
.crm-bl-note { font-size: 11.5px; color: #64748b; margin: 2px 0 8px; }
.crm-bl-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-bl-actions .btn { border-radius: 0; }
.crm-bl-scope { margin: 4px 0 8px; font-size: 11.5px; color: #64748b; } .crm-bl-scope select { margin-left: 4px; border-radius: 0; }

/* Accommodation — who sleeps where: the trip's split, group tags, the one-line rooms & beds summary */
.qh-split { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 9px 12px; background: #f0fdfa; border: 1px solid #99f6e4; border-left: 3px solid #0f766e; }
.qh-split-label { font-size: 11px; font-weight: 700; color: #0f766e; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 4px; }
.qh-split-pill { font-size: 12px; color: #134e4a; background: #fff; border: 1px solid #99f6e4; padding: 2px 9px; }
.qh-split-pill b { color: #0f766e; margin-right: 3px; }
.qh-split-own { font-size: 11.5px; font-weight: 600; color: #9a3412; }
.qh-split-hint { flex-basis: 100%; font-size: 12px; color: #475569; }
.qh-gtag { font-size: 11.5px; font-weight: 700; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; padding: 1px 8px; }
.qh-own-tag { font-size: 10.5px; font-weight: 700; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; padding: 1px 7px; text-transform: uppercase; letter-spacing: 0.3px; }
.qh-split-stay, .qh-split-reset { font-weight: 600; }
.qh-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 0; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12.5px; color: #1e293b; }
.qh-sum .fa-bed { color: #1f3a52; }
.qh-sum-for { color: #166534; font-size: 12px; }
.qh-sum-warn, .qh-sum.is-warn .qh-sum-for { color: #b45309; font-weight: 700; cursor: help; }
.qh-sum.is-warn { background: #fffbeb; border-color: #fde68a; }
.qh-sum-edit { margin-left: auto; font-size: 12px; font-weight: 600; }
.qh-grid-col.is-off { color: #cbd5e1; }
.qh-grid-na { color: #cbd5e1; font-weight: 700; padding-left: 6px; }
.qh-invalid, .bootstrap-select.qh-invalid > .dropdown-toggle { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15); background: #fef2f2; }
.qhs-help { margin: 0 0 10px; font-size: 12.5px; color: #475569; }
.qhs-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.qhs-presets-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 4px; }
.qhs-group { border: 1px solid #e2e8f0; border-left: 3px solid #0f766e; margin-bottom: 8px; background: #fff; }
.qhs-gh { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.qhs-gtext { font-size: 12px; color: #475569; }
.qhs-del { margin-left: auto; border: 0; background: transparent; color: #94a3b8; }
.qhs-del:hover { color: #b91c1c; }
.qhs-gb { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 22px; padding: 8px 10px; }
.qhs-f .form-control { width: 80px; border-radius: 0; }
.qh-kid.is-else { opacity: 0.45; }
.qhs-status { margin-top: 10px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; border: 1px solid; }
.qhs-status.is-ok { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.qhs-status.is-bad { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }

/* Text quote modal (quotations.js) */
.tq-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-bottom: 8px; }
.tq-check { margin: 0; font-weight: 600; color: #334155; cursor: pointer; }
.tq-check input { margin-right: 5px; vertical-align: -1px; }
.tq-check small { font-weight: 400; color: #64748b; }
.tq-option { display: inline-flex; align-items: center; gap: 8px; }
.tq-option label { margin: 0; font-weight: 600; color: #334155; }
.tq-option .form-control { width: auto; min-width: 150px; border-radius: 0; }
.tq-parts { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 10px; margin-bottom: 8px; background: #f8fafc; border: 1px solid #e2e8f0; }
.tq-parts .tq-check { font-weight: 400; font-size: 12.5px; }
.tq-tabs { margin-top: 10px; }
.tq-panes { border: 1px solid #ddd; border-top: 0; padding: 10px; }
#tq_wa { font-family: Menlo, Consolas, monospace; font-size: 12.5px; border-radius: 0; resize: vertical; }
.tq-mail { min-height: 300px; max-height: 420px; overflow: auto; padding: 8px 10px; border: 1px solid #e2e8f0; background: #fff; }
.tq-mail:focus { outline: 0; border-color: #94a3b8; }
.tq-hint { margin: 8px 0 0; font-size: 11.5px; color: #64748b; }

/* State Markup page (state_markup.js) — the System Settings look: numbered cards, a list + editor, a save bar */
.sm-mode { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; color: #334155; background: #f1f5f9; border: 1px solid #cbd5e1; }
.sm-mode.is-on { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.sm-mode.is-off { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.sm-card { margin-bottom: 16px; }
.sm-sub { font-size: 11.5px; color: #64748b; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sm-toolbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; padding-bottom: 12px; }
.sm-field { min-width: 0; }
.sm-field > label:first-child { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #475569; }
.sm-field:first-child { flex: 0 1 260px; }
.sm-field--search { flex: 1 1 220px; }
.sm-field--search .as-search .form-control { width: 100%; }
.sm-field--only { padding-bottom: 7px; }
.sm-check { margin: 0; font-weight: 600; font-size: 12.5px; color: #334155; cursor: pointer; }
.sm-check input { margin-right: 5px; vertical-align: -1px; }
.sm-views .btn { border-radius: 0; font-weight: 600; }
.sm-views .btn.active { background: #1f3a52; border-color: #1f3a52; color: #fff; box-shadow: none; }

.sm-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; min-height: 420px; }
.sm-list-wrap { border-right: 1px solid #e2e8f0; background: #fbfcfd; display: flex; flex-direction: column; min-width: 0; }
.sm-bulk { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.sm-bulk-actions .btn { border-radius: 0; }
.sm-list { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.sm-list li { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #eef2f7; cursor: pointer; border-left: 3px solid transparent; }
.sm-list li:hover { background: #f1f5f9; }
.sm-list li.is-active { background: #eaf1f8; border-left-color: #1f3a52; }
.sm-list li.is-dirty .sm-name:after { content: ' •'; color: #d97706; font-weight: 700; }
.sm-list .sm-pick { margin: 0; flex: 0 0 auto; }
.sm-list .sm-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-list .sm-glance { flex: 0 0 auto; }
.sm-list-empty { color: #64748b; font-size: 12.5px; cursor: default !important; }
.sm-bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 18px; }
.sm-bars i { display: block; width: 4px; min-height: 2px; background: #cbd5e1; }
.sm-bars i.is-set { background: #1f3a52; }
.sm-pills { display: inline-flex; gap: 3px; }
.sm-pills span { min-width: 30px; padding: 0 4px; font-size: 10.5px; line-height: 17px; text-align: center; font-weight: 700; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; }
.sm-pills span.is-set { color: #1f3a52; background: #e0ecf7; border-color: #b9d0e6; }

.sm-editor { padding: 14px 18px 18px; min-width: 0; }
.sm-editor-empty { color: #64748b; padding: 40px 0; text-align: center; }
.sm-ed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.sm-ed-title { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; }
.sm-ed-title small { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: #64748b; }
.sm-ed-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sm-ed-actions .btn { border-radius: 0; }
.sm-copyfrom { display: inline-flex; align-items: center; gap: 4px; }
.sm-copyfrom .form-control { width: 170px; height: 30px; border-radius: 0; font-size: 12.5px; padding: 3px 6px; }

.sm-seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sm-season { border: 1px solid #e2e8f0; border-top: 3px solid #94a3b8; background: #fff; padding: 12px 14px; }
.sm-season--OFF { border-top-color: #64748b; }
.sm-season--ON { border-top-color: #16a34a; }
.sm-season--PEAK { border-top-color: #d97706; }
.sm-season h6 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #334155; }
.sm-season .sm-big { display: flex; align-items: center; gap: 6px; }
.sm-season .sm-big .form-control { width: 110px; font-size: 20px; font-weight: 700; height: 44px; text-align: right; border-radius: 0; }
.sm-season .sm-big span { font-size: 18px; color: #64748b; }
.sm-ranges { margin: 10px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: #64748b; line-height: 1.6; }
.sm-ranges li { border-top: 1px dashed #eef2f7; }
.sm-ranges li:first-child { border-top: 0; }
.sm-ranges b { color: #334155; font-weight: 600; }
.sm-ranges .sm-none { color: #b45309; }
.sm-nocal { margin-top: 12px; }

.sm-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sm-month { border: 1px solid #e2e8f0; background: #fff; padding: 8px 10px 10px; position: relative; overflow: hidden; }
.sm-month label { display: block; margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #475569; }
.sm-month .sm-pct { display: flex; align-items: center; gap: 4px; }
.sm-month .form-control { height: 34px; font-size: 15px; font-weight: 700; text-align: right; border-radius: 0; }
.sm-month .sm-heat { position: absolute; left: 0; bottom: 0; height: 3px; background: #1f3a52; opacity: .75; transition: width .15s; }
.sm-pct span { color: #64748b; font-size: 12px; }
.sm-quick { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 9px 12px; margin-bottom: 12px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12.5px; }
.sm-quick .form-control { width: 70px; height: 28px; padding: 2px 6px; text-align: right; border-radius: 0; display: inline-block; }
.sm-quick select.form-control { width: 70px; text-align: left; padding: 2px 2px; }
.sm-quick .btn { border-radius: 0; }
.sm-quick-group { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sm-quick-group b { color: #334155; }
.sm-input.is-bad, .sm-quick .form-control.is-bad { border-color: #dc2626; background: #fef2f2; }
.sm-input.is-dirty, .is-dirty > .sm-input { background: #fffbeb; border-color: #f59e0b; }

.sm-wrap { overflow: auto; max-height: 640px; }
.sm-table { background: #fff; margin-bottom: 12px; }
.sm-table th { position: sticky; top: 0; z-index: 2; background: #f1f5f9; font-size: 12px; text-align: center; white-space: nowrap; }
.sm-table th .fa-magic { color: #94a3b8; margin-left: 3px; }
.sm-table th a:hover .fa-magic, .sm-table td a:hover .fa-magic { color: #1f3a52; }
.sm-table th:first-child, .sm-table td:first-child { position: sticky; left: 0; z-index: 3; background: #f8fafc; text-align: left; white-space: nowrap; font-weight: 600; min-width: 190px; }
.sm-table th:first-child { z-index: 4; }
.sm-table td { vertical-align: middle !important; padding: 2px 4px !important; }
.sm-table .sm-input { width: 64px; height: 28px; padding: 2px 6px; text-align: right; border-radius: 0; font-size: 12.5px; }
.sm-table--season .sm-input { width: 90px; }
.sm-table td.h1 { background: #eff6fb; } .sm-table td.h2 { background: #dbeaf6; } .sm-table td.h3 { background: #bfd8ee; } .sm-table td.h4 { background: #9cc2e3; }
.sm-table td .sm-fill-row { margin-left: 6px; color: #94a3b8; }
.sm-table tr.is-hidden { display: none; }

.sm-copy-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; font-size: 12px; }
.sm-copy-tools .as-search .form-control { width: 210px; }
.sm-copy-list { list-style: none; margin: 0 0 4px; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid #e2e8f0; }
.sm-copy-list li { padding: 5px 10px; border-bottom: 1px solid #eef2f7; }
.sm-copy-list li label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; }
.sm-copy-list li small { margin-left: auto; color: #94a3b8; font-weight: 400; }
@media (max-width: 991px) {
  .sm-layout { grid-template-columns: 1fr; }
  .sm-list-wrap { border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .sm-list { max-height: 220px; }
  .sm-seasons { grid-template-columns: 1fr; }
  .sm-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .sm-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-table th.sm-th-state { color: #334155; background: #f1f5f9; }

/* Email Design page (email_design.js) — cards on the left, the real mail on the right */
.ed-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.ed-form .ed-card { margin-bottom: 16px; }
.ed-loading { padding: 40px 0; color: #64748b; text-align: center; }
.ed-sub { font-size: 11.5px; color: #64748b; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ed-field { margin-bottom: 12px; }
.ed-field > label, .ed-color > label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #475569; }
.ed-field > label small { font-weight: 400; color: #94a3b8; }
.ed-help { margin-top: 3px; font-size: 11.5px; color: #64748b; }
.ed-form .form-control { border-radius: 0; }
.ed-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ed-pals { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-pal { display: inline-flex; flex-direction: column; align-items: stretch; width: 78px; padding: 4px; background: #fff; border: 1px solid #cbd5e1; border-radius: 0; cursor: pointer; }
.ed-pal:hover:not(:disabled) { border-color: #1f3a52; }
.ed-pal span { display: block; height: 12px; }
.ed-pal em { margin-top: 3px; font-size: 11px; font-style: normal; color: #475569; }
.ed-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-bottom: 8px; }
.ed-color { margin-bottom: 10px; }
.ed-color-in { display: flex; gap: 6px; }
.ed-swatch { width: 40px; height: 30px; padding: 0; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; border-radius: 0; }
.ed-hex { width: 100px; font-family: Menlo, Consolas, monospace; text-transform: uppercase; }
.ed-hex.is-bad { border-color: #dc2626; background: #fef2f2; }
.ed-seg .btn { border-radius: 0; font-weight: 600; }
.ed-seg .btn.active { background: #1f3a52; border-color: #1f3a52; color: #fff; box-shadow: none; }
.ed-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.ed-opt, .ed-check { margin: 0; font-weight: 400; font-size: 13px; color: #334155; cursor: pointer; }
.ed-opt input, .ed-check input { margin-right: 6px; vertical-align: -1px; }
.ed-check { display: block; margin-bottom: 6px; }
.ed-vtabs { margin-top: 12px; }
.ed-vbody { border: 1px solid #ddd; border-top: 0; padding: 12px; margin-bottom: 8px; }
.ed-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ed-role label { display: block; margin: 0 0 2px; font-size: 11.5px; color: #64748b; }
.ed-role { margin-bottom: 8px; }
.ed-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; color: #64748b; }
.ed-chip { padding: 1px 8px; font-family: Menlo, Consolas, monospace; font-size: 11.5px; color: #1f3a52; background: #e0ecf7; border: 1px solid #b9d0e6; border-radius: 0; cursor: pointer; }
.ed-chip:hover:not(:disabled) { background: #cfe1f2; }
.ed-edited { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 10px; font-weight: 700; line-height: 1.6; text-transform: uppercase; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.ed-wreset { font-weight: 400; font-size: 11.5px; margin-left: 6px; }

.ed-preview-col { position: sticky; top: 70px; min-width: 0; }
.ed-pv-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-top: 3px solid #1f3a52; }
.ed-pv-pick { flex: 1 1 200px; min-width: 0; }
.ed-pv-pick label { display: block; margin: 0 0 3px; font-size: 11.5px; font-weight: 700; color: #475569; }
.ed-pv-bar .form-control, .ed-pv-bar .btn { border-radius: 0; }
.ed-pv-toggle .btn.active { background: #1f3a52; border-color: #1f3a52; color: #fff; box-shadow: none; }
.ed-pv-stage { max-height: 640px; overflow: auto; padding: 16px 8px; background: #dfe3e8; border: 1px solid #e2e8f0; border-top: 0; text-align: center; transition: opacity .15s; }
.ed-pv-stage.is-busy { opacity: .6; }
.ed-pv-stage iframe { max-width: 100%; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .18); }
.ed-pv-stage.is-phone iframe { box-shadow: 0 0 0 8px #111827, 0 4px 16px rgba(15, 23, 42, .3); }
.ed-pv-stage.is-dark iframe { filter: invert(1) hue-rotate(180deg); }
.ed-pv-tabs { margin-top: 12px; }
.ed-pv-tabs-body { border: 1px solid #ddd; border-top: 0; padding: 12px; background: #fff; }
.ed-badge { display: inline-block; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 17px; text-align: center; font-weight: 700; color: #fff; background: #94a3b8; }
.ed-badge.is-ok { background: #16a34a; } .ed-badge.is-warning { background: #d97706; } .ed-badge.is-error { background: #dc2626; }
.ed-issues { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12.5px; }
.ed-issues li { padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
.ed-issues .is-error { color: #b91c1c; } .ed-issues .is-warning { color: #92400e; }
.ed-ok { color: #166534; font-size: 13px; margin-bottom: 6px; }
.ed-meta { font-size: 11.5px; color: #64748b; }
#ed_text { max-height: 260px; overflow: auto; margin: 0; font-size: 12px; white-space: pre-wrap; background: #f8fafc; border-radius: 0; }
@media (max-width: 1199px) { .ed-layout { grid-template-columns: 1fr; } .ed-preview-col { position: static; } }
@media (max-width: 560px) { .ed-colors, .ed-grid2, .ed-roles, .ed-opts { grid-template-columns: 1fr; } }

/* A task nobody completes by hand (system-controlled, or on a Lost / Cancelled query): a small note instead of the Complete button (crm_task_note / crmTaskNote) */
.crm-task-note { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 4px 10px 4px 6px; text-align: left; line-height: 1.25; color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-left: 3px solid #2563eb; border-radius: 3px; cursor: help; white-space: nowrap; }
.crm-task-note .crm-tn-ico { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #dbeafe; color: #2563eb; font-size: 11px; }
.crm-task-note .crm-tn-txt { display: flex; flex-direction: column; min-width: 0; }
.crm-task-note b { font-size: 11px; font-weight: 700; letter-spacing: 0.2px; color: #1e3a8a; }
.crm-task-note small { display: block; font-size: 10.5px; font-weight: 400; color: #475569; white-space: nowrap; }
.crm-task-note.is-locked { color: #92400e; background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; }
.crm-task-note.is-locked .crm-tn-ico { background: #fef3c7; color: #b45309; }
.crm-task-note.is-locked b { color: #92400e; }
.crm-task-note--box { max-width: 200px; margin: 0 6px; white-space: normal; }
.crm-task-note--box small { white-space: normal; }

/* Activity Review — the rules dialog */
.ar-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-head-btns .btn { border-radius: 0; }
.ar-rules-group { margin: 14px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1f3a52; }
.ar-rules th { font-size: 11.5px; background: #f1f5f9; }
.ar-rules td { vertical-align: top !important; }
.ar-rules td small { display: block; margin-top: 2px; font-size: 11px; color: #64748b; font-weight: 400; }
.ar-rules .form-control { width: 90px; border-radius: 0; text-align: right; }
.ar-rules .ar-rn { width: 40px; text-align: center; }

/* My Tasks & History */
.th-tile { border: 1px solid #e4e7ea; border-radius: 4px; padding: 10px 12px; margin-bottom: 12px; background: #fff; }
.th-tile-n { font-size: 22px; font-weight: 600; line-height: 1.2; }
.th-tile-l { color: #6c757d; font-size: 12px; }
.th-tile-s { color: #8a949c; font-size: 11px; min-height: 14px; }
.th-h { margin: 14px 0 8px; font-weight: 600; }
.th-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; background: #eef0f2; color: #555; }
.th-badge.th-ok { background: #dff3e4; color: #1d6b34; }
.th-badge.th-late { background: #fff1d6; color: #8a5a00; }
.th-badge.th-late2, .th-badge.th-over { background: #fde0e0; color: #9b1c1c; }
.th-table td { vertical-align: top; }

/* Global search (footer Search canvas) */
.gs-box { position: relative; margin-bottom: 10px; }
.gs-box > .fa-search { position: absolute; left: 11px; top: 11px; color: #94a3b8; font-size: 13px; }
.gs-box .form-control { padding-left: 32px; padding-right: 30px; font-size: 12px; height: 34px; }
.gs-clear { position: absolute; right: 9px; top: 8px; color: #94a3b8; font-size: 15px; }
.gs-body.is-loading { opacity: .55; }
.gs-group { margin-bottom: 10px; }
.gs-group-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 4px; font-size: 11px; }
.gs-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; background: #e2e8f0; color: #475569; }
.gs-tag--lead { background: #dbeafe; color: #1d4ed8; }
.gs-tag--query { background: #ede9fe; color: #6d28d9; }
.gs-tag--agent { background: #dcfce7; color: #15803d; }
.gs-tag--prospect { background: #cffafe; color: #0e7490; }
.gs-tag--client { background: #fef3c7; color: #b45309; }
.gs-tag--quotation { background: #fce7f3; color: #be185d; }
.gs-tag--invoice { background: #fee2e2; color: #b91c1c; }
.gs-tag--recent { background: transparent; color: #64748b; padding-left: 0; }
.gs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 4px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; text-decoration: none; color: #1e293b; }
.gs-row:hover, .gs-row.is-active { border-color: #2563eb; background: #f8fbff; text-decoration: none; color: #1e293b; }
.gs-main { min-width: 0; flex: 1; }
.gs-main strong { font-size: 12px; }
.gs-main small { display: block; font-size: 10.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-main small.gs-contact { color: #475569; }
.gs-code { font-size: 10px; color: #64748b; background: #f1f5f9; border-radius: 3px; padding: 0 5px; }
.gs-go { color: #94a3b8; }
.gs-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; color: #475569; }
.gs-row--page { justify-content: flex-start; }
.gs-row--page .gs-go { margin-left: auto; }
.gs-hint { padding: 18px 4px; font-size: 11.5px; color: #64748b; text-align: center; }
.gs-recent { display: flex; justify-content: space-between; align-items: center; padding: 5px 4px; border-bottom: 1px dashed #f1f5f9; font-size: 12px; }
.gs-recent-go { color: #334155; }
.gs-recent-go .fa { color: #94a3b8; margin-right: 4px; }
.gs-recent-x, .gs-recent-clear { color: #94a3b8; font-size: 11px; }
.sr-hit { margin: 3px 0; font-size: 12px; }

/* Contact-data protection: masked contacts chip, read-only profile lines */
.da-contacts { display: inline-block; padding: 2px 9px; border-radius: 10px; background: #f1f5f9; color: #475569; font-size: 11px; white-space: nowrap; }
.da-contacts .fa { color: #94a3b8; margin-right: 3px; }
/* "Show contact" (assets/js/contact_reveal.js): the button, and the contact once shown - drawn per screen (data-layout) in that screen's own classes; only the list layout has styles of its own here */
.cr-box { display: inline-block; vertical-align: top; }
.cr-box[data-layout="ql"], .cr-box[data-layout="qd"] { display: block; }
.cr-box[data-layout="inline"] { display: contents; } /* the shown spans join the row's own flex / inline layout (.crm-ws-contact, .crm-cl-contact, .crm-guest-contacts) */
.cr-box .cr-item { display: inline-block; margin-right: 14px; white-space: nowrap; }
.cr-box .cr-item .fa { color: #94a3b8; margin-right: 2px; }
.cr-box[data-layout="list"] { font-size: 12px; color: #475569; }
.cr-box[data-layout="list"] .cr-contact + .cr-contact { margin-top: 5px; }
.cr-box[data-layout="list"] .cr-who { font-weight: 600; color: #1f3a52; }
.cr-box[data-layout="list"] .cr-line .fa { color: #94a3b8; width: 14px; }
.cr-box .cr-hide { display: inline-block; margin-top: 2px; font-size: 11px; color: #64748b; }
.da-last { font-size: 12px; line-height: 1.35; }
.da-kv { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #eef2f6; font-size: 12.5px; }
.da-k { flex: 0 0 150px; color: #64748b; }
.da-v { flex: 1; color: #1e293b; word-break: break-word; }
.da-otp .form-control { vertical-align: middle; }
.da-last { display: inline-block; max-width: 190px; white-space: normal; line-height: 1.3; }

/* The numbered cards of the Agent / Prospect / Supplier / Client / Lead pages: a gap between cards, room under the last field */
.crm-qf-card.da-card { margin-bottom: 26px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.crm-qf-card.da-card > .crm-qf-card-body { padding-bottom: 14px; }

.da-last-line { margin-top: 3px; font-size: 11px; color: #64748b; line-height: 1.3; }
.da-last-line .da-last { max-width: none; }

/* ===== Report pages (My Tasks & History, Search Report, Data Access Report): the Activity Review Center's look ===== */
.rp-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } /* the Queries page's "Date Added" buttons */
.rp-chips-l { font-weight: 700; font-size: 12px; color: #1e293b; margin-right: 4px; }
.rp-bar-wrap { padding: 12px 15px; }
.rp-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.rp-filterbar .form-control, .rp-filterbar .bootstrap-select > .dropdown-toggle { border-radius: 0; }
.rp-filterbar .form-control { width: auto; min-width: 130px; height: 30px; padding: 3px 8px; font-size: 12px; }
.rp-filterbar .bootstrap-select { width: 190px !important; }
.rp-filterbar .rp-date { width: 118px; background: #fff; }
.rp-filterbar .rp-custom { display: none; align-items: center; gap: 6px; }
.rp-filterbar .rp-custom.is-open { display: inline-flex; }
.rp-filterbar .rp-wide { min-width: 200px; }
.rp-filterbar .rp-check { font-size: 12px; font-weight: 600; color: #475569; margin: 0 4px; cursor: pointer; }
.rp-filterbar .btn { border-radius: 0; }
.rp-scope { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
/* Supplier Statement of Accounts: the narration of a row (sentence + every fact), the Cr / Dr figures (square corners, as everywhere) */
.sl-table td { vertical-align: top; }
.rp-filterbar .bootstrap-select.sl-supplier { width: 300px !important; }
/* One height for every control of a filter bar (30px, square corners, 12px): the inputs, the bootstrap-select toggle (btn-sm made it 32.5px and 11px, inset by the wrapper's padding) and the Select2
   search picker (the CDN sheet loads after this file, so the house theme further up never reaches it: restated here with the bar's own selector). */
.rp-filterbar .rp-date { min-width: 0; }
.rp-filterbar .bootstrap-select.form-control { padding: 0; height: 30px; }
.rp-filterbar .bootstrap-select > .dropdown-toggle { height: 30px; padding: 4px 8px; font-size: 12px; line-height: 20px; }
.rp-filterbar .select2-container { min-width: 300px; }
.rp-filterbar .select2-container--default .select2-selection--single { height: 30px; border: 1px solid #bdc3d1; border-radius: 0; background-color: #fff; box-shadow: none; outline: none; }
.rp-filterbar .select2-container--default .select2-selection--single .select2-selection__rendered { height: 28px; line-height: 28px; padding: 0 28px 0 8px; font-family: "Open Sans", sans-serif; font-size: 12px; color: #696c74; }
.rp-filterbar .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9fa8bc; }
.rp-filterbar .select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 4px; line-height: 28px; color: #9fa8bc; }
.rp-filterbar .select2-container--default .select2-selection--single .select2-selection__arrow { width: 26px; height: 28px; right: 1px; }
.rp-filterbar .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #696c74 transparent transparent transparent; border-width: 4px 4px 0 4px; margin-left: -4px; margin-top: -2px; }
.rp-filterbar .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #696c74 transparent; border-width: 0 4px 4px 4px; }
.rp-filterbar .select2-container--default.select2-container--focus .select2-selection--single,
.rp-filterbar .select2-container--default.select2-container--open .select2-selection--single { border-color: #66afe9; box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); }
/* The picker's list (it opens under <body>; ledger_statement.js adds the class): the house list, square like the bar */
.select2-container--default.sl-drop .select2-dropdown { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); font-family: "Open Sans", sans-serif; font-size: 12px; color: #333; }
.select2-container--default.sl-drop .select2-search--dropdown { padding: 4px 8px 0; }
.select2-container--default.sl-drop .select2-search--dropdown .select2-search__field { height: 30px; padding: 5px 10px; font-size: 12px; border: 1px solid #bdc3d1; border-radius: 0; outline: none; }
.select2-container--default.sl-drop .select2-search--dropdown .select2-search__field:focus { border-color: #66afe9; box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); }
.select2-container--default.sl-drop .select2-results > .select2-results__options { margin: 4px; max-height: 240px; }
.select2-container--default.sl-drop .select2-results__option { padding: 5px 7px; margin: 0 0 1px; border-radius: 0; font-size: 12px; line-height: 1.42857143; color: #333; }
.select2-container--default.sl-drop .select2-results__option--highlighted[aria-selected] { background-color: #bdc3d1; color: #fff; }
.select2-container--default.sl-drop .select2-results__option--highlighted[aria-selected] .sl-sub, .select2-container--default.sl-drop .select2-results__option[aria-selected="true"] .sl-sub { color: rgba(255, 255, 255, 0.85); }
.select2-container--default.sl-drop .select2-results__option[aria-selected="true"] { background-color: #2574ab; color: #fff; }
.select2-container--default.sl-drop .select2-results__message, .select2-container--default.sl-drop .select2-results__option.loading-results { color: #9fa8bc; font-style: italic; }
.select2-results__option .sl-sub { color: #64748b; font-size: 11.5px; }
.rp-filterbar .form-control.sl-search { min-width: 280px; }
.sl-kind { display: inline-block; margin-bottom: 3px; }
.sl-title { font-weight: 600; color: #1e293b; }
.sl-meta { margin-top: 3px; line-height: 1.7; }
.sl-m { display: inline-block; margin-right: 14px; font-size: 11.5px; color: #64748b; }
.sl-m b { color: #475569; font-weight: 600; }
.sl-m a { color: #2563eb; }
.sl-nowrap { white-space: nowrap; }
.sl-cr { color: #b91c1c; } .sl-dr { color: #15803d; } .sl-nil { color: #94a3b8; }
.sl-bal { font-weight: 700; white-space: nowrap; }
.sl-bf td { background: #f8fafc !important; }
.sl-total td { background: #f1f5f9 !important; font-weight: 700; border-top: 2px solid #1f3a52; }
.sl-part td { background: #f8fafc; color: #64748b; font-size: 11.5px; }
.sl-internal td { color: #94a3b8; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
/* one row of compact tiles (Operation reports, Supplier Payment Requests): equal columns, a narrow screen scrolls sideways instead of wrapping */
.rp-tiles--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.rp-tiles--row .ar-tile { padding: 9px 11px; gap: 8px; }
.rp-tiles--row .ar-tile > .fa { font-size: 18px; width: 20px; }
.rp-tiles--row .ar-tile-n { font-size: 20px; min-width: 0; }
.rp-tiles--row .ar-tile-l { font-size: 10.5px; line-height: 1.25; letter-spacing: 0.2px; }
.rp-tiles--row .rp-tile-s { font-size: 10.5px; }
.rp-date-row td { background: #eef2ff; color: #1e3a8a; font-size: 13px; }
@media print { .rp-date-row { break-before: page; } .rp-date-row:first-child { break-before: auto; } #rp_page .rp-bar-wrap, #rp_page .panel .btn { display: none; } }
@media (max-width: 991px) { .rp-tiles--row { grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; } }
.rp-tile-col { display: flex; }
.rp-tile-col .ar-tile { flex: 1; margin-bottom: 0; }
.rp-tile .rp-tile-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-tile .rp-tile-s { font-size: 11px; color: #64748b; }
.rp-tile--blue { border-left-color: #2563eb; } .rp-tile--blue > .fa { color: #2563eb; }
.rp-tile--green { border-left-color: #16a34a; } .rp-tile--green > .fa, .rp-tile--green .ar-tile-n { color: #15803d; }
.rp-tile--orange { border-left-color: #ea580c; } .rp-tile--orange > .fa { color: #ea580c; }
.rp-tile--red { border-left-color: #dc2626; } .rp-tile--red > .fa, .rp-tile--red .ar-tile-n { color: #dc2626; }
.rp-tile--red.is-quiet .ar-tile-n { color: #1e293b; }
.rp-tile--purple { border-left-color: #7c3aed; } .rp-tile--purple > .fa { color: #7c3aed; }
.rp-tile--teal { border-left-color: #0d9488; } .rp-tile--teal > .fa { color: #0d9488; }
.rp-tile--slate { border-left-color: #475569; } .rp-tile--slate > .fa { color: #475569; }
.rp-ins-wrap { margin-bottom: 14px; }
.rp-ins-h { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; }
.rp-ins-h .fa { color: #d97706; margin-right: 4px; }
.rp-insights > .crm-line-hint { margin-bottom: 8px; } /* "worth a look": house info / warning boxes */
.rp-ins-go { margin-left: 6px; font-weight: 700; white-space: nowrap; }
.rp-subtable { margin: 0; background: #fff; } /* a list inside a row / popup (payments, guest documents): light header, not the page table's dark one */
.rp-subtable > thead > tr > th { background: #f8fafc !important; color: #475569 !important; font-weight: 600 !important; font-size: 11.5px !important; text-transform: none !important; letter-spacing: 0; border-bottom: 1px solid #e2e8f0; }
.rp-subtable > tbody > tr > td { font-size: 12.5px; vertical-align: middle; }
.rp-table > tbody > tr { cursor: default; }
.rp-table > tbody > tr:hover { background: #f8fafc; }
.rp-table td small { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.rp-table .rp-nowrap { white-space: nowrap; }
.rp-table .rp-num { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-table .rp-zero { color: #cbd5e1; font-weight: 400; }
.rp-table .rp-warn { color: #c2410c; } .rp-table .rp-bad { color: #dc2626; }
.rp-person { display: inline-flex; align-items: center; gap: 8px; }
.rp-av { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; }
.rp-person-n { line-height: 1.2; font-weight: 600; color: #1e293b; }
.rp-person-n small { font-weight: 400; }
.rp-bar { display: inline-block; width: 70px; height: 6px; background: #e2e8f0; border-radius: 3px; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.rp-bar > span { display: block; height: 100%; }
.rp-pager { margin: 10px 0 0; vertical-align: middle; }
.rp-pager-n { margin-left: 10px; font-size: 12px; color: #64748b; }
.rp-remark { max-width: 340px; color: #334155; }
.rp-hit { margin: 3px 0; font-size: 12px; }
.rp-kind { display: inline-block; padding: 1px 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: #f1f5f9; color: #475569; }
.rp-kind--phone { background: #fef3c7; color: #92400e; } .rp-kind--email { background: #ede9fe; color: #6d28d9; } .rp-kind--code { background: #dbeafe; color: #1d4ed8; }
.rp-empty { padding: 28px 12px !important; text-align: center; color: #64748b; }
.rp-empty .fa { display: block; font-size: 24px; color: #cbd5e1; margin-bottom: 6px; }
.rp-ip { font-family: Menlo, Consolas, monospace; font-size: 11.5px; }

/* Dashboard · Today's Activities: the subject is the link; a system-controlled task has its own thin orange row underneath */
.fu-subject { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: #1d4ed8; text-decoration: none; }
.fu-subject:hover, .fu-subject:focus { color: #1e3a8a; text-decoration: underline; }
.fu-subject .fa { opacity: .55; margin-left: 2px; }
.fu-auto { padding: 7px 14px 7px 18px !important; font-size: 12px; line-height: 1.4; color: #9a3412; background: #fff7ed; border-left: 3px solid #f97316; border-bottom: 1px solid #fed7aa !important; }
.fu-auto .fa { width: 16px; margin-right: 4px; text-align: center; color: #ea580c; }
.fu-auto b { color: #c2410c; font-weight: 700; }
.fu-auto.is-locked { color: #78350f; background: #fffbeb; border-left-color: #d97706; border-bottom-color: #fde68a !important; }
.fu-auto.is-locked .fa { color: #b45309; }

/* ---- Query → Operations tab (modules/views/operations_tab.php, operations_modals.php, assets/js/operations.js) --------------------- */
.ops-panel { margin-bottom: 14px; }

/* Operation reports (Hotels / Transfers / Sightseeing): the Query's Operations panel in a side drawer (modules/views/operation_report.php) */
.or-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1100px, 96vw); background: #f4f6fa; z-index: 1040; box-shadow: -6px 0 24px rgba(15, 23, 42, .25);
	transform: translateX(105%); transition: transform .22s ease; display: flex; flex-direction: column; }
.or-drawer.is-open { transform: translateX(0); }
.or-drawer-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.or-drawer-t { font-size: 15px; }
.or-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px 40px; }
.or-drawer-shade { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.or-drawer-shade.is-open { opacity: 1; pointer-events: auto; }
body.or-drawer-on { overflow: hidden; }
/* Supplier Master: contact person cards and the vehicles card (modules/views/supplier.php) */
.sp-contact { border: 1px solid #e2e8f0; background: #fff; padding: 10px 14px 2px; margin-bottom: 10px; border-left: 4px solid #cbd5e1; }
.sp-contact.is-default { border-left-color: #16a34a; background: #f8fffb; }
.sp-veh { border: 1px solid #e2e8f0; background: #fff; padding: 10px 14px 2px; margin-bottom: 10px; border-left: 4px solid #2563eb; }
.sp-veh.is-locked { border-left-color: #94a3b8; background: #f8fafc; }
.sp-veh .form-control { width: 100%; height: 34px; font-size: 13px; padding: 6px 10px; }
.sp-veh .control-label { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.sp-veh select.form-control { padding-right: 24px; text-overflow: ellipsis; }
.sp-contact-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sp-contact-title { font-weight: 700; color: #1f3a52; flex: 1; }
.sp-default { position: relative; margin: 0; cursor: pointer; font-weight: 600; font-size: 12px; }
.sp-default input { position: absolute; opacity: 0; pointer-events: none; }
.sp-default span { display: inline-block; padding: 3px 10px; border: 1px solid #cbd5e1; color: #64748b; background: #fff; }
.sp-default .sp-default-on { display: none; border-color: #16a34a; color: #15803d; background: #dcfce7; }
.sp-default input:checked ~ .sp-default-off { display: none; }
.sp-default input:checked ~ .sp-default-on { display: inline-block; }
.sp-default input:focus-visible ~ span { outline: 2px solid #6366f1; }
.sp-contact .bootstrap-select > .dropdown-toggle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-contact .bootstrap-select .filter-option { overflow: hidden; text-overflow: ellipsis; }
#ops_root[data-scope="hotels"] #lg_panel, #ops_root[data-scope="sightseeing"] #lg_panel { display: none !important; }
.or-tile.is-on { box-shadow: 0 0 0 2px #6366f1 inset; }
@media print { .or-drawer, .or-drawer-shade { display: none !important; } }
.ops-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.ops-head .panel-title small { font-size: 12px; color: #64748b; font-weight: 400; margin-left: 4px; }
.ops-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-sub { display: block; font-size: 11px; color: #64748b; margin-top: 1px; }
.ops-sub.ops-inline { display: inline; margin: 0; }
.ops-nowrap { white-space: nowrap; }
.ops-missing { color: #b45309; font-size: 11.5px; font-weight: 600; }
.ops-good { color: #15803d; font-weight: 600; }
.ops-bad { color: #dc2626; font-weight: 600; }
.ops-none { color: #cbd5e1; }
.ops-status { font-size: 10.5px; letter-spacing: .2px; }
.ops-chip { display: inline-block; font-size: 10.5px; line-height: 1.5; padding: 0 6px; border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.ops-chip--ok { background: #f0fdf4; border-color: #86efac; color: #166534; }
.ops-chip--bad { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.ops-chip--new { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.ops-chip--company { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ops-chip--guest_direct { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.ops-chip--guest_held { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ops-chip--via_supplier { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }
.ops-unread { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; background: #ef4444; color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.ops-empty { text-align: center; padding: 26px 10px; color: #64748b; }
.ops-empty .fa { font-size: 26px; color: #cbd5e1; margin-bottom: 6px; }

/* the two summary cards */
.ops-money { margin-bottom: 4px; display: flex; flex-wrap: wrap; }
.ops-money::before, .ops-money::after { display: none; }
.ops-money > [class*="col-"] { display: flex; }
.ops-card { display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #1f3a52; margin-bottom: 12px; }
.ops-card-h { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.ops-card-t { font-size: 13px; font-weight: 700; color: #1e293b; }
.ops-card-t .fa { color: #6366f1; margin-right: 4px; }
.ops-card-r { margin-left: auto; }
.ops-card-b { flex: 1; padding: 6px 14px 8px; }
.ops-card-f { padding: 8px 14px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.ops-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0; border-bottom: 1px dashed #eef2f7; }
.ops-card-b .ops-kv:last-child, .ops-card-f .ops-kv { border-bottom: 0; }
.ops-kv-l { color: #475569; font-size: 12.5px; }
.ops-kv-l small { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.ops-kv-v { font-weight: 600; font-size: 13.5px; color: #1e293b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops-kv.is-strong .ops-kv-v { font-size: 15px; }
.ops-kv.is-green .ops-kv-v { color: #15803d; }
.ops-kv.is-red .ops-kv-v { color: #dc2626; }
.ops-kv.is-amber .ops-kv-v { color: #b45309; }
.ops-kv.is-total .ops-kv-l { font-weight: 700; color: #1e293b; font-size: 13px; }
.ops-kv.is-total .ops-kv-v { font-size: 18px; }
.ops-bar { display: flex; height: 6px; background: #e2e8f0; margin: 7px 0 8px; overflow: hidden; }
.ops-bar > span { display: block; height: 100%; }
.ops-seg-green { background: #16a34a; }
.ops-seg-blue { background: #2563eb; }
.ops-seg-amber { background: #f59e0b; }
.ops-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; }

/* quoted services */
.ops-table > tbody > tr > td { vertical-align: middle; font-size: 12.5px; }
.ops-table .ops-tick { width: 30px; text-align: center; }
.ops-table .ops-col-main { min-width: 190px; }
.ops-booked > td { background: #f8fafc; }
.ops-no-act > thead > tr > th:last-child, .ops-no-act > tbody > tr > td:last-child { display: none; } /* every service booked: no "+ Book" column */

/* one card per supplier booking */
.ops-bk { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; margin-bottom: 12px; }
.ops-bk.st-available { border-left-color: #2563eb; }
.ops-bk.st-availability_sent, .ops-bk.st-requested, .ops-bk.st-pending { border-left-color: #f59e0b; }
.ops-bk.st-confirmed, .ops-bk.st-reconfirmed { border-left-color: #16a34a; }
.ops-bk.st-unavailable { border-left-color: #dc2626; }
.ops-bk.is-cancelled { opacity: .65; border-left-color: #cbd5e1; }
.ops-bk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; }
.ops-bk-no { font-weight: 700; font-size: 13.5px; color: #1e293b; }
.ops-bk-no:hover { color: #2563eb; text-decoration: none; }
.ops-bk-state { margin-left: auto; }
.ops-bk-main { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.1fr); gap: 10px 28px; align-items: center; padding: 8px 14px 12px; }
.ops-bk-sup { font-size: 15px; font-weight: 700; color: #0f172a; }
.ops-bk-sup .fa { color: #94a3b8; margin-right: 4px; }
.ops-bk-svc { font-size: 12.5px; color: #334155; margin-top: 1px; }
@media (max-width: 767px) { .ops-bk-main { grid-template-columns: 1fr; } }
.ops-steps { display: flex; list-style: none; margin: 0; padding: 0; }
.ops-steps li { flex: 1; position: relative; text-align: center; padding-top: 17px; font-size: 10.5px; color: #94a3b8; }
.ops-steps li::before { content: ''; position: absolute; top: 5px; left: -50%; right: 50%; height: 2px; background: #e2e8f0; }
.ops-steps li:first-child::before { display: none; }
.ops-step-dot { position: absolute; top: 0; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #fff; border: 2px solid #cbd5e1; z-index: 1; }
.ops-steps li.is-done { color: #334155; }
.ops-steps li.is-done::before { background: #16a34a; }
.ops-steps li.is-done .ops-step-dot { background: #16a34a; border-color: #16a34a; }
@media (max-width: 767px) {
  .ops-step-l { white-space: nowrap; }
  .ops-steps li:not(.is-now):not(.is-wait):not(.is-bad) .ops-step-l { visibility: hidden; } /* a phone has room for the current step's name only */
  .ops-steps li.is-now .ops-step-l, .ops-steps li.is-wait .ops-step-l, .ops-steps li.is-bad .ops-step-l { position: relative; z-index: 2; background: #fff; padding: 0 3px; }
}
.ops-steps li.is-now { color: #1d4ed8; font-weight: 600; }
.ops-steps li.is-now::before { background: #93c5fd; }
.ops-steps li.is-now .ops-step-dot { border-color: #2563eb; background: #dbeafe; }
.ops-steps li.is-wait { color: #92400e; font-weight: 600; }
.ops-steps li.is-wait::before { background: #fcd34d; }
.ops-steps li.is-wait .ops-step-dot { border-color: #f59e0b; background: #fef3c7; }
.ops-steps li.is-bad { color: #b91c1c; font-weight: 600; }
.ops-steps li.is-bad::before { background: #fca5a5; }
.ops-steps li.is-bad .ops-step-dot { border-color: #dc2626; background: #fee2e2; }
.ops-bk-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); background: #fff; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.ops-m { padding: 8px 14px; box-shadow: inset 1px 0 0 #eef2f7; }
.ops-m:first-child { box-shadow: none; }
.ops-m-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: #94a3b8; }
.ops-m-v { font-size: 14.5px; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; margin-top: 1px; }
.ops-m-v.is-muted { color: #64748b; font-weight: 600; }
.ops-m-v.is-good { color: #15803d; }
.ops-m-v.is-bad { color: #dc2626; }
.ops-bk-pay { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #fff; }
.ops-bk-pay .ops-bar { flex: 1; margin: 8px 0; }
.ops-bk-pay .ops-sub { margin: 0; white-space: nowrap; }
.ops-bk-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.ops-bk-do { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ops-bk-more { display: flex; align-items: center; gap: 12px; }
.ops-bk-det { font-size: 12px; font-weight: 600; color: #475569; }
.ops-more .dropdown-menu { border-radius: 0; font-size: 12.5px; min-width: 230px; padding: 4px 0; }
.ops-more .dropdown-menu > li > a { padding: 6px 14px; }
.ops-more .dropdown-menu > li > a .fa { width: 18px; color: #64748b; }
.ops-more .dropdown-menu > li > a.ops-danger, .ops-more .dropdown-menu > li > a.ops-danger .fa { color: #dc2626; }

/* an opened booking: services / emails / payments */
.ops-bk-detail { padding: 10px 14px 14px; border-top: 1px solid #e2e8f0; background: #fff; }
.ops-info { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: #475569; margin-bottom: 10px; }
.ops-info .fa { color: #94a3b8; margin-right: 3px; }
.ops-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ops-count { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 2px; background: rgba(100, 116, 139, .18); font-size: 10px; text-align: center; }
.ops-pane-empty { padding: 14px; text-align: center; color: #94a3b8; font-size: 12.5px; border: 1px dashed #e2e8f0; }
.ops-rows { border: 1px solid #e2e8f0; }
.ops-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #eef2f7; }
.ops-row:last-child { border-bottom: 0; }
.ops-row:nth-child(even) { background: #fafbfd; }
.ops-row.is-held { background: #fffbeb; }
.ops-row-main { flex: 1 1 220px; min-width: 0; }
.ops-row-main strong { font-size: 12.5px; }
.ops-row-when { min-width: 92px; color: #64748b; font-size: 12px; }
.ops-row-fig { min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ops-row-fig .ops-sub { margin: 0 0 1px; }
.ops-pay-amt { font-weight: 700; color: #1e293b; font-size: 13.5px; }
.ops-row-st { min-width: 90px; font-size: 12px; }
.ops-row-x { margin-left: auto; color: #94a3b8; }
a.ops-row-x:hover { color: #dc2626; }

/* a payment split over bookings (guest paid the supplier / settle held money): amount per booking, the rest is held */
.ops-split-h { font-size: 12px; font-weight: 700; color: #334155; text-transform: uppercase; letter-spacing: .4px; margin: 4px 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.ops-split-reset { font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ops-split { border: 1px solid #e2e8f0; margin-bottom: 10px; }
.ops-split-row { display: flex; align-items: center; gap: 12px; padding: 7px 12px; background: #fff; border-bottom: 1px solid #eef2f7; }
.ops-split-row:nth-child(even) { background: #fafbfd; }
.ops-split-row:last-child { border-bottom: 0; }
.ops-split-row.is-other { background: #faf5ff; }
.ops-split-row.is-bad { background: #fef2f2; }
.ops-split-row.is-bad .form-control { border-color: #f87171; }
.ops-split-who { flex: 1; min-width: 0; font-size: 12.5px; }
.ops-split-amt { flex: none; width: 150px; text-align: right; }
.ops-split-held { background: #fffbeb !important; border-top: 1px solid #fde68a; }
.ops-split-held.is-zero { background: #f8fafc !important; border-top-color: #e2e8f0; }
.ops-split-held.is-zero .ops-split-v { color: #94a3b8; }
.ops-split-held.is-bad { background: #fef2f2 !important; }
.ops-split-held.is-bad .ops-sub { color: #b91c1c; }
.ops-split-v { font-size: 15px; font-weight: 700; color: #b45309; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .ops-split-row { flex-wrap: wrap; } .ops-split-amt { width: 100%; } }

/* guest-paid popup: what the payment is applied to (read only - the system does it) */
.ops-apply { border: 1px solid #e2e8f0; margin: 2px 0 10px; background: #fff; }
.ops-apply-h { padding: 6px 12px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #475569; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.ops-apply-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 12px; font-size: 12.5px; border-bottom: 1px solid #eef2f7; }
.ops-apply-row:last-child { border-bottom: 0; }
.ops-apply-row.is-adv { background: #fffbeb; }
.ops-apply-row.is-other { background: #faf5ff; }
.ops-apply-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Held by suppliers: guest money a supplier has received and not settled yet */
.ops-held { border: 1px solid #fde68a; border-top: 3px solid #d97706; background: #fff; margin-bottom: 12px; }
.ops-held-h { padding: 8px 14px; background: #fffbeb; font-size: 13px; font-weight: 700; color: #92400e; border-bottom: 1px solid #fef3c7; }
.ops-held-h .fa { margin-right: 5px; }
.ops-held-h small { font-weight: 400; color: #a16207; margin-left: 8px; font-size: 11.5px; }
.ops-held-item { border-bottom: 1px solid #eef2f7; }
.ops-held-item:last-child { border-bottom: 0; }
.ops-held-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding: 9px 14px; }
.ops-held-main { flex: 1 1 240px; min-width: 0; font-size: 13px; }
.ops-held-fig { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.ops-held-fig .ops-sub { margin: 0 0 1px; }
.ops-held-go { min-width: 90px; text-align: right; }
.ops-held-steps { padding: 0 14px 9px 28px; }
.ops-held-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 4px 0; font-size: 12.5px; border-top: 1px dashed #eef2f7; }
.ops-held-step .ops-sub { display: inline; margin: 0; }
.ops-held-step .ops-held-undo, .ops-held-step .ops-undo-held { margin-left: auto; }
.ops-held-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; padding: 0 6px; border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; }
.ops-held-k--returned { background: #f0fdf4; border-color: #86efac; color: #166534; }
.ops-held-k--applied { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ops-held-k--advance { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }

/* Settle popup: the three ways to settle held money */
.ops-kinds { display: flex; gap: 8px; margin: 2px 0 10px; }
.ops-kind { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: left; background: #fff; border: 1px solid #cbd5e1; color: #475569; cursor: pointer; }
.ops-kind:hover { border-color: #94a3b8; }
.ops-kind .fa { font-size: 18px; color: #94a3b8; width: 20px; text-align: center; }
.ops-kind span { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ops-kind small { display: block; font-size: 11px; font-weight: 400; color: #64748b; margin-top: 1px; }
.ops-kind.is-on { border-color: #1f3a52; background: #f1f5f9; box-shadow: inset 3px 0 0 #1f3a52; color: #1e293b; }
.ops-kind.is-on .fa { color: #1f3a52; }
@media (max-width: 767px) { .ops-kinds { flex-direction: column; } }

/* the Conversation popup */
.ops-th .modal-body { padding: 0; background: #f1f5f9; }
.ops-th-head { display: flex; align-items: center; gap: 12px; }
.ops-th-av, .mc-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #16a34a; color: #fff; font-weight: 700; font-size: 14px; }
.ops-th-head .ops-th-av { width: 38px; height: 38px; background: #6366f1; font-size: 16px; }
.ops-th-who { flex: 1; min-width: 0; }
.ops-th-who .modal-title { margin: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-th-sub { font-size: 11.5px; opacity: .75; margin-top: 1px; }
.ops-th-ic { background: transparent; border: 0; color: inherit; opacity: .7; padding: 4px 8px; }
.ops-th-ic:hover { opacity: 1; }
.ops-th-head .close { margin: 0; }
.ops-th-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.ops-th-bk { font-size: 12px; padding: 2px 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8; }
.ops-th-bk.st-confirmed, .ops-th-bk.st-reconfirmed { border-left-color: #16a34a; }
.ops-th-bk.st-requested, .ops-th-bk.st-availability_sent, .ops-th-bk.st-pending { border-left-color: #f59e0b; }
.ops-th-list { max-height: 54vh; min-height: 200px; overflow-y: auto; padding: 14px 16px 6px; }
.ops-th-empty { text-align: center; padding: 38px 16px; color: #64748b; }
.ops-th-empty .fa { font-size: 30px; color: #cbd5e1; margin-bottom: 8px; display: block; }
.ops-th-firsts { margin-top: 12px; }
.mc-day { text-align: center; margin: 14px 0 8px; position: relative; font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .4px; }
.mc-day::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #dbe2ea; }
.mc-day span { position: relative; background: #f1f5f9; padding: 0 10px; }
.mc-msg { display: flex; gap: 10px; margin: 10px 0; align-items: flex-start; }
.mc-msg.out { flex-direction: row-reverse; }
.mc-msg.out .mc-av { background: #2563eb; }
.mc-bub { flex: 0 1 auto; width: calc(100% - 46px); max-width: 640px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #16a34a; padding: 8px 12px 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.mc-msg.out .mc-bub { border-left: 1px solid #e2e8f0; border-right: 3px solid #2563eb; }
.mc-bub-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.mc-bub-n { font-weight: 700; font-size: 12.5px; color: #0f172a; }
.mc-bub-e { font-size: 11px; color: #94a3b8; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mc-bub-t { margin-left: auto; font-size: 11px; color: #64748b; white-space: nowrap; }
.mc-sent { color: #94a3b8; }
.mc-bub-s { font-size: 11.5px; color: #64748b; margin: 2px 0 4px; }
.mc-body-wrap { position: relative; margin-top: 6px; }
.mc-frame { display: block; width: 100%; border: 0; background: #fff; height: 40px; }
.mc-body-wrap.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 46px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.mc-expand { display: block; margin-top: 4px; padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 600; color: #2563eb; }
.mc-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.mc-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 9px; border: 1px solid #e2e8f0; background: #f8fafc; color: #1e293b; font-size: 12px; }
.mc-file:hover { border-color: #93c5fd; text-decoration: none; background: #eff6ff; }
.mc-file .fa { font-size: 18px; color: #64748b; }
.mc-file span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mc-file small { display: block; color: #94a3b8; font-size: 10.5px; }
.mc-file--img { padding: 4px 9px 4px 4px; }
.mc-file--img img { width: 46px; height: 46px; object-fit: cover; border: 1px solid #e2e8f0; background: #fff; }
.mc-bub-a { margin-top: 8px; padding-top: 7px; border-top: 1px dashed #e2e8f0; font-size: 12px; font-weight: 600; }
.mc-composer { text-align: left; background: #fff; border-top: 1px solid #e2e8f0; padding: 10px 16px 12px; }
.mc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mc-quick button { padding: 1px 9px; border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; font-size: 11.5px; line-height: 1.7; }
.mc-quick button:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.mc-box { border: 1px solid #cbd5e1; background: #fff; }
.mc-box:focus-within { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .12); }
.mc-box textarea { display: block; border: 0; box-shadow: none; resize: none; min-height: 46px; padding: 9px 10px; border-radius: 0; }
.mc-box textarea:focus { box-shadow: none; }
.mc-attached { display: none; flex-wrap: wrap; gap: 6px; padding: 0 8px 6px; }
.mc-chipfile { display: inline-block; padding: 2px 8px; background: #f1f5f9; border: 1px solid #e2e8f0; font-size: 11.5px; color: #334155; }
.mc-chipfile small { color: #94a3b8; }
.mc-chipfile a { color: #94a3b8; margin-left: 3px; }
.mc-chipfile a:hover { color: #dc2626; }
.mc-box-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #f8fafc; border-top: 1px solid #eef2f7; }
.mc-box-to { font-size: 11.5px; color: #94a3b8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-box-bar .mc-send { margin-left: auto; }

/* ---- Query mail: inbox + chat (assets/js/mail_chat.js inbox(), query_mail.js; modules/views/queries.php) ---------------------------- */
.mc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.mc-head h5 { margin: 0; font-weight: 700; color: #1e293b; }
.mc-head h5 .fa { color: #6366f1; margin-right: 4px; }
.mc-badge { background-color: #ef4444; color: #fff; border-radius: 10px; font-size: 10px; margin-left: 4px; padding: 2px 6px; }
.mc-inbox { display: flex; border: 1px solid #e2e8f0; background: #fff; height: 68vh; min-height: 440px; max-height: 720px; }
.mc-side { width: 300px; flex: none; display: flex; flex-direction: column; border-right: 1px solid #e2e8f0; background: #f8fafc; min-height: 0; }
.mc-side-h { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #475569; background: #fff; border-bottom: 1px solid #e2e8f0; }
.mc-ic { background: transparent; border: 0; color: #64748b; padding: 2px 6px; font-size: 14px; }
.mc-ic:hover { color: #1e293b; }
.mc-threads { flex: 1; overflow-y: auto; min-height: 0; }
.mc-th { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #fff; color: #334155; border-bottom: 1px solid #eef2f7; border-left: 3px solid transparent; text-decoration: none; }
.mc-th:hover { background: #f1f5f9; color: #334155; text-decoration: none; }
.mc-th.is-on { background: #eef2ff; border-left-color: #6366f1; }
.mc-th .mc-av { background: #6366f1; }
.mc-th.is-unread strong { color: #0f172a; }
.mc-th-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-th-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mc-th-t strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-th.is-unread .mc-th-t strong { font-weight: 800; }
.mc-th-t small { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.mc-th-s { font-size: 12px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-th-p { font-size: 11.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-th .ops-unread { align-self: center; margin-left: 0; }
.mc-th-none { padding: 26px 14px; text-align: center; color: #64748b; font-size: 12.5px; }
.mc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #f1f5f9; }
.mc-main-h { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #e2e8f0; flex: none; }
.mc-inbox.is-none .mc-main-h { display: none; }
.mc-inbox.is-none { height: auto; min-height: 240px; }
.mc-inbox.is-none .mc-side { display: none; }
.mc-inbox.is-none .mc-list { display: flex; align-items: center; justify-content: center; }
.mc-av--main { width: 36px; height: 36px; background: #6366f1; font-size: 15px; }
.mc-who { flex: 1; min-width: 0; }
.mc-title { font-weight: 700; color: #0f172a; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sub { font-size: 11.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-back { display: none; font-size: 24px; line-height: 1; padding: 0 8px 0 0; }
.mc-list { flex: 1; overflow-y: auto; padding: 14px 16px 6px; min-height: 0; }
.mc-comp { flex: none; }
.mc-empty { text-align: center; padding: 48px 16px; color: #64748b; font-size: 13px; }
.mc-empty .fa { font-size: 32px; color: #cbd5e1; margin-bottom: 8px; display: block; }
@media (max-width: 767px) {
  .mc-inbox { flex-direction: column; height: auto; max-height: none; min-height: 0; }
  .mc-side { width: 100%; border-right: 0; max-height: 62vh; }
  .mc-main { display: none; height: 78vh; }
  .mc-inbox.is-open .mc-side { display: none; }
  .mc-inbox.is-open .mc-main { display: flex; }
  .mc-back { display: inline-block; }
  .mc-inbox.is-none .mc-main { display: flex; height: auto; }
  .mc-bub { width: calc(100% - 40px); }
}

/* New email / Send inquiry popups */
.mc-drop { border: 1px dashed #94a3b8; background: #f8fafc; padding: 14px; text-align: center; color: #475569; font-size: 12.5px; }
.mc-drop .fa { font-size: 18px; color: #94a3b8; margin-right: 6px; vertical-align: -2px; }
.mc-drop small { display: block; margin-top: 2px; color: #94a3b8; font-size: 11px; }
.mc-drop.is-over { border-color: #2563eb; background: #eff6ff; }
#agent_attached { padding: 6px 0 0; }
.mc-quote-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: #64748b; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mc-chip { display: inline-block; padding: 2px 9px; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; font-size: 11.5px; }
.mc-inq-h { margin: 6px 0 8px; padding-top: 10px; border-top: 1px solid #e2e8f0; font-size: 12px; font-weight: 700; color: #334155; text-transform: uppercase; letter-spacing: .4px; }
.mc-inq-h small { font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; margin-left: 6px; }
.mc-inq-to { font-size: 12px; color: #64748b; }
#mc_agent_modal .control-label, #mc_inquiry_modal .control-label { font-weight: 600; color: #475569; font-size: 12px; margin-bottom: 4px; }

/* Travel Desk (modules/views/travel_desk.php, assets/js/travel_desk.js): tabs, dashboard cards, attention, schedule, calendar */
.td-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.td-datenav { display: flex; align-items: center; gap: 6px; } .td-datenav input.form-control { width: 120px; text-align: center; }
.td-updated { font-size: 11.5px; color: #64748b; }
.td-group-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 0 0 6px; }
.td-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin-bottom: 14px; }
.td-card { display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; justify-items: start; padding: 6px 10px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #1f3a52; text-align: left; cursor: pointer; }
.td-card:hover, .td-card.is-on { background: #f8fafc; box-shadow: 0 0 0 2px rgba(31, 58, 82, .18); }
.td-card .fa { grid-row: 1 / 3; font-size: 16px; color: #94a3b8; text-align: center; } .td-card-n { font-size: 17px; font-weight: 700; color: #0f172a; line-height: 1.15; } .td-card-l { font-size: 11.5px; color: #475569; line-height: 1.2; }
.td-card--teal { border-left-color: #0f766e; } .td-card--green { border-left-color: #15803d; } .td-card--amber { border-left-color: #d97706; } .td-card--red { border-left-color: #dc2626; }
.td-attention { border: 1px solid #fecaca; background: #fef2f2; border-left: 4px solid #dc2626; padding: 8px 12px; margin-bottom: 14px; }
.td-attention h5 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #991b1b; }
.td-att-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px dashed #fecaca; font-size: 12.5px; }
.td-att-row:first-of-type { border-top: 0; }
.td-flag { font-size: 11.5px; margin-top: 2px; } .td-flag--action { color: #b91c1c; } .td-flag--risk { color: #b45309; } .td-flag--warning { color: #92400e; }
.td-panel { margin-bottom: 0; } .td-sched-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .td-sched-head .td-chips { margin: 0; }
.td-chip { padding: 3px 11px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 12px; cursor: pointer; }
.td-chip.is-on { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.td-table td { vertical-align: middle !important; } #td_trips .datalist td, #td_trips .datalist th { vertical-align: middle !important; padding-left: 7px !important; padding-right: 7px !important; } #td_trips .datalist td:nth-child(2) { min-width: 170px; } #td_trips .datalist td:nth-child(4), #td_trips .datalist td:nth-child(5) { white-space: nowrap; } .td-sub { font-size: 11.5px; line-height: 1.3; } .td-contact-box { margin: 3px 0; font-size: 12px; } .td-row-warn { background: #fff7ed; }
.td-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: 11.5px; color: #475569; }
.td-dot { display: inline-block; width: 9px; height: 9px; margin-right: 4px; background: #94a3b8; } .td-dot--t { background: #cbd5e1; } .td-dot--s { background: #2563eb; } .td-dot--i { background: #0f766e; } .td-dot--o { background: #d97706; } .td-dot--e { background: #7c3aed; }
.td-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e2e8f0; border: 1px solid #e2e8f0; }
.td-grid-h { background: #f1f5f9; padding: 4px 6px; font-size: 11px; font-weight: 700; color: #475569; text-align: center; }
.td-day { background: #fff; min-height: 84px; padding: 4px 6px; cursor: pointer; font-size: 11.5px; } .td-day:hover { background: #f8fafc; }
.td-day.is-out { background: #f8fafc; color: #94a3b8; } .td-day.is-today { box-shadow: inset 0 0 0 2px #1f3a52; }
.td-day-n { font-weight: 700; } .td-day-m { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.td-pill { padding: 0 5px; color: #fff; font-size: 10.5px; } .td-pill--t { background: #94a3b8; } .td-pill--s { background: #2563eb; } .td-pill--i { background: #0f766e; } .td-pill--o { background: #d97706; } .td-pill--e { background: #7c3aed; }
@media (max-width: 767px) { .td-day { min-height: 56px; } .td-cards { grid-template-columns: repeat(2, 1fr); } }

/* Quotations list: compact, one-glance rows (ajax/ajax_datatable.php, action=quotations) */
.ql-table td { vertical-align: middle !important; padding: 6px 8px !important; }
.ql-main { line-height: 1.3; white-space: nowrap; } .ql-sub { font-size: 11.5px; color: #64748b; line-height: 1.3; } .ql-sub a { color: inherit; }
.ql-wrap { white-space: normal; min-width: 150px; max-width: 220px; }
.ql-clip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-chip { font-size: 10px; padding: 2px 5px; font-weight: 600; }
.ql-ver { display: inline-block; font-size: 10.5px; font-weight: 700; color: #1f3a52; background: #e2e8f0; padding: 0 5px; margin-left: 2px; }
.ql-price { font-size: 14px; font-weight: 700; color: #0f172a; }
.ql-seen { color: #166534; } .ql-actions { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; } .ql-actions .btn-group { display: block; }
#tblQueryReceiptsList th, #tblQueryReceiptsList td { white-space: nowrap; vertical-align: middle; }

/* Quotation Design (the Invoice / Receipt Design page shape): folded cards, preset swatches, small bits */
.qds-fold-head { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qds-fold-r { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; }
.qds-chev { color: #64748b; transition: transform .15s; }
.qds-fold.is-open .qds-chev { transform: rotate(180deg); }
.qds-fold:not(.is-open) .qds-fold-body { display: none; }
.qds-fold:not(.is-open) .crm-qf-card-head { border-bottom: 0; }
.qds-badge-ok { color: #15803d; font-weight: 600; } .qds-badge-bad { color: #b45309; font-weight: 700; }
.qds-sub { margin: 14px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #475569; }
.qds-sub:first-child { margin-top: 0; }
.qds-inline-choices { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.qds-inline-choices .qds-choice { margin: 0; }
.qds-field { margin-bottom: 12px; }
.qds-field .crm-tooltip-trigger { text-transform: none; letter-spacing: 0; }
.qds-choice .crm-tooltip-trigger { margin-left: 4px; }
.dd-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 8px; }
.dd-theme { display: flex; flex-direction: column; gap: 6px; border: 1px solid #e2e8f0; padding: 8px 10px; cursor: pointer; background: #fff; margin: 0; font-weight: normal; }
.dd-theme.is-on { border-color: #0f766e; box-shadow: 0 0 0 2px rgba(15, 118, 110, .25); }
.dd-theme input { position: absolute; opacity: 0; pointer-events: none; }
.dd-sw { display: flex; height: 22px; } .dd-sw i { flex: 1; }
.dd-tn { font-size: 12px; color: #334155; }
.dd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 767px) { .dd-cols { grid-template-columns: 1fr; } }
.qds-choice-row { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; } .qds-choice-row .qds-choice { margin: 0; } .qds-choice-row .crm-tooltip-trigger { margin-left: 2px; }

/* Knowledge Base (modules/views/knowledge.php; the guides' own markup: .kb-role, .kb-tip, .kb-warn, .kb-steps, .kb-shot, .kb-table) */
.kb-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .kb-search { display: flex; gap: 6px; } .kb-search .form-control { width: 260px; } .kb-lang { width: 70px; }
.kb-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.kb-nav { position: sticky; top: 20px; max-height: calc(100vh - 120px); overflow-y: auto; border: 1px solid #e2e8f0; background: #f8fafc; padding: 8px 0; }
.kb-nav-title { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #64748b; }
.kb-nav ul { list-style: none; margin: 0; padding: 0; } .kb-nav li a { display: block; padding: 5px 14px 5px 18px; font-size: 13px; color: #334155; border-left: 3px solid transparent; }
.kb-nav li a:hover { background: #eef2f7; text-decoration: none; } .kb-nav li a.is-on { background: #fff; border-left-color: #1f3a52; font-weight: 700; color: #0f172a; }
.kb-article { min-width: 0; max-width: 860px; font-size: 14px; line-height: 1.65; color: #1e293b; }
.kb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.kb-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .kb-roles-l { font-size: 12px; color: #64748b; margin-right: 2px; }
.kb-role-btn { padding: 3px 11px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 12px; cursor: pointer; } .kb-role-btn.is-on { background: #1f3a52; border-color: #1f3a52; color: #fff; }
.kb-title { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: #0f172a; } .kb-summary { margin: 0 0 14px; font-size: 15px; color: #475569; }
.kb-toc { margin: 0 0 18px; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13px; } .kb-toc ul { margin: 6px 0 0; padding-left: 18px; }
.kb-body h2 { margin: 28px 0 10px; padding-bottom: 6px; font-size: 20px; font-weight: 700; color: #1f3a52; border-bottom: 2px solid #e2e8f0; }
.kb-body h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 700; color: #0f172a; } .kb-body p { margin: 0 0 10px; } .kb-body ul, .kb-body ol { margin: 0 0 12px; padding-left: 22px; } .kb-body li { margin-bottom: 4px; }
.kb-steps { counter-reset: kbstep; list-style: none; padding-left: 0 !important; } .kb-steps > li { counter-increment: kbstep; position: relative; padding: 4px 0 8px 40px; }
.kb-steps > li::before { content: counter(kbstep); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; line-height: 26px; text-align: center; background: #1f3a52; color: #fff; font-weight: 700; font-size: 13px; }
.kb-tip, .kb-warn, .kb-note { margin: 12px 0; padding: 10px 14px; border: 1px solid; border-left-width: 4px; font-size: 13.5px; }
.kb-tip { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; } .kb-warn { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; } .kb-note { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; }
.kb-role { margin: 12px 0; padding: 9px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; font-size: 13.5px; }
.kb-role[data-role~="super"] { border-left-color: #7c3aed; } .kb-role[data-role~="admin"] { border-left-color: #1f3a52; } .kb-role[data-role~="ops"] { border-left-color: #0f766e; } .kb-role[data-role~="sales"] { border-left-color: #d97706; }
.kb-role-tag { display: inline-block; margin-right: 6px; padding: 0 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: #1f3a52; color: #fff; }
.kb-shot { margin: 16px 0; } .kb-shot img { max-width: 100%; border: 1px solid #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); } .kb-shot figcaption { margin-top: 6px; font-size: 12.5px; color: #64748b; }
.kb-table th { background: #f1f5f9; font-size: 12.5px; } .kb-table td { vertical-align: top; font-size: 13px; }
.kb-body kbd { padding: 1px 6px; background: #f1f5f9; border: 1px solid #cbd5e1; color: #0f172a; font-size: 12px; }
.kb-pn { margin-top: 30px; padding-top: 14px; border-top: 1px solid #e2e8f0; overflow: hidden; }
.kb-hit { padding: 10px 0; border-bottom: 1px solid #eef2f7; } .kb-hit-s { font-size: 13px; color: #64748b; }
.kb-filter { margin: 10px 0 14px; max-width: 420px; } .kb-set-key code { font-size: 11px; color: #64748b; background: none; padding: 0; } .kb-set-def { font-size: 12.5px; color: #475569; }
.kb-set-effect, .kb-set-opts { margin-top: 4px; font-size: 12px; color: #64748b; } .kb-set-group { margin-top: 26px; } .kb-set-about { color: #64748b; font-size: 13px; }
@media (max-width: 991px) { .kb-layout { grid-template-columns: minmax(0, 1fr); } .kb-nav { position: static; max-height: 260px; } .kb-search .form-control { width: 180px; } }
@media print {
	.headerpanel, .leftpanel, .breadcrumb, .kb-head .kb-tools, .kb-nav, .kb-bar, .kb-pn, .kb-toc, #footer-bar, .footer-bar { display: none !important; }
	.mainpanel { margin: 0 !important; } .kb-layout { display: block; } .kb-article { max-width: none; } .kb-page { border: 0; box-shadow: none; }
	.kb-role { break-inside: avoid; } .kb-shot, .kb-tip, .kb-warn { break-inside: avoid; }
}
/* System Settings reference: fixed columns so a long unbroken default (a list of types) wraps inside its cell instead of widening the column over its neighbours */
.kb-article.kb-wide { max-width: none; } .kb-set-table { table-layout: fixed; width: 100%; } .kb-set-table td, .kb-set-table th { overflow-wrap: anywhere; word-break: break-word; } .kb-set-table .kb-set-key code { white-space: normal; }
@media (max-width: 767px) { .kb-set-table { min-width: 640px; } .table-responsive > .kb-set-table > thead > tr > th, .table-responsive > .kb-set-table > tbody > tr > td { white-space: normal; } }
/* Hotel rate sheet: the actions of a numbered card sit on the right of its head */
.rs-actions { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; } .rs-actions .crm-label-action { margin: 0; font-size: 12px; font-weight: 600; }
.crm-qf-card-head:has(.rs-actions) { justify-content: flex-start; }
/* Query -> Operations -> Pickups & drivers (assets/js/logistics.js) */
.lg-body { max-height: calc(100vh - 150px); overflow-y: auto; }
.lg-sub { margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 2px solid #e2e8f0; font-size: 13px; font-weight: 700; color: #1f3a52; text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-sub small { text-transform: none; letter-spacing: 0; font-weight: 400; color: #64748b; font-size: 12px; } .lg-sub .crm-qf-link { margin-left: auto; text-transform: none; letter-spacing: 0; } .lg-sub .crm-qf-link + .crm-qf-link { margin-left: 12px; }
.lg-first { margin-top: 0; } .lg-row { padding: 8px 0; border-bottom: 1px dashed #e2e8f0; } .lg-row:last-child { border-bottom: 0; } .lg-lbl { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #1e293b; }
.lg-row .row > [class*="col-"] { margin-bottom: 4px; } .lg-more { margin-top: 4px; padding: 6px 0 0; background: #f8fafc; }
.lg-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e8f0; position: sticky; bottom: -15px; background: #fff; } .lg-note { margin-right: auto; font-size: 12px; }
/* Voucher Design: the sections list (drag to order, tick to show) - same device as Quotation Design's */
.dd-sections { margin: 0 0 6px; } .dd-sections .list-group-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 0; } .dd-grip { color: #94a3b8; cursor: move; } .dd-sec { margin: 0; font-weight: 600; font-size: 13px; color: #1e293b; cursor: pointer; }
/* Voucher builder (modules/views/voucher_builder.php) */
.vb-coll-row { margin-bottom: 6px; } #vb_page .hotel-row-card, #vb_page .custom-note-row-card { border-radius: 0; }
.lg-lbl .lg-otherdriver { float: right; font-weight: 400; margin: 0; }

/* Pill tabs (Orphan Mailbox, Payment Verification): the tab buttons of the panel heading */
.pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; border: none; }
.pill-tabs > li { margin: 0; padding: 0; }
.pill-tabs > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 4px; color: #475569; background: #fff; border: 1px solid #cbd5e1; transition: all 0.15s ease-in-out; text-decoration: none; }
.pill-tabs > li > a:hover { background: #f1f5f9; color: #1e293b; }
.pill-tabs > li.active > a, .pill-tabs > li.active > a:hover, .pill-tabs > li.active > a:focus { color: #fff !important; background-color: #1e3a8a !important; border-color: #1e3a8a !important; box-shadow: 0 2px 4px rgba(30, 58, 138, 0.25); }
.pill-tabs > li > a .badge { font-size: 10px; background: #64748b; color: #fff; }
.pill-tabs > li.active > a .badge { background-color: #fff !important; color: #1e3a8a !important; }
.mail-row-unread { background-color: #f8fbff !important; }
.mail-row-unread td:first-child { border-left: 3px solid #2563eb !important; }

/* Quick date shortcuts: the small joined button group of the Orphan Mailbox, wherever .rp-chips holds a .btn-group-xs */
.rp-chips .btn-group-xs > .btn { font-weight: 600; }
/* The Date Added shortcut groups of the list pages: the selected button looks as the Orphan Mailbox's (the page scripts add .btn-primary to it) */
.btn-group-xs > .date-filter-btn { font-weight: 600; }
.btn-group-xs > .date-filter-btn.active, .btn-group-xs > .date-filter-btn.btn-primary { color: #333; background-color: #e6e6e6; border-color: #adadad; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

/* Fleet (cab availability): dashboard, Find vehicle, timeline, drawer (modules/views/fleet_*.php, assets/js/fleet*.js) */
.fl-tiles .rp-tile > .fa { display: none; }
#fl_drawer, #fl_drawer_shade { top: 64px; } /* below the top bar, so the drawer's Close button is not hidden */
.fl-tiles .rp-tile { cursor: default; }
.fl-tiles .rp-tile.is-click { cursor: pointer; }
.fl-tiles .rp-tile.is-on { box-shadow: 0 0 0 2px #2563eb inset; }
.fl-trip { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; padding: 8px 12px; margin-bottom: 8px; }
.fl-stages { font-size: 12px; margin-top: 3px; }
.fl-sort { cursor: pointer; white-space: nowrap; }
.fl-grp-A { border-left: 4px solid #16a34a; } .fl-grp-B { border-left: 4px solid #2563eb; } .fl-grp-C { border-left: 4px solid #ea580c; } .fl-grp-D { border-left: 4px solid #64748b; }
.fl-why { font-size: 12px; color: #475569; }
.fl-tl-wrap { overflow-x: auto; margin-top: 8px; border: 1px solid #e2e8f0; background: #fff; }
.fl-tl { display: grid; min-width: 900px; position: relative; }
.fl-tl-h { background: #f1f5f9; font-size: 11px; text-align: center; padding: 4px 0; border-left: 1px solid #e2e8f0; position: sticky; top: 0; }
.fl-tl-h.is-today { background: #dbeafe; font-weight: 700; }
.fl-tl-c { position: sticky; left: 0; background: #fff; z-index: 3; padding: 6px 8px; border-top: 1px solid #e2e8f0; font-size: 12px; min-width: 150px; }
.fl-tl-r { position: relative; border-top: 1px solid #e2e8f0; min-height: 34px; }
.fl-tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #2563eb; z-index: 2; pointer-events: none; }
.fl-bar { position: absolute; top: 4px; height: 24px; line-height: 24px; padding: 0 6px; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #1d4ed8; background: #3b82f6; color: #fff; cursor: pointer; }
.fl-bar.fl-lane2 { top: 30px; }
.fl-legend .fl-bar { position: static; display: inline-block; margin: 6px 8px 0 0; cursor: default; }
.fl-assigned { background: #3b82f6; border-color: #1d4ed8; }
.fl-estimated { background: repeating-linear-gradient(45deg, #3b82f6, #3b82f6 6px, #93c5fd 6px, #93c5fd 12px); border-color: #1d4ed8; color: #0f172a; }
.fl-completed { background: #94a3b8; border-color: #64748b; }
.fl-pastdue { background: #dc2626; border-color: #991b1b; }
.fl-block { background: #1e293b; border-color: #0f172a; }
.fl-buffer { position: absolute; top: 0; bottom: 0; background: rgba(250, 204, 21, .18); border: 0; }
.fl-legend .fl-buffer { position: static; display: inline-block; height: 24px; color: #713f12; border: 1px dashed #ca8a04; }
@media (max-width: 767px) {
	.fl-tiles.rp-tiles--row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
	.fl-stack thead { display: none; }
	.fl-stack td { display: block; border: 0 !important; padding: 2px 8px !important; }
	.fl-stack tr { border-bottom: 1px solid #e2e8f0; display: block; padding: 6px 0; }
	#fl_modal .btn, .fl-trip .btn { min-height: 44px; }
}
@media print { .rp-filterbar, #fl_attention, #fl_refresh, .breadcrumb, #fl_setup { display: none !important; } .fl-tl { min-width: 0; } }

/* Transfer Prices: route exceptions (modules/views/transfer_rates.php, assets/js/transfer_rates.js) */
.trp-route { border: 1px solid #e2e8f0; border-left: 4px solid #7c3aed; background: #faf5ff; padding: 8px 12px; margin-bottom: 8px; }
.trp-route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trp-route-head label { margin: 0; font-size: 12px; font-weight: 600; }
.trp-route-head select.form-control { width: auto; min-width: 150px; height: 28px; border-radius: 0; font-size: 12px; }
.trp-route-arrow { font-weight: 700; color: #6d28d9; }
.trp-route-head .trp-del-route { margin-left: auto; }
.trp-route-prices { margin-top: 8px; }
.trp-route-part { padding: 6px 0; border-top: 1px dashed #ddd6fe; font-size: 12px; }
.trp-route-part > strong { display: block; margin-bottom: 4px; color: #5b21b6; }
.trp-route-pair { display: inline-flex; align-items: center; gap: 4px; margin: 0 14px 4px 0; }
.trp-route-pair label { margin: 0; font-size: 11.5px; font-weight: 600; color: #475569; min-width: 52px; }
.trp-route-pair input.rate-in { height: 28px; border: 1px solid #cbd5e1; border-radius: 0; padding: 2px 6px; font-size: 12px; }
.trp-route-veh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 2px; }
.trp-route-vname { min-width: 150px; font-weight: 600; font-size: 12px; }

/* ===== Financial Reports (modules/views/financial_reports.php, assets/js/financial_reports.js) ===== */
#fr_page .fr-bar { margin-top: 10px; }
#fr_page .fr-lbl { margin: 0; font-size: 12px; font-weight: 600; color: #475569; }
#fr_page .fr-empty { padding: 18px; text-align: center; color: #64748b; }
#fr_page .fr-stmt { margin-bottom: 0; }
#fr_page .fr-stmt td { padding: 7px 10px; vertical-align: middle; background: #fff; }
#fr_page .fr-stmt .fr-sub td { background: #f8fafc; }
#fr_page .fr-stmt td.text-right { white-space: nowrap; width: 38%; }
#fr_page .fr-stmt .fr-line td { font-weight: 600; background: #fff; }
#fr_page .fr-stmt .fr-sub td { padding-left: 26px; font-size: 12px; color: #475569; }
#fr_page .fr-stmt .fr-total td { background: #f1f5f9; border-top: 2px solid #cbd5e1; font-weight: 700; color: #0f172a; }
#fr_page .fr-stmt .fr-net td { font-size: 15px; background: #e2e8f0; }
#fr_page .fr-chip { display: inline-block; padding: 0 6px; margin-left: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #475569; background: #e2e8f0; border-radius: 0; }
#fr_page .fr-period { margin: 0 0 8px; font-size: 12px; color: #475569; }
#fr_page .fr-foot { margin: 10px 0 0; font-size: 12px; }
#fr_page .fr-list { margin: 6px 0 0 18px; padding: 0; }
#fr_page .fr-age { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 600; border-radius: 0; color: #fff; }
#fr_page .fr-age--green { background: #16a34a; } #fr_page .fr-age--blue { background: #2563eb; } #fr_page .fr-age--orange { background: #d97706; }
#fr_page .fr-age--purple { background: #7c3aed; } #fr_page .fr-age--red { background: #dc2626; }
@media (max-width: 767px) { #fr_page .rp-tiles--row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; } }

/* ===== Reports -> Query Profit & Loss (modules/views/query_pl.php, assets/js/query_pl.js) ===== */
#qp_page .qp-sub { font-size: 11px; color: #64748b; }
#qp_page .qp-chip { display: inline-block; padding: 0 6px; margin-left: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: #475569; background: #e2e8f0; border-radius: 0; }
#qp_page .qp-sort { cursor: pointer; white-space: nowrap; }
#qp_page .qp-sort.is-asc::after { content: " \25B2"; font-size: 9px; } #qp_page .qp-sort.is-desc::after { content: " \25BC"; font-size: 9px; }
#qp_page .qp-flag { display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: 600; color: #fff; border-radius: 0; white-space: nowrap; }
#qp_page .qp-flag--warn { background: #d97706; } #qp_page .qp-flag--bad { background: #dc2626; } #qp_page .qp-flag--info { background: #7c3aed; }
#qp_page tfoot .qp-total td { background: #f1f5f9; border-top: 2px solid #cbd5e1; font-weight: 700; color: #0f172a; white-space: nowrap; }
#qp_page #qp_table td.text-right { white-space: nowrap; }
@media (max-width: 767px) { #qp_page .rp-tiles--row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; } }
#qp_page #qp_table td:nth-child(1), #qp_page #qp_table td:nth-child(2) { min-width: 150px; }
#qp_page #qp_table td:nth-child(4) { min-width: 100px; white-space: nowrap; }

/* ===== Reports -> Daily Sales Report (modules/views/daily_sales.php, assets/js/daily_sales.js) ===== */
#ds_page .ds-sub { font-size: 11px; color: #64748b; line-height: 1.35; }
#ds_page .ds-empty { padding: 14px; text-align: center; color: #64748b; }
#ds_page .ds-chip { display: inline-block; padding: 0 6px; margin-left: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: #475569; background: #e2e8f0; border-radius: 0; }
#ds_page .ds-status { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; color: #fff; border-radius: 0; white-space: nowrap; }
#ds_page .ds-flag { display: inline-block; padding: 1px 6px; margin: 1px 0; font-size: 10.5px; font-weight: 600; color: #fff; background: #d97706; border-radius: 0; white-space: nowrap; }
#ds_page .ds-sort { cursor: pointer; }
#ds_page .ds-sort.is-asc::after { content: " \25B2"; font-size: 9px; } #ds_page .ds-sort.is-desc::after { content: " \25BC"; font-size: 9px; }
#ds_page #ds_table th, #ds_page #ds_table td { font-size: 12px; vertical-align: top; }
#ds_page #ds_table td:nth-child(1) { white-space: nowrap; }
#ds_page #ds_table td:nth-child(6) { min-width: 118px; word-break: break-word; }
#ds_page #ds_table td:nth-child(7) { min-width: 128px; }
#ds_page #ds_table td.ds-wide { min-width: 150px; }
#ds_page #ds_table th, #ds_page #ds_table td { padding: 6px 7px; }
#ds_page .ds-bar { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
#ds_page .ds-bar-l { width: 120px; flex: none; color: #334155; }
#ds_page .ds-bar-t { flex: 1; height: 12px; background: #e2e8f0; } #ds_page .ds-bar-t span { display: block; height: 100%; }
#ds_page .ds-bar-n { width: 34px; flex: none; text-align: right; font-weight: 700; }
#ds_page .ds-att { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; margin-bottom: 4px; border: 1px solid #e2e8f0; border-left: 3px solid #d97706; background: #fff; color: #0f172a; font-size: 12px; }
#ds_page .ds-att.is-zero { border-left-color: #cbd5e1; color: #94a3b8; }
#ds_page .ds-att.is-on { background: #fff7ed; box-shadow: 0 0 0 1px #d97706 inset; }
#ds_page .ds-att:hover { text-decoration: none; background: #f8fafc; }
@media (max-width: 767px) { #ds_page .rp-tiles--row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; } #ds_page .ds-bar-l { width: 90px; } }

/* ===== Printing the report pages: Query Profit & Loss, Daily Sales Report, Financial Reports =====
   Only the heading, the period line, the tiles and the tables print: no sidebar, top bar, toasts, footer bar, filters, buttons or hint boxes. */
.rp-print-line { display: none; }
@page { size: A4 landscape; margin: 10mm; }
@media print {
	body:has(#qp_page, #ds_page, #fr_page) { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	body:has(#qp_page, #ds_page, #fr_page) .headerbar, body:has(#qp_page, #ds_page, #fr_page) .headerpanel, body:has(#qp_page, #ds_page, #fr_page) .leftpanel,
	body:has(#qp_page, #ds_page, #fr_page) #crm-mini-footer, body:has(#qp_page, #ds_page, #fr_page) #gritter-notice-wrapper, body:has(#qp_page, #ds_page, #fr_page) .modal-backdrop,
	body:has(#qp_page, #ds_page, #fr_page) .swal2-container { display: none !important; }
	body:has(#qp_page, #ds_page, #fr_page) .mainpanel { margin: 0 !important; padding: 0 !important; width: 100% !important; background: #fff !important; }
	body:has(#qp_page, #ds_page, #fr_page) .contentpanel { padding: 0 !important; }
	#qp_page .breadcrumb, #ds_page .breadcrumb, #fr_page .breadcrumb,
	#qp_page .btn, #ds_page .btn, #fr_page .btn, #qp_page .rp-bar-wrap, #ds_page .rp-bar-wrap, #fr_page .rp-bar-wrap,
	#qp_page .crm-line-hint, #ds_page .crm-line-hint, #fr_page .crm-line-hint, #fr_page .fr-bar, #fr_page #fr_tabs,
	#ds_page #ds_attention, #qp_page hr, #ds_page hr, #fr_page hr { display: none !important; }
	#qp_page .panel:has(> .rp-bar-wrap), #ds_page .panel:has(> .rp-bar-wrap), #fr_page .panel:has(> .rp-bar-wrap), #ds_page .col-md-6:has(> .panel > .panel-body > #ds_attention) { display: none !important; }
	#qp_page a[href]:after, #ds_page a[href]:after, #fr_page a[href]:after { content: none !important; }
	#qp_page a, #ds_page a { color: #0f172a !important; text-decoration: none !important; }
	#qp_page .panel, #ds_page .panel, #fr_page .panel { border: 0 !important; box-shadow: none !important; margin-bottom: 8px !important; }
	#qp_page .panel-heading, #ds_page .panel-heading, #fr_page .panel-heading { padding: 0 0 4px !important; border: 0 !important; background: none !important; }
	#qp_page .panel-body, #ds_page .panel-body, #fr_page .panel-body { padding: 4px 0 !important; }
	#qp_page .rp-print-line, #ds_page .rp-print-line { display: block; margin: 0 0 8px; font-size: 11px; color: #334155; }
	#qp_page .table-responsive, #ds_page .table-responsive { overflow: visible !important; border: 0 !important; }
	#qp_page table, #ds_page table, #fr_page table { width: 100% !important; font-size: 9px !important; }
	#qp_page th, #qp_page td, #ds_page th, #ds_page td { padding: 3px 4px !important; min-width: 0 !important; }
	#qp_page thead, #ds_page thead { display: table-header-group; } #qp_page tfoot, #ds_page tfoot { display: table-footer-group; }
	#qp_page tr, #ds_page tr, #fr_page tr { break-inside: avoid; }
	#qp_page th, #ds_page th { font-size: 8px !important; letter-spacing: 0 !important; white-space: normal !important; }
	#qp_page .qp-sub, #ds_page .ds-sub { font-size: 8px !important; }
	#qp_page #qp_table td:nth-child(1), #qp_page #qp_table td:nth-child(2) { min-width: 85px !important; }
	#ds_page #ds_table td:nth-child(1), #ds_page #ds_table td:nth-child(6), #ds_page #ds_table td:nth-child(7), #ds_page #ds_table td.ds-wide { min-width: 80px !important; }
	#qp_page .qp-flag, #ds_page .ds-flag, #ds_page .ds-status { font-size: 8px !important; padding: 0 4px !important; }
	#qp_page td.text-right, #ds_page td.text-right { white-space: nowrap; }
	#qp_page .rp-tiles--row, #ds_page .rp-tiles--row { grid-auto-flow: column !important; grid-template-columns: none !important; overflow: visible !important; gap: 4px !important; }
	#qp_page .ar-tile, #ds_page .ar-tile { padding: 4px 6px !important; box-shadow: none !important; border: 1px solid #cbd5e1; }
	#qp_page .ar-tile-n, #ds_page .ar-tile-n { font-size: 13px !important; }
	#qp_page .rp-tile > .fa, #ds_page .rp-tile > .fa { display: none; }
	#ds_page .row > [class*="col-md-"] { width: 50%; float: left; }
	#ds_page #ds_sources, #ds_page #ds_handlers { font-size: 9px !important; }
}
@media print { #qp_page .qp-chip, #ds_page .ds-chip { font-size: 7px !important; padding: 0 3px !important; } }
@media print { #ds_page #ds_table td, #ds_page #ds_table th, #qp_page #qp_table td, #qp_page #qp_table th { font-size: 9px !important; } #ds_page #ds_table th, #qp_page #qp_table th { font-size: 8px !important; } }

/* Dashboard overview by department (assets/js/d/dashboard_overview.js) */
.crm-ov { margin: 0 0 18px; }
.crm-ov.is-loading { opacity: .55; }
.crm-ov-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.crm-ov-head h4 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #2574ab; }
.crm-ov-head p { margin: 2px 0 0; font-size: 11.5px; color: #64748b; }
.crm-ov-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.crm-ov-tile { display: flex; gap: 10px; align-items: center; padding: 12px; background: #fff; border: 1px solid #d3d7de; border-left: 3px solid #2574ab; }
.crm-ov-tile > .fa { font-size: 20px; color: #2574ab; width: 26px; text-align: center; }
.crm-ov-tile strong { display: block; font-size: 18px; color: #262b36; line-height: 1.2; }
.crm-ov-l { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748b; }
.crm-ov-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; font-size: 11px; }
.crm-ov-f small { color: #94a3b8; }
.crm-ov-tile.is-teal { border-left-color: #259dab; } .crm-ov-tile.is-teal > .fa { color: #259dab; }
.crm-ov-tile.is-indigo { border-left-color: #6366f1; } .crm-ov-tile.is-indigo > .fa { color: #6366f1; }
.crm-ov-tile.is-green { border-left-color: #10b981; } .crm-ov-tile.is-green > .fa { color: #10b981; }
.crm-ov-tile.is-amber { border-left-color: #e6ad5c; } .crm-ov-tile.is-amber > .fa { color: #e6ad5c; }
.crm-ov-tile.is-red { border-left-color: #dc2626; } .crm-ov-tile.is-red > .fa { color: #dc2626; }
.crm-ov-panel { margin-top: 12px; padding: 12px 14px; background: #fff; border: 1px solid #d3d7de; }
.crm-ov-panel h5 { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #2574ab; }
.crm-ov-svg { width: 100%; height: auto; display: block; }
.crm-ov-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: #475569; }
.crm-ov-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; }
.crm-ov-note { margin: 10px 0 0; font-size: 12px; color: #64748b; }

/* Admin dashboard: folds (Needs attention / My day) and the two-up inflow cards */
.crm-fold { margin: 0 0 14px; background: #fff; border: 1px solid #d3d7de; border-top: 3px solid #2574ab; }
.crm-fold.is-clear { border-top-color: #10b981; }
.crm-fold-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: transparent; border: 0; text-align: left; cursor: pointer; }
.crm-fold-head[disabled] { cursor: default; }
.crm-fold-head:focus-visible { outline: 2px solid #2574ab; outline-offset: -2px; }
.crm-fold-t { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #262b36; white-space: nowrap; }
.crm-fold-t .fa { margin-right: 6px; color: #2574ab; }
.crm-fold-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.crm-chip { padding: 2px 8px; font-size: 10.5px; font-weight: 700; background: #eef1f5; color: #475569; border-radius: 10px; }
.crm-chip.is-red { background: #fde8e8; color: #b91c1c; }
.crm-chip.is-amber { background: #fef3c7; color: #92400e; }
.crm-chip.is-ok { background: #dcfce7; color: #166534; }
.crm-fold-caret { color: #64748b; transition: transform .25s ease; }
.crm-fold.is-open .crm-fold-caret { transform: rotate(180deg); }
.crm-fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.crm-fold.is-open .crm-fold-body { grid-template-rows: 1fr; }
.crm-fold-in { overflow: hidden; min-height: 0; padding: 0 12px; }
.crm-fold.is-open .crm-fold-in { padding: 4px 12px 2px; }
.crm-fold-in > .panel { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .crm-fold-body, .crm-fold-caret { transition: none; } }

/* Today at a glance (assets/js/d/dashboard_overview.js) */
.crm-gl { margin: 0 0 12px; padding: 12px 14px; background: #fff; border: 1px solid #d3d7de; border-top: 3px solid #1f3a52; }
.crm-gl-title { margin-bottom: 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #262b36; }
.crm-gl-title .fa { margin-right: 6px; color: #2574ab; }
.crm-gl-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.crm-gl-gt { margin-bottom: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748b; }
.crm-gl-tiles { display: grid; gap: 6px; }
.crm-gl-tile { display: block; padding: 7px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8; color: inherit; text-decoration: none; transition: background .15s ease, transform .15s ease; }
a.crm-gl-tile:hover { background: #eef4fa; transform: translateX(2px); text-decoration: none; }
.crm-gl-tile.is-ok { border-left-color: #10b981; } .crm-gl-tile.is-warn { border-left-color: #e6ad5c; } .crm-gl-tile.is-bad { border-left-color: #dc2626; } .crm-gl-tile.is-info { border-left-color: #2574ab; }
.crm-gl-l { display: block; font-size: 11px; color: #475569; }
.crm-gl-tile strong { font-size: 17px; color: #262b36; line-height: 1.25; }
.crm-gl-s { display: block; font-size: 10.5px; color: #94a3b8; }
.crm-gl-watch { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; font-size: 11.5px; }
.crm-gl-wt { font-weight: 700; color: #92400e; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .crm-gl-tile { transition: none; } a.crm-gl-tile:hover { transform: none; } }

/* Performance cards, one organised layout for all six: header / five KPIs in one row / breakdown beside the chart / attention line */
.crm-pf-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 16px; }
.crm-pf-card > * { grid-column: 1 / -1; min-width: 0; }
.crm-pf-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; }
.crm-pf-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: #e8edf3; border-bottom: 1px solid #e8edf3; }
.crm-pf-kpi { grid-column: span 2; min-width: 0; padding: 10px 12px; background: #fff; border-right: 0; }
.crm-pf-kpi:nth-child(n+4) { grid-column: span 3; }
.crm-pf-kpi-label { min-height: 24px; line-height: 12px; }
.crm-pf-kpi strong { font-size: 19px; }
.crm-pf-kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 16px; }
.crm-pf-kpi-foot small { display: inline; }
.crm-pf-split { grid-column: 1; align-self: stretch; border-bottom: 0; border-right: 1px solid #eef2f7; }
.crm-pf-split-items { flex-direction: column; flex-wrap: nowrap; gap: 5px; }
.crm-pf-split-item { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px 7px; }
.crm-pf-split-item b { margin-left: 0; font-family: monospace; }
.crm-pf-split ~ .crm-pf-chart { grid-column: 2; }
.crm-pf-chart { padding: 10px 14px 8px; }
.crm-pf-chart-legend { flex-direction: row; row-gap: 2px; }
.crm-pf-attn, .crm-pf-ok { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .crm-pf-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .crm-pf-kpi, .crm-pf-kpi:nth-child(n+4) { grid-column: auto; }
}
@media (max-width: 767px) {
    .crm-pf-split { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #eef2f7; }
    .crm-pf-split ~ .crm-pf-chart { grid-column: 1 / -1; }
}
/* Dashboard right column follows the scroll beside the long performance cards (instead of leaving an empty band); capped so it never outgrows the screen */
@media (min-width: 992px) { .dash-right { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; } }
/* Dashboard on a phone: wide tables scroll inside their panel instead of widening the whole page */
@media (max-width: 767px) { .dash-left table.table, .dash-right table.table { display: block; max-width: 100%; overflow-x: auto; } }
@media (max-width: 767px) { .dash-left .panel-heading, .dash-right .panel-heading { flex-wrap: wrap !important; row-gap: 6px; } .dash-left .panel-heading .btn { white-space: normal; } }
@media (max-width: 767px) { .dash-left .panel-heading > div, .dash-left .panel-heading a { white-space: normal !important; max-width: 100%; flex-wrap: wrap; } }

/* CRM chart kit (assets/js/d/crm_charts.js, commands/dashboard-design-system.md) */
.crm-ch-svg { width: 100%; height: auto; display: block; max-height: 240px; }
.crm-ch-grid { stroke: #e5e7eb; stroke-width: 1; }
.crm-ch-tick { font-size: 10px; fill: #6b7280; }
.crm-ch-center { font-size: 20px; font-weight: 700; fill: #1e293b; }
.crm-ch-ring-bg { fill: none; stroke: #eef2f7; stroke-width: 9; }
.crm-ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: #475569; }
.crm-ch-legend i, .crm-ch-key i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; }
.crm-ch-empty { padding: 22px 12px; text-align: center; font-size: 12px; color: #94a3b8; }
.crm-ch-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.crm-ch-donut .crm-ch-svg { width: 150px; flex: 0 0 150px; }
.crm-ch-key { flex: 1 1 140px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.crm-ch-key li { display: flex; align-items: center; gap: 4px; padding: 2px 0; color: #475569; }
.crm-ch-key li span { flex: 1 1 auto; } .crm-ch-key li b { font-family: monospace; color: #1e293b; }
.crm-ch-progress { display: flex; align-items: center; gap: 14px; }
.crm-ch-progress .crm-ch-svg { width: 96px; flex: 0 0 96px; }
.crm-ch-progress strong { display: block; font-size: 18px; color: #1e293b; } .crm-ch-progress span { font-size: 11.5px; color: #64748b; }
.crm-ch-spark { width: 100%; height: 28px; display: block; }
.crm-ch-funnel { margin: 0; padding: 0; list-style: none; }
.crm-ch-funnel li { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; margin-bottom: 4px; background: #f8fafc; border: 1px solid #e2e8f0; overflow: hidden; font-size: 12.5px; }
.crm-ch-funnel .crm-ch-bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .16; transition: width .3s ease; }
.crm-ch-funnel li > span, .crm-ch-funnel li > b, .crm-ch-funnel li > small { position: relative; }
.crm-ch-funnel li > span { flex: 1 1 auto; color: #334155; } .crm-ch-funnel b { font-family: monospace; color: #1e293b; } .crm-ch-funnel small { color: #94a3b8; font-size: 10.5px; }
.crm-ch-kpi { display: block; padding: 8px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8; color: inherit; text-decoration: none; }
a.crm-ch-kpi:hover { background: #eef4fa; text-decoration: none; }
.crm-ch-kpi.is-ok { border-left-color: #10b981; } .crm-ch-kpi.is-warn { border-left-color: #e6ad5c; } .crm-ch-kpi.is-bad { border-left-color: #dc2626; } .crm-ch-kpi.is-info { border-left-color: #2574ab; }
.crm-ch-kpi strong { display: block; font-size: 20px; line-height: 1.2; color: #1e293b; } .crm-ch-l { display: block; font-size: 11px; color: #475569; } .crm-ch-s { display: block; font-size: 10.5px; color: #94a3b8; }
.crm-ch-delta { margin-right: 5px; font-weight: 700; } .crm-ch-delta.is-up { color: #166534; } .crm-ch-delta.is-down { color: #991b1b; } .crm-ch-delta.is-flat { color: #64748b; }
.crm-ch-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; } .crm-ch-gt { margin-bottom: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #64748b; } .crm-ch-group .crm-ch-kpi { margin-bottom: 6px; }
.crm-ch-table { margin: 0; font-size: 12px; } .crm-ch-more { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600; }
.crm-ch-list { margin: 0; padding: 0; list-style: none; } .crm-ch-list li { padding: 6px 8px; border-left: 3px solid #94a3b8; background: #f8fafc; margin-bottom: 4px; font-size: 12px; } .crm-ch-list li small { display: block; color: #94a3b8; }
.crm-ch-list li.is-bad { border-left-color: #dc2626; } .crm-ch-list li.is-warn { border-left-color: #e6ad5c; } .crm-ch-list li.is-ok { border-left-color: #10b981; } .crm-ch-list a { color: inherit; display: block; }
@media (prefers-reduced-motion: reduce) { .crm-ch-funnel .crm-ch-bar { transition: none; } }

/* Dashboard layout zones and data widgets (modules/views/dashboard_zone.php, dashboard_widget.php, assets/js/d/dashboard_widgets.js) */
.crm-zone-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.crm-zone-grid > * { grid-column: 1 / -1; min-width: 0; }
.crm-zone-grid > .crm-wd { grid-column: span var(--w, 12); }
.crm-wd { background: #fff; border: 1px solid #d3d7de; border-top: 3px solid #2574ab; }
.crm-wd.is-loading .crm-wd-body { opacity: .55; transition: opacity .15s; }
.crm-wd-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.crm-wd-head h5 { flex: 1 1 auto; margin: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1e293b; }
.crm-wd-period { font-size: 11px; color: #64748b; }
.crm-wd-info { color: #94a3b8; cursor: help; } .crm-wd-info:hover, .crm-wd-info:focus { color: #2574ab; outline: none; }
.crm-wd-body { padding: 12px 14px; min-height: 90px; }
@media (max-width: 767px) { .crm-zone-grid > .crm-wd { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .crm-wd.is-loading .crm-wd-body { transition: none; } }

/* Dashboard Designer (modules/views/dashboard_designer.php, assets/js/dashboard_designer.js) and the draft preview banner */
.dd-intro h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #2574ab; } .dd-intro p { margin: 0 0 12px; color: #64748b; font-size: 12.5px; max-width: 920px; }
.dd-bar .panel-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; } .dd-bar label { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; } .dd-bar select { width: auto; min-width: 170px; }
.dd-spacer { flex: 1 1 auto; } .dd-pill { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 10px; background: #e2e8f0; color: #475569; }
.dd-pill.is-draft { background: #fef3c7; color: #92400e; } .dd-pill.is-pub { background: #dcfce7; color: #166534; } .dd-pill.is-dirty { background: #fde8e8; color: #b91c1c; }
.dd-groups { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; } .dd-chip { border: 1px solid #cbd5e1; background: #fff; padding: 2px 9px; font-size: 11px; font-weight: 600; color: #475569; border-radius: 10px; }
.dd-chip.is-on { background: #2574ab; border-color: #2574ab; color: #fff; }
.dd-gallery { max-height: 68vh; overflow-y: auto; } .dd-card { padding: 8px 10px; margin-bottom: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #2574ab; cursor: grab; }
.dd-card.is-used { opacity: .55; cursor: default; } .dd-card-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .dd-card-h .fa { color: #2574ab; }
.dd-kind { margin-left: auto; font-size: 10px; font-weight: 600; color: #64748b; background: #eef2f7; padding: 1px 7px; border-radius: 8px; } .dd-card-d { margin: 4px 0; font-size: 11.5px; color: #64748b; }
.dd-card-f { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10.5px; color: #94a3b8; } .dd-used { font-weight: 700; color: #166534; }
.dd-zone .panel-title small { margin-left: 6px; font-weight: 400; text-transform: none; color: #94a3b8; letter-spacing: 0; }
.dd-drop { min-height: 70px; } .dd-drop.is-over, .dd-item.is-over { outline: 2px dashed #2574ab; outline-offset: -2px; background: #f0f7fc; } .dd-empty { margin: 14px 0; text-align: center; color: #94a3b8; font-size: 12px; }
.dd-item { margin-bottom: 8px; background: #fff; border: 1px solid #d3d7de; border-left: 3px solid #259dab; } .dd-item-h { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: #f8fafc; font-size: 12.5px; } .dd-grip { color: #94a3b8; cursor: grab; }
.dd-tools { margin-left: auto; } .dd-item-b { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; } .dd-opt { margin: 0; font-size: 11px; color: #64748b; font-weight: 600; } .dd-opt .form-control { display: inline-block; width: auto; min-width: 90px; margin-left: 4px; height: 26px; padding: 2px 6px; font-size: 12px; }
.dd-item-f { padding: 4px 10px 8px; font-size: 11px; color: #64748b; }
.crm-preview-banner { margin: 0 0 14px; padding: 9px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-left: 3px solid #e6ad5c; color: #9a3412; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .dd-card, .dd-item { transition: none; } }

/* Personal choices: the Customize bar and window, and collapsing a widget card */
.crm-customize-bar { text-align: right; margin: -6px 0 10px; }
#crm_customize_body h5 { margin: 12px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; }
.crm-cz-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 4px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12.5px; }
.crm-cz-row .crm-cz-t { flex: 1 1 auto; } .crm-cz-row label { margin: 0 6px 0 0; font-weight: 400; font-size: 11.5px; color: #475569; white-space: nowrap; }
.crm-wd-fold { border: 0; background: transparent; color: #94a3b8; padding: 0 2px; } .crm-wd-fold:hover { color: #2574ab; } .crm-wd-fold .fa { transition: transform .2s ease; }
.crm-wd.is-collapsed .crm-wd-body { display: none; } .crm-wd.is-collapsed .crm-wd-fold .fa { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .crm-wd-fold .fa { transition: none; } }

/* Fleet filters in the house style: labelled fields on a grid, one control height, selectpicker selects (modules/views/fleet_*.php) */
.fl-panel .panel-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1f3a52; } .fl-panel .panel-title .fa { margin-right: 6px; color: #2574ab; } .fl-panel .panel-title small { margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.fl-fields .row { margin-bottom: 10px; } .fl-fields .control-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: #475569; }
.fl-fields .form-control, .fl-fields .bootstrap-select > .dropdown-toggle { height: 34px; border-radius: 0; font-size: 12.5px; } .fl-fields .rp-date { background: #fff; }
.fl-fields .bootstrap-select { width: 100% !important; } .fl-fields .bootstrap-select > .dropdown-toggle { padding: 6px 10px; }
.fl-group { margin: 4px 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1f3a52; } .fl-group .fa { margin-right: 5px; color: #2574ab; } .fl-group small { margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }
.fl-group:not(:first-child) { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
.fl-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .fl-reset-col { padding-top: 19px; }
@media (max-width: 767px) { .fl-fields [class*="col-sm-"] { margin-bottom: 8px; } .fl-reset-col { padding-top: 0; } }