/* ============================================
   UNGLUED LABS // GITEA TERMINAL INTERFACE
   "From chaos comes order"
   © 2077 - Beware of Chickens
   ============================================ */

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

:root {
  --is-dark-theme: true;

  /* UNGLUED PALETTE */
  --cyber-yellow: #fff200;
  --dim-yellow: #999100;
  --glow-yellow: #ffff99;
  --acid-green: #39ff14;
  --dim-green: #006600;
  --bg-black: #080808;
  --panel-bg: #0a0a0a;
  --panel-border: #1a1a0a;

  /* ============================================
     COMPREHENSIVE GITEA VARIABLE OVERRIDES
     Eliminates ALL gray leakage
     ============================================ */

  /* === BACKGROUND VARIABLES === */
  --color-body: #080808;
  --color-box-body: #0a0a0a;
  --color-box-body-highlight: #0a0a0a;
  --color-box-header: #080808;
  --color-card: #0a0a0a;
  --color-footer: #080808;
  --color-menu: #080808;
  --color-nav-bg: #080808;
  --color-secondary-bg: #080808;
  --color-secondary-nav-bg: #080808;
  --color-project-column-bg: #0a0a0a;
  --color-tooltip-bg: #0a0a0a;
  --color-light: #0a0a0a;

  /* === BUTTON/INTERACTIVE VARIABLES === */
  --color-button: #0a0a0a;
  --color-expand-button: #0a0a0a;
  --color-hover: rgba(255, 242, 0, 0.1);
  --color-hover-opaque: #1a1a0a;
  --color-nav-hover-bg: rgba(255, 242, 0, 0.1);
  --color-active: rgba(255, 242, 0, 0.15);

  /* === INPUT VARIABLES === */
  --color-input-background: transparent;
  --color-input-border: #006600;
  --color-input-border-hover: #fff200;
  --color-input-text: #39ff14;
  --color-input-toggle-background: #0a0a0a;
  --color-placeholder-text: #006600;
  --color-caret: #39ff14;

  /* === SECONDARY/GRAY COLOR FAMILY === */
  --color-secondary: #1a1a1a;
  --color-secondary-alpha-20: rgba(26, 26, 10, 0.2);
  --color-secondary-alpha-40: rgba(57, 255, 20, 0.2);
  --color-secondary-alpha-50: rgba(26, 26, 10, 0.5);
  --color-secondary-alpha-60: #1a2a1a;
  --color-secondary-dark-1: #151510;
  --color-secondary-dark-2: #121210;
  --color-secondary-dark-4: #0e0e0a;
  --color-secondary-dark-5: #0c0c08;
  --color-secondary-dark-7: #0a0a06;
  --color-secondary-dark-8: #080808;
  --color-secondary-light-1: #2a2a1a;
  --color-grey: #888866;
  --color-grey-light: #666644;
  --color-light-border: #2a2a0a;

  /* === CODE/MARKUP VARIABLES === */
  --color-code-bg: #001a00;
  --color-console-bg: #001a00;
  --color-console-fg: #39ff14;
  --color-markup-code-block: #001a00;
  --color-markup-code-inline: #0a1a0a;
  --color-markup-table-row: #0a0a0a;
  --color-highlight-bg: rgba(255, 242, 0, 0.15);
  --color-highlight-fg: #fff200;

  /* === LABEL/BADGE VARIABLES === */
  --color-label-bg: rgba(255, 242, 0, 0.1);
  --color-label-hover-bg: rgba(255, 242, 0, 0.2);
  --color-label-text: #fff200;
  --color-reaction-active-bg: rgba(57, 255, 20, 0.2);
  --color-reaction-hover-bg: rgba(57, 255, 20, 0.1);

  /* === TEXT VARIABLES === */
  --color-text: #fff200;
  --color-text-dark: #fff200;
  --color-text-light: #888866;
  --color-text-light-1: #777755;
  --color-text-light-2: #666644;
  --color-text-light-3: #555533;
  --color-nav-text: #fff200;
  --color-tooltip-text: #fff200;

  /* === SHADOW/OVERLAY === */
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-overlay-backdrop: rgba(8, 8, 8, 0.9);

  /* === DIFF COLORS === */
  --color-diff-added-row-bg: rgba(57, 255, 20, 0.1);
  --color-diff-added-word-bg: rgba(57, 255, 20, 0.3);
  --color-diff-added-linenum-bg: rgba(57, 255, 20, 0.15);
  --color-diff-removed-row-bg: rgba(255, 51, 102, 0.1);
  --color-diff-removed-word-bg: rgba(255, 51, 102, 0.3);
  --color-diff-removed-linenum-bg: rgba(255, 51, 102, 0.15);
  --color-diff-moved-row-bg: rgba(255, 242, 0, 0.1);
  --color-diff-inactive: #333320;

  /* === TIMELINE === */
  --color-timeline: #2a2a0a;

  /* === PRIMARY COLORS === */
  --color-primary: #fff200;
  --color-primary-contrast: #000000;
  --color-primary-dark-1: #999100;
  --color-primary-light-1: #ffff99;
  --color-accent: #39ff14;
  --color-border: #2a2a0a;

  /* === STATE COLORS === */
  --color-green: #39ff14;
  --color-red: #ff3366;
  --color-yellow: #fff200;
  --color-blue: #39ff14;
}

/* ============================================
   GLOBAL TERMINAL AESTHETIC
   ============================================ */

body {
  background-color: var(--bg-black) !important;
  color: var(--cyber-yellow) !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* CRT Scanlines overlay */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 4px
    );
  pointer-events: none;
  opacity: 0.4;
}

/* Yellow phosphor bloom */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255, 242, 0, 0.03) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6,
.ui.header,
.header {
  font-family: 'Teko', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--cyber-yellow) !important;
  text-shadow: 0 0 10px rgba(255, 242, 0, 0.3);
}

/* ============================================
   NAVBAR - SYSTEM HEADER
   ============================================ */

#navbar,
nav#navbar,
.navbar,
nav[aria-label="Navigation Bar"] {
  background: linear-gradient(
    180deg,
    #0c0c08 0%,
    var(--bg-black) 100%
  ) !important;
  border-bottom: 2px solid var(--dim-yellow) !important;
  box-shadow:
    0 2px 20px rgba(255, 242, 0, 0.1),
    inset 0 -1px 0 rgba(255, 242, 0, 0.1) !important;
}

#navbar .navbar-left,
#navbar .navbar-right {
  background: transparent !important;
}

#navbar a.item,
.navbar a.item {
  color: var(--cyber-yellow) !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  transition: all 0.2s ease !important;
}

#navbar a.item:hover,
.navbar a.item:hover {
  color: var(--bg-black) !important;
  background: var(--cyber-yellow) !important;
  text-shadow: none !important;
}

/* Logo glow */
#navbar-logo img {
  filter: drop-shadow(0 0 8px var(--acid-green)) drop-shadow(0 0 2px var(--acid-green));
}

.ui.secondary.menu {
  border: none !important;
}

/* ============================================
   DROPDOWN MENUS - TERMINAL POPUPS
   ============================================ */

.ui.dropdown .menu,
.ui.dropdown > .menu,
.menu.user-menu,
div.menu {
  background: var(--panel-bg) !important;
  border: 1px solid var(--dim-yellow) !important;
  box-shadow:
    0 0 30px rgba(255, 242, 0, 0.15),
    inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.ui.dropdown .menu > .item,
.ui.dropdown .menu > a.item {
  color: var(--cyber-yellow) !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 242, 0, 0.1) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > a.item:hover {
  background: var(--cyber-yellow) !important;
  color: var(--bg-black) !important;
}

.ui.dropdown .menu .header {
  color: var(--acid-green) !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase;
  font-size: 0.85em !important;
}

.ui.dropdown .menu .divider {
  border-color: var(--dim-yellow) !important;
  background: transparent !important;
}

/* ============================================
   BUTTONS - TERMINAL COMMANDS
   ============================================ */

.ui.primary.button,
.ui.positive.button,
.ui.green.button {
  background: var(--acid-green) !important;
  color: var(--bg-black) !important;
  font-family: 'Teko', sans-serif !important;
  font-size: 1.1em !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow:
    0 0 15px rgba(57, 255, 20, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
}

.ui.primary.button:hover,
.ui.positive.button:hover,
.ui.green.button:hover {
  background: var(--cyber-yellow) !important;
  box-shadow:
    0 0 25px rgba(255, 242, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

.ui.basic.button,
.ui.secondary.button {
  background: transparent !important;
  border: 1px solid var(--cyber-yellow) !important;
  color: var(--cyber-yellow) !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
}

.ui.basic.button:hover,
.ui.secondary.button:hover {
  background: var(--cyber-yellow) !important;
  color: var(--bg-black) !important;
}

.ui.icon.button {
  background: rgba(255, 242, 0, 0.1) !important;
  border: 1px solid var(--dim-yellow) !important;
  color: var(--cyber-yellow) !important;
}

.ui.icon.button:hover {
  background: var(--cyber-yellow) !important;
  color: var(--bg-black) !important;
}

/* ============================================
   LINKS - TERMINAL GREEN
   ============================================ */

a {
  color: var(--acid-green) !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

a:hover {
  color: var(--cyber-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 242, 0, 0.5);
}

/* ============================================
   CARDS & PANELS - DATA TERMINALS
   ============================================ */

.ui.segment,
.ui.card,
.ui.cards > .card,
.page-content,
.full.height,
.home,
.hero {
  background: var(--panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
}

.ui.card:hover,
.ui.cards > .card:hover {
  border-color: var(--cyber-yellow) !important;
  box-shadow:
    0 0 20px rgba(255, 242, 0, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* All attached segments, headers, etc */
.ui.attached,
.ui.segment.attached,
.ui.attached.header,
.ui.top.attached,
.ui.bottom.attached,
.ui.menu,
.ui.header,
.ui.table thead,
.ui.table thead th {
  background: var(--bg-black) !important;
}

/* ============================================
   INPUTS - TERMINAL PROMPTS
   ============================================ */

.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select,
input,
textarea,
select {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--dim-green) !important;
  color: var(--acid-green) !important;
  font-family: 'Share Tech Mono', monospace !important;
  border-radius: 0 !important;
}

input:focus,
textarea:focus,
.ui.input input:focus {
  border-color: var(--cyber-yellow) !important;
  background: rgba(255, 242, 0, 0.03) !important;
  box-shadow: none !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--dim-green) !important;
  text-transform: uppercase;
}

/* ============================================
   TABLES - DATA GRIDS
   ============================================ */

.ui.table {
  background: var(--panel-bg) !important;
  color: var(--cyber-yellow) !important;
  border: 1px solid var(--panel-border) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.ui.table thead th {
  background: var(--bg-black) !important;
  color: var(--acid-green) !important;
  border-color: var(--dim-yellow) !important;
  font-family: 'Teko', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.ui.table tbody tr {
  border-color: rgba(255, 242, 0, 0.1) !important;
}

.ui.table tbody tr:hover {
  background: rgba(255, 242, 0, 0.05) !important;
}

/* ============================================
   LABELS & BADGES
   ============================================ */

.ui.label {
  background: rgba(255, 242, 0, 0.1) !important;
  color: var(--cyber-yellow) !important;
  border: 1px solid var(--dim-yellow) !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-transform: uppercase !important;
}

.ui.green.label {
  background: var(--acid-green) !important;
  color: var(--bg-black) !important;
  border-color: var(--acid-green) !important;
}

.ui.yellow.label {
  background: var(--cyber-yellow) !important;
  color: var(--bg-black) !important;
  border-color: var(--cyber-yellow) !important;
}

.ui.red.label {
  background: #ff3366 !important;
  color: white !important;
}

/* ============================================
   ACTIVE STATES
   ============================================ */

.ui.secondary.menu .active.item,
.ui.tabular.menu .active.item {
  color: var(--cyber-yellow) !important;
  border-color: var(--cyber-yellow) !important;
  background: transparent !important;
  box-shadow: 0 2px 0 var(--cyber-yellow) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.ui.pagination.menu {
  background: transparent !important;
  border: none !important;
}

.ui.pagination.menu .item {
  color: var(--cyber-yellow) !important;
  border: 1px solid var(--dim-yellow) !important;
  background: var(--panel-bg) !important;
}

.ui.pagination.menu .active.item {
  background: var(--cyber-yellow) !important;
  color: var(--bg-black) !important;
}

/* ============================================
   CODE - THE SACRED TEXT
   ============================================ */

code, pre,
.code-view,
.highlight {
  background: #001a00 !important;
  color: var(--acid-green) !important;
  font-family: 'Share Tech Mono', monospace !important;
  border: 1px solid var(--dim-green) !important;
  box-shadow: inset 0 0 30px rgba(0, 50, 0, 0.3) !important;
}

/* ============================================
   MESSAGES & ALERTS
   ============================================ */

.ui.message {
  background: var(--panel-bg) !important;
  border: 1px solid var(--dim-yellow) !important;
  color: var(--cyber-yellow) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.ui.positive.message,
.ui.success.message {
  border-color: var(--acid-green) !important;
  background: rgba(57, 255, 20, 0.1) !important;
}

.ui.warning.message {
  border-color: var(--cyber-yellow) !important;
  background: rgba(255, 242, 0, 0.1) !important;
}

.ui.negative.message,
.ui.error.message {
  border-color: #ff3366 !important;
  background: rgba(255, 51, 102, 0.1) !important;
}

/* ============================================
   MODALS - SYSTEM DIALOGS
   ============================================ */

.ui.modal {
  background: var(--panel-bg) !important;
  border: 2px solid var(--cyber-yellow) !important;
  box-shadow:
    0 0 50px rgba(255, 242, 0, 0.3),
    inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
}

.ui.modal > .header {
  background: var(--bg-black) !important;
  color: var(--cyber-yellow) !important;
  font-family: 'Teko', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-bottom: 1px solid var(--dim-yellow) !important;
}

.ui.modal > .content {
  background: var(--panel-bg) !important;
  color: var(--cyber-yellow) !important;
}

.ui.modal > .actions {
  background: var(--bg-black) !important;
  border-top: 1px solid var(--dim-yellow) !important;
}

.ui.dimmer {
  background: rgba(8, 8, 8, 0.9) !important;
}

/* ============================================
   HEATMAP - TERMINAL ACTIVITY
   ============================================ */

[data-level="0"] { fill: #0a0a0a !important; stroke: #1a2a1a !important; stroke-width: 1px; }
[data-level="1"] { fill: rgba(57, 255, 20, 0.2) !important; }
[data-level="2"] { fill: rgba(57, 255, 20, 0.4) !important; }
[data-level="3"] { fill: rgba(57, 255, 20, 0.6) !important; }
[data-level="4"] { fill: rgba(57, 255, 20, 0.8) !important; }
[data-level="5"] { fill: var(--acid-green) !important; }

/* ============================================
   FOOTER - SYSTEM STATUS
   ============================================ */

.page-footer,
footer {
  background: var(--bg-black) !important;
  border-top: 1px solid var(--dim-yellow) !important;
  color: var(--dim-yellow) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

/* ============================================
   SCROLLBARS - TERMINAL AESTHETIC
   ============================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-black);
  border-left: 1px solid var(--panel-border);
}

::-webkit-scrollbar-thumb {
  background: var(--dim-yellow);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-yellow);
}

/* ============================================
   SELECTION
   ============================================ */

::selection {
  background: var(--cyber-yellow);
  color: var(--bg-black);
}

/* ============================================
   SVG ICONS
   ============================================ */

#navbar svg,
.navbar svg {
  fill: currentColor;
}

/* ============================================
   REPO FILE LIST - DIRECTORY LISTING
   ============================================ */

.repository .repo-file-list {
  font-family: 'Share Tech Mono', monospace !important;
}

/* ============================================
   HAZARD STRIPE ACCENT (for special elements)
   ============================================ */

.ui.top.attached.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--cyber-yellow) 0px,
    var(--cyber-yellow) 10px,
    var(--bg-black) 10px,
    var(--bg-black) 20px
  );
}

/* ============================================
   SPECIAL: BLINK CURSOR FOR INPUTS
   ============================================ */

input:focus::after {
  content: '_';
  animation: blink 1s step-end infinite;
}

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

/* ============================================
   GRAY TERMINATOR - KILL ALL GRAYS
   ============================================ */

/* Secondary nav and similar gray backgrounds */
.secondary-nav,
.ui.secondary.pointing.menu,
.ui.tabular.menu,
.overflow-menu,
.repo-button-row,
.issue-content-right,
.timeline-item,
[class*="secondary-nav"] {
  background: var(--bg-black) !important;
}

/* Additional variable overrides with !important for extra specificity */
:root {
  --color-secondary-nav-bg: #080808 !important;
  --color-nav-bg: #080808 !important;
  --color-button-bg: #0a0a0a !important;
  --color-light: #0a0a0a !important;
  --color-light-mimic-enabled: #0a0a0a !important;
  --color-hover: rgba(255, 242, 0, 0.1) !important;
  --color-active: rgba(255, 242, 0, 0.15) !important;
  --color-menu-hover: rgba(255, 242, 0, 0.1) !important;
  --color-box-header: #080808 !important;
  --color-box-body: #0a0a0a !important;
  --color-box-body-highlight: #0a0a0a !important;
  --color-card: #0a0a0a !important;
  --color-menu: #080808 !important;
  --color-secondary-bg: #080808 !important;
  --color-project-column-bg: #0a0a0a !important;
  --color-tooltip-bg: #0a0a0a !important;
  --color-button: #0a0a0a !important;
  --color-expand-button: #0a0a0a !important;
  --color-input-toggle-background: #0a0a0a !important;

  /* Input backgrounds */
  --color-input-background: transparent !important;
  --color-input-border: #006600 !important;
  --color-input-text: #39ff14 !important;
}

/* Button variations that might show gray */
.ui.button,
.ui.buttons .button,
.ui.small.button,
.ui.tiny.button,
.ui.mini.button,
.ui.large.button,
.ui.big.button,
a.ui.button,
a.ui.small.button,
button {
  background: var(--panel-bg) !important;
  color: var(--cyber-yellow) !important;
  border: 1px solid var(--dim-yellow) !important;
}

.ui.button:hover,
.ui.buttons .button:hover,
.ui.small.button:hover,
a.ui.button:hover,
a.ui.small.button:hover,
button:hover {
  background: var(--cyber-yellow) !important;
  color: var(--bg-black) !important;
}

/* Re-apply primary button styling (higher specificity) */
.ui.primary.button,
.ui.button.primary,
button.primary {
  background: var(--acid-green) !important;
  color: var(--bg-black) !important;
  border: none !important;
}

.ui.primary.button:hover,
.ui.button.primary:hover {
  background: var(--cyber-yellow) !important;
}

/* Negative/red buttons */
.ui.negative.button,
.ui.red.button,
.ui.button.red {
  background: #ff3366 !important;
  color: white !important;
  border: none !important;
}

/* Compact buttons */
.ui.compact.button {
  background: var(--panel-bg) !important;
  border: 1px solid var(--dim-yellow) !important;
}

/* Disabled buttons */
.ui.button:disabled,
.ui.button.disabled {
  background: var(--panel-bg) !important;
  color: var(--dim-yellow) !important;
  opacity: 0.5 !important;
}

/* Repo action buttons row */
.repo-button-row .button,
.repo-header .button {
  background: var(--panel-bg) !important;
  border: 1px solid var(--dim-yellow) !important;
  color: var(--cyber-yellow) !important;
}

/* File header buttons */
.file-header .button,
.diff-file-header .button {
  background: var(--panel-bg) !important;
  color: var(--cyber-yellow) !important;
}

/* Menu header items - kill gray backgrounds */
.ui.menu .header.item,
.ui.vertical.menu .header.item,
.ui.menu .item.header,
.ui.vertical.menu > .header.item,
.ui.vertical.menu > .item.header,
.header.item,
.item.header {
  background: #080808 !important;
  color: #fff200 !important;
}

/* Pointing menu items */
.ui.secondary.pointing.menu .item {
  background: transparent !important;
  color: var(--cyber-yellow) !important;
}

.ui.secondary.pointing.menu .active.item {
  background: transparent !important;
  color: var(--cyber-yellow) !important;
  border-color: var(--cyber-yellow) !important;
}

/* Overflow menu */
.overflow-menu .ui.secondary.menu {
  background: var(--bg-black) !important;
}

/* ============================================
   PRINT: DISABLE EFFECTS
   ============================================ */

@media print {
  body::before,
  body::after {
    display: none !important;
  }
}