/*
 * Base styles the utility classes are a bad fit for.
 *
 * Form controls are the reason this file exists: there are several hundred
 * inputs across the templates, and putting five identical classes on each of
 * them is both noise and a guarantee that one gets missed. Everything here is
 * a default the markup can still override with a utility class.
 */

:root {
  /* Tells the browser to render native widgets — date pickers, scrollbars,
     the autofill overlay — in their dark variants. Without it a date field
     opens a white calendar in the middle of a dark page. */
  color-scheme: dark;
}

body {
  -webkit-font-smoothing: antialiased;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  background-color: #18181b;   /* zinc-900 */
  border-color: #3f3f46;       /* zinc-700 */
  color: #e4e4e7;              /* zinc-200 */
}

input::placeholder,
textarea::placeholder {
  color: #71717a;              /* zinc-500 */
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #38bdf8;       /* sky-400 */
  box-shadow: 0 0 0 1px #38bdf8;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: #27272a;   /* zinc-800 */
  color: #a1a1aa;              /* zinc-400 */
  cursor: not-allowed;
}

/* Checkboxes default to a light-grey box on dark; accent-color is the one
   property that restyles them without rebuilding the control. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #38bdf8;
}

/* Chrome paints autofilled fields a hard-coded pale yellow. The inset shadow
   is the only way to cover it that Chrome honours. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e4e4e7;
  -webkit-box-shadow: 0 0 0 1000px #18181b inset;
  caret-color: #e4e4e7;
}

summary { cursor: pointer; }
summary::-webkit-details-marker { color: #71717a; }

/* The account menu's trigger is an avatar, not a disclosure row — the marker
   would sit beside it as a stray triangle. */
details[data-menu] > summary { list-style: none; }
details[data-menu] > summary::-webkit-details-marker { display: none; }
details[data-menu] > summary::marker { content: ''; }

::selection { background: #0ea5e9; color: #fafafa; }

/* Scrollbars, so a dark page does not get a bright grey gutter down its side. */
* { scrollbar-color: #3f3f46 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover { background: #52525b; background-clip: content-box; }

/* Printing a page of notes or an order of service should not spend a cartridge
   on the dark background. */
@media print {
  body { background: #fff !important; color: #18181b !important; }
  aside, header nav { display: none !important; }
}