/* ============================================================
   Base layer — global polish, z-index, scroll, select2
   Migrated from ios-polish, scroll-fade, z-index fixes
   ============================================================ */
/* ============================================================
   iOS POLISH LAYER
   ------------------------------------------------------------
   Additive enhancements that make existing Bootstrap / custom
   components feel native iOS. Loaded AFTER component CSS so it
   wins specifically (no global spray). Uses tokens
   from tokens.css.
   ============================================================ */

/* ── Global rendering polish ───────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Prevent rubber-band overscroll bleeding background on iOS */
    overscroll-behavior-y: none;
}

/* Remove default touch callouts on interactive elements */
a, button, [role="button"], .btn, .mobile-nav-item, .card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Selectable text where it makes sense */
p, h1, h2, h3, h4, h5, h6, span, td, th, li, label, .ep-selectable {
    -webkit-user-select: text;
    user-select: text;
}

/* iOS-style smooth momentum scroll on overflow containers.
   `contain` on both axes is right for a modal or a dropdown: the page
   behind them must not scroll. It is wrong for a table wrapper. */
.modal-body,
.dropdown-menu,
.scroll-container,
[data-scroll] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* A horizontally scrolling table must still let a VERTICAL swipe reach
   the page. `overscroll-behavior: contain` on both axes meant a finger
   landing anywhere on the leaderboard had its up/down swipe swallowed:
   the wrapper is a vertical scroll container (overflow-x: auto forces
   overflow-y to compute to auto) with nothing to scroll, and `contain`
   forbids passing the gesture to the page. Scrolling only worked in the
   few pixels of margin beside the table. Safari chains more loosely, so
   iOS never showed it and only Android users complained.
   Sideways overscroll stays contained — that is what stops a swipe
   along the table from dragging the whole page around. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

/* Hide scrollbars on touch — desktop keeps them */
@media (hover: none) and (pointer: coarse) {
    .modal-body::-webkit-scrollbar,
    .dropdown-menu::-webkit-scrollbar,
    .scroll-container::-webkit-scrollbar {
        display: none;
    }
    .modal-body,
    .dropdown-menu,
    .scroll-container {
        scrollbar-width: none;
    }
}

/* ── Typography sharpness (iOS uses tight tracking on big text) ── */
h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3 {
    letter-spacing: var(--ep-tracking-tight);
    font-weight: var(--ep-weight-bold);
    line-height: var(--ep-leading-tight);
}

h4, h5, h6, .h4, .h5, .h6 {
    letter-spacing: var(--ep-tracking-tight);
    font-weight: var(--ep-weight-semibold);
}

/* ── Buttons — iOS press states ────────────────────────────── */
.btn {
    border-radius: var(--ep-radius-md);
    font-weight: var(--ep-weight-semibold);
    letter-spacing: var(--ep-tracking-normal);
    min-height: 44px; /* Apple HIG minimum touch target */
    padding-inline: var(--ep-space-4);
    transition:
        transform var(--ep-motion-fast) var(--ep-ease-spring),
        opacity var(--ep-motion-fast) var(--ep-ease-out),
        box-shadow var(--ep-motion-fast) var(--ep-ease-out),
        background-color var(--ep-motion-fast) var(--ep-ease-out);
}

.btn:active,
.btn.active {
    transform: scale(0.97);
}

/* iOS dims, not just darkens, on press */
.btn:not(:disabled):active {
    opacity: 0.85;
}

/* Strong focus ring (visible only on keyboard navigation) */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--ep-shadow-focus);
}

/* Pill variant — Apple loves pill buttons in sheets */
.btn-pill,
.btn.rounded-pill {
    border-radius: var(--ep-radius-pill);
}

/* ── Form controls — iOS field feel ────────────────────────── */
.form-control,
.form-select,
.form-check-input {
    border-radius: var(--ep-radius-md);
    min-height: 44px;
    transition:
        border-color var(--ep-motion-fast) var(--ep-ease-out),
        box-shadow var(--ep-motion-fast) var(--ep-ease-out);
}

.form-control:focus,
.form-select:focus {
    box-shadow: var(--ep-shadow-focus);
}

/* Disable iOS Safari's zoom on input focus (font must be >= 16px) */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: max(16px, var(--ep-text-base));
    }
}

/* ── Cards — consistent depth ──────────────────────────────── */
.card,
.ep-card {
    border-radius: var(--ep-radius-lg);
    border: 1px solid var(--ep-border-subtle);
    box-shadow: var(--ep-shadow-card);
    transition:
        transform var(--ep-motion-fast) var(--ep-ease-spring),
        box-shadow var(--ep-motion-fast) var(--ep-ease-out);
}

/* Interactive card press feedback */
.card[role="button"]:active,
.card.is-interactive:active,
a.card:active,
.ep-card.is-interactive:active {
    transform: scale(0.985);
    box-shadow: var(--ep-shadow-sm);
}

/* Frosted glass card variant */
.ep-card.is-glass {
    background: var(--ep-glass-bg);
    backdrop-filter: blur(var(--ep-glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--ep-glass-blur)) saturate(180%);
    border-color: var(--ep-glass-border);
}

/* ── Modals — iOS sheet feel ──────────────────────────────── */
.modal {
    --bs-modal-border-radius: var(--ep-radius-2xl);
}

.modal-content {
    border-radius: var(--ep-radius-2xl);
    border-color: var(--ep-glass-border);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--ep-border-subtle);
    padding: var(--ep-space-4) var(--ep-space-5);
}

/* The body had no padding rule at all, so it fell back to Bootstrap's 16px
   while the header and footer used 20px at the sides. Text sat visibly
   closer to the edge than the title did.
   One value for all three now, and a wider one: 20px still read as text
   pressed against the edge of the sheet. */
.modal-body {
    padding: var(--ep-space-4) var(--ep-space-6);
}

/* The header and footer keep step with the body, or the title and the button
   sit on a different margin than the words between them. */
.modal-header,
.modal-footer {
    padding-left: var(--ep-space-6);
    padding-right: var(--ep-space-6);
}

/* Two actions at the foot of a sheet: the one you came for, and the way
   out. Defined once, here, so the next modal does not invent its own grey
   and its own radius. Bootstrap's btn-outline-secondary and a bare .btn
   were what the timer settings had, and neither belongs to this theme. */
.ep-modal-actions {
    display: flex;
    gap: 10px;
    border-top: 0;
}
.ep-modal-actions .ios-cta-primary {
    flex: 1;
    width: auto;
}
.ep-cancel,
body.theme-apple .ep-cancel {
    flex: 0 0 auto;
    border: none;
    border-radius: 14px;
    background: var(--ios-fg-4);
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: var(--ep-weight-semibold, 600);
    padding: 14px 22px;
    min-height: 50px;
}

/* A header immediately followed by a body doubles the gap under the title;
   the border between them already does that work. */
.modal-header + .modal-body {
    padding-top: var(--ep-space-4);
}

/* Nothing should touch the bottom edge either. */
.modal-body:last-child {
    padding-bottom: var(--ep-space-5);
}

.modal-title {
    font-weight: var(--ep-weight-semibold);
    letter-spacing: var(--ep-tracking-tight);
}

/* Smoother backdrop fade */
.modal-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-backdrop.show {
    opacity: 0.55;
}

/* iOS-style "sheet" slide-up animation on mobile */
@media (max-width: 767.98px) {
    .modal.fade .modal-dialog {
        transform: translateY(24px);
        transition: transform var(--ep-motion-slow) var(--ep-ease-spring);
    }

    .modal.show .modal-dialog {
        transform: translateY(0);
    }

    /* Drag-handle hint at top of modal (visual only — actual swipe-to-dismiss
       requires JS; this gives the iOS "I'm a sheet" affordance) */
    .modal-content::before {
        content: "";
        position: absolute;
        top: var(--ep-space-2);
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: var(--ep-radius-pill);
        background: rgba(255, 255, 255, 0.18);
        z-index: 10;
        pointer-events: none;
    }

    /* Opt-out for fullscreen / specialized modals */
    #fullscreenLeaderboardModal .modal-content::before,
    #fullscreenQRModal .modal-content::before,
    #fullscreenTimerModal .modal-content::before,
    .modal-content.no-handle::before {
        display: none;
    }

    /* Slightly more top padding when the handle is showing */
    .modal-content:not(.no-handle) > .modal-header {
        padding-top: calc(var(--ep-space-5) + var(--ep-space-2));
    }
}

/* ── Toasts / alerts ───────────────────────────────────────── */
.toast,
.alert {
    border-radius: var(--ep-radius-lg);
    border: 1px solid var(--ep-border-subtle);
    box-shadow: var(--ep-shadow-card);
    font-weight: var(--ep-weight-medium);
}

/* ── List rows (iOS grouped list look) ─────────────────────── */
.ep-list {
    background: var(--ep-bg-surface);
    border-radius: var(--ep-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ep-border-subtle);
}

.ep-list-row {
    display: flex;
    align-items: center;
    gap: var(--ep-space-3);
    padding: var(--ep-space-4) var(--ep-space-4);
    min-height: 52px;
    color: var(--ep-fg-default);
    text-decoration: none;
    transition: background var(--ep-motion-fast) var(--ep-ease-out);
}

.ep-list-row + .ep-list-row {
    border-top: 1px solid var(--ep-border-subtle);
}

.ep-list-row:active {
    background: var(--ep-border-subtle);
}

.ep-list-row .ep-list-chevron {
    margin-left: auto;
    color: var(--ep-fg-subtle);
    font-size: var(--ep-text-lg);
    line-height: 1;
}

/* ── Page transitions (subtle fade-in on content) ──────────── */
@media (prefers-reduced-motion: no-preference) {
    main,
    .page-content,
    [data-page] {
        animation: epPageEnter var(--ep-motion-base) var(--ep-ease-out) both;
    }
}

@keyframes epPageEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Skeleton loading shimmer ──────────────────────────────── */
.ep-skeleton {
    background: linear-gradient(
        90deg,
        var(--ep-border-subtle) 0%,
        var(--ep-border-default) 50%,
        var(--ep-border-subtle) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--ep-radius-md);
    animation: epShimmer 1.6s ease-in-out infinite;
}

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

/* ── Misc native gestures ──────────────────────────────────── */
/* Prevent double-tap zoom on interactive elements */
.btn,
.mobile-nav-item,
.ep-list-row,
[role="button"] {
    touch-action: manipulation;
}

/* Stop iOS from showing the long-press "copy" menu on images */
img:not([alt=""]) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}


/* Scroll fade */
/* Scroll fade animation CSS */
[data-fade-on-scroll] {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    will-change: opacity, transform;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    [data-fade-on-scroll] {
        transition: none;
        will-change: auto;
    }
}

/* Smooth performance optimization */
[data-fade-on-scroll] {
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
}

/* Modal / dropdown z-index */
/* Bootstrap 5 modal defaults - no overrides needed now that stacking context is fixed */

.modal-backdrop {
    z-index: 1050;
}

.modal {
    z-index: 1055;
}

/* Fullscreen modals - BELOW navbar but still very high (navbar is z-index 1030) */
.modal-fullscreen,
#fullscreenLeaderboardModal,
#fullscreenQRModal,
#fullscreenTimerModal {
    z-index: 999999;
    position: fixed;
}

.modal-fullscreen .modal-dialog,
#fullscreenLeaderboardModal .modal-dialog,
#fullscreenQRModal .modal-dialog,
#fullscreenTimerModal .modal-dialog {
    z-index: 1000000;
    position: relative;
}

.modal-fullscreen .modal-content,
#fullscreenLeaderboardModal .modal-content,
#fullscreenQRModal .modal-content,
#fullscreenTimerModal .modal-content {
    z-index: 1000001;
    position: relative;
    pointer-events: auto;
}

/* Fullscreen modal backdrops */
#fullscreenLeaderboardModal + .modal-backdrop,
#fullscreenQRModal + .modal-backdrop,
#fullscreenTimerModal + .modal-backdrop {
    z-index: 999998;
}


/* Ensure navbar and mobile navbar stay below modals */
.navbar,
.navbar-expand-xl,
.mobile-navbar {
    z-index: 1030;
}

/* Ensure dropdowns from navbar don't interfere */
.navbar .dropdown-menu {
    z-index: 1031;
}
/**
 * Dropdown Menu Z-Index Fix
 * Ensures dropdown menus appear above ALL three-dot toggle buttons and cards
 */

/* ALL cards should have low or no z-index to allow dropdown to appear above */
.competition-card,
.folder-card,
.folder-card .folder-card-inner {
    z-index: auto;
}

/* ALL dropdown toggle buttons should have low z-index */
.dropdown-toggle,
.btn-group .dropdown-toggle,
.competition-card .dropdown-toggle,
.folder-card .dropdown-toggle,
.btn.dropdown-toggle,
.btn-circle.dropdown-toggle {
    position: relative;
    z-index: 1;
}

/* Dropdown menus should have ultra-high z-index to appear above EVERYTHING including other cards */
.dropdown-menu {
    z-index: 99999;
    position: absolute;
}

/* Ensure dropdown menu appears above ALL card content and toggle buttons */
.card .dropdown-menu,
.competition-card .dropdown-menu,
.folder-card .dropdown-menu {
    z-index: 99999;
}

/* Make sure the dropdown menu shows above its parent and ALL other elements */
.dropdown-menu.show {
    z-index: 99999;
}

/* When a dropdown is open, raise the btn-group but keep it below the menu */
.btn-group {
    position: relative;
    z-index: auto;
}

.btn-group.show {
    z-index: 100000;
}

.btn-group.show .dropdown-menu {
    z-index: 100001;
}

/* Glass background for navbar user dropdown (logout menu) */
.navbar .dropdown-menu {
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}


/* Select2 — Apple light theme */
body.theme-apple .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator);
    padding: 8px 12px;
    border-radius: var(--ios-radius-sm);
}

body.theme-apple .select2-container--default .select2-dropdown {
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    border-radius: var(--ios-radius-md);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}

body.theme-apple .select2-container--default .select2-results__option {
    color: var(--ios-fg);
    padding: 10px 12px;
}

body.theme-apple .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
}

body.theme-apple .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--ios-tint-soft);
    color: var(--ios-tint);
}

body.theme-apple .select2-container--default .select2-selection--single {
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: var(--ios-radius-sm);
    min-height: 44px;
}

body.theme-apple .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ios-fg);
    line-height: 42px;
}

body.theme-apple .select2-container--open {
    z-index: var(--ep-z-modal);
}


/* Mobile tooltip disable */
/* Mobile tooltip disable - Hide tooltips on mobile devices */

/* Hide tooltips on touch devices and mobile screens */
@media (max-width: 768px), (hover: none) {
    .tooltip {
        display: none;
        visibility: hidden;
        opacity: 0;
    }
    
    /* Disable Bootstrap tooltip initialization on mobile */
    [data-bs-toggle="tooltip"] {
        pointer-events: auto;
    }
    
    /* Specifically target back button tooltips */
    .btn[data-bs-toggle="tooltip"],
    .btn-outline-secondary[data-bs-toggle="tooltip"],
    .btn-sm[data-bs-toggle="tooltip"] {
        position: relative;
    }
    
    .btn[data-bs-toggle="tooltip"]:before,
    .btn[data-bs-toggle="tooltip"]:after {
        display: none;
    }
}

/* Additional mobile detection for touch-based devices */
@media (pointer: coarse) {
    .tooltip {
        display: none;
    }
    
    .tooltip-inner {
        display: none;
    }
    
    .bs-tooltip-top,
    .bs-tooltip-bottom,
    .bs-tooltip-left,
    .bs-tooltip-right {
        display: none;
    }
}

/* Force disable tooltips on mobile navigation elements */
@media (max-width: 768px) {
    .mobile-navbar [data-bs-toggle="tooltip"],
    .btn-back[data-bs-toggle="tooltip"],
    .navbar [data-bs-toggle="tooltip"] {
        pointer-events: auto;
    }

    .mobile-navbar [data-bs-toggle="tooltip"]:hover:before,
    .mobile-navbar [data-bs-toggle="tooltip"]:hover:after,
    .btn-back[data-bs-toggle="tooltip"]:hover:before,
    .btn-back[data-bs-toggle="tooltip"]:hover:after {
        display: none;
    }
}

/* Portrait-only: prevent landscape viewport. Hide everything in landscape. */
@media (orientation: landscape) and (max-width: 1024px) {
    body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }
}