/* theme.css — the ONLY custom CSS layer (DESIGN.md law).
   Contents: self-hosted fonts + font-var bridge. Nothing else without operator approval. */

/* Self-hosted Noto Sans (the Tabler demo pulls Inter from a CDN — we do not). */
@font-face { font-family: "Noto Sans"; src: url("/static/fonts/noto-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("/static/fonts/noto-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("/static/fonts/noto-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --tblr-font-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Sign-in backdrop — operator-approved override (scratchpad 2026-07-15): the
   rescued first-gen background art behind the auth cards, with a dark overlay so
   it isn't blindingly bright. Mesh-commander's login-bg pattern, moved into the
   single override layer per DESIGN.md. Portrait devices get the mobile art. */
body.login-bg { background: #0f1017 url("/static/backgrounds/login.jpg") center / cover no-repeat fixed; }
body.login-bg .page { background: transparent; }
body.login-bg .page-center { position: relative; z-index: 1; }
body.login-bg::before { content: ""; position: fixed; inset: 0; z-index: 0; background: rgba(15, 16, 23, 0.66); }
@media (orientation: portrait) {
  body.login-bg { background-image: url("/static/backgrounds/login-mobile.jpg"); }
}

/* Item-detail photo cap — operator-approved override (scratchpad 2026-07-16):
   primary photo and gallery tiles top out at 300x300 instead of filling their
   column (Tabler/Bootstrap ship no fixed-px width utility). */
.detail-photo { max-width: 300px; margin-inline: auto; }

/* Premium illustrations (operator adoption 2026-07-17, logged in DESIGN.md):
   inlined autodark SVGs have no fixed dims (stripped at vendor time) so they
   scale to their wrapper; cap them at empty-state / error-page sizes. */
.empty-img svg { width: 100%; max-width: 232px; height: auto; }
.error-illustration svg { width: 100%; max-width: 380px; height: auto; }

/* Photo lightbox (operator-approved 2026-07-17, logged in DESIGN.md): cap the
   modal image so portrait shots stay on-screen; width rides mw-100. */
.lightbox-img { max-height: 75vh; }

/* Notes/comments thread bodies (operator-approved 2026-07-17, logged in
   DESIGN.md): preserve the line breaks people type, and hard-wrap long
   unbroken strings (pasted URLs) so they can't overflow on mobile. */
.chat-message { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Theme-aware logo (DESIGN "Logo, icons & the SVG-first rule", 2026-07-17):
   the silver mark reads on dark, its slate light-variant reads on a light
   navbar. Swap on [data-theme] — the same attribute the autodark illustrations
   ride (mirrored from data-bs-theme in base.html). Default (dark / pre-JS)
   shows the dark mark. */
.logo-themed.logo-light { display: none; }
[data-theme="light"] .logo-themed.logo-dark { display: none; }
[data-theme="light"] .logo-themed.logo-light { display: inline-block; }

/* Datagrids two-up on phones (operator, MOBILE-NOTES 2026-07-17): Tabler's
   .datagrid is repeat(auto-fit, minmax(15rem, 1fr)), so a phone only ever fits
   one column and the info stacks into a long card. Force two columns below sm
   and tighten the gap — minmax(0,…) lets narrow values wrap/truncate instead
   of overflowing. No Tabler utility covers this. */
@media (max-width: 575.98px) {
  .datagrid { --tblr-datagrid-padding: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Page-header actions drop below the title on phones (operator, MOBILE-NOTES
     2026-07-17): every detail/list header is a title `.col` beside a
     `.col-auto.ms-auto` action group, so a long title (an item name) gets
     squeezed into a narrow wrapping column and the buttons collide with it.
     Force the action group onto its own full-width line under the title — the
     title then spans wide — cancel the ms-auto push, and let the buttons wrap.
     Scoped to .page-header so content-area ms-auto columns are untouched. No
     Tabler utility reflows an existing col-auto responsively. */
  .page-header .row > .col-auto.ms-auto {
    flex: 0 0 100%;
    max-width: 100%;
    margin-inline-start: 0 !important;
    margin-top: .75rem;
    flex-wrap: wrap;
  }
}

/* Notification bell dropdown (operator idea 2026-07-17, logged in DESIGN.md):
   the Tabler notifications card is 20rem wide by default; cap its scrolling
   list so a busy 30-day history doesn't run off-screen. Tabler ships no
   max-height utility, so this one rule lives here. */
.notif-scroll { max-height: 22rem; overflow-y: auto; }

/* …and on phones that 20rem card, anchored to the bell near the right edge,
   ran off the left of the screen (operator, MOBILE-NOTES 2026-07-17). Pin it
   below the navbar and span the viewport with a small inset so it's always
   fully visible. !important beats Popper's inline positioning (re-applied
   non-important on each open); transform:none cancels its translate. The
   avatar menu is auto-width in the far corner and already fits, so only the
   wide card needs this. */
@media (max-width: 575.98px) {
  #notif-bell .dropdown-menu {
    position: fixed !important;
    top: 3.75rem !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
  #notif-bell .dropdown-menu-arrow::before { display: none; }
}

/* Help mobile Topics dropdown (operator, SCRATCHPAD 2026-07-17): the section
   list is ~13 items — taller than a phone — so cap the menu and let it scroll
   rather than run off the bottom. */
#help-toc-mobile { max-height: 70vh; overflow-y: auto; }

/* Shared-card status bar (operator, 2026-07-17): Tabler's .card-status-top has
   no z-index, so on cards whose first content is a full-bleed image (item
   browse cards) the image — a later positioned sibling — paints over the 2px
   accent bar and it vanishes after load. Lift it above. */
.card-status-top { z-index: 2; }

/* Tom Select on the Tabler theme (operator pilot, 2026-07-17; DESIGN.md log):
   the vendored bootstrap5 theme paints the control + menu with --bs-body-bg
   (undefined on our theme → transparent), and its stylesheet loads AFTER
   theme.css (in the page {% block styles %}), so it wins on source order.
   Repaint both with Tabler's own form/surface tokens and !important so our
   layer is authoritative regardless of load order — solid, readable surfaces
   matching the native .form-select, light and dark. */
.ts-wrapper .ts-control {
  background-color: var(--tblr-bg-forms) !important;
  color: var(--tblr-body-color);
  border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-shadow-input);
  min-height: calc(1.25rem + 1.125rem + calc(var(--tblr-border-width) * 2));
}
.ts-wrapper.focus .ts-control {
  border-color: var(--tblr-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}
.ts-control > input,
.ts-control > input::placeholder { color: var(--tblr-body-color) !important; }
.ts-dropdown {
  background-color: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color);
  border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
  box-shadow: var(--tblr-shadow-dropdown, 0 .5rem 1.5rem rgba(0, 0, 0, .5));
}
.ts-dropdown .option { color: var(--tblr-body-color); }
.ts-dropdown .optgroup-header {
  background-color: var(--tblr-bg-surface) !important;
  color: var(--tblr-secondary);
}
/* Highlighted / hovered / currently-selected option → theme accent with white
   text. Both color AND background need !important: the vendored theme sets
   .active{color:var(--bs-body-color)} (a dark value on our theme) and loads
   after theme.css, so without !important the text stays dark on the pink and is
   unreadable — same trap as the pink badges (bg-pink needs text-pink-fg). */
.ts-dropdown .active,
.ts-dropdown .active.create,
.ts-dropdown .option.selected,
.ts-dropdown .option.selected.active {
  background-color: var(--tblr-primary) !important;
  color: #fff !important;
}
/* Multi-select chips (colors / finishes) — white-on-accent instead of the
   vendored hardcoded dark-on-light-grey. */
.ts-wrapper.multi .ts-control > .item {
  background-color: var(--tblr-primary) !important;
  color: #fff !important;
  border-radius: var(--tblr-border-radius);
}
.ts-wrapper.multi .ts-control > .item .remove { border-left-color: rgba(255, 255, 255, .4) !important; }