/* ============================================================
   MCBHub — Theme "mcbhub2"
   Richtung: an GitHub angelehnt, aber moderner und ruhiger.

   Prinzipien:
   - Neutrale Graustufen statt gesättigtem Indigo. Farbe kommt
     nur vom Akzent, nicht von der Fläche.
   - Kein Glas, keine Verläufe, keine Schatten. Flächen werden
     durch 1px-Kanten getrennt, nicht durch Unschärfe.
   - Eine Radius-Stufe (6px). Pillen nur für Labels/Zähler.
   - Inter statt Poppins: bei 13-14px deutlich besser lesbar.

   Das alte Theme "mcbhub" bleibt unangetastet und waehlbar.
   ============================================================ */
@import url("theme-forgejo-dark.css");

/* ---------------- Schrift ---------------- */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/inter-700.woff2") format("woff2"); }

:root {
  --fonts-proportional: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------------- Flächen: neutrale Graustufen ----------------
     Die gesamte Oberfläche haengt an dieser Skala. */
  --steel-900: #010409;   /* Footer, tiefste Fläche */
  --steel-850: #0d1117;   /* Kopfleiste */
  --steel-800: #0d1117;   /* Body */
  --steel-750: #0d1117;   /* Box-Body — flach mit dem Body */
  --steel-700: #151b23;   /* Karten, Menüs, Box-Header */
  --steel-650: #21262d;   /* Inputs, aktive Zustände */
  --steel-600: #262c36;   /* Hover */
  --steel-550: #3d444d;   /* Kanten */
  --steel-500: #4a525c;
  --steel-450: #58616c;
  --steel-400: #656d78;
  --steel-350: #737b86;
  --steel-300: #838b95;
  --steel-250: #9198a1;   /* gedaempfter Text */
  --steel-200: #b1b8c0;
  --steel-150: #d1d7de;
  --steel-100: #f0f6fc;   /* Haupttext */

  /* ---------------- Akzent: MCBHub-Violett ----------------
     Einzige Farbe im Interface. Alles andere ist grau. */
  --color-primary: #7f6bf6;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #8f7ef8;
  --color-primary-active: #6c58fa;
  --color-primary-light-1: #8f7ef8;
  --color-primary-light-2: #6c58fa;
  --color-primary-light-3: #5a45ed;
  --color-primary-light-4: #4a38c8;
  --color-primary-light-5: #3b2ca1;
  --color-primary-light-6: #2a1f73;
  --color-primary-light-7: #221a5e;
  --color-primary-dark-1: #9285ff;
  --color-primary-dark-2: #a79cff;
  --color-primary-dark-3: #bbb2ff;
  --color-primary-dark-4: #cec8ff;
  --color-primary-dark-5: #dfdbff;
  --color-primary-dark-6: #ece9ff;
  --color-primary-dark-7: #f6f5ff;
  /* Diese Alpha-Werte faerben Fokusringe, Auswahl und Hover im ganzen
     Interface. Ohne sie bleibt Forgejos Orange (#ea580c) stehen. */
  --color-primary-alpha-10: #6c58fa19;
  --color-primary-alpha-20: #6c58fa33;
  --color-primary-alpha-30: #6c58fa4b;
  --color-primary-alpha-40: #6c58fa66;
  --color-primary-alpha-50: #6c58fa80;
  --color-primary-alpha-60: #6c58fa99;
  --color-primary-alpha-70: #6c58fab3;
  --color-primary-alpha-80: #6c58facc;
  --color-primary-alpha-90: #6c58fae1;

  /* ---------------- Kanten & Rundungen ---------------- */
  --color-light-border: #3d444d;
  --color-secondary: #21262d;
  --color-shadow: transparent;
  --mcb-border: #2a3038;
  --mcb-border-strong: #3d444d;
  --mcb-radius: 6px;
}

/* ---------------- Grundlagen ---------------- */
body {
  font-family: var(--fonts-proportional);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
* { letter-spacing: normal !important; }

/* Glas und Schatten konsequent entfernen */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.ui.segment, .ui.card, .ui.menu, .ui.dropdown .menu, .ui.attached.header,
.ui.attached.segment, .repository .header-wrapper, .page-content .ui.container > .ui.segment {
  box-shadow: none !important;
}

/* ---------------- Kopfleiste: flach mit Kante ---------------- */
#navbar, .ui.secondary.menu#navbar {
  background: var(--steel-850) !important;
  border-bottom: 1px solid var(--mcb-border) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  min-height: 52px;
}
#navbar .item {
  border-radius: var(--mcb-radius) !important;
  font-weight: 500;
  color: var(--steel-150) !important;
}
#navbar .item:hover { background: var(--steel-600) !important; color: var(--steel-100) !important; }
/* Marke: die Wortmarke steckt fest im Template (head_navbar.tmpl). */
#navbar #navbar-logo img.mcbhub-wordmark { height: 22px; width: auto; display: block; }
#navbar #navbar-logo { padding-right: 1rem !important; }
#navbar #navbar-logo:hover { background: transparent !important; }

/* ============================================================
   NAVIGATION ALS SEITENLEISTE
   Forgejo liefert die Navigation als waagerechte Kopfleiste.
   Ab 1000px Breite wird daraus eine feste Spalte links; darunter
   bleibt es die Kopfleiste, sonst frisst sie den halben Bildschirm.
   ============================================================ */
@media (min-width: 1000px) {
  :root { --mcb-sidebar: 224px; --mcb-header: 48px; }

  #navbar, .ui.secondary.menu#navbar {
    position: fixed;
    top: 0; left: 0;
    width: var(--mcb-sidebar);
    height: 100vh;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: .15rem;
    padding: 1rem .7rem !important;
    border-right: 1px solid var(--mcb-border) !important;
    border-bottom: none !important;
    overflow: visible;
    z-index: 100;
  }

  /* Inhalt ruecken nach rechts und unter die Kopfleiste */
  .full.height { padding-left: var(--mcb-sidebar); padding-top: var(--mcb-header); }
  .page-footer { padding-left: var(--mcb-sidebar); }

  /* Die Navigationsgruppe stapelt sich in der Spalte */
  #navbar .navbar-left {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    gap: .15rem;
  }

  #navbar .item {
    justify-content: flex-start !important;
    width: 100% !important;
    padding: .45rem .6rem !important;
    margin: 0 !important;
  }
  #navbar #navbar-logo { margin-bottom: 1rem !important; padding: .2rem .6rem !important; }

  /* Aufklappmenues duerfen aus der schmalen Spalte herausragen */
  #navbar .ui.dropdown .menu {
    left: 0 !important; right: auto !important;
    min-width: 240px;
  }
  /* ---- Kopfleiste oben rechts ----
     Glocke, "+" und Profil sitzen nicht in der Spalte, sondern in
     einem eigenen Balken oben, der rechts neben der Spalte beginnt. */
  #navbar .navbar-right {
    position: fixed;
    top: 0;
    left: var(--mcb-sidebar);
    right: 0;
    height: var(--mcb-header);
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .25rem;
    width: auto !important;
    margin: 0 !important;
    padding: 0 1rem !important;
    /* !important noetig: die Regel weiter oben macht alle Navbar-Gruppen
       transparent, sonst scrollt der Inhalt sichtbar dahinter durch. */
    background: var(--steel-850) !important;
    border-bottom: 1px solid var(--mcb-border) !important;
    z-index: 90;
  }
  #navbar .navbar-right > .item, #navbar .navbar-right > details.dropdown {
    width: auto !important;
    flex: 0 0 auto;
  }

  /* Menues klappen hier nach unten auf und richten sich rechts aus.
     Forgejo 15 nutzt <details class="dropdown"> mit <div class="content">. */
  #navbar .navbar-right details.dropdown > .content {
    top: 100% !important;
    bottom: auto !important;
    left: auto !important;
    right: 0 !important;
    margin-top: .35rem;
    min-width: 220px;
  }
}
/* Die Gruppen in der Navbar sind selbst .ui.secondary.menu — sie duerfen
   nicht wie Karten aussehen. Nur echte Dropdowns behalten Flaeche. */
#navbar > .ui.menu, .navbar-left, .navbar-right, .navbar-mobile-right {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------------- Flächen: Karten, Segmente, Menüs ---------------- */
.ui.segment, .ui.attached.segment, .ui.card, .ui.menu, .ui.dropdown .menu,
.ui.attached.header, .ui.top.attached.header, .ui.bottom.attached.segment,
#dashboard-repo-list .ui.segment {
  background: var(--steel-700) !important;
  border: 1px solid var(--mcb-border) !important;
  border-radius: var(--mcb-radius) !important;
}
.ui.attached.header + .ui.attached.segment,
.ui.top.attached.header { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ui.bottom.attached.segment { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; }

/* Listeneintraege ruhig halten */
.flex-item { border-radius: var(--mcb-radius); transition: background .1s ease; }
.flex-item:hover { background: var(--steel-700); }

/* ---------------- Buttons: flach, eine Radius-Stufe ---------------- */
.ui.button {
  border-radius: var(--mcb-radius) !important;
  background: var(--steel-700) !important;
  border: 1px solid var(--mcb-border-strong) !important;
  color: var(--steel-100) !important;
  font-family: var(--fonts-proportional);
  font-weight: 500;
  font-size: 13px;
  padding: .5rem .85rem;
  background-image: none !important;
  box-shadow: none !important;
  transition: background .1s ease, border-color .1s ease;
}
.ui.button:hover { background: var(--steel-600) !important; border-color: var(--steel-500) !important; }
.ui.primary.button, .ui.primary.buttons .button {
  background: var(--color-primary) !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #fff !important;
}
.ui.primary.button:hover, .ui.primary.buttons .button:hover {
  background: var(--color-primary-hover) !important;
}
.ui.basic.button { background: transparent !important; }

/* ---------------- Formulare ---------------- */
.ui.form input[type="text"], .ui.form input[type="password"], .ui.form input[type="email"],
.ui.form input[type="search"], .ui.form input[type="url"], .ui.form input[type="number"],
.ui.form textarea, .ui.selection.dropdown, .ui.input > input {
  background: var(--steel-900) !important;
  border: 1px solid var(--mcb-border-strong) !important;
  border-radius: var(--mcb-radius) !important;
  color: var(--steel-100) !important;
  font-family: var(--fonts-proportional);
  font-size: 14px;
}
.ui.form input:focus, .ui.form textarea:focus, .ui.selection.dropdown.active {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
  outline: none !important;
}

/* Chrome faerbt automatisch ausgefuellte Felder eigenmaechtig ein.
   Der Inset-Schatten ist der einzige Weg, das zu ueberschreiben. */
.ui.form .field.field input:-webkit-autofill,
.ui.form .field.field input:-webkit-autofill:hover,
.ui.form .field.field input:-webkit-autofill:focus,
.ui.form .field.field input:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--steel-100) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--steel-900) inset !important;
  box-shadow: 0 0 0 1000px var(--steel-900) inset !important;
  caret-color: var(--steel-100);
  transition: background-color 9999s ease-out 0s;
}

/* ---------------- Anmelden / Registrieren ---------------- */
.page-content.user.signin::before,
.page-content.user.signup::before,
.page-content.user.activate::before,
.page-content.user.forgot.password::before {
  content: "";
  display: block;
  height: 56px;
  margin: 48px auto 20px;
  background: url("../img/mcbhub-wordmark.png") center / contain no-repeat;
}
.page-content.user .ui.attached.segment,
.page-content.user .ui.top.attached.header {
  background: var(--steel-700) !important;
  border: 1px solid var(--mcb-border) !important;
}
.page-content.user .ui.top.attached.header {
  text-align: center;
  font-weight: 600;
}

/* ---------------- Labels & Zähler: hier sind Pillen richtig ---------------- */
.ui.label, .ui.basic.label {
  border-radius: 2em !important;
  font-weight: 500;
  font-size: 12px;
  background: var(--steel-650) !important;
  border: 1px solid var(--mcb-border) !important;
  color: var(--steel-150) !important;
}

/* ---------------- Avatare: rund wie bei GitHub ---------------- */
.ui.avatar, .ui.avatar img, .avatar img, img.ui.avatar {
  border-radius: 50% !important;
}

/* ---------------- Typografie ---------------- */
.ui.header, h1, h2, h3, h4 {
  font-family: var(--fonts-proportional) !important;
  font-weight: 600 !important;
  color: var(--steel-100);
}
a { color: var(--color-primary-dark-1); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Repo-Reiter ruhiger */
.repository .header-wrapper .ui.tabs.container .item,
.overflow-menu .overflow-menu-items .item {
  border-radius: var(--mcb-radius) var(--mcb-radius) 0 0 !important;
  font-weight: 500;
}

/* ---------------- Leerzustaende ---------------- */
.mcbhub-empty {
  border: 1px dashed var(--mcb-border-strong);
  border-radius: var(--mcb-radius);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--steel-250);
}

/* ---------------- Footer ---------------- */
.page-footer {
  background: var(--steel-900);
  border-top: 1px solid var(--mcb-border);
  color: var(--steel-300);
}

::selection { background: color-mix(in srgb, var(--color-primary) 45%, transparent); }

/* ============================================================
   REPOSITORY
   ============================================================ */
/* Sprachbalken: duenner und entsaettigt, statt Regenbogen quer
   ueber die volle Breite. Der Container hat keine Klasse. */
stats-bar, div:has(> .slice) {
  height: 6px !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.slice { filter: saturate(.7); }

/* Reiterleiste ruhiger */
.repository .header-wrapper .ui.tabs.container .item { font-size: 13px; }

/* ============================================================
   STARTSEITE (nicht angemeldet)
   ============================================================ */
.mcbhub-landing {
  max-width: 520px;
  margin: 0 auto;
  padding: 12vh 1.5rem 4rem;
  text-align: center;
}
.mcbhub-landing-logo { height: 52px; width: auto; margin: 0 auto 1.25rem; display: block; }
.mcbhub-landing-sub {
  color: var(--steel-250);
  font-size: 15px;
  margin: 0 0 2rem;
}
.mcbhub-landing-actions {
  display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap;
}
.mcbhub-landing-actions .ui.button { padding: .6rem 1.1rem; font-size: 14px; }

/* ============================================================
   DASHBOARD
   Repos sind der Hauptinhalt, Aktivitaet die Nebenspalte.
   ============================================================ */

/* ---- Schlanke Kopfzeile statt Hero-Block ---- */
.mcbhub-dash .mcbhub-bar {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 1rem;
  padding: 1.25rem 0 1rem;
  margin-bottom: .75rem;
}
/* Die Wortmarke sitzt jetzt oben links in der Kopfleiste, nicht mehr hier. */
.mcbhub-dash .mcbhub-bar-logo { display: none; }
.mcbhub-dash .mcbhub-bar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mcbhub-dash .mcbhub-hero { display: none !important; }

/* ---- Zweispaltig: Repos breit, Aktivitaet schmal ---- */
.mcbhub-dash .mcbhub-grid { display: flex; align-items: flex-start; gap: 2rem; }
.mcbhub-dash .mcbhub-grid > #dashboard-repo-list.flex-container-sidebar {
  order: 1; flex: 1 1 auto; width: auto; max-width: none; min-width: 0;
}
.mcbhub-dash .mcbhub-grid > .mcbhub-activity.flex-container-main {
  order: 2; flex: 0 0 340px; width: 340px; max-width: 340px; min-width: 0;
}
@media (max-width: 1100px) {
  .mcbhub-dash .mcbhub-grid { flex-direction: column; }
  .mcbhub-dash .mcbhub-grid > #dashboard-repo-list.flex-container-sidebar,
  .mcbhub-dash .mcbhub-grid > .mcbhub-activity.flex-container-main {
    flex: 1 1 auto; width: 100%; max-width: none;
  }
}

/* ---- Repo-Panel entkasteln: Suche und Liste stehen frei ---- */
.mcbhub-dash #dashboard-repo-list .ui.top.attached.segment.repos-search,
.mcbhub-dash #dashboard-repo-list .ui.attached.table.segment,
.mcbhub-dash #dashboard-repo-list .ui.attached.segment {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mcbhub-dash #dashboard-repo-list .repos-search { margin-bottom: 1rem !important; }
.mcbhub-dash #dashboard-repo-list .repos-filter { margin-top: .6rem !important; }
.mcbhub-dash #dashboard-repo-list .repos-filter .item {
  font-size: 13px; font-weight: 500; padding: .3rem .6rem !important;
}

/* Die Reiter "Repositorys / Organisationen" leiser */
.mcbhub-dash #dashboard-repo-list .tabs-with-labels {
  background: transparent !important; border: none !important;
  margin: 0 0 .75rem !important;
}
.mcbhub-dash #dashboard-repo-list .tabs-with-labels .item {
  font-weight: 600; font-size: 13px; padding: .35rem .7rem !important;
}

/* ---- Repos als Liste: eine Tabelle mit ruhigen Trennlinien ---- */
.mcbhub-dash #dashboard-repo-list ul.repo-owner-name-list {
  margin: 0 !important; padding: 0 !important; list-style: none;
  border: 1px solid var(--mcb-border);
  border-radius: var(--mcb-radius);
  overflow: hidden;
}
.mcbhub-dash #dashboard-repo-list ul.repo-owner-name-list > li {
  margin: 0 !important;
  padding: .5rem .85rem !important;
  background: var(--steel-700);
  border-bottom: 1px solid var(--mcb-border);
  transition: background .1s ease;
}
.mcbhub-dash #dashboard-repo-list ul.repo-owner-name-list > li:last-child { border-bottom: none; }
.mcbhub-dash #dashboard-repo-list ul.repo-owner-name-list > li:hover { background: var(--steel-600); }

/* ---- Aktivitaet beruhigen ---- */
.mcbhub-dash .mcbhub-activity .flex-item-trailing { display: none; }
.mcbhub-dash .mcbhub-activity .flex-item {
  padding: .4rem 0; font-size: 13px; line-height: 1.45;
}
.mcbhub-dash .mcbhub-activity .flex-item:hover { background: transparent; }
.mcbhub-dash .mcbhub-activity .flex-item-leading .ui.avatar { width: 18px; height: 18px; }

/* ---- Abschnittsueberschriften ---- */
.mcbhub-dash .mcbhub-section-title {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--steel-300);
  margin: 0 0 .85rem; padding: 0; border: none;
}

/* ---- Kontextleiste ueber dem Dashboard ---- */
.dashboard .secondary-nav {
  background: transparent !important;
  border-bottom: 1px solid var(--mcb-border) !important;
  padding: .4rem 0 !important;
}