/* ===========================================================================
   app.css – Designsystem des Notenkonferenz-Tools
   Herkunft der Palette: verbindliche Markenwerte von ICT-Berufsbildung Aargau
   und ICT-Berufsbildung Schweiz. Keine externen Schriften oder Ressourcen.
   =========================================================================== */

:root {
  /* ICT-Berufsbildung: Aktionen, Struktur und Status */
  --app-primary:          #d1006a;
  --app-primary-dark:     #b0005a;
  --app-primary-light:    #fbe5f0;
  --app-info:             #1494c7;
  --app-info-text:        #0e7aa8;
  --app-info-light:       #f1fafd;
  --app-success:          #009d78;
  --app-success-text:     #007a5e;
  --app-success-light:    #e4f5f0;
  --app-accent-lime:      #a4bb06;
  --app-warning:          #df8900;
  --app-warning-text:     #8a5500;
  --app-warning-light:    #fff2dd;
  --app-danger:           #b42318;
  --app-danger-text:      #921b24;
  --app-danger-light:     #fde9ea;

  --app-heading:          #111111;
  --app-ink:              #575757;
  --app-muted:            #666666;
  --app-border:           #e6e6e6;
  --app-border-strong:    #b8b8b8;
  --app-bg:               #f6f6f6;
  --app-card-bg:          #ffffff;

  --app-radius:           3px;
  --app-radius-sm:        2px;
  --app-radius-pill:      999px;
  --app-shadow-sm:        0 1px 3px rgba(17, 17, 17, .08);
  --app-shadow:           0 2px 8px rgba(17, 17, 17, .08);
  --app-focus-ring:       0 0 0 .2rem rgba(20, 148, 199, .30);
  --app-font:             "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Grundlayout
   -------------------------------------------------------------------------- */
body.app-body {
  font-family: var(--app-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--app-ink);
  background-color: var(--app-bg);
  /* Das vorhandene Raketenmotiv bleibt bewusst stark ueberlagert. */
  background-image:
    linear-gradient(180deg, rgba(246, 246, 246, .96) 0%, rgba(246, 246, 246, .91) 38%, rgba(246, 246, 246, .89) 100%),
    url('../img/rakete_40.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center center;
  background-attachment: fixed, fixed;
  background-size: cover, cover;
  -webkit-font-smoothing: antialiased;
}

.app-main { padding: 5.25rem 0 2rem; }
.app-container { max-width: 920px; }

h1, h2, h3, h4, h5, h6 {
  color: var(--app-heading);
  font-weight: 700;
  letter-spacing: 0;
}

.app-page-title {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .5rem .75rem;
  border-radius: 1px;
  background: var(--app-info);
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.15;
}

.app-lead { color: var(--app-ink); font-size: 1.02rem; margin-bottom: 0; }
.app-section-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .25rem; }
.app-hint { color: var(--app-muted); font-size: .875rem; }
.app-required { color: var(--app-danger); font-weight: 700; }
.app-action-row { gap: .75rem; }

/* --------------------------------------------------------------------------
   Kopfbereich und Navigation
   -------------------------------------------------------------------------- */
.app-colour-strip {
  position: fixed;
  z-index: 1031;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--app-info) 0%, var(--app-info) 20%,
    var(--app-success) 20%, var(--app-success) 40%,
    var(--app-accent-lime) 40%, var(--app-accent-lime) 60%,
    var(--app-warning) 60%, var(--app-warning) 80%,
    var(--app-primary) 80%, var(--app-primary) 100%);
}

.app-navbar {
  top: 4px;
  padding-top: .65rem;
  padding-bottom: .65rem;
  background: #fff !important;
  border-bottom: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-sm);
}

.app-navbar .navbar-brand {
  color: var(--app-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

.app-navbar .navbar-brand:hover,
.app-navbar .navbar-brand:focus { color: var(--app-heading); }

.app-navbar .nav-link {
  color: var(--app-heading) !important;
  font-weight: 600;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-item.active .nav-link { color: var(--app-info-text) !important; }

.app-navbar .navbar-toggler { border-color: rgba(20, 148, 199, .65); }
.app-navbar .navbar-toggler:focus { box-shadow: var(--app-focus-ring); }

/* --------------------------------------------------------------------------
   Sitzungs-Countdown
   -------------------------------------------------------------------------- */
.app-session-timer {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border: 1px solid #6d6d6d;
  border-radius: var(--app-radius-sm);
  background: #242424;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-session-timer__value { min-width: 3.2em; text-align: right; }
.app-session-timer--warn { border-color: var(--app-warning); background: var(--app-warning); color: #111; }
.app-session-timer--expired { border-color: var(--app-danger); background: var(--app-danger); color: #fff; }

/* --------------------------------------------------------------------------
   Karten und Schrittanzeige
   -------------------------------------------------------------------------- */
.app-card {
  margin-bottom: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-card-bg);
  box-shadow: var(--app-shadow);
}

.app-card--accent { border-top: 4px solid var(--app-info); }
.app-card__header { margin-bottom: 1rem; }
.app-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .5rem;
  border-radius: var(--app-radius-sm);
  background: var(--app-info-light);
  color: var(--app-info-text);
  font-size: 1.25rem;
}

.app-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.app-stepper__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--app-muted);
  font-size: .9rem;
  font-weight: 700;
}

.app-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid #b8b8b8;
  border-radius: var(--app-radius-pill);
  background: #fff;
  color: var(--app-muted);
  font-size: .85rem;
}

.app-stepper__item--active { color: var(--app-info-text); }
.app-stepper__item--active .app-stepper__num {
  border-color: var(--app-info);
  background: var(--app-info);
  color: #111;
}

.app-stepper__item--done { color: var(--app-success-text); }
.app-stepper__item--done .app-stepper__num {
  border-color: var(--app-success);
  background: var(--app-success);
  color: #111;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--app-radius-pill);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.app-badge__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.app-badge--richtung,
.app-badge--api { border-color: #9bd8ee; background: var(--app-info-light); color: var(--app-info-text); }
.app-badge--platt { border-color: #9bd8c8; background: var(--app-success-light); color: var(--app-success-text); }
.app-badge--med { border-color: #ecafcc; background: var(--app-primary-light); color: var(--app-primary-dark); }
.app-badge--iff { border-color: #efcb8f; background: var(--app-warning-light); color: var(--app-warning-text); }
.app-badge--open { border-color: #9bd8c8; background: var(--app-success-light); color: var(--app-success-text); }
.app-badge--locked { border-color: #efcb8f; background: var(--app-warning-light); color: var(--app-warning-text); }
.app-badge--done { border-color: #9bd8ee; background: var(--app-info-light); color: var(--app-info-text); }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--app-radius-sm);
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.btn:active { transform: translateY(1px); }
.btn-primary { border-color: var(--app-primary); background-color: var(--app-primary); color: #fff; }
.btn-primary:hover { border-color: var(--app-primary-dark); background-color: var(--app-primary-dark); color: #fff; }
.btn-primary:focus,
.btn-primary.focus { border-color: var(--app-primary-dark); box-shadow: var(--app-focus-ring); }
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  border-color: var(--app-primary-dark);
  background-color: var(--app-primary-dark);
  color: #fff;
}

.btn-outline-secondary {
  border-color: var(--app-info-text);
  background: transparent;
  color: var(--app-info-text);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
  border-color: var(--app-info-text);
  background: var(--app-info-text);
  color: #fff;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus { box-shadow: var(--app-focus-ring); }
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled { border-color: #757575; color: var(--app-ink); cursor: not-allowed; }
.btn-lg { padding: .65rem 1.25rem; }
.app-btn-block { width: 100%; }
.btn[disabled], .btn:disabled { cursor: progress; opacity: 1; }

.app-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: .4rem;
  vertical-align: -.15rem;
  border: .15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: app-spin .6s linear infinite;
}

@keyframes app-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Formulare und Dossier-Liste
   -------------------------------------------------------------------------- */
.form-group label,
.app-card label,
.form-group legend { color: var(--app-heading); font-weight: 600; }

.form-control {
  border-color: var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  color: var(--app-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: #6b6b6b; opacity: 1; }
.form-control:focus { border-color: var(--app-info); box-shadow: var(--app-focus-ring); }
.form-control:disabled,
.form-control[readonly] { border-color: var(--app-border); background: #f1f1f1; color: var(--app-muted); }
input[type="radio"] { accent-color: var(--app-info); }

.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 .75rem .5rem 0;
  padding: .4rem .75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: #fff;
  color: var(--app-heading);
  cursor: pointer;
  font-weight: 600;
}

.radio-inline:first-child { margin-left: 0; }
.radio-inline input { cursor: pointer; }

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
  padding: .85rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.file-item:hover { border-color: #9bd8ee; box-shadow: var(--app-shadow-sm); }
.file-item .file-name { font-weight: 700; word-break: break-word; }
.file-item__meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.file-item .btn { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Leere Zustände und Hinweise
   -------------------------------------------------------------------------- */
.app-empty {
  padding: 2.5rem 1rem;
  border: 1px dashed #b8b8b8;
  border-radius: var(--app-radius);
  background: #fff;
  color: var(--app-muted);
  text-align: center;
}

.app-empty img { width: 84px; margin-bottom: .75rem; opacity: .8; }
.app-alert { padding: 1rem 1.15rem; border: 1px solid transparent; border-radius: var(--app-radius-sm); }
.app-alert--success { border-color: #9bd8c8; background: var(--app-success-light); color: #00634d; }
.app-alert--info { border-color: #9bd8ee; background: var(--app-info-light); color: #075b7c; }
.app-alert--warning { border-color: var(--app-warning); background: var(--app-warning-light); color: #704500; }
.app-alert--danger { border-color: #e8afb3; background: var(--app-danger-light); color: var(--app-danger-text); }
.app-alert__title { margin-bottom: .15rem; font-weight: 700; }
.app-alert--success a { color: #00634d; }
.app-alert--info a { color: #075b7c; }
.app-alert--warning a { color: #704500; }
.app-alert--danger a { color: var(--app-danger-text); }

/* --------------------------------------------------------------------------
   Bewertungsformular: Sichtbarkeit (Mechanik unveraendert)
   -------------------------------------------------------------------------- */
#formSection,
#neueNote,
#NotenKomentarBereich { display: none; }

/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */
.app-footer {
  border-top: 0;
  background: #111;
  color: #f6f6f6;
}

.app-footer__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-footer__copyright { color: #f6f6f6; }

/* --------------------------------------------------------------------------
   Barrierefreiheit
   -------------------------------------------------------------------------- */
a { color: var(--app-info-text); }
a:hover { color: #075b7c; }
a, .btn, .form-control, input, select, textarea, [tabindex] { outline-offset: 2px; }
a:focus-visible, .btn:focus-visible, .form-control:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-link:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--app-info);
  outline-offset: 2px;
}

.app-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-skip-link {
  position: absolute;
  z-index: 1100;
  top: 0;
  left: -999px;
  padding: .55rem .9rem;
  border-radius: 0 0 var(--app-radius-sm) 0;
  background: #fff;
  box-shadow: var(--app-shadow);
  color: var(--app-info-text);
  font-weight: 700;
}

.app-skip-link:focus { left: 0; }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  body.app-body { background-attachment: scroll, scroll; }
  .app-main { padding-top: 4.8rem; }
  .app-card { padding: 1.15rem; }
  .file-item { flex-direction: column; align-items: stretch; }
  .file-item__meta { justify-content: space-between; }
  .file-item .btn { width: 100%; }
  .app-footer__content { align-items: flex-start; flex-direction: column; }
}