/* Base CSS — global styles shared across all pages */

/* Ensure footer stays at bottom */
body {
    min-height: 100vh;
}

/* Smooth transitions for cards */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Clip header background to rounded corners — only on cards with colored headers
   (task list cards). Not applied globally because overflow:hidden clips dropdowns
   inside form cards. */
.card.card-clip {
    overflow: hidden;
}

.card.card-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Button hover effects */
.btn {
    transition: all 0.2s ease-in-out;
}

/* Required field indicator */
.form-label-required::after {
    content: " *";
    color: var(--bs-danger);
}

/* Form validation styling improvements */
.is-invalid {
    border-color: #dc3545 !important;
}

.invalid-feedback {
    display: block;
}

/* Navbar branding */
.navbar-brand {
    font-weight: 600;
    font-size: 1.5rem;
}

/* Brighter nav links — more visible than default, with hover contrast */
.nav-link-bright {
    color: rgba(255, 255, 255, 0.85) !important;
}

.nav-link-bright:hover,
.nav-link-bright:focus {
    color: #fff !important;
}

/* Sticky footer */
.footer {
    background-color: #f8f9fa;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}


/* Toast container — positioned below navbar, above modal backdrop (z-index 1050) */
#toast-container {
    z-index: 1090;
    margin-top: 56px; /* navbar height */
}

#toast-container .toast {
    font-size: 0.95rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    animation: toast-slide-in 0.3s ease-out;
}

#toast-container .toast-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.5rem 0;
    background-color: rgba(255, 255, 255, 0.3);
}

@keyframes toast-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Confirm modal — floats above other modals (z-index 1055) and their backdrops (1050).
   Its own backdrop also needs to sit above those layers. */
#confirm-modal {
    z-index: 1070;
}

#confirm-modal .modal-dialog {
    max-width: var(--confirm-width, 420px);
}

#confirm-modal ~ .modal-backdrop:last-child {
    z-index: 1065;
}

/* HTMX Loading Indicator — hidden by default, shown on htmx-request */
.htmx-indicator {
    opacity: 0;
    pointer-events: none;
}

.htmx-indicator.htmx-request {
    opacity: 1;
    pointer-events: auto;
    z-index: 100;
}