/* css/style.css */

:root {
    /* Corporate Colors */
    --brand-orange: #d97706;
    --brand-orange-hover: #b45309;
    --brand-black: #0f172a;
    
    /* Module Colors */
    --brand-purple: #7c3aed;
    --brand-pink: #db2777;
    --brand-green: #10b981;
    --brand-teal: #0d9488;
    --brand-amber: #f59e0b;
}

body {
    background-color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
}

/* Typography & Utilities */
.text-orange-gradient {
    background: linear-gradient(135deg, var(--brand-orange) 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-brand-orange { color: var(--brand-orange) !important; }
.bg-brand-orange { background-color: var(--brand-orange) !important; }

/* Custom Buttons */
.btn-corp {
    background-color: var(--brand-orange);
    color: white;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
    border: none;
}
.btn-corp:hover { background-color: var(--brand-orange-hover); color: white; }

.btn-module {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.2s;
    color: white;
}
.btn-module:hover { opacity: 0.9; color: white; }

/* Login Box */
.login-box {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--brand-orange);
}

/* Module Cards */
.modul-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
}
.modul-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.05);
}

/* Border Tops for Modules */
.border-t-finanz { border-top: 4px solid var(--brand-purple); }
.border-t-familie { border-top: 4px solid var(--brand-pink); }
.border-t-urlaub { border-top: 4px solid var(--brand-green); }
.border-t-zeit { border-top: 4px solid var(--brand-amber); }

/* Icons Backgrounds (Helper classes) */
.icon-bg { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; }
.bg-purple-subtle { background-color: rgba(124, 58, 237, 0.1); color: var(--brand-purple); }
.bg-pink-subtle { background-color: rgba(219, 39, 119, 0.1); color: var(--brand-pink); }
.bg-green-subtle { background-color: rgba(16, 185, 129, 0.1); color: var(--brand-green); }
.bg-amber-subtle { background-color: rgba(245, 158, 11, 0.1); color: var(--brand-amber); }
.bg-orange-subtle { background-color: rgba(217, 119, 6, 0.1); color: var(--brand-orange); }

/* Check List */
.check-list { list-style: none; padding: 0; margin: 1rem 0; flex-grow: 1; }
.check-list li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; color: #475569; }

/* VereinPlaner Section */
.vp-section {
    background: linear-gradient(to right, #0f766e, #115e59);
    border-radius: 1rem;
    padding: 2rem;
    color: white;
    box-shadow: 0 10px 20px -5px rgba(13, 148, 136, 0.3);
}

/* Quick Tools */
.tool-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: all 0.2s;
    color: inherit;
}
.tool-card:hover { border-color: var(--brand-orange); }

/* Text Sections */
.text-section {
    background: white;
    border-radius: 1rem;
    padding: 2.5rem;
    border: 1px solid #e2e8f0;
}

/* Footer */
.footer-minimal {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 3rem;
}
.footer-links a { color: var(--brand-orange); text-decoration: none; margin: 0 0.5rem; font-weight: 600; }

/* Floating Buttons */
.float-container { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 15px; align-items: center; }
.btn-float { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.2s; cursor: pointer; text-decoration: none; border: none; }
.btn-float:hover { transform: scale(1.1); color: white; }
.btn-float.wa { background-color: #25D366; }
.btn-float.mail { background-color: var(--brand-orange); }

/* Custom Modal (Kept separate from Bootstrap Modal to match logic) */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); z-index: 1050;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-content-custom {
    background: white; width: 100%; max-width: 500px; border-radius: 1.5rem; padding: 2rem;
    transform: translateY(20px); transition: transform 0.3s;
}
.modal-overlay.open .modal-content-custom { transform: translateY(0); }

/* Helpers */
.honeypot { display: none !important; }

/* Ergänzung für login.php in css/style.css */

/* Heller, moderner Hintergrund für den Login-Bereich */
body.login-page {
    background: linear-gradient(135deg, #f3e8ff 0%, #ffffff 50%, #ecfdf5 100%);
    min-height: 100vh;
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Install Prompt Animation */
@keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

#installAppContainer {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ZEITPLANER MODUL --- */

/* Wochen-Grid: Responsive */
.week-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile: 2 Spalten */
    gap: 0.5rem; /* Etwas kleinerer Gap für mehr Platz */
}

/* Ab Tablet (hochkant) -> 4 Spalten */
@media(min-width: 576px) {
    .week-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Ab Desktop (Wenn wir volle Breite haben) -> 7 Spalten */
/* WICHTIG: Da wir im PHP jetzt col-xl nutzen, haben wir unter 1200px volle Breite */
@media(min-width: 992px) {
    .week-grid { grid-template-columns: repeat(7, 1fr); }
}

/* Wenn das Layout zweispaltig wird (ab 1200px), müssen wir aufpassen */
/* Wir bleiben bei 7, aber skalieren den Inhalt der Cards etwas runter */

/* Tages-Karten */
.day-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem; /* Weniger Padding damit mehr Inhalt passt */
    position: relative;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    min-width: 0; /* WICHTIG: Verhindert Grid-Overflow */
}
.day-card:hover { border-color: var(--brand-orange); }

.day-card.today { background: #fff7ed; border-color: var(--brand-orange); }
.day-card.holiday { background: #f3e8ff; border-color: #d8b4fe; }
.day-card.weekend { background: #f8fafc; opacity: 0.8; }

/* Abwesenheits-Karten */
.booking-card {
    border-radius: 1rem;
    color: white;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: none;
}
.booking-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15); }
.booking-card-icon {
    position: absolute; bottom: -1.5rem; right: -1.5rem;
    opacity: 0.2; transform: rotate(-15deg);
}

.tracker-elapsed { font-variant-numeric: tabular-nums; font-family: monospace; font-weight: 700; }