/*
 * ARCADEVIBECODE
 * STAGE 5 — DEVELOPER DASHBOARD & TRAILERS
 *
 * Ice Blue Arcade visual redesign.
 *
 * Complete stylesheet.
 * No JavaScript changes.
 * No Supabase changes.
 * No database changes.
 */

/* =====================================
   DASHBOARD FOUNDATION
===================================== */

#studio-tab {
    --dashboard-navy: #071B34;
    --dashboard-blue: #1467B3;
    --dashboard-electric: #1598E6;
    --dashboard-ice: #A8DFFF;
    --dashboard-frost: #F2F9FF;
    --dashboard-steel: #6689A8;
    --dashboard-border: #D8E7F3;

    background: var(--dashboard-frost) !important;
    color: var(--dashboard-navy) !important;

    min-height: 80vh;
}

/* =====================================
   DASHBOARD PANELS
===================================== */

#studio-tab .bg-white\/5 {
    background: #FFFFFF !important;
    border-color: var(--dashboard-border) !important;
    box-shadow: 0 3px 16px rgba(7, 27, 52, 0.045);
}

#studio-tab .rounded-xl {
    border-radius: 14px;
}

/* =====================================
   STUDIO PROFILE EDITOR
===================================== */

#studio-tab form {
    color: var(--dashboard-navy);
}

#studio-tab h2,
#studio-tab h3,
#studio-tab h4 {
    color: var(--dashboard-navy) !important;
    letter-spacing: -0.025em;
}

#studio-tab h2 {
    font-weight: 900;
}

#studio-tab label {
    color: #526E89 !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Studio name, handle, bio and links */

#studio-tab input,
#studio-tab textarea,
#studio-tab select {
    background: #FFFFFF !important;
    color: var(--dashboard-navy) !important;

    border: 1px solid #CADDED !important;
    border-radius: 9px !important;

    box-shadow: none !important;
    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#studio-tab input:focus,
#studio-tab textarea:focus,
#studio-tab select:focus {
    border-color: var(--dashboard-electric) !important;

    box-shadow:
        0 0 0 3px rgba(21, 152, 230, 0.12) !important;
}

#studio-tab input::placeholder,
#studio-tab textarea::placeholder {
    color: #8399AE !important;
    opacity: 1;
}

/* =====================================
   PROFILE IDENTITY
===================================== */

#profileEmailDisplay {
    color: var(--dashboard-blue) !important;
}

#studio-tab .text-neoncyan {
    color: var(--dashboard-blue) !important;
}

/* Old pink avatar fallback */

#studio-tab .bg-neonmagenta\/20 {
    background: #E1F2FF !important;
    border-color: var(--dashboard-electric) !important;
    color: var(--dashboard-blue) !important;
}

/* Preserve custom avatar images */

#studio-tab img {
    max-width: 100%;
}

/* =====================================
   SAVE PROFILE BUTTON
===================================== */

#saveStudioBtn {
    background: var(--dashboard-blue) !important;
    color: #FFFFFF !important;

    border: 1px solid var(--dashboard-blue) !important;
    border-radius: 9px !important;

    font-weight: 800 !important;
    padding: 12px 18px !important;

    box-shadow: none !important;

    transition: background-color 0.2s ease;
}

#saveStudioBtn:hover {
    background: #0D548F !important;
}

/* =====================================
   LAUNCH A NEW TITLE
===================================== */

#studio-tab .bg-gradient-to-r {
    background: #E4F2FD !important;

    border: 1px solid #BDDDF4 !important;
    border-radius: 14px !important;

    box-shadow: none !important;
}

#studio-tab .bg-gradient-to-r h3 {
    color: var(--dashboard-navy) !important;
}

#studio-tab .bg-gradient-to-r p {
    color: #526E89 !important;
}

/* Submission banner button */

#studio-tab .bg-gradient-to-r button {
    background: var(--dashboard-blue) !important;
    color: #FFFFFF !important;

    border: 1px solid var(--dashboard-blue) !important;
    border-radius: 9px !important;

    box-shadow: none !important;
    font-weight: 800 !important;
}

#studio-tab .bg-gradient-to-r button:hover {
    background: #0D548F !important;
}

/* =====================================
   MY UPLOADED GAMES
===================================== */

#my-games-list {
    color: var(--dashboard-navy);
}

#my-games-list > div {
    background: #FFFFFF !important;

    border: 1px solid var(--dashboard-border) !important;
    border-radius: 11px !important;

    box-shadow: none !important;

    transition: border-color 0.2s ease;
}

#my-games-list > div:hover {
    border-color: var(--dashboard-electric) !important;
}

/* Game titles */

#my-games-list h4,
#my-games-list h3 {
    color: var(--dashboard-navy) !important;
    font-weight: 800;
}

/* Descriptions and metadata */

#my-games-list .text-gray-400,
#my-games-list .text-gray-500 {
    color: var(--dashboard-steel) !important;
}

/* Game thumbnails */

#my-games-list img {
    object-fit: cover;
    border-radius: 8px;
}

/* =====================================
   GAME STATUS COLOURS
===================================== */

/* Published — green */

#my-games-list .text-green-400,
#my-games-list .text-green-500 {
    color: #168348 !important;
}

/* Pending — amber */

#my-games-list .text-yellow-400,
#my-games-list .text-yellow-500 {
    color: #966000 !important;
}

/* Rejected — red */

#my-games-list .text-red-400,
#my-games-list .text-red-500 {
    color: #C02A37 !important;
}

/* =====================================
   GAME ACTION BUTTONS
===================================== */

/* Neutral actions */

#my-games-list button {
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Preview buttons */

#my-games-list button.bg-white\/10,
#my-games-list button.bg-white\/5 {
    background: #E4F2FD !important;
    color: var(--dashboard-blue) !important;

    border: 1px solid #C8E2F4 !important;
}

#my-games-list button.bg-white\/10:hover,
#my-games-list button.bg-white\/5:hover {
    background: #D1EAFC !important;
}

/* Destructive actions */

#my-games-list button[class*="bg-red"] {
    color: #B42332 !important;
    background: #FFF1F2 !important;
    border: 1px solid #F4B9C0 !important;
}

#my-games-list button[class*="bg-red"]:hover {
    background: #FFE0E4 !important;
}

/* Takedown and warning actions */

#my-games-list button[class*="bg-orange"],
#my-games-list button[class*="bg-yellow"] {
    color: #865500 !important;
    background: #FFF3D6 !important;
    border: 1px solid #EDD39B !important;
}

/* =====================================
   SIGN OUT BUTTON
===================================== */

#studio-tab button[onclick*="signOut"] {
    background: #FFF1F2 !important;
    color: #B42332 !important;
    border-color: #F4B9C0 !important;

    border-radius: 9px !important;
    box-shadow: none !important;
}

#studio-tab button[onclick*="signOut"]:hover {
    background: #FFE0E4 !important;
}

/* =====================================
   GENERAL TEXT CONTRAST
===================================== */

#studio-tab .text-gray-300 {
    color: #526E89 !important;
}

#studio-tab .text-gray-400 {
    color: #6689A8 !important;
}

#studio-tab .text-gray-500 {
    color: #738DA4 !important;
}

/* =====================================
   EMPTY AND LOADING STATES
===================================== */

#studio-tab .border-dashed {
    border-color: #C8DDED !important;
    color: var(--dashboard-steel) !important;
}

/* =====================================
   DASHBOARD MOBILE LAYOUT
===================================== */

@media (max-width: 768px) {

    #studio-tab {
        padding: 24px 16px !important;
    }

    #studio-tab .bg-gradient-to-r {
        padding: 22px !important;
    }

    #studio-tab h2 {
        font-size: 24px;
    }

    #studio-tab h3 {
        line-height: 1.3;
    }

    #my-games-list > div {
        padding: 14px !important;
    }
}

@media (max-width: 480px) {

    #studio-tab {
        padding: 18px 12px !important;
    }

    #studio-tab input,
    #studio-tab textarea,
    #studio-tab select {
        font-size: 16px !important;
    }

    #studio-tab .bg-gradient-to-r button {
        width: 100%;
    }
}

/* =====================================
   DASHBOARD ACCESSIBILITY
===================================== */

#studio-tab button:focus-visible,
#studio-tab a:focus-visible {
    outline: 3px solid var(--dashboard-electric) !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    #studio-tab button,
    #studio-tab input,
    #studio-tab textarea,
    #my-games-list > div {
        transition: none !important;
    }
}

/* ============================================
   ARCADEVIBECODE — ICE BLUE TRAILERS PAGE
============================================ */

/* =====================================
   TRAILERS PAGE FOUNDATION
===================================== */

#trailers-tab {
    --trailers-navy: #071B34;
    --trailers-blue: #1467B3;
    --trailers-electric: #1598E6;
    --trailers-frost: #F2F9FF;
    --trailers-border: #D8E7F3;

    background: var(--trailers-frost) !important;
    color: var(--trailers-navy) !important;

    min-height: 80vh;
}

/* =====================================
   PAGE HEADINGS
===================================== */

#trailers-tab h2,
#trailers-tab h3,
#trailers-tab h4 {
    color: var(--trailers-navy) !important;
    letter-spacing: -0.025em;
}

/* =====================================
   PAGE DESCRIPTION
===================================== */

#trailers-tab > p,
#trailers-tab .text-gray-400,
#trailers-tab .text-gray-300 {
    color: #526E89 !important;
}

/* =====================================
   TRAILER CARDS
===================================== */

#trailers-tab [class*="bg-white/5"],
#trailers-tab [class*="bg-black/50"],
#trailers-tab [class*="bg-gray-900"] {
    background: #FFFFFF !important;
    color: var(--trailers-navy) !important;

    border: 1px solid var(--trailers-border) !important;
    border-radius: 13px !important;

    box-shadow: 0 3px 14px rgba(7, 27, 52, 0.055);

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

#trailers-tab [class*="bg-white/5"]:hover,
#trailers-tab [class*="bg-black/50"]:hover,
#trailers-tab [class*="bg-gray-900"]:hover {
    border-color: var(--trailers-electric) !important;

    box-shadow: 0 8px 22px rgba(7, 27, 52, 0.10);

    transform: translateY(-2px);
}

/* =====================================
   GAME THUMBNAILS
===================================== */

#trailers-tab img {
    max-width: 100%;
    object-fit: cover;
}

/* =====================================
   GAME TITLES
===================================== */

/*
 * IMPORTANT:
 * Only change white text outside buttons.
 * Button text must remain white.
 */

#trailers-tab .text-white:not(button):not(button *) {
    color: var(--trailers-navy) !important;
}

/* =====================================
   GENRE LABELS
===================================== */

#trailers-tab .text-gray-400,
#trailers-tab .text-gray-500 {
    color: #6689A8 !important;
}

/* =====================================
   WATCH TRAILER BUTTONS
===================================== */

/*
 * FINAL FIX:
 *
 * The previous stylesheet had a conflict
 * between the .text-white class and
 * the button colour.
 *
 * This rule has higher specificity and
 * keeps every Watch Trailer button white.
 */

#trailers-tab button,
#trailers-tab button[class],
#trailers-tab button.text-white,
#trailers-tab button:hover,
#trailers-tab button:focus,
#trailers-tab button:active {
    background-color: #1467B3 !important;
    color: #FFFFFF !important;

    border: 1px solid #1467B3 !important;
    border-radius: 8px !important;

    box-shadow: none !important;
    font-weight: 800 !important;

    opacity: 1;
}

/* Make all text and icons inside buttons white */

#trailers-tab button *,
#trailers-tab button .text-white,
#trailers-tab button span,
#trailers-tab button svg,
#trailers-tab button svg * {
    color: #FFFFFF !important;
}

/* SVG icons that use fill or stroke */

#trailers-tab button svg {
    stroke: currentColor;
}

/* Hover state */

#trailers-tab button:hover,
#trailers-tab button:hover[class],
#trailers-tab button.text-white:hover {
    background-color: #0D548F !important;
    color: #FFFFFF !important;

    border-color: #0D548F !important;
}

/* Keep text white on hover */

#trailers-tab button:hover *,
#trailers-tab button:focus *,
#trailers-tab button:active * {
    color: #FFFFFF !important;
}

/* Play icons */

#trailers-tab button::before,
#trailers-tab button::after {
    color: #FFFFFF !important;
}

/* =====================================
   EMPTY AND LOADING STATES
===================================== */

#trailers-tab .text-gray-500 {
    color: #6689A8 !important;
}

/* =====================================
   TRAILERS MOBILE LAYOUT
===================================== */

@media (max-width: 768px) {

    #trailers-tab {
        padding: 24px 16px !important;
    }

    #trailers-tab h2 {
        font-size: 26px !important;
    }
}

/* =====================================
   TRAILERS ACCESSIBILITY
===================================== */

#trailers-tab button:focus-visible {
    outline: 3px solid var(--trailers-electric) !important;
    outline-offset: 3px;
}

/* =====================================
   REDUCED MOTION
===================================== */

@media (prefers-reduced-motion: reduce) {

    #trailers-tab button,
    #trailers-tab [class*="bg-white/5"],
    #trailers-tab [class*="bg-black/50"],
    #trailers-tab [class*="bg-gray-900"] {
        transition: none !important;
    }

    #trailers-tab [class*="bg-white/5"]:hover,
    #trailers-tab [class*="bg-black/50"]:hover,
    #trailers-tab [class*="bg-gray-900"]:hover {
        transform: none !important;
    }
}