/**
 * Axanar Admin — Gin sub-theme (carbon / charcoal)
 *
 * Neutral graphite surfaces + Geist + Lucide. No brand red/gold in admin chrome.
 *
 * Fonts: Geist Sans + Geist Mono + Geist Pixel (Vercel, OFL) — self-hosted
 * Icons: Lucide webfont (lucide.css + lucide-glyphs.css)
 */

@font-face {
  font-family: "Geist Sans";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Geist Pixel Line";
  src: url("../fonts/GeistPixel-Line.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Geist Pixel Square";
  src: url("../fonts/GeistPixel-Square.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ============================================================
   SHARED — applies to both light and dark
   ============================================================ */

:root {
  --gin-font: "Geist Sans", system-ui, -apple-system, sans-serif;
  --axanar-font-sans: "Geist Sans", system-ui, -apple-system, sans-serif;
  --axanar-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --axanar-font-pixel-line: "Geist Pixel Line", "Geist Mono", ui-monospace, monospace;
  --axanar-font-pixel-square: "Geist Pixel Square", "Geist Pixel Line", "Geist Mono", ui-monospace, monospace;

  /* Carbon scale — shared tokens */
  --carbon-50:  #fafafa;
  --carbon-100: #f5f5f5;
  --carbon-200: #e5e5e5;
  --carbon-300: #d4d4d4;
  --carbon-400: #a3a3a3;
  --carbon-500: #737373;
  --carbon-600: #525252;
  --carbon-700: #404040;
  --carbon-800: #2a2a2a;
  --carbon-850: #222222;
  --carbon-900: #1a1a1a;
  --carbon-950: #121212;
  --carbon-1000: #0a0a0a;

  /* Gin overrides — light carbon (default) */
  --gin-color-primary:         #262626;
  --gin-color-primary-light:   #404040;
  --gin-color-primary-dark:    #171717;
  --gin-color-primary-hover:   #171717;
  --gin-color-focus:           #525252;
  --gin-color-highlight:       #737373;

  /* Console instrumentation — shared across toolbar + dashboard */
  --axanar-satin-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --axanar-console-bg: var(--carbon-1000);
  --axanar-panel-radius: 2px;
  --axanar-readout-font: var(--axanar-font-mono);
  --axanar-readout-size: 1.5rem;
  --axanar-readout-weight: 500;
  --axanar-label-size: 0.6875rem;
  --axanar-label-tracking: 0.08em;
  --axanar-signal-caution: #c9a227;
  --axanar-signal-urgent: #a85a52;
  --axanar-signal-info: #8a9bab;
  --axanar-signal-caution-bg: color-mix(in srgb, var(--axanar-signal-caution) 12%, transparent);
  --axanar-signal-info-bg: color-mix(in srgb, var(--axanar-signal-info) 10%, transparent);

  /* Console surface aliases — shared hubs, EM5, messages */
  --console-bg: var(--carbon-1000);
  --console-surface: #1c1c1c;
  --console-surface-2: #252525;
  --console-border: #2a2a2a;
  --console-text-primary: #e8e8e8;
  --console-text-secondary: #a3a3a3;
  --console-text-muted: #6b6b6b;
  --console-sheen-overlay: linear-gradient(145deg, rgba(255, 255, 255, 0.028) 0%, transparent 45%);
}

/* ============================================================
   LIGHT MODE — cool charcoal on soft gray (not bright white)
   ============================================================ */

html:not(.gin--dark-mode) {
  --gin-bg-app:                #ececec;
  --gin-bg-header:             #f5f5f5;
  --gin-bg-sidebar:            #f5f5f5;
  --gin-bg-layer:              #fafafa;
  --gin-bg-layer2:             #f0f0f0;
  --gin-color-text:            #171717;
  --gin-color-text-light:      #525252;
  --gin-border-color:          #d4d4d4;
  --gin-icon-color:            #525252;
  --axanar-logo-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));

  --axanar-satin-rail-bg: linear-gradient(
    165deg,
    var(--gin-bg-layer) 0%,
    color-mix(in srgb, var(--gin-bg-layer) 92%, var(--gin-bg-app)) 48%,
    var(--gin-bg-layer2) 100%
  );
  --axanar-satin-flyout-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gin-bg-layer) 98%, white) 0%,
    var(--gin-bg-layer) 100%
  );
  --axanar-satin-hover: color-mix(in srgb, var(--gin-color-primary-light) 55%, transparent);
  --axanar-satin-active: color-mix(in srgb, var(--gin-color-primary-light) 72%, transparent);
  --axanar-satin-edge: color-mix(in srgb, var(--gin-border-color) 65%, transparent);
  --axanar-satin-sheen: inset 1px 0 0 color-mix(in srgb, white 8%, transparent);
  --axanar-panel-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--gin-bg-layer) 98%, white) 0%,
    var(--gin-bg-layer) 52%,
    color-mix(in srgb, var(--gin-bg-layer2) 88%, var(--gin-bg-layer)) 100%
  );
  --axanar-panel-edge: color-mix(in srgb, var(--gin-border-color) 70%, transparent);
  --axanar-panel-sheen: inset 1px 1px 0 color-mix(in srgb, white 30%, transparent);
}

html:not(.gin--dark-mode) #gin-toolbar-bar,
html:not(.gin--dark-mode) .gin-toolbar__inner {
  background: var(--gin-bg-header);
  border-bottom: 1px solid var(--carbon-300);
}

html:not(.gin--dark-mode) .gin-sidebar .menu-item.is-active > a,
html:not(.gin--dark-mode) .gin-sidebar .toolbar-menu__item.is-active > a {
  color: var(--carbon-900);
  border-left-color: var(--carbon-700);
}

html:not(.gin--dark-mode) .gin-page-title {
  border-bottom: 1px solid var(--gin-border-color);
}

html:not(.gin--dark-mode) .gin-logo img,
html:not(.gin--dark-mode) .toolbar-logo img {
  filter: var(--axanar-logo-filter);
}

/* ============================================================
   DARK MODE — carbon black (primary ops look)
   ============================================================ */

html.gin--dark-mode {
  --gin-color-primary:         #e5e5e5;
  --gin-color-primary-light:   #fafafa;
  --gin-color-primary-dark:    #d4d4d4;
  --gin-color-primary-hover:   #fafafa;
  --gin-color-focus:           #737373;
  --gin-color-highlight:       #a3a3a3;

  --gin-bg-app:                var(--carbon-1000);
  --gin-bg-header:             var(--carbon-950);
  --gin-bg-sidebar:            var(--carbon-950);
  --gin-bg-layer:              var(--carbon-900);
  --gin-bg-layer2:             var(--carbon-850);
  --gin-color-text:            var(--carbon-200);
  --gin-color-text-light:      var(--carbon-400);
  --gin-border-color:          var(--carbon-800);
  --gin-icon-color:            var(--carbon-400);
  --axanar-logo-filter: none;

  --axanar-satin-rail-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--gin-bg-layer) 88%, black) 0%,
    var(--gin-bg-layer) 42%,
    color-mix(in srgb, var(--gin-bg-layer) 94%, black) 100%
  );
  --axanar-satin-flyout-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gin-bg-layer) 96%, white) 0%,
    color-mix(in srgb, var(--gin-bg-layer) 90%, black) 100%
  );
  --axanar-satin-hover: color-mix(in srgb, var(--gin-color-primary-light) 55%, transparent);
  --axanar-satin-active: color-mix(in srgb, var(--gin-color-primary-light) 72%, transparent);
  --axanar-satin-edge: color-mix(in srgb, var(--gin-border-color) 65%, transparent);
  --axanar-satin-sheen: inset 1px 0 0 color-mix(in srgb, white 5%, transparent);
  --axanar-panel-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--gin-bg-layer) 94%, white) 0%,
    var(--gin-bg-layer) 46%,
    color-mix(in srgb, var(--gin-bg-layer) 90%, black) 100%
  );
  --axanar-panel-edge: color-mix(in srgb, var(--gin-border-color) 80%, transparent);
  --axanar-panel-sheen: inset 1px 1px 0 color-mix(in srgb, white 6%, transparent);
}

html.gin--dark-mode #gin-toolbar-bar,
html.gin--dark-mode .gin-toolbar__inner {
  background: var(--gin-bg-header);
  border-bottom: 1px solid var(--carbon-800);
}

html.gin--dark-mode .gin-sidebar .menu-item.is-active > a,
html.gin--dark-mode .gin-sidebar .toolbar-menu__item.is-active > a {
  color: var(--carbon-100);
  border-left-color: var(--carbon-300);
}

html.gin--dark-mode .gin-table,
html.gin--dark-mode .views-table {
  background: var(--gin-bg-layer);
  border-color: var(--gin-border-color);
}

html.gin--dark-mode .gin-table tr:hover,
html.gin--dark-mode .views-table tr:hover {
  background: var(--gin-bg-layer2);
}

/* ============================================================
   LOGO — consistent sizing in both modes
   ============================================================ */

.gin-logo img,
.toolbar-logo img {
  max-height: 36px;
  width: auto;
  filter: var(--axanar-logo-filter, none);
}

/* ============================================================
   TYPOGRAPHY — Geist Sans + Geist Mono throughout
   ============================================================ */

html,
body,
.gin,
.gin-table,
.form-element,
.button,
.toolbar,
.admin-toolbar,
.gin-sidebar,
h1, h2, h3, h4, h5, h6 {
  font-family: "Geist Sans", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 600;
}

h1 { font-variation-settings: "wght" 700; }

/* Geist Pixel — display labels, terminal chrome, stat badges */
.font-pixel-line,
.axanar-font-pixel-line {
  font-family: var(--axanar-font-pixel-line);
  letter-spacing: 0.04em;
}

.font-pixel-square,
.axanar-font-pixel-square {
  font-family: var(--axanar-font-pixel-square);
  letter-spacing: 0.06em;
}

/* Mono: code blocks, data fields, IDs, tokens, textareas */
code,
pre,
.monospace,
textarea,
.views-field-nid,
.views-field-uuid,
.form-textarea,
.path-admin .field--type-string-long {
  font-family: var(--axanar-font-mono);
  font-size: 0.875em;
  letter-spacing: 0;
}

/* ============================================================
   BUTTONS — charcoal primary (inverts in dark mode via Gin vars)
   ============================================================ */

.button--primary,
.button.button--primary {
  background-color: var(--gin-color-primary);
  border-color: var(--gin-color-primary);
  color: var(--gin-bg-layer, #fafafa);
}

html.gin--dark-mode .button--primary,
html.gin--dark-mode .button.button--primary {
  color: var(--carbon-950);
}

.button--primary:hover,
.button.button--primary:hover {
  background-color: var(--gin-color-primary-hover);
  border-color: var(--gin-color-primary-hover);
}

/* ============================================================
   STATUS MESSAGES — keep legible in dark mode
   ============================================================ */

html.gin--dark-mode .messages--status {
  background-color: var(--carbon-900);
  border-color: var(--carbon-600);
  color: var(--carbon-200);
}

html.gin--dark-mode .messages--error {
  background-color: var(--carbon-900);
  border-color: var(--carbon-500);
  color: var(--carbon-100);
}

html.gin--dark-mode .messages--warning {
  background-color: var(--carbon-900);
  border-color: var(--carbon-600);
  color: var(--carbon-200);
}

/* ============================================================
   CONSOLE COMPONENTS — satin panels + hub cards
   ============================================================ */

.axanar-console-panel {
  position: relative;
  background: var(--axanar-panel-bg, var(--gin-bg-layer));
  border: 1px solid var(--axanar-panel-edge, var(--gin-border-color));
  border-radius: var(--axanar-panel-radius, 2px);
  box-shadow: var(--axanar-panel-sheen, none);
  overflow: hidden;
}

.axanar-console-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--console-sheen-overlay);
  pointer-events: none;
  z-index: 0;
}

.axanar-console-panel > * {
  position: relative;
  z-index: 1;
}

.axanar-console-panel--inset {
  background: var(--console-surface-2, var(--gin-bg-layer2));
}

.axanar-console-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.5rem;
  background: var(--axanar-panel-bg, var(--gin-bg-layer));
  border: 1px solid var(--axanar-panel-edge, var(--gin-border-color));
  border-radius: var(--axanar-panel-radius, 2px);
  box-shadow: var(--axanar-panel-sheen, none);
  transition: border-color 0.18s var(--axanar-satin-ease, ease);
  overflow: hidden;
}

.axanar-console-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--console-sheen-overlay);
  pointer-events: none;
}

.axanar-console-card > * {
  position: relative;
  z-index: 1;
}

a.axanar-console-card:hover,
.axanar-console-card:has(a:hover) {
  border-color: color-mix(in srgb, var(--gin-color-text-light) 45%, var(--gin-border-color));
}

.axanar-console-card__title,
.axanar-console-card .axanar-content-hub__card a,
.axanar-content-hub__card.axanar-console-card a {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--gin-color-text);
}

.axanar-console-card__desc,
.axanar-content-hub__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--console-text-secondary, var(--gin-color-text-light));
}

.axanar-console-card__path,
.axanar-content-hub__path {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--axanar-font-mono, "Geist Mono"), ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--console-text-muted, var(--gin-color-text-light));
  word-break: break-all;
  opacity: 0.85;
}

.axanar-console-hub {
  max-width: 1200px;
}

.axanar-console-hub__intro {
  margin: 0 0 1.25rem;
  max-width: 52rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--console-text-secondary, var(--gin-color-text-light));
}

.axanar-console-hub__title {
  margin: 0 0 1.25rem;
  font-size: var(--axanar-label-size, 0.6875rem);
  font-weight: 500;
  letter-spacing: var(--axanar-label-tracking, 0.1em);
  text-transform: uppercase;
  color: var(--console-text-muted, var(--gin-color-text-light));
}

.axanar-console-grid,
.axanar-content-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

html.gin--dark-mode .axanar-console-panel,
html.gin--dark-mode .axanar-console-card {
  background: linear-gradient(165deg, #262626 0%, #1c1c1c 48%, #161616 100%);
  border-color: var(--console-border, #2a2a2a);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.06);
}

html.gin--dark-mode .axanar-console-panel--inset {
  background: linear-gradient(165deg, #222 0%, #1a1a1a 52%, #141414 100%);
}

html.gin--dark-mode a.axanar-console-card:hover,
html.gin--dark-mode .axanar-console-card:has(a:hover) {
  border-color: #3d3d3d;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   STREAMLINED OPS — Gin toolbar quick-access polish
   ============================================================ */

body.axanar-streamlined-admin .shortcut-action {
  border-radius: 6px;
}

body.axanar-streamlined-admin .region-header .block-shortcut {
  margin-inline-end: 0.5rem;
}

/* ============================================================
   LIGHT MODE — Axanar "silver" alternative to deep-space dark
   Toggle via Gin user menu → Appearance (show_user_theme_settings).
   ============================================================ */

html:not(.gin--dark-mode) body.axanar-streamlined-admin {
  --axanar-admin-surface: var(--gin-bg-layer);
  --axanar-admin-muted: var(--gin-bg-app);
}

html:not(.gin--dark-mode) .axanar-console-card {
  background: var(--axanar-panel-bg);
  border-color: var(--axanar-panel-edge);
  box-shadow: var(--axanar-panel-sheen);
}

html:not(.gin--dark-mode) body.axanar-streamlined-admin .menu-item__axanar-admin-ux-hub > .toolbar-icon,
html:not(.gin--dark-mode) body.axanar-streamlined-admin .menu-item__axanar-admin-ux-hub > a {
  color: var(--carbon-800) !important;
}

/* ---- Staff login / password reset help ---- */

.axanar-login-help {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--gin-color-text-light, #666);
}

.axanar-login-help a {
  font-weight: 600;
}