/* =====================================================================
   Vendor Callout — custom styles
   App palette: deep petroleum navy + safety orange accent
   ===================================================================== */
:root {
  --vc-navy: #141b22;        /* ink — matches the public site */
  --vc-navy-2: #1b2530;
  --vc-navy-3: #253241;
  --vc-accent: #e67612;      /* bright oilfield orange — buttons, fills, highlights */
  --vc-accent-dark: #b85809; /* pressed / hover, and readable orange for body-text links */
  --vc-bg: #f6f3ec;          /* warm sand */
  --vc-line: #ece3d2;        /* warm hairline */
  --vc-muted: #8a7a64;
}

body { background: var(--vc-bg); }

/* ---------- Scrollbars blend with the theme ---------- */
* { scrollbar-width: thin; scrollbar-color: #cdbc9c transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d5c6a8; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #b39d77; }
.sidebar { scrollbar-color: #2c3a48 transparent; }
.sidebar::-webkit-scrollbar-thumb { background-color: #2c3a48; }
.sidebar::-webkit-scrollbar-thumb:hover { background-color: #3b4d5f; }

/* Text links carry the orange app-wide and site-wide. Inline link text uses the
   deeper shade (4.5:1 on white — the bright fill colour would fail that on body
   copy) and brightens to the full accent on hover. */
.app-body, .public-body {
  --bs-link-color: var(--vc-accent-dark);
  --bs-link-hover-color: var(--vc-accent);
  --bs-link-color-rgb: 184, 88, 9;
  --bs-link-hover-color-rgb: 230, 118, 18;
}

/* ---------- Brand ---------- */
.brand, .navbar-brand { text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: #fff; font-size: 1.1rem;
}
/* The monogram already carries the brand colour; on the navy chrome it needs
   no tile behind it. Anywhere light, use the tiled brand.svg instead. */
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { font-weight: 700; font-size: 1.15rem; color: #fff; letter-spacing: .3px; }
.brand-text span { color: var(--vc-accent); }

/* ---------- App shell ---------- */
.app-wrap { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex-shrink: 0; background: var(--vc-navy);
  padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem 1rem; }
.sidebar .nav-link {
  color: #b8c7d6; border-radius: 8px; padding: .55rem .75rem; font-size: .95rem;
}
.sidebar .nav-link:hover { color: #fff; background: var(--vc-navy-2); }
.sidebar .nav-link.active { color: #fff; background: var(--vc-accent); }
/* Count chip on a sidebar item. The link becomes a flex row so the chip sits
   hard right; in the collapsed icon rail it shrinks to a corner marker. */
.sidebar .nav-link { display: flex; align-items: center; }
.sidebar .nav-link .nav-label { flex: 1 1 auto; min-width: 0; }
.nav-chip {
  flex: 0 0 auto; margin-left: .5rem;
  background: var(--vc-accent); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.5;
  min-width: 1.4rem; text-align: center;
  border-radius: 999px; padding: 0 .4rem;
}
.sidebar .nav-link.active .nav-chip { background: rgba(255,255,255,.28); }
@media (min-width: 992px) {
  body.sidebar-mini .sidebar .nav-link { position: relative; justify-content: center; }
  body.sidebar-mini .nav-chip {
    position: absolute; top: .15rem; right: .15rem; margin-left: 0;
    min-width: auto; font-size: .6rem; padding: 0 .25rem;
  }
}

.nav-section {
  color: #6d8299; text-transform: uppercase; font-size: .7rem; letter-spacing: .12em;
  padding: 1rem .75rem .35rem; list-style: none;
}
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--vc-navy-2); color: #fff; display: flex; align-items: center;
  padding: .55rem 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.topbar .text-body { color: #fff !important; }
.topbar .text-muted { color: #b8c7d6 !important; }
.content { padding: 1.5rem; flex: 1; }
.app-footer { padding: .85rem 1.5rem; color: var(--vc-muted); font-size: .85rem; border-top: 1px solid var(--vc-line); }
.app-footer .footer-link { color: var(--vc-accent); }
.app-footer .footer-link:hover { color: var(--vc-accent-dark); }

@media (max-width: 991.98px) {
  .sidebar { position: fixed; z-index: 1045; left: -280px; transition: left .25s ease; }
  .sidebar.open { left: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
}

/* Collapsed icon-rail sidebar (desktop) */
@media (min-width: 992px) {
  .sidebar { transition: width .2s ease; }
  body.sidebar-mini .sidebar { width: 68px; padding: 1rem .4rem; }
  body.sidebar-mini .sidebar .brand-text,
  body.sidebar-mini .sidebar .nav-section,
  body.sidebar-mini .sidebar .nav-label { display: none; }
  body.sidebar-mini .sidebar .brand { justify-content: center; padding: .35rem 0 1rem; }
  body.sidebar-mini .sidebar .nav-link { text-align: center; padding: .6rem .3rem; }
  body.sidebar-mini .sidebar .nav-link i { margin-right: 0 !important; font-size: 1.15rem; }
}

/* Floating preview of the sent callout notification email */
.vc-email-pop {
  position: absolute; z-index: 1080; width: 372px; height: 420px;
  background: #f6f3ec; border: 1px solid var(--vc-line); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(40,28,14,.30); overflow: hidden;
}
.vc-email-pop iframe {
  border: 0; width: 680px; height: 780px;
  transform: scale(.55); transform-origin: top left;
  pointer-events: none;
}
td[data-email] { cursor: help; }

/* ---------- Help & documentation (GitHub-docs style) ---------- */
.help-wrap { display: flex; gap: 2.25rem; align-items: flex-start; }
.help-nav {
  width: 240px; flex-shrink: 0; position: sticky; top: 1rem;
  max-height: calc(100vh - 7rem); overflow-y: auto; padding-right: .25rem;
}
.help-nav .help-group {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: #a8916e; margin: 1rem 0 .3rem; padding-left: .75rem;
}
.help-nav .nav-link {
  display: block; padding: .3rem .75rem; font-size: .9rem; color: var(--vc-muted);
  border-left: 2px solid var(--vc-line); border-radius: 0;
}
.help-nav .nav-link:hover { color: var(--vc-accent); }
.help-nav .nav-link.active { color: var(--vc-accent); border-left-color: var(--vc-accent); font-weight: 600; background: #fbf1ea; }
.help-content { max-width: 840px; min-width: 0; }
.help-content section { margin-bottom: .5rem; }
.help-content h2 {
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1.8rem;
  border-bottom: 2px solid var(--vc-line); padding-bottom: .4rem;
  margin: 2.4rem 0 1rem; scroll-margin-top: 1rem;
}
.help-content section:first-child h2 { margin-top: 0; }
.help-content h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .5rem; color: #3a2c1a; }
.help-content p, .help-content li { line-height: 1.65; color: #40342a; }
.help-content li { margin-bottom: .3rem; }
.help-tip {
  background: #fbf1ea; border-left: 3px solid var(--vc-accent);
  border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin: 1rem 0; color: #5d4632;
}
.help-content kbd {
  background: #2b2118; border-radius: 4px; padding: .1rem .35rem; font-size: .8em;
}
@media (max-width: 991.98px) {
  .help-wrap { flex-direction: column; }
  .help-nav { position: static; width: 100%; max-height: none; display: flex; flex-wrap: wrap; gap: .1rem .25rem; }
  .help-nav .help-group { width: 100%; margin: .5rem 0 .1rem; }
  .help-nav .nav-link { border-left: 0; border-radius: 6px; padding: .25rem .6rem; }
  .help-nav input { width: 100%; }
}

/* ---------- Workspace / impersonation banners ---------- */
.workspace-bar {
  background: #b06a1f; color: #fff; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: .45rem 1rem; position: sticky; top: 0; z-index: 1050;
}
.maintenance-bar {
  background: #b3261e; color: #fff; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: .45rem 1rem; position: sticky; top: 0; z-index: 1051;
}
.impersonation-bar {
  background: #7c3050; color: #fff; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: .45rem 1rem; position: sticky; top: 0; z-index: 1050;
}

/* ---------- Components ---------- */
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #dfe6ee; }
.avatar-lg { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: #dfe6ee; }

/* A chart that should fill whatever height its card ends up with. Chart.js
   needs a parent with a definite size, so the canvas is wrapped rather than
   carrying a fixed height attribute. */
.chart-fill { position: relative; height: 100%; min-height: 240px; }
.chart-fill > canvas { position: absolute; inset: 0; }

.stat-card { border: 0; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,38,58,.08); }
.stat-card .icon {
  width: 46px; height: 46px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-card .card-body { padding: 1rem 1.1rem; }
.stat-card .icon { flex-shrink: 0; }
.stat-card .stat-text { min-width: 0; }
/* A money figure has no spaces, so "anywhere" happily split $137,542.00 across
   two lines. Numbers stay on one line and shrink a little on a narrow card
   instead; labels still wrap, but only between words. */
.stat-card .value {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 700; line-height: 1.15;
  white-space: nowrap; overflow-wrap: normal;
}
.stat-card .label {
  color: #7a8794; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.25; overflow-wrap: break-word;
}
.stat-card .sub { color: #b08968; font-size: .78rem; font-weight: 600; margin-top: .1rem; overflow-wrap: break-word; }
.text-amber { color: #d98314; }
.vc-idle-count {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 3rem; font-weight: 700; line-height: 1; color: var(--vc-accent);
}

.card { border: 0; border-radius: 14px; box-shadow: 0 1px 4px rgba(60,44,26,.10); }
.card-header { background: transparent; border-bottom: 1px solid var(--vc-line); font-weight: 600; }

.app-body .content h1, .app-body .content h2, .app-body .modal-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  letter-spacing: .015em;
}

.table > :not(caption) > * > * { padding: .6rem .65rem; border-color: var(--vc-line); }

/* Compact, single-line rows so badges and values align across every row.
   Sub-text (locations, credit badges, emails) flows inline; wide tables
   scroll horizontally instead of wrapping. Long free-text cells opt out
   with .wrap-cell. */
.app-body .table { font-size: .875rem; }
.app-body .table-responsive > .table:not(.table-sm) th,
.app-body .table-responsive > .table:not(.table-sm) td { white-space: nowrap; }
.app-body .table td > div.small { display: inline; margin-left: .4rem; }
.app-body .table td.wrap-cell { white-space: normal; min-width: 260px; }

/* Tables that must fit their card instead of scrolling sideways.
   The single-line default above is right for dense operational tables you
   scan down a column of. It cannot survive a row carrying a company name, a
   hostname, an email and three badges — that row is twice the width of the
   screen before it starts.

   Note the selectors: they repeat the whole prefix of the nowrap rule above,
   including :not(.table-sm), because that rule carries four classes and would
   otherwise win on specificity and silently undo all of this.

   Opting in with .vc-table-fit changes only what has to change. Cells marked
   .vc-wrap break at spaces; every other cell keeps its single line, so a
   short value like "Monthly" or "20 Units" is never split down the middle.
   Only the genuinely unbreakable strings — an email, a hostname — carry
   .vc-break and may break mid-word. Breaking everything was the first attempt
   and it produced "Monthl y", which is worse than a scrollbar. */
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) th.vc-wrap,
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) td.vc-wrap { white-space: normal; }
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) td > div.small {
  display: block; margin-left: 0;
}
/* An email is information, so it is only broken mid-word as a last resort:
   break-word keeps it whole while the column has room, and the narrow-screen
   block below switches to anywhere, where the choice is a broken address or a
   scrollbar. */
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) .vc-break { overflow-wrap: break-word; }
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) td.vc-wrap .badge { margin-bottom: .15rem; }

/* Headers set the floor more often than the data does. "BALANCE DUE" is one
   uppercase, letter-spaced line plus a sort arrow — 141px for a column whose
   widest value is "$0.00". Letting the label wrap costs a second header line
   and buys back the width that was forcing the scrollbar. */
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) thead th { white-space: normal; }
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) thead th.vc-sort { white-space: normal; }

/* Row actions. Three text buttons welded to one line were 217px of a 936px
   table — a quarter of the width for a column with no data in it. Letting
   them wrap costs a taller row only on the narrow screens where the space is
   actually contested; at laptop width and above they still sit on one line. */
/* width:1% is the shrink-to-fit idiom for a table cell: the browser treats it
   as "as little as possible", which in an auto layout resolves to exactly the
   content width. Without it the actions column is handed an equal share and
   stacks its three buttons vertically while the columns beside it sit half
   empty. Below 1200px it is allowed to wrap, because there the space really
   has run out. */
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) th.vc-fit,
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) td.vc-actions,
.app-body .table-responsive > .table.vc-table-fit:not(.table-sm) td.vc-fit {
  width: 1%; white-space: nowrap;
}
.app-body .table.vc-table-fit td.vc-actions > *,
.app-body .table.vc-table-fit td.vc-actions .btn { margin-bottom: .15rem; }

/* Launch-portal icon beside a tenant's name. No label: the hostname is the
   company's own slug, so writing it out on every row repeated what the name
   already said and cost real column width doing it. Kept a comfortable tap
   target rather than shrinking to the glyph. */
.vc-launch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; margin-left: .25rem;
  border-radius: 4px; color: var(--vc-muted); text-decoration: none;
  vertical-align: -.2rem;
}
.vc-launch:hover, .vc-launch:focus-visible { color: var(--vc-accent, #e67612); background: #f3ece0; }

/* These thresholds are about the table's own width, not the window's, so they
   are container queries rather than media queries. The sidebar takes roughly
   250px, and it collapses at 992px — so a viewport-based rule fires at the
   wrong moment twice: the table is cramped at 1366px with the sidebar open and
   roomy at 900px with it shut. Asking the scroll container how wide IT is
   sidesteps the whole problem, and keeps working if the sidebar ever changes.

   Five of these columns hold single unbreakable tokens — "Monthly",
   "20 Units", "$0.00" — and no amount of wrapping makes them narrower; the
   only give left is the space around them and the actions stacking. Both are
   preferable to hiding columns, which is the usual answer and a worse one:
   the point of this table is comparing tenants across all of it. */
.app-body .table-responsive { container-type: inline-size; container-name: vctable; }

@container vctable (max-width: 1150px) {
  .app-body .table-responsive > .table.vc-table-fit:not(.table-sm) { font-size: .8rem; }
  .app-body .table.vc-table-fit > :not(caption) > * > * { padding: .45rem .4rem; }
  .app-body .table.vc-table-fit thead th { font-size: .7rem; letter-spacing: .03em; }
  .app-body .table.vc-table-fit .btn-sm { --bs-btn-padding-x: .4rem; --bs-btn-font-size: .74rem; }
  .app-body .table.vc-table-fit .badge { font-size: .64rem; }
}

/* Second tier. Compacting the type buys about 50px on the action buttons
   alone, which is enough to keep all three on one line well below the point
   where the first tier kicks in. Only when even that will not fit do they
   stack — the last thing to give, because a three-line cell sets the height
   of the whole row. */
@container vctable (max-width: 940px) {
  .app-body .table-responsive > .table.vc-table-fit:not(.table-sm) td.vc-actions { white-space: normal; }
  .app-body .table-responsive > .table.vc-table-fit:not(.table-sm) .vc-break { overflow-wrap: anywhere; }
}

.table thead th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--vc-muted); background: #fbf8f1; border-bottom: 2px solid #e5d8c2;
}
.app-body .table-hover > tbody > tr:hover > * { background-color: #f7efe1; }
.app-body .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #fbf8f2; }

/* ---------- Enhanced tables: toolbar, pagination, expand ---------- */
.vc-tablebar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: .65rem 1rem; border-bottom: 1px solid var(--vc-line);
}
.vc-search { max-width: 240px; }
.vc-tablebar .vc-tools { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.vc-tools .btn { color: var(--vc-muted); border-color: var(--vc-line); }
.vc-tools .btn:hover { color: var(--vc-accent); border-color: var(--vc-accent); background: #fbf1ea; }
.vc-cols-menu { max-height: 320px; overflow-y: auto; min-width: 220px; }
.vc-cols-menu .dropdown-item { cursor: pointer; }
.vc-pagination {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .6rem 1rem; border-top: 1px solid var(--vc-line); font-size: .85rem; color: var(--vc-muted);
}
.vc-pagination .btn { min-width: 2.1rem; padding: .15rem .45rem; font-size: .82rem; color: var(--vc-muted); border-color: var(--vc-line); }
.vc-pagination .btn.active { background: var(--vc-accent); border-color: var(--vc-accent); color: #fff; }
.vc-pagination .btn:hover:not(.active):not(:disabled) { border-color: var(--vc-accent); color: var(--vc-accent); }
.vc-expand-btn { background: none; border: 0; color: var(--vc-muted); padding: .1rem .35rem; line-height: 1; }
.vc-expand-btn:hover { color: var(--vc-accent); }

/* ---------- Searchable dropdowns (Tom Select) ---------- */
.ts-wrapper.form-select { padding: 0; background-image: none; }
.ts-control {
  border-radius: 10px !important; border-color: #ddd3c2 !important;
  padding: .45rem .75rem !important; min-height: calc(2.4rem + 2px);
}
.form-select-sm + .ts-wrapper .ts-control,
.ts-wrapper.form-select-sm .ts-control { padding: .28rem .6rem !important; min-height: calc(1.9rem + 2px); font-size: .875rem; }
.ts-wrapper.focus .ts-control {
  border-color: var(--vc-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(193,85,47,.15) !important;
}
.ts-dropdown {
  border-radius: 10px; border: 1px solid var(--vc-line);
  box-shadow: 0 12px 32px rgba(60,44,26,.18); overflow: hidden;
  min-width: max-content; max-width: 320px;
}
.ts-dropdown .option { padding: .45rem .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-dropdown .active { background: #fbe3d2; color: var(--vc-accent-dark); }
.ts-dropdown .selected { background: var(--vc-accent); color: #fff; }
.ts-dropdown-input {
  border-radius: 8px !important; border: 1px solid var(--vc-line) !important;
  box-shadow: none !important; margin: .35rem; width: calc(100% - .7rem) !important;
}
.ts-dropdown-input:focus { border-color: var(--vc-accent) !important; }

th.vc-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.vc-sort i { margin-left: .3rem; opacity: .35; font-size: .7rem; }
th.vc-sort:hover i { opacity: .7; }
th.vc-sort.active { color: var(--vc-accent); }
th.vc-sort.active i { opacity: 1; color: var(--vc-accent); }

.vc-expand-modal .modal-dialog { max-width: 85vw; width: 85vw; margin: 5vh auto; }
.vc-expand-modal .modal-content { height: 85vh; }
.vc-expand-modal .modal-body { overflow: auto; }
.vc-expand-modal .modal-body canvas { max-height: 68vh; }

.btn-accent { background: var(--vc-accent); border-color: var(--vc-accent); color: #fff; font-weight: 600; }
.btn-accent:hover { background: var(--vc-accent-dark); border-color: var(--vc-accent-dark); color: #fff; }

/* =====================================================================
   Public site — West Texas, photo-first
   Palette: ink #141b22 · terracotta #e67612 · gold #e0a458 · sand #faf5ec
            cream #f4ecdd · sage #7d8c6f · earth #2b1e16 · dusk #241a3d
   ===================================================================== */
:root {
  --wt-ink: #141b22;
  --wt-ink-2: #1b2530;
  --wt-dusk: #241a3d;
  --wt-plum: #7c3050;
  --wt-terra: #e67612;
  --wt-terra-dark: #b85809;
  --wt-gold: #e0a458;
  --wt-sand: #faf5ec;
  --wt-cream: #f4ecdd;
  --wt-sage: #7d8c6f;
  --wt-earth: #2b1e16;
  --wt-earth-soft: #6b5138;
}
.display-font, .section-title, .hero-title, .step-num, .photo-quote, .pull-num, .glass .num, .cta-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}

.public-body { background: var(--wt-sand); color: #20180f; min-height: 100vh; display: flex; flex-direction: column; }
.public-footer { margin-top: auto !important; background: var(--wt-earth); color: #d9c6a8; }
.public-footer .text-white-50 { color: #a8916e !important; }
.footer-link { color: var(--wt-gold); text-decoration: none; font-weight: 600; }
.footer-link:hover { color: #f0c98a; text-decoration: underline; }

.public-body .btn-accent { background: var(--wt-terra); border-color: var(--wt-terra); }
.public-body .btn-accent:hover { background: var(--wt-terra-dark); border-color: var(--wt-terra-dark); }
.public-body .brand-mark { background: none; }
.public-body .brand-text span { color: var(--wt-terra); }   /* the same orange as the V in the mark */
/* Secondary calls to action on the hero. Same orange as the V in the mark,
   filling to the darker shade on hover — the same pair the primary button
   beside them uses, so the row reads as one family. */
.btn-outline-accent {
  border: 2px solid var(--wt-terra); color: var(--wt-terra);
  background: transparent; font-weight: 600;
}
.btn-outline-accent:hover,
.btn-outline-accent:focus-visible {
  background: var(--wt-terra-dark); border-color: var(--wt-terra-dark); color: #fff;
}

/* ---------- Navbar (overlay variant on the homepage) ---------- */
.public-nav { background: var(--wt-ink); padding: .85rem 0; }
.public-nav .nav-link { color: #c3ccd4; font-weight: 500; }
.public-nav .nav-link:hover { color: #fff; }
.nav-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: linear-gradient(180deg, rgba(10,14,18,.72), rgba(10,14,18,0));
  transition: background .25s ease, box-shadow .25s ease;
}
.nav-overlay.scrolled {
  background: rgba(13,17,22,.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
}
/* Opened mobile menu gets its own solid panel so links are always legible */
@media (max-width: 991.98px) {
  .public-nav .navbar-collapse {
    background: rgba(13,17,22,.97); border-radius: 12px;
    padding: .8rem 1.1rem; margin-top: .6rem;
  }
  .public-nav .navbar-collapse .btn { margin-top: .5rem; }
}

/* ---------- Hero: full-screen photo ---------- */
.hero-full {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: #fff;
  background:
    linear-gradient(105deg, rgba(10,14,19,.94) 0%, rgba(12,17,24,.82) 32%, rgba(15,21,29,.42) 62%, rgba(22,22,26,.25) 100%),
    url('/assets/img/compressor-hero.jpg') 68% 38% / cover no-repeat,
    linear-gradient(135deg, #141b22 0%, #241a3d 60%, #7c3050 100%);
}
.hero-full::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(rgba(13,17,22,0), #0d1116); pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; padding: 7.5rem 0 3rem; }
.eyebrow {
  /* the brand orange, matching the mark, the wordmark and the buttons; the
     shadow keeps the wide letter spacing legible over the photo */
  color: var(--wt-terra); font-weight: 700; font-size: .82rem;
  letter-spacing: .26em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(6,8,12,.75);
}
.hero-title {
  font-weight: 700; text-transform: uppercase; line-height: .95;
  font-size: clamp(2.8rem, 6.5vw, 5.4rem); text-shadow: 0 3px 24px rgba(8,10,14,.6);
}
.text-sunset {
  /* built around the brand orange (#e67612): a lighter tint into the brand
     colour and back out, so the line reads as the same orange used everywhere
     else rather than a separate gold */
  background: linear-gradient(92deg, #ffab3d, #e67612 52%, #f7901f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* the glyphs are transparent, so text-shadow can't reach them — drop-shadow
     works on the painted gradient and lifts the line off the photo */
  filter: drop-shadow(0 3px 18px rgba(6,8,12,.7));
}
.hero-lead { color: #dde4ea; max-width: 560px; font-size: 1.12rem; text-shadow: 0 1px 12px rgba(8,10,14,.65); }
.hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; margin-top: 3.5rem; max-width: 780px;
}
.glass {
  background: rgba(12,16,22,.55); border: 1px solid rgba(224,164,88,.22);
  border-top: 2px solid var(--wt-gold); border-radius: 12px;
  padding: 1rem 1.2rem; backdrop-filter: blur(8px);
}
.glass .num { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.glass .cap { color: #aab6c0; font-size: .82rem; }
@media (max-width: 767.98px) {
  .hero-stats { grid-template-columns: 1fr; max-width: 380px; }
  .hero-full { background-position: 62% 38%, 62% 38%; }
}

/* ---------- Basin ticker ---------- */
.basin-bar {
  background: #0d1116; padding: .8rem 0; overflow: hidden;
  border-top: 1px solid rgba(224,164,88,.14); border-bottom: 1px solid rgba(224,164,88,.14);
}
.basin-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1rem;
  letter-spacing: .24em; text-transform: uppercase; color: #7f909d;
  animation: basin-ticker 85s linear infinite; will-change: transform;
}
/* margin-right instead of flex gap: every item (incl. the last) carries its own trailing
   space, so the two duplicated halves are exactly equal and the -50% loop is seamless */
.basin-track > span { margin-right: 2.4rem; }
.basin-track .star { color: var(--wt-gold); letter-spacing: 0; }
@keyframes basin-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .basin-track { animation: none; } }

/* ---------- Sections ---------- */
.section-sand  { background: var(--wt-sand); }
.section-cream { background: var(--wt-cream); }
.section-title {
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.7rem, 3vw, 2.4rem); color: #23180d;
}
.text-earth { color: var(--wt-earth-soft); }
.text-slate { color: #93a3b0; }
.icon-terra { color: var(--wt-terra); }
.public-body .card { box-shadow: 0 2px 12px rgba(93,58,32,.10); }

/* ---------- How it works ---------- */
.step { border-left: 3px solid var(--wt-gold); padding-left: 1.4rem; }
.step-num { font-size: 3.2rem; font-weight: 700; color: var(--wt-terra); line-height: 1; }

/* ---------- Pull stats ---------- */
.pull-num { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700; color: var(--wt-terra); line-height: 1; }
.pull-cap { color: var(--wt-earth-soft); font-size: .88rem; max-width: 220px; margin: .3rem auto 0; }

/* ---------- Photo quote band (same photo, parallax) ---------- */
.photo-band {
  background:
    linear-gradient(rgba(10,13,17,.64), rgba(10,13,17,.64)),
    url('/assets/img/vendor-callout-west-texas-nm.jpg') center 40% / cover no-repeat;
  color: #fff; text-align: center; padding: 7rem 0;
}
.photo-quote {
  font-weight: 600; text-transform: uppercase; line-height: 1.05;
  font-size: clamp(2rem, 4.5vw, 3.4rem); text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.photo-attr { color: var(--wt-gold); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; }

/* ---------- Product mock-up ---------- */
.mock-window {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid #e5d8c2; box-shadow: 0 30px 60px rgba(32,24,15,.22);
}
.mock-bar { background: var(--wt-ink); display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mock-url {
  background: rgba(255,255,255,.08); color: #93a3b0; font-size: .72rem;
  border-radius: 6px; padding: .18rem .9rem; margin-left: .6rem;
}
.mock-body { padding: 1rem 1.1rem 1.2rem; }
.mock-chips { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: .9rem; }
.chip { border-radius: 8px; padding: .4rem .7rem; font-size: .74rem; font-weight: 600; }
.chip-red   { background: #fbe3e0; color: #a33327; }
.chip-gold  { background: #f7ecd7; color: #8a6320; }
.chip-dark  { background: #e8ebee; color: #22303c; }
.chip-green { background: #e2efe6; color: #1d6b48; }

.feature-list li { display: flex; gap: 1rem; margin-bottom: 1.35rem; }
.feature-list i {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  background: #fbe3d2; color: var(--wt-terra); font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.feature-list strong { display: block; }
.feature-list span { color: var(--wt-earth-soft); font-size: .9rem; }

.feature-card {
  border: 1px solid #e5d8c2; border-radius: 14px; height: 100%; background: #fff;
  transition: transform .15s, box-shadow .15s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(93,58,32,.16); }
.feature-card .fi {
  width: 52px; height: 52px; border-radius: 12px; background: #fbe3d2; color: var(--wt-terra);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem;
}

/* ---------- Pricing (dark) ---------- */
.pricing-dark { background: linear-gradient(180deg, var(--wt-ink) 0%, var(--wt-ink-2) 100%); }
.pricing-dark .section-title { color: #fff; }
.calc-card {
  background: #fff; border-radius: 18px; max-width: 780px;
  padding: 2rem 2.2rem 1.6rem; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.calc-units {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 2.4rem; line-height: 1; color: var(--wt-terra);
}
.calc-units-word { font-size: 1.2rem; color: var(--wt-earth-soft); }
.calc-range { accent-color: var(--wt-terra); }
.calc-range::-webkit-slider-thumb { background: var(--wt-terra); }
.calc-range::-moz-range-thumb { background: var(--wt-terra); }
.calc-scale { color: #a39074; font-size: .75rem; }
.calc-price { background: var(--wt-sand); border: 1px solid #e5d8c2; border-radius: 12px; padding: .9rem .6rem; height: 100%; }
.calc-price-cap { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wt-earth-soft); font-weight: 600; }
.calc-price-num {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 2rem; line-height: 1.15; color: #23180d;
}
.calc-price-sub { font-size: .75rem; color: var(--wt-earth-soft); }
.calc-foot { color: var(--wt-earth-soft); }
.calc-number {
  width: 7.5rem; text-align: right; font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem;
  color: var(--wt-terra); border-color: #e5d8c2;
}
.calc-number:focus { border-color: var(--wt-terra); box-shadow: 0 0 0 .2rem rgba(193,85,47,.15); }

/* Optional add-on services — the totals above absorb them, so no prices here */
.calc-services {
  border-top: 1px solid #e5d8c2; padding-top: 1.1rem;
  font-size: .92rem; color: #40342a;
}
.calc-services .form-check { margin-bottom: .3rem; }
.calc-services .form-check-input:checked { background-color: var(--wt-terra); border-color: var(--wt-terra); }
.calc-services .form-check-input:focus { border-color: var(--wt-terra); box-shadow: 0 0 0 .2rem rgba(193,85,47,.15); }
.calc-vendor-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-left: 1.6rem; }
.calc-vendor-input {
  width: 5.5rem; text-align: right; font-weight: 700; color: var(--wt-terra);
  border-color: #e5d8c2;
}
.calc-vendor-input:focus { border-color: var(--wt-terra); box-shadow: 0 0 0 .2rem rgba(193,85,47,.15); }

/* ---------- Contact thread messages ---------- */
.contact-msg { padding: .9rem 1rem; border-radius: 12px; margin-bottom: .9rem; }
.contact-msg:last-child { margin-bottom: 0; }
.contact-msg-meta { font-size: .78rem; color: var(--vc-muted); margin-bottom: .35rem; }
.contact-msg-body { color: #40342a; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
/* the reader's own messages sit in the warm sand, the other side in white with
   an accent edge, so a long thread is scannable without avatars */
.contact-msg.is-mine  { background: var(--wt-sand, #f6f3ec); border: 1px solid #e5d8c2; }
.contact-msg.is-staff { background: #fff; border: 1px solid var(--vc-line); border-left: 3px solid var(--vc-accent); }
.contact-msg-brand { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: .35rem; }
.contact-attach {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  background: #fbf1ea; border: 1px solid var(--vc-line); border-radius: 8px; padding: .35rem .6rem;
}
.contact-attach i { color: var(--vc-accent); }
.contact-msg-body a { word-break: break-word; }
/* the per-message delete stays out of the way until the message is hovered */
.contact-msg { position: relative; }
.contact-msg-del { position: absolute; top: .5rem; right: .6rem; opacity: 0; transition: opacity .15s ease; }
.contact-msg:hover .contact-msg-del,
.contact-msg-del:focus-within { opacity: 1; }

/* ---------- Callout photos ---------- */
.callout-photos { display: flex; flex-wrap: wrap; gap: .6rem; }
.callout-photo { position: relative; }
.callout-photo img {
  width: 132px; height: 132px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--vc-line); background: #f1ece1;
}
.callout-photo-del {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: 0; line-height: 1; font-size: 1rem; font-weight: 700;
  background: #d64545; color: #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Files staged in the picker, before the form is submitted */
.photo-picked-item {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--vc-line); border-radius: 10px;
  padding: .4rem .6rem; margin-bottom: .4rem; background: #fbf8f2;
}
.photo-picked-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.photo-picked-name { font-size: .9rem; font-weight: 600; word-break: break-all; }
.photo-picked-size { font-size: .8rem; color: var(--vc-muted); margin-left: auto; white-space: nowrap; }
.photo-picked-remove {
  border: 0; background: transparent; color: #d64545;
  font-size: 1.3rem; line-height: 1; padding: 0 .25rem; cursor: pointer; flex-shrink: 0;
}
.photo-picked-remove:hover { color: #a52222; }

/* ---------- Location map: hover preview + full modal ---------- */
.loc-map-pop { text-decoration: none; white-space: nowrap; }
.loc-map-pop .bi { color: var(--vc-accent); }
.loc-coords { font-variant-numeric: tabular-nums; font-size: .86rem; }

.loc-map-hover {
  position: absolute; z-index: 1085; width: 340px; display: none;
  border: 1px solid var(--vc-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(40,28,14,.30); background: #fff;
}
.loc-map-hover.show { display: block; }
.loc-map-hover #locMapHoverCanvas { height: 210px; }

/* 85% of the viewport, as asked — big enough to read a lease at a glance */
.loc-map-dialog { max-width: 85vw; margin: 7.5vh auto; }
.loc-map-dialog .modal-content { height: 85vh; }
.loc-map-body { display: flex; min-height: 0; flex: 1 1 auto; }
.loc-map-canvas { flex: 1 1 auto; min-width: 0; }
.loc-map-side {
  width: 290px; flex: 0 0 290px; border-left: 1px solid var(--vc-line);
  display: flex; flex-direction: column; min-height: 0; background: #fbf8f2;
}
.loc-map-side-head {
  padding: .7rem 1rem; font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--vc-muted);
  border-bottom: 1px solid var(--vc-line);
}
.loc-map-list { overflow-y: auto; flex: 1 1 auto; }
.loc-map-unit {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-bottom: 1px solid #f1ece1; cursor: pointer; font-size: .9rem;
}
.loc-map-unit:hover { background: #fff; }
.loc-map-unit.is-unplaced { cursor: default; opacity: .65; }
.loc-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.loc-unit-no { font-weight: 700; }
.loc-unit-meta { color: var(--vc-muted); font-size: .78rem; margin-left: auto; text-align: right; }
@media (max-width: 767.98px) {
  .loc-map-dialog { max-width: 96vw; margin: 2vh auto; }
  .loc-map-dialog .modal-content { height: 92vh; }
  .loc-map-body { flex-direction: column; }
  .loc-map-canvas { min-height: 45vh; }
  .loc-map-side { width: auto; flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--vc-line); }
}

/* ---------- QUOTE ONLY watermark ---------- */
.quote-doc { position: relative; overflow: hidden; }
.quote-doc .card-body { position: relative; }
.quote-stamp {
  position: absolute; inset: 0; margin: auto; height: max-content; width: 100%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-24deg); pointer-events: none; user-select: none; z-index: 3;
  font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(3rem, 11vw, 6.5rem); letter-spacing: .08em; white-space: nowrap;
  color: rgba(230,118,18,.16);
  /* an outline as well as a fill, so it stays visible over the table rules */
  -webkit-text-stroke: 2px rgba(230,118,18,.26);
}
/* Printers drop background colours by default; this keeps the stamp on the PDF. */
@media print {
  .quote-doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .quote-stamp { color: rgba(230,118,18,.20); -webkit-text-stroke-color: rgba(230,118,18,.32); }
}

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item { border: 1px solid #e5d8c2; border-radius: 12px !important; overflow: hidden; margin-bottom: .75rem; background: #fff; }
.faq-accordion .accordion-button { font-weight: 600; background: #fff; color: #23180d; box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { background: #fbe3d2; color: var(--wt-terra-dark); }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(193,85,47,.15); }

/* ---------- Iron gallery ---------- */
.gallery-card {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(32,24,15,.18); aspect-ratio: 4 / 3; background: var(--wt-ink);
}
.gallery-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; color: #fff;
  padding: 2.2rem 1.1rem .85rem;
  background: linear-gradient(rgba(13,17,22,0), rgba(13,17,22,.85));
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 1.15rem;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- Final CTA ---------- */
.cta-final {
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(124,48,80,.5), transparent 60%),
    linear-gradient(165deg, var(--wt-dusk) 0%, var(--wt-ink) 70%);
  border-top: 3px solid var(--wt-terra);
  padding: 5.5rem 0;
}
.cta-title {
  color: #fff; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}
.cta-sub { color: #cbb9c0; max-width: 600px; }

/* ---------- Mobile refinements (phones + small tablets) ---------- */
/* Wide data tables scroll sideways instead of crushing columns; compact
   tables (.table-sm) are exempt so they still fit inside narrow cards. */
.table-responsive > .table:not(.table-sm) { min-width: 680px; }

@media (max-width: 991.98px) {
  .sidebar { width: 276px; }
  .sidebar .nav-link { padding: .7rem .85rem; }   /* bigger touch targets */
}
@media (max-width: 767.98px) {
  .content { padding: 1rem 1.1rem; }
  .public-body .container { padding-left: 1.15rem; padding-right: 1.15rem; }
  .topbar { padding: .5rem .75rem; }
  .card-body { padding: 1rem; }
  .stat-card .value { font-size: 1.25rem; }
  .stat-card .icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 10px; }
  .table { font-size: .85rem; }
  #unitMap { height: 60vh; }
  .calc-card { padding: 1.3rem 1rem 1.1rem; }
  .hero-inner { padding: 5.5rem 0 2.5rem; }
  .photo-band { padding: 4.5rem 0; }
  .app-footer { text-align: center; }
}

/* ---------- Auth ---------- */
.auth-card { max-width: 430px; margin: 4rem auto; padding: 0 .5rem; }
/* Auth pages use the solid navbar, sand background */
.portal-logo { max-height: 64px; max-width: 220px; object-fit: contain; }
.tenant-logo-preview { max-height: 44px; max-width: 140px; object-fit: contain; border-radius: 6px; }
.report-logo { max-height: 48px; max-width: 180px; object-fit: contain; }
.report-copyright {
  border-top: 1px solid #ddd; margin-top: 2rem; padding-top: .6rem;
  font-size: .78rem; color: #777; text-align: center;
}

/* ---------- Map ---------- */
#unitMap { height: 70vh; border-radius: 14px; z-index: 0; }
.map-legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.vc-map-brand {
  display: flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.88); border-radius: 8px 0 0 0;
  padding: .2rem .6rem; font-size: 11px; color: #20180f;
}
.vc-map-brand img { width: 15px; height: 15px; border-radius: 3px; }
.vc-map-brand span { color: #9a8a72; font-size: 10px; margin-left: .15rem; }

/* Map / Satellite switch, on every Leaflet map */
.vc-map-toggle {
  display: flex; overflow: hidden;
  border: 1px solid rgba(0,0,0,.18); border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,.28); background: #fff;
  font-size: 12px; font-weight: 600; line-height: 1;
}
.vc-map-toggle button {
  border: 0; background: #fff; color: #3d3327;
  padding: .42rem .68rem; cursor: pointer;
}
.vc-map-toggle button + button { border-left: 1px solid rgba(0,0,0,.12); }
.vc-map-toggle button:hover { background: #f6efe3; }
.vc-map-toggle button.is-on {
  background: var(--vc-accent); color: #fff;
}
.vc-map-toggle button.is-on:hover { background: var(--vc-accent-dark); }

/* Unit dots. A marker, not a circleMarker, so Leaflet can drag them. */
.vc-pin, .vc-dot-pin { background: none; border: 0; }
.vc-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.vc-dot-mark {
  display: block; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.35);
}

/* "Move pins" — master admin only */
.vc-map-edit {
  margin-top: 6px;
  border: 1px solid rgba(0,0,0,.18); border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,.28); background: #fff;
}
.vc-map-edit button {
  border: 0; background: #fff; color: #3d3327; cursor: pointer;
  font-size: 12px; font-weight: 600; line-height: 1; padding: .42rem .68rem;
  display: flex; align-items: center; gap: .3rem;
}
.vc-map-edit button:hover { background: #f6efe3; }
.vc-map-edit.is-on button { background: var(--vc-accent); color: #fff; }
.vc-map-edit.is-on button:hover { background: var(--vc-accent-dark); }

/* While editing, every pin advertises that it can be dragged */
.vc-map-editing .leaflet-marker-draggable { cursor: grab; }
.vc-map-editing .leaflet-marker-draggable:active { cursor: grabbing; }
.vc-map-editing .vc-dot-mark { border-color: #fffbe9; box-shadow: 0 0 0 2px var(--vc-accent), 0 2px 5px rgba(0,0,0,.4); }

/* Result of a drag, shown on the map itself */
.vc-map-toast {
  position: absolute; left: 12px; bottom: 12px; z-index: 1000;
  display: none; align-items: center; gap: .6rem;
  max-width: min(420px, calc(100% - 24px));
  padding: .5rem .75rem; border-radius: 9px;
  background: rgba(32,24,15,.93); color: #fff;
  font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.vc-map-toast.is-on { display: flex; }
.vc-map-toast.is-error { background: #8f2f2f; }
.vc-map-toast button {
  border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  border-radius: 6px; padding: .18rem .5rem; font-size: 11.5px; font-weight: 600;
  cursor: pointer; flex: 0 0 auto;
}
.vc-map-toast button:hover { background: rgba(255,255,255,.16); }

/* ---------- Vendor report KPI strip ----------
   The card count varies (6 or 7, depending on whether credits and gas figures
   show), so a fixed 6-column grid always orphaned the last one onto its own
   row. Auto-fit while narrow; one even line once there's room. */
/* Fixed column counts rather than auto-fit: auto-fit packs as many as will fit
   and leaves the remainder stranded, which is how 7 cards became "6 + 1". */
.report-kpis {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(2, 1fr);
}
.report-kpi {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;                       /* let a long value wrap instead of pushing the grid wide */
  min-height: 76px; padding: .55rem .5rem;
  border: 1px solid var(--vc-line); border-radius: 10px;
  background: #fff; text-align: center;
}
.report-kpi .v {
  font-weight: 700; font-size: 1.08rem; line-height: 1.15;
  color: var(--vc-navy); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.report-kpi .l {
  margin-top: .2rem; font-size: .69rem; line-height: 1.25;
  color: var(--vc-muted); text-transform: uppercase; letter-spacing: .045em;
}
/* 7 cards land as 4 + 3, never one on its own */
@media (min-width: 576px) { .report-kpis { grid-template-columns: repeat(4, 1fr); } }
/* Room for the whole strip on one line, whatever the card count.
   min-content rather than a flat 1fr: equal columns forced the widest value
   ("$1,965.03 / $2,802.98") to wrap while "69" sat in the same width doing
   nothing. Each card now takes what its figure needs, and shares the slack. */
@media (min-width: 992px) {
  .report-kpis {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min-content, 1fr);
  }
  .report-kpi .v { font-size: .98rem; white-space: nowrap; }
  .report-kpi .l { font-size: .66rem; letter-spacing: .03em; }
}
@media (min-width: 1320px) {
  .report-kpi .v { font-size: 1.08rem; }
  .report-kpi .l { font-size: .69rem; letter-spacing: .045em; }
}
/* On paper 7 across is unreadable — two tidy rows instead */
@media print {
  .report-kpis {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-flow: row !important;
    gap: .4rem;
  }
  .report-kpi { min-height: 0; padding: .4rem; break-inside: avoid; }
  .report-kpi .v { font-size: .95rem; }
  .report-kpi .l { font-size: .62rem; }
}

/* Callout link in the report's detail table */
.rpt-callout { color: var(--vc-accent-dark); text-decoration: none; border-bottom: 1px dotted currentColor; }
.rpt-callout:hover { color: var(--vc-accent); }
@media print { .rpt-callout { color: inherit; border-bottom: 0; } }

/* Callout / credit modal opened from the report */
.rc-head {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--vc-muted); border-bottom: 1px solid var(--vc-line);
  padding-bottom: .3rem; margin-bottom: .6rem;
}
.rc-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0 0 .8rem; font-size: .88rem; }
.rc-facts dt { color: var(--vc-muted); font-weight: 500; white-space: nowrap; }
.rc-facts dd { margin: 0; font-weight: 600; }
.rc-context {
  background: #fbf6ec; border: 1px solid var(--vc-line); border-radius: 8px;
  padding: .55rem .7rem; margin-bottom: .8rem; line-height: 1.45;
}

/* ---------- Print / PDF report ---------- */
@media print {
  body, .app-body { background: #fff !important; }
  .sidebar, .topbar, .app-footer, .d-print-none { display: none !important; }
  .content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; border-radius: 0 !important; }
  a[href]::after { content: "" !important; }
  .report-page { page-break-after: always; }
}
.report-header { border-bottom: 3px solid var(--vc-navy); padding-bottom: .75rem; margin-bottom: 1.25rem; }
.report-header h2 { font-weight: 800; margin: 0; }
.sig-line { border-top: 1px solid #555; margin-top: 3.5rem; padding-top: .35rem; font-size: .85rem; color: #555; }

/* ---------- Route board (units grouped by route, drag & drop for super admin) ---------- */
.route-card .route-drop { display: flex; flex-direction: column; gap: .5rem; min-height: 72px; }
.unit-chip {
  display: flex; align-items: center; padding: .45rem .7rem; font-size: .875rem;
  background: #fff; border: 1px solid #e5d8c2; border-radius: 10px;
}
.unit-chip .badge { width: 10px; height: 10px; padding: 0; flex: 0 0 auto; }
.unit-chip.draggable { cursor: grab; user-select: none; }
.unit-chip.draggable:active { cursor: grabbing; }
.unit-chip.dragging { opacity: .4; }
.route-card.drop-hover { outline: 2px dashed #e67612; outline-offset: -2px; background: #fdf7ef; }
.route-card-unassigned .card-header { border-bottom-style: dashed; }

/* Expandable unit list under a location row */
.vc-detail-row > td { background: #faf6ee; box-shadow: inset 0 3px 6px -4px rgba(60,44,26,.25); }
.loc-units { display: flex; flex-wrap: wrap; gap: .5rem; padding: .35rem .25rem; }
.loc-units .unit-chip { min-width: 240px; }

/* ---------- Presentation scheduler (public /schedule) ---------- */
.sched-step {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .06em; color: #23180d; margin-bottom: .75rem;
}
.sched-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.sched-day {
  border: 1px solid #e5d8c2; background: #fff; border-radius: 10px;
  padding: .45rem .25rem; text-align: center; line-height: 1.25; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.sched-day:hover { border-color: #e67612; }
.sched-day.active { background: #e67612; border-color: #e67612; color: #fff; }
.sched-times { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 44px; align-items: center; }
.sched-time {
  border: 1px solid #e5d8c2; background: #fff; border-radius: 999px;
  padding: .4rem 1.1rem; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.sched-time:hover { border-color: #e67612; }
.sched-time.active { background: #e67612; border-color: #e67612; color: #fff; }
.sched-time.gone { background: #f1ece1; color: #b3a58d; text-decoration: line-through; cursor: not-allowed; }
/* When the visitor isn't on Central, each slot shows their own time with the
   Central time beneath it, so both sides can name the same slot out loud. */
.sched-time-main { display: block; line-height: 1.15; }
.sched-time-ct { display: block; font-size: .72rem; opacity: .7; margin-top: 1px; }
.sched-time.active .sched-time-ct { opacity: .85; }
@media (max-width: 575.98px) { .sched-days { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Guided presentation tour ---------- */
.vc-tour-card {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1090;
  width: min(400px, calc(100vw - 2rem));
  background: var(--vc-navy); color: #eef3f8;
  border-radius: 14px; box-shadow: 0 20px 60px rgba(10, 8, 4, .45);
  padding: 1rem 1.1rem; border: 1px solid #2c3a48;
}
.vc-tour-head { display: flex; align-items: center; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: #e0a458; margin-bottom: .35rem; }
.vc-tour-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.35rem;
  color: #fff; margin-bottom: .35rem; }
.vc-tour-body { font-size: .9rem; line-height: 1.55; color: #c6d2dd; }
.vc-tour-body strong, .vc-tour-body em { color: #fff; }
.vc-tour-foot { display: flex; justify-content: space-between; margin-top: .85rem; }
.vc-tour-hi { outline: 3px solid #e67612; outline-offset: 3px; border-radius: 12px;
  transition: outline-color .2s; }
@media (max-width: 575.98px) { .vc-tour-card { right: .5rem; bottom: .5rem; left: .5rem; width: auto; } }
.vc-tour-head { cursor: move; user-select: none; }
.vc-tour-icon {
  background: transparent; border: 0; color: #e0a458; padding: 0 .15rem;
  font-size: .95rem; line-height: 1; cursor: pointer;
}
.vc-tour-icon:hover { color: #fff; }
/* Held for a question — obvious at a glance that the narration is waiting */
.vc-tour-icon.is-paused { color: #fff; background: var(--vc-accent); border-radius: 4px; padding: .1rem .3rem; }

/* ---------- Status page ---------- */
.status-dot {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
  background: #6b7280; vertical-align: middle;
}
.status-dot.status-ok       { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.status-dot.status-degraded { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
.status-dot.status-unknown  { background: #9ca3af; }
.status-bar { display: flex; gap: 2px; align-items: stretch; height: 34px; }
.status-tick { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: #16a34a; }
.status-tick.part { background: #d97706; }
.status-tick.down { background: #dc2626; }
.status-tick.none { background: #e5e0d6; }
@media (max-width: 575.98px) { .status-bar { height: 26px; } }