/* components.css — styles for individual components, one section each.
   Prefer a class here over an inline style={{…}} in JSX: it is easier to find,
   can be themed through the variables in theme.css, and shows up by name in the
   browser's dev tools. */

/* ---- App header (chrome.jsx · BrandBar) ------------------------------------ */
/* Three columns (v4.6.3): logo · title · address. The two side columns are equal,
   so the title stays in the middle of the bar whatever the branch address length;
   a long address wraps onto more lines instead of pushing the title aside. */
.brand-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 8px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* The logo keeps the ARTWORK's proportions (v4.5.1): the original 1600×559 mark,
   padding included, at the live header's 44px — never a re-cropped, wider copy. */
.brand-logo { height: 44px; width: auto; max-width: 28vw; object-fit: contain; flex-shrink: 0; display: block; }
/* the logo sits in the bar's first column */
.brand-bar .brand-logo { grid-column: 1; justify-self: start; }
/* one logo per theme, swapped by CSS so it follows the toggle instantly */
.brand-logo-dark { display: none !important; }
body.dark .brand-logo-light { display: none !important; }
body.dark .brand-logo-dark { display: block !important; }
/* same typeface as the rest of the app (Geist, inherited from body) */
.brand-title {
  grid-column: 2; min-width: 0; text-align: center;
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-address {
  grid-column: 3; justify-self: end; min-width: 0;
  font-style: normal; text-align: right; line-height: 1.35;
  max-width: min(400px, 100%); white-space: normal; overflow-wrap: anywhere;
}
.brand-address__name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.brand-address__line { font-size: 11px; color: var(--muted); }


/* ---- Loading screen (app.jsx StsLoader) ---------------------------------- */
.sts-loader { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--paper); }
html.boot-dark .sts-loader, body.dark .sts-loader { background: #0A0F15; }
.sts-loader__ring {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--line-2); border-top-color: var(--accent);
  animation: sts-spin 0.8s linear infinite;
}
html.boot-dark .sts-loader__ring, body.dark .sts-loader__ring { border-color: #2D3A48; border-top-color: #3BE074; }
@keyframes sts-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sts-loader__ring { animation-duration: 2.4s; } }

/* v4.5.3 — floating horizontal scrollbar (src/hscroll.js): pinned to the bottom
   of the window while a wide list's own scrollbar is below the fold. */
.sts-hscroll { position: fixed; bottom: 0; z-index: 95; height: 16px; overflow-x: auto; overflow-y: hidden;
  display: none; background: color-mix(in srgb, var(--paper, #fff) 88%, transparent);
  border-top: 1px solid var(--line); backdrop-filter: blur(4px); }
.sts-hscroll.scrollbar::-webkit-scrollbar { height: 10px; }
.sts-hscroll.scrollbar::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 5px; }
@media print { .sts-hscroll { display: none !important; } }

/* v4.5.3 — grid lists (CRM leads, confirmed quotes…): a cell's text stays in its
   own column. Grid items default to min-width:auto, so a long unbroken value such
   as a Lead No pushed into the next column. */
[style*="grid-template-columns"] > span { min-width: 0; overflow-wrap: anywhere; }