/* ==========================================================================
   Gruvbox Dark — Forgejo Custom Theme
   Based on the Gruvbox color scheme by [morhetz](https://github.com/morhetz/gruvbox).
   Tweaked by [ramvignesh-b](https://forge.ramvignesh.dev/me).
   ========================================================================== */

/* ── Self-Hosted Fonts ───────────────────────────────────────────────────── */

/* Maple Mono (Code Editor & Viewer Font with Ligatures) */
@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/maple-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/maple-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lexend (Default Body Font for General UI Text) */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono (Monospace Font for Headings & Structural Elements) */
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ── Color Palette & Custom Properties ───────────────────────────────────── */

:root {
  /* Gruvbox Neutrals (Shifted down for Hard Dark variant) */
  --gruvbox-bg-h:  #141617; /* Hardest dark background */
  --gruvbox-bg:    #1d2021; /* Main background */
  --gruvbox-bg1:   #282828; /* Box containers, headers */
  --gruvbox-bg2:   #3c3836; /* Input panels, active fields */
  --gruvbox-bg3:   #504945; /* Borders, hover states */
  --gruvbox-bg4:   #665c54; /* Subdued icons & text */
  --gruvbox-fg4:   #928374; /* Classic Gruvbox gray */
  --gruvbox-fg3:   #a89984; /* Soft warm gray */
  --gruvbox-fg2:   #bdae93; /* Medium warm gray */
  --gruvbox-fg1:   #d5c4a1; /* Light beige */
  --gruvbox-fg:    #ebdbb2; /* Standard text color */

  /* Gruvbox Accent Colors */
  --gruvbox-red:      #cc241d;  --gruvbox-red-b:      #fb4934;
  --gruvbox-green:    #98971a;  --gruvbox-green-b:    #b8bb26;
  --gruvbox-yellow:   #d79921;  --gruvbox-yellow-b:   #fabd2f;
  --gruvbox-blue:     #458588;  --gruvbox-blue-b:     #83a598;
  --gruvbox-purple:   #b16286;  --gruvbox-purple-b:   #d3869b;
  --gruvbox-aqua:     #689d6a;  --gruvbox-aqua-b:     #8ec07c;
  --gruvbox-orange:   #d65d0e;  --gruvbox-orange-b:   #fe8019;

  /* Theme Configuration */
  --is-dark-theme: true;
  color-scheme:    dark;
  accent-color:    var(--color-accent);

  /* Primary Brand Color (Gruvbox Aqua) */
  --color-primary:          var(--gruvbox-aqua-b);
  --color-primary-contrast: #000000;
  --color-primary-dark-1:   var(--gruvbox-yellow-b);
  --color-primary-dark-2:   var(--gruvbox-yellow-b);
  --color-primary-dark-3:   var(--gruvbox-yellow);
  --color-primary-dark-4:   var(--gruvbox-yellow);
  --color-primary-light-1:  var(--gruvbox-aqua);
  --color-primary-light-2:  #507a52;
  --color-primary-light-3:  #3e5c3f;
  --color-primary-light-4:  #2c422d;
  --color-primary-light-5:  #2c422d;
  --color-primary-light-6:  #1e2d1f;
  --color-primary-light-7:  #1e2d1f;
  --color-primary-alpha-10: #689d6a19;
  --color-primary-alpha-20: #689d6a33;
  --color-primary-alpha-30: #689d6a4b;
  --color-primary-alpha-40: #689d6a66;
  --color-primary-alpha-50: #689d6a80;
  --color-primary-alpha-60: #689d6a99;
  --color-primary-alpha-70: #689d6ab3;
  --color-primary-alpha-80: #689d6acc;
  --color-primary-alpha-90: #689d6ae1;
  --color-primary-hover:    var(--gruvbox-aqua);
  --color-primary-active:   #507a52;

  /* Secondary Elements & Backgrounds */
  --color-secondary:          var(--gruvbox-bg1);
  --color-secondary-dark-1:   var(--gruvbox-bg2);
  --color-secondary-dark-2:   var(--gruvbox-bg3);
  --color-secondary-dark-3:   var(--gruvbox-bg4);
  --color-secondary-dark-4:   var(--gruvbox-fg4);
  --color-secondary-dark-5:   var(--gruvbox-fg3);
  --color-secondary-dark-6:   var(--gruvbox-fg2);
  --color-secondary-dark-7:   var(--gruvbox-fg1);
  --color-secondary-dark-8:   var(--gruvbox-fg);
  --color-secondary-dark-9:   var(--gruvbox-fg);
  --color-secondary-dark-10:  var(--gruvbox-fg);
  --color-secondary-dark-11:  var(--gruvbox-fg);
  --color-secondary-dark-12:  var(--gruvbox-fg);
  --color-secondary-dark-13:  var(--gruvbox-fg);
  --color-secondary-light-1:  var(--gruvbox-bg2);
  --color-secondary-light-2:  var(--gruvbox-bg1);
  --color-secondary-light-3:  var(--gruvbox-bg);
  --color-secondary-light-4:  var(--gruvbox-bg-h);
  --color-secondary-alpha-10: #3c383619;
  --color-secondary-alpha-20: #3c383633;
  --color-secondary-alpha-30: #3c38364b;
  --color-secondary-alpha-40: #3c383666;
  --color-secondary-alpha-50: #3c383680;
  --color-secondary-alpha-60: #3c383699;
  --color-secondary-alpha-70: #3c3836b3;
  --color-secondary-alpha-80: #3c3836cc;
  --color-secondary-alpha-90: #3c3836e1;
  --color-secondary-hover:    var(--gruvbox-bg2);
  --color-secondary-active:   var(--gruvbox-bg1);

  /* Named Palette Mappings */
  --color-red:    var(--gruvbox-red);
  --color-orange: var(--gruvbox-orange);
  --color-yellow: var(--gruvbox-yellow);
  --color-olive:  var(--gruvbox-green);
  --color-green:  var(--gruvbox-green);
  --color-teal:   var(--gruvbox-aqua);
  --color-blue:   var(--gruvbox-blue);
  --color-violet: var(--gruvbox-purple);
  --color-purple: var(--gruvbox-purple);
  --color-pink:   var(--gruvbox-purple-b);
  --color-brown:  #a47252;
  --color-grey:   var(--gruvbox-fg4);
  --color-black:  var(--gruvbox-bg-h);

  --color-red-light:    var(--gruvbox-red-b);
  --color-orange-light: var(--gruvbox-orange-b);
  --color-yellow-light: var(--gruvbox-yellow-b);
  --color-olive-light:  var(--gruvbox-green-b);
  --color-green-light:  var(--gruvbox-green-b);
  --color-teal-light:   var(--gruvbox-aqua-b);
  --color-purple-light: var(--gruvbox-purple-b);
  --color-pink-light:   var(--gruvbox-purple-b);
  --color-brown-light:  #94674a;
  --color-grey-light:   var(--gruvbox-fg2);
  --color-black-light:  var(--gruvbox-bg1);

  --color-red-dark-1:    #a71919;
  --color-orange-dark-1: #b84e0b;
  --color-yellow-dark-1: #b07f1b;
  --color-olive-dark-1:  #7a7a14;
  --color-green-dark-1:  #7a7a14;
  --color-teal-dark-1:   #507851;
  --color-violet-dark-1: #8c4d6a;
  --color-purple-dark-1: #8c4d6a;
  --color-pink-dark-1:   #a84e7c;
  --color-brown-dark-1:  #94674a;
  --color-black-dark-1:  var(--gruvbox-bg-h);

  --color-red-dark-2:    #941616;
  --color-orange-dark-2: #a24409;
  --color-yellow-dark-2: #9a6f17;
  --color-olive-dark-2:  #6a6a10;
  --color-green-dark-2:  #6a6a10;
  --color-teal-dark-2:   #436843;
  --color-violet-dark-2: #7a4059;
  --color-purple-dark-2: #7a4059;
  --color-pink-dark-2:   #94416c;
  --color-brown-dark-2:  #a47252;
  --color-black-dark-2:  var(--gruvbox-bg);

  /* Web Console terminal styling */
  --color-console-fg:          var(--gruvbox-fg);
  --color-console-fg-subtle:   var(--gruvbox-fg4);
  --color-console-bg:          var(--gruvbox-bg-h);
  --color-console-border:      var(--gruvbox-bg1);
  --color-console-hover-bg:    #ffffff12;
  --color-console-active-bg:   var(--gruvbox-bg2);
  --color-console-menu-bg:     var(--gruvbox-bg1);
  --color-console-menu-border: var(--gruvbox-bg2);

  /* ANSI Terminal Colors */
  --color-ansi-black:          var(--gruvbox-bg1);
  --color-ansi-red:            var(--gruvbox-red-b);
  --color-ansi-green:          var(--gruvbox-green-b);
  --color-ansi-yellow:         var(--gruvbox-yellow-b);
  --color-ansi-blue:           var(--gruvbox-blue-b);
  --color-ansi-magenta:        var(--gruvbox-purple-b);
  --color-ansi-cyan:           var(--gruvbox-aqua-b);
  --color-ansi-white:          var(--gruvbox-fg4);
  --color-ansi-bright-black:   var(--gruvbox-bg4);
  --color-ansi-bright-red:     var(--gruvbox-red-b);
  --color-ansi-bright-green:   var(--gruvbox-green-b);
  --color-ansi-bright-yellow:  var(--gruvbox-yellow-b);
  --color-ansi-bright-blue:    var(--gruvbox-blue-b);
  --color-ansi-bright-magenta: var(--gruvbox-purple-b);
  --color-ansi-bright-cyan:    var(--gruvbox-aqua-b);
  --color-ansi-bright-white:   var(--gruvbox-fg);

  /* Code Diffs */
  --color-diff-removed-word-bg:    #6b2020;
  --color-diff-added-word-bg:      #4a6320;
  --color-diff-removed-row-bg:     #3d1a1a;
  --color-diff-moved-row-bg:       #5c3d08;
  --color-diff-added-row-bg:       #2a3d10;
  --color-diff-removed-row-border: #6b2020;
  --color-diff-moved-row-border:   #7a5510;
  --color-diff-added-row-border:   #4a6320;
  --color-diff-inactive:           var(--gruvbox-bg2);

  /* UI Feedback Messages */
  --color-error-border:    #6b2020;
  --color-error-bg:        #4a1818;
  --color-error-bg-active: #6b2020;
  --color-error-bg-hover:  #6b2020;
  --color-error-text:      #ffd7d7;
  --color-success-border:  var(--gruvbox-green);
  --color-success-bg:      #2a3a10;
  --color-success-text:    var(--gruvbox-green-b);
  --color-warning-border:  var(--gruvbox-yellow);
  --color-warning-bg:      #4a3a08;
  --color-warning-text:    var(--gruvbox-yellow-b);
  --color-info-border:     var(--gruvbox-blue);
  --color-info-bg:         #1a3038;
  --color-info-text:       var(--gruvbox-blue-b);

  /* Status Badges */
  --color-red-badge:             var(--gruvbox-red);
  --color-red-badge-bg:          #cc241d22;
  --color-red-badge-hover-bg:    #cc241d44;
  --color-green-badge:           var(--gruvbox-green);
  --color-green-badge-bg:        #98971a22;
  --color-green-badge-hover-bg:  #98971a44;
  --color-yellow-badge:          var(--gruvbox-yellow);
  --color-yellow-badge-bg:       #d7992122;
  --color-yellow-badge-hover-bg: #d7992144;
  --color-orange-badge:          var(--gruvbox-orange);
  --color-orange-badge-bg:       #d65d0e22;
  --color-orange-badge-hover-bg: #d65d0e44;

  /* Relative color calculations (OKLch limits) */
  --thin-lightness:           0.68;
  --regular-chroma:           0.19;
  --hue-green:                145deg;
  --hue-red:                  27deg;
  --hue-purple:               298deg;
  --hue-violet:               293deg;
  --hue-orange:               41deg;
  --hue-blue:                 260deg;
  --thin-lightness-highlight: 0.75;
  --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);
  --bg-lightness:             0.26;
  --bg-chroma:                0.05;
  --color-danger-bg:          oklch(var(--bg-lightness) var(--bg-chroma) 27deg);

  /* Core Forgejo Layout Overrides */
  --color-body:                       var(--gruvbox-bg);
  --color-box-header:                 var(--gruvbox-bg1);
  --color-box-body:                   var(--gruvbox-bg);
  --color-box-body-highlight:         var(--gruvbox-bg2);
  --color-text-dark:                  #ffffff;
  --color-text:                       var(--gruvbox-fg);
  --color-text-light:                 var(--gruvbox-fg1);
  --color-text-light-1:               var(--gruvbox-fg1);
  --color-text-light-2:               var(--gruvbox-fg2);
  --color-text-light-3:               var(--gruvbox-fg3);
  --color-footer:                     var(--gruvbox-bg-h);
  --color-timeline:                   var(--gruvbox-bg2);
  --color-input-text:                 var(--gruvbox-fg);
  --color-input-background:           var(--gruvbox-bg2);
  --color-input-toggle-background:    var(--gruvbox-bg2);
  --color-input-border:               var(--gruvbox-bg3);
  --color-input-border-hover:         var(--gruvbox-bg4);
  --color-header-wrapper:             var(--gruvbox-bg-h);
  --color-header-wrapper-transparent: #1d202100;
  --color-light:                      rgba(0, 0, 0, 0.15);
  --color-light-mimic-enabled:        rgba(0, 0, 0, calc(40/255*222/255/var(--opacity-disabled)));
  --color-light-border:               rgba(255, 255, 255, 0.12);
  --color-hover:                      var(--gruvbox-bg2);
  --color-active:                     var(--gruvbox-bg1);
  --color-menu:                       var(--gruvbox-bg1);
  --color-card:                       var(--gruvbox-bg1);
  --fancy-card-bg:                    var(--gruvbox-bg2);
  --fancy-card-border:                var(--gruvbox-bg3);
  --color-markup-table-row:           rgba(255, 255, 255, 0.02);
  --color-markup-code-block:          var(--gruvbox-bg);
  --color-markup-code-inline:         var(--gruvbox-bg-h);
  --color-button:                     var(--gruvbox-bg2);
  --color-code-bg:                    var(--gruvbox-bg);
  --color-shadow:                     rgba(0, 0, 0, 0.38);
  --color-secondary-bg:               var(--gruvbox-bg1);
  --color-text-focus:                 #ffffff;
  --color-expand-button:              var(--gruvbox-bg1);
  --color-placeholder-text:           var(--gruvbox-fg4);
  --color-editor-line-highlight:      var(--gruvbox-bg1);
  --color-project-board-bg:           var(--gruvbox-bg);
  --color-project-board-dark-label:   var(--gruvbox-fg3);
  --color-caret:                      var(--gruvbox-fg);
  --color-reaction-bg:                rgba(255, 255, 255, 0.06);
  --color-reaction-active-bg:         var(--color-primary-alpha-30);
  --color-reaction-hover-bg:          var(--color-primary-alpha-40);
  --color-tooltip-text:               var(--gruvbox-fg);
  --color-tooltip-bg:                 var(--gruvbox-bg-h);
  --color-nav-bg:                     var(--gruvbox-bg-h);
  --color-nav-hover-bg:               var(--gruvbox-bg2);
  --color-secondary-nav-bg:           var(--color-body);
  --color-label-text:                 #ffffff;
  --color-label-bg:                   var(--gruvbox-bg2);
  --color-label-hover-bg:             var(--gruvbox-bg3);
  --color-label-active-bg:            var(--gruvbox-bg4);
  --color-label-bg-alt:               var(--gruvbox-bg3);
  --color-accent:                     var(--gruvbox-aqua-b);
  --color-small-accent:               var(--gruvbox-aqua);
  --color-highlight-fg:               var(--gruvbox-yellow-b);
  --color-highlight-bg:               var(--color-primary-alpha-20);
  --color-overlay-backdrop:           rgba(8, 8, 8, 0.75);
  --color-selection-bg:               var(--gruvbox-fg);
  --color-selection-fg:               var(--gruvbox-bg);
  --checkerboard-color-1:             var(--gruvbox-bg2);
  --checkerboard-color-2:             var(--gruvbox-bg);
  --color-indicator-offline:          var(--gruvbox-fg4);
  --color-indicator-offline-20:       rgba(146, 131, 116, 0.1);
  --color-indicator-idle:             var(--gruvbox-green);
  --color-indicator-idle-20:          rgba(152, 151, 26, 0.1);
  --color-indicator-active:           var(--gruvbox-blue);
  --color-indicator-active-20:        rgba(69, 133, 136, 0.2);
  --color-gold:                       var(--gruvbox-yellow);
  --color-white:                      #ffffff;
  --color-pure-black:                 #000000;
}


/* ── Base Element & Layout Styles ────────────────────────────────────────── */

/* Global Typography Override (Lexend for standard UI copy) */
body,
.ui,
input,
textarea,
select,
button,
p,
span,
li,
td,
th,
label {
  font-family: 'Lexend', sans-serif !important;
}

/* Headings and Titles (Geist Mono) */
h1, h2, h3, h4, h5, h6,
.header,
.ui.header,
.hero,
.title {
  font-family: 'Geist Mono', monospace !important;
}


/* ── Code & Syntax Highlighting ──────────────────────────────────────────── */

/* Monospace Coding Blocks & Input Areas (Maple Mono with Ligatures) */
code,
pre,
kbd,
.code-inner,
.chroma,
.editor-wrapper,
.monaco-editor,
.code-inner span,
.chroma span,
.monaco-editor span,
.lines-code,
.lines-code span,
.lines-num,
.lines-num span {
  font-family: 'Maple Mono', monospace !important;
  font-variant-ligatures: common-ligatures contextual !important;
  font-feature-settings: "liga" on, "calt" on !important;
}

/* Relative Scaling & Line spacing for editor contexts */
code,
pre,
kbd,
.code-inner,
.chroma,
.editor-wrapper,
.monaco-editor,
.lines-code,
.lines-num {
  font-size: 1em !important;
  line-height: 1.8;
}

/* Chroma Syntax Highlighting Theme (Inlined since Gitea/Forgejo @import is restricted) */
.chroma { color: #ebdbb2; background-color: #1d2021; }
.chroma .err { color: #fb4934; }
.chroma .lnt, .chroma .ln { color: #7c6f64; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr, .chroma .kt { color: #fb4934; }
.chroma .n  { color: #ebdbb2; }
.chroma .na { color: #b8bb26; }
.chroma .nb { color: #fabd2f; }
.chroma .nc { color: #fabd2f; }
.chroma .no { color: #d3869b; }
.chroma .nd { color: #b8bb26; }
.chroma .ne { color: #fb4934; }
.chroma .nf, .chroma .fm { color: #b8bb26; }
.chroma .nn { color: #83a598; }
.chroma .nx { color: #b8bb26; }
.chroma .nt { color: #fb4934; }
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #83a598; }
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl,
.chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si,
.chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: #b8bb26; }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
.chroma .mo, .chroma .il { color: #d3869b; }
.chroma .o, .chroma .ow { color: #fe8019; }
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
.chroma .cs, .chroma .cp, .chroma .cpf { color: #928374; font-style: italic; }
.chroma .p  { color: #ebdbb2; }
.chroma .bp { color: #fabd2f; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
.chroma .gh, .chroma .gu { color: #fabd2f; font-weight: bold; }
.chroma .gd { color: #fb4934; background-color: #3d1a1a; }
.chroma .gi { color: #b8bb26; background-color: #2a3d10; }


/* ── Component Overrides & Customizations ────────────────────────────────── */

/* Markdown Content Styling Overrides */
.markup-block-quote {
  border-left: 3px solid rgba(104, 157, 106, 0.4) !important;
  color: #928374;
}

.markup pre,
.repository .file-view .code-view {
  border: 1px solid var(--color-accent) !important;
  box-shadow: 4px 4px 0px #121212 !important;
  border-radius: 4px !important;
}

.markup hr,
.ui.divider {
  border: none !important;
  border-top: 1px solid rgba(104, 157, 106, 0.3) !important;
  background: none !important;
  height: 0 !important;
  margin: 2rem 0 !important;
}

.markup table,
.ui.table {
  border: 1px solid rgba(104, 157, 106, 0.35) !important;
}

.markup table th,
.markup table td,
.ui.table th,
.ui.table td {
  border-color: rgba(104, 157, 106, 0.2) !important;
}

/* Gitea/Forgejo Default Emoji Hue Filters (Color adjustments for dark themes) */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
  filter: invert(100%) hue-rotate(180deg);
}

/* Repository Tab Menu Navigation Active Styling */
.repo-navigation .ui.tabular.menu .item.active,
.repo-navigation .ui.menu .item.active,
.ui.tabular.menu .active.item,
.ui.menu .active.item {
  color: var(--gruvbox-aqua-b) !important;
  border-bottom: 2px solid var(--gruvbox-aqua-b) !important;
  background: none !important;
}

.repo-navigation .ui.tabular.menu .item.active svg,
.repo-navigation .ui.menu .item.active svg,
.ui.tabular.menu .active.item svg,
.ui.menu .active.item svg {
  color: var(--gruvbox-aqua-b) !important;
}