/* ============================================================
   MCBHub — Forgejo-Theme v2
   Basis: forgejo-dark. Nicht nur umgefärbt, sondern eigene
   Formensprache: schwebende Glas-Navbar, Pill-Buttons,
   Glas-Karten, Squircle-Avatare, Logo-Gradient als Signatur.
   Markenwelt: MCBHub-Logo (#156ff6 → #5a45ed → #a028ea) +
   Studio-Website (dunkles Glassmorphism, Poppins).
   ============================================================ */
@import url("theme-forgejo-dark.css");

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}

:root {
  /* ---- Flächen: tiefes Indigo-Navy, mehr Kontrast Body ↔ Karten ---- */
  --steel-900: #080a14;
  --steel-850: #0b0d1a;
  --steel-800: #0d0f1f;   /* Body — deutlich dunkler als Karten */
  --steel-750: #161a33;   /* Box-Body */
  --steel-700: #1c2140;   /* Box-Header, Karten, Menüs */
  --steel-650: #242a4e;   /* Inputs */
  --steel-600: #313963;
  --steel-550: #3f4877;
  --steel-500: #4d578c;
  --steel-450: #5c669d;
  --steel-400: #6b76ad;
  --steel-350: #7b86bc;
  --steel-300: #8c97ca;
  --steel-250: #9ea8d6;
  --steel-200: #b1bae2;
  --steel-150: #c5cdee;
  --steel-100: #d9dff8;

  /* ---- Primary = Logo-Violett ---- */
  --color-primary: #7d6bff;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #6c58fa;
  --color-primary-active: #5a45ed;
  --color-primary-light-1: #6c58fa;
  --color-primary-light-2: #5a45ed;
  --color-primary-light-3: #4a38c8;
  --color-primary-light-4: #3b2ca1;
  --color-primary-light-5: #2f237f;
  --color-primary-light-6: #251b63;
  --color-primary-light-7: #1c144c;
  --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;
  --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;

  --color-secondary-alpha-10: #242a4e19;
  --color-secondary-alpha-20: #242a4e33;
  --color-secondary-alpha-30: #242a4e4b;
  --color-secondary-alpha-40: #242a4e66;
  --color-secondary-alpha-50: #242a4e80;
  --color-secondary-alpha-60: #242a4e99;
  --color-secondary-alpha-70: #242a4eb3;
  --color-secondary-alpha-80: #242a4ecc;
  --color-secondary-alpha-90: #242a4ee1;
  --color-header-wrapper: transparent;
  --color-header-wrapper-transparent: #0b0d1a00;

  --color-selection-bg: #5a45ed66;
  --color-selection-fg: #ffffff;

  /* Weichere Geometrie überall (Basis nutzt diese Variablen) */
  --border-radius: 10px;
  --border-radius-medium: 14px;
  --border-radius-circle: 50%;

  --color-shadow: #04050e99;
  --mcb-grad: linear-gradient(135deg, #156ff6 0%, #5a45ed 55%, #a028ea 100%);
  --mcb-glass-border: rgba(255, 255, 255, 0.07);
}

/* ================= Atmosphäre ================= */
body {
  background-image:
    radial-gradient(1000px 540px at 82% -12%, rgba(90, 69, 237, 0.16), transparent 60%),
    radial-gradient(800px 480px at 0% -4%, rgba(21, 111, 246, 0.11), transparent 55%),
    radial-gradient(900px 600px at 50% 115%, rgba(160, 40, 234, 0.07), transparent 60%);
  background-attachment: fixed;
}

/* ================= Navbar: schwebendes Glas ================= */
#navbar {
  margin: 10px 14px 2px;
  border-radius: 16px;
  border: 1px solid var(--mcb-glass-border);
  background: rgba(11, 13, 26, 0.72);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.65);
}
#navbar .item {
  border-radius: 10px;
}
#navbar #navbar-logo::after {
  content: "MCBHub";
  font-family: "Poppins", var(--fonts-regular);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-left: 9px;
  background: linear-gradient(90deg, #fff 0%, #fff 44%, #4d8bf8 56%, #a028ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 767px) {
  #navbar #navbar-logo::after { display: none; }
}

/* ================= Buttons: Pills ================= */
.ui.button {
  border-radius: 999px;
  transition: filter 0.15s, transform 0.08s, box-shadow 0.2s;
}
.ui.button:active { transform: translateY(1px); }
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--mcb-grad);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px -8px rgba(90, 69, 237, 0.8);
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--mcb-grad);
  filter: brightness(1.12);
  box-shadow: 0 8px 22px -8px rgba(90, 69, 237, 0.95);
}
.ui.primary.button:focus,
.ui.primary.button:active,
.ui.primary.buttons .button:focus,
.ui.primary.buttons .button:active {
  background: var(--mcb-grad);
  filter: brightness(0.94);
}
/* kleine Icon-/Beschriftungs-Buttons nicht überrunden */
.ui.dropdown.button .menu { border-radius: 14px; }

/* ================= Karten & Boxen: Glas ================= */
.ui.segment,
.ui.segments,
.ui.card,
.ui.list .list > .item .ui.segment {
  border-color: var(--mcb-glass-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
.ui.attached.header {
  border-color: var(--mcb-glass-border);
}
.ui.top.attached.header {
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
.ui.bottom.attached.segment {
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
}
.ui.card { border-radius: var(--border-radius-medium); }

/* Dashboard-/Listen-Zeilen sanft abrunden + Hover */
.flex-item {
  border-radius: 10px;
  transition: background 0.12s;
}
.flex-item:hover { background: rgba(255, 255, 255, 0.025); }

/* ================= Menüs & Dropdowns ================= */
.ui.dropdown .menu,
.ui.menu .dropdown.item .menu {
  border-radius: 14px;
  border: 1px solid var(--mcb-glass-border);
  background: rgba(22, 26, 51, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.ui.dropdown .menu > .item { border-radius: 8px; margin: 2px 4px; width: auto; }
.ui.vertical.menu, .ui.secondary.vertical.menu {
  border-radius: 14px !important;
  border-color: var(--mcb-glass-border);
}

/* Tabs: aktiver Tab klar in Markenfarbe */
.overflow-menu .overflow-menu-items .item.active {
  border-bottom-color: var(--color-primary) !important;
}

/* ================= Formulare ================= */
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.selection.dropdown {
  border-radius: 10px;
}
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown.active {
  border-color: #6c58fa !important;
  box-shadow: 0 0 0 3px rgba(108, 88, 250, 0.25) !important;
}

/* ================= Avatare: Squircle ================= */
.ui.avatar.image,
.ui.avatar.images .image,
img.avatar,
.avatar img {
  border-radius: 30% !important;
}

/* ================= Labels ================= */
.ui.label { border-radius: 999px; }
.ui.basic.label { border-color: var(--mcb-glass-border); }

/* ================= Login / Registrierung ================= */
.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: 92px;
  margin: 34px auto 2px;
  background: url("../img/mcbhub-wordmark.png") center / contain no-repeat;
  filter: drop-shadow(0 14px 34px rgba(90, 69, 237, 0.35));
}
.page-content.user.signin .ui.form,
.page-content.user.signup .ui.form {
  border-radius: 18px;
}
.page-content.user .ui.segment,
.page-content.user .ui.attached.segment {
  border-radius: 18px;
  border: 1px solid var(--mcb-glass-border);
  background: rgba(20, 24, 47, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.page-content.user .ui.top.attached.header {
  background: transparent;
  border: none;
  text-align: center;
  font-family: "Poppins", var(--fonts-regular);
}

/* ================= Footer: leise ================= */
.page-footer {
  border-top: none;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.page-footer:hover { opacity: 1; }

/* ================= Typografie ================= */
h1, h2, h3, h4,
.ui.header {
  font-family: "Poppins", var(--fonts-regular);
  letter-spacing: -0.015em;
}

/* ================= Feinschliff ================= */
* {
  scrollbar-width: thin;
  scrollbar-color: #313963 transparent;
}
::selection { background: #5a45ed66; color: #fff; }

/* ================= MCBHub-Dashboard (Custom-Template) ================= */
.mcbhub-hero {
  text-align: center;
  padding: 34px 16px 26px;
  margin: 6px 0 18px;
}
.mcbhub-hero-logo {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 12px 30px rgba(90, 69, 237, 0.35));
  margin-bottom: 14px;
}
.mcbhub-hero h1 {
  font-family: "Poppins", var(--fonts-regular);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.mcbhub-hero-sub {
  color: var(--color-text-light-2);
  margin: 0 0 18px;
}
.mcbhub-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.mcbhub-section-title {
  font-family: "Poppins", var(--fonts-regular);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light-1);
  margin: 4px 0 12px;
}
.mcbhub-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1.5px dashed var(--mcb-glass-border);
  border-radius: 18px;
  color: var(--color-text-light-2);
  background: rgba(255, 255, 255, 0.015);
}
.mcbhub-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
.mcbhub-empty h3 {
  font-family: "Poppins", var(--fonts-regular);
  margin: 0 0 6px;
  color: var(--color-text);
}
.mcbhub-empty p { margin: 0; line-height: 1.6; }

/* Heatmap ist im Custom-Dashboard entfernt; Kontext-Switcher ruhiger */
.dashboard .secondary-nav { background: transparent; border-bottom: none; }

/* Repo-Liste rechts: Glas-Karte */
.dashboard-repos .ui.segment,
#dashboard-repo-list .ui.segment {
  border-radius: 16px;
}