/* ========================================
   Eishockey-Turnier Schichtplanungstool
   Custom Styles
   ======================================== */

:root {
    --ice-blue: #0077b6;
    --ice-blue-dark: #005f8a;
    --ice-blue-light: #90e0ef;
    --ice-blue-pale: #caf0f8;
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-600: #6c757d;
    --gray-800: #343a40;
    --shift-free: #198754;
    --shift-taken: #dc3545;
    --shift-mine: #0d6efd;
    --shift-free-bg: #d1e7dd;
    --shift-taken-bg: #f8d7da;
    --shift-mine-bg: #cfe2ff;
}

/* ---- Global ---- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--gray-50);
    color: var(--gray-800);
}

/* ---- Navbar ---- */
.navbar.bg-primary {
    background: linear-gradient(135deg, var(--ice-blue-dark), var(--ice-blue)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
}

/* ---- Cards ---- */
.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.card-header {
    border-radius: 0.75rem 0.75rem 0 0 !important;
    font-weight: 600;
}

/* ---- Tournament Cards (index page) ---- */
.card.h-100 {
    cursor: pointer;
}

.card.h-100:hover {
    transform: translateY(-2px);
}

.card-title {
    font-weight: 700;
    color: var(--ice-blue-dark);
}

/* ---- Shift Status Colors ---- */
.table tr.table-success {
    background-color: var(--shift-free-bg) !important;
}

/* ---- Shift Cards ---- */
.shift-card {
    border-radius: 0.5rem;
    border-left: 4px solid;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--white);
    transition: box-shadow 0.2s;
}

.shift-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shift-card.shift-free {
    border-left-color: var(--shift-free);
    background: var(--shift-free-bg);
}

.shift-card.shift-taken {
    border-left-color: var(--shift-taken);
    background: var(--shift-taken-bg);
}

.shift-card.shift-mine {
    border-left-color: var(--shift-mine);
    background: var(--shift-mine-bg);
}

/* ---- Progress Bar ---- */
.progress-container {
    background: var(--white);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.progress-container .progress {
    height: 1.25rem;
    border-radius: 0.625rem;
}

.progress-container .progress-bar {
    background: linear-gradient(90deg, var(--ice-blue), var(--ice-blue-light));
    border-radius: 0.625rem;
    font-weight: 600;
    font-size: 0.8rem;
}

.progress-complete .progress-bar {
    background: linear-gradient(90deg, var(--shift-free), #20c997);
}

/* ---- Task Section ---- */
.task-section {
    background: var(--white);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ---- Badges ---- */
.badge-free {
    background: var(--shift-free) !important;
    color: var(--white);
}

.badge-taken {
    background: var(--shift-taken) !important;
    color: var(--white);
}

.badge-partial {
    background: #ffc107 !important;
    color: var(--gray-800);
}

/* ---- Parent Status Page ---- */
.status-card {
    text-align: center;
    padding: 1rem;
}

.status-card .display-4 {
    font-weight: 700;
}

.status-fulfilled {
    color: var(--shift-free);
}

.status-open {
    color: var(--shift-taken);
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-600);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--ice-blue-light);
}

/* ---- Loading Spinner ---- */
.loading-spinner {
    text-align: center;
    padding: 3rem;
}

.loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    color: var(--ice-blue);
}

/* ---- Toast / Alerts ---- */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
}

/* ---- Admin: Tournament Management ---- */
.border-start.border-3 {
    border-left-color: var(--ice-blue) !important;
}

#tournament-manage .card-header {
    background: var(--ice-blue-pale);
}

/* ---- Footer ---- */
.site-footer {
    background: var(--gray-800);
    color: var(--gray-200);
    padding: 1.5rem 0;
    margin-top: 3rem;
    text-align: center;
    font-size: 0.9rem;
}

/* ---- Modal ---- */
.modal-header {
    background: linear-gradient(135deg, var(--ice-blue), var(--ice-blue-dark));
    color: var(--white);
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.9rem;
    }

    .navbar-brand {
        font-size: 1.1rem;
    }
}

/* ---- Animations ---- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}