/*
 * Our look, on top of the upstream styles. Loaded last in index.html, so anything here wins.
 * Keep design changes in THIS file (not main.css / variables.css) so upstream PRs merge cleanly.
 */

/* Colours. Every colour in the app comes from these tokens (css/variables.css).
   Light theme: white page, dark text, near-black buttons with white text.
   A workspace's own white-label colour (Settings) still overrides the accent. */
:root {
  color-scheme: light;
  --accent: #111111;
  --accent-hover: #2a2a2a;
  --accent-dim: #404040;
  --accent-2: #262626;
  --on-accent: #ffffff;

  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f5f5;
  --bg-input: #ffffff;
  --text-primary: #111111;
  --text-secondary: #525252;
  --text-muted: #8a8a8a;
  --border: #e5e5e5;
  --border-light: #d4d4d4;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* White label (js/branding.js) writes every workspace's colour inline on <html>; the stock
   defaults (#3B82F6 blue accent, #111827 navy page) beat :root. Override only those defaults,
   so a workspace that picked its own colours in Settings keeps them. */
html[style*="--accent: #3b82f6" i] { --accent: #111111 !important; }
html[style*="--bg-primary: #111827" i] { --bg-primary: #ffffff !important; }

/* Text on the accent. Upstream hard-codes white text on var(--accent); --on-accent keeps it
   readable whatever the accent is. Add a selector here if a pill's text ever goes invisible. */
.btn-primary, .btn-primary:hover,
.nav-link.active, .nav-link.active *,
.member-avatar, .nav-group-badge,
.members-tab.active, .platform-tab.active,
.ui-mode-switch button[aria-checked="true"],
.trial-banner-cta,
.sched-views button.active, .sched-daycol-head.today .num, .sched-ghost,
.sched-month-cell.today .sched-month-daynum, .sched-daystrip button.on,
.tpl-badge-new, .ds-how b, .ds-seg input:checked + span,
.simple-lib-check, .stock-toggle button[aria-checked="true"], .stock-check,
.sign-aspect button[aria-pressed="true"], .feedback-scale button[aria-checked="true"],
.assistant-fab, .assistant-msg.user,
.lib-viewtoggle [aria-pressed="true"], .lib-page-btn.is-current,
#schedListBtn[aria-pressed="true"] {
  color: var(--on-accent) !important;
}
/* Same problem in inline styles written by views (avatar circle, step numbers, ...). */
[style*="background:var(--accent"][style*="color:white"],
[style*="background:var(--accent"][style*="color:#fff"],
[style*="background: var(--accent"][style*="color: white"],
[style*="background: var(--accent"][style*="color: #fff"],
[style*="color:white"][style*="background:var(--accent"],
[style*="color:#fff"][style*="background:var(--accent"] {
  color: var(--on-accent) !important;
}
.btn-primary svg, .nav-link.active svg, .assistant-fab svg { stroke: currentColor; }
/* The coloured glow under primary buttons reads as a smudge in white; drop it. */
.btn-primary, .nav-link.active { box-shadow: none !important; }

/* Logo: plain text wordmark instead of the monitor icon. */
.logo > svg { display: none; }
.logo {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Login page (js/views/login.js, inline styles only): same wordmark, no icon, no blue name.
   If upstream changes that markup, these just stop matching and the default look returns. */
svg[width="48"][height="48"][stroke="var(--accent)"] { display: none; }
h1[style*="color:var(--accent)"] { color: var(--text-primary) !important; letter-spacing: 0.02em; }

/* Login and sign-up in Aurora Owl's own style (auroraowl.com): sand-to-paper ground, a small
   uppercase eyebrow, a serif wordmark with the aurora underline, a cream card in a thin
   hand-drawn ink frame topped by a brush stroke, and ink pill buttons with an arrow.
   login.js has no classes, so everything is scoped with :has(); if the markup changes these
   stop matching and the plain look above returns. Font is self-hosted (CSP: fonts from 'self'). */
@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif.woff2) format("woff2"); font-display: swap; }
:root {
  --ao-ground: #e3ded1; --ao-paper: #f4f1ea; --ao-card: #faf8f3; --ao-ink: #1c1a17; --ao-ink-2: #48433b; --ao-ink-3: #645d53;
  --ao-rule: rgba(28, 26, 23, .16); --ao-violet: #6d52f5;
  --ao-aurora: linear-gradient(90deg, #36d7ff, #1a9ee6 22%, #6d52f5 48%, #b44fd6 78%, #e062e6);
  --ao-serif: "Instrument Serif", Georgia, serif;
  /* A slightly uneven ink outline, stretched to any size (non-scaling stroke keeps it hairline). */
  --ao-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath vector-effect='non-scaling-stroke' fill='%23faf8f3' stroke='%231c1a17' stroke-opacity='.6' stroke-width='1.2' d='M30 6C300 9 700 3 970 7Q994 8 995 30C992 300 997 700 994 968Q993 993 970 994C700 991 300 996 32 993Q7 992 6 970C9 700 4 300 7 31Q8 7 30 6Z'/%3E%3C/svg%3E");
  /* A tapered brush stroke, as under the site's cards. */
  --ao-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath fill='%231c1a17' d='M0 4.2C40 2.6 120 1.8 200 2.2S360 3 400 3.8C360 5.2 280 6 200 6.2S40 5.8 0 4.2Z'/%3E%3C/svg%3E");
}
body:has(#localAuthForm) { background: linear-gradient(180deg, var(--ao-ground), var(--ao-paper) 70%) fixed !important; color: var(--ao-ink); }
div:has(> div > #localAuthForm) { width: 440px !important; }

/* Eyebrow, wordmark with the aurora underline, subtitle */
div:has(> div > #localAuthForm) > div:first-child { margin-bottom: 30px !important; }
div:has(> div > #localAuthForm) > div:first-child::before {
  content: "Digital signage \00b7  by Aurora Owl"; display: block; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ao-ink-3);
}
body:has(#localAuthForm) h1[style*="color:var(--accent)"] {
  display: inline-block; font-family: var(--ao-serif); font-weight: 400 !important; font-size: 60px !important;
  line-height: 1; letter-spacing: -.01em; color: var(--ao-ink) !important;
}
body:has(#localAuthForm) h1[style*="color:var(--accent)"]::after {
  content: ""; display: block; height: 3px; border-radius: 3px; margin: 6px 4% 0 30%; background: var(--ao-aurora);
}
body:has(#localAuthForm) h1[style*="color:var(--accent)"] + p {
  font-family: var(--ao-serif); font-style: italic; font-size: 22px !important; color: var(--ao-ink-2) !important; margin-top: 14px !important;
}
body:has(#registerForm[style*="block"]) h1[style*="color:var(--accent)"] + p { font-size: 0 !important; }
body:has(#registerForm[style*="block"]) h1[style*="color:var(--accent)"] + p::after { content: "Create your account. Free to start."; font-size: 22px; }

/* The card: cream paper in an ink frame, brush stroke on top */
div:has(> #localAuthForm) {
  position: relative; background: var(--ao-frame) center / 100% 100% no-repeat !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 40px 34px 30px !important;
  filter: drop-shadow(0 22px 30px rgba(28, 26, 23, .14));
}
div:has(> #localAuthForm)::before {
  content: ""; position: absolute; left: 34px; right: 34px; top: 20px; height: 6px; background: var(--ao-brush) center / 100% 100% no-repeat;
}
/* Fields */
body:has(#localAuthForm) .form-group label { color: var(--ao-ink); font-size: 13.5px; font-weight: 600; }
body:has(#localAuthForm) .input {
  height: 48px; background: #fff !important; border: 1px solid rgba(28, 26, 23, .2) !important; border-radius: 10px !important;
  color: var(--ao-ink) !important; font-size: 15px; padding: 0 14px; transition: border-color .15s, box-shadow .15s;
}
body:has(#localAuthForm) .input::placeholder { color: #a39b8f; }
body:has(#localAuthForm) .input:focus { outline: none; border-color: var(--ao-violet) !important; box-shadow: 0 0 0 4px rgba(109, 82, 245, .13) !important; }
/* Ink pill buttons, with an arrow on the main actions */
body:has(#localAuthForm) .btn { height: 48px; border-radius: 999px !important; font-size: 15px !important; font-weight: 600; }
body:has(#localAuthForm) .btn-primary { background: var(--ao-ink) !important; color: var(--ao-paper) !important; border: 0 !important; gap: 10px; transition: transform .15s; }
body:has(#localAuthForm) .btn-primary:hover { transform: translateY(-1px); }
#loginBtn::after, #registerBtn::after, #forgotSendBtn::after, #resetSubmitBtn::after { content: "\2192"; font-size: 17px; transition: transform .2s; }
#loginBtn:hover::after, #registerBtn:hover::after { transform: translateX(3px); }
body:has(#localAuthForm) .btn-secondary { background: transparent !important; color: var(--ao-ink) !important; border: 1px solid rgba(28, 26, 23, .3) !important; }
body:has(#localAuthForm) .btn-secondary:hover { background: rgba(28, 26, 23, .04) !important; }
#forgotLink { color: var(--ao-ink-2) !important; font-size: 13.5px !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(28, 26, 23, .3) !important; }
/* "Create Account" as the site's underlined arrow link: "New here? Create an account ->" */
body:has(#localAuthForm) #showRegisterBtn {
  background: none !important; border: 0 !important; height: auto; margin-top: 22px !important; padding: 18px 0 0 !important;
  border-top: 1px solid var(--ao-rule) !important; border-radius: 0 !important; font-size: 0 !important;
}
body:has(#localAuthForm) #showRegisterBtn::before { content: "New here?\00a0"; font-size: 14.5px; font-weight: 400; color: var(--ao-ink-3); }
body:has(#localAuthForm) #showRegisterBtn::after {
  content: "Create an account \2192"; font-size: 14.5px; font-weight: 600; color: var(--ao-ink);
  background: var(--ao-aurora) left bottom / 100% 2px no-repeat; padding-bottom: 2px;
}
/* Footer links and errors */
body:has(#localAuthForm) a[href="/legal/terms.html"], body:has(#localAuthForm) a[href="/legal/privacy.html"] { color: var(--ao-ink-3) !important; }
body:has(#localAuthForm) #loginError { font-size: 13.5px !important; }
@media (max-width: 480px) {
  body:has(#localAuthForm) h1[style*="color:var(--accent)"] { font-size: 50px !important; }
  div:has(> #localAuthForm) { padding: 36px 22px 24px !important; }
  div:has(> #localAuthForm)::before { left: 22px; right: 22px; }
}

/* Install-statistics sharing: hide the dashboard prompt and the Settings section. (The server's
   report endpoint is a placeholder anyway, so nothing would be sent.) */
#telemetrySection,
.settings-section:has(#statsYes) { display: none !important; }

/* Links to public pages we no longer serve (server/middleware/brand-hide.js): upstream guides. */
a[href^="/guides/"] { display: none !important; }
/* Brand kit: the account-menu link, the Settings card, and the "set up / edit brand kit" note
   in Make a sign. Signs just start from each template's own look. */
a[href="#/simple/brand"], #brandKitCard, .sign-brand-note { display: none !important; }
/* White label: the Settings section (custom logo, colours, domain) and the platform Branding tab.
   Saved branding still applies server-side; only the controls are gone. */
#whiteLabelSection, a[href="#/platform/branding"] { display: none !important; }
/* Login page "Support Access" token box: an operator tool clinics never need to see. */
#supportDetails { display: none !important; }

/* Dropdowns: one clean chevron instead of the browser's default arrow.
   !important because many views set an inline `background:` shorthand, which wipes the image. */
select,
select.input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  cursor: pointer;
}
select[multiple],
select[size]:not([size="1"]) {
  padding-right: 10px !important;
  background-image: none !important;
}
select:hover:not(:disabled) { border-color: var(--border-light); }

/* Plan editor price fields: room for the "AED" prefix. */
.plan-input.has-prefix .input { padding-left: 46px !important; }