/*
 * LUCERN.FR — Forgejo Custom Theme (high-contrast edition)
 * docker cp custom.css forgejo:/data/gitea/public/assets/css/custom.css
 *
 * Ratios de contraste fond blanc :
 *   #0c4a6e → ~8.1:1  AAA
 *   #155e75 → ~6.8:1  AAA
 *   #0e7490 → ~4.7:1  AA
 *   boutons #0891b2 + blanc → ~4.6:1 AA
 *
 * Hover bg : gris-bleu ardoise (#edf0f4 / #e2e8f0) — sans cyan flashy
 */

/* ─── 1. Variables ──────────────────────────────────────────────── */
:root {
  --lucern-950:  #042033;
  --lucern-900:  #0c4a6e;
  --lucern-800:  #155e75;
  --lucern-700:  #164e63;
  --lucern-600:  #0e7490;
  --lucern-500:  #0891b2;
  --lucern-400:  #06b6d4;
  --lucern-300:  #22d3ee;
  --lucern-200:  #67e8f9;
  --lucern-100:  #cffafe;
  --lucern-50:   #ecfeff;
  --lucern-green-700: #047857;
  --lucern-green-600: #059669;

  /* Hover backgrounds : gris-bleu ardoise, pas de cyan */
  --hover-bg:       #edf0f4;   /* gris bleuté très léger  */
  --hover-bg-deep:  #e2e8f0;   /* gris ardoise un peu plus marqué */
  --active-bg:      #d4dde8;   /* sélectionné / actif     */

  --color-primary:          var(--lucern-500);
  --color-primary-dark-1:   var(--lucern-600);
  --color-primary-dark-2:   var(--lucern-700);
  --color-primary-dark-3:   var(--lucern-900);
  --color-primary-light-1:  var(--lucern-400);
  --color-primary-light-2:  var(--lucern-300);
  --color-primary-light-3:  var(--lucern-200);
  --color-primary-light-4:  var(--lucern-100);
  --color-primary-light-5:  var(--lucern-50);
  --color-primary-light-6:  #f0feff;
  --color-orange:            var(--lucern-900);
  --color-orange-dark:       var(--lucern-950);
  --color-orange-light:      var(--lucern-100);
}

/* ─── 2. Boutons primaires ──────────────────────────────────────── */
.ui.primary.button, .ui.button.primary,
button.primary, input[type="submit"].primary, .btn-primary {
  background-color: var(--lucern-500) !important;
  border-color:     var(--lucern-600) !important;
  color: #fff !important;
}
.ui.primary.button:hover, .ui.button.primary:hover,
button.primary:hover, .btn-primary:hover {
  background-color: var(--lucern-600) !important;
  border-color:     var(--lucern-700) !important;
  color: #fff !important;
}
.ui.primary.button:focus, .ui.button.primary:focus {
  background-color: var(--lucern-700) !important;
  box-shadow: 0 0 0 3px rgba(8,145,178,0.40) !important;
  color: #fff !important;
}
.ui.primary.button:active, .ui.button.primary:active {
  background-color: var(--lucern-900) !important;
  color: #fff !important;
}

/* ─── 3. Boutons verts Forgejo (Nouvelle équipe, Nouveau projet…) ─ */
.ui.green.button, .ui.button.green {
  background-color: var(--lucern-500) !important;
  border-color:     var(--lucern-600) !important;
  color: #fff !important;
}
.ui.green.button:hover, .ui.button.green:hover {
  background-color: var(--lucern-600) !important;
  border-color:     var(--lucern-700) !important;
  color: #fff !important;
}
.ui.green.button:focus, .ui.button.green:focus {
  background-color: var(--lucern-700) !important;
  box-shadow: 0 0 0 3px rgba(8,145,178,0.40) !important;
  color: #fff !important;
}
.ui.green.button:active, .ui.button.green:active {
  background-color: var(--lucern-900) !important;
  color: #fff !important;
}

/* ─── 4. Liens ──────────────────────────────────────────────────── */
a, .link-primary { color: #0c4a6e !important; }
a:hover, .link-primary:hover { color: #155e75 !important; text-decoration: underline; }
.ui.primary.button a, .ui.green.button a, .ui.inverted a,
nav.navbar a, footer a { color: inherit !important; text-decoration: none !important; }

/* ─── 5. Navbar ─────────────────────────────────────────────────── */
.navbar, #navbar, .top.bar, .ui.top.attached.menu {
  border-bottom: 2px solid var(--lucern-600) !important;
}
.navbar .logo, .gitea-logo > path, .forgejo-logo > path {
  fill: var(--lucern-400) !important;
  color: var(--lucern-400) !important;
}

/* ─── 6. Menus actifs ───────────────────────────────────────────── */
.ui.menu .active.item, .ui.tabular.menu .active.item,
.ui.pointing.menu .active.item,
.ui.secondary.pointing.menu .item.active {
  border-color: var(--lucern-600) !important;
  color: #0c4a6e !important;
  font-weight: 600;
}
.ui.menu .item:hover {
  color: #0c4a6e !important;
  background-color: var(--hover-bg) !important;   /* gris-bleu ardoise */
}

/* ─── 7. Labels & badges ────────────────────────────────────────── */
.ui.label.primary, .ui.primary.label,
.topic.label, .label[class*="orange"] {
  background-color: var(--lucern-900) !important;
  border-color:     var(--lucern-950) !important;
  color: #fff !important;
}
.ui.green.label, .issue-state-label.open, .pr-state-label.open {
  background-color: var(--lucern-green-700) !important;
  border-color:     var(--lucern-green-700) !important;
  color: #fff !important;
}

/* ─── 8. Inputs focus ───────────────────────────────────────────── */
input:focus, textarea:focus, .ui.input > input:focus,
.ui.form input:focus, .ui.form textarea:focus,
.ui.form select:focus, .CodeMirror.CodeMirror-focused {
  border-color: var(--lucern-600) !important;
  box-shadow: 0 0 0 3px rgba(14,116,144,0.28) !important;
  outline-color: var(--lucern-600) !important;
}

/* ─── 9. Checkboxes & Toggles ───────────────────────────────────── */
.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before,
.ui.radio.checkbox input:checked ~ .box:before,
.ui.radio.checkbox input:checked ~ label:before {
  background-color: var(--lucern-600) !important;
  border-color:     var(--lucern-700) !important;
}
.ui.checkbox input:focus ~ label:before,
.ui.checkbox input:focus ~ .box:before { border-color: var(--lucern-600) !important; }
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: var(--lucern-600) !important;
}

/* ─── 10. Progress bar ──────────────────────────────────────────── */
.ui.progress .bar, .ui.progress.primary .bar {
  background-color: var(--lucern-600) !important;
}

/* ─── 11. Dropdown ──────────────────────────────────────────────── */
.ui.dropdown .menu > .selected.item,
.ui.dropdown .menu > .item:hover {
  color: #0c4a6e !important;
  background-color: var(--hover-bg) !important;   /* gris-bleu ardoise */
}
.ui.dropdown .menu > .selected.item {
  background-color: var(--hover-bg-deep) !important;
  font-weight: 600;
}

/* ─── 12. Pagination ────────────────────────────────────────────── */
.ui.pagination.menu .active.item, .pagination .page.active a {
  background-color: var(--lucern-600) !important;
  color: #fff !important;
  border-color:     var(--lucern-700) !important;
}
.ui.pagination.menu .item:hover {
  background-color: var(--hover-bg) !important;
  color: #0c4a6e !important;
}

/* ─── 13. Heatmap contributions ────────────────────────────────── */
.contribution-graph rect.level-1 { fill: #d4dde8 !important; }  /* ardoise clair */
.contribution-graph rect.level-2 { fill: var(--lucern-400) !important; }
.contribution-graph rect.level-3 { fill: var(--lucern-600) !important; }
.contribution-graph rect.level-4 { fill: var(--lucern-900) !important; }

/* ─── 14. Tags git ──────────────────────────────────────────────── */
.ui.tag.label, .release-tag, a.tag, .tag-name {
  border-left-color: var(--lucern-600) !important;
}
.ui.tag.label:before { background-color: var(--lucern-600) !important; }

/* ─── 15. CI/CD succès ──────────────────────────────────────────── */
.commit-status.success svg, .status-check-icon.success,
.check-run-status.success {
  color: var(--lucern-green-700) !important;
  fill:  var(--lucern-green-700) !important;
}

/* ─── 16. Icônes orange génériques ─────────────────────────────── */
svg.orange, .icon.orange, i.orange.icon, .text.orange, .ui.orange {
  color: #0c4a6e !important;
}

/* ─── 17. Sélection, focus, scrollbar ──────────────────────────── */
::selection {
  background-color: rgba(14,116,144,0.22) !important;
  color: #042033 !important;
}
:focus-visible { outline: 2px solid var(--lucern-600) !important; outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: var(--lucern-600) !important; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--lucern-900) !important; }

/* ─── 18. Overrides inline hexadécimaux ────────────────────────── */
[style*="#c2410c"] { color: #0c4a6e !important; }
[style*="#ea580c"] { color: #0c4a6e !important; }
[style*="#f97316"] { color: #155e75 !important; }
[style*="#fb923c"] { color: #155e75 !important; }
[style*="background:#c2410c"],[style*="background-color:#c2410c"] { background-color: var(--lucern-900) !important; }
[style*="background:#ea580c"],[style*="background-color:#ea580c"] { background-color: var(--lucern-800) !important; }
[style*="background:#f97316"],[style*="background-color:#f97316"] { background-color: var(--lucern-600) !important; }

/* ─── 19. Extras LUCERN ─────────────────────────────────────────── */
.repository.header .header a:hover {
  border-bottom: 2px solid var(--lucern-600) !important;
  color: #0c4a6e !important;
}
.diff-add-line, td.added { background-color: rgba(14,116,144,0.07) !important; }
.diff-add-line .code, td.added .code { background-color: rgba(14,116,144,0.13) !important; }
td.line-num:target, td[id^="L"]:target {
  background-color: rgba(14,116,144,0.15) !important;
  border-left: 3px solid var(--lucern-600) !important;
}
.star-button.starred .text, .star-button.starred i.icon, .star-button.starred svg {
  color: #0c4a6e !important; fill: #0c4a6e !important;
}
.ui.list .item:hover, .item.link:hover {
  background-color: var(--hover-bg) !important;
}

/* ─── 20. Dark mode système ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:         var(--lucern-400);
    --color-primary-dark-1:  var(--lucern-500);
    --color-primary-dark-2:  var(--lucern-600);
    --color-primary-light-1: var(--lucern-300);
    --color-primary-light-2: var(--lucern-200);
    --hover-bg:       rgba(100,120,140,0.15);
    --hover-bg-deep:  rgba(100,120,140,0.25);
    --active-bg:      rgba(100,120,140,0.35);
  }
  a, .link-primary               { color: var(--lucern-300) !important; }
  a:hover, .link-primary:hover   { color: var(--lucern-200) !important; }
  .ui.menu .active.item, .ui.tabular.menu .active.item,
  .ui.pointing.menu .active.item {
    color: var(--lucern-300) !important;
    border-color: var(--lucern-400) !important;
  }
  .ui.menu .item:hover {
    color: var(--lucern-200) !important;
    background-color: var(--hover-bg) !important;
  }
  .ui.dropdown .menu > .selected.item,
  .ui.dropdown .menu > .item:hover {
    color: var(--lucern-300) !important;
    background-color: var(--hover-bg) !important;
  }
  svg.orange, .icon.orange, i.orange.icon, .text.orange, .ui.orange { color: var(--lucern-300) !important; }
  .star-button.starred .text, .star-button.starred i.icon, .star-button.starred svg {
    color: var(--lucern-300) !important; fill: var(--lucern-300) !important;
  }
  .contribution-graph rect.level-1 { fill: #1e3a4a !important; }
  .contribution-graph rect.level-2 { fill: var(--lucern-700) !important; }
  .contribution-graph rect.level-3 { fill: var(--lucern-500) !important; }
  .contribution-graph rect.level-4 { fill: var(--lucern-300) !important; }
  .ui.primary.button, .ui.button.primary,
  .ui.green.button, .ui.button.green   { background-color: var(--lucern-600) !important; }
  .ui.primary.button:hover, .ui.button.primary:hover,
  .ui.green.button:hover, .ui.button.green:hover { background-color: var(--lucern-500) !important; }
  ::selection { background-color: rgba(6,182,212,0.30) !important; color: #fff !important; }
}

/* ─── Boutons "a.primary.button" sans classe .ui (Forgejo natif) ── */
a.button.primary,
a.primary.button,
a.button.green,
a.green.button {
  background-color: var(--lucern-500) !important;
  border-color:     var(--lucern-600) !important;
  color: #fff !important;
}
a.button.primary:hover,
a.primary.button:hover,
a.button.green:hover,
a.green.button:hover {
  background-color: var(--lucern-600) !important;
  border-color:     var(--lucern-700) !important;
  color: #fff !important;
}
a.button.primary:focus,
a.primary.button:focus {
  background-color: var(--lucern-700) !important;
  box-shadow: 0 0 0 3px rgba(8,145,178,0.40) !important;
  color: #fff !important;
}