/* ===========================================================================
 * admin.css — branded super-admin theme (Story 5.3 / BIMERGE-57).
 * ---------------------------------------------------------------------------
 * Consumes the shared OKLCH design tokens (tokens.css — the single :root source,
 * also inlined into the React dashboard's application.css). Light app surface,
 * dark-cyan sidebar chrome (sidebar-* tokens), cyan-primary actions, amber
 * focus ring, destructive-red errors.
 *
 * This is "classless" CSS: it targets bare HTML elements so the admin ERB views
 * need no markup classes (the exceptions are the .admin-shell / .admin-sidebar
 * nav classes in app/views/layouts/admin.html.erb). Colors are driven by
 * var(--token); the only
 * non-token colors left are the documented green success-flash exception (no
 * "success" token exists in the brand set yet — see Story 5.3 Decisions).
 *
 * tokens.css is linked alongside this file in app/views/layouts/admin.html.erb
 * and registered in app/assets/config/manifest.js.
 * =========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  padding: 0;
}

/* Single page container: `main` (added to the admin layout) centers the whole
   page; top-level content (h1, p, dl, table, section, form) aligns to its left
   edge instead of each block centering itself — fixes the h1-left/table-centred
   misalignment. Forms/sections stay readably narrow; tables use the full width. */
main { width: 100%; max-width: 64rem; margin-inline: auto; }
form, section, article { max-width: 60rem; margin-block: 1rem; margin-inline: 0; }

h1, h2, h3 { font-family: var(--font-display, inherit); line-height: 1.2; margin: 1.25rem 0 0.5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; color: var(--muted-foreground); }

p { margin: 0.5rem 0; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
small { color: var(--muted-foreground); }

/* App shell + collapsible sidebar now live in the shared admin_sidebar.css
 * (.admin-shell / .admin-sidebar), used by both this layout and the Dashboard
 * board via app/views/admin/shared/_sidebar.html.erb. Only the admin layout's
 * content column stays here. */
.admin-content { flex: 1 1 auto; min-width: 0; padding: 2rem clamp(1rem, 5vw, 3rem); }

/* Forms */
form { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1rem auto; }
label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0.75rem 0 0.25rem; }
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="search"], select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent);
}

/* Buttons (incl. Rails button_to → <button>/<input type=submit>) */
button, input[type="submit"], input[type="button"], .button, a[role="button"] {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  cursor: pointer;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover { filter: brightness(1.07); }

/* Tables (tenants / tenant-admins index) */
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1rem 0; }
th, td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); background: var(--muted); }
tbody tr:hover { background: color-mix(in oklab, var(--muted) 55%, transparent); }
tr:last-child td { border-bottom: 0; }
/* Right-aligned action cell: View link + Become button sit inline (the button_to
   neutraliser below keeps the button from rendering as a card). */
td.actions { white-space: nowrap; text-align: right; }
/* Flex an inner wrapper (not the <td> itself — flexing a table-cell wraps it in an
   anonymous cell and breaks centring). The td stays a table-cell so vertical-align
   centres the row; the flex row centres "View" against the padded Become button. */
td.actions .action-row { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; }
/* The button_to <form> renders a hair low against "View"/the badges. A small
   bottom margin on the form raises the button by ~half that amount in the flex row,
   landing it on the same centreline. (Verified value.) */
td.actions .action-row form.button_to { display: flex; margin-bottom: 10px; }
td.actions a { text-underline-offset: 2px; }
table form.button_to button { margin-top: 0; padding: 0.32rem 0.8rem; font-size: 0.85rem; }

/* Flash / validation messaging (best-effort, since markup is classless) */
[role="alert"], .notice, .alert, .flash { max-width: 60rem; margin: 1rem auto; padding: 0.7rem 1rem; border-radius: var(--radius); }
/* Success flash now uses the brand --success token (added in the Engineered
   Precision refresh), so it adapts to light/dark instead of the old fixed green. */
.notice, [role="alert"] {
  background: color-mix(in oklab, var(--success) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);
  color: var(--success);
}
.alert, .error {
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent);
  color: var(--destructive);
}
ul.errors, .field_with_errors { color: var(--destructive); }

/* Tenant detail: a single centered column (title, metadata, provisioning,
   footer all stacked) — symmetric whitespace, no lopsided short/tall columns. */
.tenant-detail { max-width: 46rem; margin-inline: auto; }
.tenant-detail > dl, .tenant-detail .provisioning { max-width: none; }
.tenant-detail h1 { margin-top: 0; }
.tenant-detail .provisioning h2 { margin-top: 1.75rem; }
.tenant-detail .detail-footer { margin-top: 1.25rem; }

/* Provisioning (Story 2.5b → 5.3 polish). The checklist + the contextual state
   action live in one card so the block matches the metadata card above it. */
.provisioning { max-width: 44rem; }
.provisioning-card {
  margin: 1rem 0;
  padding: 0.5rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.provisioning .checklist { list-style: none; padding: 0; margin: 0; }
.provisioning .step { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
.provisioning .step:last-child { border-bottom: 0; }
/* Circular step marker: filled teal + white tick when done, hollow ring when pending. */
.provisioning .step-marker {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 1.5rem; height: 1.5rem;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
  border-radius: 999px;
  color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--border);
}
/* Done → soft green tick. A completed step is a success state (reserved
   --success token, matching the Connected badge), but a stack of solid fills
   reads as a wall of green — so it's a light tint with a green tick instead.
   The bold solid fill is reserved for the .current step that needs to stand out. */
.provisioning .step.done .step-marker {
  color: var(--success-foreground);
  background: color-mix(in oklab, var(--success) 20%, transparent);
  border-color: color-mix(in oklab, var(--success) 42%, transparent);
}
.provisioning .step.current .step-marker { color: var(--accent-foreground); background: var(--accent); border-color: var(--accent); }
.provisioning .step.current .step-label { font-weight: 600; }
.provisioning .step-action { margin-left: auto; font-size: 0.9rem; }

/* Contextual state action (credentials form / connect / connected), sits under
   the checklist inside the card, separated by a rule. */
.provisioning-action { border-top: 1px solid var(--border); margin: 0 -1.25rem; padding: 1rem 1.25rem 0.5rem; }
.provisioning-action h3 { margin-top: 0; color: var(--foreground); }
.provisioning .connected { border-left: 3px solid var(--primary); padding-left: 0.9rem; }
.provisioning .credential-status code { background: var(--muted); padding: 0.1rem 0.35rem; border-radius: 4px; }
/* Forms/details inside the card shed the standalone-card chrome. */
.provisioning-action form { max-width: none; margin: 0.5rem 0 0; padding: 0; background: none; border: 0; }
.provisioning-action details { margin-top: 1rem; }
.provisioning-action summary { cursor: pointer; color: var(--primary); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * Branded components (Story 5.3 polish). Classless where possible; framework-
 * generated classes (form.button_to) and a few admin-only hooks (.page-head,
 * .admin-stats, .badge) carry the rest. All colors come from var(--token).
 * ------------------------------------------------------------------------- */

/* Inline button_to micro-forms. Rails button_to wraps its <button> in a
   <form class="button_to">; without this the generic form-card rule above turns
   every inline action (Become, Sign out) into a bordered box. Strip the wrapper
   so only the button shows. */
form.button_to {
  display: inline-block;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
form.button_to button { margin-top: 0; }

/* Page header: title/subtitle on the left, a primary action on the right. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.page-head h1 { margin-top: 0; }
.page-head .subtitle { margin: 0.15rem 0 0; color: var(--muted-foreground); }
.page-head .button { margin-top: 0; text-decoration: none; }

/* Definition list (tenant metadata) → compact two-column card. */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.5rem;
  align-items: center;
  max-width: 44rem;
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
dl dt { margin: 0; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
dl dd { margin: 0; font-weight: 500; }

/* Stat cards (dashboard summary). */
.admin-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.25rem 0; padding: 0; list-style: none; max-width: none; }
.admin-stats li { flex: 1 1 11rem; padding: 0.85rem 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.admin-stats .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--primary); }
.admin-stats .stat-label { margin-top: 0.3rem; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }

/* Status badges / pills. */
.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  border: 1px solid transparent;
  border-radius: 999px;
}
/* Canonical status palette (mirrors the Figma source of truth).
   Active is a low-emphasis positive → soft cream (brand accent, faint tint).
   Pending is the attention state → saturated solar-yellow with amber text. */
.badge.is-active {
  color: var(--accent-foreground);
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
.badge.is-pending {
  color: var(--signal-foreground);
  background: color-mix(in oklab, var(--accent) 58%, transparent);
  border-color: color-mix(in oklab, var(--accent) 78%, transparent);
}
.badge.is-invited {
  color: var(--muted-foreground);
  background: var(--muted);
  border-color: var(--border);
}
/* Connected → green. A live Autodesk link is a true success signal, so it
   carries the reserved --success token rather than the brand accent. */
.badge.is-yes {
  color: var(--success-foreground);
  background: color-mix(in oklab, var(--success) 20%, transparent);
  border-color: color-mix(in oklab, var(--success) 42%, transparent);
}
.badge.is-no, .badge.is-muted {
  color: var(--muted-foreground);
  background: var(--muted);
  border-color: var(--border);
}
.badge.is-suspended {
  color: var(--destructive);
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
}

/* Provisioning check marks reused inline in the dashboard table. */
.check { font-weight: 700; color: var(--muted-foreground); }
.check.done { color: var(--success); }

/* ---- Responsive: narrow screens ----------------------------------------
   Pairs with the icon-rail breakpoint in admin_sidebar.css. The page chrome
   (.page-head, .admin-stats) already reflows via flex-wrap; this handles the
   data tables and tightens the content gutters. */
@media (max-width: 720px) {
  .admin-content { padding: 1.25rem 1rem; }
  /* Wide data tables (dashboard 7-col, tenants) scroll horizontally rather than
     squeezing columns to unreadable widths or overflowing the viewport. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  /* Keep single-column layouts (detail, provisioning) full-width on small screens. */
  .tenant-detail, .provisioning, .provisioning-card { max-width: none; }
}