/*
 * The diner look for the app itself: the admin console, the member
 * dashboard, and the Devise pages (layouts admin, dashboard, and auth,
 * each with body[data-app-theme="diner"]). It borrows the public diner
 * theme (themes/diner.css): cream paper, red brush-script titles with an
 * inked offset, a red band for the sidebar, square corners, and a notched
 * ribbon for the sign-in button.
 *
 * The palette is always the diner theme's defaults, never the current
 * business's brand: layouts/_app_theme_head sets the same --color-* and
 * --font-* custom properties the public layout sets, from
 * ApplicationHelper#app_theme. Nothing here selects on a Tailwind utility
 * name. Views and the Ui components carry semantic classes (ui-button,
 * ui-input, ui-notice, ui-badge, ui-table, ui-list-row, ui-muted, ui-link,
 * ui-error, ...) and the theme styles those, plus plain elements (headings,
 * inputs, tables) and the app-* layout classes. The colors come from the
 * --ui-* tokens below. Utilities in markup are only for layout (flex, gap,
 * padding) and for the structural "border" edge; its color comes from one
 * element-level rule. Rules never set display, so hidden / md:flex toggles
 * keep working. Unlayered, so they win over Tailwind's utilities.
 */

/* Tokens. Defaults here (also used by the marketing forms that share the
   UiFormBuilder); the diner body below overrides them from its palette. */
:root {
  --ui-danger: #b91c1c;
  --ui-warn: #92400e;
  --ui-warn-bg: #fffbeb;
  --ui-success: #166534;
  --ui-success-bg: #f0fdf4;
  --ui-info: #1e40af;
  --ui-info-bg: #eff6ff;
  --ui-muted: #6b7280;
  --ui-border: #d1d5db;
  --ui-focus: #2563eb;
}

body[data-app-theme="diner"] {
  --dn-red: var(--color-primary);
  --dn-stripe: var(--color-accent);
  --dn-paper: var(--color-background);
  --dn-ink: var(--color-text);
  --dn-card: color-mix(in srgb, white 55%, var(--dn-paper));
  --dn-muted: color-mix(in srgb, var(--dn-ink) 72%, var(--dn-paper));

  --ui-danger: var(--dn-stripe);
  --ui-muted: var(--dn-muted);
  --ui-border: color-mix(in srgb, var(--dn-ink) 55%, var(--dn-paper));
  --ui-focus: var(--dn-stripe);
  --ui-warn: #7a4e00;
  --ui-success: #2f6b3a;
  --ui-info: #2c5a7a;
  --ui-warn-bg: color-mix(in srgb, var(--ui-warn) 7%, var(--dn-paper));
  --ui-success-bg: color-mix(in srgb, var(--ui-success) 12%, var(--dn-paper));
  --ui-info-bg: color-mix(in srgb, var(--ui-info) 10%, var(--dn-paper));

  background-color: var(--dn-paper);
  /* A faint darkening toward the edges, like an old sheet of card stock. */
  background-image: radial-gradient(ellipse at center, transparent 55%, rgb(110 70 20 / 0.1));
  background-attachment: fixed;
  color: var(--dn-ink);
  font-family: var(--font-body);
  line-height: 1.45;
}

body[data-app-theme="diner"] a:focus-visible,
body[data-app-theme="diner"] button:focus-visible,
body[data-app-theme="diner"] input:focus-visible,
body[data-app-theme="diner"] select:focus-visible,
body[data-app-theme="diner"] textarea:focus-visible,
body[data-app-theme="diner"] summary:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* ---------- Sidebar and mobile top bar: a red band ---------- */

body[data-app-theme="diner"] .app-sidebar,
body[data-app-theme="diner"] .app-topbar {
  background: var(--dn-red);
  color: var(--dn-paper);
  border-color: var(--dn-paper);
}

/* A cream rule inside the band's inner edge, like the public header's. */
body[data-app-theme="diner"] .app-sidebar {
  border-right-width: 0;
  box-shadow: inset -3px 0 0 var(--dn-red), inset -4.5px 0 0 var(--dn-paper);
}

body[data-app-theme="diner"] .app-topbar {
  border-bottom-width: 0;
  box-shadow: inset 0 -3px 0 var(--dn-red), inset 0 -4.5px 0 var(--dn-paper);
}

body[data-app-theme="diner"] .app-brand {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.15;
  text-shadow: 1.5px 1.5px 0 var(--dn-ink);
  overflow-wrap: anywhere;
}

body[data-app-theme="diner"] .app-sidebar ul li,
body[data-app-theme="diner"] .app-nav ul li {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-app-theme="diner"] .app-sidebar ul a:hover {
  background: var(--dn-stripe);
}

body[data-app-theme="diner"] .app-sidebar .ui-muted {
  color: color-mix(in srgb, var(--dn-paper) 80%, var(--dn-red));
}

/* The business switcher: cream outlines, the current business filled. */
body[data-app-theme="diner"] .app-sidebar .app-switch,
body[data-app-theme="diner"] .app-topbar summary {
  border-color: var(--dn-paper);
  border-radius: 0;
  color: var(--dn-paper);
  background: transparent;
}

body[data-app-theme="diner"] .app-sidebar .app-switch:hover:not(:disabled) {
  background: var(--dn-stripe);
}

body[data-app-theme="diner"] .app-sidebar .app-switch:disabled {
  background: var(--dn-paper);
  color: var(--dn-red);
  font-weight: 700;
}

/* The mobile dropdown sits on paper, so its links go back to ink. */
body[data-app-theme="diner"] .app-nav {
  background: var(--dn-paper);
  color: var(--dn-ink);
  border: 2px solid var(--dn-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--dn-ink);
}

body[data-app-theme="diner"] .app-nav ul a:hover {
  background: color-mix(in srgb, var(--dn-red) 12%, var(--dn-paper));
}

body[data-app-theme="diner"] .app-nav .app-switch:disabled {
  background: var(--dn-red);
  color: var(--dn-paper);
}

/* ---------- Page content ---------- */

body[data-app-theme="diner"] main h1,
body[data-app-theme="diner"] main h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
  color: var(--dn-red);
  text-shadow: 1.5px 1.5px 0 var(--dn-ink);
}

/* The script runs small for its size, so page titles get a bump. */
body[data-app-theme="diner"] main h1 {
  font-size: 2.6rem;
}

body[data-app-theme="diner"] main h2 {
  font-size: max(1.75rem, 1em);
}

body[data-app-theme="diner"] main h3 {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Every border in page content takes the ink border token. Zero
   specificity, so any ui-* rule below (notices, badges, callouts) wins. */
:where(body[data-app-theme="diner"] main) * {
  border-color: var(--ui-border);
}

/* Muted text, links, and error text, by semantic class. */
.ui-muted {
  color: var(--ui-muted);
}

.ui-error {
  color: var(--ui-danger);
}

.ui-link {
  text-decoration: underline;
}

body[data-app-theme="diner"] main .ui-link {
  color: var(--dn-red);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body[data-app-theme="diner"] main .ui-link:hover {
  color: var(--dn-stripe);
}

/* A quoted block, a tinted row, a highlighted section, an invalid field. */
.ui-quote {
  border-color: var(--ui-border);
  color: var(--ui-muted);
}

.ui-highlight {
  background: var(--ui-warn-bg);
}

.ui-callout {
  border-color: var(--ui-warn);
}

.ui-invalid {
  border-color: var(--ui-danger);
}

.ui-progress {
  background: color-mix(in srgb, var(--ui-muted) 25%, transparent);
}

.ui-progress__bar {
  background: var(--ui-focus);
}

/* ---------- Notices and badges ---------- */

.ui-notice {
  border: 1px solid var(--ui-border);
}

.ui-notice--info {
  border-color: var(--ui-info);
  background: var(--ui-info-bg);
  color: var(--ui-info);
}

.ui-notice--success {
  border-color: var(--ui-success);
  background: var(--ui-success-bg);
  color: var(--ui-success);
}

.ui-notice--warning {
  border-color: var(--ui-warn);
  background: var(--ui-warn-bg);
  color: var(--ui-warn);
}

.ui-notice--danger {
  border-color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, var(--dn-paper, white));
  color: var(--ui-danger);
}

.ui-badge {
  border: 1px solid var(--ui-border);
}

.ui-badge--success {
  border-color: var(--ui-success);
  background: var(--ui-success-bg);
  color: var(--ui-success);
}

.ui-badge--warning {
  border-color: var(--ui-warn);
  background: var(--ui-warn-bg);
  color: var(--ui-warn);
}

.ui-badge--danger {
  border-color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, var(--dn-paper, white));
  color: var(--ui-danger);
}

.ui-badge--neutral {
  background: color-mix(in srgb, var(--ui-muted) 10%, transparent);
  color: var(--ui-muted);
}

/* A row in a list of records. */
.ui-list-row {
  border: 1px solid var(--ui-border);
}

/* ---------- Form fields ---------- */

/* Inputs are styled as elements (this covers hand-written fields too);
   .ui-input is the class the form builder adds, for hosts without the diner. */
.ui-input {
  border-color: var(--ui-border);
}

body[data-app-theme="diner"] input:is([type="text"], [type="email"], [type="password"], [type="url"], [type="number"],
                                      [type="date"], [type="time"], [type="datetime-local"], [type="search"], [type="tel"], :not([type])),
body[data-app-theme="diner"] select,
body[data-app-theme="diner"] textarea {
  background-color: var(--dn-card);
  color: var(--dn-ink);
  border: 1px solid var(--dn-ink);
  border-radius: 0;
}

body[data-app-theme="diner"] input[type="checkbox"],
body[data-app-theme="diner"] input[type="radio"] {
  accent-color: var(--dn-red);
}

body[data-app-theme="diner"] main label {
  font-weight: 600;
}

/* ---------- Buttons ---------- */

/* form.submit: solid red with a cream uppercase label. */
body[data-app-theme="diner"] main input[type="submit"] {
  background: var(--dn-red);
  color: var(--dn-paper);
  border: 0;
  border-radius: 0;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--dn-ink);
  transition: background-color 0.15s;
}

/* In a stacked form, the button keeps its own width. */
body[data-app-theme="diner"] main .flex-col > input[type="submit"] {
  align-self: flex-start;
}

body[data-app-theme="diner"] main input[type="submit"]:hover {
  background: var(--dn-stripe);
}

/* Ui::ButtonComponent buttons and links (ui-button--secondary is the
   default): ink outlines. Link and danger variants stay text links. */
.ui-button {
  border-radius: 0;
}

.ui-button--primary,
.ui-button--secondary {
  border: 1px solid var(--dn-ink, var(--ui-border));
  background: var(--dn-card, white);
  color: var(--dn-ink, inherit);
  font-weight: 600;
}

.ui-button--primary {
  border-color: var(--dn-red, var(--ui-focus));
  background: var(--dn-red, var(--ui-focus));
  color: var(--dn-paper, white);
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--dn-ink, transparent);
}

.ui-button--primary:hover:not(:disabled) {
  background: var(--dn-stripe, var(--ui-focus));
}

.ui-button--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--dn-red, var(--ui-focus)) 12%, var(--dn-paper, white));
}

.ui-button--link,
.ui-button--danger {
  border: 0;
  padding: 0;
  background: transparent;
  text-decoration: underline;
}

.ui-button--danger {
  color: var(--ui-danger);
}

.ui-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body[data-app-theme="diner"] main :is(input[type="submit"]):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Tables ---------- */

body[data-app-theme="diner"] main table {
  border-collapse: collapse;
}

body[data-app-theme="diner"] main thead th {
  font-size: 0.8rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--dn-red);
}

body[data-app-theme="diner"] main tbody tr + tr {
  border-top: 1px dotted color-mix(in srgb, var(--dn-ink) 45%, var(--dn-paper));
}

body[data-app-theme="diner"] main :is(th, td) {
  padding-right: 1rem;
}

/* ---------- Flash messages ---------- */

body[data-app-theme="diner"] .app-flash {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--dn-ink);
  border-left-width: 5px;
  background: var(--dn-card);
  font-weight: 600;
}

body[data-app-theme="diner"] .app-flash.alert {
  border-color: var(--dn-red);
  color: var(--dn-stripe);
}

/* ---------- Sign in and the other Devise pages (layouts/auth) ---------- */

body[data-layout="auth"] {
  min-height: 100vh;
  padding: 3rem 1rem;
}

body[data-layout="auth"] .auth-card {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem 2rem 1.75rem;
  background: var(--dn-card);
  border: 2px solid var(--dn-ink);
  /* A red pinstripe just inside the edge, and an inked offset shadow. */
  box-shadow: inset 0 0 0 4px var(--dn-card), inset 0 0 0 6px var(--dn-red), 5px 5px 0 var(--dn-ink);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body[data-layout="auth"] .auth-card > .app-brand {
  color: var(--dn-red);
  font-size: 2.75rem;
  text-align: center;
}

body[data-layout="auth"] main h2 {
  font-size: 1.1rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-style: italic;
  color: var(--dn-ink);
  text-shadow: none;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

body[data-layout="auth"] main form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

body[data-layout="auth"] .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

body[data-layout="auth"] .field:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

/* Devise's views put a <br> between each label and its field. */
body[data-layout="auth"] .field br {
  display: none;
}

body[data-layout="auth"] .field input:not([type="checkbox"]) {
  width: 100%;
  padding: 0.5rem 0.6rem;
}

body[data-layout="auth"] .field em {
  font-size: 0.8rem;
  color: var(--dn-muted);
}

/* The submit as the diner's notched red ribbon. */
body[data-layout="auth"] .actions input[type="submit"] {
  align-self: stretch;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.75rem 2.25rem;
  font-size: 0.9rem;
  box-shadow: inset 0 3px 0 var(--dn-red), inset 0 4.5px 0 var(--dn-paper),
              inset 0 -3px 0 var(--dn-red), inset 0 -4.5px 0 var(--dn-paper);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.9rem) 50%, 100% 100%, 0 100%, 0.9rem 50%);
  cursor: pointer;
}

body[data-layout="auth"] .actions input[type="submit"]:hover {
  box-shadow: inset 0 3px 0 var(--dn-stripe), inset 0 4.5px 0 var(--dn-paper),
              inset 0 -3px 0 var(--dn-stripe), inset 0 -4.5px 0 var(--dn-paper);
}

/* devise/shared/_links: one <p><a></p> per link, right after the form. */
body[data-layout="auth"] main > p:not([class]) {
  text-align: center;
  font-size: 0.85rem;
  margin-top: -0.5rem;
}

body[data-layout="auth"] main > p:not([class]) a {
  color: var(--dn-red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body[data-layout="auth"] main > p:not([class]) a:hover {
  color: var(--dn-stripe);
}

/* A dotted rule between the form and its links. */
body[data-layout="auth"] main > form + p:not([class]) {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--dn-ink);
}

body[data-layout="auth"] #error_explanation {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--dn-red);
  border-left-width: 5px;
  color: var(--dn-stripe);
  font-size: 0.9rem;
}

body[data-layout="auth"] #error_explanation h2 {
  font-size: 0.85rem;
  text-align: left;
  color: inherit;
}

/* Honor a reduced-motion preference: no transitions, animations, or smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Contract key terms ---------- */

body[data-app-theme="diner"] main table.contract-key-terms {
  width: auto;
  margin-bottom: 1rem;
}

body[data-app-theme="diner"] main table.contract-key-terms th {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
  padding-right: 1.5rem;
}

body[data-app-theme="diner"] main table.contract-key-terms :is(th, td) {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ui-border);
}