/*
 * ┌─────────────────────────────────────────────────────────────┐
 * │          Forgejo  ·  Yellow OLED  Theme                     │
 * │          Yellow accent  ·  True #000000 OLED black          │
 * │                                                             │
 * │  Installation:                                              │
 * │  1. Copy to: custom/public/assets/css/                      │
 * │  2. Add to app.ini [ui] section:                            │
 * │       THEMES = ...,forgejo-yellow-oled                      │
 * │       DEFAULT_THEME = forgejo-yellow-oled   (optional)      │
 * │  3. Restart Forgejo                                         │
 * │  4. Select via Settings → Appearance                        │
 * └─────────────────────────────────────────────────────────────┘
 */

/* ============================================================
   COLOR PALETTE — oklch for perceptual uniformity
   Yellow hue ≈ 95–100°  |  OLED black = #000000
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── Yellow accent ramp ───────────────────────────────────── */
  --yellow-50:  oklch(0.98 0.05  95);
  --yellow-100: oklch(0.95 0.10  95);
  --yellow-200: oklch(0.92 0.16  95);
  --yellow-300: oklch(0.88 0.20  95);
  --yellow-400: oklch(0.83 0.22  95);
  --yellow-500: oklch(0.78 0.22  95);   /* main accent */
  --yellow-600: oklch(0.70 0.20  95);
  --yellow-700: oklch(0.60 0.18  95);
  --yellow-800: oklch(0.45 0.14  95);
  --yellow-900: oklch(0.30 0.09  95);

  /* ── OLED black surface ramp ──────────────────────────────── */
  --black-0:   #000000;   /* true OLED black  */
  --black-1:   #0a0a0a;   /* page surface     */
  --black-2:   #111111;   /* card / sidebar   */
  --black-3:   #1a1a1a;   /* elevated card    */
  --black-4:   #222222;   /* border           */
  --black-5:   #2d2d2d;   /* hover surface    */
  --black-6:   #3a3a3a;   /* active surface   */
  --black-7:   #4a4a4a;   /* muted border     */

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:   #f0e8c8;   /* warm white     */
  --text-secondary: #b8ae8f;   /* warm grey      */
  --text-muted:     #7a7265;   /* very muted     */
  --text-disabled:  #4a463e;


  /* ================================================================
     FORGEJO CORE VARIABLES
     ================================================================ */

  /* Primary / accent — YELLOW */
  --color-primary:             var(--yellow-500);
  --color-primary-hover:       var(--yellow-300);
  --color-primary-active:      var(--yellow-600);
  --color-primary-dark-1:      var(--yellow-600);
  --color-primary-dark-2:      var(--yellow-700);

  --color-primary-light-1:     var(--yellow-400);
  --color-primary-light-2:     var(--yellow-300);
  --color-primary-light-3:     var(--yellow-200);
  --color-primary-light-4:     var(--yellow-100);
  --color-primary-light-5:     oklch(0.97 0.06  95 / 0.25);
  --color-primary-light-6:     oklch(0.97 0.06  95 / 0.15);
  --color-primary-light-7:     oklch(0.97 0.06  95 / 0.08);

  --color-accent:              var(--yellow-500);
  --color-accent-hover:        var(--yellow-300);
  --color-accent-active:       var(--yellow-600);

  /* ── Backgrounds ─────────────────────────────────────────── */
  --color-body:                var(--black-0);
  --color-box-body:            var(--black-2);
  --color-box-header:          var(--black-3);
  --color-box-footer:          var(--black-2);

  --color-sidebar-bg:          var(--black-2);
  --color-nav-bg:              var(--black-0);
  --color-menu-bg:             var(--black-2);
  --color-popup-bg:            var(--black-3);

  --color-card:                var(--black-2);
  --color-card-hover:          var(--black-3);

  --color-input:               var(--black-2);
  --color-input-hover:         var(--black-3);
  --color-input-focus-bg:      var(--black-3);

  --color-tag-bg:              var(--black-3);
  --color-tag-hover-bg:        var(--black-4);

  --color-label-bg:            oklch(0.78 0.22 95 / 0.15);

  /* ── Borders ─────────────────────────────────────────────── */
  --color-border:              var(--black-4);
  --color-border-dark:         var(--black-5);
  --color-input-border:        var(--black-5);
  --color-input-focus-border:  var(--yellow-500);
  --color-split-border:        var(--black-4);

  /* ── Secondary surfaces ──────────────────────────────────── */
  --color-secondary:           var(--black-5);
  --color-secondary-bg:        var(--black-3);

  /* ── Text ────────────────────────────────────────────────── */
  --color-text:                var(--text-primary);
  --color-text-dark:           #ffffff;
  --color-text-light:          var(--text-secondary);
  --color-text-lighter:        var(--text-muted);
  --color-text-lightest:       var(--text-disabled);
  --color-placeholder-text:    var(--text-muted);

  /* ── Links ───────────────────────────────────────────────── */
  --color-link:                var(--yellow-300);
  --color-link-hover:          var(--yellow-200);
  --color-link-visited:        oklch(0.80 0.18 100);

  /* ── Buttons ─────────────────────────────────────────────── */
  --color-btn-primary-bg:         var(--yellow-500);
  --color-btn-primary-hover-bg:   var(--yellow-400);
  --color-btn-primary-text:       #000000;   /* black text on yellow */
  --color-btn-primary-border:     var(--yellow-600);

  --color-btn-secondary-bg:       var(--black-4);
  --color-btn-secondary-hover-bg: var(--black-5);
  --color-btn-secondary-text:     var(--text-primary);
  --color-btn-secondary-border:   var(--black-6);

  /* ── Labels / badges ─────────────────────────────────────── */
  --color-label:               var(--text-secondary);

  /* ── Code / diffs ────────────────────────────────────────── */
  --color-code-bg:                 var(--black-2);
  --color-code-border:             var(--black-4);
  --color-inline-code-bg:          var(--black-3);

  --color-diff-added-row-bg:       oklch(0.22 0.06  142);
  --color-diff-added-row-border:   oklch(0.38 0.12  142);
  --color-diff-added-word-bg:      oklch(0.30 0.10  142);
  --color-diff-removed-row-bg:     oklch(0.18 0.06   28);
  --color-diff-removed-row-border: oklch(0.32 0.12   28);
  --color-diff-removed-word-bg:    oklch(0.26 0.10   28);

  /* ── Alerts / status badges ──────────────────────────────── */
  /* Open — yellow (reusing accent) */
  --color-open:                oklch(0.78 0.22 95);
  --color-open-bg:             oklch(0.78 0.22 95 / 0.15);
  /* Closed — muted red */
  --color-close:               oklch(0.65 0.18 28);
  --color-close-bg:            oklch(0.65 0.18 28 / 0.15);
  /* Merged — muted purple */
  --color-merged:              oklch(0.65 0.18 310);
  --color-merged-bg:           oklch(0.65 0.18 310 / 0.15);
  /* Draft — grey */
  --color-draft:               var(--text-muted);
  --color-draft-bg:            var(--black-4);

  /* ── Alerts / notices ────────────────────────────────────── */
  --color-info-bg:             oklch(0.18 0.05 240);
  --color-info-border:         oklch(0.40 0.12 240);
  --color-success-bg:          oklch(0.16 0.05 142);
  --color-success-border:      oklch(0.40 0.12 142);
  --color-warning-bg:          oklch(0.22 0.10 80);
  --color-warning-border:      oklch(0.78 0.22 95);   /* yellow border on warning */
  --color-danger-bg:           oklch(0.16 0.06 28);
  --color-danger-border:       oklch(0.50 0.16 28);

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

  /* ── Miscellaneous ───────────────────────────────────────── */
  --color-header-wrapper:      var(--black-0);
  --color-footer:              var(--black-0);
  --color-timeline:            var(--black-4);
  --color-loader:              var(--yellow-500);
  --color-hover:               var(--black-3);
  --color-active:              var(--black-4);
  --color-checked:             oklch(0.78 0.22 95 / 0.20);
  --color-markup-code-block:   var(--black-2);
}


/* ================================================================
   COMPONENT OVERRIDES
   ================================================================ */

/* ── Navbar ─────────────────────────────────────────────────────── */
.ui.top.menu,
#navbar {
  background: var(--black-0) !important;
  border-bottom: 1px solid var(--black-4) !important;
}

/* ── Page body ──────────────────────────────────────────────────── */
body {
  background-color: var(--black-0) !important;
  color: var(--text-primary) !important;
}

/* ── Cards / segments ───────────────────────────────────────────── */
.ui.segment,
.ui.segments,
.ui.card,
.repository-list-item,
.topic-list .meta,
.issue-item,
.comment-container {
  background: var(--black-2) !important;
  border-color: var(--black-4) !important;
}

/* ── Primary button — black text on yellow for contrast ─────────── */
.ui.primary.button,
.ui.green.button,
a.ui.primary.button,
button.ui.primary.button {
  background: var(--yellow-500) !important;
  color: #000000 !important;
  border-color: var(--yellow-600) !important;
}

.ui.primary.button:hover,
.ui.green.button:hover {
  background: var(--yellow-400) !important;
  color: #000000 !important;
}

.ui.primary.button:active,
.ui.green.button:active {
  background: var(--yellow-600) !important;
}

/* ── Labels / tags ──────────────────────────────────────────────── */
.label,
.ui.label {
  background: var(--black-3) !important;
  color: var(--text-primary) !important;
  border-color: var(--black-5) !important;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.repository .ui.attached.table.segment,
.issue-card .meta,
.sidebar {
  background: var(--black-2) !important;
}

/* ── Code blocks ────────────────────────────────────────────────── */
pre,
code,
.code-view,
.file-content table.code-view {
  background: var(--black-2) !important;
  border-color: var(--black-4) !important;
}

/* ── Syntax highlighting adjustments for OLED ──────────────────── */
.highlight {
  background: var(--black-2) !important;
}

/* ── Dropdowns / popups ─────────────────────────────────────────── */
.ui.dropdown .menu,
.ui.popup,
.ui.visible.dropdown > .menu {
  background: var(--black-3) !important;
  border-color: var(--black-4) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .item.selected {
  background: var(--black-5) !important;
  color: var(--yellow-300) !important;
}

/* ── Inputs ─────────────────────────────────────────────────────── */
input,
textarea,
.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.form .field > .selection.dropdown,
.CodeMirror {
  background: var(--black-2) !important;
  border-color: var(--black-5) !important;
  color: var(--text-primary) !important;
}

input:focus,
textarea:focus,
.ui.input > input:focus {
  border-color: var(--yellow-500) !important;
  box-shadow: 0 0 0 2px oklch(0.78 0.22 95 / 0.25) !important;
}

/* ── Tables ─────────────────────────────────────────────────────── */
.ui.table {
  background: var(--black-1) !important;
  border-color: var(--black-4) !important;
  color: var(--text-primary) !important;
}

.ui.table thead th {
  background: var(--black-3) !important;
  border-color: var(--black-4) !important;
}

.ui.table tbody tr:hover {
  background: var(--black-3) !important;
}

/* ── Tabs / menus ───────────────────────────────────────────────── */
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
  border-color: var(--yellow-500) !important;
  color: var(--yellow-400) !important;
}

.ui.menu .active.item {
  color: var(--yellow-300) !important;
}

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

/* ── Active / selected states ───────────────────────────────────── */
.active.item,
a.active {
  color: var(--yellow-300) !important;
}

/* ── Progress bars / loaders ────────────────────────────────────── */
.ui.progress .bar {
  background: var(--yellow-500) !important;
}

.ui.loader:after {
  border-top-color: var(--yellow-500) !important;
}

/* ── Checkboxes / radios ────────────────────────────────────────── */
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
  color: var(--yellow-500) !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: var(--yellow-500) !important;
}

/* ── Timeline / feed ────────────────────────────────────────────── */
.timeline-item .badge {
  border-color: var(--black-4) !important;
  background: var(--black-3) !important;
}

/* ── Footer ─────────────────────────────────────────────────────── */
#footer {
  background: var(--black-0) !important;
  border-top: 1px solid var(--black-4) !important;
}

/* ── Markdown content ───────────────────────────────────────────── */
.markup blockquote {
  border-left: 4px solid var(--yellow-700) !important;
  background: oklch(0.78 0.22 95 / 0.06) !important;
}

.markup a {
  color: var(--yellow-300) !important;
}

.markup a:hover {
  color: var(--yellow-200) !important;
}

/* ── Search bar ─────────────────────────────────────────────────── */
.ui.search > .ui.input {
  background: var(--black-2) !important;
}

/* ── Notification / label dots ──────────────────────────────────── */
.notification_count,
.label.color-label {
  background: var(--yellow-500) !important;
  color: #000000 !important;
}

/* ── Scrollbar (Webkit) ─────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--black-1);
}

::-webkit-scrollbar-thumb {
  background: var(--black-6);
  border-radius: 4px;
}

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

/* ── Selection highlight ────────────────────────────────────────── */
::selection {
  background: oklch(0.78 0.22 95 / 0.30);
  color: #ffffff;
}