/*
 * GREENBOX GLOBAL THEME V2
 * FIRST-PARTY COMPATIBILITY ADAPTER
 *
 * VERSION=2.2.1-theme-access-v1
 *
 * PURPOSE:
 * - Central Theme V2 presentation compatibility
 * - Honor persisted surface/readability depth globally
 * - Override legacy first-party translucent surface paint
 * - Preserve application layout/content/routing authority
 *
 * DOES NOT OWN:
 * - Theme catalog
 * - Theme persistence
 * - Matrix/effects runtime
 * - Application layout
 * - Application behavior
 */


/* ==========================================================
   CENTRAL SURFACE PAINT
   ========================================================== */

:root {
  /*
   * These alpha values are supplied by the central
   * GreenBox surface-depth consumer.
   *
   * Fallbacks preserve the accepted platform defaults.
   */

  --gb-central-hero-paint:
    color-mix(
      in srgb,
      var(--gb-surface-raised)
        var(--gb-hero-alpha, 96%),
      transparent
    );

  --gb-central-workspace-paint:
    color-mix(
      in srgb,
      var(--gb-surface)
        var(--gb-workspace-alpha, 86%),
      transparent
    );

  --gb-central-panel-paint:
    color-mix(
      in srgb,
      var(--gb-surface-raised)
        var(--gb-panel-alpha, 90%),
      transparent
    );

  --gb-central-card-paint:
    color-mix(
      in srgb,
      var(--gb-surface-raised)
        var(--gb-card-alpha, 93%),
      transparent
    );

  --gb-central-raised-paint:
    color-mix(
      in srgb,
      var(--gb-surface-raised)
        var(--gb-raised-alpha, 97%),
      transparent
    );


  /*
   * Compatibility aliases for applications already using
   * the common GreenBox semantic variables.
   */

  --gb-panel-bg:
    var(--gb-central-panel-paint) !important;

  --gb-card-bg:
    var(--gb-central-card-paint) !important;

  --gb-garage-card-bg:
    var(--gb-central-card-paint) !important;

  --gb-auto-surface:
    var(--gb-central-card-paint) !important;

  --gb-auto-surface-strong:
    var(--gb-central-raised-paint) !important;

  --gb-auto-surface-soft:
    var(--gb-central-panel-paint) !important;
}


/* ==========================================================
   PAGE
   ========================================================== */

html,
body {
  background-color:
    var(--gb-bg) !important;

  background-image:
    var(--gb-theme-background-image) !important;

  background-position:
    center !important;

  background-repeat:
    no-repeat !important;

  background-size:
    cover !important;

  background-attachment:
    fixed !important;

  color:
    var(--gb-text) !important;
}


body,
button,
input,
select,
textarea {
  font-family:
    var(--gb-font-sans) !important;
}


/* ==========================================================
   WORKSPACE / LARGE APPLICATION SURFACES
   ========================================================== */

html body :is(
  main,
  [role="main"],
  .workspace,
  .dashboard-shell,
  .page-shell,
  .content-shell,
  .application-shell,
  .app-shell,
  [class*="workspace" i],
  [class*="dashboard-shell" i],
  [class*="page-shell" i],
  [class*="content-shell" i],
  [class*="application-shell" i],
  [class*="app-shell" i]
):not([data-gb-surface-opt-out]) {
  background:
    var(--gb-central-workspace-paint)
    !important;

  color:
    var(--gb-text)
    !important;
}


/* ==========================================================
   PANELS / SECTIONS
   ========================================================== */

html body [class]:is(
  section,
  .panel,
  .section,
  .group,
  .content-section,
  .dashboard-section,
  .workspace-section,
  .dashboard-card,
  .settings-card,
  .section-card,
  [class*="panel" i],
  [class*="section" i],
  [class*="group" i]
):not([data-gb-surface-opt-out]) {
  background:
    var(--gb-central-panel-paint)
    !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;

  box-shadow:
    0 0
      calc(
        4px +
        18px *
        var(--gb-theme-glow-strength)
      )
      color-mix(
        in srgb,
        var(--gb-glow) 34%,
        transparent
      ),
    0 12px 32px
      rgba(0,0,0,.24)
      !important;
}


/* ==========================================================
   NORMAL CARDS
   ========================================================== */

html body [class]:is(
  .card,
  .tile,
  .module,
  .widget,
  .box,

  .service-card,
  .app-card,
  .tool-card,
  .status-card,
  .content-card,
  .summary-card,
  .stat-card,
  .metric-card,
  .feature-card,
  .portal-card,
  .launcher-card,

  [class*="card" i],
  [class*="tile" i],
  [class*="module" i],
  [class*="widget" i],
  [class*="box" i]
):not(
  .dashboard-card
):not(
  .settings-card
):not(
  .section-card
):not(
  [data-gb-surface-opt-out]
) {
  background:
    var(--gb-central-card-paint)
    !important;

  background-image:
    none !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;

  box-shadow:
    0 0
      calc(
        4px +
        18px *
        var(--gb-theme-glow-strength)
      )
      color-mix(
        in srgb,
        var(--gb-glow) 34%,
        transparent
      ),
    0 12px 32px
      rgba(0,0,0,.24)
      !important;
}


/* ==========================================================
   GENERIC ARTICLE CARDS
   ========================================================== */

html body article[class]:not(
  [data-gb-surface-opt-out]
) {
  background:
    var(--gb-central-card-paint)
    !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}


/* ==========================================================
   HERO / PRIMARY SURFACES

   Kept after normal-card rules so hero-card style names
   correctly use the dedicated hero slider.
   ========================================================== */

html body :is(
  .hero,
  .hero-card,
  .masthead,
  .summary-hero,
  .primary-hero,
  [class*="hero" i]
):not(
  [data-gb-surface-opt-out]
) {
  background:
    var(--gb-central-hero-paint)
    !important;

  background-image:
    none !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}


/* ==========================================================
   RAISED / DETAIL / NESTED SURFACES

   Loaded after standard card rules deliberately.
   ========================================================== */

html body [class]:is(
  .result,
  .item,
  .list-item,
  .record,
  .detail,
  .detail-card,
  .maint,

  [class*="result" i],
  [class*="record" i],
  [class*="detail" i],
  [class*="identity-field" i],
  [class*="fitment" i]
):not(
  [data-gb-surface-opt-out]
) {
  background:
    var(--gb-central-raised-paint)
    !important;

  background-image:
    none !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}


/* ==========================================================
   MODALS / DIALOGS
   ========================================================== */

html body :is(
  dialog,
  .modal,
  .dialog,
  [role="dialog"],
  [class*="modal" i],
  [class*="dialog" i]
):not(
  [data-gb-surface-opt-out]
) {
  background:
    var(--gb-central-raised-paint)
    !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}


/* ==========================================================
   HEADER / NAVIGATION
   ========================================================== */

html body :is(
  header,
  footer,
  nav,
  aside,
  .toolbar,
  .topbar,
  .sidebar,
  .menu,
  .rail,
  .drawer,
  .sheet,
  [class*="header" i],
  [class*="sidebar" i],
  [class*="toolbar" i]
) {
  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}


/* ==========================================================
   HEADINGS
   ========================================================== */

html body :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .title,
  .heading,
  .headline,
  .brand-title,
  [class*="title" i],
  [class*="heading" i]
) {
  color:
    var(--gb-text)
    !important;

  text-shadow:
    0 0
      calc(
        3px +
        10px *
        var(--gb-theme-glow-strength)
      )
      color-mix(
        in srgb,
        var(--gb-glow) 30%,
        transparent
      );
}


/* ==========================================================
   SECONDARY TEXT
   ========================================================== */

html body :is(
  .muted,
  .secondary,
  .subtitle,
  .description,
  .hint,
  .help,
  .meta,
  .caption,
  [class*="subtitle" i],
  [class*="muted" i],
  [class*="description" i]
) {
  color:
    var(--gb-text-muted)
    !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

html body a {
  color:
    var(--gb-accent)
    !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

html body :is(
  button,
  .button,
  .btn,
  [role="button"],
  [class*="button" i]:not(
    [class*="danger" i]
  )
) {
  background:
    color-mix(
      in srgb,
      var(--gb-button-bg) 94%,
      transparent
    )
    !important;

  color:
    var(--gb-button-text)
    !important;

  border-color:
    var(--gb-primary)
    !important;
}


html body :is(
  button:hover,
  .button:hover,
  .btn:hover,
  [role="button"]:hover
) {
  border-color:
    var(--gb-accent)
    !important;

  box-shadow:
    0 0
      calc(
        4px +
        12px *
        var(--gb-theme-glow-strength)
      )
      color-mix(
        in srgb,
        var(--gb-glow) 44%,
        transparent
      )
      !important;
}


/* ==========================================================
   INPUTS
   ========================================================== */

html body :is(
  input,
  select,
  textarea,
  [class*="search" i] input
) {
  background:
    color-mix(
      in srgb,
      var(--gb-input-bg) 97%,
      transparent
    )
    !important;

  color:
    var(--gb-input-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}


html body :is(
  input:focus,
  select:focus,
  textarea:focus,
  button:focus-visible,
  a:focus-visible
) {
  outline-color:
    var(--gb-glow)
    !important;
}


/* ==========================================================
   ACTIVE STATE
   ========================================================== */

html body :is(
  .active,
  .selected,
  .current,
  [aria-current="page"],
  [class*="active" i]:not(
    [class*="inactive" i]
  )
) {
  border-color:
    var(--gb-primary)
    !important;
}


/* ==========================================================
   SEMANTIC STATUS COLORS

   These intentionally affect foreground/status semantics
   without replacing central surface paint.
   ========================================================== */

html body :is(
  .success,
  .healthy,
  .ok,
  [class*="success" i],
  [class*="healthy" i]
) {
  color:
    var(--gb-success)
    !important;
}


html body :is(
  .warning,
  .warn,
  [class*="warning" i]
) {
  color:
    var(--gb-warning)
    !important;
}


html body :is(
  .danger,
  .error,
  .critical,
  [class*="danger" i],
  [class*="error" i]
) {
  color:
    var(--gb-danger)
    !important;
}


html body :is(
  .info,
  .informational,
  [class*="info" i]
) {
  color:
    var(--gb-info)
    !important;
}


/* ==========================================================
   EFFECT LAYER SAFETY

   Never repaint the central Matrix/effect runtime itself.
   ========================================================== */

#greenbox-theme-effect-layer,
#greenbox-matrix-canvas {
  background:
    transparent !important;
}
/* ==========================================================
   GLOBAL EFFECT / CONTENT STACKING CONTRACT
   VERSION=1.0.0

   Matrix/effects belong above the page environment but below
   every rendered application surface.

   :where() is intentional here:
   - gives the fallback positioning very low specificity
   - application-owned fixed/sticky/absolute positioning wins
   - static legacy containers receive a safe stacking context
   ========================================================== */

html {
  isolation: isolate;
}

body {
  isolation: isolate;
}


/*
 * Central effect runtime.
 *
 * Never allow an application stylesheet to accidentally lift
 * Matrix/effects over the application UI.
 */

#greenbox-theme-effect-layer {
  z-index: 0 !important;
}


/*
 * Put normal top-level rendered application content above the
 * central effect layer.
 *
 * Low specificity allows an application with an intentional
 * position:fixed / sticky / absolute rule to retain that rule.
 */

body > :where(
  :not(#greenbox-theme-effect-layer)
  :not(script)
  :not(style)
  :not(link)
  :not(template)
) {
  position: relative;
  z-index: 1;
}


/*
 * Surface-level fallback.
 *
 * This protects legacy applications where cards/panels are not
 * contained inside a single positioned application shell.
 */

:where(
  .hero,
  .hero-card,

  .workspace,
  .dashboard-shell,
  .page-shell,
  .content-shell,
  .application-shell,
  .app-shell,

  .panel,
  .section,
  .group,

  .card,
  .tile,
  .module,
  .widget,
  .box,

  .service-card,
  .app-card,
  .tool-card,
  .status-card,
  .section-card,
  .content-card,
  .dashboard-card,
  .settings-card,
  .summary-card,
  .stat-card,
  .metric-card,
  .feature-card,
  .portal-card,
  .launcher-card,

  article,
  dialog,
  .modal,
  .dialog
):not([data-gb-surface-opt-out]) {
  position: relative;
  z-index: 1;
}


/*
 * Never allow the Matrix canvas itself to establish a competing
 * application-content stacking level.
 */

#greenbox-matrix-canvas {
  z-index: auto !important;
}
/* ==========================================================
   OPERATIONS-SPECIFIC FIRST-PARTY SURFACE COVERAGE
   VERSION=1.0.0

   These are real GreenBox application surfaces that use
   application-specific class names instead of generic card /
   panel names.
   ========================================================== */

html body :is(
  .global-privileged-controls,
  .gb-auto-collapse,
  .repair-checklist,
  .repair-action,
  .repair-guidance
):not([data-gb-surface-opt-out]) {
  background:
    var(--gb-central-panel-paint)
    !important;

  background-image:
    none !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;

  position:
    relative;

  z-index:
    1;
}


/* Nested Operations detail surfaces */

html body :is(
  .global-control-help-body,
  .global-control-action,
  .gb-auto-collapse-body
):not([data-gb-surface-opt-out]) {
  background:
    var(--gb-central-card-paint)
    !important;

  color:
    var(--gb-text)
    !important;
}


/* Keep code/preformatted control help darker still */

html body .global-control-help-body pre {
  background:
    var(--gb-central-raised-paint)
    !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}
/* ==========================================================
   GLOBAL SHELL / SIDEBAR SURFACE COVERAGE
   VERSION=1.0.0
   ========================================================== */

html body :is(
  aside,
  .sidebar,
  .rail,
  .drawer
):not([data-gb-surface-opt-out]) {
  background:
    var(--gb-central-workspace-paint)
    !important;

  background-image:
    none !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;

  position:
    relative;

  z-index:
    1;
}


/* Navigation rows inside themed shell surfaces */

html body :is(
  aside,
  .sidebar,
  .rail,
  .drawer
) nav a {
  color:
    var(--gb-text-muted)
    !important;
}


html body :is(
  aside,
  .sidebar,
  .rail,
  .drawer
) nav a:is(
  :hover,
  .on,
  .active,
  [aria-current="page"]
) {
  background:
    var(--gb-central-card-paint)
    !important;

  color:
    var(--gb-text)
    !important;

  border-color:
    var(--gb-border)
    !important;
}

/* ==========================================================
   CENTRAL THEME & EFFECTS ACCESS CONTROL
   GREENBOX_THEME_ACCESS_CONTROL_V1

   First-party pages that already provide their own Theme &
   Effects control are left unchanged by the central consumer.
   This styles only the fallback control injected when no native
   entry point exists.
   ========================================================== */

#greenbox-theme-access-control {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  z-index: 2147482000 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #greenbox-theme-access-control .gb-theme-access-link {
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--gb-primary) !important;
  border-radius: 10px !important;
  background: var(--gb-central-raised-paint) !important;
  background-image: none !important;
  color: var(--gb-button-text) !important;
  font-family: var(--gb-font-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow:
    0 0 calc(5px + 12px * var(--gb-theme-glow-strength))
      color-mix(in srgb, var(--gb-glow) 42%, transparent),
    0 8px 22px rgba(0,0,0,.34)
    !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html body #greenbox-theme-access-control .gb-theme-access-link:hover,
html body #greenbox-theme-access-control .gb-theme-access-link:focus-visible {
  border-color: var(--gb-accent) !important;
  color: var(--gb-button-text) !important;
  transform: translateY(-1px);
  box-shadow:
    0 0 calc(7px + 16px * var(--gb-theme-glow-strength))
      color-mix(in srgb, var(--gb-glow) 58%, transparent),
    0 10px 26px rgba(0,0,0,.40)
    !important;
}

#greenbox-theme-access-control .gb-theme-access-icon {
  display: inline-block !important;
  line-height: 1 !important;
}

html[data-gb-theme-access-hide="1"] #greenbox-theme-access-control,
body[data-gb-theme-access-hide="1"] #greenbox-theme-access-control {
  display: none !important;
}

@media (max-width: 720px) {
  #greenbox-theme-access-control {
    top: auto !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  html body #greenbox-theme-access-control .gb-theme-access-link {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}