/* LOCSA's own Tower OS sign-in (locsa.solosecure.tech/toweros; owner, 15 Nov 2026).
   LOCSA's own colours (owner, 15 Nov 2026: "close colours to VPS"): black and white with LOCSA's
   yellow, #fcc102 (their site's "amarillo"; darker #d4a017), as VPS uses its yellow. No Solo orange.
   Loaded only on LOCSA's host (src/lib/brandedPortal.ts). Tower OS keeps its name.
   The starting point for the next customer's sign-in: copy this file and change --cb-accent
   (and --cb-on-accent, the text on it) if the customer has a brand colour. */
body.locsa-brand {
  --cb-accent: #fcc102;
  --cb-on-accent: #1a1a1a;
  --cb-black: #000000;
  --cb-white: #ffffff;
  --cb-field: #0d0d0d;
  --cb-line: #2b2b2b;
  --cb-grey: #d4d4d4;
}
/* No orange: login.css and mission-control.css set the Solo orange on :root; these take it over. */
body.locsa-brand {
  --orange: var(--cb-accent);
  --orange-d: #d4a017;
  --orange-bg: rgba(252, 193, 2, .12);
  --orange-ln: rgba(252, 193, 2, .45);
}
/* A dark area (as the VPS one): tokens first, then the places login.css paints white. */
body.locsa-brand {
  --ink: #ffffff;
  --ink2: #d4d4d4;
  --ink3: #9a9a9a;
  --line: #2b2b2b;
  --line2: #161616;
  background: var(--cb-black);
  color: var(--cb-white);
}
body.locsa-brand .btn,
body.locsa-brand button.btn {
  background: var(--cb-accent) !important;
  color: var(--cb-on-accent) !important;
  border-radius: 999px;
}
body.locsa-brand .btn:hover { filter: brightness(0.9); }
body.locsa-brand .btn.ghost {
  background: var(--cb-field) !important;
  color: var(--cb-white) !important;
  border-color: var(--cb-line) !important;
}
body.locsa-brand .btn.ghost:hover { border-color: var(--cb-accent) !important; }
body.locsa-brand a { color: var(--cb-white); }
body.locsa-brand .eyebrow,
body.locsa-brand .sec-eyebrow { color: var(--cb-black) !important; } /* as on VPS: the logo leads the form */
body.locsa-brand .bname { color: var(--cb-white); }
body.locsa-brand .brand .bdiv { background: rgba(255, 255, 255, 0.35); }
body.locsa-brand .side .bname { color: var(--cb-white) !important; }
body.locsa-brand .side-in h2 em { color: var(--cb-white) !important; }

body.locsa-brand input,
body.locsa-brand select,
body.locsa-brand textarea,
body.locsa-brand .inp,
body.locsa-brand .sigmode button,
body.locsa-brand .code input,
body.locsa-brand .qrbox,
body.locsa-brand .sigcanvas {
  background: var(--cb-field) !important;
  color: var(--cb-white) !important;
  border-color: var(--cb-line) !important;
}
body.locsa-brand input:focus,
body.locsa-brand select:focus,
body.locsa-brand textarea:focus { border-color: #8a8a8a !important; outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important; }
body.locsa-brand input::placeholder { color: #6e6e6e; }
body.locsa-brand .role { background: #161616 !important; border-color: var(--cb-line) !important; }
/* Customer is the only tab here (no Solo Staff), so it takes the whole row. */
body.locsa-brand .role { grid-template-columns: 1fr; }
body.locsa-brand .role button { color: var(--cb-grey); }
body.locsa-brand .role button.on,
body.locsa-brand .tabs button.on,
body.locsa-brand .seg button.on,
body.locsa-brand .sigmode button.on {
  background: var(--cb-accent) !important;
  color: var(--cb-on-accent) !important;
  border-color: var(--cb-accent) !important;
  box-shadow: none !important;
}
body.locsa-brand .chk input,
body.locsa-brand .recovery-ack input { accent-color: var(--cb-accent); }
body.locsa-brand .field label,
body.locsa-brand label { color: var(--cb-grey); }
body.locsa-brand .sub,
body.locsa-brand p.sub { color: #a6a6a6; }

/* The English / Español switch at the top right: dark, the active one white. */
body.locsa-brand .tos-lang { background: #161616 !important; border-color: var(--cb-line) !important; }
body.locsa-brand .tos-lang button { background: transparent !important; color: var(--cb-grey) !important; }
body.locsa-brand .tos-lang button.on { background: var(--cb-accent) !important; color: var(--cb-on-accent) !important; }
body.locsa-brand .top a { color: var(--cb-grey) !important; }
body.locsa-brand .top a:hover { color: var(--cb-white) !important; }

/* LOCSA's logo in place of Solo's (logo-white.png, swapped in by brandPortalHtml).
   login.css inverts the Solo logo for light backgrounds; LOCSA's white mark is already right on black. */
body.locsa-brand .brand img,
body.locsa-brand .mbrand img { width: 120px !important; height: auto !important; filter: none !important; }
body.locsa-brand .mc-splash-name img { width: 110px !important; height: auto !important; filter: none !important; }

/* The side panel: black, with LOCSA's logo and the tower photo; the orange glow is Solo's, so it goes. */
body.locsa-brand .side { background: var(--cb-black) !important; }
body.locsa-brand .side-glow { display: none !important; }
body.locsa-brand .side .brand img,
body.locsa-brand .side .mbrand img { width: 190px !important; }

/* LOCSA's logo above the sign-in form: white on black. */
body.locsa-brand .locsa-form-logo { display: block; width: 150px; height: auto; margin-bottom: 36px; }

/* "Tower OS - Powered By Solo Secure": plain white, readable, under the tagline. */
body.locsa-brand .locsa-powered { margin-top: 10px; color: var(--cb-white); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }

/* The top row (language switch, Support) sits on one line. */
body.locsa-brand .top { align-items: center; min-height: 40px; }
body.locsa-brand .tos-lang { display: inline-flex; align-items: center; height: 34px; }
body.locsa-brand .tos-lang button { height: 100%; display: inline-flex; align-items: center; }
body.locsa-brand .top a { line-height: 34px; }

/* Short windows: the sign-in fits without scrolling. */
@media (max-height: 760px) {
  body.locsa-brand .locsa-form-logo { width: 104px; margin-bottom: 14px; }
  body.locsa-brand .form h1 { margin-top: 0; }
  body.locsa-brand .form .sub { margin-top: 6px; }
  body.locsa-brand .btn { height: 44px; margin-top: 16px; }
  body.locsa-brand .wrap { padding-block: 12px; }
  body.locsa-brand .main { padding-block: 18px; }
  body.locsa-brand .side { padding-block: 18px; }
}