/* ===============================================================================
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;
}

/* 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;
}

.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-card {
  display: flex;
  flex-direction: column;
  height: 185px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #eab308;
  border-radius: 0;
  overflow: hidden;
}

.note-card--done {
  opacity: 0.72;
}

.note-card--done .note-title-text,
.note-card--done .note-body-content {
  text-decoration: line-through;
}

.note-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.note-card-head .note-title-text {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
}

.note-card-actions a {
  color: #475569;
  cursor: pointer;
}

.note-card-actions a:hover {
  color: #1f3a52;
}

.note-card-actions a.note-action-danger {
  color: #b02525;
}

.note-card-actions a.note-action-danger:hover {
  color: #8e1c1c;
}

.note-card .note-body-content {
  flex: 1 1 auto;
  padding: 10px 12px;
  overflow-y: auto;
  font-size: 11.5px;
  line-height: 1.45;
  color: #334155;
  word-break: break-word;
}

.note-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.note-card-foot .btn {
  border-radius: 0;
  font-weight: 700;
}

.note-card-date {
  font-size: 9.5px;
  color: #64748b;
}

.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;
}

.note-card-container {
  transition: opacity 0.25s ease;
}

/* ===============================================================================
   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;
}

/* 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;
  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; }

/* 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-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; }

/* 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; }
.crm-callout-success { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; }
.crm-callout-success > i { color: #16a34a; }