/* Upraise Booking (book.upraise.uk): the Upraise Outreach look on Cal.rs.
   Loaded after Cal.rs's own styles and its theme (/accent.css), so these colours win over the Admin theme picker.
   Maintained in /opt/calrs/branding on the VPS (source: GTM Engine/vps-deploy/calrs-brand). */

@font-face { font-family: "Gilroy"; src: url(/upraise-brand/fonts/Gilroy-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url(/upraise-brand/fonts/Gilroy-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- colours (same violet, greys and navy as Upraise Outreach) ---------- */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-hover: #f3f4f6;
  --text: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --border: #e6e7eb;
  --border-hover: #c4c7cf;
  --accent: #4f54e3;
  --accent-hover: #4045cf;
  --accent-subtle: #eef0fd;
  --accent-border: #c9cbf8;
  --accent-muted: #a7aaf2;
  --success: #16a34a;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 6px 16px rgba(16, 24, 40, .06);
  --radius: 10px;
  --radius-lg: 14px;
  --up-display: "Gilroy", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --up-nav-active: #e9eaee;
}
html.dark {
  --bg: #0b0c11;
  --surface: #15161d;
  --surface-hover: #1d1f28;
  --text: #f3f4f6;
  --text-secondary: #b4b8c5;
  --text-muted: #8b90a1;
  --border: #262833;
  --border-hover: #3a3d4b;
  --accent: #8286f2;
  --accent-hover: #9a9df5;
  --accent-subtle: rgba(130, 134, 242, .14);
  --accent-border: rgba(130, 134, 242, .34);
  --accent-muted: #3d4199;
  --success: #22c55e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, .35);
  --up-nav-active: #22242e;
}
::selection { background: var(--accent-subtle); }

/* ---------- type ---------- */
html h1, html h2, html .sidebar-brand-name { font-family: var(--up-display); letter-spacing: -0.01em; }
html h1 { font-weight: 700; }

/* ---------- buttons: solid violet like Outreach, no gradient ---------- */
html .btn { background: var(--accent); background-image: none; border-radius: 9px; box-shadow: none; font-weight: 600; }
html .btn:hover { background: var(--accent-hover); background-image: none; box-shadow: none; }
html .btn:disabled { background: var(--accent-muted); }

/* ---------- cards ---------- */
html .card { border-radius: 14px; box-shadow: none; border-color: var(--border); }

/* ---------- dashboard frame: grey frame, sidebar on the frame, white work panel ---------- */
html body .dashboard-layout { background: var(--bg); }
html body .sidebar { background: var(--bg); border-right: 0; width: 248px; min-width: 248px; }
html body .sidebar-brand { border-bottom: 0; padding: 1.05rem 1.25rem .6rem; gap: .55rem; }
html body .sidebar-brand img { width: 26px; height: 26px; }
html body .sidebar-brand-name { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
html body .sidebar-brand-name .up-sub { font-weight: 700; color: var(--text); }
html body .sidebar-nav { padding: .25rem 0 .75rem; }
html body .sidebar-section { padding: 0 .65rem; margin-bottom: .15rem; }
html body .sidebar-section-label { font-size: .66rem; letter-spacing: .08em; color: var(--text-muted); opacity: .85; padding: .95rem .6rem .3rem; }
html body .sidebar-link { padding: .42rem .6rem; gap: .6rem; font-size: .84rem; font-weight: 500; color: var(--text-secondary); border-radius: 7px; }
html body .sidebar-link .icon { width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0; }
html body .sidebar-link .icon svg { display: block; }
html body .sidebar-link:hover { background: var(--up-nav-active); color: var(--text); }
html body .sidebar-link.active { background: var(--up-nav-active); color: var(--text); font-weight: 600; }
html body .sidebar-link.active .icon, html body .sidebar-link:hover .icon { color: var(--text); }
html body .up-outreach { margin-bottom: .1rem; }
html body .up-outreach .sidebar-link { color: var(--text-muted); font-size: .8rem; }
html body .sidebar-bottom { border-top: 0; padding: .6rem .75rem .75rem; }
html body .sidebar-bottom-row a:hover, html body .sidebar-signout:hover { background: var(--up-nav-active); }
html body .avatar-circle { background: #00014b; }
html.dark body .avatar-circle { background: #4f54e3; }

html body .dashboard-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-right: 0; border-bottom: 0;
  border-top-left-radius: 16px;
  margin-top: 10px;
  height: calc(100vh - 10px);
  padding: 2rem 2.25rem 2.5rem;
}
html body .dashboard-main .container { max-width: 960px; margin: 0 auto; }
html { scrollbar-color: var(--border-hover) transparent; }
html * { scrollbar-width: thin; }
html body .dashboard-main .card { box-shadow: none; }

@media (max-width: 768px) {
  html body .sidebar { background: var(--surface); }
  html body .dashboard-main { margin-top: 0; height: auto; border: 0; border-radius: 0; padding: 3.5rem 1rem 2rem; }
}

/* ---------- icons (line icons replacing Cal.rs's emoji) ---------- */
html .up-i { display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
/* overview quick actions: violet chip, solid on hover */
html .action-icon { width: 2.5rem; height: 2.5rem; border-radius: 10px; font-size: 1.15rem; background: var(--accent-subtle); color: var(--accent); }
html .action-icon .up-i { stroke-width: 1.8; }
/* overview stat tiles: left-aligned like Outreach Home, small icon chip in the corner */
html .card.up-stat { text-align: left !important; padding: 1.1rem 1.25rem !important; }
html .card.up-stat:hover { border-color: var(--border-hover); }
html .up-stat-icon { position: absolute; top: .9rem; right: .9rem; width: 2rem; height: 2rem; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 1rem; background: var(--accent-subtle); color: var(--accent); pointer-events: none; }
html .up-stat-icon .up-i { stroke-width: 1.8; }
/* empty states */
html .empty-icon, html .slot-empty-icon { width: 3rem; height: 3rem; margin: 0 auto .75rem; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 1.35rem; background: var(--accent-subtle); color: var(--accent); opacity: 1; }
html .empty-icon .up-i, html .slot-empty-icon .up-i { stroke-width: 1.8; }
/* booking page details (duration, host, location) and setting labels */
html .slots-info-meta-icon { color: var(--text-muted); font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
html .slots-info-setting-label .up-i { margin-right: .3rem; font-size: .95rem; }
/* result pages: success / cancelled / pending circles */
html .check { font-size: 1.5rem; }
html .check .up-i { stroke-width: 2.5; }
/* inline status marks (getting started, admin tests, warnings) */
html .up-i-check { color: var(--success); }
html .check .up-i-check, html .btn .up-i { color: inherit; }
html .up-i-alert { color: #d97706; margin-right: .2rem; }
html .up-i-circle { color: var(--border-hover); }
/* menu button (mobile) and sign-out */
html .hamburger, html .sidebar-signout { font-size: 1.05rem; }

/* ---------- public booking pages ---------- */
html .logo { margin-bottom: 1.25rem; }
html .logo img { max-height: 52px; }