/* ============================================================================
 * Terminal theme for BaseX — phosphor CRT / hacker console aesthetic
 *
 * Full dark theme: near-black surfaces, neon-green primary, cyan/magenta
 * accents, JetBrains Mono everywhere, zero border radius, glows instead of
 * shadows, and a faint scanline overlay.
 *
 * USAGE (any BaseX-consuming app)
 * --------------------------------
 *   1. Drop this file into your public/ folder.
 *   2. Add `<link rel="stylesheet" href="path/to/terminal.css">` to index.html.
 *   3. Toggle `document.body.classList.toggle('theme-terminal')` to activate.
 *
 * Everything here is unlayered consumer CSS — the framework lives in
 * @layer bx.*, so these rules win without a single !important.
 *
 * Rules tagged "SHOWCASE-SPECIFIC" target the Nexxus showcase's own
 * components (bxs-sidebar); strip them when adapting to your app.
 * ============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
 *  Token overrides
 * ───────────────────────────────────────────────────────────────────────── */

body.theme-terminal {
  color-scheme: dark;

  /* Inverted grey ramp — the framework consumes --rgb-* as ink-vs-paper,
     so flipping it here darkens every component in one move. */
  --rgb-black:          rgb(236, 255, 244);
  --rgb-black-light:    rgb(220, 246, 230);
  --rgb-black-lighter:  rgb(202, 232, 214);

  --rgb-smoke-darker:   rgb(180, 212, 193);
  --rgb-smoke-dark:     rgb(158, 192, 172);
  --rgb-smoke:          rgb(136, 172, 151);
  --rgb-smoke-light:    rgb(115, 152, 131);
  --rgb-smoke-lighter:  rgb(96, 132, 112);

  --rgb-grey-darker:    rgb(80, 112, 94);
  --rgb-grey-dark:      rgb(66, 96, 79);
  --rgb-grey:           rgb(54, 82, 66);
  --rgb-grey-light:     rgb(46, 70, 56);
  --rgb-grey-lighter:   rgb(38, 60, 47);

  --rgb-dust-darker:    rgb(32, 51, 40);
  --rgb-dust-dark:      rgb(27, 44, 34);
  --rgb-dust:           rgb(23, 38, 29);
  --rgb-dust-light:     rgb(19, 32, 24);
  --rgb-dust-lighter:   rgb(15, 26, 20);

  --rgb-white-darker:   rgb(12, 21, 16);
  --rgb-white-dark:     rgb(8, 15, 11);
  --rgb-white:          rgb(5, 10, 7);

  /* Brand — phosphor green primary, cyan secondary, CRT signal colors.
     Contrasts are near-black: dark text on glowing neon surfaces. */
  --bx-brand-primary: #00ff9c;
  --bx-brand-primary-contrast: #03150b;
  --bx-brand-secondary: #00d9ff;
  --bx-brand-secondary-contrast: #03151a;
  --bx-brand-success: #39ff14;
  --bx-brand-success-contrast: #041403;
  --bx-brand-warning: #ffb800;
  --bx-brand-warning-contrast: #171001;
  --bx-brand-error: #ff2e63;
  --bx-brand-error-contrast: #1a040b;
  --bx-brand-info: #b967ff;
  --bx-brand-info-contrast: #12061c;

  /* Surfaces — near-black with a green undertone */
  --bx-background-page: #050a07;
  --bx-background-content: #0a120d;
  --bx-background-control: #0d1811;
  --bx-background-hover: rgba(0, 255, 156, 0.07);

  /* Borders — phosphor traces, hard corners */
  --bx-border-color: rgba(0, 255, 156, 0.28);
  --bx-border-radius: 0px;

  /* Typography */
  --bx-font-family: 'JetBrains Mono', ui-monospace, 'Fira Code', 'Cascadia Mono', monospace;
  --bx-font-color-dark: #d4ffe8;
  --bx-font-color-light: #050a07;
  --bx-font-color-muted: #63917a;
  --bx-font-color-disabled: #3d5a4b;
  --bx-font-color-placeholder: #4c7260;

  /* Glows instead of shadows */
  --bx-box-shadow-color: rgba(0, 255, 156, 0.25);
  --bx-box-shadow: 0 0 12px rgba(0, 255, 156, 0.12);

  /* Buttons — sharp, uppercase console keys */
  --bx-button-border-radius: 0px;
  --bx-button-font-weight: 500;
  --bx-button-background: #0d1811;
  --bx-button-color: #00ff9c;
  --bx-button-border-size: 1px;
  --bx-button-border-color: rgba(0, 255, 156, 0.45);
  --bx-button-box-shadow: 0 0 10px rgba(0, 255, 156, 0.1), inset 0 0 6px rgba(0, 255, 156, 0.06);

  /* Form controls — dark wells with phosphor edges */
  --bx-form-control-background: #08100b;
  --bx-form-control-border-color: rgba(0, 255, 156, 0.28);
  --bx-form-control-border-radius: 0px;
  --bx-form-control-box-shadow: inset 0 0 8px rgba(0, 255, 156, 0.05);
  --bx-form-control-font-color: #d4ffe8;
  --bx-form-control-color: #00ff9c;

  /* Chrome */
  --bx-main-header-background: #060c08;
  --bx-main-header-font-color: #00ff9c;
  --bx-main-header-shadow: 0 1px 0 rgba(0, 255, 156, 0.25);
  --bx-main-menu-background: #060c08;
  --bx-main-menu-backdrop: #0a120d;
  --bx-main-menu-font-color: #7dd8ab;
  --bx-main-menu-border-radius: 0px;

  /* Overlays */
  --bx-popup-background: #0a120d;
  --bx-popup-border: 1px solid rgba(0, 255, 156, 0.35);
  --bx-popup-box-shadow: 0 0 24px rgba(0, 255, 156, 0.15);
  --bx-dialog-background: #0a120d;
  --bx-dialog-backdrop: rgba(2, 6, 4, 0.85);
  --bx-dialog-box-shadow: 0 0 32px rgba(0, 255, 156, 0.18);
  --bx-dialog-header-background: #060c08;
  --bx-dialog-header-font-color: #00ff9c;
  --bx-chip-background: #0d1811;
  --bx-chip-color: #7dd8ab;

  /* Scrollbars */
  --bx-scrollbar-track-color: rgba(0, 255, 156, 0.06);
  --bx-scrollbar-thumb-color: rgba(0, 255, 156, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────
 *  CSS recipes
 * ───────────────────────────────────────────────────────────────────────── */

/* CRT scanlines + green ambient glow, on top of everything, click-through */
body.theme-terminal::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 255, 156, 0.02) 3px,
      rgba(0, 0, 0, 0.06) 4px
    );
}

body.theme-terminal ::selection {
  background: rgba(0, 255, 156, 0.35);
  color: #eafff4;
}

/* ── Buttons — console keys: uppercase mono, ghost by default ── */

body.theme-terminal .bx-button:not(.bx-button-link) {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Named variants become ghost buttons: neon text + neon border on dark,
   filling with their color on hover. Pure CSS on the public variant classes
   and public brand tokens — a `--_theme-accent` local carries the variant
   color so the ghost recipe is written once. */
body.theme-terminal .bx-button-variant-secondary { --_theme-accent: var(--bx-brand-secondary); --_theme-accent-contrast: var(--bx-brand-secondary-contrast); }
body.theme-terminal .bx-button-variant-success   { --_theme-accent: var(--bx-brand-success);   --_theme-accent-contrast: var(--bx-brand-success-contrast); }
body.theme-terminal .bx-button-variant-warning   { --_theme-accent: var(--bx-brand-warning);   --_theme-accent-contrast: var(--bx-brand-warning-contrast); }
body.theme-terminal .bx-button-variant-error     { --_theme-accent: var(--bx-brand-error);     --_theme-accent-contrast: var(--bx-brand-error-contrast); }
body.theme-terminal .bx-button-variant-info      { --_theme-accent: var(--bx-brand-info);      --_theme-accent-contrast: var(--bx-brand-info-contrast); }

body.theme-terminal .bx-button[class*='bx-button-variant-']:not(.bx-button-variant-primary):not(.bx-button-variant-default):not(.bx-button-link):not(.ng-disabled):not(.ng-active) {
  background: #0d1811;
  color: var(--_theme-accent);
  border: 1px solid color-mix(in srgb, var(--_theme-accent) 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--_theme-accent) 12%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--_theme-accent) 55%, transparent);
}
body.theme-terminal .bx-button[class*='bx-button-variant-']:not(.bx-button-variant-primary):not(.bx-button-variant-default):not(.bx-button-link):not(.ng-disabled):not(.ng-active):hover {
  background: var(--_theme-accent);
  color: var(--_theme-accent-contrast);
  text-shadow: none;
  box-shadow: 0 0 18px color-mix(in srgb, var(--_theme-accent) 45%, transparent);
}

/* Primary: always filled — the CTA glows like a powered LED */
body.theme-terminal .bx-button-variant-primary:not(.bx-button-link):not(.ng-disabled) {
  background: #00ff9c;
  color: #03150b;
  border: 1px solid #00ff9c;
  box-shadow: 0 0 16px rgba(0, 255, 156, 0.35);
  text-shadow: none;
}
body.theme-terminal .bx-button-variant-primary:not(.bx-button-link):not(.ng-disabled):hover {
  background: #6dffc4;
  box-shadow: 0 0 26px rgba(0, 255, 156, 0.55);
}

body.theme-terminal .bx-button.bx-button-link:not(.ng-disabled) {
  color: #00d9ff;
  text-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
}

/* Terminal prompt marker on focus-visible */
body.theme-terminal :focus-visible {
  outline: 1px solid #00ff9c;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(0, 255, 156, 0.3);
}

/* ── Inputs — blinking-caret wells ── */

body.theme-terminal bx-input {
  font-size: 14px;
  caret-color: #00ff9c;
}
body.theme-terminal bx-input .input-element-box:focus-within {
  box-shadow: 0 0 14px rgba(0, 255, 156, 0.18), inset 0 0 8px rgba(0, 255, 156, 0.08);
}

/* ── Cards — dark panels with phosphor trace borders ── */

body.theme-terminal .bx-card-element,
body.theme-terminal bx-card {
  background: #0a120d;
  border: 1px solid rgba(0, 255, 156, 0.22);
  border-radius: 0;
  box-shadow: 0 0 16px rgba(0, 255, 156, 0.06);
}

/* ── Page tabs — folder tabs on a terminal multiplexer ── */

body.theme-terminal bx-content-tabs[static] {
  background: #060c08;
  border: 1px solid rgba(0, 255, 156, 0.25);
  border-radius: 0;
  box-shadow: none;
}
body.theme-terminal bx-content-tabs[static] .bx-tabs-slider {
  background: rgba(0, 255, 156, 0.12);
  border: 1px solid rgba(0, 255, 156, 0.5);
  border-radius: 0;
  box-shadow: 0 0 12px rgba(0, 255, 156, 0.2);
}

/* ── Main menu — process list: active entry glows, "> " prompt notch ── */

body.theme-terminal bx-main-menu .main-menu-content,
body.theme-terminal bxs-sidebar /* SHOWCASE-SPECIFIC */ {
  background: #060c08;
  border-right: 1px solid rgba(0, 255, 156, 0.18);
}
body.theme-terminal :is(bx-main-menu, bxs-sidebar) .menu-item-background {
  background: transparent;
  border-radius: 0;
}
body.theme-terminal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active,
body.theme-terminal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.menu-search-result {
  background: rgba(0, 255, 156, 0.1);
  color: #00ff9c;
  border-radius: 0;
  box-shadow: inset 2px 0 0 #00ff9c;
  text-shadow: 0 0 8px rgba(0, 255, 156, 0.5);
}
body.theme-terminal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link.active > bx-icon {
  color: #00ff9c;
}
body.theme-terminal bx-main-menu .menu-item.menu-link.active:before {
  background: #00ff9c;
  box-shadow: 0 0 8px rgba(0, 255, 156, 0.8);
}
body.theme-terminal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:hover:not(.active),
body.theme-terminal :is(bx-main-menu, bxs-sidebar) .menu-item.menu-link:focus-within:not(.active) {
  background: rgba(0, 255, 156, 0.05);
}

/* ── Status badges — bracketed console tags ── */

body.theme-terminal bx-status-badge {
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  letter-spacing: 0.05em;
}
body.theme-terminal bx-status-badge > .badge-icon {
  background-color: transparent;
  color: inherit;
}
body.theme-terminal bx-status-badge.status-primary   { background: rgba(0, 255, 156, 0.08);  border: 1px solid rgba(0, 255, 156, 0.4);  color: #00ff9c; }
body.theme-terminal bx-status-badge.status-secondary { background: rgba(0, 217, 255, 0.08);  border: 1px solid rgba(0, 217, 255, 0.4);  color: #00d9ff; }
body.theme-terminal bx-status-badge.status-success   { background: rgba(57, 255, 20, 0.08);  border: 1px solid rgba(57, 255, 20, 0.4);   color: #39ff14; }
body.theme-terminal bx-status-badge.status-warning   { background: rgba(255, 184, 0, 0.08);  border: 1px solid rgba(255, 184, 0, 0.4);   color: #ffb800; }
body.theme-terminal bx-status-badge.status-danger    { background: rgba(255, 46, 99, 0.08);  border: 1px solid rgba(255, 46, 99, 0.4);   color: #ff2e63; }
body.theme-terminal bx-status-badge.status-info      { background: rgba(185, 103, 255, 0.08); border: 1px solid rgba(185, 103, 255, 0.4); color: #b967ff; }
body.theme-terminal bx-status-badge.status-light     { background: rgba(212, 255, 232, 0.06); border: 1px solid rgba(212, 255, 232, 0.3); color: #d4ffe8; }
body.theme-terminal bx-status-badge.status-dark      { background: rgba(99, 145, 122, 0.15);  border: 1px solid rgba(99, 145, 122, 0.5);  color: #63917a; }

/* ── Toasts ── */

body.theme-terminal .bx-toastr {
  border-radius: 0;
  border: 1px solid rgba(0, 255, 156, 0.4);
  font-family: inherit;
}