/*
 * Stellwerk Academy for ILIAS 11.x
 *
 * This intentionally remains a small override layer on top of Delos. It uses
 * the Stellwerk Labs Switch design tokens without replacing ILIAS templates or
 * changing component behavior.
 */
@import url("../../../../assets/css/delos.css");

:root {
  --stw-midnight: #0f1638;
  --stw-midnight-deep: #0b1027;
  --stw-midnight-soft: #1a2350;
  --stw-purple: #5b2d90;
  --stw-purple-deep: #4a2275;
  --stw-teal: #2eb6b5;
  --stw-teal-deep: #1f8e8d;
  --stw-teal-glow: #4ecccb;
  --stw-paper: #ffffff;
  --stw-paper-warm: #fafafb;
  --stw-paper-cool: #f4f6f8;
  --stw-ink: #14151a;
  --stw-ink-soft: rgba(20, 21, 26, 0.78);
  --stw-line: rgba(20, 21, 26, 0.1);
  --stw-on-dark: #ffffff;
  --stw-on-dark-soft: rgba(255, 255, 255, 0.78);
  --stw-line-on-dark: rgba(255, 255, 255, 0.14);
  --stw-radius-small: 6px;
  --stw-radius-card: 12px;
  --stw-font-sans: "Nunito", ui-rounded, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --stw-font-mono: "Geist Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
}

html,
body,
button,
input,
select,
textarea,
.il-layout-page {
  font-family: var(--stw-font-sans);
}

body,
.il-layout-page,
.il-layout-page-content {
  background: var(--stw-paper-warm);
  color: var(--stw-ink);
}

::selection {
  background: rgba(46, 182, 181, 0.22);
  color: var(--stw-midnight);
}

:focus-visible,
.btn:focus-visible,
.il-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--stw-teal) !important;
  outline-offset: 2px;
}

a,
.btn-link,
.il-link {
  color: var(--stw-teal-deep);
}

a:hover,
a:focus,
.btn-link:hover,
.il-link:hover {
  color: var(--stw-purple);
}

h1,
h2,
h3,
h4,
h5,
h6,
.panel-title {
  color: var(--stw-midnight);
  font-family: var(--stw-font-sans);
  font-weight: 800;
  letter-spacing: -0.014em;
}

code,
pre,
kbd,
samp,
.mono {
  font-family: var(--stw-font-mono);
}

/* Header: the dark brand ground carries the official on-dark Switch mark. */
.header-inner {
  background: var(--stw-midnight);
  border-bottom: 3px solid var(--stw-teal);
  box-shadow: none;
}

header {
  box-shadow: none;
}

.il-logo {
  height: 46px;
}

.il-logo .img-standard {
  height: 38px;
  width: 38px;
  object-fit: contain;
}

.il-pagetitle {
  color: var(--stw-on-dark);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.018em;
  padding-left: 14px;
}

.il-header-locator .btn,
.il-header-locator .btn:hover,
.il-header-locator .btn:focus,
.il-maincontrols-metabar > li > .btn.btn-bulky,
.il-maincontrols-metabar > li > a.il-link.link-bulky {
  background: transparent;
  border-color: var(--stw-line-on-dark);
  color: var(--stw-on-dark);
}

.il-maincontrols-metabar .glyphicon,
.il-maincontrols-metabar > li > .btn.btn-bulky .glyphicon {
  color: var(--stw-on-dark-soft);
  filter: none;
}

.il-maincontrols-metabar > li > .btn.btn-bulky:hover,
.il-maincontrols-metabar > li > a.il-link.link-bulky:hover {
  background: var(--stw-midnight-soft);
}

/* ILIAS already has the right sidebar geometry; these colors align it to SLS. */
.il-maincontrols-mainbar,
.il-mainbar,
.il-mainbar-triggers,
.il-mainbar-triggers.engaged {
  background: var(--stw-midnight);
}

.il-mainbar {
  box-shadow: none;
}

.il-mainbar-triggers .btn-bulky,
.il-mainbar-triggers .il-link.link-bulky {
  background: var(--stw-midnight);
  border-bottom: 1px solid var(--stw-line-on-dark);
  border-radius: 0;
}

.il-mainbar-triggers .btn-bulky .bulky-label,
.il-mainbar-triggers .il-link.link-bulky .bulky-label,
.il-mainbar-triggers .btn-bulky .glyph,
.il-mainbar-triggers .il-link.link-bulky .glyph {
  color: var(--stw-on-dark-soft);
}

.il-mainbar-triggers .btn-bulky .icon,
.il-mainbar-triggers .il-link.link-bulky .icon {
  filter: brightness(0) invert(1);
  opacity: 0.78;
}

.il-mainbar-triggers .btn-bulky:hover,
.il-mainbar-triggers .il-link.link-bulky:hover {
  background: var(--stw-midnight-soft);
}

.il-mainbar-triggers .btn-bulky.engaged,
.il-mainbar-triggers .il-link.link-bulky.engaged,
.il-mainbar-triggers .btn-bulky:focus-visible,
.il-mainbar-triggers .il-link.link-bulky:focus-visible {
  background: var(--stw-purple);
}

.il-mainbar-triggers .btn-bulky.engaged .bulky-label,
.il-mainbar-triggers .il-link.link-bulky.engaged .bulky-label {
  color: var(--stw-on-dark);
}

/* Content chrome stays light-first, with restrained structural accents. */
.breadcrumbs,
.breadcrumb_wrapper {
  background: var(--stw-paper-cool);
  border-bottom: 1px solid var(--stw-line);
  box-shadow: none;
}

.breadcrumb .crumb a {
  color: var(--stw-teal-deep);
  font-weight: 700;
}

.btn {
  border-radius: var(--stw-radius-small);
  font-weight: 700;
}

.btn-primary,
.btn-default.btn-primary {
  background: var(--stw-purple);
  border-color: var(--stw-purple);
  border-radius: 9999px;
  color: var(--stw-on-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-default.btn-primary:hover,
.btn-default.btn-primary:focus {
  background: var(--stw-purple-deep);
  border-color: var(--stw-purple-deep);
  color: var(--stw-on-dark);
}

.panel,
.card,
.c-card,
.il-card,
.c-input,
.modal-content {
  border-color: var(--stw-line);
  border-radius: var(--stw-radius-card);
  box-shadow: none;
}

.panel-primary > .panel-heading {
  background: var(--stw-midnight);
  border-color: var(--stw-midnight);
  color: var(--stw-on-dark);
}

.nav-tabs,
#ilSubTab {
  border-bottom-color: var(--stw-line);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
#ilSubTab > li.active > a {
  border-bottom: 3px solid var(--stw-teal);
  color: var(--stw-midnight);
  font-weight: 800;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--stw-teal);
  box-shadow: 0 0 0 3px rgba(46, 182, 181, 0.1);
}

.progress-bar,
.il-progress-bar__indicator {
  background: var(--stw-teal);
}

.label-primary,
.badge-primary {
  background: var(--stw-purple);
}

.ilStartupSection {
  background: var(--stw-paper);
  border: 1px solid var(--stw-line);
  border-radius: var(--stw-radius-card);
  margin: 32px auto;
  max-width: 560px;
  padding: 24px 28px;
}

@media only screen and (max-width: 767px) {
  .il-logo {
    height: 40px;
  }

  .il-logo .img-standard {
    height: 32px;
    width: 32px;
  }

  .il-pagetitle {
    font-size: 15px;
    padding-left: 10px;
  }

  .il-maincontrols-mainbar,
  .il-mainbar,
  .il-mainbar-triggers {
    background: var(--stw-midnight);
  }

  .ilStartupSection {
    margin: 16px;
    padding: 20px;
  }
}