/* material.css — Material Design 3 component layer for the Yeeted dashboard.
 *
 * Loaded AFTER each page's inline <style>, so it restyles the shared component
 * classes (buttons, inputs, cards, tabs, chips, tables) to a Material look
 * while every page's own LAYOUT rules (.wrap, grids, widths, positioning) win
 * where they're more specific or page-unique. The palette is untouched — these
 * rules consume the same --terra / --cream / --ink / … variables each page
 * already defines (with identical fallbacks below for any page that doesn't).
 *
 * DOM is never changed: same tags, ids, and class names, so the Selenium suite
 * and every event handler keep working.
 */

:root {
  /* Palette fallbacks (identical to the pages' :root) so this sheet is
     self-sufficient if loaded first. */
  --cream: #fbf7f1; --ink: #2c241c; --sec: #6b5c4d; --muted: #a08d78;
  --terra: #c66a3f; --terra-dark: #b25a31; --terra-tint: rgba(198, 106, 63, .1);
  --border: #e9dfd2; --chip: #f5ece0; --green: #4a8a5c; --amber: #e4c465; --err: #a04030;

  /* MD3 elevation ramp, tinted warm to sit on the cream surface. */
  --md-e1: 0 1px 2px rgba(44, 36, 28, .10), 0 1px 3px rgba(44, 36, 28, .06);
  --md-e2: 0 1px 2px rgba(44, 36, 28, .10), 0 2px 6px rgba(44, 36, 28, .10);
  --md-e3: 0 4px 8px rgba(44, 36, 28, .12), 0 1px 3px rgba(44, 36, 28, .10);
  --md-e4: 0 6px 14px rgba(44, 36, 28, .14), 0 2px 6px rgba(44, 36, 28, .10);
  /* MD3 standard easing + duration. */
  --md-ease: cubic-bezier(.2, 0, 0, 1);
  --md-dur: 180ms;
}

/* Roboto for body/components (Material feel); pages keep Bricolage Grotesque
   for headings and IBM Plex Mono for code, so the brand identity survives. */
body {
  font-family: "Roboto", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* --- Buttons: MD3 filled / outlined / text, with a state layer + ripple ---- */

button {
  position: relative;
  overflow: hidden;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .01em;
  transition: box-shadow var(--md-dur) var(--md-ease),
              background-color var(--md-dur) var(--md-ease);
  -webkit-tap-highlight-color: transparent;
}
/* State layer: an overlay that darkens/lightens on hover + press (MD3 spec). */
button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-dur) var(--md-ease);
  pointer-events: none;
}
button:hover::before { opacity: .08; }
button:focus-visible::before { opacity: .12; }
button:active::before { opacity: .12; }

/* Filled primary — the high-emphasis action. Elevation lifts on hover. */
.primary {
  background: var(--terra);
  color: #fff;
  box-shadow: var(--md-e1);
}
.primary:hover { background: var(--terra); box-shadow: var(--md-e2); }
.primary:active { box-shadow: var(--md-e1); }

/* Outlined — medium emphasis (the existing .ghost). */
.ghost {
  background: transparent;
  color: var(--terra);
  border: 1px solid var(--border);
  box-shadow: none;
}
.ghost:hover { border-color: var(--terra); }
.ghost.danger { color: var(--err); }
.ghost.danger:hover { border-color: var(--err); }

/* JS ripple element (see material.js). */
.md-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .28;
  pointer-events: none;
  animation: md-ripple var(--md-dur) linear;
}
@keyframes md-ripple { to { transform: scale(2.4); opacity: 0; } }

/* --- Text fields: MD3 "filled" variant ------------------------------------- */

input, select, textarea {
  font-family: "Roboto", system-ui, sans-serif;
  background: var(--chip);
  border: none;
  border-bottom: 1px solid var(--muted);
  border-radius: 8px 8px 0 0;
  transition: border-color var(--md-dur) var(--md-ease),
              background-color var(--md-dur) var(--md-ease),
              box-shadow var(--md-dur) var(--md-ease);
}
input:hover, select:hover, textarea:hover { background: #efe4d4; }
/* The signature Material focus: the bottom edge thickens to a 2px primary
   underline (rendered as an inset shadow so it doesn't shift layout). */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-bottom-color: var(--terra);
  box-shadow: inset 0 -1px 0 0 var(--terra);
  background: #efe4d4;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--terra);
  min-width: 0;
  box-shadow: none;
  border-radius: 4px;
}

/* --- Cards & surfaces: elevation instead of a hard border ------------------ */

.card {
  border: 1px solid rgba(233, 223, 210, .6);
  box-shadow: var(--md-e1);
  border-radius: 16px;
  transition: box-shadow var(--md-dur) var(--md-ease);
}
.reveal { box-shadow: var(--md-e1); }

/* --- App bar: give the top nav a subtle Material elevation ------------------ */

nav {
  position: relative;
}
nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  box-shadow: 0 2px 6px rgba(44, 36, 28, .06);
}

/* --- Tabs: MD3 primary tabs (indicator + hover state layer) ----------------- */

.tab, .subtab {
  position: relative;
  overflow: hidden;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 500;
  transition: color var(--md-dur) var(--md-ease);
}
.tab::before, .subtab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--terra);
  opacity: 0;
  transition: opacity var(--md-dur) var(--md-ease);
  pointer-events: none;
}
.tab:hover::before, .subtab:hover::before { opacity: .06; }
/* Active tab state layer — covers both naming conventions in use
   (.active on the dashboard, .on on the admin page). */
.tab.active::before, .subtab.active::before,
.tab.on::before, .subtab.on::before { opacity: .08; }

/* --- Chips & status pills: keep the pill, Roboto-ize the label ------------- */

/* Pills must never wrap internally. The data tables set
   `th,td{overflow-wrap:anywhere}` (so long DSNs shrink the column), which would
   otherwise let a pill's label — e.g. "crashlooping", "notdeployed" — break
   mid-word inside its rounded chip. nowrap + inline-block keeps every pill on
   one line; a too-narrow table scrolls inside its card via .tscroll instead. */
.status, .typechip, .rolechip, .kindchip, .tag, .svcchip {
  font-family: "Roboto Mono", "IBM Plex Mono", monospace;
  font-weight: 500;
  white-space: nowrap;
  display: inline-block;
}

/* Button labels don't wrap either (MD3 buttons keep their label on one line);
   the action-column buttons ("Rotate password", "View as", …) were breaking
   in narrow cells for the same reason. */
button { white-space: nowrap; }

/* --- Data tables: Material row hover state layer --------------------------- */

tr.clickable { transition: background-color var(--md-dur) var(--md-ease); }
tr.clickable:hover td { background: var(--terra-tint); }
th {
  font-family: "Roboto Mono", "IBM Plex Mono", monospace;
}

/* --- Dialogs / overlays: MD3 elevation ------------------------------------- */

.dialog, .modal, [role="dialog"] { box-shadow: var(--md-e4); border-radius: 16px; }

/* --- Shared page header (domains, profile, billing, help) ------------------
   The one copy of the dashboard header for pages outside index.html. Pages
   supply markup only; every rule the header needs lives here so page-local
   button and link styles cannot bleed into it. */
.pagenav { display: flex; align-items: center; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.pagenav .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--terra); margin: 0; }
.pagenav .brand { font: 700 20px 'Bricolage Grotesque', sans-serif; color: var(--ink); }
.pagenav .tag { font: 500 12.5px "Roboto Mono", "IBM Plex Mono", monospace; color: var(--terra); background: var(--terra-tint); padding: 3px 10px; border-radius: 999px; margin-left: 6px; }
.pagenav .navright { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--sec); font-size: 13.5px; flex-wrap: wrap; }
.pagenav .ghost { display: inline-block; background: #fff; color: var(--sec); border: 1px solid var(--border); border-radius: 999px; padding: 8px 17px; margin: 0; font: 500 14px "Roboto", system-ui, sans-serif; line-height: 1.4; text-decoration: none; cursor: pointer; }
.pagenav .ghost:hover { background: #fff; color: var(--sec); border-color: #c9b8a2; }
.pagetabs { display: flex; gap: 4px; margin-top: 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pagetabs .tab { display: inline-block; background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--sec); font: 500 15px "Roboto", system-ui, sans-serif; padding: 12px 18px; cursor: pointer; margin-bottom: -1px; text-decoration: none; }
.pagetabs .tab:hover { color: var(--ink); }
.pagetabs .tab.active { color: var(--terra); border-bottom-color: var(--terra); }

/* Shared page footer: the counterpart of .pagenav for standalone pages. */
.pagefoot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--sec); font-size: 13px; }
.pagefoot a { color: var(--sec); text-decoration: none; }
.pagefoot a:hover { color: var(--terra); }
.pagefoot .links { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }