/* =============================================================
   ULTRA FUN RUN — PUBLIC SITE — app.css
   Custom component styles that Tailwind CDN does not cover.
   Brand palette (matches tailwind.config in layouts/main.php):
     brand-blue    #005596
     brand-navy    #062051
     brand-red     #C5161D
     brand-red-alt #C4161C
   ============================================================= */

/* Hide native scrollbars project-wide (matches UXPilot source). */
::-webkit-scrollbar {
    display: none;
}

/* Re-enable scrollbars inside the growl container so long message queues
   can still scroll. */
#growl-container::-webkit-scrollbar { display: initial; }

/* ── Buttons (used by ConfirmModal and future shared widgets) ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary        { background-color: #005596; color: #fff; }
.btn-primary:hover  { background-color: #00437a; }

.btn-secondary      { background-color: #F1F5F9; color: #334155; border-color: #E2E8F0; }
.btn-secondary:hover { background-color: #E2E8F0; }

.btn-danger         { background-color: #C5161D; color: #fff; border-color: transparent; }
.btn-danger:hover   { background-color: #a01218; color: #fff; }

.btn-warning        { background-color: #FFC107; color: #1E293B; border-color: transparent; }
.btn-warning:hover  { background-color: #E0A800; }

/* ── Danger / warning tints (used by ConfirmModal icon circles) ─ */
.bg-danger-soft  { background-color: #fef2f2; }
.text-danger     { color: #C5161D; }
.bg-warning-soft { background-color: #fffbeb; }
.text-warning    { color: #B45309; }

/* Modal overlay (ConfirmModal backdrop) */
.modal-overlay-bg { background-color: rgba(15, 23, 42, 0.6); }

/* ── Growl / toast component ──────────────────────────────────── */
#growl-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10060; /* above modals */
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: calc(100vw - 2.5rem);
    width: 22rem;
    pointer-events: none;
}

.growl {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: 0.875rem;
    line-height: 1.35rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    background: #fff;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.growl.is-visible { transform: translateX(0); opacity: 1; }

.growl-icon { flex-shrink: 0; margin-top: 0.125rem; font-size: 1.05rem; }
.growl-body { flex: 1; min-width: 0; }
.growl-title {
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.125rem;
    font-size: 0.9rem;
}
.growl-message { color: #334155; word-wrap: break-word; }
.growl-close {
    background: transparent;
    border: 0;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    padding: 0.125rem;
    line-height: 1;
    flex-shrink: 0;
}
.growl-close:hover { opacity: 1; }

.growl-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.growl-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.growl-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.growl-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }