/* ═══════════════════════════════════════════════════════════
   OPENBUREAU Theme für Gitea 1.26
   Angeglichen an openbureau.ch (Hugo-Theme + OPENBUREAU CMS)

   Design-DNA:
   · Warmes Off-White (hsl 35 14% 96%) statt kühlem Grau
   · Terrakotta-Akzent #b54a2c
   · Dunkles Masthead/Footer #191919 mit OPENBUREAU-Wortmarke
   · Newsreader (Serif) für Titel · Inter (Sans) für UI
   · Space Grotesk (Display) für Navigation/Labels · IBM Plex Mono für Code
═══════════════════════════════════════════════════════════ */

/* ─── Webfonts (wie Website & CMS) ─────────────────────────
   Fallbacks sind Systemfonts, falls offline. */
@import url('https://fonts.bunny.net/css?family=newsreader:400,400i,500,600,700|inter:400,500,600|space-grotesk:400,500,700|ibm-plex-mono:400,500');

:root {
  /* ─ Schriftfamilien ─ */
  --ob-serif:   'Newsreader', Charter, 'Source Serif Pro', Georgia, serif;
  --ob-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ob-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ob-mono:    'IBM Plex Mono', "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* ─ Farben (HSL-System der Website) ─ */
  --ob-bg:        hsl(35 14% 96%);
  --ob-panel:     #fffdf9;            /* Surface — warmes Weiss   */
  --ob-panel-2:   hsl(35 14% 93%);    /* Surface 2 / Tabellenkopf */
  --ob-line:      hsl(35 14% 86%);    /* Rahmen                   */
  --ob-line-2:    hsl(35 14% 80%);    /* Rahmen Inputs            */
  --ob-text:      hsl(25 18% 12%);
  --ob-text-2:    hsl(25 10% 22%);
  --ob-muted:     hsl(25 8% 42%);
  --ob-muted-2:   hsl(25 8% 55%);

  --ob-accent:        #b54a2c;        /* Terrakotta */
  --ob-accent-soft:   #d97a5a;
  --ob-accent-dark:   #a23f23;
  --ob-accent-alpha:  rgba(181,74,44,0.12);

  --ob-dark:        #191919;          /* Masthead / Footer */
  --ob-dark-text:   #f0f0f0;
  --ob-dark-muted:  #a9a9a9;

  --ob-ok:    #5d7d4b;
  --ob-amber: #b8902f;
  --ob-red:   #a23320;

  --ob-radius:    11px;
  --ob-radius-sm: 8px;
  --ob-radius-lg: 14px;
  --ob-pill:      22px;
  --ob-shadow-1:  0 1px 2px rgba(40,20,10,0.05);
  --ob-shadow-2:  0 4px 14px -10px rgba(40,20,10,0.40);
  --ob-shadow-3:  0 12px 36px -22px rgba(40,20,10,0.55);

  /* ─── Gitea-CSS-Variablen überschreiben ─── */
  --color-primary:           #b54a2c;
  --color-primary-dark-1:    #a23f23;
  --color-primary-dark-2:    #8f371e;
  --color-primary-dark-3:    #7a2f19;
  --color-primary-dark-4:    #682818;
  --color-primary-light-1:   #c25c3f;
  --color-primary-light-2:   #d97a5a;
  --color-primary-light-3:   #e29478;
  --color-primary-light-4:   #ecb39e;
  --color-primary-light-5:   #f6dccf;
  --color-primary-light-6:   #fbeee6;
  --color-primary-light-7:   #fdf5f0;
  --color-primary-alpha-30:  rgba(181,74,44,0.30);
  --color-primary-alpha-40:  rgba(181,74,44,0.40);
  --color-primary-alpha-50:  rgba(181,74,44,0.50);
  --color-primary-alpha-60:  rgba(181,74,44,0.60);
  --color-primary-alpha-70:  rgba(181,74,44,0.70);
  --color-primary-alpha-80:  rgba(181,74,44,0.80);
  --color-primary-alpha-90:  rgba(181,74,44,0.90);
  --color-primary-contrast:  #ffffff;

  --color-body:              hsl(35 14% 96%);
  --color-box-body:          #fffdf9;
  --color-box-header:        #fffdf9;
  --color-nav-bg:            #191919;
  --color-nav-hover-bg:      rgba(255,255,255,0.08);
  --color-footer:            #191919;
  --color-text:              hsl(25 18% 12%);
  --color-text-dark:         hsl(25 18% 8%);
  --color-text-light:        hsl(25 12% 20%);
  --color-text-light-1:      hsl(25 10% 32%);
  --color-text-light-2:      hsl(25 8% 42%);
  --color-text-light-3:      hsl(25 8% 55%);
  --color-secondary:              hsl(35 14% 86%);
  --color-secondary-dark-1:       hsl(35 14% 80%);
  --color-secondary-dark-2:       hsl(35 14% 74%);
  --color-secondary-light-1:      hsl(35 14% 93%);
  --color-secondary-light-2:      hsl(35 14% 95%);
  --color-input-text:        hsl(25 18% 12%);
  --color-input-background:  #fffdf9;
  --color-input-border:      hsl(35 14% 80%);
  --color-input-border-hover:#d97a5a;
  --color-border:            hsl(35 14% 86%);
  --color-light-border:      hsl(35 14% 88%);
  --color-hover:             hsl(35 14% 93%);
  --color-active:            hsl(35 14% 91%);
  --color-menu:              #fffdf9;
  --color-card:              #fffdf9;
  --color-markup-code-block: hsl(35 14% 93%);
  --color-markup-code-inline:hsl(35 14% 91%);
  --color-green:             #5d7d4b;
  --color-green-light:       #6f9159;
  --color-red:               #a23320;
  --color-orange:            #b8902f;
  --color-yellow:            #b8902f;
  --color-gold:              #b8902f;

  --border-radius:    11px;
  --border-radius-medium: 11px;
  --border-radius-full: 9999px;
}

/* ─── Basis-Typografie ──────────────────────────────────── */
body, .ui, input, select, textarea, button, a {
  font-family: var(--ob-sans) !important;
  -webkit-font-smoothing: antialiased;
}

code, pre, .code-view, .file-view code,
kbd, samp, .markup code, tt {
  font-family: var(--ob-mono) !important;
  font-size: 12.5px !important;
}

/* App-haft: Titel in Inter (Sans), nicht im Artikel-Serif. Kompakt. */
h1, h2, h3, h4,
.ui.header,
.markup h1, .markup h2, .markup h3, .markup h4 {
  font-family: var(--ob-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--ob-text) !important;
  line-height: 1.2 !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.35em !important;
}

h1, .markup h1, .repo-title { font-size: 1.55rem !important; font-weight: 700 !important; letter-spacing: -0.022em !important; }
h2, .markup h2 { font-size: 1.2rem !important; }
h3, .ui.header  { font-size: 1.02rem !important; }
h4 { font-size: 0.9rem !important; }

/* Chrome-Links ohne Unterstreichung (App-Look) */
#navbar .item, .ui.menu .item, .entry-name a,
#footer a, footer a, .repo-header a, .breadcrumb a {
  text-decoration: none !important;
}

/* Serif bleibt nur für echten Fliesstext-Markup (Issues, Wiki) optional —
   hier bewusst nichts erzwingen, damit die App nüchtern bleibt. */

body {
  background: var(--ob-bg) !important;
  color: var(--ob-text) !important;
  font-size: 14px !important;
}

/* ─── Kompaktere Abstände (weniger „aufgeblasen") ───────── */
.ui.segment            { padding: 13px 15px !important; }
.ui.attached.segment   { padding: 11px 15px !important; }
.ui.attached.header,
.ui.top.attached.header,
.file-header           { padding: 9px 14px !important; min-height: 0 !important; }
.ui.header             { margin-top: 0.4rem !important; margin-bottom: 0.5rem !important; }
.ui.menu .item         { padding-top: 8px !important; padding-bottom: 8px !important; }
.ui.table td,
.ui.table th           { padding-top: 8px !important; padding-bottom: 8px !important; }
.ui.list > .item,
.ui.divided.list > .item { padding-top: 7px !important; padding-bottom: 7px !important; }
.repository .header-wrapper,
.dashboard .feeds .news,
.flex-list .flex-item  { padding-top: 10px !important; padding-bottom: 10px !important; }
.markup > *:first-child { margin-top: 0 !important; }
.repository, .page-content { --page-spacing: 12px; }

/* ─── Masthead / Navbar — dunkel wie openbureau.ch ──────── */
#navbar,
.page-content .ui.secondary.menu#navbar,
nav#navbar {
  background: var(--ob-dark) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4) !important;
  padding: 0 20px !important;
}

/* Flache Navigation wie openbureau.ch (.site-nav) — kein Pillen-Hintergrund */
#navbar .item {
  color: #d4d4d4 !important;
  font-family: var(--ob-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  background: transparent !important;
  transition: color 0.15s, opacity 0.15s !important;
}

#navbar .item:hover {
  color: #ffffff !important;
  background: transparent !important;
}

#navbar .item.active,
#navbar .active.item {
  color: #ffffff !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Icon-/Avatar-Items im Masthead: dezenter Hover-Kreis */
#navbar .item.tw-p-0:hover,
#navbar .item > .ui.label { background: transparent !important; }

/* ─── Wortmarke: OPENBUREAU-Logo (eingebettet) ──────────── */
#navbar-logo {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding-right: 10px !important;
}

#navbar-logo img,
#navbar-logo svg {
  display: none !important;
}

#navbar-logo::after {
  content: "" !important;
  display: block !important;
  width: 135px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNDEyIDIzMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMCw1Ny41NDdsMTkuMTk2LDBsMCwtMTkuMTk2bDk1Ljk4MiwwbDAsMTkuMTk2bDE5LjE5NiwwbDAsMTE1LjE3OWwtMTkuMTk2LDBsMCwxOS4xOTZsLTk1Ljk4MiwwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwtMTE1LjE3OVptOTUuOTgyLDE5LjE5NmwtNTcuNTg5LDBsMCw3Ni43ODZsNTcuNTg5LDBsMCwtNzYuNzg2WiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNMTgyLjQwOSwxNTMuNTI5bDU3LjU4OSwwbDAsLTc2Ljc4NmwtNTcuNTg5LDBsMCw3Ni43ODZabTAsLTk1Ljk4MmwxOS4xOTYsMGwwLC0xOS4xOTZsNTcuNTg5LDBsMCwxOS4xOTZsMTkuMTk2LDBsMCwxMTUuMTc5bC0xOS4xOTYsMGwwLDE5LjE5NmwtNzYuNzg2LDBsMCwzOC4zOTNsLTM4LjM5MywwbDAsLTE5MS45NjRsMzguMzkzLDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik0yODguMDMyLDU3LjU0N2wxOS4xOTYsMGwwLC0xOS4xOTZsOTUuOTgyLDBsMCwxOS4xOTZsMTkuMTk2LDBsMCw3Ni43ODZsLTk1Ljk4MiwwbDAsMTkuMTk2bDk1Ljk4MiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLDE5LjE5NmwtOTUuOTgyLDBsMCwtMTkuMTk2bC0xOS4xOTYsMGwwLC0xMTUuMTc5Wm0zOC4zOTMsMzguMzkzbDU3LjU4OSwwbDAsLTE5LjE5NmwtNTcuNTg5LDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik00NzAuNDQsNTcuNTQ3bDE5LjE5NiwwbDAsLTE5LjE5Nmw1Ny41ODksMGwwLDE5LjE5NmwxOS4xOTYsMGwwLDEzNC4zNzVsLTM4LjM5MywwbDAsLTExNS4xNzlsLTU3LjU4OSwwbDAsMTE1LjE3OWwtMzguMzkzLDBsMCwtMTUzLjU3MWwzOC4zOTMsMGwwLDE5LjE5NloiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PHBhdGggZD0iTTYxNC40NTYsMTUzLjUyOWw1Ny41ODksMGwwLC03Ni43ODZsLTU3LjU4OSwwbDAsNzYuNzg2Wm0wLC05NS45ODJsMTkuMTk2LDBsMCwtMTkuMTk2bDU3LjU4OSwwbDAsMTkuMTk2bDE5LjE5NiwwbDAsMTE1LjE3OWwtMTkuMTk2LDBsMCwxOS4xOTZsLTExNS4xNzksMGwwLC0xOTEuOTY0bDM4LjM5MywwbDAsNTcuNTg5WiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNNzk2Ljg2NSwxOTEuOTIybC01Ny41ODksMGwwLC0xOS4xOTZsLTE5LjE5NiwwbDAsLTEzNC4zNzVsMzguMzkzLDBsMCwxMTUuMTc5bDU3LjU4OSwwbDAsLTExNS4xNzlsMzguMzkzLDBsMCwxNTMuNTcxbC0zOC4zOTMsMGwwLC0xOS4xOTZsLTE5LjE5NiwwbDAsMTkuMTk2WiIgc3R5bGU9ImZpbGw6I2ZmZjtmaWxsLXJ1bGU6bm9uemVybzsiLz48cGF0aCBkPSJNOTQwLjg4MSw3Ni43NDRsLTE5LjE5NiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLDk1Ljk4MmwtMzguMzkzLDBsMCwtMTUzLjU3MWwzOC4zOTMsMGwwLDE5LjE5NmwxOS4xOTYsMGwwLC0xOS4xOTZsMzguMzkzLDBsMCwxOS4xOTZsMTkuMTk2LDBsMCwxOS4xOTZsLTE5LjE5NiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLC0xOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik05ODguOTE1LDU3LjU0N2wxOS4xOTYsMGwwLC0xOS4xOTZsOTUuOTgyLDBsMCwxOS4xOTZsMTkuMTk2LDBsMCw3Ni43ODZsLTk1Ljk4MiwwbDAsMTkuMTk2bDk1Ljk4MiwwbDAsMTkuMTk2bC0xOS4xOTYsMGwwLDE5LjE5NmwtOTUuOTgyLDBsMCwtMTkuMTk2bC0xOS4xOTYsMGwwLC0xMTUuMTc5Wm0zOC4zOTMsMzguMzkzbDU3LjU4OSwwbDAsLTE5LjE5NmwtNTcuNTg5LDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjxwYXRoIGQ9Ik0xMTUyLjEyNywxNzIuNzI2bC0xOS4xOTYsMGwwLC01Ny41ODlsMTkuMTk2LDBsMCwtMTkuMTk2bDc2Ljc4NiwwbDAsLTE5LjE5NmwtOTUuOTgyLDBsMCwtMTkuMTk2bDE5LjE5NiwwbDAsLTE5LjE5Nmw5NS45ODIsMGwwLDE5LjE5NmwxOS4xOTYsMGwwLDEzNC4zNzVsLTM4LjM5MywwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwxOS4xOTZsLTU3LjU4OSwwbDAsLTE5LjE5NlptMTkuMTk2LC0xOS4xOTZsNTcuNTg5LDBsMCwtMTkuMTk2bC01Ny41ODksMGwwLDE5LjE5NloiIHN0eWxlPSJmaWxsOiNmZmY7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PHBhdGggZD0iTTEzNTMuNzMyLDE5MS45MjJsLTU3LjU4OSwwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwtMTM0LjM3NWwzOC4zOTMsMGwwLDExNS4xNzlsNTcuNTg5LDBsMCwtMTE1LjE3OWwzOC4zOTMsMGwwLDE1My41NzFsLTM4LjM5MywwbDAsLTE5LjE5NmwtMTkuMTk2LDBsMCwxOS4xOTZaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
  transition: opacity 0.15s !important;
}

#navbar-logo:hover::after {
  opacity: 0.85 !important;
}

/* ─── Box-/README-Header (dunklen Balken entfernen) ─────── */
.ui.top.attached.header,
.ui.attached.header,
h4.file-header,
.file-header,
.repo-button-row,
.ui.attached.segment {
  background: var(--ob-panel) !important;
  color: var(--ob-text) !important;
  border: 1px solid var(--ob-line) !important;
}

.ui.top.attached.header,
h4.file-header,
.file-header {
  border-radius: var(--ob-radius) var(--ob-radius) 0 0 !important;
  box-shadow: none !important;
}

.file-header .muted,
.file-header a {
  color: var(--ob-muted) !important;
}

/* ─── Cards, Segmente, Boxen ────────────────────────────── */
.ui.segment,
.ui.box,
.repository .ui.segment {
  background: var(--ob-panel) !important;
  border: 1px solid var(--ob-line-2) !important;   /* klare Haarlinie statt Schatten */
  border-radius: var(--ob-radius) !important;
  box-shadow: none !important;
}

.ui.segments {
  border: 1px solid var(--ob-line-2) !important;
  border-radius: var(--ob-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.ui.segments > .segment {
  border: none !important;
  border-top: 1px solid var(--ob-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--ob-panel) !important;
}

.ui.segments > .segment:first-child {
  border-top: none !important;
}

.ui.card,
.ui.cards > .card {
  background: var(--ob-panel) !important;
  border: 1px solid var(--ob-line-2) !important;
  border-radius: var(--ob-radius) !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}

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

/* ─── Buttons — Pill-Form wie im CMS ────────────────────── */
.ui.button,
.ui.buttons .button,
.btn {
  font-family: var(--ob-sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--ob-pill) !important;
  transition: all 0.13s !important;
  cursor: pointer !important;
}

/* Standard-Button = Panel + Linie, Hover = Terrakotta-Rand */
.ui.button:not(.primary):not(.basic):not(.red):not(.green):not(.negative):not(.positive):not(.labeled) {
  background: var(--ob-panel) !important;
  border: 1px solid var(--ob-line-2) !important;
  color: var(--ob-text) !important;
  box-shadow: none !important;
}
.ui.button:not(.primary):not(.basic):not(.red):not(.green):not(.negative):not(.positive):not(.labeled):hover {
  border-color: var(--ob-accent-soft) !important;
  color: var(--ob-text) !important;
}

/* Primary = Terrakotta-Füllung (wie CMS .primary) */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--ob-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--ob-accent) !important;
  box-shadow: none !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--ob-accent-dark) !important;
  border-color: var(--ob-accent-dark) !important;
}

/* Basic / Ghost = transparent, umrandet */
.ui.basic.button,
.ui.basic.buttons .button {
  background: transparent !important;
  border: 1px solid var(--ob-line-2) !important;
  color: var(--ob-text-2) !important;
  box-shadow: none !important;
}
.ui.basic.button:hover,
.ui.basic.buttons .button:hover {
  border-color: var(--ob-accent) !important;
  color: var(--ob-accent) !important;
  background: transparent !important;
}

/* Danger */
.ui.red.button, .ui.negative.button, .ui.danger.button {
  background: var(--ob-red) !important;
  color: #fff !important;
  border: 1px solid var(--ob-red) !important;
}
.ui.red.button:hover, .ui.negative.button:hover { background: #8a2b1a !important; }

/* Erfolg / Grün */
.ui.green.button, .ui.positive.button {
  background: var(--ob-ok) !important;
  color: #fff !important;
  border: 1px solid var(--ob-ok) !important;
}
.ui.green.button:hover, .ui.positive.button:hover { background: #4f6b40 !important; }

/* Icon-Buttons */
.btn-octicon {
  color: var(--ob-muted) !important;
  border-radius: var(--ob-radius-sm) !important;
  transition: all 0.13s !important;
}
.btn-octicon:hover {
  color: var(--ob-text) !important;
  background: var(--ob-panel-2) !important;
}

/* ─── Inputs ────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select,
.ui.input > input,
.ui.selection.dropdown {
  font-family: var(--ob-sans) !important;
  font-size: 13px !important;
  border-radius: var(--ob-radius) !important;
  border: 1px solid var(--ob-line-2) !important;
  background: var(--ob-panel) !important;
  color: var(--ob-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-shadow: none !important;
}

/* Such-, Filter- und einzeilige Action-Felder als volle Pille (wie CMS-Suche) */
input[type="search"],
.ui.search > input,
.search input,
.ui.action.input > input:not(textarea),
.repository .filter.menu + .ui.input input {
  border-radius: var(--ob-pill) !important;
}

/* Mehrzeiliges bleibt nur leicht gerundet */
textarea { border-radius: var(--ob-radius) !important; }

input:focus, textarea:focus, select:focus,
.ui.input.focus > input, .ui.input > input:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown {
  border-color: var(--ob-accent-soft) !important;
  box-shadow: 0 0 0 3px var(--ob-accent-alpha) !important;
  outline: none !important;
}

/* ─── Links ─────────────────────────────────────────────── */
a {
  color: var(--ob-text) !important;
  transition: color 0.12s !important;
}
a:hover {
  color: var(--ob-accent) !important;
}

a.muted, .muted {
  color: var(--ob-muted) !important;
}
a.muted:hover {
  color: var(--ob-text) !important;
}

/* Masthead-Links bleiben hell */
#navbar a, #navbar .item {
  color: var(--ob-dark-muted) !important;
}
#navbar a:hover, #navbar .item:hover {
  color: #ffffff !important;
}

/* Inhalts-Links (Markdown, Kommentare, Wiki) = Terrakotta */
.markup a, .comment-content a, .wiki-content a, .render-content a,
.markup a:visited {
  color: var(--ob-accent) !important;
}
.markup a:hover, .comment-content a:hover {
  color: var(--ob-accent-dark) !important;
}

/* Datei-/Repo-Listen */
.entry-name, .entry-name a {
  color: var(--ob-text) !important;
  font-weight: 500 !important;
}
.entry-name a:hover {
  color: var(--ob-accent) !important;
}

.repo-list .repo-list-link, .flex-item-title a {
  color: var(--ob-text) !important;
}

.grey.commit-summary, .commit-summary {
  color: var(--ob-text-2) !important;
}

.ui.label.commit-id-short,
.commit-id-short {
  background: var(--ob-panel-2) !important;
  color: var(--ob-muted) !important;
  border-color: var(--ob-line) !important;
  font-family: var(--ob-mono) !important;
  border-radius: var(--ob-radius-sm) !important;
}

/* ─── Tabellen ──────────────────────────────────────────── */
.ui.table {
  font-family: var(--ob-sans) !important;
  border: 1px solid var(--ob-line-2) !important;
  border-radius: var(--ob-radius) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: var(--ob-panel) !important;
}

.ui.table thead th {
  background: var(--ob-panel-2) !important;
  color: var(--ob-muted) !important;
  font-family: var(--ob-display) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-align: left !important;
  border-bottom: 1px solid var(--ob-line) !important;
}

.ui.table tbody tr:hover td,
.ui.table tr:hover {
  background: hsl(35 14% 94%) !important;
}

.ui.table td {
  border-bottom: 1px solid var(--ob-line) !important;
  color: var(--ob-text) !important;
}

/* ─── Labels / Badges ───────────────────────────────────── */
.ui.label {
  font-family: var(--ob-display) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
  border-radius: var(--ob-pill) !important;
  padding: 3px 10px !important;
}

.ui.green.label,
.ui.positive.label  { background: color-mix(in oklab, var(--ob-ok) 16%, transparent) !important; color: var(--ob-ok) !important; border-color: color-mix(in oklab, var(--ob-ok) 35%, transparent) !important; }
.ui.red.label,
.ui.negative.label  { background: color-mix(in oklab, var(--ob-red) 12%, transparent) !important; color: var(--ob-red) !important; border-color: color-mix(in oklab, var(--ob-red) 35%, transparent) !important; }
.ui.orange.label,
.ui.yellow.label { background: color-mix(in oklab, var(--ob-amber) 16%, transparent) !important; color: var(--ob-amber) !important; border-color: color-mix(in oklab, var(--ob-amber) 35%, transparent) !important; }
.ui.label:not(.green):not(.red):not(.orange):not(.yellow):not(.positive):not(.negative) {
  background: color-mix(in oklab, var(--ob-accent) 14%, transparent) !important;
  color: var(--ob-text) !important;
  border-color: transparent !important;
}

/* ─── Tabs (tabular) — Akzent-Unterstrich ───────────────── */
.ui.tabular.menu {
  border-bottom: 1px solid var(--ob-line) !important;
}

.ui.tabular.menu .item {
  font-family: var(--ob-display) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ob-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  transition: all 0.15s !important;
}

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

.ui.tabular.menu .item:hover {
  color: var(--ob-text) !important;
  background: var(--ob-panel-2) !important;
}

/* ─── Repo-Tabs (Code/Issues/Pulls …) als Pills ─────────── */
.ui.secondary.pointing.menu {
  border-bottom: none !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 4px 0 14px 0 !important;
}

.ui.secondary.pointing.menu .item {
  border: 1px solid var(--ob-line-2) !important;
  border-radius: var(--ob-pill) !important;
  background: var(--ob-panel) !important;
  color: var(--ob-muted) !important;
  font-family: var(--ob-display) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  margin: 0 !important;
  transition: all 0.15s !important;
  box-shadow: none !important;
}

.ui.secondary.pointing.menu .item:hover {
  border-color: var(--ob-accent-soft) !important;
  color: var(--ob-text) !important;
  background: var(--ob-panel) !important;
}

.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .item.active {
  border-color: var(--ob-dark) !important;
  background: var(--ob-dark) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.ui.secondary.pointing.menu .active.item .label,
.ui.secondary.pointing.menu .active.item .ui.label {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

/* ─── Meldungen ─────────────────────────────────────────── */
.ui.positive.message, .ui.success.message {
  background: color-mix(in oklab, var(--ob-ok) 12%, var(--ob-bg)) !important;
  border: 1px solid color-mix(in oklab, var(--ob-ok) 35%, transparent) !important;
  color: var(--ob-ok) !important; border-radius: var(--ob-radius-sm) !important;
}
.ui.negative.message, .ui.error.message {
  background: color-mix(in oklab, var(--ob-red) 9%, var(--ob-bg)) !important;
  border: 1px solid color-mix(in oklab, var(--ob-red) 32%, transparent) !important;
  color: var(--ob-red) !important; border-radius: var(--ob-radius-sm) !important;
}
.ui.info.message, .ui.warning.message {
  background: color-mix(in oklab, var(--ob-amber) 12%, var(--ob-bg)) !important;
  border: 1px solid color-mix(in oklab, var(--ob-amber) 32%, transparent) !important;
  color: #7a5f1f !important; border-radius: var(--ob-radius-sm) !important;
}

/* ─── Seitenleiste ──────────────────────────────────────── */
.repository .sidebar,
.ui.segment.sidebar {
  background: var(--ob-panel-2) !important;
  border-color: var(--ob-line) !important;
}

/* Aktives Listenelement in VERTIKALEN Menüs/Sidebars: Terrakotta-Schiene (wie CMS).
   Bewusst NICHT für horizontale Menüs (Tabs), sonst klebt links ein Balken. */
.repository .sidebar .active.item,
.ui.vertical.menu .active.item,
.repository .selected.list .selected.item {
  box-shadow: inset 3px 0 0 var(--ob-accent) !important;
}

/* ─── Code & Diff ───────────────────────────────────────── */
.code-view, .diff-file-box, .file-view {
  border: 1px solid var(--ob-line) !important;
  border-radius: var(--ob-radius) !important;
  background: var(--ob-panel) !important;
}

.diff-file-header, .code-view-menu {
  background: var(--ob-panel-2) !important;
  border-bottom: 1px solid var(--ob-line) !important;
  font-family: var(--ob-mono) !important;
  font-size: 12px !important;
}

.code-line-num, .lines-num { color: var(--ob-muted-2) !important; }

.add-comment, .markup pre,
.code-view .lines-code, .file-view .lines-code {
  background: var(--ob-panel) !important;
}

/* ─── Footer — dunkel wie openbureau.ch ─────────────────── */
#footer, footer, .page-footer, .ui.footer {
  background: var(--ob-dark) !important;
  border-top: none !important;
  font-family: var(--ob-display) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em !important;
}

#footer, #footer a, footer a,
.page-footer, .page-footer a,
.page-footer .item { color: var(--ob-dark-muted) !important; }
#footer a:hover, footer a:hover,
.page-footer a:hover { color: var(--ob-accent-soft) !important; }

/* ─── Repo-Header (Breadcrumb) ──────────────────────────── */
.repo-header,
.repository .header-wrapper {
  background: var(--ob-panel) !important;
  border: 1px solid var(--ob-line-2) !important;
  border-radius: var(--ob-radius) !important;
  padding: 12px 18px !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}

.repo-header .flex-item-title a,
.repo-title a {
  color: var(--ob-muted) !important;
  font-weight: 400 !important;
}
.repo-header .flex-item-title a:last-child,
.repo-title a:last-child {
  color: var(--ob-text) !important;
  font-weight: 600 !important;
}
.repo-header .flex-item-title a:hover {
  color: var(--ob-accent) !important;
}

/* ─── Dropdown-Menüs ────────────────────────────────────── */
.ui.dropdown .menu {
  border: 1px solid var(--ob-line) !important;
  border-radius: var(--ob-radius) !important;
  box-shadow: var(--ob-shadow-3) !important;
  background: var(--ob-panel) !important;
}

.ui.dropdown .menu .item {
  font-family: var(--ob-sans) !important;
  font-size: 13px !important;
  color: var(--ob-text) !important;
  transition: background 0.1s !important;
}

.ui.dropdown .menu .item:hover {
  background: var(--ob-panel-2) !important;
  color: var(--ob-text) !important;
}

.ui.dropdown .menu .active.item {
  color: var(--ob-accent) !important;
  font-weight: 600 !important;
}

/* ─── Tippy-Popups (Clone, Tooltips) ────────────────────── */
.tippy-box {
  background: var(--ob-panel) !important;
  border: 1px solid var(--ob-line) !important;
  border-radius: var(--ob-radius) !important;
  box-shadow: var(--ob-shadow-3) !important;
  color: var(--ob-text) !important;
}

.tippy-box .tippy-content {
  background: var(--ob-panel) !important;
  color: var(--ob-text) !important;
  padding: 12px !important;
}

.tippy-box .tippy-arrow { color: var(--ob-panel) !important; }

.clone-panel-popup { background: var(--ob-panel) !important; color: var(--ob-text) !important; }

.clone-panel-tab {
  background: var(--ob-panel-2) !important;
  border-bottom: 1px solid var(--ob-line) !important;
}

.clone-panel-tab .item {
  color: var(--ob-muted) !important;
  font-family: var(--ob-display) !important;
  font-size: 12px !important;
}

.clone-panel-tab .item.selected,
.clone-panel-tab .item.active {
  color: var(--ob-text) !important;
  border-bottom: 2px solid var(--ob-accent) !important;
  font-weight: 600 !important;
}

.clone-panel-field input {
  background: var(--ob-panel) !important;
  border: 1px solid var(--ob-line-2) !important;
  color: var(--ob-text) !important;
  font-family: var(--ob-mono) !important;
  font-size: 12px !important;
}

/* ─── Avatare: runde Kreise statt eckigem Block ─────────── */
.ui.avatar,
.ui.avatar.image,
.ui.avatar img,
img.avatar,
a.avatar img,
.comment .avatar img,
.timeline-avatar img,
.flex-item-leading .ui.avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
  background: transparent !important;
}