/* PCPWeb 2.0 — Custom styles */

/* ── Theme tokens ─────────────────────────────────────────── */
:root {
    --pcp-brand: #0d6efd;
    --pcp-sidebar-width: 240px;
    --pcp-navbar-height: 56px;
}

/* ── Layout ───────────────────────────────────────────────── */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* ── Navbar ───────────────────────────────────────────────── */
#mainNav {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-bs-theme="dark"] #mainNav {
    background-color: rgba(22, 27, 34, 0.92);
}

[data-bs-theme="light"] #mainNav {
    background-color: rgba(255, 255, 255, 0.92);
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    border-radius: 0.75rem;
    transition: box-shadow 0.15s ease;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ── Dashboard stat cards ─────────────────────────────────── */
.stat-card {
    border-left: 4px solid var(--pcp-brand);
    border-radius: 0.75rem;
}

.stat-card .stat-icon {
    font-size: 2rem;
    opacity: 0.6;
}

/* ── Admin hub cards ──────────────────────────────────────── */
.hub-card {
    border-radius: 0.75rem;
    color: inherit;
    text-align: center;
}

.hub-card .hub-icon {
    font-size: 1.75rem;
}

.hub-card:hover {
    color: inherit;
    border-color: var(--pcp-brand);
}

/* ── Status badges (student, Praktikanten.Status — fragments/sstatus.html) ──
   Colour = whose turn, same scheme as the experiment badges (.zstatus-*):
   yellow = the student, blue = the assistant, purple = the Leitung, cyan = experiment running,
   green = completed, grey = neutral / old status, red = blocked. */
.sstatus { white-space: normal; text-align: left; line-height: 1.25; }
/* student's turn */
.status-frei, .status-aktive, .status-angemeldet, .status-neuertag, .status-protokollok,
.status-protokollzuruck, .status-kolloq, .status-offenprotokolle
                          { background-color: #ffc107; color: #000; }
/* assistant's turn */
.status-protokolloffen, .status-protokoll
                          { background-color: #0d6efd; color: #fff; }
/* Leitung's turn */
.status-new, .status-fertig
                          { background-color: #6f42c1; color: #fff; }
/* experiment booked / running */
.status-reserviert, .status-platzkolloq, .status-versuch, .status-ansage
                          { background-color: #0dcaf0; color: #000; }
/* completed */
.status-laufzettel, .status-bestanden
                          { background-color: #198754; color: #fff; }
/* neutral */
.status-nachtrag          { background-color: #e9ecef; color: #212529; }
/* blocked / failed */
.status-wiederholen, .status-gesperrt
                          { background-color: #dc3545; color: #fff; }

/* Fallback: unbekannter Status — grau */
[class*="status-"] { display: inline-block; }

/* ── Experiment / Zuordnung status badges ─────────────────── */
/* Experiment status badges (fragments/zstatus.html) — colour = whose turn:
   blue = waits for the assistant, yellow = waits for the student, green = done, grey = outside the protocol flow */
.zstatus             { white-space: normal; text-align: left; line-height: 1.25; }
.zstatus-reserviert,
.zstatus-angesagt    { background-color: #6c757d; color: #fff; }
.zstatus-platzkolloq { background-color: #0dcaf0; color: #000; }
.zstatus-ansage,
.zstatus-protoout    { background-color: #ffc107; color: #000; }
.zstatus-protoin,
.zstatus-protorein   { background-color: #0d6efd; color: #fff; }
.zstatus-protook     { background-color: #198754; color: #fff; }
.zstatus-abgebrochen { background-color: #adb5bd; color: #212529; text-decoration: line-through; }
.zstatus-nachtrag    { background-color: #e9ecef; color: #212529; }

/* ── Tables ───────────────────────────────────────────────── */
.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ── HTMX loading indicator ───────────────────────────────── */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* ── Responsive sidebar (future use) ─────────────────────── */
@media (min-width: 992px) {
    .with-sidebar main {
        margin-left: var(--pcp-sidebar-width);
    }
}

/* ── Login page ───────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 1rem;
}

.login-links {
    width: 230px;
    flex-shrink: 0;
    align-self: center;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 0.25rem 0 0.25rem 0;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1rem;
    flex-shrink: 0;
}

/* ── Reservation calendars (student/verstatus.html, student/book-detail.html) ──
   Single shared palette so the two calendars a student sees in one booking
   session ("free/taken/closed" everywhere) don't disagree on what a color means. */
.cal-mine     { background-color: #28a745 !important; color: #fff; }
.cal-free-in  { background-color: #d4edda !important; }
.cal-taken    { background-color: #dc3545 !important; color: #fff; }
.cal-blocked  { background-color: #6c757d !important; color: #fff; }
.cal-closed   { background-color: #8080ff !important; color: #fff; }
.cal-free     { background-color: #fff; }
.cal-past     { background-color: var(--bs-tertiary-bg, #f1f3f5) !important; color: var(--bs-secondary-color, #adb5bd); }
.cal-free:hover { background-color: #b8f0c8 !important; }
/* Day outside a theme block of the semester schedule (Termine 'limited') for this experiment's theme */
.cal-outside  { background: repeating-linear-gradient(45deg, var(--bs-tertiary-bg, #f1f3f5) 0 4px, transparent 4px 8px) !important;
                color: var(--bs-secondary-color, #adb5bd); }

.cal-legend { display: inline-block; width: 14px; height: 14px;
              border-radius: 3px; vertical-align: middle; margin-right: 4px;
              border: 1px solid transparent; }
.cal-legend.cal-free, .cal-legend.cal-free-leg { border-color: #adb5bd; }
.cal-mine-leg    { background: #28a745; }
.cal-free-in-leg { background: #d4edda; border-color: #adb5bd; }
.cal-taken-leg   { background: #dc3545; }
.cal-blocked-leg { background: #6c757d; }
.cal-closed-leg  { background: #8080ff; }
.cal-free-leg    { background: #fff; }

/* Main navigation: staff menus have ~10 entries — full menu from 1200px (below: hamburger), compact up to 1500px
   so it stays on one line instead of wrapping into a second row. */
#mainNav .navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1499.98px) {
    #mainNav .navbar-nav .nav-link { padding-left: .4rem; padding-right: .4rem; font-size: .875rem; }
    #mainNav .navbar-nav .nav-link .bi { margin-right: .15rem !important; }
}

/* ── Theme markers (semester schedule blocks, admin/calendar.html + student/book.html) ── */
.tb-badge { display: inline-block; padding: .1rem .45rem; border-radius: .6rem; font-size: .75rem; font-weight: 600;
            line-height: 1.3; border: 1px solid rgba(0,0,0,.12); }
.tb-td1 { background: #ffd8a8; color: #5c3200; }
.tb-td2 { background: #ffc9c9; color: #5c0011; }
.tb-ec { background: #b2f2bb; color: #0b4d1a; }
.tb-kinetik { background: #a5d8ff; color: #06345c; }
.tb-statistik { background: #d0bfff; color: #2b1166; }
.tb-spektroskopie { background: #fcc2d7; color: #5c0b33; }
.tb-alle { background: #343a40; color: #fff; }
.tb-0kolloq { background: #e9ecef; color: #343a40; }
.tb-unknown { background: #fff; color: #c92a2a; border: 1px dashed #c92a2a; }
.tb-check { display: inline-flex; align-items: center; cursor: pointer; }
.tb-timeline { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-week { width: 74px; min-height: 64px; padding: 3px; border-radius: 4px; border: 1px solid var(--bs-border-color, #dee2e6);
           font-size: .7rem; display: flex; flex-direction: column; gap: 2px; background: var(--bs-body-bg, #fff); }
.tb-week .tb-kw { font-weight: 700; }
.tb-week .tb-date { color: var(--bs-secondary-color, #6c757d); }
.tb-week .tb-mini { font-size: .62rem; padding: 0 .3rem; }
.tb-week .tb-note { font-style: italic; color: var(--bs-secondary-color, #6c757d); }
.tb-week-closed { background: #8080ff22; }
.tb-week-gap { border: 2px solid #dc3545; background: #dc354514; }
.tb-week-gap .tb-note { color: #dc3545; font-weight: 600; font-style: normal; }

/* ── Wide tables (pcpweb.js initScrollHints): visible scrollbar, fade + arrow where columns are hidden ── */
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--bs-secondary-color, #adb5bd) transparent; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--bs-secondary-color, #adb5bd); border-radius: 4px; }
.table-responsive::-webkit-scrollbar-track { background: var(--bs-tertiary-bg, #f1f3f5); }
.scroll-x { position: relative; }
.scroll-x-hint { display: none; font-size: .8rem; color: var(--bs-primary, #0d6efd); padding: .3rem .75rem;
                 background: var(--bs-primary-bg-subtle, #cfe2ff); }
.scroll-x.scroll-x-more-right .scroll-x-hint { display: block; }
.scroll-x::before, .scroll-x::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.5rem;
                                       pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.scroll-x::before { left: 0; background: linear-gradient(to left, transparent, var(--bs-body-bg, #fff)); }
.scroll-x::after  { right: 0; background: linear-gradient(to right, transparent, var(--bs-body-bg, #fff)); }
.scroll-x.scroll-x-more-left::before, .scroll-x.scroll-x-more-right::after { opacity: 1; }
.scroll-x-arrow { display: none; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); z-index: 3;
                  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--bs-border-color, #dee2e6);
                  background: var(--bs-body-bg, #fff); color: var(--bs-primary, #0d6efd);
                  box-shadow: 0 1px 4px rgba(0,0,0,.2); padding: 0; animation: scroll-x-nudge 1.6s ease-in-out 3; }
.scroll-x.scroll-x-more-right .scroll-x-arrow { display: block; }
@keyframes scroll-x-nudge { 0%, 100% { transform: translateY(-50%); } 50% { transform: translate(4px, -50%); } }
@media (prefers-reduced-motion: reduce) { .scroll-x-arrow { animation: none; } }

/* flatpickr (data-date-de) in static mode wraps the field: keep it as wide as its column */
.flatpickr-wrapper { display: block; }