/* =========================================================================
   Training Records – eigenes, mobil-first Stylesheet (keine CDN-Abhängigkeit)
   ========================================================================= */

:root {
    /* Hanse-Taucher-Markenfarben: Korallenrot (Logo-Tropfen), Wasser-Türkis, Marineblau */
    --c-bg:           #eaf1f3;
    --c-surface:      #ffffff;
    --c-text:         #0d131a;   /* Marineblau (Markenton) */
    --c-muted:        #5a6b72;
    --c-primary:      #d63320;   /* Korallenrot */
    --c-primary-d:    #b22817;
    --c-accent:       #3f8f97;   /* tieferes Türkis */
    --c-accent-light: #e2f3f5;
    --c-danger:       #a8141b;   /* eigenständiges Rot für Löschaktionen */
    --c-border:       #d6dee1;
    --c-topbar:       #0d131a;   /* dunkle Navigationsleiste */
    --c-pool:         #2f7d8a;   /* Pool = Türkis */
    --c-fw:           #1b6b86;   /* Freiwasser = tiefes Blau */
    --radius:         14px;
    --tap:            44px;
    --shadow:         0 1px 3px rgba(13,19,26,.10), 0 1px 2px rgba(13,19,26,.05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* Markenschriften (Inter/Lato) – falls vorhanden, sonst System-Schrift (offline-tauglich) */
    font-family: "Inter", "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; margin: 0; }
a { color: var(--c-primary); }

/* Sichtbarer Tastatur-Fokus */
:focus-visible {
    outline: 3px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--c-primary);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- Topbar / Navigation ------------------------------------------------ */
.topbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--c-topbar);
    color: #fff;
    padding: .5rem .9rem;
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: max(.5rem, env(safe-area-inset-top));
    border-bottom: 3px solid var(--c-primary);
}
.topbar__brand {
    color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem;
    margin-right: auto; display: flex; align-items: center; gap: .5rem;
}
.topbar__logo { width: 30px; height: 30px; border-radius: 50%; display: block; background: #fff; }
.topbar__toggle {
    width: var(--tap); height: var(--tap);
    background: transparent; border: 0; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.topbar__toggle span { display: block; height: 3px; background: #fff; border-radius: 2px; }

.topbar__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: #161f29;
    padding: .25rem 0;
    box-shadow: 0 8px 16px rgba(0,0,0,.25);
}
.topbar__nav.is-open { display: flex; }
.topbar__nav a, .topbar__user {
    color: #fff; text-decoration: none;
    padding: .85rem 1rem; min-height: var(--tap);
    display: flex; align-items: center;
    border-top: 1px solid rgba(255,255,255,.08);
}
.topbar__spacer { display: none; }
.topbar__logout { padding: .6rem 1rem; }
.topbar__user { font-weight: 600; }

@media (min-width: 720px) {
    .topbar__toggle { display: none; }
    .topbar__nav {
        display: flex; flex-direction: row; align-items: center;
        position: static; background: transparent; padding: 0; gap: .25rem;
    }
    .topbar__nav a, .topbar__user { border-top: 0; padding: .5rem .8rem; border-radius: 8px; }
    .topbar__nav a:hover { background: rgba(255,255,255,.12); }
    .topbar__spacer { display: block; flex: 1; }
}

/* --- Layout-Container --------------------------------------------------- */
.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}
.footer {
    text-align: center;
    color: var(--c-muted);
    font-size: .85rem;
    padding: 1.5rem 1rem 2rem;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.page-head h1 { flex: 1 1 auto; }
.page-head > .btn, .page-head__actions { flex-shrink: 0; }
.page-head__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.section-title { margin: 1.5rem 0 .6rem; font-size: 1.1rem; }
.muted { color: var(--c-muted); }
.small { font-size: .85rem; }

/* --- Karten ------------------------------------------------------------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
.empty { color: var(--c-muted); text-align: center; }
.note { background: #fffdf2; border-color: #f0e6b8; }

/* --- Flash -------------------------------------------------------------- */
.flash {
    padding: .8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid;
    font-weight: 500;
}
.flash--success { background: #e7f7ef; border-color: #9bd9bb; color: #0c5e3c; }
.flash--error   { background: #fdecea; border-color: #f0a9a0; color: #8c2419; }
.flash--info    { background: #e9f3fb; border-color: #a9cdf0; color: #144a73; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--tap);
    padding: .6rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.1;
    background: #e9eef1;
    color: var(--c-text);
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-d); }
.btn--ghost { background: transparent; border-color: var(--c-border); color: var(--c-text); }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--small { min-height: 38px; padding: .4rem .8rem; font-size: .9rem; }
.btn--lg { min-height: 54px; font-size: 1.1rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Formulare ---------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 1rem; }
.form--inline { gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field__label { font-weight: 600; font-size: .95rem; }
.field__hint { font-size: .82rem; color: var(--c-muted); }
.field__input {
    width: 100%;
    min-height: var(--tap);
    padding: .65rem .75rem;
    font-size: 1rem;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    color: var(--c-text);
}
textarea.field__input { min-height: 5rem; resize: vertical; }
/* Mobile-first: Felder untereinander; ab 560px nebeneinander. */
.field-row { display: flex; flex-direction: column; gap: 1rem; }
.field-row .field { flex: 1; }
@media (min-width: 560px) {
    .field-row { flex-direction: row; gap: .8rem; }
}

.search { display: flex; gap: .5rem; margin-bottom: 1rem; }
.search__input {
    flex: 1; min-height: var(--tap); padding: .6rem .75rem;
    border: 1px solid var(--c-border); border-radius: 10px; font-size: 1rem;
}

/* --- Auth-Screen -------------------------------------------------------- */
.auth-screen { min-height: 80vh; display: flex; align-items: center; }
.auth-card { width: 100%; max-width: 380px; margin: 0 auto; border-top: 4px solid var(--c-primary); }
.auth-card__logo { display: block; width: 96px; height: 96px; margin: .25rem auto .75rem; border-radius: 50%; }
.auth-card__title { text-align: center; margin-bottom: .15rem; }
.auth-card__sub { text-align: center; color: var(--c-muted); margin: 0 0 1.25rem; }

/* --- Listen ------------------------------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.list__item {
    display: flex; align-items: center; gap: .6rem;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: .7rem .9rem; box-shadow: var(--shadow);
}
.list__main { flex: 1; display: flex; flex-direction: column; min-height: var(--tap); justify-content: center; text-decoration: none; color: inherit; }
.list__title { font-weight: 600; }
.list__sub { color: var(--c-muted); font-size: .9rem; }
.list__chev { color: var(--c-muted); font-size: 1.6rem; line-height: 1; }
.list__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.list--tap .list__item { padding: .9rem; }

.mini-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.mini-list a { display: block; padding: .5rem .2rem; text-decoration: none; }

/* --- Dashboard ---------------------------------------------------------- */
.actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.action-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    min-height: 96px; padding: 1rem .75rem; text-align: center;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); text-decoration: none; color: var(--c-text);
    box-shadow: var(--shadow); font-weight: 600;
}
.action-tile--accent { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.action-tile__icon { font-size: 1.7rem; }

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .5rem; }
.stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: .8rem; text-align: center; box-shadow: var(--shadow); }
.stat__num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--c-primary); }
.stat__lbl { color: var(--c-muted); font-size: .85rem; }
@media (min-width: 600px) {
    .actions-grid { grid-template-columns: repeat(4, 1fr); }
    .stat-row { grid-template-columns: repeat(4, 1fr); }
}

/* --- Badges / Tags / Status -------------------------------------------- */
.badge { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #e3e9ed; color: #36454f; }
.badge--pool { background: #e3edfb; color: var(--c-pool); }
.badge--fw   { background: #e0f2ef; color: var(--c-fw); }
.tag { display: inline-block; padding: .1rem .45rem; border-radius: 6px; font-size: .72rem; font-weight: 700; background: #eef1f3; color: var(--c-muted); vertical-align: middle; }
.tag--admin { background: #ede4fb; color: #5b2ea6; }
.tag--off { background: #fdecea; color: var(--c-danger); }
.status { display: inline-block; font-size: .8rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; }
.status--active { background: #e9f3fb; color: var(--c-pool); }
.status--done { background: #e7f7ef; color: #0c5e3c; }

/* --- Übungs-Akkordeon (Admin) ------------------------------------------ */
.ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ex-list__item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ex-summary { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .85rem .9rem; cursor: pointer; min-height: var(--tap); }
.ex-summary__name { font-weight: 600; }
.ex-summary__reps { color: var(--c-muted); font-size: .85rem; white-space: nowrap; }
.ex-body { padding: 0 .9rem .9rem; border-top: 1px solid var(--c-border); }
.ex-body .form { margin-top: .9rem; }
.ex-tools { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; }
.danger-zone { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--c-border); }

/* --- Fortschritt -------------------------------------------------------- */
.progress-table { display: flex; flex-direction: column; gap: .5rem; }
.progress-row { display: flex; flex-direction: column; gap: .3rem; padding: .55rem 0; border-bottom: 1px solid var(--c-border); }
.progress-row:last-child { border-bottom: 0; }
.progress-row__name { font-weight: 600; }
.progress-row__envs { display: flex; gap: .5rem; flex-wrap: wrap; }
.prog { font-size: .85rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.prog--ok { background: #e7f7ef; color: #0c5e3c; }
.prog--open { background: #fdf3e7; color: #9a5b14; }

/* --- Enrollment-Karten -------------------------------------------------- */
.enrollment__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.enrollment__title { margin-bottom: .25rem; }
.enrollment__actions { display: flex; gap: .4rem; flex-wrap: wrap; flex-shrink: 0; }
.records-toggle { margin-top: .75rem; }
.records-toggle summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }
.complete-box .ok-text { color: #0c5e3c; font-weight: 600; }
.cta-bar { margin: 0 0 1rem; }

/* --- Training-Record-Formular ------------------------------------------ */
.env-toggle { border: 0; padding: 0; margin: 0; }
.segmented { display: flex; gap: .6rem; margin-top: .4rem; }
.segmented__opt { flex: 1; position: relative; }
.segmented__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented__opt span {
    display: flex; align-items: center; justify-content: center;
    min-height: 56px; border: 2px solid var(--c-border); border-radius: var(--radius);
    font-weight: 700; background: #fff; font-size: 1.05rem;
}
.segmented__opt input:checked + span { border-color: var(--c-accent); background: var(--c-accent-light); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-accent); }
.segmented__opt input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.check-item {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: .6rem .8rem; box-shadow: var(--shadow);
}
.check-item__main { flex: 1 1 60%; display: flex; align-items: center; gap: .7rem; min-height: var(--tap); cursor: pointer; min-width: 0; }
.check-item__box { width: 28px; height: 28px; flex-shrink: 0; accent-color: var(--c-accent); }
.check-item__text { display: flex; flex-direction: column; min-width: 0; }
.check-item__name { font-weight: 600; overflow-wrap: anywhere; }
.check-item__hint { color: var(--c-muted); font-size: .82rem; }
.check-item.is-checked { border-color: var(--c-accent); background: var(--c-accent-light); }
.reps { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; }
.reps__lbl { font-size: .8rem; color: var(--c-muted); }
.reps__input { width: 68px; min-height: 44px; text-align: center; border: 1px solid var(--c-border); border-radius: 10px; font-size: 1rem; }

/* --- Sammel-Record: Schülerliste mit eingeblendeter Signatur ------------ */
.batch-students { gap: .7rem; }
.batch-student {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.check-item--pick { display: flex; padding: .2rem .2rem; border: 0; box-shadow: none; background: transparent; }
.batch-sign { padding: .2rem .9rem .9rem; border-top: 1px solid var(--c-border); }
.batch-sign .signature { height: 170px; }

/* --- Signatur ----------------------------------------------------------- */
.sign-block { margin-bottom: 1rem; }
.sign-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.signature {
    display: block; width: 100%; height: 200px;
    background: #fff; border: 2px dashed var(--c-border); border-radius: var(--radius);
    touch-action: none; cursor: crosshair;
}
.signature.is-signed { border-style: solid; border-color: var(--c-accent); }

.signatures-view { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.signatures-view figure { margin: 0; }
.signatures-view figcaption { font-weight: 600; margin-bottom: .35rem; }
.sig-img { width: 100%; max-width: 360px; border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; }
@media (min-width: 560px) { .signatures-view { grid-template-columns: 1fr 1fr; } }

/* --- Record-Meta -------------------------------------------------------- */
.record-meta { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.record-meta > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--c-border); padding-bottom: .5rem; }
.record-meta > div:last-child { border-bottom: 0; padding-bottom: 0; }
.meta-k { color: var(--c-muted); }
.meta-v { font-weight: 600; text-align: right; }

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

/* --- Druck (PDF-Export eines Records) ----------------------------------- */
@media print {
    .topbar, .footer, .cta-bar, .skip-link, .page-head .btn { display: none !important; }
    body { background: #fff; }
    .container { max-width: 100%; }
    .card, .list__item { box-shadow: none; }
}