/*
 * Non-Tailwind overrides loaded after compiled Tailwind (see layouts/_head_nexus.html.erb).
 * Keep here: rules that must win over @layer utilities (e.g. dark halation fixes with !important),
 * third-party widgets (.pac-container), modal z-index/scroll, and cursor/interaction tweaks.
 * Prefer @layer components in app/assets/tailwind/application.css for new theme-aligned styles.
 */

/*
 * Native form-control color scheme — must be UNLAYERED.
 * `color-scheme` on html.dark is inside @layer components (lower cascade priority than unlayered
 * rules). Browsers derive the native-widget theme from the element's OWN computed color-scheme,
 * so `<select>` popup menus and `<input type="date">` calendar pickers render in OS-light even on
 * a dark page unless we set it directly here (unlayered = highest-priority author origin).
 */
/*
 * Native text fields + pickers: set color-scheme on the control itself (not only html.dark).
 * Otherwise Chrome/Edge on Windows may paint light-themed borders/focus (blue accent) on dark pages.
 */
html.dark select,
html.dark textarea,
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="url"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"],
html.dark input[type="month"],
html.dark input[type="week"] {
  color-scheme: dark;
}
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) input[type="text"],
html:not(.dark) input[type="search"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="url"],
html:not(.dark) input[type="tel"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="date"],
html:not(.dark) input[type="time"],
html:not(.dark) input[type="datetime-local"],
html:not(.dark) input[type="month"],
html:not(.dark) input[type="week"] {
  color-scheme: light;
}

/*
 * Date/time picker indicator (calendar + clock icons) — style to match app muted text.
 * Without this the icons render in the browser's OS accent colour (bright blue on Windows).
 */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) hue-rotate(180deg);
  opacity: 0.55;
  cursor: pointer;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="time"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.9;
}
html:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator,
html:not(.dark) input[type="time"]::-webkit-calendar-picker-indicator,
html:not(.dark) input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}
html:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator:hover,
html:not(.dark) input[type="time"]::-webkit-calendar-picker-indicator:hover,
html:not(.dark) input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.75;
}

/* Main app `shared/page_header` titles — matches --font-display (Saira from /nexus_fonts.css; administrate uses its own head). */
.app-page-header-title {
  font-family: var(--font-display);
  text-shadow: none;
  filter: none;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/*
 * Wide tables: horizontal scroll when columns exceed the container.
 * Do not use overflow-y: visible here: with overflow-x: auto, CSS forces overflow-y to auto as well,
 * which can reserve a vertical scrollbar gutter and produce a bogus horizontal scrollbar (e.g. External Data Pages).
 * clip keeps paint inside the box without creating a vertical scroll container; row tooltips still fit within the table block.
 */
.admin-table-responsive-x {
  overflow-x: auto;
  overflow-y: clip;
}

/*
 * Fit-width tables (e.g. permission presets): skip the scrollport so we don’t get a stray horizontal
 * scrollbar when content fits, and tooltips aren’t clipped by overflow-y: clip / overflow-x: auto.
 * Pair with the same .admin-table-responsive-x > table rules for thead/tbody styling.
 */
.admin-table-responsive-x.admin-table-responsive-x--no-scroll {
  overflow-x: visible;
  overflow-y: visible;
}

@media (max-width: 639px) {
  .admin-table-responsive-x.admin-table-responsive-x--no-scroll {
    overflow-x: auto;
    overflow-y: clip;
  }
}

/* Permission presets: +/− icons in <summary> (details open state has no reliable Tailwind group-open in all builds). */
#add-preset-details:not([open]) .add-preset-icon-minus {
  display: none;
}
#add-preset-details[open] .add-preset-icon-plus {
  display: none;
}
#add-preset-details[open] .add-preset-icon-minus {
  display: inline-flex;
}

/*
 * Admin data tables: align header band with card rounded-2xl (1rem) and use border-separate so
 * first/last <th> can pick up top corner radii (collapse mode clips them square).
 */
.admin-table-responsive-x > table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table-responsive-x > table > thead > tr:first-child > th:first-child {
  border-top-left-radius: 1rem;
}

.admin-table-responsive-x > table > thead > tr:first-child > th:last-child {
  border-top-right-radius: 1rem;
}

/* thead row bg on cells so radius is visible (thead background alone stays square under collapse). */
.admin-table-responsive-x > table > thead > tr > th {
  background-color: var(--surface-inset);
}

/* Avoid double header fill: cell bg carries the band (win over Tailwind bg on thead). */
.admin-table-responsive-x > table > thead {
  background-color: transparent !important;
}

/*
 * Body rows: paint backgrounds on <td> (not tbody) so hover + fills respect rounded-2xl (1rem) bottom
 * corners. overflow:hidden on the card would clip sticky thead and tooltips — cell radii + transparent tbody instead.
 */
.admin-table-responsive-x > table > tbody {
  background-color: transparent !important;
}

.admin-table-responsive-x > table > tbody > tr > td {
  background-color: color-mix(in srgb, var(--surface-container) 90%, transparent);
  transition: background-color 200ms;
}

/* Row dividers on cells: divide-y on <tr> does not paint reliably with border-separate tables. */
.admin-table-responsive-x > table > tbody > tr:not(:last-child) > td {
  border-bottom: 1px solid var(--border-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .admin-table-responsive-x > table > tbody > tr > td {
    transition: none;
  }
}

.admin-table-responsive-x > table > tbody > tr:hover > td {
  background-color: color-mix(in srgb, var(--surface-container-inner) 90%, transparent);
}

.admin-table-responsive-x > table > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 1rem;
}

.admin-table-responsive-x > table > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 1rem;
}

/* Optional: muted/highlight row (e.g. gift card codes) — keep corners consistent with last-row radius rules. */
.admin-table-responsive-x > table > tbody > tr.admin-table-row-highlight > td {
  background-color: color-mix(in srgb, var(--surface-container-inner) 40%, transparent);
}

.admin-table-responsive-x > table > tbody > tr.admin-table-row-highlight:hover > td {
  background-color: color-mix(in srgb, var(--surface-container-inner) 55%, transparent);
}

/*
 * Permission matrix: bulk-actions row — backgrounds are painted on <td> (see tbody rules above), so a
 * Tailwind bg on <tr> does not match other rows. Tint with --accent so the row reads as a control strip
 * (distinct from data rows) in both admin (blue) and main app (emerald) themes.
 */
.admin-table-responsive-x > table > tbody > tr.admin-table-bulk-row > td {
  background-color: color-mix(in srgb, var(--accent) 14%, var(--surface-container));
  font-family: var(--font-ui);
}

.admin-table-responsive-x > table > tbody > tr.admin-table-bulk-row:hover > td {
  background-color: color-mix(in srgb, var(--accent) 20%, var(--surface-container-inner));
}

/* Admin panel: submit loading spinner (class added by admin_form_submit_controller.js; SVG is injected). */
@keyframes admin-form-submit-spin {
  to {
    transform: rotate(360deg);
  }
}

.admin-form-submit__spinner svg {
  animation: admin-form-submit-spin 0.65s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .admin-form-submit__spinner svg {
    animation-duration: 1.5s;
  }
}

/* Admin panel: hide submit label while spinner shows (see admin_form_submit_controller.js). */
button.admin-form-submit--loading[type="submit"] {
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
}

input.admin-form-submit--input-loading[type="submit"] {
  min-width: 7rem;
}

/* Custom select styling overrides */
@layer components {
  .select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    text-indent: 0.15rem;
  }
  .inline-editor-input::-webkit-outer-spin-button,
  .inline-editor-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .inline-editor-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
}

/* Ensure modals sit above Google Maps error overlay ("This page can't load Google Maps correctly") */
[data-modal-panel].fixed {
  z-index: 2147483646 !important;
}

/* Modal panel scroll: allow scrolling when content is taller than viewport */
[data-modal-target="panel"] {
  overflow-y: auto;
}
/* Keep backdrop fixed so it doesn't scroll with content */
[data-modal-target="panel"] > div:first-child {
  position: fixed;
}

/*
 * Google Places Autocomplete — match Nexus / admin theme tokens.
 * Maps JS injects .pac-* styles after page CSS; use !important + html/body prefix so these win.
 * z-index: above modals (lodging / POI / profile address).
 */
html body .pac-container {
  margin-top: 4px !important;
  border-radius: 0.75rem !important;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif !important;
  z-index: 2147483647 !important;
  background-color: var(--surface-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-modal) !important;
}

html body .pac-item {
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  border-top: 1px solid var(--border-subtle) !important;
}

html body .pac-item:first-child {
  border-top: none !important;
}

html.dark body .pac-item {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

html.dark body .pac-item:hover,
html.dark body .pac-item-selected {
  background-color: var(--surface-container-inner) !important;
}

html.dark body .pac-item-query {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

html.dark body .pac-item > span:not(.pac-item-query):not(.pac-icon) {
  color: var(--text-muted) !important;
}

html.dark body .pac-matched {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

html:not(.dark) body .pac-item {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

html:not(.dark) body .pac-item:hover,
html:not(.dark) body .pac-item-selected {
  background-color: var(--surface-container-inner) !important;
}

html:not(.dark) body .pac-item-query {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}

html:not(.dark) body .pac-item > span:not(.pac-item-query):not(.pac-icon) {
  color: var(--text-muted) !important;
}

html:not(.dark) body .pac-matched {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

.pac-icon {
  display: none;
}

.pac-icon-marker {
  display: none;
}

.pac-logo::after {
  display: none;
}

/* When Places marks the input, align focus ring with modal fields (theme accent). */
html body .pac-target-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring-accent) 40%, transparent) !important;
}

/* Budget cards use theme tokens from tailwind/application.css; shared base for compatibility */
.budget-summary-card,
.budget-section-card,
.budget-bucket-card {
  border-radius: 0.75rem;
}
.budget-summary-card { padding: 1.25rem; }
.budget-section-card { padding: 1.5rem; }
.budget-bucket-card { padding: 1rem; }

.budget-section-card > * + *,
.budget-bucket-card > * + *,
.budget-summary-card > * + * {
  margin-top: 0.75rem;
}

.budget-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.budget-muted-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.budget-body-text {
  color: var(--text-primary);
  font-size: 0.85rem;
  opacity: 0.92;
}

/* Preserve profile/alias casing (no capitalize) so "missharvey" stays "missharvey" */
.preserve-name-case {
  text-transform: none !important;
}

/* Obligation action buttons: fixed 20px cells, 6px gap, so spacing is identical between all four */
.obligation-action-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.obligation-action-cell {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.obligation-action-form {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.obligation-action-form .obligation-action-btn {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* Ensure inline editor display spans fill their cells so inputs can overlay everything */
[data-inline-editor-target="display"] {
  display: inline-flex;
  width: 100%;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.15rem;
}

.inline-editor-input {
  min-height: 2.5rem;
}

/* Stimulus cursor overrides: pointer only when an action is registered */
/* Exclude form so the whole schedule/other forms don't show pointer over non-interactive areas */
[data-controller][data-action]:not(form),
[data-action]:not([data-action=""]):not(form),
button[data-action],
a[data-action],
label[data-action],
[role="button"][data-action],
[role="tab"][data-action] {
  cursor: pointer !important;
}

/* Insert placeholder button when disabled: show not-allowed, not pointer */
.insert-placeholder-btn-disabled,
[data-placeholder-picker-target="insertButton"]:disabled {
  cursor: not-allowed !important;
}

/* Ensure interactive elements have pointer cursor */
:is(
  button:not(:disabled),
  a[href]:not([href=""]):not([href="#"]),
  label[for],
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"],
  input[type="button"]:not(:disabled),
  input[type="submit"]:not(:disabled),
  [data-modal-open],
  [data-modal-close],
  [data-modal-panel],
  [data-modal-target]
) {
  cursor: pointer;
}

/*
 * Unlayered rules — loaded after tailwind.css. Unlayered !important beats @layer utilities and
 * @layer components, which makes this the right place for fixes that Tailwind v4 strips from
 * @layer components (e.g. will-change / transform used for GPU compositing of fixed panels).
 */

/* Force the dropdown panel onto its own GPU compositor layer so it stays opaque over the sticky
 * nav's backdrop-filter blur (Chromium/Windows transparency artifact with position:fixed). */
.ui-menu-select__panel {
  will-change: transform !important;
  transform: translateZ(0) !important;
}

/* When shown via the Popover API the panel enters the top layer, but Tailwind's `absolute`
 * utility (in @layer utilities) has higher cascade priority than the UA :popover-open rule,
 * so the panel stays `position:absolute` even while in the top layer. That means focus() on
 * the first option can trigger a scroll on overflow:auto ancestors (e.g. <main
 * overflow-x:hidden>, which computes overflow-y:auto), which fires _onScrollOrResizeClose and
 * immediately closes the dropdown. This non-layered rule wins over @layer utilities and forces
 * position:fixed so the panel is truly viewport-anchored before _pinPanelToViewport() runs. */
.ui-menu-select__panel:popover-open {
  position: fixed;
  /* Some UAs add popover padding/margin; keep the first row flush with the inner top edge. */
  padding: 0 !important;
  margin: 0 !important;
}

/*
 * List rows: `@layer components` can lose to Tailwind utilities or UA button chrome on some pages
 * (e.g. Requests hub filters), which reads as rounded “pills” and horizontal inset. Unlayered wins.
 */
.ui-menu-select__panel .ui-menu-select__option {
  border-radius: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

/* Offset the list 1px into the panel top border so the first row’s fill meets the outer edge (no dark sliver). */
.ui-menu-select__panel [role="listbox"] {
  margin-top: -1px !important;
}

/*
 * Loaded after tailwind.css (see layouts). Tailwind v4 does not emit CSS that follows the bundle
 * in app/assets/tailwind/application.css, so these live here. Unlayered + !important beats
 * @layer utilities (`dark:text-white` = pure #fff), which reads as halation on dark zinc panels.
 */
html.dark :where(p, h1, h2, h3, h4, h5, h6, td, th, li).dark\:text-white,
html.dark :where(p, h1, h2, h3, h4, h5, h6, td, th, li).text-white {
  color: rgb(228 228 231) !important;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark :where(span.font-medium, span.font-semibold, span.font-bold).text-white,
html.dark :where(span.font-medium, span.font-semibold, span.font-bold).dark\:text-white,
html.dark span.text-2xl.font-bold.text-white,
html.dark span.text-2xl.font-bold.dark\:text-white {
  color: rgb(228 228 231) !important;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark :where(p, h1, h2, h3, h4, h5, h6, td, th, li).dark\:text-zinc-100,
html.dark :where(p, h1, h2, h3, h4, h5, h6, td, th, li).text-zinc-100,
html.dark :where(p, h1, h2, h3, h4, h5, h6, td, th, li).dark\:text-zinc-50,
html.dark :where(p, h1, h2, h3, h4, h5, h6, td, th, li).text-zinc-50 {
  color: rgb(212 212 216) !important;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark a.dark\:text-zinc-100:not(:hover),
html.dark a.text-zinc-100:not(:hover) {
  color: rgb(212 212 216) !important;
  font-family: var(--font-ui), ui-sans-serif, system-ui, sans-serif !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

/* Panel titles: use theme primary (avoids cool blue-gray rgb(200,200,204) on Nexus dark). */
html.dark :where(h1, h2, h3).heading-clean-page {
  color: var(--text-primary) !important;
  text-shadow: 0 0 0 transparent !important;
  filter: none !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  text-rendering: optimizeSpeed;
}

/*
 * Large headings and header metadata: subpixel AA + optimizeSpeed reduces soft halo on displays
 * where grayscale AA or default rendering reads as a glow on light-on-dark type.
 */
html.dark :where(h2, h3).text-xl.font-semibold.dark\:text-white,
html.dark :where(h2, h3).text-xl.font-semibold.text-white,
html.dark :where(h2, h3, p).text-2xl.font-semibold.text-white,
html.dark :where(h2, h3).text-xl.font-semibold.dark\:text-zinc-100,
html.dark header div.mt-2.flex[class*="text-gray"] {
  text-shadow: 0 0 0 transparent !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  text-rendering: optimizeSpeed;
}

/* Attendee names, lodging names, etc.: same crisp rendering for white body text */
html.dark :where(p, span).font-semibold.text-white {
  text-shadow: 0 0 0 transparent !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  text-rendering: optimizeSpeed;
}

/*
 * Labels often use `text-gray-500` without `dark:` — still #6b7280 on dark panels.
 * Meta rows use `dark:text-gray-400` on wrappers (`div`); body copy uses `dark:text-gray-300` on `p` and should stay brighter than labels.
 */
html.dark :where(p, span, label, li, td, th, button).text-gray-500 {
  color: var(--text-muted, #a1a1aa) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

/*
 * Unprefixed `text-gray-400` on dark panels (event logistics copy, labels) — cool gray → theme muted.
 * Scoped to Nexus app so Administrate is unchanged.
 */
html.dark:not([data-ui="admin"]) :where(p, span, label, h4, h3, svg).text-gray-400 {
  color: var(--text-muted, #a1a1aa) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

/* Include `p` — event/profile section eyebrows and similar use <p class="… dark:text-gray-400"> */
html.dark :where(div, span, a, label, td, th, li, p).dark\:text-gray-400 {
  color: var(--text-muted, #a1a1aa) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark p.dark\:text-gray-300 {
  color: rgb(214 214 220) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark span.dark\:text-gray-300 {
  color: rgb(205 205 212) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark :where(p, span, label).dark\:text-gray-500,
html.dark :where(p, span, label).dark\:text-gray-600 {
  color: rgb(113 113 122) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

/*
 * Nexus app: placeholders use theme --text-muted (zinc family), not slate-400 — slate read blue-gray on dark UI.
 * !important keeps this above Tailwind placeholder utilities where both apply.
 */
html.dark:not([data-ui="admin"])
  :where(input, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"])::placeholder {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

/*
 * Accent link halation fixes — scoped by data-ui so administrate stays blue and the main app stays emerald
 * (views often reuse `dark:text-blue-*` utilities; without a split, admin tweaks paint the whole product blue).
 */
/* Administrate: solid blues + no shadow */
html.dark[data-ui="admin"] a.dark\:text-blue-400\/90:not(:hover),
html.dark[data-ui="admin"] a.dark\:text-blue-400:not(:hover),
html.dark[data-ui="admin"] a.dark\:text-blue-300:not(:hover) {
  color: rgb(96 165 250) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="admin"] a.dark\:hover\:text-blue-300:hover {
  color: rgb(147 197 253) !important;
}

html.dark[data-ui="admin"] :where(span, button).text-blue-800.dark\:text-blue-400\/90,
html.dark[data-ui="admin"] :where(span, button).dark\:text-blue-400\/90 {
  color: rgb(96 165 250) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="admin"] button.dark\:\!text-blue-300 {
  color: rgb(96 165 250) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="admin"] button.dark\:\!text-blue-200 {
  color: rgb(147 197 253) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="admin"] nav button.dark\:text-blue-400:not(:hover) {
  color: rgb(96 165 250) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

/* Nexus app: same utility classes, emerald accent (matches --accent / --tab-segment-active-fg) */
html.dark[data-ui="app"] a.dark\:text-blue-400\/90:not(:hover),
html.dark[data-ui="app"] a.dark\:text-blue-400:not(:hover),
html.dark[data-ui="app"] a.dark\:text-blue-300:not(:hover) {
  color: rgb(52 211 153) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="app"] a.dark\:hover\:text-blue-300:hover {
  color: rgb(110 231 183) !important;
}

html.dark[data-ui="app"] :where(span, button).text-blue-800.dark\:text-blue-400\/90,
html.dark[data-ui="app"] :where(span, button).dark\:text-blue-400\/90 {
  color: rgb(52 211 153) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="app"] button.dark\:\!text-blue-300 {
  color: rgb(52 211 153) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="app"] button.dark\:\!text-blue-200 {
  color: rgb(110 231 183) !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

html.dark[data-ui="app"] nav button.dark\:text-blue-400:not(:hover) {
  color: rgb(52 211 153) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: auto;
}

/* Admin layout sidebar: zinc ladder aligned with --surface-container / inner (dark theme). */
.admin-sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgb(82 82 91 / 0.9) rgb(24 24 27 / 0.45);
}

.admin-sidebar-scroll::-webkit-scrollbar {
  width: 8px;
}

.admin-sidebar-scroll::-webkit-scrollbar-track {
  background: rgb(24 24 27 / 0.35);
  border-radius: 9999px;
}

.admin-sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: rgb(82 82 91 / 0.85);
}

.admin-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgb(113 113 122 / 0.9);
}

/*
 * Administrate forms: vertical gap between field groups (.admin-field-unit-stack in _form.html.erb).
 * Duplicated here (stylesheet loads after tailwind) so spacing works even if tailwind.css is stale.
 */
.admin-field-unit-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-field-unit-stack--email-template {
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .admin-field-unit-stack--email-template {
    gap: 0.875rem;
  }
}

/*
 * WebKit/Blink autofill: lives here (not in compiled tailwind.css) so it loads AFTER tailwind and wins
 * the author cascade. Also uses transition hack so Chrome is less likely to re-apply default autofill chrome.
 * Inset fill: app tints with --accent (emerald); admin tints with --ring-accent (blue-400) so the wash reads
 * clearly cooler than the main product while matching administrate focus chrome.
 */
html.dark:not([data-ui="admin"]) [data-section-block] input[type="text"]:-webkit-autofill,
html.dark:not([data-ui="admin"]) [data-section-block] input[type="text"]:-webkit-autofill:hover,
html.dark:not([data-ui="admin"]) [data-section-block] input[type="text"]:-webkit-autofill:active {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 6%, var(--surface-container-inner)) inset !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 6%, var(--surface-container-inner)) inset !important;
  border: 1px solid var(--border-subtle) !important;
  outline: none !important;
}

html.dark[data-ui="admin"] [data-section-block] input[type="text"]:-webkit-autofill,
html.dark[data-ui="admin"] [data-section-block] input[type="text"]:-webkit-autofill:hover,
html.dark[data-ui="admin"] [data-section-block] input[type="text"]:-webkit-autofill:active {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 8%, var(--surface-container-inner)) inset !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 8%, var(--surface-container-inner)) inset !important;
  border: 1px solid var(--border-subtle) !important;
  outline: none !important;
}

html.dark:not([data-ui="admin"]) [data-section-block] input[type="text"]:-webkit-autofill:focus,
html.dark:not([data-ui="admin"]) [data-section-block] input[type="text"]:-webkit-autofill:focus-visible,
html.dark:not([data-ui="admin"]) [data-section-block] input[type="text"]:-webkit-autofill:focus:hover,
html.dark:not([data-ui="admin"]) [data-section-block] input[type="text"]:-webkit-autofill:focus-visible:hover {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 6%, var(--surface-container-inner)) inset,
    0 0 0 2px rgb(16 185 129 / 0.25) !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 6%, var(--surface-container-inner)) inset,
    0 0 0 2px rgb(16 185 129 / 0.25) !important;
  border: 1px solid #10b981 !important;
  outline: none !important;
}

html.dark[data-ui="admin"] [data-section-block] input[type="text"]:-webkit-autofill:focus,
html.dark[data-ui="admin"] [data-section-block] input[type="text"]:-webkit-autofill:focus-visible,
html.dark[data-ui="admin"] [data-section-block] input[type="text"]:-webkit-autofill:focus:hover,
html.dark[data-ui="admin"] [data-section-block] input[type="text"]:-webkit-autofill:focus-visible:hover {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 8%, var(--surface-container-inner)) inset,
    0 0 0 2px rgb(59 130 246 / 0.4) !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 8%, var(--surface-container-inner)) inset,
    0 0 0 2px rgb(59 130 246 / 0.4) !important;
  border: 1px solid rgb(37 99 235 / 0.6) !important;
  outline: none !important;
}

html.dark:not([data-ui="admin"]) input:-webkit-autofill,
html.dark:not([data-ui="admin"]) input:-webkit-autofill:hover,
html.dark:not([data-ui="admin"]) input:-webkit-autofill:active,
html.dark:not([data-ui="admin"]) textarea:-webkit-autofill,
html.dark:not([data-ui="admin"]) textarea:-webkit-autofill:hover,
html.dark:not([data-ui="admin"]) textarea:-webkit-autofill:active {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 7%, var(--surface-input)) inset !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 7%, var(--surface-input)) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border: 1px solid var(--border-subtle) !important;
  outline: none !important;
}

html.dark[data-ui="admin"] input:-webkit-autofill,
html.dark[data-ui="admin"] input:-webkit-autofill:hover,
html.dark[data-ui="admin"] input:-webkit-autofill:active,
html.dark[data-ui="admin"] textarea:-webkit-autofill,
html.dark[data-ui="admin"] textarea:-webkit-autofill:hover,
html.dark[data-ui="admin"] textarea:-webkit-autofill:active {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 9%, var(--surface-input)) inset !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 9%, var(--surface-input)) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border: 1px solid var(--border-subtle) !important;
  outline: none !important;
}

html.dark:not([data-ui="admin"]) input:-webkit-autofill:focus,
html.dark:not([data-ui="admin"]) input:-webkit-autofill:focus-visible,
html.dark:not([data-ui="admin"]) input:-webkit-autofill:focus:hover,
html.dark:not([data-ui="admin"]) input:-webkit-autofill:focus-visible:hover,
html.dark:not([data-ui="admin"]) textarea:-webkit-autofill:focus,
html.dark:not([data-ui="admin"]) textarea:-webkit-autofill:focus-visible,
html.dark:not([data-ui="admin"]) textarea:-webkit-autofill:focus:hover,
html.dark:not([data-ui="admin"]) textarea:-webkit-autofill:focus-visible:hover {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 7%, var(--surface-input)) inset,
    0 0 0 2px rgb(16 185 129 / 0.25) !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 7%, var(--surface-input)) inset,
    0 0 0 2px rgb(16 185 129 / 0.25) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border: 1px solid #10b981 !important;
  outline: none !important;
}

html.dark[data-ui="admin"] input:-webkit-autofill:focus,
html.dark[data-ui="admin"] input:-webkit-autofill:focus-visible,
html.dark[data-ui="admin"] input:-webkit-autofill:focus:hover,
html.dark[data-ui="admin"] input:-webkit-autofill:focus-visible:hover,
html.dark[data-ui="admin"] textarea:-webkit-autofill:focus,
html.dark[data-ui="admin"] textarea:-webkit-autofill:focus-visible,
html.dark[data-ui="admin"] textarea:-webkit-autofill:focus:hover,
html.dark[data-ui="admin"] textarea:-webkit-autofill:focus-visible:hover {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 9%, var(--surface-input)) inset,
    0 0 0 2px rgb(59 130 246 / 0.4) !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--ring-accent) 9%, var(--surface-input)) inset,
    0 0 0 2px rgb(59 130 246 / 0.4) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border: 1px solid rgb(37 99 235 / 0.6) !important;
  outline: none !important;
}

html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover,
html:not(.dark) input:-webkit-autofill:active,
html:not(.dark) textarea:-webkit-autofill,
html:not(.dark) textarea:-webkit-autofill:hover,
html:not(.dark) textarea:-webkit-autofill:active {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 5%, var(--surface-elevated)) inset !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 5%, var(--surface-elevated)) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border: 1px solid var(--border-subtle) !important;
  outline: none !important;
}

html:not(.dark) input:-webkit-autofill:focus,
html:not(.dark) input:-webkit-autofill:focus-visible,
html:not(.dark) input:-webkit-autofill:focus:hover,
html:not(.dark) input:-webkit-autofill:focus-visible:hover,
html:not(.dark) textarea:-webkit-autofill:focus,
html:not(.dark) textarea:-webkit-autofill:focus-visible,
html:not(.dark) textarea:-webkit-autofill:focus:hover,
html:not(.dark) textarea:-webkit-autofill:focus-visible:hover {
  transition: background-color 99999s ease-out 0s !important;
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 5%, var(--surface-elevated)) inset,
    0 0 0 2px rgb(16 185 129 / 0.25) !important;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--accent) 5%, var(--surface-elevated)) inset,
    0 0 0 2px rgb(16 185 129 / 0.25) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  border: 1px solid #10b981 !important;
  outline: none !important;
}

/*
 * FullCalendar (main.min.css is unlayered; Tailwind theme lives in @layer and can paint after FC).
 * Literal surfaces on day frames so the first frame cannot flash light cream/white while tokens resolve.
 * Matches app/assets/tailwind/application.css @layer base: --surface-page dark #0d0d11, light #f2f1ed.
 */
html.dark .events-calendar .fc-daygrid-day:not(.fc-day-today) .fc-daygrid-day-frame,
html.dark .events-calendar .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
  background-color: #0d0d11 !important;
}
html:not(.dark) .events-calendar .fc-daygrid-day:not(.fc-day-today) .fc-daygrid-day-frame,
html:not(.dark) .events-calendar .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
  background-color: #f2f1ed !important;
}
html.dark:not([data-ui="admin"]) .events-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, #10b981 14%, #0d0d11) !important;
}
html.dark[data-ui="admin"] .events-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, #3b82f6 14%, #0d0d11) !important;
}
html:not(.dark) .events-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background-color: color-mix(in srgb, #059669 14%, #f2f1ed) !important;
}