/* ==========================================================================
   MT Wochenplaner – zentrale Stylesheet (Django static)
   --------------------------------------------------------------------------
   Stilistisch orientiert an der App „bescheidmodul“ (BHV-Design):
   helle Grundfläche, weiße Karten, BHV-Blaufarben (#0b3c5d / #2680c2),
   klare Tabellen/Formulare/Buttons.
   ========================================================================== */

/* ---------- Grundgerüst ---------- */
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f5f7fa;
    color: #102a43;
}

.page {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 24px 32px 48px;
    position: relative;
}

/* ---------- Kopfbereich / Logo (analog bescheidmodul) ---------- */
.logo { position: absolute; top: 16px; right: 16px; }
.logo-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0b3c5d;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
}

header { margin-bottom: 18px; }
header h1 { margin: 0; font-size: 24px; color: #102a43; }
header p { margin: 4px 0 0 0; font-size: 14px; color: #627d98; }

/* ---------- Navigation (weiße Leiste, wie topnav im bescheidmodul) ---------- */
.app-nav-wrapper {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    margin: 0 0 16px 0;
    position: sticky;
    top: 0;
    z-index: 1050;
}
/* Dropdown-Menü muss über allem liegen */
.app-nav-wrapper .dropdown-menu {
    z-index: 1100;
    position: absolute;
}
.app-nav-inner {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    /* KEIN overflow-x: auto hier – das würde overflow-y: hidden erzwingen
       und das Dropdown-Menü abschneiden! */
}
.app-nav-brand {
    color: #0b3c5d;
    font-size: 13px;
    font-weight: 700;
    padding: 0 16px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.app-nav-toggler {
    display: none;
    background: none;
    border: none;
    color: #0b3c5d;
    font-size: 18px;
    padding: 8px 12px;
    cursor: pointer;
    margin-left: auto;
}
.app-nav-links {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    flex: 1;
}
.app-nav-tab {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: #0b3c5d;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.app-nav-tab:hover {
    color: #0b3c5d;
    background: #f0f7ff;
    text-decoration: none;
}
.app-nav-tab.active {
    color: #0b3c5d;
    border-bottom-color: #2680c2;
    background: #eef6fd;
}
.app-nav-logout {
    margin-left: 0;
    color: #d64545;
}
.app-nav-logout:hover { color: #b93a3a; }

/* Bereichs-Dropdown + Profil-Avatar in der Navigationsleiste */
.app-nav-area {
    display: flex;
    align-items: center;
    margin: 0 10px;
}
.app-nav-profile {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-left: auto;
}
.app-nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2680c2;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .app-nav-toggler { display: flex; }
    .app-nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #ffffff;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
    }
    .app-nav-links.open { display: flex; }
    .app-nav-tab { border-bottom: none; border-left: 3px solid transparent; margin-bottom: 0; }
    .app-nav-tab.active { border-left-color: #2680c2; border-bottom: none; }
    .app-nav-logout { margin-left: 0; }
    .app-nav-wrapper { position: relative; }
}
/* ---------- Meldungen (Django messages, wie bescheidmodul) ---------- */
.messages { margin: 0 0 16px 0; padding: 0; }
.messages li {
    list-style: none;
    margin-bottom: 6px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}
.messages li.success { background-color: #e3fbe3; color: #1e5b2e; }
.messages li.error { background-color: #fdeaea; color: #a42525; }
.messages li.warning { background-color: #fff4d6; color: #8a6d1a; }
.messages li.info { background-color: #d8e2ff; color: #102a43; }

/* ---------- Inhalt (weiße Karte, wie bescheidmodul .card) ---------- */
main { padding: 0 0 24px 0; }
.main-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    padding: 22px 24px;
}

footer {
    padding: 14px 4px 0;
    font-size: 12px;
    color: #627d98;
    text-align: center;
}

/* ---------- Authentifizierung (Login/Registrierung) ---------- */
.auth-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    padding: 22px 24px;
}

/* ---------- Buttons (BHV-Farben auf Bootstrap-Varianten) ---------- */
.btn { border-radius: 6px; }
.btn-primary {
    --bs-btn-bg: #2680c2;
    --bs-btn-border-color: #2680c2;
    --bs-btn-hover-bg: #186faf;
    --bs-btn-hover-border-color: #186faf;
    --bs-btn-active-bg: #186faf;
    --bs-btn-active-border-color: #186faf;
    --bs-btn-disabled-bg: #2680c2;
    --bs-btn-disabled-border-color: #2680c2;
}
.btn-secondary {
    --bs-btn-bg: #627d98;
    --bs-btn-border-color: #627d98;
    --bs-btn-hover-bg: #4a6a8a;
    --bs-btn-hover-border-color: #4a6a8a;
    --bs-btn-active-bg: #4a6a8a;
    --bs-btn-active-border-color: #4a6a8a;
    --bs-btn-disabled-bg: #627d98;
    --bs-btn-disabled-border-color: #627d98;
}
.btn-danger {
    --bs-btn-bg: #d64545;
    --bs-btn-border-color: #d64545;
    --bs-btn-hover-bg: #b93a3a;
    --bs-btn-hover-border-color: #b93a3a;
    --bs-btn-active-bg: #b93a3a;
    --bs-btn-active-border-color: #b93a3a;
}
.btn-success {
    --bs-btn-bg: #2f8f4e;
    --bs-btn-border-color: #2f8f4e;
    --bs-btn-hover-bg: #267a41;
    --bs-btn-hover-border-color: #267a41;
    --bs-btn-active-bg: #267a41;
    --bs-btn-active-border-color: #267a41;
}

/* ---------- Formulare (wie bescheidmodul) ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="number"], input[type="search"],
textarea, select, .form-control, .form-select {
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #cbd2d9;
    font-size: 14px;
    font-family: inherit;
    background-color: #ffffff;
    color: #102a43;
}
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: #2680c2;
    box-shadow: 0 0 0 1px #2680c2;
}
/* ---------- Tabellen (wie bescheidmodul table.data) ---------- */
table.data {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
table.data th {
    background: #f1f5f9;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #627d98;
    padding: 10px 12px;
}
table.data td {
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    font-size: 14px;
    vertical-align: top;
}

/* ---------- Kachel-Menü (wie bescheidmodul) ---------- */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 8px;
}
.menu-card-link { text-decoration: none; color: inherit; }
.menu-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 140px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.menu-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); }
.menu-card-image { flex: 2; background-size: cover; background-position: center; }
.menu-card-label {
    flex: 1;
    padding: 10px 12px;
    background-color: #0b3c5d;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-align: center;
}

/* ---------- BHV-Badges (wie bescheidmodul) ---------- */
.badge { font-weight: 600; }
.badge-green { background: #e3fbe3; color: #1e5b2e; }
.badge-red { background: #fdeaea; color: #a42525; }
.badge-amber { background: #fff4d6; color: #8a6d1a; }
.badge-blue { background: #d8e2ff; color: #0b3c5d; }

/* ---------- Diverse Hilfsklassen (aus bescheidmodul) ---------- */
h2.section { font-size: 18px; margin-top: 0; color: #0b3c5d; }
.hint { font-size: 12px; color: #627d98; }
.field { margin-bottom: 12px; }
.field > label { display: block; font-size: 13px; font-weight: 600; color: #0b3c5d; margin-bottom: 4px; }
.subsection { font-size: 15px; color: #0b3c5d; margin: 18px 0 6px; }
.err { color: #a42525; font-size: 12px; margin: 4px 0 0; }

/* ---------- Planyzer-spezifische Helfer (bisher inline in base.html) ---------- */
.planner-link-btn {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #2196F3;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.planner-link-btn:hover { background-color: #1976D2; transform: scale(1.2); }

.project-category-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    font-size: 11px;
    line-height: 1.2;
    cursor: default;
    user-select: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- iframe-Modus: Kopf, Navigation & Footer ausblenden ---------- */
body.body-iframe .app-nav-wrapper,
body.body-iframe footer,
body.body-iframe .logo,
body.body-iframe header { display: none; }
body.body-iframe .page { padding: 0.625rem; }
body.body-iframe .main-container {
    box-shadow: none;
    border-radius: 0;
    padding: 0.625rem;
}

/* ---------- Responsive (analog bescheidmodul) ---------- */
@media (max-width: 600px) {
    .page { padding: 16px 14px 40px; }
    .logo { position: static; margin-bottom: 8px; }
}