/* ================================================
   CHECKPOINT: CIDERCADE ARCADE EDITION 🕹️
   Funky arcade bar aesthetic inspired by Austin's best
================================================ */

/* -------------------------------------------
   FONTS: ARCADE ENERGY
------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Bungee&display=swap');

/* Rubik for body (modern, rounded, playful)
   Bungee for display (bold arcade vibes) */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ------------------------------------------------
   STICKY FOOTER FOUNDATION (NO OVERLAP)
   Requires:
   - <body class="cp-body">
   - <main class="cp-main"> wrapping the page container
   - <footer class="cp-footer"> on footer
------------------------------------------------- */
html, body {
    height: 100%;
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
}

body {
    /* REMOVED old hack: margin-bottom: 60px; */
    color: var(--cp-text);
    background: var(--cp-bg);
    position: relative;
}

    body.cp-body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

.cp-main {
    flex: 1 0 auto; /* pushes footer down on short pages */
}

    /* Global breathing room so bottom CTAs/FAB never feel covered */
    .cp-main .container {
        padding-bottom: 100px; /* clears FAB + footer spacing */
    }

.cp-footer {
    flex-shrink: 0;
}

/* Subtle scanline effect overlay for that arcade CRT vibe */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.03) 0px, transparent 1px, transparent 2px, rgba(0, 0, 0, 0.03) 3px );
    z-index: 9999;
    animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4px);
    }
}

/* -------------------------------------------
   ARCADE COLOR PALETTE 🎮
------------------------------------------- */

:root {
    /* Dark arcade background */
    --cp-bg: #0a0e27;
    --cp-bg-2: #141936;
    --cp-bg-3: #1a2142;
    /* Neon text colors */
    --cp-text: #e8f0ff;
    --cp-text-2: #b8c9e8;
    --cp-text-3: #8097c1;
    /* Arcade neon accent colors */
    --cp-neon-pink: #ff006e;
    --cp-neon-blue: #00d9ff;
    --cp-neon-purple: #a855f7;
    --cp-neon-green: #00ff88;
    --cp-neon-orange: #ff8800;
    --cp-neon-yellow: #ffea00;
    /* Primary brand color (neon blue) */
    --cp-brand: var(--cp-neon-blue);
    --cp-brand-glow: rgba(0, 217, 255, 0.4);
    /* Borders with glow */
    --cp-border: rgba(0, 217, 255, 0.2);
    --cp-border-2: rgba(0, 217, 255, 0.1);
    /* Accent backgrounds */
    --cp-accent: rgba(0, 217, 255, 0.08);
    --cp-accent-border: rgba(0, 217, 255, 0.35);
}

/* Arcade geometric background pattern */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 0, 110, 0.06) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(0, 217, 255, 0.05) 0%, transparent 50%);
    z-index: -1;
}

/* Keep content above the decorative body::after.
   NOTE: do NOT add z-index here – position + z-index creates a
   stacking context that traps Bootstrap modals (they live inside
   .container via @RenderBody but Bootstrap appends the backdrop
   to <body>, outside the context).  z-index: -1 on body::after
   is sufficient; position: relative alone does not create a context. */
header, .container, footer {
    position: relative;
}

h1, h2, h3, h4, h5 {
    color: var(--cp-text);
    font-family: 'Bungee', cursive;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

h1 {
    text-shadow: 0 0 10px var(--cp-brand-glow), 0 0 20px var(--cp-brand-glow), 0 2px 4px rgba(0, 0, 0, 0.5);
}

h2 {
    text-shadow: 0 0 8px var(--cp-brand-glow), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.text-muted {
    color: var(--cp-text-3) !important;
}

/* -------------------------------------------
   NOTIFICATIONS PAGE BUTTONS
------------------------------------------- */
.cp-btn-soft {
    border: 2px solid var(--cp-accent-border);
    background: var(--cp-accent);
    color: var(--cp-text);
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 180ms ease;
}

    .cp-btn-soft:hover {
        background: rgba(0, 217, 255, 0.15);
        border-color: var(--cp-brand);
        box-shadow: 0 0 15px var(--cp-brand-glow);
        transform: translateY(-2px);
        color: var(--cp-text);
    }

    .cp-btn-soft:active {
        transform: translateY(0);
    }

.cp-btn-soft-danger {
    border: 2px solid rgba(255, 0, 110, 0.35);
    background: rgba(255, 0, 110, 0.08);
    color: var(--cp-text);
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .cp-btn-soft-danger:hover {
        background: rgba(255, 0, 110, 0.15);
        border-color: var(--cp-neon-pink);
        box-shadow: 0 0 15px rgba(255, 0, 110, 0.4);
        transform: translateY(-2px);
        color: var(--cp-text);
    }

    .cp-btn-soft-danger:active {
        transform: translateY(0);
    }

/* -------------------------------------------
   VIDEO ATTACHMENTS
------------------------------------------- */
.cp-attach-video {
    display: block;
    width: 180px;
    max-width: 100%;
    border-radius: 10px;
    border: 2px solid var(--cp-border);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
}

/* -------------------------------------------
   FOCUS STATES (neon glow)
------------------------------------------- */

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* -------------------------------------------
   FORM CONTROLS (arcade style)
------------------------------------------- */
.form-control,
.form-select {
    background: var(--cp-bg-2);
    border: 2px solid var(--cp-border);
    color: var(--cp-text);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-weight: 500;
    transition: all 180ms ease;
}

    .form-control:focus,
    .form-select:focus {
        background: var(--cp-bg-3);
        border-color: var(--cp-brand);
        color: var(--cp-text);
        box-shadow: 0 0 15px var(--cp-brand-glow);
    }

    .form-control::placeholder {
        color: var(--cp-text-3);
    }

/* -------------------------------------------
   USERS PAGE: MOBILE STACKING
------------------------------------------- */
.cp-user-actions .btn {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .cp-user-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cp-user-actions {
        min-width: 0 !important;
        width: 100%;
        margin-top: .75rem;
    }

    .cp-user-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

        .cp-user-actions .btn,
        .cp-user-actions button {
            width: 100%;
        }

    .cp-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }
}

@media (max-width: 575.98px) {
    .cp-user-actions {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------
   TOASTS (arcade notification style)
------------------------------------------- */
.cp-toast {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 2000;
    min-width: 280px;
    max-width: min(720px, calc(100vw - 28px));
    border-radius: 12px;
    border: 2px solid var(--cp-brand);
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px var(--cp-brand-glow), 0 20px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

    .cp-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        animation: toastPulse 1.5s ease-in-out infinite;
    }

@keyframes toastPulse {
    0%, 100% {
        box-shadow: 0 0 20px var(--cp-brand-glow), 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    50% {
        box-shadow: 0 0 30px var(--cp-brand-glow), 0 20px 40px rgba(0, 0, 0, 0.5);
    }
}

.cp-toast-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.2rem;
    text-align: center;
}

.cp-toast-text {
    color: var(--cp-text);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Toast type variations */
.cp-toast-success {
    border-color: var(--cp-neon-green);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.cp-toast-info {
    border-color: var(--cp-brand);
}

.cp-toast-warning {
    border-color: var(--cp-neon-yellow);
    box-shadow: 0 0 30px rgba(255, 234, 0, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.cp-toast-error {
    border-color: var(--cp-neon-pink);
    box-shadow: 0 0 30px rgba(255, 0, 110, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 576px) {
    .cp-toast {
        top: 10px;
        border-radius: 10px;
    }

    .cp-toast-inner {
        padding: .85rem 1rem;
    }
}

/* Deactivated users */
.cp-user-deactivated {
    opacity: 0.5;
    filter: grayscale(0.6);
}

    /* Deactivated users: keep the row “greyed out” BUT still allow Activate */
    .cp-user-deactivated .btn:not(.btn-activate) {
        pointer-events: none;
    }

/* -------------------------------------------
   ARCADE CABINET BUTTONS 🎮
------------------------------------------- */

.btn {
    border-radius: 8px;
    font-weight: 700;
    padding: .65rem 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 150ms ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

    /* Arcade button glow effect on hover */
    .btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        transform: translate(-50%, -50%);
        transition: width 0.3s ease, height 0.3s ease;
    }

    .btn:hover::before {
        width: 300px;
        height: 300px;
    }

/* Primary button - neon blue arcade style */
.btn-primary {
    background: linear-gradient(135deg, var(--cp-brand) 0%, #0099cc 100%);
    border-color: var(--cp-brand);
    color: #000;
    font-weight: 900;
    box-shadow: 0 0 15px var(--cp-brand-glow), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

    .btn-primary:hover {
        background: linear-gradient(135deg, #00ffff 0%, var(--cp-brand) 100%);
        border-color: #00ffff;
        transform: translateY(-2px);
        box-shadow: 0 0 25px var(--cp-brand-glow), 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        color: #000;
    }

    .btn-primary:active {
        transform: translateY(0);
    }

/* Secondary / outline buttons */
.btn-outline-secondary {
    color: var(--cp-text);
    border-color: var(--cp-border);
    background: var(--cp-bg-2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

    .btn-outline-secondary:hover {
        background: var(--cp-bg-3);
        border-color: var(--cp-brand);
        box-shadow: 0 0 15px var(--cp-brand-glow), 0 6px 12px rgba(0, 0, 0, 0.4);
        color: var(--cp-text);
        transform: translateY(-2px);
    }

/* Danger buttons - neon pink */
.btn-outline-danger,
.btn-danger {
    border-color: var(--cp-neon-pink);
    background: linear-gradient(135deg, var(--cp-neon-pink) 0%, #cc0055 100%);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
}

    .btn-outline-danger:hover,
    .btn-danger:hover {
        background: linear-gradient(135deg, #ff3388 0%, var(--cp-neon-pink) 100%);
        border-color: #ff3388;
        transform: translateY(-2px);
        box-shadow: 0 0 25px rgba(255, 0, 110, 0.6), 0 6px 16px rgba(0, 0, 0, 0.5);
        color: #fff;
    }

/* Warning buttons - neon yellow */
.btn-outline-warning,
.btn-warning {
    border-color: var(--cp-neon-yellow);
    background: linear-gradient(135deg, var(--cp-neon-yellow) 0%, #ccbb00 100%);
    color: #000;
    font-weight: 900;
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
}

    .btn-outline-warning:hover,
    .btn-warning:hover {
        background: linear-gradient(135deg, #ffff33 0%, var(--cp-neon-yellow) 100%);
        transform: translateY(-2px);
        box-shadow: 0 0 25px rgba(255, 234, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.5);
        color: #000;
    }

/* Small buttons */
.btn-sm {
    padding: .45rem .8rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* -------------------------------------------
   CHECKPOINT SURFACES / LAYOUT
------------------------------------------- */

.cp-surface {
    background: transparent;
    padding: 1rem 0;
    min-height: calc(100vh - 120px);
}

.cp-page {
    padding-bottom: 96px;
}

/* -------------------------------------------
   INSTALL BANNER
------------------------------------------- */
.cp-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3000;
}

.cp-install-inner {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    border: 2px solid var(--cp-brand);
    color: var(--cp-text);
    padding: 14px 16px;
    box-shadow: 0 0 30px var(--cp-brand-glow), 0 20px 60px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.cp-install-title {
    font-weight: 900;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px var(--cp-brand-glow);
}

.cp-install-text {
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--cp-text-2);
}

.cp-install-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.cp-install-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--cp-accent);
    border: 1px solid var(--cp-accent-border);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cp-brand);
}

@media (max-width: 768px) {
    .cp-install-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cp-install-actions {
        width: 100%;
        justify-content: stretch;
    }

        .cp-install-actions .btn {
            flex: 1;
        }
}

/* -------------------------------------------
   CARDS & SURFACES
------------------------------------------- */

.card {
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    border: 2px solid var(--cp-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: all 200ms ease;
}

    .card:hover {
        border-color: var(--cp-brand);
        box-shadow: 0 0 20px var(--cp-brand-glow), 0 12px 32px rgba(0, 0, 0, 0.5);
        transform: translateY(-2px);
    }

.card-header {
    background: rgba(0, 217, 255, 0.05);
    border-bottom: 2px solid var(--cp-border);
    color: var(--cp-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-body {
    color: var(--cp-text-2);
}

/* -------------------------------------------
   TICKETS & LISTS
------------------------------------------- */

.cp-ticket,
.list-group-item {
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    border: 2px solid var(--cp-border);
    color: var(--cp-text);
    transition: all 180ms ease;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    padding: 1rem;
}

    .cp-ticket:hover,
    .list-group-item:hover {
        border-color: var(--cp-brand);
        box-shadow: 0 0 15px var(--cp-brand-glow), 0 8px 20px rgba(0, 0, 0, 0.4);
        transform: translateX(4px);
    }

/* -------------------------------------------
   NAVBAR: ARCADE CABINET STYLE 🕹️
------------------------------------------- */

header {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 217, 255, 0.15);
}

.navbar {
    background: linear-gradient(180deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%) !important;
    border-bottom: 3px solid var(--cp-brand) !important;
    padding: 0.75rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px var(--cp-brand-glow) !important;
}

/* Brand logo - arcade neon sign style */
.cp-brand {
    font-family: 'Bungee', cursive !important;
    font-size: 24px !important; /* Fixed pixel size - never changes */
    font-weight: 900 !important;
    color: var(--cp-brand) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 10px var(--cp-brand-glow), 0 0 20px var(--cp-brand-glow), 0 0 30px var(--cp-brand-glow), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 200ms ease !important;
}

    .cp-brand:hover {
        color: #00ffff !important;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.6), 0 0 45px rgba(0, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
        transform: scale(1.05);
    }

    .cp-brand img {
        display: block;
        filter: drop-shadow(0 0 10px var(--cp-brand-glow)) drop-shadow(0 0 20px var(--cp-brand-glow)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
        transition: all 200ms ease;
    }

    .cp-brand:hover img {
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 30px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 45px rgba(0, 255, 255, 0.6)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    }

/* --------------------------------------------
   Responsive CheckPoint text sizing
-------------------------------------------- */

/* Desktop default */
.cp-brand {
    font-family: 'Bungee', cursive !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: var(--cp-brand) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 10px var(--cp-brand-glow), 0 0 20px var(--cp-brand-glow), 0 0 30px var(--cp-brand-glow), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 200ms ease !important;
}

/* Mobile: slightly smaller, tighter */
@media (max-width: 576px) {
    .cp-brand {
        font-size: 18px !important;
        letter-spacing: 0.5px !important;
    }
}




/* Nav links - arcade button style */
.navbar .nav-link {
    color: var(--cp-text-2) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    transition: all 150ms ease !important;
    font-size: 0.9rem !important;
    position: relative;
}

    .navbar .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--cp-brand);
        box-shadow: 0 0 10px var(--cp-brand-glow);
        transition: all 200ms ease;
        transform: translateX(-50%);
    }

    .navbar .nav-link:hover {
        color: var(--cp-brand) !important;
        background: rgba(0, 217, 255, 0.08) !important;
    }

        .navbar .nav-link:hover::after {
            width: 80%;
        }

    .navbar .nav-link.active {
        color: var(--cp-brand) !important;
        background: rgba(0, 217, 255, 0.12) !important;
        box-shadow: inset 0 0 10px rgba(0, 217, 255, 0.2);
    }

/* Dropdown items */
.navbar .dropdown-item {
    color: var(--cp-text) !important;
    background: transparent;
    font-weight: 600;
    transition: all 150ms ease;
    position: relative;
    pointer-events: auto;
}

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus {
        background: var(--cp-accent) !important;
        color: var(--cp-brand) !important;
        box-shadow: inset 0 0 10px rgba(0, 217, 255, 0.15);
    }

.dropdown-menu {
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    border: 2px solid var(--cp-brand);
    border-radius: 10px;
    box-shadow: 0 0 20px var(--cp-brand-glow), 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 0.5rem;
}

.dropdown-header {
    color: var(--cp-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.dropdown-divider {
    border-color: var(--cp-border);
}

/* Left nav spacing */
.navbar .navbar-nav > .nav-item {
    margin-right: .35rem;
}

/* User avatar - arcade coin style */
.cp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #000;
    background: linear-gradient(135deg, var(--cp-neon-yellow) 0%, var(--cp-neon-orange) 100%);
    border: 3px solid var(--cp-neon-orange);
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 200ms ease;
}

@media (max-width: 576px) {
    .cp-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.78rem;
    }
}

.cp-avatar.dropdown-toggle::after {
    display: none !important;
}

.cp-avatar:hover {
    background: linear-gradient(135deg, #ffff33 0%, var(--cp-neon-yellow) 100%);
    border-color: #ffff33;
    box-shadow: 0 0 25px rgba(255, 255, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: scale(1.1) rotate(180deg);
    color: #000;
    text-decoration: none;
}

.cp-avatar:focus-visible {
    outline: 3px solid rgba(255, 234, 0, 0.6);
    outline-offset: 3px;
}

/* Right actions spacing */
.cp-nav-actions {
    gap: 1.5rem;
    padding-left: .75rem;
}

.cp-nav-toggle {
    margin-left: .15rem;
    border: 3px solid var(--cp-brand) !important; /* Match thicker border */
    box-shadow: 0 0 20px var(--cp-brand-glow), 0 0 10px var(--cp-brand-glow) !important; /* Stronger glow */
    background: rgba(0, 217, 255, 0.15) !important; /* Brighter background */
}

    .cp-nav-toggle:hover {
        background: rgba(0, 217, 255, 0.25) !important;
        border-color: #00ffff !important;
        box-shadow: 0 0 30px var(--cp-brand-glow), 0 0 15px var(--cp-brand-glow) !important;
    }

.cp-nav-right {
    gap: 1.1rem;
}

    .cp-nav-right > * {
        flex-shrink: 0;
    }

/* Icons */
.cp-icon {
    display: inline-block;
    vertical-align: -0.125em;
    fill: currentColor;
    color: var(--cp-text-2);
    transition: all 180ms ease;
}



/* Impersonation banner */
.cp-impersonating {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border: 2px solid var(--cp-neon-yellow);
    border-radius: 10px;
    background: rgba(255, 234, 0, 0.08);
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.3);
}

/* Add ticket button - arcade style */
.cp-nav-add {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    color: #000;
    background: linear-gradient(135deg, var(--cp-neon-green) 0%, #00cc66 100%);
    border: 3px solid var(--cp-neon-green);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 200ms ease;
}

    .cp-nav-add:hover {
        background: linear-gradient(135deg, #33ff99 0%, var(--cp-neon-green) 100%);
        border-color: #33ff99;
        box-shadow: 0 0 25px rgba(0, 255, 136, 0.7), 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transform: scale(1.15) rotate(90deg);
        color: #000000;
        text-decoration: none;
    }

    .cp-nav-add:focus-visible {
        outline: 3px solid rgba(0, 255, 136, 0.6);
        outline-offset: 3px;
    }

/* -------------------------------------------
   MENTIONS BADGE (arcade alert style)
------------------------------------------- */

.cp-mentions-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 50%;
    font-size: 0.65rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--cp-neon-pink) 0%, #cc0055 100%) !important;
    border: 2px solid var(--cp-neon-pink);
    color: #ffffff !important;
    font-weight: 900;
    vertical-align: middle;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
    /* Position adjustments: down 25px, left 25px */
    margin-top: -2px !important;
    margin-left: -1px !important;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 0, 110, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 25px rgba(255, 0, 110, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

.cp-mentions-badge:hover {
    filter: brightness(1.2);
}

/* Soft readable badge */
.cp-badge-ok {
    background: rgba(0, 217, 255, 0.15) !important;
    color: var(--cp-brand) !important;
    border: 2px solid var(--cp-brand);
    font-weight: 700;
    box-shadow: 0 0 10px var(--cp-brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.text-bg-light.border {
    color: var(--cp-text) !important;
    background: var(--cp-bg-2) !important;
    border-color: var(--cp-border) !important;
}

/* -------------------------------------------
   MENTIONS ICON — SHOUTING FACE STYLE 😱
------------------------------------------- */

.navbar .cp-mentions-link,
.cp-mentions-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 !important; /* Remove padding for even spacing */
    border-radius: 999px;
    transition: all 180ms ease;
}

/* The emoji/icon itself */
.cp-mentions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Match avatar and nav-add size */
    height: 36px; /* Match avatar and nav-add size */
    border-radius: 50%;
    font-size: 2.2rem;
    line-height: 1;
    transition: transform 320ms cubic-bezier(.4,1.4,.4,1), filter 200ms ease;
    transform-origin: center;
}

/* Hover: flip upside-down */
.cp-mentions-link:hover .cp-mentions-icon {
    transform: rotate(180deg);
}

/* Remove the default nav-link neon blue background and underline on hover */
.navbar .cp-mentions-link:hover,
.cp-mentions-link:hover {
    background: transparent !important;
    color: inherit !important; /* Keep original color, don't turn neon blue */
}

.navbar .cp-mentions-link::after,
.cp-mentions-link::after {
    display: none !important;
}





/* -------------------------------------------
   ATTACHMENT THUMBNAILS
------------------------------------------- */

.cp-thumbs img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--cp-border);
    background: var(--cp-bg-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 180ms ease;
}

    .cp-thumbs img:hover {
        border-color: var(--cp-brand);
        box-shadow: 0 0 15px var(--cp-brand-glow), 0 6px 16px rgba(0, 0, 0, 0.5);
        transform: scale(1.05);
    }

/* -------------------------------------------
   LOGIN PAGE
------------------------------------------- */

.cp-login-wrap {
    padding-top: clamp(2rem, 7vh, 4.5rem);
}

.cp-login-logo {
    font-family: 'Bungee', cursive;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--cp-brand);
    text-transform: uppercase;
    text-shadow: 0 0 20px var(--cp-brand-glow), 0 0 40px var(--cp-brand-glow), 0 4px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 2rem;
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% {
        text-shadow: 0 0 20px var(--cp-brand-glow), 0 0 40px var(--cp-brand-glow), 0 4px 8px rgba(0, 0, 0, 0.6);
    }

    50% {
        text-shadow: 0 0 30px var(--cp-brand-glow), 0 0 60px var(--cp-brand-glow), 0 4px 8px rgba(0, 0, 0, 0.6);
    }
}

.cp-forgot-link {
    color: var(--cp-text-3);
    font-weight: 600;
}

    .cp-forgot-link:hover {
        color: var(--cp-brand);
        text-decoration: underline;
        text-shadow: 0 0 8px var(--cp-brand-glow);
    }

/* -------------------------------------------
   FLOATING ACTION BUTTON (arcade coin)
------------------------------------------- */

.cp-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--cp-neon-green) 0%, #00cc66 100%);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.6), 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    border: 4px solid var(--cp-neon-green);
    z-index: 1030;
    transition: all 200ms ease;
    animation: fabFloat 3s ease-in-out infinite;
}

@keyframes fabFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(180deg);
    }
}

.cp-fab:hover {
    background: linear-gradient(135deg, #33ff99 0%, var(--cp-neon-green) 100%);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.8), 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.4);
    transform: scale(1.15) translateY(-4px) !important;
    border:none;
    animation: none;
}

.cp-fab:active {
    transform: scale(1.05) translateY(0) !important;
}

/* -------------------------------------------
   ROLE PILLS (arcade badge style)
------------------------------------------- */

.cp-role-admin {
    background: linear-gradient(135deg, var(--cp-neon-pink) 0%, #990044 100%);
    color: #fff;
    border: 2px solid var(--cp-neon-pink);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.5);
}

.cp-role-gm {
    background: linear-gradient(135deg, var(--cp-brand) 0%, #007799 100%);
    color: #000;
    border: 2px solid var(--cp-brand);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 0 15px var(--cp-brand-glow);
}

.cp-role-default {
    background: var(--cp-bg-2);
    color: var(--cp-text-2);
    border: 2px solid var(--cp-border);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

/* -------------------------------------------
   FOOTER
------------------------------------------- */

footer {
    background: linear-gradient(180deg, transparent 0%, var(--cp-bg-2) 100%);
    border-top: 2px solid var(--cp-border);
    padding: 1.5rem 0;
    color: var(--cp-text-3);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* REMOVED old min-height hack that caused overlap:
main[role="main"] {
    min-height: calc(100vh - 180px);
    padding-bottom: 100px;
}
*/

/* -------------------------------------------
   MOBILE TWEAKS
------------------------------------------- */

@media (max-width: 576px) {
    .cp-group {
        padding: 8px;
    }

    .cp-ticket {
        margin: 8px 0;
        border-radius: 10px;
    }

    .cp-thumbs img {
        width: 68px;
        height: 68px;
    }

    .cp-fab {
        display: none !important;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 1050;
    }

    /* Ensure hamburger is visible and properly spaced */
    .cp-nav-actions {
        gap: 0.75rem;
        flex-wrap: nowrap;
    }

    .cp-nav-toggle {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

    /* Make nav icons smaller on mobile to fit better */
    .cp-mentions-icon {
        width: 30px;
        height: 30px;
        font-size: 2rem;
    }

    .cp-nav-add {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    /* Make mobile menu items larger - we have the full horizontal screen */
    .navbar-collapse .nav-link {
        font-size: 1.1rem !important;
        padding: 0.75rem 1.25rem !important;
    }

    /* Make mobile dropdown items larger too */
    .navbar-collapse .dropdown-item {
        font-size: 1.05rem !important;
        padding: 0.7rem 1.25rem !important;
    }
}

    .navbar {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 40px var(--cp-brand-glow);
    }

    .cp-login-logo {
        font-size: 2rem;
    }
}

/* -------------------------------------------
   BUTTON ACTIVE/FOCUS (arcade glow)
------------------------------------------- */
.btn:focus,
.btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 .25rem rgba(0, 217, 255, 0.5), 0 0 20px var(--cp-brand-glow) !important;
}

.btn:active,
.btn.active {
    box-shadow: 0 0 0 .25rem rgba(0, 217, 255, 0.3), 0 0 15px var(--cp-brand-glow) !important;
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background-color: rgba(0, 217, 255, 0.15) !important;
    border-color: var(--cp-brand) !important;
    color: var(--cp-text) !important;
}

.btn-outline-warning:active,
.btn-outline-warning.active {
    background-color: rgba(255, 234, 0, 0.15) !important;
    border-color: var(--cp-neon-yellow) !important;
    color: #000 !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(0, 217, 255, 0.5), 0 0 20px var(--cp-brand-glow) !important;
}

/* -------------------------------------------
   TABLE STYLING (arcade grid)
------------------------------------------- */

.table {
    color: var(--cp-text);
    border-color: var(--cp-border);
}

    .table thead th {
        background: rgba(0, 217, 255, 0.08);
        border-color: var(--cp-brand);
        color: var(--cp-brand);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.85rem;
    }

    .table tbody tr {
        border-color: var(--cp-border);
        transition: all 150ms ease;
    }

        .table tbody tr:hover {
            background: rgba(0, 217, 255, 0.05);
            box-shadow: inset 0 0 15px rgba(0, 217, 255, 0.1);
        }

    .table td {
        border-color: var(--cp-border);
    }

/* -------------------------------------------
   ALERTS (arcade notification boxes)
------------------------------------------- */

.alert {
    border-radius: 10px;
    border-width: 2px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.alert-success {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--cp-neon-green);
    color: var(--cp-neon-green);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.alert-danger {
    background: rgba(255, 0, 110, 0.1);
    border-color: var(--cp-neon-pink);
    color: var(--cp-neon-pink);
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.3), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.alert-warning {
    background: rgba(255, 234, 0, 0.1);
    border-color: var(--cp-neon-yellow);
    color: var(--cp-neon-yellow);
    box-shadow: 0 0 15px rgba(255, 234, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.alert-info {
    background: rgba(0, 217, 255, 0.1);
    border-color: var(--cp-brand);
    color: var(--cp-brand);
    box-shadow: 0 0 15px var(--cp-brand-glow), 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------
   PAGINATION (arcade controls)
------------------------------------------- */

.pagination {
    gap: 0.5rem;
}

.page-link {
    background: var(--cp-bg-2);
    border: 2px solid var(--cp-border);
    color: var(--cp-text);
    font-weight: 700;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: all 150ms ease;
}

    .page-link:hover {
        background: var(--cp-bg-3);
        border-color: var(--cp-brand);
        color: var(--cp-brand);
        box-shadow: 0 0 10px var(--cp-brand-glow);
    }

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--cp-brand) 0%, #0099cc 100%);
    border-color: var(--cp-brand);
    color: #000;
    font-weight: 900;
    box-shadow: 0 0 15px var(--cp-brand-glow);
}

/* -------------------------------------------
   MODAL (arcade overlay)
------------------------------------------- */

.modal-content {
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    border: 3px solid var(--cp-brand);
    border-radius: 16px;
    box-shadow: 0 0 40px var(--cp-brand-glow), 0 20px 60px rgba(0, 0, 0, 0.8);
    color: var(--cp-text);
}

.modal-header {
    border-bottom: 2px solid var(--cp-border);
    background: rgba(0, 217, 255, 0.05);
}

.modal-title {
    font-family: 'Bungee', cursive;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cp-brand);
    text-shadow: 0 0 10px var(--cp-brand-glow);
}

.modal-footer {
    border-top: 2px solid var(--cp-border);
    background: rgba(0, 217, 255, 0.03);
}

.modal-backdrop {
    background-color: #000;
}

    .modal-backdrop.show {
        opacity: 0.85;
    }

/* -------------------------------------------
   BREADCRUMB (arcade trail)
------------------------------------------- */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-item {
    color: var(--cp-text-3);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

    .breadcrumb-item a {
        color: var(--cp-text-2);
        text-decoration: none;
        transition: all 150ms ease;
    }

        .breadcrumb-item a:hover {
            color: var(--cp-brand);
            text-shadow: 0 0 8px var(--cp-brand-glow);
        }

    .breadcrumb-item.active {
        color: var(--cp-brand);
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        color: var(--cp-border);
        font-weight: 700;
    }

/* -------------------------------------------
   ARCADE EXTRAS: Glow on hover for links
------------------------------------------- */

a {
    color: var(--cp-brand);
    text-decoration: none;
    transition: all 150ms ease;
}

    a:hover {
        color: #00ffff;
        text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    }

/* -------------------------------------------
   PROGRESS BAR (arcade energy bar)
------------------------------------------- */

.progress {
    background: var(--cp-bg-2);
    border: 2px solid var(--cp-border);
    border-radius: 999px;
    height: 24px;
    overflow: visible;
}

.progress-bar {
    background: linear-gradient(90deg, var(--cp-neon-green) 0%, var(--cp-neon-blue) 100%);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    position: relative;
    overflow: visible;
}

    .progress-bar::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
        animation: progressShine 2s linear infinite;
    }

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}

/* -------------------------------------------
   SPINNER (arcade loading)
------------------------------------------- */

.spinner-border {
    border-color: var(--cp-brand);
    border-right-color: transparent;
    animation: spinner-border .75s linear infinite, spinnerGlow 1.5s ease-in-out infinite;
}

@keyframes spinnerGlow {
    0%, 100% {
        filter: drop-shadow(0 0 5px var(--cp-brand-glow));
    }

    50% {
        filter: drop-shadow(0 0 15px var(--cp-brand-glow));
    }
}

/* -------------------------------------------
   TOOLTIPS (arcade hints)
------------------------------------------- */

.tooltip-inner {
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    border: 2px solid var(--cp-brand);
    color: var(--cp-text);
    font-weight: 600;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 0 15px var(--cp-brand-glow);
}

/* -------------------------------------------
   BADGES (arcade score chips)
------------------------------------------- */

.badge {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.35em 0.65em;
    border-radius: 6px;
    border: 2px solid transparent;
}

    .badge.bg-primary {
        background: linear-gradient(135deg, var(--cp-brand) 0%, #0099cc 100%) !important;
        color: #000 !important;
        border-color: var(--cp-brand);
        box-shadow: 0 0 10px var(--cp-brand-glow);
    }

    .badge.bg-success {
        background: linear-gradient(135deg, var(--cp-neon-green) 0%, #00cc66 100%) !important;
        color: #000 !important;
        border-color: var(--cp-neon-green);
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    }

    .badge.bg-danger {
        background: linear-gradient(135deg, var(--cp-neon-pink) 0%, #cc0055 100%) !important;
        color: #fff !important;
        border-color: var(--cp-neon-pink);
        box-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
    }

    .badge.bg-warning {
        background: linear-gradient(135deg, var(--cp-neon-yellow) 0%, #ccbb00 100%) !important;
        color: #000 !important;
        border-color: var(--cp-neon-yellow);
        box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
    }

    .badge.bg-info {
        background: linear-gradient(135deg, var(--cp-neon-purple) 0%, #8833cc 100%) !important;
        color: #fff !important;
        border-color: var(--cp-neon-purple);
        box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
    }

/* -------------------------------------------
   INPUT GROUPS (arcade controls)
------------------------------------------- */

.input-group-text {
    background: var(--cp-bg-2);
    border: 2px solid var(--cp-border);
    color: var(--cp-text);
    font-weight: 600;
}

/* -------------------------------------------
   CHECKBOXES & RADIOS (arcade toggles)
------------------------------------------- */

.form-check-input {
    background-color: var(--cp-bg-2);
    border: 2px solid var(--cp-border);
    transition: all 150ms ease;
}

    .form-check-input:checked {
        background-color: var(--cp-brand);
        border-color: var(--cp-brand);
        box-shadow: 0 0 10px var(--cp-brand-glow);
    }

    .form-check-input:focus {
        border-color: var(--cp-brand);
        box-shadow: 0 0 0 0.2rem rgba(0, 217, 255, 0.3), 0 0 10px var(--cp-brand-glow);
    }

.form-check-label {
    color: var(--cp-text);
    font-weight: 600;
}

.form-check.form-switch .form-check-label {
    margin-left: 0.65rem;
}

/* -------------------------------------------
   NAVBAR TOGGLER (arcade menu button)
------------------------------------------- */

.navbar-toggler {
    border: 3px solid var(--cp-brand) !important; /* Thicker border */
    border-radius: 6px;
    padding: 0.5rem;
    transition: all 150ms ease;
    box-shadow: 0 0 20px var(--cp-brand-glow), 0 0 10px var(--cp-brand-glow) !important; /* Much stronger glow */
    background: rgba(0, 217, 255, 0.15) !important; /* Brighter background */
}

    .navbar-toggler:hover {
        background: rgba(0, 217, 255, 0.25) !important;
        box-shadow: 0 0 30px var(--cp-brand-glow), 0 0 15px var(--cp-brand-glow) !important;
        border-color: #00ffff !important;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 217, 255, 0.5), 0 0 25px var(--cp-brand-glow) !important;
        outline: none !important;
    }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300ffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    /* Changed stroke from %2300d9ff to %2300ffff (brighter cyan) and stroke-width from 2 to 3 */
}

/* -------------------------------------------
   END OF ARCADE MADNESS 🎮🕹️
   GAME OVER... OR IS IT? 
------------------------------------------- */
/* ================================================
   CIDERCADE ARCADE EDITION - BUG FIXES
   Add this to the bottom of site-cidercade.css
   OR create as a separate file and load after
================================================ */

/* -------------------------------------------
   FIX 1: Prevent text squishing/truncation
------------------------------------------- */

/* Ensure cards and list items don't squish content */
.card,
.list-group-item,
.cp-ticket {
    min-width: 0; /* Allow flex items to shrink properly */
    overflow: visible; /* Don't hide overflow */
}

/* Prevent text from being cut off */
.card-body,
.list-group-item,
.cp-ticket {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Make sure accordion/collapsible content isn't constrained */
.accordion-item,
.collapse {
    overflow: visible !important;
}

/* Ensure group headers have proper spacing */
.accordion-button,
.card-header {
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Fix any flex container issues that might squish content */
.d-flex,
.flex-row,
.flex-column {
    min-width: 0;
}

/* Ensure container doesn't constrain width */
.container,
.container-fluid {
    overflow-x: visible;
}

/* -------------------------------------------
   FIX 2: Make dropdowns clickable
------------------------------------------- */

/* Scanline overlay should NOT block pointer events */
body::before {
    pointer-events: none !important; /* This was already set but emphasizing */
}

/* Ensure dropdown menus are above scanlines and other effects */
.dropdown-menu {
    z-index: 10000 !important; /* Way above everything */
    pointer-events: auto !important; /* Explicitly enable clicks */
}

/* Nav dropdown container */
.navbar .dropdown {
    z-index: 1060 !important; /* Above navbar, below modals */
}

/* Dropdown toggle should be clickable */
.dropdown-toggle {
    z-index: 1060 !important;
    pointer-events: auto !important;
}

/* Entire navbar should be above overlays */
.navbar,
header {
    z-index: 1050 !important;
}

/* Navbar collapse should be clickable */
.navbar-collapse {
    z-index: 1055 !important;
}

/* Fix for any backdrop blur that might interfere */
.dropdown-menu {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Ensure admin dropdown specifically is clickable */
.navbar .nav-item.dropdown,
.navbar .dropdown {
    position: relative;
    z-index: 1060 !important;
}

.navbar .dropdown-menu {
    position: absolute;
    z-index: 100000 !important; /* Match nuclear z-index approach */
}

/* Ensure navbar dropdown items are above other nav items */
.navbar .nav-item.dropdown {
    position: relative;
    z-index: 1; /* Low z-index when closed */
    isolation: isolate; /* Create isolated stacking context */
}

.navbar .nav-item.dropdown.show {
    z-index: 99999 !important; /* Nuclear z-index when open - always wins */
    isolation: isolate; /* Maintain isolated stacking context */
}


/* -------------------------------------------
   FIX 3: Improve ticket list layout
------------------------------------------- */

/* Better spacing for ticket items */
.cp-ticket,
.list-group-item {
    padding: 1rem 1.25rem !important; /* More horizontal padding */
    margin-bottom: 0.75rem;
}

/* Group headers should have proper padding */
.accordion-button,
.card-header {
    padding: 1rem 1.25rem !important;
}

/* Ensure ticket content doesn't wrap awkwardly */
.cp-ticket-content,
.list-group-item-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Fix for any grid layouts that might be squishing */
.row {
    margin-left: 0;
    margin-right: 0;
}

    .row > * {
        padding-left: 0;
        padding-right: 0;
    }

/* -------------------------------------------
   FIX 4: Ensure proper text rendering
------------------------------------------- */

/* Prevent webkit from doing weird text rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure text is never hidden */
.text-truncate {
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* -------------------------------------------
   FIX 5: Mobile menu clickability
------------------------------------------- */

/* Ensure hamburger menu is clickable */
.navbar-toggler {
    z-index: 1065 !important;
    pointer-events: auto !important;
    position: relative;
}

/* Collapsed menu should be clickable */
.navbar-collapse.show,
.navbar-collapse.collapsing {
    z-index: 1055 !important;
}

/* -------------------------------------------
   ADDITIONAL: Debug helpers (remove later)
   Uncomment these to see element boundaries
------------------------------------------- */

/*
.dropdown-menu {
    border: 3px solid red !important;
}

.navbar {
    border: 3px solid green !important;
}

body::before {
    border: 3px solid yellow !important;
}
*/
/* ================================================
   FIX: LEFT SIDE TEXT CLIPPING
   
   This fixes text being cut off on the left side
   Add this to the END of your CSS file
================================================ */

/* -------------------------------------------
   ROOT CAUSE FIX: Container & Row Margins
------------------------------------------- */

/* Ensure containers don't have negative margins cutting off content */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Bootstrap rows have negative margins - override them */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    .row > * {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

/* -------------------------------------------
   GROUP CONTAINER FIXES
------------------------------------------- */

/* Ensure cp-group has proper padding and no overflow hidden */
.cp-group {
    padding: 1rem !important;
    margin-bottom: 1.5rem;
    overflow: visible !important;
    width: 100%;
    box-sizing: border-box;
}

/* Group header - ensure it has padding and doesn't clip */
.cp-group-header {
    padding: 1rem 1.25rem !important;
    margin: -1rem -1rem 0.75rem -1rem; /* Negative margins to extend to edges */
    background: rgba(0, 217, 255, 0.05);
    border-radius: 10px 10px 0 0;
    overflow: visible !important;
    width: auto !important;
}

/* Group title - make sure text isn't clipped */
.cp-group-title {
    font-family: 'Bungee', cursive !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: var(--cp-brand) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 10px var(--cp-brand-glow);
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 1rem;
}

/* -------------------------------------------
   TICKET ITEM FIXES  
------------------------------------------- */

/* Tickets - ensure proper padding and no left clipping */
.cp-ticket {
    display: block;
    padding: 0.875rem 1.25rem !important;
    margin: 0.5rem 0 !important;
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
    text-decoration: none;
    transition: all 180ms ease;
}

/* Default: desktop/tablet stays one-line like today */
.cp-ticket-title {
    flex-wrap: nowrap;
}

/* Make sure the text can actually shrink instead of forcing a “column” */
.cp-ticket-text {
    min-width: 0;
    flex: 1 1 auto;
}

/* Mobile: move the ticket text onto its own line */
@media (max-width: 576px) {
    .cp-ticket-title {
        flex-wrap: wrap;
    }

    .cp-ticket-text {
        flex-basis: 100%;
        width: 100%;
        margin-left: 0 !important; /* remove ms-2 spacing on the new line */
        margin-top: 4px;
    }
}


/* Ticket number */
.cp-num {
    font-weight: 900 !important;
    color: var(--cp-neon-yellow) !important;
    font-size: 0.95rem !important;
    text-shadow: 0 0 8px rgba(255, 234, 0, 0.5);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* -------------------------------------------
   PAGE CONTAINER FIXES
------------------------------------------- */

/* Ensure main page container doesn't clip */
.cp-page {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow: visible !important;
}

/* Surface wrapper */
.cp-surface {
    width: 100%;
    overflow: visible !important;
    padding: 1rem 0;
}

/* -------------------------------------------
   FLEX CONTAINER FIXES
------------------------------------------- */

/* Fix any flex containers that might be causing issues */
.d-flex {
    min-width: 0; /* Allow flex items to shrink */
}

.flex-nowrap {
    overflow: visible !important;
}

/* Ensure flex items don't get squished */
.d-flex > * {
    min-width: 0;
}

/* -------------------------------------------
   TEXT RENDERING FIXES
------------------------------------------- */

/* Prevent text from being clipped */
.text-truncate {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

/* Ensure inline-block elements render properly */
.d-inline-block {
    display: inline-block !important;
}

/* -------------------------------------------
   VIEWPORT & HTML/BODY FIXES
------------------------------------------- */

/* Ensure body/html don't clip content */
html, body {
    overflow-x: visible !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Main content wrapper */
main {
    width: 100%;
    overflow: visible !important;
}

/* -------------------------------------------
   BOOTSTRAP GUTTER SYSTEM OVERRIDE
------------------------------------------- */

/* Remove Bootstrap's gutter system that can cause clipping */
.g-0,
.gx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    .g-0 > *,
    .gx-0 > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* -------------------------------------------
   MOBILE SPECIFIC FIXES
------------------------------------------- */

@media (max-width: 768px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }

    .cp-group {
        padding: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .cp-group-header {
        padding: 0.875rem 1rem !important;
    }

    .cp-ticket {
        padding: 0.75rem 1rem !important;
    }
}

/* -------------------------------------------
   DEBUGGING AIDS (uncomment to see boundaries)
------------------------------------------- */

/*
.cp-group {
    outline: 2px solid lime !important;
}

.cp-group-header {
    outline: 2px solid cyan !important;
}

.cp-group-title {
    outline: 2px solid magenta !important;
}

.cp-ticket {
    outline: 2px solid yellow !important;
}

.container {
    outline: 3px solid red !important;
}
*/

/* -------------------------------------------
   ENSURE NO TRANSFORMS SHIFT CONTENT
------------------------------------------- */

/* Make sure no transforms are pushing content off-screen */
.cp-group,
.cp-group-header,
.cp-group-title,
.cp-ticket,
.cp-ticket-title {
    transform: none !important;
}

    /* Only allow transforms on hover states */
    .cp-ticket:hover {
        transform: translateX(4px) !important;
    }

/* -------------------------------------------
   FINAL SAFETY NET
------------------------------------------- */

/* Nuclear option: ensure EVERYTHING is visible */
* {
    box-sizing: border-box !important;
}

/* Prevent ANY overflow hidden that might clip */
.cp-surface *,
.container *,
.cp-page * {
    overflow: visible !important;
}

/* But keep these specific ones with scroll */
.modal-body,
.dropdown-menu,
select,
textarea,
input[type="text"] {
    overflow: auto !important;
}
/* ================================================
   AGGRESSIVE THUMBNAIL FIX - Index Page
   More specific selectors to override everything
================================================ */

/* -------------------------------------------
   INDEX PAGE THUMBNAILS - NUCLEAR OPTION
------------------------------------------- */

/* Target thumbnails in the index/list view with maximum specificity */
.cp-ticket .cp-thumbs,
.cp-group .cp-thumbs,
div.cp-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
    overflow: hidden !important;
}

    /* Force constrain all images inside cp-thumbs */
    .cp-ticket .cp-thumbs img,
    .cp-group .cp-thumbs img,
    div.cp-thumbs img,
    .cp-thumbs > img {
        /* Size constraints */
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        /* Display properties */
        display: block !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        /* Styling */
        border-radius: 10px !important;
        border: 2px solid var(--cp-border) !important;
        background: var(--cp-bg-2) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
        transition: all 180ms ease !important;
        /* Override any other rules */
        position: relative !important;
        overflow: hidden !important;
    }

        /* Hover state */
        .cp-ticket .cp-thumbs img:hover,
        .cp-group .cp-thumbs img:hover,
        div.cp-thumbs img:hover,
        .cp-thumbs > img:hover {
            border-color: var(--cp-brand) !important;
            box-shadow: 0 0 15px var(--cp-brand-glow), 0 6px 16px rgba(0, 0, 0, 0.5) !important;
            transform: scale(1.05) !important;
        }

/* -------------------------------------------
   DETAILS PAGE - ALSO REINFORCE
------------------------------------------- */

/* Target attachments in details view */
.cp-panel .cp-attachments,
.cp-ticket-body .cp-attachments,
div.cp-attachments {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-top: 1rem !important;
    overflow: hidden !important;
}

    /* Each attachment container */
    .cp-panel .cp-attachments .cp-attach,
    .cp-ticket-body .cp-attachments .cp-attach,
    div.cp-attachments .cp-attach,
    .cp-attachments > .cp-attach,
    .cp-attach.cp-gallery-item,
    a.cp-attach {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
        display: inline-block !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        border: 2px solid var(--cp-border) !important;
        background: var(--cp-bg-2) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
        transition: all 180ms ease !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

        /* Images inside attachments */
        .cp-panel .cp-attachments .cp-attach img,
        .cp-ticket-body .cp-attachments .cp-attach img,
        div.cp-attachments .cp-attach img,
        .cp-attachments > .cp-attach > img,
        .cp-attach.cp-gallery-item img,
        a.cp-attach img,
        .cp-attach > img {
            width: 100% !important;
            height: 100% !important;
            min-width: 100% !important;
            min-height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            display: block !important;
            object-fit: cover !important;
            object-position: center !important;
            /* Override any transforms or sizing */
            transform: none !important;
            position: relative !important;
        }

/* Videos too */
.cp-attach video,
.cp-attach-video,
.cp-attach > video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
}

/* Hover on attachments */
.cp-attach:hover,
a.cp-attach:hover {
    border-color: var(--cp-brand) !important;
    box-shadow: 0 0 15px var(--cp-brand-glow), 0 6px 16px rgba(0, 0, 0, 0.5) !important;
    transform: scale(1.05) !important;
}

/* -------------------------------------------
   MOBILE RESPONSIVE
------------------------------------------- */

@media (max-width: 576px) {
    /* Index thumbnails on mobile */
    .cp-ticket .cp-thumbs img,
    .cp-group .cp-thumbs img,
    div.cp-thumbs img,
    .cp-thumbs > img {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }

    /* Details attachments on mobile */
    .cp-attach,
    a.cp-attach,
    .cp-attachments > .cp-attach {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
    }
}

/* -------------------------------------------
   PREVENT ANY FLEX/GRID INTERFERENCE
------------------------------------------- */

/* Make sure parent containers don't mess with sizing */
.cp-ticket,
.cp-group,
.cp-panel,
.cp-ticket-body {
    /* Allow children to size properly */
    min-width: 0 !important;
}

    /* Ensure flex items inside tickets don't stretch images */
    .cp-ticket .d-flex,
    .cp-ticket-title {
        min-width: 0 !important;
    }

/* -------------------------------------------
   OVERRIDE BOOTSTRAP IMAGE DEFAULTS
------------------------------------------- */

/* Make sure Bootstrap's img-fluid doesn't interfere */
.cp-thumbs img.img-fluid,
.cp-attach img.img-fluid {
    max-width: 100% !important;
    height: auto !important;
}

/* But our specific images should follow our rules */
.cp-thumbs img {
    height: 72px !important; /* Re-assert after img-fluid */
}

.cp-attach img {
    height: 100% !important; /* Re-assert after img-fluid */
}

/* -------------------------------------------
   DEBUGGING HELPER (uncomment to see boundaries)
------------------------------------------- */

/*
.cp-thumbs {
    outline: 3px solid lime !important;
}

.cp-thumbs img {
    outline: 3px solid red !important;
}

.cp-attach {
    outline: 3px solid cyan !important;
}

.cp-attach img {
    outline: 3px solid magenta !important;
}
*/

/* -------------------------------------------
   FINAL SAFETY NET
------------------------------------------- */

/* Absolutely ensure nothing can make these images full size */
img[src^="/attachments/"] {
    /* Only if they're inside thumbnail containers */
}

.cp-thumbs img[src^="/attachments/"],
.cp-attach img[src^="/attachments/"] {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Specific to thumbnail container */
.cp-thumbs img[src^="/attachments/"] {
    width: 72px !important;
    height: 72px !important;
}

/* Specific to attachment container */
.cp-attach img[src^="/attachments/"] {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 576px) {
    .cp-thumbs img[src^="/attachments/"] {
        width: 64px !important;
        height: 64px !important;
    }

    .cp-attach img[src^="/attachments/"] {
        width: 100% !important;
        height: 100% !important;
    }
}


/* =================================================
   Sticky footer: only bottom-of-viewport on short pages
   and AFTER content on long pages
================================================= */

html, body {
    height: 100%;
}

    body.cp-body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

.cp-main {
    flex: 1 0 auto;
}

/* IMPORTANT: kill the ASP.NET template .footer positioning */
footer.footer,
.cp-footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    line-height: normal !important;
    width: 100% !important;
    flex-shrink: 0;
}

/* ================================================
   BATCH FIX BLOCK
================================================ */

/* -------------------------------------------
   FIX: Remove btn hover-halo ripple circle
   The ::before pseudo-element was expanding a
   white circle outside the visible button bounds.
------------------------------------------- */
.btn::before {
    display: none !important;
}

/* -------------------------------------------
   FIX: Modal z-index — must sit above the
   scanline overlay (body::before z-index 9999)
------------------------------------------- */
.modal-backdrop {
    z-index: 10000 !important;
}

.modal {
    z-index: 10001 !important;
}

/* -------------------------------------------
   FIX: Chrome/Safari autofill paints white bg
   on inputs.  Use an inset box-shadow to cover
   the browser-injected background, and force
   text colour to our palette.
------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 999px var(--cp-bg-2) inset !important;
    box-shadow:         0 0 0 999px var(--cp-bg-2) inset !important;
    -webkit-text-fill-color: var(--cp-text) !important;
    color: var(--cp-text) !important;
    border-color: var(--cp-border) !important;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 999px var(--cp-bg-3) inset, 0 0 15px var(--cp-brand-glow) !important;
    box-shadow:         0 0 0 999px var(--cp-bg-3) inset, 0 0 15px var(--cp-brand-glow) !important;
    border-color: var(--cp-brand) !important;
}

/* Also keep the floating label visible when autofilled */
.form-floating input:-webkit-autofill + label {
    opacity: 0.65;
    transform: translateY(-75%) scale(0.85);
}

/* -------------------------------------------
   Choices.js full dark-theme skin.
   All <select> elements use data-cp-choices so
   Choices.js renders the popup; native <option>
   styling is irrelevant (OS-controlled on macOS).
------------------------------------------- */

/* Outer wrapper */
.choices {
    margin-bottom: 0 !important;
}

/* Collapsed box – match Bootstrap .form-select sizing exactly */
.choices__inner {
    background: var(--cp-bg-2) !important;
    border: 2px solid var(--cp-border) !important;
    border-radius: 8px !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    min-height: unset !important;
    color: var(--cp-text) !important;
    font-weight: 500;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.choices.is-open .choices__inner {
    border-color: var(--cp-brand) !important;
    box-shadow: 0 0 15px var(--cp-brand-glow) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Selected-value text */
.choices__single {
    color: var(--cp-text) !important;
    font-weight: 500;
    padding: 0 !important;
    margin: 0 !important;
}

/* Down-arrow – keep the caret but tint it */
.choices__arrow div {
    border-top-color: var(--cp-text-3) !important;
}

/* Dropdown panel */
.choices__list--dropdown {
    background: linear-gradient(180deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%) !important;
    border: 2px solid var(--cp-brand) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 0 20px var(--cp-brand-glow),
                0 10px 30px rgba(0, 0, 0, 0.5) !important;
    z-index: 10002 !important;
    /* Override the .container * { overflow: visible } wildcard */
    overflow: hidden !important;
}

/* Scrollable item list inside the panel */
.choices__list--dropdown .choices__list {
    overflow-y: auto !important;
}

/* Each option row */
.choices__item--selectable {
    color: var(--cp-text) !important;
    padding: 0.6rem 1rem !important;
    font-weight: 500;
    transition: background-color 120ms ease;
}

/* Hover / keyboard-focus – this was the generic blue */
.choices__item--active {
    background-color: var(--cp-brand) !important;
    color: #000 !important;
    font-weight: 700 !important;
}

/* Currently-selected option shown in the reopened list */
.choices__item--selected {
    background-color: rgba(0, 217, 255, 0.12) !important;
    color: var(--cp-text) !important;
}

/* Selected + hovered simultaneously */
.choices__item--selected.choices__item--active {
    background-color: var(--cp-brand) !important;
    color: #000 !important;
}

/* =================================================
   CHOICES.JS — FULL NEON CYAN HOVER (CP STYLE)
================================================= */

/* Dropdown container */
.choices__list--dropdown {
    background: var(--cp-bg-2);
    border: 2px solid var(--cp-brand);
    border-radius: 10px;
    box-shadow: 0 0 20px var(--cp-brand-glow), 0 12px 30px rgba(0,0,0,.6);
    padding: 0.35rem;
}

    /* Base list items */
    .choices__list--dropdown .choices__item--choice,
    .choices__list--dropdown .choices__item--selectable {
        color: var(--cp-text) !important;
        background: transparent !important;
        padding: 0.55rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
        transition: background 120ms ease, color 120ms ease;
    }

        /* 🚨 REAL hover / keyboard highlight class */
        .choices__list--dropdown
        .choices__item--choice.is-highlighted,
        .choices__list--dropdown
        .choices__item--selectable.is-highlighted {
            background: var(--cp-brand) !important; /* NEON CYAN STRIP */
            color: #000 !important; /* BLACK TEXT */
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 12px var(--cp-brand-glow);
        }

        /* Selected item (when menu is open) */
        .choices__list--dropdown
        .choices__item--choice.is-selected,
        .choices__list--dropdown
        .choices__item--selectable.is-selected {
            background: rgba(0, 217, 255, 0.25) !important;
            color: #000 !important;
            font-weight: 700;
        }

            /* Selected + highlighted */
            .choices__list--dropdown
            .choices__item--choice.is-selected.is-highlighted,
            .choices__list--dropdown
            .choices__item--selectable.is-selected.is-highlighted {
                background: var(--cp-brand) !important;
                color: #000 !important;
            }

    /* No weird focus outlines */
    .choices__list--dropdown .choices__item {
        outline: none !important;
    }



/* ================================================
   NEW STYLES - ADD TO END OF site-cidercade.css
================================================ */

/* -------------------------------------------
   BTN-OUTLINE-PRIMARY (neon blue outline)
------------------------------------------- */
.btn-outline-primary {
    color: var(--cp-brand);
    border: 2px solid var(--cp-brand);
    background: transparent;
    font-weight: 700;
    box-shadow: 0 0 10px var(--cp-brand-glow);
}

    .btn-outline-primary:hover {
        background: rgba(0, 217, 255, 0.15);
        border-color: #00ffff;
        color: #00ffff;
        box-shadow: 0 0 20px var(--cp-brand-glow), 0 4px 12px rgba(0, 0, 0, 0.4);
        transform: translateY(-2px);
    }

    .btn-outline-primary:active,
    .btn-outline-primary.active {
        background: rgba(0, 217, 255, 0.25) !important;
        border-color: var(--cp-brand) !important;
        color: var(--cp-brand) !important;
        box-shadow: 0 0 15px var(--cp-brand-glow) !important;
        transform: translateY(0);
    }

    .btn-outline-primary:focus,
    .btn-outline-primary:focus-visible {
        background: rgba(0, 217, 255, 0.1);
        border-color: var(--cp-brand);
        color: var(--cp-brand);
        box-shadow: 0 0 0 .25rem rgba(0, 217, 255, 0.3), 0 0 20px var(--cp-brand-glow) !important;
    }

/* Small version */
.btn-sm.btn-outline-primary {
    box-shadow: 0 0 8px var(--cp-brand-glow);
}

    .btn-sm.btn-outline-primary:hover {
        box-shadow: 0 0 15px var(--cp-brand-glow), 0 4px 8px rgba(0, 0, 0, 0.4);
    }

/* -------------------------------------------
   NOTIFICATION DIGEST DEBUG - MOBILE CARDS
------------------------------------------- */

/* Mobile-friendly card layout for notification digest debug */
@media (max-width: 991.98px) {
    /* Hide table on mobile */
    .cp-digest-debug-table {
        display: none !important;
    }

    /* Show card layout */
    .cp-digest-debug-cards {
        display: block !important;
    }
}

@media (min-width: 992px) {
    /* Show table on desktop */
    .cp-digest-debug-table {
        display: block !important;
    }

    /* Hide cards on desktop */
    .cp-digest-debug-cards {
        display: none !important;
    }
}

/* Card styles for mobile */
.cp-digest-card {
    background: linear-gradient(135deg, var(--cp-bg-2) 0%, var(--cp-bg-3) 100%);
    border: 2px solid var(--cp-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 180ms ease;
}

    .cp-digest-card:hover {
        border-color: var(--cp-brand);
        box-shadow: 0 0 15px var(--cp-brand-glow), 0 6px 16px rgba(0, 0, 0, 0.5);
    }

.cp-digest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--cp-border);
}

.cp-digest-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cp-text);
}

.cp-digest-card-subtitle {
    font-size: 0.85rem;
    color: var(--cp-text-3);
    margin-top: 0.25rem;
}

.cp-digest-card-body {
    display: grid;
    gap: 0.75rem;
}

.cp-digest-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.cp-digest-card-label {
    font-weight: 600;
    color: var(--cp-text-2);
    font-size: 0.9rem;
}

.cp-digest-card-value {
    font-weight: 500;
    color: var(--cp-text);
    text-align: right;
}

.cp-digest-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--cp-border);
}

    .cp-digest-card-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

/* Small text in cards */
.cp-digest-card-small {
    font-size: 0.8rem;
    color: var(--cp-text-3);
    line-height: 1.4;
}

/* Deactivated user card styling */
.cp-digest-card.deactivated {
    opacity: 0.6;
    filter: grayscale(0.4);
}

/* Stats badges in cards */
.cp-digest-stat-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: var(--cp-accent);
    border: 1px solid var(--cp-accent-border);
    font-weight: 700;
    font-size: 0.85rem;
}

    .cp-digest-stat-badge.highlight {
        background: rgba(0, 217, 255, 0.15);
        border-color: var(--cp-brand);
        color: var(--cp-brand);
    }

/* Top action buttons container mobile-friendly */
.cp-digest-actions-grid {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
    .cp-digest-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .cp-digest-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .cp-digest-actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .cp-digest-actions-grid {
        display: flex;
        flex-wrap: wrap;
    }
}

/* ============================================
   Notification Digest Debug – 6 button layout
============================================ */

.cp-digest-grid {
    display: grid;
    gap: 14px;
}

/* Mobile: 3 groups stacked vertically */
.cp-digest-col {
    display: grid;
    gap: 10px;
}

/* Desktop: 3 columns (Email | Push | SMS), each column contains 2 stacked buttons */
@media (min-width: 992px) {
    .cp-digest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
}

/* All buttons same size */
.cp-digest-btn {
    min-height: 52px; /* consistent height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal; /* allow wrap if needed */
    line-height: 1.15;
    padding: 0.75rem 0.9rem; /* consistent padding */
}

/* -------------------------------------------
   DISABLED FORM CONTROLS (dark theme fix)
------------------------------------------- */

.form-control:disabled,
.form-control[disabled] {
    background: var(--cp-bg-2) !important;
    color: var(--cp-text-2) !important;
    border-color: var(--cp-border) !important;
    opacity: 1 !important; /* prevent Bootstrap fade */
    cursor: not-allowed;
}

    /* Optional: make disabled labels feel intentional */
    .form-control:disabled::placeholder {
        color: var(--cp-text-3);
    }
