/* ==========================================================================
   GITEA CUSTOM THEME — OLED Dark
   True-black OLED-optimized dark theme with blue accent.
   Sections: Variables | Background | Base | Navigation | Repository |
             Code/Chroma | Admonitions | Mermaid | Forms | Animations
   ========================================================================== */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* ── Base Palette — OLED Black ── */
  --color-bg-primary:      #000000;
  --color-bg-surface:      #0B0F14;
  --color-bg-tertiary:     #11161D;
  --color-bg-elevated:     #161B22;
  --color-bg-hover:        #1C232B;
  --color-bg-active:       #27313A;

  /* ── Borders ── */
  --color-border:          #27313A;
  --color-border-light:    #1C232B;
  --color-border-focus:    #3D8BFF;

  /* ── Text ── */
  --color-text-primary:    #E6EDF3;
  --color-text-secondary:  #AAB4BE;
  --color-text-muted:      #6E7681;
  --color-text-link:       #3D8BFF;
  --color-text-link-hover: #5BA3FF;

  /* ── Accent — Blue ── */
  --color-accent:          #3D8BFF;
  --color-accent-light:    #5BA3FF;
  --color-accent-hover:    #2F6FE4;
  --color-accent-active:   #265BCF;
  --color-accent-bg:       rgba(61, 139, 255, 0.10);

  /* ── Semantic ── */
  --color-success:         #2ECC71;
  --color-warning:         #E6A700;
  --color-error:           #FF4D4D;
  --color-info:            #4DA6FF;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.7);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.8);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.9);

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ── Tech grid ── */
  --grid-color: rgba(61, 139, 255, 0.02);
  --grid-size:  60px;
  --glow-color: rgba(61, 139, 255, 0.03);

  /* ── Contribution Heatmap ── */
  --color-heatmap-0: #0B0F14;
  --color-heatmap-1: #0D2E5E;
  --color-heatmap-2: #1A4B8F;
  --color-heatmap-3: #2F6FE4;
  --color-heatmap-4: #3D8BFF;
  --color-heatmap-5: #5BA3FF;

  /* ── Gitea Built-in Variables (required for heatmap + components) ──
     Heatmap ramp order: secondary-alpha-60 (none) → light-4 (least) →
     light-2 → primary → dark-2 → dark-4 (most contributions).
     On dark bg, light-4 = dim, dark-4 = bright/vivid. ── */
  --color-primary:          #3D8BFF;
  --color-primary-dark-2:   #5BA3FF;
  --color-primary-dark-4:   #80BFFF;
  --color-primary-light-2:  #2F6FE4;
  --color-primary-light-4:  #0D2E5E;
  --color-primary-alpha-20: rgba(61, 139, 255, 0.20);
  --color-primary-alpha-40: rgba(61, 139, 255, 0.40);
  --color-primary-alpha-60: rgba(61, 139, 255, 0.60);
  --color-secondary-alpha-60: rgba(28, 35, 43, 0.60);
  --color-secondary:        #1C232B;
  --color-secondary-dark-2: #0B0F14;

  /* ── Glass surfaces ── */
  --glass-bg:        rgba(11, 15, 20, 0.60);
  --glass-bg-heavy:  rgba(11, 15, 20, 0.82);
  --glass-bg-solid:    #070a0d;
  --glass-bg-heavy-solid: #090c10;
  --glass-blur:      12px;
  --glass-blur-heavy: 20px;

  /* ── Gradient mouse colors ── */
  --mouse-color-a: rgba(61, 139, 255, 0.06);
  --mouse-color-b: rgba(77, 166, 255, 0.04);
}


/* ==========================================================================
   2. BACKGROUND ANIMATION (CSS-only base)
   The particle canvas + mouse effect is handled by JS (footer.tmpl).
   This layer provides the subtle grid + gradient foundation.
   ========================================================================== */

/* Base OLED black background */
body {
  background-color: var(--color-bg-primary) !important;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(61, 139, 255, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(77, 166, 255, 0.015) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(61, 139, 255, 0.015) 0%, transparent 40%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--color-text-primary);
}

/* Animated tech grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  pointer-events: none;
  z-index: 0;
  animation: gridPulse 10s ease-in-out infinite;
}

/* Floating ambient glow orb */
body::after {
  content: '';
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-color), transparent 70%);
  top: 20%;
  left: 30%;
  pointer-events: none;
  z-index: 0;
  animation: floatOrb 20s ease-in-out infinite;
  filter: blur(40px);
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

@keyframes floatOrb {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(100px, -60px) scale(1.1); }
  50%  { transform: translate(-50px, 80px) scale(0.9); }
  75%  { transform: translate(80px, 40px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Ensure content stays above background layers */
body > *:not(#tech-canvas) {
  position: relative;
  z-index: 1;
}

/* Canvas for JS particle effect (injected by footer.tmpl) */
#tech-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}


/* ==========================================================================
   3. BASE ELEMENTS & TYPOGRAPHY
   ========================================================================== */

/* General surfaces — glassmorphic */
.ui.segment,
.ui.attached.segment,
.ui.secondary.segment {
  background: var(--glass-bg-solid) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Cards — glassmorphic */
.ui.card,
.ui.cards > .card {
  background: var(--glass-bg-solid) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.ui.card:hover,
.ui.cards > .card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-accent) !important;
}

/* Links */
a {
  color: var(--color-text-link);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-text-link-hover);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.ui.header {
  color: var(--color-text-primary) !important;
}

/* Dividers */
.ui.divider {
  border-color: var(--color-border) !important;
}

/* Labels */
.ui.label {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-sm) !important;
}

/* Tables — glassmorphic */
.ui.table {
  background: var(--glass-bg-solid) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-light) !important;
}
.ui.table thead th {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.ui.table tbody td {
  border-top: 1px solid var(--color-border-light) !important;
}
.ui.table tbody tr:hover {
  background: var(--color-bg-hover) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-bg-active);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Selection */
::selection {
  background: rgba(61, 139, 255, 0.3);
  color: #fff;
}


/* ==========================================================================
   4. NAVIGATION & HEADER
   ========================================================================== */

/* Top navbar — glassmorphic */
.ui.top.menu,
#navbar,
.ui.secondary.pointing.menu {
  background: var(--glass-bg-heavy-solid) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-sm) !important;
}

.ui.top.menu .item,
#navbar .item {
  color: var(--color-text-secondary) !important;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.ui.top.menu .item:hover,
#navbar .item:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-bg-hover) !important;
}

.ui.top.menu .item.active,
#navbar .item.active,
.ui.secondary.pointing.menu .item.active {
  color: var(--color-accent-light) !important;
  border-color: var(--color-accent) !important;
}

/* Dropdown menus — glassmorphic */
.ui.dropdown .menu,
.ui.pointing.dropdown > .menu,
.tippy-box,
.tippy-content {
  background: var(--glass-bg-heavy) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.ui.dropdown .menu > .item,
.tippy-content .item {
  color: var(--color-text-secondary) !important;
  transition: background var(--transition-fast);
}

.ui.dropdown .menu > .item:hover,
.tippy-content .item:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

/* Sidebar — glassmorphic */
.ui.sidebar,
.ui.vertical.menu {
  background: var(--glass-bg-heavy-solid) !important;
  border-right: 1px solid var(--color-border-light) !important;
}

.ui.vertical.menu .item {
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-sm);
}

.ui.vertical.menu .item:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

.ui.vertical.menu .item.active {
  background: var(--color-accent-bg) !important;
  color: var(--color-accent-light) !important;
}

/* Tabs */
.ui.tabular.menu {
  border-bottom-color: var(--color-border) !important;
}

.ui.tabular.menu .item {
  color: var(--color-text-secondary) !important;
  border: none !important;
  transition: color var(--transition-fast);
}

.ui.tabular.menu .item:hover {
  color: var(--color-text-primary) !important;
}

.ui.tabular.menu .item.active {
  color: var(--color-accent-light) !important;
  border-bottom: 2px solid var(--color-accent) !important;
  background: transparent !important;
}


/* ==========================================================================
   5. REPOSITORY & CONTENT PAGES
   ========================================================================== */

/* Repository header — glassmorphic */
.repository .header-wrapper {
  background: var(--glass-bg-solid) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

/* File list */
#repo-files-table .name {
  color: var(--color-text-link) !important;
}

/* File header bar */
.file-header {
  background: var(--color-bg-elevated) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Commit list */
#commits-table td,
#commits-table th {
  border-color: var(--color-border-light) !important;
}

/* Diff view */
.diff-file-box {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  margin-bottom: 16px;
}

.diff-file-header {
  background: var(--color-bg-elevated) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.diff-line-add {
  background: rgba(46, 204, 113, 0.08) !important;
}

.diff-line-del {
  background: rgba(255, 77, 77, 0.08) !important;
}

/* Issue / PR lists */
.issue.list > .item {
  border-bottom: 1px solid var(--color-border-light) !important;
  padding: 12px 0 !important;
  transition: background var(--transition-fast);
}

.issue.list > .item:hover {
  background: var(--color-bg-hover) !important;
}

/* Comments — glassmorphic */
.timeline-item .comment-container {
  background: var(--glass-bg-solid) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-md) !important;
}

.timeline-item .comment-header {
  background: var(--color-bg-elevated) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

/* Milestone / project bars */
.ui.progress {
  background: var(--color-bg-elevated) !important;
  border-radius: var(--radius-sm) !important;
}

.ui.progress .bar {
  background: var(--color-accent) !important;
  border-radius: var(--radius-sm) !important;
}

/* Markdown body */
.markup,
.markdown {
  color: var(--color-text-primary) !important;
}

.markup h1, .markup h2, .markup h3,
.markup h4, .markup h5, .markup h6 {
  border-bottom-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.markup blockquote {
  border-left: 3px solid var(--color-accent) !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-bg-elevated) !important;
  padding: 8px 16px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

.markup hr {
  border-color: var(--color-border) !important;
}

.markup img {
  border-radius: var(--radius-sm);
}

/* Code blocks in markdown */
.markup code,
.markup tt {
  background: var(--color-bg-elevated) !important;
  color: #79C0FF !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.9em;
}

.markup pre {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  overflow-x: auto;
}

.markup pre code {
  background: transparent !important;
  padding: 0 !important;
  color: var(--color-text-primary) !important;
}


/* ==========================================================================
   6. CODE & SYNTAX HIGHLIGHTING (CHROMA)
   Full dark-theme token map for Gitea's Chroma highlighter.
   ========================================================================== */

/* Container */
.chroma        { background-color: var(--color-bg-elevated); color: var(--color-text-primary); border-radius: var(--radius-md); }

/* Line machinery */
.chroma .lntd  { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: 100%; }
.chroma .hl    { background-color: rgba(61, 139, 255, 0.08); display: block; }
.chroma .lnt   { color: var(--color-text-muted); padding: 0 0.6em 0 0.4em; }
.chroma .ln    { color: var(--color-text-muted); padding: 0 0.6em 0 0.4em; }

/* ── Keywords ── */
.chroma .k     { color: #3D8BFF; font-weight: 600; }     /* Keyword */
.chroma .kc    { color: #3D8BFF; font-weight: 600; }     /* KeywordConstant */
.chroma .kd    { color: #3D8BFF; font-weight: 600; }     /* KeywordDeclaration */
.chroma .kn    { color: #3D8BFF; font-weight: 600; }     /* KeywordNamespace */
.chroma .kp    { color: #3D8BFF; }                        /* KeywordPseudo */
.chroma .kr    { color: #3D8BFF; font-weight: 600; }     /* KeywordReserved */
.chroma .kt    { color: #79C0FF; }                        /* KeywordType */

/* ── Names ── */
.chroma .n     { color: #E6EDF3; }       /* Name */
.chroma .na    { color: #79C0FF; }       /* NameAttribute */
.chroma .nb    { color: #79C0FF; }       /* NameBuiltin */
.chroma .bp    { color: #79C0FF; }       /* NameBuiltinPseudo */
.chroma .nc    { color: #7DDBA0; font-weight: 600; } /* NameClass */
.chroma .no    { color: #FF7B72; }       /* NameConstant */
.chroma .nd    { color: #D2A8FF; }       /* NameDecorator */
.chroma .ni    { color: #E6A700; }       /* NameEntity */
.chroma .ne    { color: #FF7B72; font-weight: 600; } /* NameException */
.chroma .nf    { color: #79C0FF; }       /* NameFunction */
.chroma .fm    { color: #79C0FF; }       /* NameFunctionMagic */
.chroma .nl    { color: #E6EDF3; font-weight: 600; } /* NameLabel */
.chroma .nn    { color: #E6EDF3; }       /* NameNamespace */
.chroma .nx    { color: #E6EDF3; }       /* NameOther */
.chroma .py    { color: #E6EDF3; }       /* NameProperty */
.chroma .nt    { color: #FF7B72; }       /* NameTag */
.chroma .nv    { color: #FFA657; }       /* NameVariable */
.chroma .vc    { color: #FFA657; }       /* NameVariableClass */
.chroma .vg    { color: #FFA657; }       /* NameVariableGlobal */
.chroma .vi    { color: #FFA657; }       /* NameVariableInstance */
.chroma .vm    { color: #FFA657; }       /* NameVariableMagic */

/* ── Literals & Strings ── */
.chroma .l     { color: #A5D6FF; }       /* Literal */
.chroma .ld    { color: #A5D6FF; }       /* LiteralDate */
.chroma .s     { color: #A5D6FF; }       /* LiteralString */
.chroma .sa    { color: #A5D6FF; }       /* StringAffix */
.chroma .sb    { color: #A5D6FF; }       /* StringBacktick */
.chroma .sc    { color: #A5D6FF; }       /* StringChar */
.chroma .dl    { color: #A5D6FF; }       /* StringDelimiter */
.chroma .sd    { color: #A5D6FF; }       /* StringDoc */
.chroma .s2    { color: #A5D6FF; }       /* StringDouble */
.chroma .se    { color: #FFA657; }       /* StringEscape */
.chroma .sh    { color: #A5D6FF; }       /* StringHeredoc */
.chroma .si    { color: #3D8BFF; }       /* StringInterpol */
.chroma .sx    { color: #A5D6FF; }       /* StringOther */
.chroma .sr    { color: #79C0FF; }       /* StringRegex */
.chroma .s1    { color: #A5D6FF; }       /* StringSingle */
.chroma .ss    { color: #A5D6FF; }       /* StringSymbol */

/* ── Numbers ── */
.chroma .m     { color: #E6A700; }       /* Number */
.chroma .mb    { color: #E6A700; }       /* NumberBin */
.chroma .mf    { color: #E6A700; }       /* NumberFloat */
.chroma .mh    { color: #E6A700; }       /* NumberHex */
.chroma .mi    { color: #E6A700; }       /* NumberInteger */
.chroma .il    { color: #E6A700; }       /* NumberIntegerLong */
.chroma .mo    { color: #E6A700; }       /* NumberOct */

/* ── Operators & Punctuation ── */
.chroma .o     { color: #AAB4BE; }       /* Operator */
.chroma .ow    { color: #3D8BFF; font-weight: 600; } /* OperatorWord */
.chroma .p     { color: #AAB4BE; }       /* Punctuation */

/* ── Comments ── */
.chroma .c     { color: #6E7681; font-style: italic; } /* Comment */
.chroma .ch    { color: #6E7681; font-style: italic; } /* CommentHashbang */
.chroma .cm    { color: #6E7681; font-style: italic; } /* CommentMultiline */
.chroma .c1    { color: #6E7681; font-style: italic; } /* CommentSingle */
.chroma .cs    { color: #6E7681; font-style: italic; font-weight: 600; } /* CommentSpecial */
.chroma .cp    { color: #AAB4BE; font-weight: 600; }   /* CommentPreproc */
.chroma .cpf   { color: #AAB4BE; }                      /* CommentPreprocFile */

/* ── Generic ── */
.chroma .g     { color: #E6EDF3; }
.chroma .gd    { color: #FF7B72; background: rgba(255, 77, 77, 0.08); } /* Deleted */
.chroma .ge    { font-style: italic; }                 /* Emph */
.chroma .gh    { color: #E6EDF3; font-weight: 600; }   /* Heading */
.chroma .gi    { color: #7DDBA0; background: rgba(46, 204, 113, 0.08); } /* Inserted */
.chroma .go    { color: #AAB4BE; }                      /* Output */
.chroma .gp    { color: #AAB4BE; }                      /* Prompt */
.chroma .gs    { font-weight: 700; }                    /* Strong */
.chroma .gu    { color: #AAB4BE; font-weight: 600; }   /* Subheading */
.chroma .gt    { color: #FF7B72; }                      /* Traceback */
.chroma .gl    { text-decoration: underline; }          /* Underline */
.chroma .w     { color: #6E7681; }                      /* Whitespace */

/* ── Error ── */
.chroma .err   { color: #FF7B72; }

/* Code view line numbers */
.code-view .lines-num span::after {
  color: var(--color-text-muted) !important;
}

.code-view .lines-code {
  background: var(--color-bg-elevated) !important;
}


/* ==========================================================================
   7. ADMONITIONS  (GitHub-style alerts: NOTE, TIP, WARNING, CAUTION, IMPORTANT)
   Supports both Gitea attention classes and generic admonition wrappers.
   ========================================================================== */

/* ── Shared base ── */
.markdown-alert,
.attention-header + div,
blockquote.attention-note,
blockquote.attention-tip,
blockquote.attention-warning,
blockquote.attention-caution,
blockquote.attention-important,
.admonition {
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  border-left: 4px solid !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* ── NOTE (blue) ── */
.markdown-alert-note,
blockquote.attention-note,
.admonition.note,
.admonition.info {
  background: rgba(61, 139, 255, 0.06) !important;
  border-left-color: #3D8BFF !important;
}
.markdown-alert-note .markdown-alert-title,
blockquote.attention-note .attention-header,
.admonition.note .admonition-title,
.admonition.info .admonition-title {
  color: #3D8BFF !important;
  font-weight: 600;
}

/* ── TIP (green) ── */
.markdown-alert-tip,
blockquote.attention-tip,
.admonition.tip,
.admonition.hint {
  background: rgba(46, 204, 113, 0.06) !important;
  border-left-color: #2ECC71 !important;
}
.markdown-alert-tip .markdown-alert-title,
blockquote.attention-tip .attention-header,
.admonition.tip .admonition-title,
.admonition.hint .admonition-title {
  color: #2ECC71 !important;
  font-weight: 600;
}

/* ── WARNING (amber) ── */
.markdown-alert-warning,
blockquote.attention-warning,
.admonition.warning {
  background: rgba(230, 167, 0, 0.06) !important;
  border-left-color: #E6A700 !important;
}
.markdown-alert-warning .markdown-alert-title,
blockquote.attention-warning .attention-header,
.admonition.warning .admonition-title {
  color: #E6A700 !important;
  font-weight: 600;
}

/* ── CAUTION (red) ── */
.markdown-alert-caution,
blockquote.attention-caution,
.admonition.caution,
.admonition.danger {
  background: rgba(255, 77, 77, 0.06) !important;
  border-left-color: #FF4D4D !important;
}
.markdown-alert-caution .markdown-alert-title,
blockquote.attention-caution .attention-header,
.admonition.caution .admonition-title,
.admonition.danger .admonition-title {
  color: #FF4D4D !important;
  font-weight: 600;
}

/* ── IMPORTANT (purple) ── */
.markdown-alert-important,
blockquote.attention-important,
.admonition.important {
  background: rgba(167, 139, 250, 0.06) !important;
  border-left-color: #A78BFA !important;
}
.markdown-alert-important .markdown-alert-title,
blockquote.attention-important .attention-header,
.admonition.important .admonition-title {
  color: #A78BFA !important;
  font-weight: 600;
}

/* Admonition title row icon alignment */
.markdown-alert-title,
.attention-header,
.admonition-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}

/* Admonition body text */
.markdown-alert p,
.admonition p {
  color: var(--color-text-secondary) !important;
  margin: 4px 0 !important;
}

/* Admonition SVG icons inherit title color */
.markdown-alert-title svg,
.attention-header svg,
.admonition-title svg {
  fill: currentColor !important;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ==========================================================================
   8. MERMAID DIAGRAMS
   Dark-theme overrides for mermaid-js rendered diagrams.
   ========================================================================== */

/* Container */
.mermaid,
.markup .mermaid,
pre code.language-mermaid {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  text-align: center;
  overflow-x: auto;
}

/* Force dark palette on mermaid internals */
.mermaid .node rect,
.mermaid .node polygon,
.mermaid .node circle,
.mermaid .node ellipse {
  fill: var(--color-bg-surface) !important;
  stroke: var(--color-accent) !important;
  stroke-width: 1.5px !important;
}

.mermaid .node .label,
.mermaid .nodeLabel,
.mermaid text {
  fill: var(--color-text-primary) !important;
  color: var(--color-text-primary) !important;
  font-family: inherit !important;
}

.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: var(--color-text-muted) !important;
  stroke-width: 1.5px !important;
}

.mermaid .arrowheadPath {
  fill: var(--color-text-muted) !important;
}

.mermaid .cluster rect {
  fill: var(--color-bg-elevated) !important;
  stroke: var(--color-border) !important;
}

.mermaid .cluster text {
  fill: var(--color-text-secondary) !important;
}

/* Sequence diagrams */
.mermaid .actor {
  fill: var(--color-bg-surface) !important;
  stroke: var(--color-accent) !important;
}

.mermaid .actor text,
.mermaid text.actor {
  fill: var(--color-text-primary) !important;
}

.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: var(--color-text-muted) !important;
}

.mermaid .messageText {
  fill: var(--color-text-primary) !important;
}

.mermaid .loopText,
.mermaid .noteText {
  fill: var(--color-text-primary) !important;
}

.mermaid .loopLine {
  stroke: var(--color-border) !important;
}

.mermaid .note {
  fill: var(--color-bg-elevated) !important;
  stroke: var(--color-accent) !important;
}

.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
  fill: var(--color-accent-bg) !important;
  stroke: var(--color-accent) !important;
}

/* Gantt chart */
.mermaid .section0,
.mermaid .section1 {
  fill: var(--color-bg-surface) !important;
}

.mermaid .task {
  fill: var(--color-accent) !important;
  stroke: var(--color-accent-light) !important;
}

.mermaid .taskText {
  fill: #fff !important;
}

/* Pie chart */
.mermaid .pieCircle {
  stroke: var(--color-bg-primary) !important;
  stroke-width: 2px !important;
}

/* Class diagram */
.mermaid .classGroup rect {
  fill: var(--color-bg-surface) !important;
  stroke: var(--color-accent) !important;
}

.mermaid .classGroup text {
  fill: var(--color-text-primary) !important;
}

.mermaid .relation {
  stroke: var(--color-text-muted) !important;
}

/* State diagram */
.mermaid .stateGroup rect,
.mermaid .statediagram-state rect {
  fill: var(--color-bg-surface) !important;
  stroke: var(--color-accent) !important;
}

/* Git graph */
.mermaid .commit-id text,
.mermaid .branch-label text {
  fill: var(--color-text-primary) !important;
}

/* Mermaid initialize override for Gitea dark theme */
.is-loading .mermaid {
  visibility: hidden;
}


/* ==========================================================================
   9. FORMS, BUTTONS & INPUTS
   ========================================================================== */

/* Text inputs & textarea */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
.ui.input input,
.ui.form input:not([type]),
.ui.form textarea,
.ui.form select {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px var(--color-accent-bg) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted) !important;
}

/* Buttons — primary */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  font-weight: 500;
}

.ui.primary.button:hover {
  background: var(--color-accent-hover) !important;
  box-shadow: 0 0 12px rgba(61, 139, 255, 0.3) !important;
}

/* Buttons — default / basic */
.ui.button,
.ui.basic.button {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ui.button:hover,
.ui.basic.button:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

/* Buttons — negative / red */
.ui.negative.button,
.ui.red.button {
  background: var(--color-error) !important;
  color: #fff !important;
  border: none !important;
}

/* Buttons — positive / green */
.ui.positive.button,
.ui.green.button {
  background: var(--color-success) !important;
  color: #000 !important;
  border: none !important;
}

/* Checkbox & radio */
.ui.checkbox label,
.ui.radio.checkbox label {
  color: var(--color-text-secondary) !important;
}


/* ==========================================================================
   10. MODALS & POPUPS
   ========================================================================== */

.ui.modal,
.ui.modal > .content,
.ui.modal > .actions {
  background: var(--glass-bg-heavy) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  color: var(--color-text-primary) !important;
}

.ui.modal > .header {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.ui.modal > .actions {
  border-top: 1px solid var(--color-border) !important;
}

.ui.dimmer {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(4px);
}

/* Popup / tooltip — glassmorphic */
.ui.popup {
  background: var(--glass-bg-heavy) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-md) !important;
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

footer,
.footer {
  background: var(--glass-bg-heavy-solid) !important;
  border-top: 1px solid var(--color-border-light) !important;
  color: var(--color-text-muted) !important;
}

footer a,
.footer a {
  color: var(--color-text-secondary) !important;
}

footer a:hover,
.footer a:hover {
  color: var(--color-accent-light) !important;
}


/* ==========================================================================
   12. TOAST / FLASH MESSAGES
   ========================================================================== */

.ui.message {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

.ui.negative.message,
.ui.error.message {
  background: rgba(255, 77, 77, 0.08) !important;
  border-color: var(--color-error) !important;
  color: #FF8080 !important;
}

.ui.positive.message,
.ui.success.message {
  background: rgba(46, 204, 113, 0.08) !important;
  border-color: var(--color-success) !important;
  color: #5DDEAA !important;
}

.ui.warning.message {
  background: rgba(230, 167, 0, 0.08) !important;
  border-color: var(--color-warning) !important;
  color: #F0D56B !important;
}

.ui.info.message {
  background: rgba(77, 166, 255, 0.08) !important;
  border-color: var(--color-info) !important;
  color: #80BFFF !important;
}


/* ==========================================================================
   13. MISC GITEA-SPECIFIC OVERRIDES
   ========================================================================== */

/* Dashboard */
.dashboard .news .news-item .commit-id {
  color: var(--color-accent-light) !important;
}

/* Empty state */
.empty-placeholder {
  color: var(--color-text-muted) !important;
}

/* Avatar ring on hover */
.ui.avatar img {
  border-radius: 50%;
  transition: box-shadow var(--transition-base);
}
.ui.avatar img:hover {
  box-shadow: 0 0 0 2px var(--color-accent-bg), 0 0 8px rgba(61, 139, 255, 0.2);
}

/* Clone / download button area */
.clone-panel {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}

/* Organization page */
.organization .org-avatar img {
  border-radius: var(--radius-md);
}

/* Wiki */
.wiki-content-main {
  background: var(--color-bg-surface) !important;
}

/* Admin pages */
.admin .ui.table {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

/* Emoji picker */
.emoji-picker {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
}

/* Tag / release */
.release-list .release-tag-name {
  color: var(--color-accent-light) !important;
}

/* Pagination */
.ui.pagination.menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ui.pagination.menu .item {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
}

.ui.pagination.menu .item.active {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}

.ui.pagination.menu .item:hover:not(.active) {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

/* Notification dot */
.notification_count {
  background: var(--color-accent) !important;
}

/* Loading bar */
#nprogress .bar {
  background: var(--color-accent) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--color-accent), 0 0 5px var(--color-accent) !important;
}


/* ==========================================================================
   13b. CONTRIBUTION HEATMAP
   Gitea uses vue3-calendar-heatmap with --color-primary-* CSS vars.
   Those are defined in section 1. Additional SVG/DOM overrides below.
   ========================================================================== */

/* Heatmap container — transparent so animation shows */
.heatmap,
.activity-overview {
  background: transparent !important;
}

/* The vue3-calendar-heatmap legend and container */
.vch__container {
  background: transparent !important;
}

/* Override any leftover inline rect fill to use our palette */
.vch__container rect {
  rx: 2 !important;
  ry: 2 !important;
}

/* Heatmap text labels (months, weekdays) */
.vch__container text,
.heatmap text {
  fill: var(--color-text-muted) !important;
  font-size: 10px;
}

/* Heatmap tooltip (tippy-based) */
.heatmap .svg-tip,
.heatmap-tooltip,
.vch__tooltip {
  background: var(--glass-bg-heavy) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px;
}

/* Force external legend to show our palette */
.vch__external-legend-wrapper rect:nth-child(1) { fill: var(--color-secondary-alpha-60) !important; }
.vch__external-legend-wrapper rect:nth-child(2) { fill: var(--color-primary-light-4) !important; }
.vch__external-legend-wrapper rect:nth-child(3) { fill: var(--color-primary-light-2) !important; }
.vch__external-legend-wrapper rect:nth-child(4) { fill: var(--color-primary) !important; }
.vch__external-legend-wrapper rect:nth-child(5) { fill: var(--color-primary-dark-2) !important; }
.vch__external-legend-wrapper rect:nth-child(6) { fill: var(--color-primary-dark-4) !important; }


/* ==========================================================================
   14. SUBTLE ANIMATIONS & TRANSITIONS
   A few tasteful motion details — nothing flashy.
   ========================================================================== */

/* Cards / segments lift slightly on hover */
.ui.card,
.ui.segment,
.diff-file-box,
.timeline-item .comment-container {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.ui.card:hover,
.diff-file-box:hover {
  transform: translateY(-1px);
}

/* Nav items subtle underline slide */
.ui.secondary.pointing.menu .item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base), left var(--transition-base);
}

.ui.secondary.pointing.menu .item:hover::after,
.ui.secondary.pointing.menu .item.active::after {
  width: 100%;
  left: 0;
}

/* Smooth fade-in for page content */
.page-content {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accent glow on focused primary buttons */
.ui.primary.button:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-bg), 0 0 16px rgba(61, 139, 255, 0.25) !important;
  outline: none;
}

/* Link hover underline animation */
.markup a,
.markdown a {
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent-light), var(--color-accent-light));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--transition-base);
}

.markup a:hover,
.markdown a:hover {
  background-size: 100% 1px;
}


/* ==========================================================================
   15. Z-INDEX & STACKING CONTEXT FIX
   backdrop-filter has been removed from all container elements above.
   This section ensures all overlay elements stack correctly.
   ========================================================================== */

/* -- Stacking scale --
   content:    auto  (no stacking context on containers)
   navbar:     100
   dropdowns:  1000
   popups:     1100
   tooltips:   1200
   dimmer:     1250
   modals:     1300
   toasts:     1400
   nprogress:  1500
   -- */

/* ── Navbar: above content, below overlays ── */
.ui.top.menu,
#navbar {
  position: relative;
  z-index: 100 !important;
}

/* ── Repo header ── */
.repository .header-wrapper {
  position: relative;
  z-index: 100 !important;
}

/* ── Dropdown menus ── */
.ui.dropdown .menu,
.ui.pointing.dropdown > .menu,
.ui.dropdown.active > .menu,
.ui.dropdown.visible > .menu,
.ui.selection.dropdown .menu,
.ui.search.dropdown .menu,
.ui.active.dropdown > .menu,
.ui.visible.dropdown > .menu,
.ui.floating.dropdown .menu,
.menu.transition {
  z-index: 1000 !important;
}

/* Active dropdowns must create stacking context above siblings */
.ui.dropdown.active,
.ui.dropdown.visible,
.ui.dropdown.selected {
  z-index: 1000 !important;
  position: relative;
}

/* Sub-menus inside dropdowns */
.ui.dropdown .menu .menu,
.ui.dropdown .menu > .menu {
  z-index: 1001 !important;
}

/* ── Popup / Tooltip overlays ── */
.ui.popup {
  z-index: 1100 !important;
}

/* Tippy.js tooltips (portaled to body) */
.tippy-box,
[data-tippy-root],
.tippy-popper {
  z-index: 1200 !important;
}

/* ── Modal & Dimmer ── */
.ui.dimmer {
  z-index: 1250 !important;
}

.ui.modal,
.ui.small.modal,
.ui.tiny.modal,
.ui.large.modal,
.ui.fullscreen.modal {
  z-index: 1300 !important;
}

/* ── Toast / flash notifications ── */
.ui.message.toast,
.toast-container,
.ui.toast-container {
  z-index: 1400 !important;
}

/* ── Loading bar ── */
#nprogress {
  z-index: 1500 !important;
}

/* ── Emoji picker ── */
.emoji-picker {
  z-index: 1100 !important;
}

/* ── Color/date picker overlays ── */
.color-picker,
.daterangepicker,
.flatpickr-calendar {
  z-index: 1100 !important;
}

/* ── Search results ── */
.ui.search > .results,
.search-result-container {
  z-index: 1000 !important;
}

/* ── Gitea-specific action menus ── */
.issue-actions .dropdown .menu,
.comment-container .dropdown .menu,
.diff-file-header .dropdown .menu,
.repo-button-row .dropdown .menu,
.issue-filters .dropdown .menu,
.branch-selector-dropdown .menu,
.filter.menu .menu,
.select-label .menu,
.select-milestone .menu,
.select-assignees .menu,
.select-reviewers .menu,
.select-projects-dropdown .menu {
  z-index: 1000 !important;
}

/* ── Prevent containers from creating unwanted stacking contexts ── */
.ui.segment,
.ui.attached.segment,
.ui.secondary.segment,
.ui.card,
.ui.cards > .card,
.ui.table,
.timeline-item .comment-container,
.markup,
.markdown {
  z-index: auto;
}

/* ── Gitea tab/secondary menus that contain dropdowns ── */
.ui.secondary.pointing.menu {
  position: relative;
  z-index: 50 !important;
}

/* ── Ensure diff file boxes don't trap overlays ── */
.diff-file-box {
  overflow: visible !important;
}
.diff-file-header {
  overflow: visible !important;
}