/* Task Training Allgäu — shared visual identity.
   Loaded by the public page (index.php) and the admin pages. Holds the palette,
   type, and the Bootstrap component overrides so every page reads as one product.
   Page-specific layout lives in upload.css (front) and each admin page's <style>. */

:root {
  --ink:         #1e2a37;   /* deep slate — primary text */
  --ink-soft:    #64748b;   /* muted labels / meta */
  --accent:      #0d9488;   /* alpine teal — primary action */
  --accent-2:    #0f766e;   /* deeper teal — hover / active */
  --accent-tint: #e6f7f4;   /* faint teal wash */
  --sky-1:       #f2f6fa;
  --sky-2:       #e5edf5;
  --surface:     #ffffff;
  --line:        #e6ecf2;   /* hairlines */
  --danger:      #dc2626;
  --danger-2:    #b91c1c;
  --ok:          #15803d;
  --horizon: linear-gradient(90deg, #14b8a6 0%, #0ea5e9 100%);
}

* { -webkit-tap-highlight-color: transparent; }

/* Reserve the scrollbar gutter so collapsing content (e.g. the results
   accordion) can't toggle the vertical scrollbar and shift centred layout.
   The page gradient lives on <html> (not <body>) so it also paints the
   reserved gutter — otherwise the gutter would show as a blank white strip. */
html {
  scrollbar-gutter: stable;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%) no-repeat;
}

body {
  min-height: 100vh;
  margin: 0;
  /* transparent so the <html> gradient (incl. the scrollbar gutter) shows
     through — Bootstrap's reboot otherwise paints an opaque white body. */
  background: transparent;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: var(--ink);
  letter-spacing: -.01em;
}

a { color: var(--accent-2); }
a:hover { color: var(--accent); }
::selection { background: var(--accent-tint); }

/* ---------- shared type devices ---------- */
.app-eyebrow {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 4px;
}
.app-title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-align: left;
  margin: 0 0 12px;
}
.section-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- Bootstrap component overrides (teal identity) ---------- */
.btn { border-radius: 10px; font-weight: 500; }
.btn-sm { border-radius: 8px; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(13, 148, 136, .25); }

.btn-primary {
  color: #fff;
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--accent-2);
  border-color: var(--accent-2);
}

.btn-outline-primary { color: var(--accent-2); border-color: var(--accent); }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-outline-secondary { color: var(--ink-soft); border-color: var(--line); }
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: var(--ink);
  background-color: #eef2f6;
  border-color: #d6dee6;
}

.btn-outline-success { color: var(--ok); border-color: #86d3a3; }
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--ok);
  border-color: var(--ok);
}

.btn-outline-danger { color: var(--danger-2); border-color: #f0a9a9; }
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-link { color: var(--accent-2); text-decoration: none; }
.btn-link:hover { color: var(--accent); text-decoration: underline; }

/* forms */
.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--line);
  color: var(--ink);
}
.form-control-sm, .form-select-sm { border-radius: 8px; }
.form-control::placeholder { color: #97a6b4; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .18);
}
.form-label { color: var(--ink); font-weight: 500; }
.form-text { color: var(--ink-soft); }
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .18);
}

/* cards */
.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 20px -14px rgba(30, 42, 55, .28);
  /* Clip header/summary/body to the 16px radius so all four corners match the
     border (Bootstrap only rounds the header ~3px). Also keeps the .is-active
     accent border-left following the same curve as the card. */
  overflow: hidden;
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  color: var(--ink);
}

/* alerts */
.alert { border-radius: 12px; border: 1px solid transparent; }
.alert-success { background: #e6f7ef; border-color: #bfe6cf; color: var(--ok); }
.alert-danger  { background: #fdecec; border-color: #f5c2c2; color: var(--danger-2); }

/* badges */
.badge { font-weight: 600; }
.badge.bg-success   { background-color: var(--accent) !important; }
.badge.bg-secondary { background-color: var(--accent-tint) !important; color: var(--accent-2) !important; }
.badge.bg-light     { border: 1px solid var(--line); }

/* list groups */
.list-group-item { border-color: var(--line); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
