/* ===========================
   LH27 Camp Events – Frontend CSS (Dark + Mobile Tabs)
   =========================== */

/* ---------- Variablen & Themes ---------- */
:root {
    --lh27-half: 30px;
    --lh27-day-height: calc(var(--lh27-half) * 48);
    --lh27-header: 44px;

    /* Light */
    --lh27-bg: #ffffff;
    --lh27-surface: #ffffff;
    --lh27-border: #2a2b2d1a;
    --lh27-hourline: rgba(0,0,0,0.20);
    --lh27-halfline: rgba(0,0,0,0.10);
    --lh27-text: #1f2937;
    --lh27-muted: #6b7280;

    --lh27-event-bg: #eef7e6;
    --lh27-event-border: #b8d69a;
    --lh27-event-text: #1f2937;
}

@media (prefers-color-scheme: dark) {
    :root {
        --lh27-bg: #0f0f10;
        --lh27-surface: #161718;
        --lh27-border: #2a2b2d;
        --lh27-hourline: rgba(255,255,255,0.30);
        --lh27-halfline: rgba(255,255,255,0.10);
        --lh27-text: #e5e7eb;
        --lh27-muted: #9ca3af;

        --lh27-event-bg: #23331c;
        --lh27-event-border: #3b5c2d;
        --lh27-event-text: #e5e7eb;
    }
}

/* ---------- Layout ---------- */
.lh27-frontend { color: var(--lh27-text); }
.lh27-frontend .lh27-front-header h3 { margin: 0 0 10px; }

.lh27-frontend .lh27-calendar { display: grid; grid-template-columns: 70px 1fr; gap: 10px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Stunden – mit Header-Spacer */
.lh27-frontend .lh27-hours { position: relative; }
.lh27-frontend .lh27-header-spacer { height: var(--lh27-header); }

.lh27-frontend .lh27-hours-grid {
    height: var(--lh27-day-height);
    background:
            repeating-linear-gradient(to bottom, var(--lh27-halfline) 0, var(--lh27-halfline) 1px, transparent 1px, transparent var(--lh27-half)),
            repeating-linear-gradient(to bottom, var(--lh27-hourline) 0, var(--lh27-hourline) 2px, transparent 2px, transparent calc(var(--lh27-half) * 2));
}
.lh27-frontend .lh27-hour, .lh27-frontend .lh27-half { height: var(--lh27-half); position: relative; }
.lh27-frontend .lh27-hour span {
    position: absolute;
    top: 4px;                 /* etwas unter die Linie */
    right: 8px;
    font-size: 12px;
    color: var(--lh27-muted);
}

/* 10 Tage */
.lh27-frontend .lh27-days { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.lh27-frontend .lh27-day-col { border: 1px solid var(--lh27-border); border-radius: 8px; background: var(--lh27-surface); overflow: hidden; }
.lh27-frontend .lh27-day-header {
    background: color-mix(in oklab, var(--lh27-surface), #000 6%);
    padding: 6px 8px; font-weight: 600; border-bottom: 1px solid var(--lh27-border); height: var(--lh27-header); display: flex; align-items: center;
}
.lh27-frontend .lh27-day-body {
    position: relative; height: var(--lh27-day-height);
    background:
            repeating-linear-gradient(to bottom, var(--lh27-halfline) 0, var(--lh27-halfline) 1px, transparent 1px, transparent var(--lh27-half)),
            repeating-linear-gradient(to bottom, var(--lh27-hourline) 0, var(--lh27-hourline) 2px, transparent 2px, transparent calc(var(--lh27-half) * 2));
}

/* Events – kleinere Typo, damit mehrere nebeneinander gut passen */
.lh27-frontend .lh27-event {
    position: absolute;
    border-radius: 8px;
    background: var(--lh27-event-bg);
    border: 1px solid var(--lh27-event-border);
    color: var(--lh27-event-text);
    padding: 4px 6px;              /* kleiner */
    box-sizing: border-box;
    overflow: hidden;
    backdrop-filter: saturate(120%);
    font-size: 12px;
    line-height: 1.2;
}
.lh27-frontend .lh27-event-title { font-weight: 700; margin-bottom: 2px; font-size: 13px; line-height: 1.15; }
.lh27-frontend .lh27-event-time  { font-size: 11px; opacity: .85; }
.lh27-frontend .lh27-event .lh27-cat { font-weight: 700; opacity: .9; margin-left: 2px; }

/* Mobile Tag-Leiste (Tabs) – nie 100% Breite */
.lh27-day-tabs { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lh27-day-tab {
    display: inline-flex;          /* <— verhindert 100% */
    flex: 0 0 auto;
    border: 1px solid var(--lh27-border);
    background: color-mix(in oklab, var(--lh27-surface), #000 4%);
    color: var(--lh27-text);
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    max-width: 160px;              /* Sicherheit, falls Theme eigenwillig ist */
    white-space: nowrap;
}
.lh27-day-tab.active {
    background: color-mix(in oklab, var(--lh27-surface), #000 12%);
    border-color: color-mix(in oklab, var(--lh27-border), #000 20%);
}
@media (prefers-color-scheme: dark) {
    .lh27-day-tab { background: #242527; border-color: #2f3033; color: #e5e7eb; }
    .lh27-day-tab.active { background: #2b2c2f; border-color: #3a3b3f; }
}

/* Modal Dark-Mode (inkl. Close-X immer sichtbar) */
.lh27-modal .btn-close { z-index: 5; }
@media (prefers-color-scheme: dark) {
    .lh27-modal .modal-content { background: #1b1c1d; color: #e5e7eb; border: 1px solid #2a2b2d; }
    .lh27-modal .modal-header { border-bottom-color: #2a2b2d; }
    .lh27-modal .btn-close {
        --bs-btn-close-color: #fff;      /* Bootstrap-Variante */
        filter: none !important;         /* konsistent auf iOS/Android */
        opacity: .9;
    }
    .lh27-modal .btn-close:hover { opacity: 1; }
}

/* Mobile Layout */
@media (max-width: 900px) {
    .lh27-frontend .lh27-days { grid-template-columns: 1fr; }
    .lh27-frontend .lh27-calendar { grid-template-columns: 50px 1fr; }
    .lh27-day-tabs { display: flex; }
}