/*
 * ZRGRT identity tokens + terminal reskin — zrgrt.com variant overlay.
 * Palette per corp/docs/design-guidelines.md (zerg carapace scale):
 * deep carapace leads (#c2410c / #9a3412), zerg-500 #f97316 reserved
 * for ACTION elements only. Warm stone surfaces, never cool gray.
 * No purple, no emerald, no blue (design-guidelines §10).
 *
 * ZRGRT-2 phase 1: global dark-terminal restyle of the stock zfile UI
 * via Element Plus CSS variables + layout selectors. The fork stays
 * untouched — all of this ships from this overlay (build.sh injects
 * the link into dist/index.html).
 *
 * Fonts: system stacks with JetBrains Mono first when the client has it;
 * self-hosted woff2 is a follow-up (see README).
 */

/*
 * Fonts: family standard, self-hosted (same woff2 set as the other public
 * surfaces — Inter var + JetBrains Mono regular/bold, subset latin).
 */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ZRGRT lead hues (identity) */
  --zrgrt-primary: #c2410c;        /* zerg-700 deep carapace */
  --zrgrt-deep: #9a3412;           /* zerg-800 */
  /* Action-only accent (CTAs, links) — never identity surfaces */
  --zrgrt-action: #f97316;         /* zerg-500 */
  /* Family base */
  --zrgrt-base: #0c0a09;           /* stone-950 warm-black */
  --zrgrt-surface: #1c1917;        /* stone-900 */
  --zrgrt-surface-raised: #14110e; /* near-black raised */
  --zrgrt-border: #292524;         /* stone-800 */
  --zrgrt-text: #d6d3d1;           /* stone-300 */
  --zrgrt-text-strong: #e7e5e4;    /* stone-200 */
  --zrgrt-text-meta: #78716c;      /* stone-400 */
  /* Display gradient (display type only, never buttons) */
  --zrgrt-gradient: linear-gradient(135deg, #c2410c, #f97316);

  /* ---- Element Plus retheme (tables, dialogs, inputs, dropdowns) ---- */
  --el-color-primary: #c2410c;
  --el-color-primary-light-3: #fb923c;
  --el-color-primary-light-5: #fdba74;
  --el-color-primary-light-7: #fed7aa;
  --el-color-primary-light-8: #ffedd5;
  --el-color-primary-light-9: #fff7ed;
  --el-color-primary-dark-2: #9a3412;

  --el-bg-color: #0c0a09;
  --el-bg-color-page: #0c0a09;
  --el-bg-color-overlay: #14110e;

  --el-text-color-primary: #e7e5e4;
  --el-text-color-regular: #d6d3d1;
  --el-text-color-secondary: #a8a29e;
  --el-text-color-placeholder: #78716c;
  --el-text-color-disabled: #57534e;

  --el-border-color: #292524;
  --el-border-color-light: #292524;
  --el-border-color-lighter: #1c1917;
  --el-border-color-extra-light: #14110e;
  --el-border-color-dark: #44403c;
  --el-border-color-hover: #57534e;

  --el-fill-color: #14110e;
  --el-fill-color-light: #1c1917;
  --el-fill-color-lighter: #14110e;
  --el-fill-color-extra-light: #0c0a09;
  --el-fill-color-dark: #292524;
  --el-fill-color-darker: #44403c;
  --el-fill-color-blank: #0c0a09;

  --el-table-bg-color: #0c0a09;
  --el-table-tr-bg-color: #0c0a09;
  --el-table-header-bg-color: #0c0a09;
  --el-table-header-text-color: #a8a29e;
  --el-table-text-color: #d6d3d1;
  --el-table-border-color: #1c1917;
  --el-table-row-hover-bg-color: #1c1917;
  --el-table-expanded-cell-bg-color: #0c0a09;
  --el-table-fixed-box-shadow: var(--el-box-shadow-light);

  --el-mask-color: rgba(12, 10, 9, 0.85);
  --el-mask-color-extra-light: rgba(12, 10, 9, 0.3);

  --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.5);
  --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.6);

  --el-disabled-bg-color: #14110e;
  --el-disabled-text-color: #57534e;
  --el-disabled-border-color: #292524;

  color-scheme: dark;
}

/* ---- Base field: the void-black terminal ---- */

html, body, #app {
  background: var(--zrgrt-base) !important;
  color: var(--zrgrt-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Selection tint matches the site accent (family rule §5). */
::selection {
  background: #c2410c4d; /* primary @ 30% */
}

/* Warm scrollbars on the void-black field. */
* {
  scrollbar-color: #57534e #0c0a09;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0a09; }
::-webkit-scrollbar-thumb { background: #44403c; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #57534e; }

/* Focus rings on the ZRGRT primary, offset against the warm base
 * (family rule §2.3 — every surface sites focus on its own accent). */
*:focus-visible {
  outline: 2px solid #c2410c;
  outline-offset: 2px;
}

/* ---- Login: CRT register on the auth field ---- */

.zrgrt-login-bg {
  /* Scanlines over the warm field — whisper-quiet, art surface only. */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(28, 25, 23, 0.55) 0 1px,
    transparent 1px 3px
  ) !important;
}

.zfile-login-logo {
  /* Carapace glow behind the ZRGRT mark on the art panel. */
  filter: drop-shadow(0 0 28px rgba(194, 65, 12, 0.16));
}

/* ---- Header: terminal chrome ---- */

.zfile-header {
  background: var(--zrgrt-base) !important;
  border-bottom: 1px solid var(--zrgrt-border) !important;
  box-shadow: none !important;
  --el-border-color: #292524;
}

/* Carapace hairline above the header — the one identity gesture. */
.zfile-header::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--zrgrt-gradient);
  opacity: 0.85;
}

/* Breadcrumbs read as a terminal prompt path: mono, uppercase, tracked. */
.zfile-header-breadcrumb,
.z-breadcrumbs {
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo,
    Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--zrgrt-text) !important;
}

.z-breadcrumbs a,
.z-breadcrumbs .el-breadcrumb__inner {
  color: var(--zrgrt-text) !important;
}

.z-breadcrumbs a:hover,
.z-breadcrumbs .el-breadcrumb__inner:hover {
  color: var(--zrgrt-action) !important;
}

/* ---- File table: the drop manifest ---- */

.el-table.z-file-view {
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo,
    Consolas, monospace;
  font-size: 13px;
  background: transparent !important;
}

.el-table.z-file-view .el-table__cell {
  background: transparent;
  border-bottom: 1px solid var(--zrgrt-border) !important;
}

.el-table.z-file-view .el-table__row:hover > .el-table__cell {
  background: #1c1917 !important;
}

/* Filenames: strong stone, action color on hover. */
.z-file-view .file-list-file-name,
.z-file-view a,
.el-table .el-table__row a {
  color: var(--zrgrt-text-strong);
}

.z-file-view .file-list-file-name:hover,
.z-file-view a:hover {
  color: var(--zrgrt-action);
}

/* Header row: quiet meta mono. */
.z-file-view .el-table__header-wrapper th {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--zrgrt-text-meta) !important;
}

/* ---- Storage switcher + global widgets ---- */

.el-select__wrapper,
.el-select-dropdown,
.el-popper.is-light {
  background: var(--zrgrt-surface-raised) !important;
  border: 1px solid var(--zrgrt-border) !important;
  color: var(--zrgrt-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

.el-select-dropdown__item.is-hovering {
  background: var(--zrgrt-surface) !important;
}

.el-select-dropdown__item.is-selected {
  color: var(--zrgrt-action) !important;
}

/* ---- Buttons: family dark-stone-on-accent-500 ---- */

.el-button--primary {
  --el-button-bg-color: #f97316;
  --el-button-border-color: #f97316;
  --el-button-text-color: #0c0a09;
  --el-button-hover-bg-color: #fb923c;
  --el-button-hover-border-color: #fb923c;
  --el-button-hover-text-color: #0c0a09;
  --el-button-active-bg-color: #ea580c;
  --el-button-active-border-color: #ea580c;
  --el-button-active-text-color: #0c0a09;
  font-weight: 600;
}

.el-button--default {
  --el-button-bg-color: #0c0a09;
  --el-button-border-color: #44403c;
  --el-button-text-color: #d6d3d1;
  --el-button-hover-bg-color: #14110e;
  --el-button-hover-border-color: #57534e;
  --el-button-hover-text-color: #e7e5e4;
}

/* Links are actions: zerg-500. */
.el-link.el-link--primary,
a {
  color: var(--zrgrt-action);
}

/* ---- Dialogs, messages, login card ---- */

.el-dialog,
.el-message-box {
  background: var(--zrgrt-surface-raised) !important;
  border: 1px solid var(--zrgrt-border);
}

.el-card,
.bg-white,
[class*="bg-white"] {
  background: var(--zrgrt-surface-raised) !important;
  color: var(--zrgrt-text);
}

.el-input__wrapper,
.el-textarea__inner {
  background: #0c0a09 !important;
  box-shadow: 0 0 0 1px var(--zrgrt-border) inset !important;
}

.el-input__inner {
  color: var(--zrgrt-text-strong) !important;
}

.el-input__inner::placeholder {
  color: var(--zrgrt-text-meta);
}

/* Toasts: dark, hairline, carapace edge. */
.el-message {
  background: var(--zrgrt-surface-raised) !important;
  border-color: var(--zrgrt-border) !important;
  border-left: 2px solid var(--zrgrt-primary) !important;
}

/* Switches stay element-plus but inherit the carapace primary. */
.el-switch.is-checked .el-switch__core {
  background: var(--zrgrt-primary);
  border-color: var(--zrgrt-primary);
}

/* ZRGRT has no corporate footer — the surface speaks as the collective
 * (ZRGRT exception, design-guidelines §11-bis). The terminal boot-bar
 * is injected by /zrgrt.js (see below + build.sh). */

/* ==================================================================
 * TAILWIND NEUTRALIZATION — admin chrome (sidebar, content field,
 * nav links). The base admin layout is Tailwind-styled (bg-white
 * sidebar, bg-gray-50 field, indigo-600 actives) — Element Plus
 * variables don't reach it, so the utilities are overridden directly.
 * Warm stone only; cool gray/indigo never (§5, §10).
 * ================================================================== */

/* Page field vs raised surface: depth through two steps of black. */
.bg-white { background-color: #14110e !important; }        /* sidebar, cards */
.bg-gray-50 { background-color: #0c0a09 !important; }     /* content field */
.bg-gray-100 { background-color: #1c1917 !important; }

/* Mobile menu backdrop */
[class*="bg-gray-900"] { background-color: rgba(12, 10, 9, 0.85) !important; }

/* Text: warm stone ladder. */
.text-gray-900 { color: #e7e5e4 !important; }
.text-gray-700 { color: #d6d3d1 !important; }
.text-gray-600 { color: #a8a29e !important; }
.text-gray-400 { color: #78716c !important; }

/* Actives/hovers: the ZRGRT identity gesture — deep carapace. */
.text-indigo-600 { color: #c2410c !important; }
.hover\:text-indigo-600:hover { color: #c2410c !important; }
.hover\:bg-gray-50:hover { background-color: #1c1917 !important; }
a[class*="hover:bg-gray-50"]:hover { background-color: #1c1917 !important; }
a[class*="hover:text-indigo-600"]:hover { color: #c2410c !important; }

/* Hairlines */
.border-gray-200 { border-color: #292524 !important; }

/* Stray accent links → action orange (§2.3: links are actions). */
.text-blue-400, .text-blue-500 { color: #f97316 !important; }

/* Switch knobs: warm stone, never clinical white. */
.el-switch__action { background-color: #e7e5e4 !important; }

/* Admin sidebar nav font: keep the terminal register. */
aside nav a, .admin-sidebar a {
  font-family: Inter, system-ui, sans-serif;
}

/* ==================================================================
 * ZRGRT TERMINAL BOOT-BAR (public routes only — injected by zrgrt.js)
 * ================================================================== */

#zrgrt-bootbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 20px;
  background: rgba(12, 10, 9, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid #292524;
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo,
    Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #78716c;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  /* Greeting, not fixture: slides in/out. */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 340ms ease, opacity 340ms ease;
}

#zrgrt-bootbar.zrgrt-on {
  transform: translateY(0);
  opacity: 1;
}

#zrgrt-bootbar::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #c2410c, transparent 30%);
  opacity: 0.7;
}

#zrgrt-bootbar .zrgrt-mark {
  color: #c2410c;
  font-weight: 700;
}

#zrgrt-bootbar .zrgrt-sep {
  color: #44403c;
  margin: 0 8px;
}

#zrgrt-bootbar .zrgrt-desc {
  color: #a8a29e;
}

/* Status line: quiet boot-log feel; crossfade on cycle. */
#zrgrt-bootbar .zrgrt-status {
  color: #d6d3d1;
  transition: opacity 240ms ease;
}

#zrgrt-bootbar .zrgrt-status.zrgrt-fade {
  opacity: 0;
}

/* Motto: the swarm line, tracked wide, carapace-tinted. */
#zrgrt-bootbar .zrgrt-motto {
  color: #c2410c;
  letter-spacing: 0.22em;
}

#zrgrt-bootbar .zrgrt-cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 8px;
  background: #c2410c;
  animation: zrgrt-blink 1.1s steps(1) infinite;
  vertical-align: middle;
}

@keyframes zrgrt-blink {
  50% { opacity: 0; }
}

/* The ×: the only interactive pixel on the bar. */
#zrgrt-bootbar .zrgrt-close {
  pointer-events: auto;
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  color: #78716c;
  background: transparent;
  border: 1px solid #292524;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

#zrgrt-bootbar .zrgrt-close:hover,
#zrgrt-bootbar .zrgrt-close:focus-visible {
  color: #c2410c;
  border-color: #c2410c;
  outline: none;
}

/* Body breathes above the bar on public routes. */
body:has(#zrgrt-bootbar) .el-main { padding-bottom: 64px !important; }