/* ============================================================
   Prezenty shared theme - unified look for all subpages
   Design language:
   - seba.jpg fixed background with dark overlay
   - black-fade top bar (no solid color navbars)
   - dark glass cards (rgba 255,255,255,0.15 + blur) with white text
   - red (#F44336) only as a card-header accent
   ============================================================ */

/* --- Contrast guards: never white icons/text on light buttons ---
   Repeated class names raise specificity above the broad
   ".page .card * { color: white !important }" rules used on some pages */
.btn.btn-light,
.btn.btn-light.btn-light *,
.btn.btn-warning,
.btn.btn-warning.btn-warning *,
.btn.btn-white,
.btn.btn-white.btn-white * {
    color: #212529 !important;
    text-shadow: none !important;
}

/* Bootstrap turns outline-light buttons white on hover/active -
   make sure their content goes dark at the same time */
.btn.btn-outline-light:hover,
.btn.btn-outline-light.btn-outline-light:hover *,
.btn.btn-outline-light:active,
.btn.btn-outline-light.btn-outline-light:active *,
.btn.btn-outline-light.active,
.btn.btn-outline-light.btn-outline-light.active * {
    color: #212529 !important;
    text-shadow: none !important;
}

/* --- Unified top bar: black fade, like recipients/activity --- */
.app-topbar,
.stats-navbar,
.leaderboard-navbar,
.top-menu-container {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) !important;
    box-shadow: none !important;
    border: none !important;
}

/* --- Unified frosted card (replaces the old dark glass) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border-radius: 20px;
    color: #2d3748;
}

/* --- Skeleton loading placeholders (shared) --- */
.skeleton-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0;
}

.skeleton-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skeleton {
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.skeleton-line {
    height: 13px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* --- Desktop left navigation (>= 992px replaces the bottom dock) --- */
.desktop-nav {
    display: none;
}

@media (min-width: 992px) {
    body.has-desktop-nav .bottom-tab-bar {
        display: none !important;
    }

    body.has-desktop-nav {
        padding-left: 292px;
        padding-bottom: 24px !important;
    }

    .desktop-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 12px;
        left: 12px;
        bottom: 12px;
        width: 264px;
        /* Frosted surface - consistent with all app cards */
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        padding: 16px 12px;
        z-index: 1001;
        overflow-y: auto;
    }

    .desktop-nav .dnav-title {
        font-weight: 700;
        font-size: 18px;
        color: #2d3748;
        padding: 6px 12px 12px;
    }

    /* Profile block: avatar + name, links to settings */
    .desktop-nav .dnav-profile {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        margin-bottom: 10px;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.04);
        text-decoration: none;
        color: #2d3748;
        transition: background 0.15s ease;
    }

    .desktop-nav .dnav-profile:hover {
        background: rgba(0, 0, 0, 0.08);
        color: #2d3748;
    }

    .desktop-nav .dnav-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        font-size: 19px;
    }

    .desktop-nav .dnav-profile-name {
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-nav .dnav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        color: #4a5568;
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 2px;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .desktop-nav .dnav-item i {
        font-size: 20px;
        width: 24px;
        text-align: center;
        flex-shrink: 0;
    }

    .desktop-nav .dnav-item:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #2d3748;
    }

    .desktop-nav .dnav-item.active {
        background: rgba(244, 67, 54, 0.1);
        color: #E53935;
        font-weight: 600;
    }

    .desktop-nav .dnav-divider {
        height: 1px;
        background: rgba(0, 0, 0, 0.08);
        margin: 10px 8px;
    }

    .desktop-nav .dnav-badge {
        margin-left: auto;
        background: linear-gradient(135deg, #FF5722, #F44336);
        color: #fff;
        border-radius: 9px;
        min-width: 18px;
        height: 18px;
        font-size: 11px;
        font-weight: 700;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
    }
}

/* --- Alignment: below the desktop-sidebar breakpoint, containers are
   full-width (minus the standard 12px gutters), matching the floating
   dock's 12px inset so card and dock edges line up exactly --- */
@media (max-width: 991.98px) {
    .container {
        max-width: 100% !important;
    }
}

/* --- Desktop with sidebar: page-title navbars are redundant (the sidebar
   shows the app name and current page), so they are hidden entirely and
   content starts at the top, aligned with the sidebar's 12px inset. --- */
@media (min-width: 992px) {
    body.has-desktop-nav .fixed-header-bar,
    body.has-desktop-nav .app-topbar,
    body.has-desktop-nav .stats-navbar,
    body.has-desktop-nav .leaderboard-navbar,
    body.has-desktop-nav .top-menu-container,
    body.has-desktop-nav nav.navbar {
        display: none !important;
    }

    /* Content top edge aligns with the sidebar top (12px) */
    body.has-desktop-nav .container.mt-4 {
        margin-top: 12px !important;
    }

    body.has-desktop-nav .container > .stats-container:first-child {
        margin-top: 12px;
    }
}

/* --- Mobile: page-title headings are redundant too (the dock's active
   tab communicates location). Home keeps its slim top bar because it
   hosts the avatar (link to /ustawienia) - only the title is removed. --- */
@media (max-width: 991.98px) {
    .stats-navbar .navbar-brand {
        display: none !important;
    }

    /* Bar is now just the avatar - tighten the gap below it */
    .stats-navbar {
        margin-bottom: 0.5rem !important;
    }

    .leaderboard-navbar,
    .activity-page nav.navbar {
        display: none !important;
    }
}

/* --- Toasts: rounded, soft shadow, compact ghost action button --- */
.toast {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden;
}

.toast .toast-body {
    padding: 12px 14px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Action (e.g. Cofnij): translucent ghost pill that sits INSIDE the
   toast instead of a huge solid-white button overflowing its edges */
.toast .toast-action-btn {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    line-height: 1 !important;
    padding: 8px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    flex-shrink: 0;
}

.toast .toast-action-btn:hover,
.toast .toast-action-btn:active {
    background: rgba(255, 255, 255, 0.34) !important;
    color: #ffffff !important;
}

.toast .btn-close {
    font-size: 11px;
    opacity: 0.75;
    margin-right: 12px !important;
    flex-shrink: 0;
}

/* --- Reservation design language: orange --- */
.btn.btn-reserve {
    background: #F57C00;
    border: none;
    color: #ffffff !important;
    font-weight: 600;
}

.btn.btn-reserve:hover,
.btn.btn-reserve:focus {
    background: #EF6C00;
    color: #ffffff !important;
}

.btn.btn-reserve.btn-reserve * {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Presents reserved by me: orange highlight instead of yellow */
.present-item.reserved-by-me {
    background-color: #fff3e0 !important;
    border-left: 4px solid #F57C00 !important;
}

.present-item.reserved-by-me .present-title {
    color: #e65100 !important;
}

/* --- Identity confirmation modal: roomier on desktop --- */
@media (min-width: 992px) {
    #selfIdentificationModal .modal-dialog {
        max-width: 640px;
    }

    #selfIdentificationModal .modal-body {
        padding: 2.5rem 3rem;
        font-size: 1.1rem;
    }

    #selfIdentificationModal .modal-title {
        font-size: 1.35rem;
    }

    #selfIdentificationModal .fa-user-circle {
        font-size: 4.5rem !important;
    }

    #selfIdentificationModal .modal-footer {
        padding: 1rem 2rem 2rem;
    }
}