/*
 * Admin design-system foundation.
 *
 * Loaded after tokens-shared.css and before each shell stylesheet. This is the
 * single source of truth for tokens and browser defaults shared by every admin
 * surface. App CSS should contain only layout or behaviour specific to that
 * workspace.
 */
:root {
  /* Semantic colour tokens (admin-scoped) */
  --primary: var(--golfkit-primary, #0f172a);
  --primary-hover: var(--golfkit-primary-hover, #0b1220);
  --primary-muted: var(--golfkit-primary-muted, #64748b);
  --primary-subtle: var(--golfkit-primary-subtle, #cbd5e1);
  --primary-surface: var(--golfkit-primary-surface, #f1f5f9);
  --accent: #226655;
  --accent-rgb: 34, 102, 85;
  --accent-muted: #88bbaa;
  --accent-subtle: #ddeedd;
  /* Darkest step of the accent ramp. Carries accent-coloured text that must
   * clear WCAG AA on the subtle accent wash, where --accent itself only
   * reaches 5.6:1. */
  --accent-strong: #123b30;
  --chart-error: #e05252;
  --hero-overlay-start: rgba(15,23,42,0.85);
  --hero-overlay-mid: rgba(15,23,42,0.5);
  --hero-overlay-end: rgba(15,23,42,0.2);
  --focus-ring: rgba(34,102,85,0.14);
  --text: #27313b;

  /* Base tokens (admin-scoped) */
  --shadow: 0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.04);
  /* Elevation aliases, smallest to largest: hairline lift (xs), the default
   * card and control lift (sm), a raised panel or popover (md), and a floating
   * surface (lg). Overlays that sit above the page use --elevation-4. */
  --shadow-xs: var(--elevation-1);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--elevation-2);

  /* Ring colour every gk-* control draws on focus. The readable-colour rule
   * (gkThemeCssVars) replaces it with the theme accent carried to 3:1 against
   * the surface; until a theme applies, it is the accent. */
  --focus-ring-color: var(--accent);
  /* Text on a --primary fill. */
  --primary-fg: var(--golfkit-on-primary, #ffffff);

  /* Admin control roles. Components retain their customer defaults when this
   * admin-only layer is absent. */
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--primary-hover);
  --btn-border: var(--primary-hover);
  --btn-color: var(--primary-fg);
  --btn-radius: var(--radius-control);
  --btn-pad-y: var(--space-sm);
  --btn-pad-x: var(--space-2xl);
  --btn-font-size: var(--fs-14);
  --btn-font-weight: 500;
  --btn-min-height: var(--control-height);
  --btn-line-height: var(--lh-tight);
  --btn-hover-opacity: 1;
  --btn-press-scale: 0.985;
  --btn-shadow: none;
  --btn-shadow-hover: 0 2px 4px rgba(15,23,42,0.08);
  --btn-alt-bg: var(--card);
  --btn-alt-border: var(--border);
  --btn-alt-color: var(--primary-hover);
  --btn-alt-bg-hover: var(--primary-surface);
  --btn-sm-pad-y: var(--space-xs);
  --btn-sm-pad-x: var(--space-lg);
  --btn-sm-font-size: var(--fs-13);
  --btn-danger-bg: #b03620;
  --btn-danger-border: #c9402b;
  --btn-danger-color: #ffffff;

  /* Admin type scale: 30 / 20 / 16 / 14 / 13 / 12. Name a size by its role, not
   * its pixels. There is no 11px step in the admin: --fs-11 stays defined for the
   * customer pages and reads as 12px here, so a stylesheet that still uses it
   * is on the scale until it is migrated. */
  --fs-11: var(--fs-12);
  --fs-page-title: var(--fs-30);
  --fs-section: var(--fs-20);
  --fs-panel: var(--fs-16);
  --fs-body: var(--fs-14);
  --fs-caption: var(--fs-13);
  --fs-meta: var(--fs-12);
  --fw-ui: 500;
  --fw-title: 600;
  --lh-title: 1.2;
  /* A table value is a 16px primary line over a 13px muted second line. */
  --fs-list-value: var(--fs-16);

  /* Admin shape. One radius for every control (button, input, select, chip,
   * segmented item), one for every surface (list card, panel, record card).
   * The generic names read these, so components and product CSS that still use
   * --radius-btn, --radius-input or --radius-card follow without edits. */
  --radius-control: 6px;
  --radius-surface: 8px;
  --radius-btn: var(--radius-control);
  --radius-input: var(--radius-control);
  --radius-card: var(--radius-surface);
  /* Control height: 36px with a pointer, the shared touch target on a touch
   * screen (see the coarse-pointer block at the foot of this file). Buttons,
   * text inputs, selects and the search trigger all read it. */
  --control-height: 36px;
  --field-min-height: var(--control-height);
  --field-pad-y: var(--space-sm);
  --field-pad-x: var(--space-lg);
  --field-font-size: var(--fs-14);
  /* A filter chip is a control: the control height and radius, 14px weight 500. */
  --chip-radius: var(--radius-control);
  --chip-size: var(--fs-14);
  --chip-weight: var(--fw-ui);
  --chip-pad-x: var(--space-lg);
  --chip-min-height: var(--control-height);
  /* A pill is 20px tall: a 16px line plus a 1px border and 1px of padding. */
  --pill-height: 20px;
  --hairline: 1px;
  /* Shell recipes: a 55px top bar and a 224px sidebar (see "Admin recipes"). */
  --admin-topbar-h: 55px;
  --admin-sidebar-w: 224px;
  /* The widest a page reads before it stretches past scanning: 1280px, left aligned. Forms and settings take --admin-form-max. */
  --admin-form-max: 72rem;
  --admin-content-max: 80rem;
  --badge-font-size: var(--fs-12);
  /* Shared components that are drawn at their own size elsewhere take the admin scale here. */
  --modal-title-size: var(--fs-panel);
  --sheet-title-size: var(--fs-panel);
  --sheet-close-size: var(--fs-section);
  --alert-close-size: var(--fs-panel);
  --summary-value-size: var(--fs-section);
  --detail-label-font-size: var(--fs-meta);
  /* Anchors: the admin link colour, so no link falls back to the browser blue. --link clears AA as text on the page and on a card. */
  --link: var(--accent-text);
  --link-hover: var(--accent-strong);
  /* Secondary text. The admin has one muted tone (5.1:1 on the page, 5.6:1 on a
   * card); --text-light is the same tone here, because the customer-page value
   * is 2.8:1 and fails AA for text. */
  --text-light: var(--text-muted);

  /* Page header: a 30px title with its actions on the same line and no rule. */
  --page-title-size: var(--fs-page-title);
  --page-title-weight: var(--fw-title);
  --page-title-line-height: var(--lh-title);
  --page-title-letter-spacing: normal;
  --page-header-border: 0;
  --page-header-pad: 0;
  --page-header-mb: var(--space-2xl);

  /* Typography and layout */
  --font-display: 'DM Sans', 'Inter', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --admin-nav-w: 184px;
  --admin-nav-compact-w: 44px;
  --admin-header-h: var(--admin-topbar-h);
  --admin-page-gutter: 24px;
  --admin-panel-padding: 0;
  /* Stable GolfKit navigation chrome shared by every admin surface. */
  --admin-nav-bg: #0f172a;
  --admin-nav-brand-bg: var(--admin-nav-bg);
  --admin-nav-brand-text: #f8fafc;
  --admin-nav-brand-accent: #99ee99;
  --admin-nav-text: #f8fafc;
  --admin-nav-text-rgb: 248, 250, 252;
  --admin-nav-label-text: rgba(248, 250, 252, 0.64);
  --admin-nav-item-text: var(--admin-nav-text);
  --admin-nav-icon-text: var(--admin-nav-text);
  --admin-nav-locked-text: rgba(248, 250, 252, 0.56);
  --admin-nav-locked-label-text: rgba(248, 250, 252, 0.62);
  --admin-nav-child-text: var(--admin-nav-text);
  --admin-nav-ancestor-text: var(--admin-nav-text);
  --admin-nav-hover-bg: rgba(255, 255, 255, 0.1);
  --admin-nav-hover-text: #ffffff;
  --admin-nav-active-bg: rgba(153, 238, 153, 0.16);
  --admin-nav-active-text: #f3fff3;
  --admin-nav-active-marker: #99ee99;
  --admin-nav-child-active-text: var(--admin-nav-text);
  /* Persistent chrome uses a quiet edge; floating surfaces own elevation. */
  --admin-nav-edge-shadow: 1px 0 0 rgba(var(--primary-rgb), 0.12);
  --admin-table-head: var(--primary-surface);
  --admin-toolbar-bg: var(--primary-surface);
  --admin-section-divider: var(--border);
  --admin-card-bg: var(--card);
  --admin-border: var(--border);

  /* Shared gk-empty-state admin shape */
  --empty-pad: 48px 24px;
  --empty-heading-font: var(--font-body, inherit);
  --empty-heading-font-size: var(--fs-panel);
  --empty-heading-font-weight: 600;
  --empty-heading-color: var(--text);
  --empty-msg-font-size: 13px;
  --empty-svg-size: 48px;
  --empty-svg-color: var(--border);
  --empty-icon-opacity: 1;
  --empty-icon-mb: 12px;

  /* Extended palette */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --primary-rgb: 15, 23, 42;
  --highlight-rgb: 219, 89, 66;
  --tan-rgb: 255, 180, 120;
  --paper-rgb: 242, 239, 232;
  --forest-rgb: 24, 58, 44;
  --c-neutral-50-b: #f3f4f6;
  --c-neutral-100: #e8ecea;
  --c-neutral-200: #b7c9be;
  --c-neutral-400: #8a9690;
  --c-neutral-400-b: #888;
  --c-neutral-500: #6b7280;
  --c-neutral-600: #4b5563;
  --c-red-100: #fde2de;
  --c-red-400: #dc2626;
  --c-red-500: #c0392b;
  --c-red-600: #9f2f12;
  --c-red-600-d: #7f1d1d;
  --c-orange-50: #fff8f4;
  --c-orange-200: #e8c0a0;
  --c-orange-400: #f59e0b;
  --c-orange-500-c: #d97706;
  --c-orange-500: #c06010;
  --c-orange-600: #92400e;
  --c-orange-700: #854d0e;
  --c-orange-800: #7a3800;
  --c-amber-50: #fffbeb;
  --c-amber-100: #fef3cd;
  --c-amber-200: #fde68a;
  --c-amber-300: #fcd34d;
  --c-amber-300-c: #d4bc6a;
  --c-amber-500: #eab308;
  --c-amber-700: #856404;
  --c-green-50: #dcf5e5;
  --c-green-300: #6ee7b7;
  --c-green-400: #66bb6a;
  --c-green-500: #16a34a;
  --c-green-600: #4d685d;
  --c-green-600-c: #059669;
  --c-green-700: #0f6b33;
  --c-green-800: #065f46;
  --c-blue-100: #e0f2fe;
  --c-blue-200: #b0c4d4;
  --c-blue-600: #0369a1;
  --c-blue-700: #075985;
  --c-purple-50: #ede9fe;
  --c-purple-500-b: #7e22ce;
  --c-purple-500: #5b21b6;
  --c-purple-600: #6c3483;

  /* Motion master switch (admin-scoped).
   * Components declare state-change transitions as
   * `transition: <prop> var(--gk-motion-dur, 0s) ...`, so this token is the
   * single point that turns admin state-smoothing on. Set to --dur (0.15s) it
   * lights the gk-badge tone cross-fade and gk-pagination hover/opacity fades;
   * unset (its default) they resolve to 0s and snap instantly, as before.
   * Inherits --dur's prefers-reduced-motion collapse (tokens-shared.css), so it
   * self-neutralises to ~instant for reduced-motion users. Admin-only: the
   * storefront never loads this file, so its components keep the 0s fallback. */
  --gk-motion-dur: var(--dur);
}

* { box-sizing: border-box; }
button { font-family: inherit; }

/* Native status messages share the same containment as component feedback.
 * Field validation and destructive controls keep their own semantic colours. */
.admin-feedback--error:not(:empty),
.stock-rentals-workspace #status.error:not(:empty),
.cust-save-status[data-tone="error"]:not(:empty),
.cust-consent-status__error:not(:empty),
.gev-status.is-error:not(:empty),
.payments-account-status[data-state="action-required"]:not(:empty) {
  display: block;
  padding: var(--space-lg) var(--space-2xl);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--danger-text);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}

/* A host can append a notice outside the workspace component's internal gap. */
gk-workspace-layout + gk-alert:not([hidden]),
gk-record-layout + gk-alert:not([hidden]) {
  margin-block-start: var(--feedback-gap);
}

/* Visually hidden, still named in the accessibility tree. Non-focusable content only. */
.gk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Container-adaptive form groups. Workspaces set --admin-form-min to the
 * practical field/card width, --admin-form-gap to a spacing token, and
 * --admin-form-align to start/end/stretch on the group itself. Local defaults
 * keep nested groups independent. The DOM and keyboard order stay intact
 * when a group moves between full-page and drawer widths. */
.admin-form-grid {
  --admin-form-min: 15rem;
  --admin-form-gap: var(--space-lg);
  --admin-form-align: start;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--admin-form-min)), 1fr));
  gap: var(--admin-form-gap);
  align-items: var(--admin-form-align);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.admin-form-grid > * { min-inline-size: 0; }

/* Every admin anchor reads the link tokens. :where() gives the rule no specificity, so a component that sets its own colour
 * (navigation, breadcrumbs, cards, buttons) keeps it, and a bare anchor is never the browser default blue or purple. */
:where(a) { color: var(--link); }
:where(a:visited) { color: var(--link); }
:where(a:hover) { color: var(--link-hover); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

@media (pointer: coarse), (max-width: 720px) {
  :root {
    --control-height: var(--gk-min-tap);
    --btn-min-height: var(--gk-min-tap);
    --btn-sm-min-height: var(--gk-min-tap);
  }
}