/* ==========================================================================
   Tim GitHub - a dark Gitea theme.

     UI    : GitHub (Primer) dark, verified against
             @primer/primitives dist/css/functional/themes/dark.css
     Code  : One Dark Pro

   This file is the source of truth - edit it directly.

   Variable list comes from Gitea's built-in dark theme (so nothing is left
   undefined); values come from the GitHub Dark theme, with var() chains
   flattened to literals.
   263 of 295 values are GitHub's; the remaining 32 fall
   back to Gitea's built-in dark, which GitHub Dark never defined.

   Filename must stay theme-<name>.css - Gitea derives the theme id from it.
   ========================================================================== */

gitea-theme-meta-info {
  --theme-display-name: "Tim GitHub";
  --theme-color-scheme: "dark";
}

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

  /* ---- Sizing. Not colour, but Gitea's index.css both defines and
     reads these, so overriding them here is still the safe layer. ---- */
  /* Gitea default 4px; GitHub uses 6px. index.css reads this 134x, so this */
  /* one line rounds the whole UI correctly. */
  --border-radius: 6px;
  /* Gitea's designed hook for the proportional stack. GitHub's own stack. */
  --fonts-override: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;

  /* ---- Tokens Gitea has no variable for at all. Consumed by the
     hand-written rules below: GitHub uses a separate green for
     primary actions, distinct from its blue link accent. ---- */
  --tim-button-primary-bg: #347d39;
  --tim-button-primary-bg-hover: #46954a;
  --tim-button-primary-fg: #ffffff;
  --tim-button-primary-border: #ffffff26;
  /* Primer --underlineNav-borderColor-active. Gitea has no
     equivalent variable, so it lives here. */
  --tim-tab-active-border: #ec775c;

  /* GitHub's neutral translucent overlays, used for hover and
     selected states on menu items, icon buttons and title chips.
     Distinct from --color-hover, which is opaque. */
  --tim-overlay-hover: #656c7626;
  --tim-overlay-selected: #656c761a;
  /* focus ring / active-item marker */
  --tim-focus-border: #4184e4;
  /* dropdown panels use a larger radius than the 6px base */
  --tim-menu-radius: 12px;

  /* ---- Primary accent - links, active states, focus rings ---- */
  --color-primary:          #478be6;
  --color-primary-contrast: #d1d7e0;
  --color-primary-dark-1:   #5d99e9;
  --color-primary-dark-2:   #73a7ec;
  --color-primary-dark-3:   #89b5ef;
  --color-primary-dark-4:   #a0c3f2;
  --color-primary-dark-5:   #b5d1f5;
  --color-primary-dark-6:   #ccdff8;
  --color-primary-dark-7:   #e2edfb;
  --color-primary-light-1:  #376bb1;
  --color-primary-light-2:  #2a5389;
  --color-primary-light-3:  #244673;
  --color-primary-light-4:  #1d395e;
  --color-primary-light-5:  #162c49;
  --color-primary-light-6:  #0f1e32;
  --color-primary-light-7:  #09111d;
  --color-primary-alpha-10: #478be61a;
  --color-primary-alpha-20: #478be633;
  --color-primary-alpha-30: #478be64d;
  --color-primary-alpha-40: #478be666;
  --color-primary-alpha-50: #478be680;
  --color-primary-alpha-60: #478be699;
  --color-primary-alpha-70: #478be6b3;
  --color-primary-alpha-80: #478be6cc;
  --color-primary-alpha-90: #478be6e6;
  --color-primary-hover:    #1f7ef7;
  --color-primary-active:   #096ae7;

  /* ---- Secondary ramp - borders, muted buttons, dividers ---- */
  --color-secondary:          #3d444d;
  --color-secondary-dark-1:   #474f59;
  --color-secondary-dark-2:   #515a66;
  --color-secondary-dark-3:   #5b6572;
  --color-secondary-dark-4:   #64707f;
  --color-secondary-dark-5:   #6e7b8b;
  --color-secondary-dark-6:   #7a8696;
  --color-secondary-dark-7:   #8792a0;
  --color-secondary-dark-8:   #939da9;
  --color-secondary-dark-9:   #a0a8b3;
  --color-secondary-dark-10:  #acb4bd;
  --color-secondary-dark-11:  #b8bfc7;
  --color-secondary-dark-12:  #c5cad1;
  --color-secondary-dark-13:  #d5d9de;
  --color-secondary-light-1:  #32383f;
  --color-secondary-light-2:  #272c31;
  --color-secondary-light-3:  #1c1f23;
  --color-secondary-light-4:  #111316;
  --color-secondary-alpha-10: #3d444d1a;
  --color-secondary-alpha-20: #3d444d33;
  --color-secondary-alpha-30: #3d444d4d;
  --color-secondary-alpha-40: #3d444d66;
  --color-secondary-alpha-50: #3d444d80;
  --color-secondary-alpha-60: #3d444d99;
  --color-secondary-alpha-70: #3d444db3;
  --color-secondary-alpha-80: #3d444dcc;
  --color-secondary-alpha-90: #3d444de6;
  --color-secondary-button:   #64707f;
  --color-secondary-hover:    #5b6572;
  --color-secondary-active:   #515a66;
  --color-secondary-bg:       #2e3033;
  --color-secondary-nav-bg:   #212830;

  /* ---- Surfaces - canvas, boxes, nav, menus, inputs ---- */
  --color-body:                    #212830;
  --color-box-header:              #262c36;
  --color-box-body:                #212830;
  --color-box-body-highlight:      #4184e41a;
  --color-footer:                  #212830;
  --color-input-text:              #d1d7e0;
  --color-input-background:        #262c36;
  --color-input-toggle-background: #212830;
  --color-input-border:            #3d444d;
  --color-menu:                    #151b23;
  --color-card:                    #212830;
  --color-button:                  #2a313c;
  --color-code-bg:                 #161718;
  --color-expand-button:           #143d79;
  --color-project-column-bg:       #151b23;
  --color-nav-bg:                  #151b23;
  --color-nav-hover-bg:            #262c36;
  --color-nav-text:                #d1d7e0;

  /* ---- Text ---- */
  --color-text-dark:        #d1d7e0;
  --color-text:             #d1d7e0;
  --color-text-light:       #9198a1;
  --color-text-light-1:     #9198a1;
  --color-text-light-2:     #9198a1;
  --color-text-light-3:     #656c76;
  --color-placeholder-text: #656c76;

  /* ---- Interaction - hover, active, borders, shadows, overlays ---- */
  --color-timeline:              #3d444db3;
  --color-light:                 #212830;
  --color-light-border:          #3d444d;
  --color-hover:                 #2a313c;
  --color-hover-opaque:          #262c36;
  --color-active:                #656c761a;
  --color-shadow:                #151b2366;
  --color-shadow-opaque:         #151b2366;
  --color-editor-line-highlight: #05387a;
  --color-editor-selection:      #4183c480;
  --color-caret:                 #d1d7e0;
  --color-accent:                #1f7ef7;
  --color-small-accent:          #05387a;
  --color-overlay-backdrop:      #2a313c66;

  /* ---- Diff ---- */
  --color-diff-added-fg:           #87ab63;
  --color-diff-added-linenum-bg:   #57ab5a4d;
  --color-diff-added-row-bg:       #46954a26;
  --color-diff-added-row-border:   #46954a26;
  --color-diff-added-word-bg:      #46954a66;
  --color-diff-moved-row-bg:       #bb800926;
  --color-diff-moved-row-border:   #bb800926;
  --color-diff-removed-fg:         #cc4848;
  --color-diff-removed-linenum-bg: #e5534b4d;
  --color-diff-removed-row-bg:     #e5534b1a;
  --color-diff-removed-row-border: #e5534b1a;
  --color-diff-removed-word-bg:    #e5534b66;
  --color-diff-inactive:           #262c36;

  /* ---- Syntax highlighting ---- */
  --color-syntax-keyword:                #c678dd;
  --color-syntax-bool:                   #d19a66;
  --color-syntax-control:                #c678dd;
  --color-syntax-name:                   #61afef;
  --color-syntax-type:                   #e5c07b;
  --color-syntax-number:                 #d19a66;
  --color-syntax-operator:               #56b6c2;
  --color-syntax-regexp:                 #56b6c2;
  --color-syntax-string:                 #98c379;
  --color-syntax-comment:                #5c6370;
  --color-syntax-invalid:                #e06c75;
  --color-syntax-link:                   #61afef;
  --color-syntax-tag:                    #e06c75;
  --color-syntax-attribute:              #61afef;
  --color-syntax-property:               #e06c75;
  --color-syntax-variable:               #e06c75;
  --color-syntax-string-special:         #98c379;
  --color-syntax-escape:                 #56b6c2;
  --color-syntax-entity:                 #56b6c2;
  --color-syntax-preproc:                #c678dd;
  --color-syntax-preproc-file:           #98c379;
  --color-syntax-decorator:              #d19a66;
  --color-syntax-namespace:              #e5c07b;
  --color-syntax-name-pseudo:            #d19a66;
  --color-syntax-comment-special:        #5c6370;
  --color-syntax-text:                   #abb2bf;
  --color-syntax-text-alt:               #abb2bf;
  --color-syntax-punctuation:            #abb2bf;
  --color-syntax-whitespace:             #7f8699;
  --color-syntax-diff-fg:                #abb2bf;
  --color-syntax-deleted-bg:             #5f3737;
  --color-syntax-inserted-bg:            #3a523a;
  --color-syntax-emph:                   #c678dd;
  --color-syntax-strong:                 #c678dd;
  --color-syntax-heading:                #e5c07b;
  --color-syntax-subheading:             #e5c07b;
  --color-syntax-output:                 #abb2bf;
  --color-syntax-prompt:                 #828997;
  --color-syntax-traceback:              #c5cad3;
  --color-syntax-matching-bracket-bg:    #56b6c248;
  --color-syntax-nonmatching-bracket-bg: #e06c7548;

  /* ---- Console / ANSI ---- */
  --color-console-fg:          #d1d7e0;
  --color-console-fg-subtle:   #656c76;
  --color-console-bg:          #151b23;
  --color-console-border:      #3d444db3;
  --color-console-hover-bg:    #656c7633;
  --color-console-active-bg:   #3d444d;
  --color-console-menu-bg:     #151b23;
  --color-console-menu-border: #3d444db3;
  --color-console-link:        #969aa1;
  --color-ansi-black:          #151b23;
  --color-ansi-red:            #e5534b;
  --color-ansi-green:          #57ab5a;
  --color-ansi-yellow:         #c69026;
  --color-ansi-blue:           #478be6;
  --color-ansi-magenta:        #c96198;
  --color-ansi-cyan:           #07ace4;
  --color-ansi-white:          #656c76;
  --color-ansi-bright-black:   #08224c;
  --color-ansi-bright-red:     #f96b64;
  --color-ansi-bright-green:   #59c668;
  --color-ansi-bright-yellow:  #dfab3c;
  --color-ansi-bright-blue:    #60a3f9;
  --color-ansi-bright-magenta: #e079b0;
  --color-ansi-bright-cyan:    #0fbdf8;
  --color-ansi-bright-white:   #d1d7e0;

  /* ---- Status - error, success, warning, info, priority ---- */
  --color-error-border:    #e5534b66;
  --color-error-bg:        #e5534b1a;
  --color-error-bg-active: #e5534b80;
  --color-error-bg-hover:  #e5534b4d;
  --color-error-text:      #e5534b;
  --color-success-border:  #57ab5a66;
  --color-success-bg:      #57ab5a1a;
  --color-success-text:    #57ab5a;
  --color-warning-border:  #c6902666;
  --color-warning-bg:      #c690261a;
  --color-warning-text:    #c69026;
  --color-info-border:     #478be666;
  --color-info-bg:         #478be61a;
  --color-info-text:       #3d92ff;
  --color-priority-border: #4a268d;
  --color-priority-bg:     #251c39;
  --color-priority-text:   #a371f7;

  /* ---- Labels, badges, reactions, markup ---- */
  --color-red-badge:             #e5534b;
  --color-red-badge-bg:          #e5534b1a;
  --color-red-badge-hover-bg:    #e5534b4d;
  --color-green-badge:           #57ab5a;
  --color-green-badge-bg:        #57ab5a1a;
  --color-green-badge-hover-bg:  #57ab5a4d;
  --color-yellow-badge:          #c69026;
  --color-yellow-badge-bg:       #c690261a;
  --color-yellow-badge-hover-bg: #c690264d;
  --color-orange-badge:          #cc6b2c;
  --color-orange-badge-bg:       #cc6b2c1a;
  --color-orange-badge-hover-bg: #cc6b2c4d;
  --color-markup-table-row:      #262c36;
  --color-markup-code-block:     #262c36;
  --color-markup-code-inline:    #656c7633;
  --color-reaction-bg:           initial;
  --color-reaction-hover-bg:     #4184e41a;
  --color-reaction-active-bg:    #4184e41a;
  --color-tooltip-text:          #fff;
  --color-tooltip-bg:            #3d444d;
  --color-label-text:            #d1d7e0;
  --color-label-bg:              #656c7633;
  --color-label-hover-bg:        #656c7640;
  --color-label-active-bg:       #656c7640;

  /* ---- Named colours and chart series ---- */
  --color-red:                     #e5534b;
  --color-orange:                  #cc6b2c;
  --color-yellow:                  #c69026;
  --color-olive:                   #a2a626;
  --color-green:                   #57ab5a;
  --color-teal:                    #1cb0ab;
  --color-blue:                    #478be6;
  --color-violet:                  #9899ec;
  --color-purple:                  #986ee2;
  --color-pink:                    #c96198;
  --color-brown:                   #b69a6d;
  --color-black:                   #151b23;
  --color-red-light:               #f96b64;
  --color-orange-light:            #e08348;
  --color-yellow-light:            #dfab3c;
  --color-olive-light:             #c6cb2f;
  --color-green-light:             #59c668;
  --color-teal-light:              #22d8d1;
  --color-blue-light:              #60a3f9;
  --color-violet-light:            #a7a8ef;
  --color-purple-light:            #b890f9;
  --color-pink-light:              #e079b0;
  --color-brown-light:             #c1a983;
  --color-black-light:             #08224c;
  --color-red-dark-1:              #f7332a;
  --color-orange-dark-1:           #c86221;
  --color-yellow-dark-1:           #bd8a1f;
  --color-olive-dark-1:            #929522;
  --color-green-dark-1:            #39a648;
  --color-teal-dark-1:             #199e9a;
  --color-blue-dark-1:             #2681f7;
  --color-violet-dark-1:           #7779e6;
  --color-purple-dark-1:           #945af6;
  --color-pink-dark-1:             #d54793;
  --color-brown-dark-1:            #ac8d5a;
  --color-black-dark-1:            #010408;
  --color-red-dark-2:              #f6160b;
  --color-orange-dark-2:           #b1571e;
  --color-yellow-dark-2:           #a87a1b;
  --color-olive-dark-2:            #82851e;
  --color-green-dark-2:            #329440;
  --color-teal-dark-2:             #168d89;
  --color-blue-dark-2:             #0970f4;
  --color-violet-dark-2:           #5658e0;
  --color-purple-dark-2:           #7d36f4;
  --color-pink-dark-2:             #ce2f84;
  --color-brown-dark-2:            #9b7d4e;
  --color-black-dark-2:            #010307;
  --color-series-16-0:             #7db233;
  --color-series-16-1:             #499a37;
  --color-series-16-2:             #ce4751;
  --color-series-16-3:             #8f9121;
  --color-series-16-4:             #ac32a6;
  --color-series-16-5:             #7445e9;
  --color-series-16-6:             #c67d28;
  --color-series-16-7:             #4db392;
  --color-series-16-8:             #aa4d30;
  --color-series-16-9:             #2a6f84;
  --color-series-16-10:            #c45327;
  --color-series-16-11:            #3d965c;
  --color-series-16-12:            #792a93;
  --color-series-16-13:            #439d73;
  --color-series-16-14:            #103aad;
  --color-series-16-15:            #982e85;
  --color-grey:                    #656c76;
  --color-grey-light:              #a2a7af;
  --color-gold:                    #ba9b12;
  --color-white:                   #fff;
  --color-git:                     #f05133;
  --color-logo:                    #478be6;
  --color-highlight-fg:            #c69026;
  --color-highlight-bg:            #bb800926;
  --color-danger:                  #cc4848;
  --color-transparency-grid-light: #2a2a2a;
  --color-transparency-grid-dark:  #1a1a1a;
  --color-workflow-edge-hover:     #666a73;

  /* ---- Everything else ---- */
  --is-dark-theme: true;

  accent-color: var(--color-accent);
  color-scheme: dark;
}

/* ==========================================================================
   Tim - hand-written layer

   Appended to the generated variable block by src/gen_tim.py. Edit this file
   directly; it is not generated.

   Everything here targets Gitea's own class names, which are NOT a stable API.
   This is the section to re-check after a Gitea upgrade. Values are sourced
   from the github-dark theme's own rules where noted, so they match what
   margihq.com already renders.

   Companion template override: src/templates/repo/view_content.tmpl
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Commits / Branches / Tags summary

   Stock Gitea renders this on a line of its own above the button row. The
   template override moves it inside .repo-button-row-left, immediately after
   the branch dropdown - which is where github-dark puts it too. These rules
   make it read as part of the row rather than a stacked panel.
   -------------------------------------------------------------------------- */
/* Scoped to .repository-summary rather than to the button row, because this
   same bar also appears standalone on /commits and /branches, where it would
   otherwise fall back to Gitea's full-width three-segment strip and look
   nothing like the repo home. */
/* The `.ui.segments` / `.ui.segment` prefixes are load-bearing: the panel
   border and background come from Fomantic's two-class `.ui.segments` rule,
   so a bare `.repository-summary` selector loses to it and the bar keeps its
   full-width panel chrome. */
.ui.segments.repository-summary,
.ui.segments.repository-summary > .ui.segment.repository-menu {
  display: flex;
  /* flex-direction is load-bearing too: `.ui.segments` sets `column`, which
     turns align-items:center into HORIZONTAL centring and parks the chips in
     the middle of the row. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  height: 32px;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

/* Gitea ships `.repository .repository-summary .sub-menu .item { height:33px;
   flex:1 1 0% }` at four class selectors. This selector is also four, so it
   wins on load order (theme CSS is linked after index.css). Without the flex
   override the three items stretch to equal widths; without line-height:1 and
   border-box they compute 33px and misalign the row by 1px. */
.repository .repository-summary .repository-menu .item {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: 32px;
  min-height: 32px;
  padding: 4px 8px;
  line-height: 1;
  border-radius: var(--border-radius);
}
.repository .repository-summary .repository-menu .item:hover {
  background: var(--color-hover);
  text-decoration: none;
}
/* github-dark uses margin:0 2px on the count digits */
.repository-summary .repository-menu .item b {
  margin: 0 2px;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   2. Vertical rhythm on the repo home page

   Measured on stock 1.27: 14px above the button row and 26px below it, so the
   block sat visibly low in its own space. The 26px was #repo-files-table's own
   `margin: 10px 0` stacking on top of the flex gap.

   Note the tab divider's `margin-bottom: 12px` is NOT the source of the 14px
   above - zeroing it changes nothing, because that margin collapses through
   the container. The 14px comes from the container itself, so the 2px below is
   an explicit top-up to reach the same 16px used everywhere else. Adjust the
   2px if a future Gitea changes that container.
   -------------------------------------------------------------------------- */
.page-content.repository.file.list .repo-grid-filelist-sidebar {
  padding-top: 2px;
}
.repo-home-filelist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* #repo-files-table sets `margin: 10px 0` with a bare ID selector, which beats
   any class-only rule - hence the id in this selector. */
.repo-home-filelist > *,
.repo-home-filelist > #repo-files-table {
  margin-top: 0;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Buttons
   github-dark: .ui.button font-weight 500; .repo-button-row .ui.button 32px;
   .repo-header .ui.compact.button 28px with 3px 12px padding.
   -------------------------------------------------------------------------- */
.ui.button {
  font-weight: var(--font-weight-medium);
}
.repo-button-row .ui.button,
.repo-button-row .ui.dropdown.button {
  height: 32px;
  min-height: 32px;
}
.repo-header .ui.compact.button,
.repo-header .ui.labeled.button > .label {
  height: 28px;
  min-height: 28px;
  padding: 3px 12px;
  line-height: 1.5;
}

/* Primary action buttons are green, not accent-blue. Gitea maps both links
   and primary buttons onto --color-primary, so this cannot come from the
   variable layer. */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--tim-button-primary-bg);
  color: var(--tim-button-primary-fg);
  border-color: var(--tim-button-primary-border);
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--tim-button-primary-bg-hover);
  color: var(--tim-button-primary-fg);
}
/* Basic (outline) primary buttons must NOT go green - they are secondary
   affordances and would otherwise compete with the real primary action. */
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
  background: var(--color-button);
  color: var(--color-text);
  border-color: var(--color-light-border);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. Top navbar - github-dark: min-height 64px, padding 8px 16px, no border
   (it separates from the canvas by colour instead).
   -------------------------------------------------------------------------- */
#navbar {
  min-height: 64px;
  padding: 8px 16px;
  /* No border here. GitHub's header and repo tab row form ONE continuous dark
     region with a single divider at its bottom edge - adding a rule between
     them gives the two-line look Gitea has by default. */
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Repo header - github-dark: title 18px / semibold, 6px radius on the
   name links so hover reads as a chip.
   -------------------------------------------------------------------------- */
.page-content.repository .repo-header .flex-item .flex-item-title a {
  display: flex;
  align-items: center;
  padding: 0 6px;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 18px;
  border-radius: var(--border-radius);
}
.page-content.repository .repo-header .flex-item .flex-item-title a.muted:not(.tw-font-normal) {
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   6. File list - github-dark: 40px rows, 16px gutters, 20px round avatar,
   and a taller latest-commit strip.
   -------------------------------------------------------------------------- */
.repository.file.list #repo-files-table .repo-file-item .repo-file-cell {
  height: 40px;
}
.repository.file.list #repo-files-table .repo-file-cell.name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 16px;
}
.repository.file.list #repo-files-table .repo-file-cell.age {
  padding-right: 16px;
}
.repository.file.list #repo-files-table .repo-file-line.repo-file-last-commit {
  min-height: 3.725rem;
}
.repository.file.list #repo-files-table .repo-file-line.repo-file-last-commit .latest-commit {
  gap: 8px;
}
.repository.file.list #repo-files-table .repo-file-line.repo-file-last-commit .latest-commit img.ui.avatar {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border-radius: var(--border-radius-full);
}

/* --------------------------------------------------------------------------
   7. Language stats

   Stock Gitea renders a 10px bar with a 14px legend and 14px dots, which is
   what made this block look oversized. github-dark uses 8px / 12px / 8px.
   Selectors are scoped as deeply as github-dark scopes them, because Gitea's
   own .color-icon rules are themselves highly specific.
   -------------------------------------------------------------------------- */
/* Measured on github.com: the bar is 8px tall with a 3px radius and sits 8px
   above the legend. github-dark sets `margin-bottom: 0`, which left the legend
   jammed against the chart. */
.page-content.repository.file.list .repo-home-sidebar-bottom .language-stats {
  height: 8px;
  margin-bottom: 8px;
  border-radius: 3px;
}
/* Spacing is owned by the container's gap, not by per-item margins, so wrapped
   rows are spaced correctly. github-dark only set `margin-right: 8px` here,
   which works for a single row and falls apart the moment the legend wraps. */
/* Measured off github.com: legend items are 17px tall at 12px, rows sit 21px
   apart (so a 4px row gap), and the dot has an 8px right margin with no extra
   flex gap. Gitea hardcodes `.item { height: 30px; padding: 0 .5em; gap: .25em }`
   which is sized for its 14px default - at 12px that leaves 10px of dead space
   per row, and nothing sets a row gap at all, so a wrapped legend sat 30px
   apart instead of 21px. */
.page-content.repository.file.list .repo-home-sidebar-bottom .language-stats-details {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 10px;
}
.page-content.repository.file.list .repo-home-sidebar-bottom .language-stats-details .item {
  height: 17px;
  padding: 0;
  margin-right: 0;
  gap: 0;
  font-size: 12px;
  justify-content: flex-start;
}
.page-content.repository.file.list .repo-home-sidebar-bottom .language-stats-details .item .color-icon {
  width: 8px;
  height: 8px;
  margin-right: 8px;
}
.page-content.repository.file.list .repo-home-sidebar-bottom .language-stats-details .item .tw-font-semibold {
  color: var(--color-text);
  margin-right: 2px;
}

/* --------------------------------------------------------------------------
   8. Issue / PR list
   Gitea leaves these rows flat on the canvas; GitHub encloses them. Folding
   the Open/Closed counts and filter dropdowns into a box header is not done
   here: they are separate siblings (.list-header, .issue-filters) of
   #issue-list inside a plain .ui.container, so there is no wrapper to border.
   -------------------------------------------------------------------------- */
.page-content.issue-list #issue-list {
  background: var(--color-box-body);
  border: 1px solid var(--color-light-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  /* The Open/Closed counts and the Label/Milestone/Sort dropdowns live in
     .issue-filters, a sibling above this box with no bottom margin, so the
     box's top border sat flush against them. 14px matches the margin Gitea
     already puts above .issue-list-toolbar, keeping the rhythm even. */
  margin-top: 14px;
}
.page-content.issue-list #issue-list > * {
  padding-left: 16px;
  padding-right: 16px;
}

/* --------------------------------------------------------------------------
   9. Repo nav above the repo title

   Current GitHub puts the repo tab row directly under the global nav, with the
   repo title and Watch/Fork/Star buttons *below* it. Gitea does the reverse.

   The tab container, the 1px divider and the header container are all siblings
   inside .secondary-nav, so making that a flex column and reordering is enough
   - no template override needed. :has() picks them out by what they contain
   rather than by position, so adding a sibling upstream will not shuffle this.
   -------------------------------------------------------------------------- */
.page-content.repository .secondary-nav {
  display: flex;
  flex-direction: column;
}
/* GitHub moved the repo nav into the app header, so the tab row shares the
   header's darker colour and the canvas starts below it.

   This needs a genuinely full-width element, which is why the companion
   override at src/templates/repo/header.tmpl wraps the tab row and its divider
   in .tim-repo-nav-band. Two CSS-only attempts failed for the same underlying
   reason - every row in Gitea sits in a centred, width-capped .ui.container:

     1. tinting .secondary-nav and repainting the title row to canvas gave a
        centred lighter rectangle with dark strips down both gutters;
     2. extending the tab container with `box-shadow: +/-100vw` overshot,
        because a shadow offset larger than the element's own width lands
        entirely outside the viewport and leaves the gutters bare.

   With a real full-width wrapper it is just a background. */
.tim-repo-nav-band {
  background: var(--color-nav-bg);
}
/* Gitea gives the divider `margin-bottom: 12px`. Inside the band that margin
   is dark, so the colour ran 12px PAST the divider line instead of ending on
   it. The gap moves to the title row below, outside the band. */
.tim-repo-nav-band > .ui.tabs.divider {
  margin-bottom: 0;
}
.page-content.repository .secondary-nav > .ui.container:has(.repo-header) {
  padding-top: 10px;
}
.page-content.repository .secondary-nav > .tim-repo-nav-band {
  order: 1;
}
.page-content.repository .secondary-nav > .ui.container:has(.repo-header) {
  order: 2;
  /* absorbs the 12px the divider used to contribute, plus breathing room */
  padding-top: 16px;
}

/* GitHub's active tab underline is a warm salmon, not the text colour.

   Gitea sets this via `.ui.secondary.pointing.menu .active.item {
   border-color: currentcolor }` - six classes. Anything shorter loses, so
   this mirrors Gitea's own selector and prefixes a scope class rather than
   inventing a different one. Same trick applies anywhere Gitea's Fomantic
   selectors fight back. */
.secondary-nav .ui.secondary.pointing.menu .active.item {
  border-bottom-color: var(--tim-tab-active-border);
}

/* Repo title links read as chips on hover, like GitHub's. */
.page-content.repository .repo-header .flex-item .flex-item-title a:hover {
  background: var(--tim-overlay-hover);
  text-decoration: none;
}
.page-content.repository .repo-header .flex-item .flex-item-title {
  color: var(--color-text-light-2);
}

/* --------------------------------------------------------------------------
   10. Dropdown menus

   The most-seen surface after the file list, and stock Gitea's is noticeably
   squarer and flatter than GitHub's. github-dark's values: panel on the near
   black --color-menu with no border and a 12px radius; items 32px tall with
   their own 6px radius and 8px side margins so hover reads as an inset pill;
   a 4x24px accent bar marks the active item.

   The !important flags mirror github-dark's own - Fomantic's dropdown rules
   are aggressive enough that they are genuinely needed here.
   -------------------------------------------------------------------------- */
.ui.dropdown .menu,
.ui.menu .ui.dropdown .menu {
  background-color: var(--color-menu) !important;
  border: unset !important;
  border-radius: var(--tim-menu-radius) !important;
}
.ui.dropdown .menu > .item:not(.tw-hidden),
.ui.menu .ui.dropdown .menu > .item:not(.tw-hidden) {
  display: flex !important;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 6px 8px !important;
  border-radius: var(--border-radius) !important;
}
.ui.dropdown .menu > .item:not(.tw-hidden):not(.emoji),
.ui.menu .ui.dropdown .menu > .item:not(.tw-hidden):not(.emoji) {
  margin: 0 8px;
}
.ui.dropdown .menu > .item:not(.tw-hidden):not(.emoji):first-of-type {
  margin-top: 8px;
}
.ui.dropdown .menu > .item:not(.tw-hidden):not(.emoji):last-of-type {
  margin-bottom: 8px;
}
.ui.dropdown .menu > .item:not(.tw-hidden):hover,
.ui.menu .ui.dropdown .menu > .item:not(.tw-hidden):hover {
  background-color: var(--tim-overlay-hover) !important;
}
.ui.dropdown .menu > .item:not(.tw-hidden).selected,
.ui.menu .ui.dropdown .menu > .item:not(.tw-hidden).selected {
  background-color: var(--tim-overlay-selected) !important;
}
.ui.dropdown .menu > .item:not(.tw-hidden).selected:hover {
  background-color: var(--tim-overlay-hover) !important;
}
/* the accent bar on the active/selected item */
.ui.dropdown .menu > .item:not(.tw-hidden).active::after,
.ui.dropdown .menu > .item:not(.tw-hidden).selected::after {
  background-color: var(--tim-focus-border);
  border-radius: var(--border-radius);
  width: 4px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   11. Inputs - 32px to match the button height, blue focus ring.
   -------------------------------------------------------------------------- */
.ui.input {
  height: 32px;
}
.ui.input > input:focus,
.ui.input > input:focus-visible,
.ui.form input:focus,
.ui.form textarea:focus {
  border-color: var(--tim-focus-border);
}

/* --------------------------------------------------------------------------
   12. Issue / PR comments
   github-dark: 38px header with asymmetric padding, round avatars, 6px
   corners on the first and last block, and a compact icon-button for the
   context menu.
   -------------------------------------------------------------------------- */
.comment .comment-container .comment-header {
  min-height: 38px;
  padding: 4px 4px 4px 16px;
}
.comment .comment-container img.ui.avatar,
.comment .comment-container .comment-header img.ui.avatar {
  border-radius: var(--border-radius-full);
}
.repository.view.issue .comment-list .comment > .content > div:first-child {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.repository.view.issue .comment-list .comment > .content > div:last-child {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.comment .comment-container .comment-header-right > .item,
.comment .comment-container .comment-header-right > .label {
  color: var(--color-text-light-2);
}
.comment .comment-container .comment-header-right > .ui.label {
  background-color: initial;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
}
.comment .comment-container .comment-header-right .context-dropdown {
  height: 28px;
  padding: 0 6px;
  border-radius: var(--border-radius);
}
.comment .comment-container .comment-header-right .context-dropdown:hover {
  background-color: var(--tim-overlay-hover);
}
.comment .comment-container .comment-header-right .context-dropdown .menu .item.delete-comment {
  color: var(--color-red);
}
/* highlighted (linked-to) comment gets the focus blue */
.comment .comment-container:target .comment-container {
  border-color: var(--tim-focus-border) !important;
}

/* --------------------------------------------------------------------------
   13. Diff view
   github-dark: file headers drop to 12px and normal weight, the +/- stats bar
   is 8px, header icon buttons get a 6px radius with the overlay hover, and the
   code body rounds off the bottom of the box.
   -------------------------------------------------------------------------- */
.diff-file-box .diff-file-header .diff-file-name {
  font-weight: var(--font-weight-normal);
}
.diff-file-box .diff-file-header .diff-file-name > div,
.diff-file-box .diff-file-header .diff-file-name .file-link {
  font-size: 12px;
}
/* NOTE: github-dark also ships
   `.diff-file-box .diff-file-header .diff-file-name .diff-stats-bar {height:8px}`
   but Gitea 1.27 renders no stats bar inside per-file diff headers - only one
   page-level bar in the tab row - so that rule matched nothing and is omitted
   rather than carried as dead weight. */
.diff-file-box .diff-file-header .diff-file-header-actions {
  color: var(--color-text-light-2);
  font-size: 12px;
  font-weight: var(--font-weight-normal);
}
.diff-file-box .diff-file-header .diff-file-header-actions .diff-header-popup-btn {
  padding: 5px !important;
  border-radius: var(--border-radius);
}
.diff-file-box .diff-file-header .diff-file-header-actions .diff-header-popup-btn:hover {
  background-color: var(--tim-overlay-hover);
}
.repository .diff-file-box .file-body.file-code {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* --------------------------------------------------------------------------
   14. Labels

   The single biggest block in github-dark (144 rules across .label/.ui.label),
   and the biggest remaining visual gap: GitHub draws status labels as OUTLINED
   chips - transparent fill, coloured 1px border, lighter text - where stock
   Gitea fills them solid.

   The repeated `.ui.ui.ui` is github-dark's own specificity hack against
   Fomantic and is kept deliberately. The transparent border on the base class
   keeps non-coloured labels the same size as coloured ones.

   BUG FIX vs source: github-dark's `label.red` and `label.purple` rules are
   byte-identical - both point at the purple border token and --color-purple -
   so red labels render purple on margihq.com today. Red uses red here.
   -------------------------------------------------------------------------- */
.ui.label {
  border: 1px solid transparent;
}
div.ui.ui.ui.label.primary,
span.ui.ui.ui.label.primary {
  background-color: unset;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
div.ui.ui.ui.label.red,
span.ui.ui.ui.label.red {
  background-color: unset;
  border-color: #da3633;
  color: var(--color-red);
}
div.ui.ui.ui.label.orange,
span.ui.ui.ui.label.orange {
  background-color: unset;
  border-color: #9e6a03;
  color: var(--color-yellow);
}
div.ui.ui.ui.label.yellow,
span.ui.ui.ui.label.yellow {
  background-color: unset;
  border-color: #9e6a03;
  color: var(--color-orange);
}
div.ui.ui.ui.label.olive,
span.ui.ui.ui.label.olive {
  background-color: unset;
  border-color: var(--color-olive);
  color: var(--color-olive);
}
div.ui.ui.ui.label.green,
span.ui.ui.ui.label.green {
  background-color: unset;
  border-color: #238636;
  color: var(--color-green);
}
div.ui.ui.ui.label.purple,
span.ui.ui.ui.label.purple {
  background-color: unset;
  border-color: #8957e5;
  color: var(--color-purple);
}

/* Commit SHA chips are plain muted monospace text until hovered. */
a.ui.label.sha,
a.ui.label.commit-id-short {
  border: unset;
  background-color: unset;
  color: var(--color-text-light-2);
  margin-top: 2px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}
a.ui.label.sha:hover,
a.ui.label.commit-id-short:hover {
  background-color: var(--tim-overlay-hover);
}

/* --------------------------------------------------------------------------
   15. Avatars
   A faint wash behind avatars so transparent PNGs and letter-avatars still
   read as a filled circle. Rounded in the contexts github-dark rounds them -
   deliberately not global, since org avatars stay rounded-square on GitHub.
   -------------------------------------------------------------------------- */
img.ui.avatar,
.ui.avatar img,
.ui.avatar svg {
  background-color: #ffffff1a;
}
.page-content.repository #commits-table tbody.commit-list td.author img.ui.avatar,
.page-content.repository #git-graph-container img.ui.avatar {
  border-radius: var(--border-radius-full);
}

/* --------------------------------------------------------------------------
   16. PR merge / timeline boxes
   github-dark gives the merge-state marker a 40px round badge with a 24px
   glyph, and tints the attached segment's border to match the state.
   -------------------------------------------------------------------------- */
.repository.view.issue .comment-list .timeline-item.pull-merge-box .timeline-avatar {
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-full);
  color: #fff !important;
}
.repository.view.issue .comment-list .timeline-item.pull-merge-box .timeline-avatar svg {
  width: 24px;
  height: 24px;
}
.repository.view.issue .comment-list .timeline-item.pull-merge-box .timeline-avatar.green {
  background-color: #238636;
  border-radius: var(--border-radius);
}
.repository.view.issue .comment-list .timeline-item.pull-merge-box .timeline-avatar.purple {
  background-color: #8957e5;
  border-radius: var(--border-radius);
}

/* --------------------------------------------------------------------------
   17. Global navbar interior
   Section 4 set the bar's own height; these are the contents. github-dark:
   48px inner rows, 8px gaps, 32px logo, and - when signed in - the right-hand
   icons become a bordered 32px button group, which is what GitHub shows.
   -------------------------------------------------------------------------- */
#navbar .navbar-left,
#navbar .navbar-right {
  min-height: 48px;
}
#navbar .navbar-left {
  gap: 8px;
}
#navbar .navbar-left > .item {
  min-height: 20px;
  padding: 4px 8px;
}
#navbar .navbar-left > .item.active {
  font-weight: var(--font-weight-semibold);
}
#navbar .navbar-left > .item#navbar-logo {
  padding-left: 6px;
}
#navbar .navbar-left > .item#navbar-logo:hover {
  background: unset;
}
#navbar .navbar-left > .item#navbar-logo img {
  width: 32px;
  height: 32px;
}
/* Signed-in only: :has(.user-menu) means none of this matches while logged out. */
#navbar .navbar-right:has(.user-menu) {
  align-items: center;
  gap: 8px;
}

/* EVERY item is centred, not just the last one. The icons inside these are
   wrapped in spans that lay out as inline content by default, so with padding:0
   and a fixed 32px height they sat pinned to the top of their boxes and the
   `+` / caret pair drifted apart. Centring has to be on the item itself. */
#navbar .navbar-right:has(.user-menu) > .item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  min-height: 32px;
  padding: 0 8px;
}
/* the inner wrappers Gitea uses for the icon + caret */
#navbar .navbar-right:has(.user-menu) > .item > .flex-text-block,
#navbar .navbar-right:has(.user-menu) > .item > .text,
#navbar .navbar-right:has(.user-menu) > .item > .tw-relative {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
}

/* Bell and "create new" get the bordered button look; the avatar dropdown is
   the last item and stays bare, as GitHub's does. */
#navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
  border: 1px solid var(--color-light-border);
  border-radius: var(--border-radius);
}
#navbar .navbar-right:has(.user-menu) > .item:last-child {
  padding: 0;
}

/* Gitea renders the avatar at 24px (`AvatarUtils.Avatar .SignedUser 24` in
   base/head_navbar.tmpl), so it has to be resized to match the 32px siblings.
   !important is required and not for tidiness:
     - margin-right fights `.tw-mr-1 { margin-right: .25rem !important }`, a
       Tailwind utility no specificity can beat;
     - height fights Fomantic's `.ui.dropdown > .text > img { height: 2em }`
       (28px at the 14px base) AND a max-height of 28px, which clamps the
       result even when `height` itself is !important. */
#navbar .navbar-right:has(.user-menu) > .item:last-child img.ui.avatar {
  width: 32px !important;
  height: 32px !important;
  max-height: 32px !important;
  min-height: 32px !important;
  margin-right: 0 !important;
  border-radius: var(--border-radius-full);
}

/* --------------------------------------------------------------------------
   18. Tooltips and popovers (tippy)
   Plain tooltips keep the 6px base radius; dropdown-style and header
   popovers get the larger 12px panel radius and drop their border.
   -------------------------------------------------------------------------- */
.tippy-box {
  border-radius: var(--border-radius);
  margin-top: -3px;
}
.tippy-box[data-theme="default"],
.tippy-box[data-theme="menu"] {
  border-radius: var(--tim-menu-radius);
}
.tippy-box[data-theme="default"],
.tippy-box[data-theme="box-with-header"] {
  border: unset;
}
.tippy-box[data-theme="box-with-header"] .tippy-content {
  background-color: var(--color-menu);
}

/* --------------------------------------------------------------------------
   19. Commit list

   github-dark scopes all of these to `#commits-table.ui.basic.striped.table`,
   but Gitea 1.27 renders `ui very basic table unstackable` - no `.striped` -
   so every one of those rules silently matched nothing. Selectors below are
   rewritten against 1.27's actual markup.

   Its `.author .author-wrapper` rule is dropped entirely: 1.27 has no
   .author-wrapper element, so there is nothing to mute.
   -------------------------------------------------------------------------- */
.page-content.repository #commits-table tbody.commit-list .sha a.ui.label.commit-id-short {
  height: 28px;
  padding: 2px 8px;
}
.page-content.repository #commits-table tbody.commit-list .message a.ui.basic.primary.label {
  border-width: 1.5px;
  border-radius: var(--border-radius-full);
  padding: 3px 8px !important;
}
.page-content.repository #commits-table tbody.commit-list tr:hover,
.page-content.repository #commits-table tbody.commit-list tr:nth-child(2n):hover {
  background-color: var(--color-box-header) !important;
}
.page-content.repository #commits-table tbody.commit-list tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius);
}
.page-content.repository #commits-table tbody.commit-list tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius);
}

/* --------------------------------------------------------------------------
   20. Footer

   Measured on github.com: the footer is NOT a bar. It sits on the canvas with
   no background of its own, no top border, 12px text, and links in the same
   muted --fgColor-muted as the text, with generous vertical padding.

   Gitea instead paints it from --color-footer (which github-dark points at the
   nav colour), producing a dark strip across the bottom of every page.
   --color-footer is set to the canvas in the variable layer; the rest is here.
   -------------------------------------------------------------------------- */
.page-footer,
footer.page-footer {
  padding: 40px 16px 32px;
  border-top: 0;
  font-size: 12px;
  color: var(--color-text-light-2);
}
.page-footer a,
.page-footer .item,
.page-footer .ui.dropdown {
  color: var(--color-text-light-2);
  font-size: 12px;
}
.page-footer a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   21. Latest-commit row: age then commit count

   Companion overrides: repo/view_list.tmpl (renders the count here) and
   repo/sub_menu.tmpl (drops the duplicate chip from the button row).
   GitHub puts "<sha> · <age>   <n> Commits" at the right end of this row.
   -------------------------------------------------------------------------- */
.tim-last-commit-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  white-space: nowrap;
}
.tim-commit-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--border-radius);
  color: var(--color-text);
}
.tim-commit-count:hover {
  background: var(--tim-overlay-hover);
  text-decoration: none;
}
.tim-commit-count b {
  font-weight: var(--font-weight-semibold);
}

/* The `..` parent row is a .repo-file-line, not a .repo-file-cell.name, so the
   16px left padding set in section 6 never reached it - Gitea's own 10px left
   it 6px out of line with every row below. github-dark ships a matching
   .parent-link rule; this is it. */
.repository.file.list #repo-files-table .repo-file-line.parent-link {
  gap: 0.5rem;
  padding-left: 16px;
}