/*
 * ArcticCardBrokers — Custom Styles
 * /assets/css/acb.css
 *
 * Layered on top of Tabler UI. Uses Tabler CSS variables throughout.
 * Organised: Layout → Navbar → Sidebar → Typography → Components → Utilities
 */

/* ── Logo ─────────────────────────────────────────────────────────── */
.acb-logo {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--tblr-body-color);
    text-decoration: none;
    letter-spacing: -.01em;
}
.acb-logo strong { font-weight: 700; color: var(--tblr-primary); }
.acb-logo .ti    { color: var(--tblr-primary); }

.acb-logo-lg {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--tblr-body-color);
    letter-spacing: -.02em;
}
.acb-logo-lg strong { font-weight: 700; color: var(--tblr-primary); }
.acb-logo-lg .ti    { color: var(--tblr-primary); }

/* ── Top Navbar ───────────────────────────────────────────────────── */
.acb-navbar {
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
    /* On desktop, indent past the fixed sidebar so content isn't hidden */
    padding-left: calc(var(--tblr-navbar-vertical-width, 15rem) + 1rem);
}

/* On mobile the sidebar is collapsed — no indent needed */
@media (max-width: 991.98px) {
    .acb-navbar {
        padding-left: 1rem;
    }
}

.acb-search-form .form-control {
    min-width: 240px;
    border-radius: var(--tblr-border-radius) 0 0 var(--tblr-border-radius);
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.acb-sidebar {
    background: var(--tblr-bg-surface);
    border-right: 1px solid var(--tblr-border-color);
}

.acb-sidebar .navbar-nav > .nav-item > .nav-link {
    border-radius: var(--tblr-border-radius);
    margin: 1px 0;
    transition: background .12s, color .12s;
}

.acb-sidebar .navbar-nav > .nav-item > .nav-link.active {
    background: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    font-weight: 500;
}

.acb-sidebar .navbar-nav > .nav-item > .nav-link.active .ti {
    color: var(--tblr-primary);
}

/* Section divider labels */
.acb-sidebar .nav-link-header {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tblr-muted);
    padding: .75rem 1rem .25rem;
    display: block;
}

/* ── Card enhancements ────────────────────────────────────────────── */
.card-link {
    transition: box-shadow .15s, transform .1s;
    cursor: pointer;
}
.card-link:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

/* ── Market price badge ───────────────────────────────────────────── */
.badge .ti { vertical-align: -1px; }

/* ── Card image aspect ratio container ───────────────────────────── */
.card-img-wrapper {
    position: relative;
    padding-top: 140%;  /* Standard card aspect ratio ~2.5:3.5 */
    overflow: hidden;
    background: var(--tblr-bg-surface-secondary);
    border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
}
.card-img-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .5rem;
}

/* ── Auction countdown ────────────────────────────────────────────── */
.countdown-urgent {
    color: var(--tblr-danger);
    font-weight: 700;
    animation: pulse-danger 1s infinite;
}
@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50%       { opacity: .6; }
}

/* ── Raffle ticket progress bar ───────────────────────────────────── */
.progress.progress-sm { height: 4px; border-radius: 2px; }

/* ── Vending machine card ─────────────────────────────────────────── */
.vending-card {
    border: 2px dashed var(--tblr-border-color);
    transition: border-color .15s;
}
.vending-card:hover { border-color: var(--tblr-primary); }

/* ── Pack reveal animation (used in packs.php) ────────────────────── */
.pack-card {
    perspective: 800px;
    cursor: pointer;
}
.pack-card-inner {
    position: relative;
    width: 100%;
    padding-top: 140%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.pack-card.revealed .pack-card-inner {
    transform: rotateY(180deg);
}
.pack-card-front,
.pack-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--tblr-border-radius-lg);
    overflow: hidden;
}
.pack-card-front {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pack-card-back {
    transform: rotateY(180deg);
    background: var(--tblr-bg-surface);
}

/* Foil shimmer effect on rare cards */
.card-foil {
    position: relative;
    overflow: hidden;
}
.card-foil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,.25) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: foil-shimmer 2.5s linear infinite;
}
@keyframes foil-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Notification dropdown ────────────────────────────────────────── */
.badge-notification {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    font-size: .65rem;
    line-height: 16px;
    padding: 0 4px;
    border-radius: 8px;
}

/* ── Table enhancements ───────────────────────────────────────────── */
.table-vcenter td, .table-vcenter th {
    vertical-align: middle;
}

/* ── Page-level empty state ───────────────────────────────────────── */
.empty-page {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--tblr-muted);
    gap: 1rem;
}
.empty-page .ti { font-size: 3rem; opacity: .3; }

/* ── Utility ──────────────────────────────────────────────────────── */
.tracking-widest { letter-spacing: .2em; }
.min-w-0         { min-width: 0; }
.object-fit-contain { object-fit: contain; }
.cursor-pointer  { cursor: pointer; }
.border-primary  { border: 1px solid var(--tblr-primary) !important; }

/* ─────────────────────────────────────────────────────────────────── */
/* Mobile responsiveness fixes                                        */
/* ─────────────────────────────────────────────────────────────────── */

/* ── Prevent horizontal overflow on whole page ───────────────────── */
body { overflow-x: hidden; }

/* ── Touch-friendly tap targets (min 44px) ───────────────────────── */
@media (max-width: 767.98px) {

    /* Buttons get more padding on touch */
    .btn { min-height: 38px; }
    .btn-xs { min-height: 28px; }

    /* Nav tabs scroll horizontally rather than wrap */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item { flex-shrink: 0; }

    /* Cards table: always responsive wrapper implied */
    .card-table { font-size: .8rem; }
    .card-table th, .card-table td { padding: .4rem .5rem; }

    /* Hide less-important columns in order/sale tables on mobile */
    .d-mobile-none { display: none !important; }

    /* Input groups full-width on mobile */
    .input-group-lg .form-control { font-size: 1rem; }

    /* Modal: full-screen on small phones */
    .modal-dialog:not(.modal-sm):not(.modal-fullscreen) {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }

    /* Tier buttons in vending: truncate long labels */
    .tier-btn-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
        display: inline-block;
    }

    /* Auction proxy input: stack vertically */
    .proxy-bid-row { flex-direction: column; }
    .proxy-bid-row .input-group { width: 100% !important; }

    /* Listing page: related cards horizontal scroll */
    .related-cards-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: .5rem;
    }
    .related-cards-scroll .col { flex: 0 0 140px; min-width: 140px; }

    /* Packs reveal: card strip scrollable */
    #reveal-card-strip {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .5rem;
    }

    /* Vending slot drums: scale down slightly */
    .slot-stage { padding: .5rem; gap: 5px; }
    .slot-drum  { width: 60px; height: 80px; }

    /* Browse: tighter card grid on mobile */
    .card-grid-item { padding: .25rem; }
}

/* ── Small phone (< 375px) ───────────────────────────────────────── */
@media (max-width: 374px) {
    .slot-drum { width: 52px; height: 70px; }
    .slot-symbol { font-size: 1.6rem; }

    /* Hide badge counts in tight spaces */
    .badge-notification { font-size: .6rem; }

    /* Vending cabinet lights: fewer on tiny screens */
    .cabinet-lights .clight:nth-child(n+8) { display: none; }
}

/* ── Tablet (768–991px): tweaks ──────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Auction bid form: keep side-by-side */
    .auction-bid-row .col-sm-7 { flex: 0 0 60%; max-width: 60%; }
    .auction-bid-row .col-sm-5 { flex: 0 0 40%; max-width: 40%; }
}

/* ── Sticky bottom CTA on listing pages ─────────────────────────── */
@media (max-width: 991.98px) {
    /* Move bid/buy button to sticky footer on listing + auction pages */
    .sticky-mobile-cta {
        position: sticky;
        bottom: 0;
        z-index: 100;
        background: var(--tblr-bg-surface);
        border-top: 1px solid var(--tblr-border-color);
        padding: .75rem 1rem;
        margin: 0 -1rem -1rem;
    }
}

/* ── Seller dashboard: KPI cards ─────────────────────────────────── */
@media (max-width: 575.98px) {
    /* Stack to 2-col grid on XS instead of 6-col */
    .kpi-row .col-6.col-md-4.col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ── Vending prize reveal: image max height on small screens ──────── */
@media (max-height: 700px) {
    #reveal-img { max-height: 140px !important; }
    .prize-box  { padding: 1rem !important; }
}

/* ── Camera modal: full width on mobile ─────────────────────────── */
@media (max-width: 450px) {
    #cardCameraModal .modal-dialog { max-width: 100%; margin: .25rem; }
}

/* ── Admin sidebar: badge clearance fix ─────────────────────────────── */
.navbar-vertical .nav-link .badge {
    margin-right: 1rem;
}