/* OPC admin design system — dark "modernist" theme derived from the
   Appointment Detail design (claude.ai/design). Everything is scoped under
   .opc-admin so it never leaks into the staff-facing app, which keeps using
   Tailwind via layouts/app. Any admin view can adopt it by using the classes
   below; see app/views/admin/appointments/show.html.erb for the reference. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

.opc-admin {
  --ink: #e8eaee;
  --bg: #0e1013;
  --panel: #16191e;
  --line: #262b33;
  --line2: #343a45;
  --mute: #8b929e;
  --acc: #ffb020;
  --acc-hi: #ffc44d;

  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.opc-admin *, .opc-admin *::before, .opc-admin *::after { box-sizing: border-box; }
/* Light calendar icon + dark popup on native date pickers. */
.opc-admin input[type="date"] { color-scheme: dark; }
.opc-admin a { color: var(--acc); text-decoration: none; }
.opc-admin a:hover { color: var(--acc-hi); text-decoration: underline; text-underline-offset: 3px; }
.opc-admin h1, .opc-admin h2 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.opc-admin :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* — chrome — */
.opc-nav {
  display: flex; align-items: center; gap: 22px;
  padding: 0 26px; height: 54px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.opc-brand {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 14px;
  letter-spacing: 0.1em; color: var(--acc); margin-right: 14px;
}
.opc-brand a { color: inherit; }
.opc-nav a { color: var(--mute); font-size: 13px; }
.opc-nav a:hover { color: var(--ink); text-decoration: none; }
.opc-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--acc); padding-bottom: 17px; margin-bottom: -19px;
}
.opc-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 26px 26px 76px; }
.opc-flash { padding: 12px 26px; font-weight: 500; }
.opc-flash-notice { background: rgba(255,176,32,0.12); color: var(--acc); border-bottom: 1px solid var(--line); }
.opc-flash-alert { background: rgba(236,48,19,0.14); color: #ff8a70; border-bottom: 1px solid var(--line); }

/* — type helpers — */
.opc-admin .lbl {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}
.opc-admin .num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.opc-admin .mute { color: var(--mute); }

/* — panels — */
.opc-admin .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; min-width: 0; }
.opc-admin .panel h2 { font-size: 16px; margin-bottom: 8px; }
/* clickable panels (card links, radio/label selectors) — kill the amber link color/underline */
.opc-admin a.panel { color: var(--ink); display: block; }
.opc-admin a.panel:hover { text-decoration: none; background: #1a1e25; border-color: var(--line2); }
.opc-admin label.panel:has(:checked) { border-color: var(--acc); }

/* — definition grid — */
.opc-admin .dt { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); }
.opc-admin .dt > div { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.opc-admin .dt > div:nth-child(2n) { text-align: right; font-weight: 500; }
.opc-admin .dt > div:nth-child(2n+1) { color: var(--mute); padding-right: 18px; }

/* — tables — */
.opc-admin .tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.opc-admin .tb th {
  text-align: left; padding: 0 14px 10px 0; border-bottom: 1px solid var(--line2);
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
}
.opc-admin .tb td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.opc-admin .tb tbody tr:hover { background: #1a1e25; }
.opc-admin .tb a { color: var(--acc); font-weight: 500; }

/* — chips / tags — */
.opc-admin .chip {
  display: inline-flex; padding: 3px 9px; border-radius: 4px;
  background: #1e232b; border: 1px solid var(--line2);
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mute);
}
.opc-admin .status-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px;
  background: rgba(255,176,32,0.12); border: 1px solid rgba(255,176,32,0.4); color: var(--acc);
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.opc-admin .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* — buttons — */
.opc-admin .bt {
  font: inherit; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 6px;
  cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center;
}
.opc-admin .bt:hover { text-decoration: none; }
.opc-admin .bt-p { background: var(--acc); color: #14161a; }
.opc-admin .bt-p:hover { background: var(--acc-hi); }
.opc-admin .bt-s { background: transparent; border-color: var(--line2); color: var(--ink); }
.opc-admin .bt-s:hover { background: #1c2129; border-color: #4a5260; }

/* — forms (for admin views migrating later) — */
.opc-admin .field { margin-bottom: 16px; }
.opc-admin .field > label { display: block; font-size: 12px; margin-bottom: 6px; color: var(--mute); }
.opc-admin .input, .opc-admin select.input, .opc-admin textarea.input {
  width: 100%; min-height: 38px; padding: 8px 11px; font: inherit; font-size: 14px;
  color: var(--ink); background: #0f1216; border: 1px solid var(--line2); border-radius: 6px;
}
.opc-admin .input:focus-visible { border-color: var(--acc); outline: none; }
.opc-admin .req { color: var(--acc); }

/* — stat bands — */
.opc-admin .band { display: grid; border-bottom: 1px solid var(--line2); }
.opc-admin .band > div { padding: 22px; border-left: 1px solid var(--line); }
.opc-admin .band > div:first-child { padding-left: 0; border-left: 0; }

/* — legacy bridge — remap the light Tailwind utilities on not-yet-migrated
   admin pages (index/edit/show) onto the dark palette, so they read as part
   of the theme without rewriting each template. Loaded after tailwind.css, so
   these win. ponytail: recolor-only; retire per page as views adopt the
   component classes above. */
.opc-admin .bg-white { background: var(--panel); border: 1px solid var(--line); }
.opc-admin .shadow-md, .opc-admin .shadow-sm { box-shadow: none; }
.opc-admin .bg-slate-100, .opc-admin .bg-gray-50, .opc-admin .bg-gray-100 { background: #1a1e25; }
.opc-admin .hover\:bg-slate-50:hover, .opc-admin .hover\:bg-gray-50:hover { background: #1a1e25; }
.opc-admin .divide-slate-100 > :not(:last-child) { border-color: var(--line); }

.opc-admin .text-slate-900,
.opc-admin .text-slate-800,
.opc-admin .text-slate-700,
.opc-admin .text-gray-900,
.opc-admin .text-gray-800,
.opc-admin .text-gray-700 { color: var(--ink); }
.opc-admin .text-slate-600,
.opc-admin .text-slate-500,
.opc-admin .text-gray-600,
.opc-admin .text-gray-500,
.opc-admin .text-gray-400 { color: var(--mute); }
.opc-admin .border-slate-300,
.opc-admin .border-gray-100,
.opc-admin .border-gray-200,
.opc-admin .border-gray-300 { border-color: var(--line2); }

/* accents: indigo -> amber (dark text on amber, never white — see d893df7) */
.opc-admin .text-indigo-600,
.opc-admin .text-amber-600 { color: var(--acc); }
.opc-admin .hover\:text-indigo-800:hover { color: var(--acc-hi); }
.opc-admin .bg-indigo-600 { background: var(--acc); color: #14161a; }
.opc-admin .hover\:bg-indigo-700:hover { background: var(--acc-hi); }
.opc-admin .hover\:bg-indigo-50:hover { background: rgba(255,176,32,0.12); }
.opc-admin .accent-indigo-600 { accent-color: var(--acc); }
.opc-admin .focus\:ring-indigo-500:focus, .opc-admin .text-indigo-600 { --tw-ring-color: var(--acc); }

/* neutral secondary buttons */
.opc-admin .bg-slate-200,
.opc-admin .bg-slate-700 { background: #1c2129; color: var(--ink); }
.opc-admin .hover\:bg-slate-300:hover,
.opc-admin .hover\:bg-slate-800:hover { background: #242a33; }

/* error / destructive tints */
.opc-admin .bg-red-100 { background: rgba(236,48,19,0.14); }
.opc-admin .hover\:bg-red-200:hover { background: rgba(236,48,19,0.22); }
.opc-admin .text-red-800,
.opc-admin .text-red-700,
.opc-admin .text-red-600 { color: #ff8a70; }

/* form fields (raw Tailwind inputs, not the .input class) */
.opc-admin [type=text], .opc-admin [type=email], .opc-admin [type=number],
.opc-admin [type=password], .opc-admin [type=search], .opc-admin [type=datetime-local],
.opc-admin select, .opc-admin textarea {
  background: #0f1216; color: var(--ink); border-color: var(--line2);
}
.opc-admin [type=text]:focus, .opc-admin [type=email]:focus,
.opc-admin [type=number]:focus, .opc-admin [type=password]:focus,
.opc-admin [type=search]:focus, .opc-admin [type=datetime-local]:focus,
.opc-admin select:focus, .opc-admin textarea:focus { border-color: var(--acc); }
.opc-admin ::placeholder { color: var(--mute); }