/* Orbitron (variable) — self-hosted, per the Vorperian style guide. */
@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/orbitron.woff2') format('woff2');
  font-weight: 300 900; font-display: swap;
}
:root {
  --vc-dark:#1b1b1f;
  /* Brand palette — Vorperian gold on black by default; base.html overrides these
     per-team from the owner's chosen primary/secondary colors. */
  --brand-primary:#ff9900;
  --brand-secondary:#0b0b0d;
}
body { font-family: "Liberation Sans", Arial, Helvetica, sans-serif; }

/* Cyberpunk headings + logo/brand: Orbitron, uppercase (Vorperian style guide). */
h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.navbar-brand,.navbar-brand .fw-semibold,.bb-lockup span {
  font-family:'Orbitron', system-ui, -apple-system, sans-serif;
  text-transform:uppercase; letter-spacing:.03em; font-weight:800;
}
.navbar-brand,.bb-lockup span,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 { font-weight:900; }

/* Vorperian-by-default theming, all keyed off the brand vars so a team's own
   colors flow through when set. */
.navbar[data-bs-theme="dark"]{ background: var(--brand-secondary) !important; }
.btn-dark{ background:var(--brand-primary); border-color:var(--brand-primary); color:#0b0b0d; }
.btn-dark:hover,.btn-dark:focus{ background:var(--brand-primary); border-color:var(--brand-primary); color:#0b0b0d; filter:brightness(1.08); }
a:not(.btn):not(.bb-btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item){ color:var(--brand-primary); }
a:not(.btn):not(.bb-btn):not(.nav-link):not(.navbar-brand):hover{ filter:brightness(1.12); }
.form-control:focus,.form-select:focus,.form-check-input:focus{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.form-check-input:checked{ background-color:var(--brand-primary); border-color:var(--brand-primary); }
.link-primary,.text-primary{ color:var(--brand-primary) !important; }

/* ===== Mobile responsiveness =====
   Safety net so no page scrolls sideways: clip stray horizontal overflow (clip,
   unlike hidden, doesn't create a scroll container so position:sticky still
   works), keep media within their box, and let wide content scroll inside its
   own table-responsive box rather than pushing the page wide. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, canvas, iframe, svg, video { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Long unbreakable values (emails, links, tokens) wrap instead of forcing width. */
a[href^="mailto:"], a[href^="tel:"], .text-wrap-any, code { overflow-wrap: anywhere; }

/* E-sign document preview: stacked page images in a native-scroll box. iOS Safari
   won't scroll a multi-page PDF inside an <iframe> (it sticks on page 1), but a
   plain scroll container of <img> pages scrolls fine on every browser. */
.doc-preview {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #525659;
  padding: 8px;
}
.doc-preview .doc-page {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  background: #fff;
}

/* Page/card header action rows: wrap their buttons on narrow screens instead of
   overflowing. Any .d-flex holding .btn children is treated as a toolbar. */
.d-flex.gap-2 > .btn, .d-flex.gap-2 > form { flex: 0 0 auto; }

@media (max-width: 575.98px) {
  main.container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
  .card-body { padding: .85rem; }
  h1.h3 { font-size: 1.3rem; }
  .stat-card .stat-value { font-size: 1.35rem; }
  /* Toolbars / button rows wrap by default on phones. */
  .toolbar, .page-actions, .d-flex.gap-2:not(.flex-nowrap) { flex-wrap: wrap; }
  .btn-group.flex-wrap-sm { flex-wrap: wrap; }
}
.stat-card { border:1px solid var(--bs-border-color); border-radius:.6rem; background:var(--bs-body-bg); }
.stat-card .stat-value { font-size:1.6rem; font-weight:600; line-height:1.1; }
.stat-card .stat-label { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--bs-secondary-color); }
.table-sm td, .table-sm th { vertical-align:middle; }
.login-wrap { max-width:380px; margin:8vh auto; }
.login-logo { height:64px; }
.badge-status { text-transform:capitalize; }
.money { font-variant-numeric: tabular-nums; }

/* Line-item cells that are empty render as "XXX" on the document — grey them
   out in the builder and show an XXX cue so it's clear they're intentionally blank. */
input.li-empty { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
input.li-empty::placeholder { color: var(--bs-secondary-color); opacity: 1; }
input.li-total { background: var(--bs-secondary-bg); }

/* No number-input spinner "adjustment arrows" on line-item cells (they show on
   hover/focus otherwise). Fields are still editable by typing. */
input.li-xxx::-webkit-outer-spin-button,
input.li-xxx::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.li-xxx[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Locked XXX cells on catalog line items (field not set for that item). */
input.li-locked { cursor: not-allowed; background: var(--bs-secondary-bg); }

/* ---- Dark-mode readability ----
   Several Bootstrap helpers are hard-coded to the LIGHT palette (light bg +
   black text). In dark mode they render as glaring light bars, and any text we
   theme separately can disappear on them. Re-map them to theme variables so
   they stay legible in both modes. */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--bs-secondary-bg);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .text-bg-light {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-tertiary-bg) !important;
}

/* Highlighted (confidential) note: yellow background needs dark text in BOTH
   modes, or the theme's light body text vanishes on the yellow. */
.note-highlight { background: #fff3a0; color: #212529; }

/* Dashboard magnitude bars: use the theme's emphasis color so the fill
   contrasts with the card in light AND dark mode (was a fixed near-black). */
.bar-fill { background: var(--bs-emphasis-color); }

/* Outline buttons are hard-coded to the light palette: btn-outline-dark is
   black (invisible on a dark page) and btn-outline-secondary is a low-contrast
   grey. Re-map them to theme vars so they stay visible in dark mode — used by
   the Documents Quotes/Invoices toggle, the dashboard Reset, Edit buttons, etc. */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-secondary-color);
  --bs-btn-hover-border-color: var(--bs-secondary-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-secondary-color);
}
/* Solid dark button (Save, Record payment/expenditure, etc.): a near-black
   button on a dark page has no visible edge. Invert it to a light button in
   dark mode so it reads as the primary action. */
[data-bs-theme="dark"] .btn-dark {
  --bs-btn-bg: var(--bs-emphasis-color);
  --bs-btn-border-color: var(--bs-emphasis-color);
  --bs-btn-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-secondary-color);
  --bs-btn-hover-border-color: var(--bs-secondary-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-secondary-color);
  --bs-btn-active-border-color: var(--bs-secondary-color);
  --bs-btn-active-color: var(--bs-body-bg);
}

/* Navbar: always keep the logo (brand) and the hamburger toggler on ONE row on
   mobile. The trimmed logo is wide, so with the brand text + tenant badge the
   toggler used to wrap to a second line. The reason min-width:0 alone wasn't
   enough: flexbox decides whether to WRAP an item using its *hypothetical* width
   (the content width), which min-width doesn't reduce — so the wide brand pushed
   the toggler off before any shrinking happened. Setting flex-basis:0 makes the
   brand's hypothetical width zero, so it can never bump the toggler off the row;
   it then grows to fill the space (content left-aligned + ellipsized) while the
   toggler sits at the far right. Scoped to <992px; the desktop layout and the
   drop-down collapse menu are untouched. */
.navbar-toggler { flex-shrink: 0; }
@media (max-width: 991.98px) {
  /* Slim the bar so a bigger logo doesn't make it tall. */
  .navbar { padding-top: .25rem; padding-bottom: .25rem; }
  .navbar > .container-fluid > .navbar-brand {
    flex: 1 1 0;            /* hypothetical width 0 -> never wraps the toggler */
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;      /* keep logo + name + badge on ONE line (don't stack) */
    white-space: nowrap;    /* also covers the case it's laid out as inline content */
  }
  .navbar-brand img { height: 38px; flex-shrink: 0; }   /* scale down, keep aspect */
  .navbar-brand > span { flex: 0 1 auto; }              /* the text/badge give way, not the logo */
  .navbar-brand .fw-semibold,
  .navbar-brand .badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}