/* Open3DLab theme for Gitea — dark mode, #5f397d brand purple             */
/* Place at: $GITEA_CUSTOM/public/assets/css/theme-open3dlab.css           */

/* ── Base: inherit the dark theme, then override primaries ─────────────── */
@import url("theme-gitea-dark.css");

:root {
  --theme-display-name: "Open3DLab";
  --is-dark-theme: true;

  /* ── Primary colour palette ──────────────────────────────────────────── */
  /* On dark backgrounds the lighter variants carry interactive roles       */
  --color-primary:         #5f397d;   /* brand purple — solid fills/badges  */
  --color-primary-light-1: #7f6097;   /* hover state                        */
  --color-primary-light-2: #977eaa;   /* links, focus text                  */
  --color-primary-light-3: #af9cbe;   /* secondary text accents             */
  --color-primary-light-4: #c7b9d1;   /* borders on dark cards              */
  --color-primary-light-5: #dbd3e2;   /* subtle backgrounds                 */

  --color-primary-dark-1:  #472a5d;   /* pressed / active                   */
  --color-primary-dark-2:  #341f44;   /* deep tint — nav bar base           */
  --color-primary-dark-3:  #24152f;   /* section backgrounds                */
  --color-primary-dark-4:  #160d1e;   /* hero overlay                       */
  --color-primary-dark-5:  #0b060f;   /* near-black purple                  */

  --color-primary-alpha-10: rgba(95, 57, 125, 0.10);
  --color-primary-alpha-20: rgba(95, 57, 125, 0.20);
  --color-primary-alpha-40: rgba(95, 57, 125, 0.40);
  --color-primary-alpha-80: rgba(95, 57, 125, 0.80);

  /* On dark bg the readable link colour is the light-2 variant */
  --color-primary-link:    #9f88b1;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
a { color: var(--color-primary-link) !important; }
a:hover { color: var(--color-primary-light-1) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ui.primary.button,
.ui.green.button {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
.ui.primary.button:hover,
.ui.green.button:hover {
  background-color: var(--color-primary-light-1) !important;
}
.ui.primary.button:active,
.ui.green.button:active {
  background-color: var(--color-primary-dark-1) !important;
}

/* ── Top navigation bar ──────────────────────────────────────────────────── */
.navbar,
#navbar {
  background-color: var(--color-primary-dark-2) !important;
  border-bottom: 1px solid var(--color-primary-dark-1) !important;
}
#navbar .item,
#navbar a.item {
  color: rgba(255, 255, 255, 0.80) !important;
}
#navbar .item:hover,
#navbar a.item:hover {
  color: #fff !important;
  background-color: var(--color-primary-dark-1) !important;
}

/* ── Labels / topic tags ──────────────────────────────────────────────────── */
.ui.label.green,
.topic.label {
  background-color: var(--color-primary-dark-1) !important;
  color: var(--color-primary-light-3) !important;
  border: 1px solid var(--color-primary) !important;
}

/* ── Tab active state ────────────────────────────────────────────────────── */
.ui.tabular.menu .active.item,
.ui.secondary.menu .active.item {
  border-color: var(--color-primary-light-2) !important;
  color: var(--color-primary-light-2) !important;
}

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

/* ── Checkboxes ──────────────────────────────────────────────────────────── */
.ui.checkbox input:checked ~ .box::before,
.ui.checkbox input:checked ~ label::before {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary-light-1) !important;
}

/* ── Input focus rings ───────────────────────────────────────────────────── */
input:focus,
textarea:focus,
.ui.input.focus input {
  border-color: var(--color-primary-light-1) !important;
  box-shadow: 0 0 0 2px var(--color-primary-alpha-40) !important;
}

/* ── Sidebar active item ─────────────────────────────────────────────────── */
.ui.vertical.menu .active.item {
  background-color: var(--color-primary-alpha-20) !important;
  border-right: 3px solid var(--color-primary-light-2) !important;
  color: var(--color-primary-light-2) !important;
}

/* ── ─────────────────────────────────────────────────────────────────────── */
/* Open3DLab branded home page components (used by home.tmpl)                */
/* ── ─────────────────────────────────────────────────────────────────────── */

.o3dl-hero {
  background: linear-gradient(
    135deg,
    var(--color-primary-dark-4) 0%,
    var(--color-primary-dark-2) 45%,
    var(--color-primary-dark-1) 100%
  );
  color: #fff;
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-primary-dark-1);
}
.o3dl-hero__logo {
  height: 64px;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
}
.o3dl-hero__title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  letter-spacing: -0.5px;
  color: #fff;
}
.o3dl-hero__sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}
.o3dl-hero__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.o3dl-hero__actions a {
  padding: 0.55rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: filter 0.15s;
  color: inherit !important;
}
.o3dl-hero__actions .btn-primary {
  background: var(--color-primary);
  color: #fff !important;
}
.o3dl-hero__actions .btn-primary:hover {
  background: var(--color-primary-light-1);
}
.o3dl-hero__actions .btn-secondary {
  background: transparent;
  color: rgba(255,255,255,0.85) !important;
  border: 1.5px solid rgba(255,255,255,0.40);
}
.o3dl-hero__actions .btn-secondary:hover {
  border-color: rgba(255,255,255,0.70);
  color: #fff !important;
}

.o3dl-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary-light-3);
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-primary-dark-1);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.o3dl-repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.o3dl-repo-card {
  border: 1px solid var(--color-primary-dark-1);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--color-primary-dark-3);
  transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.o3dl-repo-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-dark-2);
  box-shadow: 0 2px 14px var(--color-primary-alpha-40);
}
.o3dl-repo-card__name {
  font-weight: 700;
  color: var(--color-primary-light-2) !important;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o3dl-repo-card__desc {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
  flex: 1;
}
.o3dl-repo-card__meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
  display: flex;
  gap: 0.75rem;
  margin-top: 0.3rem;
  align-items: center;
}
.o3dl-repo-card__meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.o3dl-explore-link {
  text-align: center;
  margin-top: 0.5rem;
}
.o3dl-explore-link a {
  color: var(--color-primary-link) !important;
  font-weight: 600;
  text-decoration: none;
}
.o3dl-explore-link a:hover {
  color: var(--color-primary-light-1) !important;
  text-decoration: underline;
}