/*
 * 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; }

/* 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; }
/* 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); }