/* ==========================================
   GLOBAL APP LAYOUT — IPADOS SCROLL FIX
========================================== */

html {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background-color: #111;
}

body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
    min-height: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #111;
    background-image: url("/frenzy/images/graysemicircbackground.jpg");
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    text-align: center;
    font-family: Arial, sans-serif;
    cursor: default;
    color: white;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}


/*
 * Main vertical scrolling area for app pages.
 *
 * The root document stays locked.
 * Only this content area scrolls.
 *
 * 45px = navigation height
 * 15px = footer height
 */
.app-page-scroll {
    position: fixed;

    top: 45px;
    bottom: 15px;
    left: 0;
    right: 0;

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}

.landing-title {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap: wrap;
    padding: 0 12px;
}

.landing-title img {
    height: 40px;
}

@media (max-width: 600px) {
    .landing-title {
        flex-direction: column;
        text-align:center;
        font-size: 20px;
    }

    .landing-title img {
        height: 50px;
    }
}

.toggle-btn {
    background:#222;
    border:1px solid #444;
    color:#aaa;
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
}

@media (max-width: 768px) {
    .toggle-btn {
        width: 100%;
        max-width: 300px;
    }
}

.inactive-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.inactive-wrapper {
    width: 100%;
    max-width: 1000px;
    margin-top: 0;          /* removes gap */
}

.site-footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 15px;

    background: #000;
    color: #777;
    text-align: center;
    line-height: 15px;

    font-size: 11px;

    z-index: 10000;
}

a{
color:yellow;
cursor:pointer;
text-decoration:none;
}

a:hover{
color:brown;
}

#hidden {
	display:none;
}

button{
	background:yellow;
	color:black;
	text-decoration:none;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

button:hover{
	background:brown;
	color:white;
}

button[disabled] {
    background: #555;
}

.btn-edit { background: #ffff00; }
.btn-edit:hover { background: #a52a2a; color:#fff; }

.can-del{
	background:#dc2626;
}
.can-del:hover{
	background: #b91c1c;
}

input[type=button]{
	color:yellow;
	text-decoration:underline;
}

input[type=button]:hover{
	color:brown;
}

.grid {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    padding:24px;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;   /* single column */
        padding: 12px;                /* tighter padding */
        gap: 12px;
    }
}

.card {
	background:#111;
	border:1px solid #333;
	border-radius:12px;
	padding:18px;
	cursor:pointer;
	transition:.2s;
	position:relative;
}

.card:hover {
	background:#161819;
/*	transform:translateY(-2px);*/
}


@media (max-width: 768px) {
    .card {
        padding: 22px;
        font-size: 16px;
    }
}

.section {
    max-width: 1000px;
    margin: 40px auto;
}

@media (max-width: 768px) {
    .section {
        margin: 24px auto;
        padding: 0 10px;
    }
}

h2 {
    margin-bottom:20px;
}

.badge {
    position: absolute;
    top: 5px;
    right: 5px;

    background: #16a34a;
    color: #000;
    padding: 3px 3px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 20px;
	text-shadow: none;
}

.logout {
    position:fixed;
    top:10px;
    right:10px;
    color:#ffff00;
    text-decoration:none;
}

.logout:hover {
    color:#dc2626;
}

.schedule-box {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.schedule-box.loading {
    opacity: 0;
    transform: translateY(8px);
}

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    border-bottom: 1px solid #333;
}
.active {
    color: #22c55e;
    font-weight: bold;
}

.back-btn{
	text-decoration:none;
	color:#ffff00;
	position:fixed;
	top: 52px;
	left:10px;
	font-size:12px;
	z-index: 1000;
}
		
.back-btn:hover{
	color:#A52A2A;
}

        .season-select {
            margin-bottom: 20px;
        }
        .season-select select {
            padding: 6px 10px;
            font-size: 14px;
            border-radius: 6px;
            border: 1px solid #444;
            background: #1c1c1c;
            color: #fff;
        }

        .add-week-btn {
            display: inline-block;
            margin-bottom: 24px;
            padding: 0px 20px;
            background: #ffff00;
            color: #111;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            transition: background 0.2s;
            text-shadow: none;
            position: static;
        }
        .add-week-btn:hover {
            background: #A52A2A;
            color:#000;
        }

        .weeks-container {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .week-card {
        	position: relative;
            background: #222;
            border: 1px solid #2a2a2a;
            border-radius: 12px;
            padding: 16px;
            width: 200px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .week-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.6);
        }

        .week-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #fff;
        }

        .week-dates {
            font-size: 13px;
            color: #aaa;
            margin-bottom: 12px;
        }

        .week-status {
		    margin-left: 0px;
		    padding: 4px 4px;
		    font-size: 12px;
		    font-weight: 600;
		    color: #1e40af;
		    background-color: #2563eb;
		    border-radius: 999px;
         }

        .week-actions {
            display: flex;
            justify-content: space-between;
        }

        .week-actions a {
            padding: 6px 10px;
            font-size: 13px;
            border-radius: 6px;
            text-decoration: none;
            color: #fff;
            transition: background 0.2s;
        }

        @media (max-width: 600px) {
            .week-card { width: 100%; }
        }
        
		.week-card.current-week {
		    background: #696969;
		    border: 2px solid #ffff00; /* blue accent */
		    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
		    transform: translateY(-2px);
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		}
		.week-card.current-week .week-header {
		    color: #fff;
		}
		.week-card.current-week .week-status {
		    color: #fff;
		    font-style: italic;
		    font-size: 10px;
		    position: absolute;
		    top: 8px;
		    left: 8px;
		    background: #ffff00;
		}
		.page-container {
		    display: flex;
		    flex-direction: column;
		    align-items: center;   /* center horizontally */
		    text-align: center;    /* center text */
		    padding: 24px;
		}
		
		.weeks-container {
		    display: flex;
		    flex-wrap: wrap;
		    gap: 16px;
		    justify-content: center; /* center all week cards */
		}
		.upload-btn{
			padding:10px 16px;
			background:#ffff00;
			color:#000;
			border:none;
			border-radius:8px; 
			cursor:pointer;
		}
		.upload-btn:hover{
			background-color: #A52A2A;
		}
		.week-highlight {
		    animation: highlightFlash 1.2s ease-out;
		}
		
		@keyframes highlightFlash {
		    0%   { background: rgba(255, 255, 0, 0.35); }
		    100% { background: transparent; }
		}
		.game-count-badge {
		    position: absolute;
		    top: 8px;
		    right: 8px;
		
		    background: #2563eb;
		    color: #fff;
		
		    font-size: 11px;
		    font-weight: bold;
		
		    padding: 4px 8px;
		    border-radius: 999px;
		
		    text-decoration: none;
			text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
		}
		
		.game-count-badge:hover {
		    background: #1e40af;
		}

.team-schedule {
    margin-top: 10px;
    font-size: 13px;
    text-align: left;
}

.schedule-row {
    padding: 4px 0;
    border-bottom: 1px solid #333;
}

.schedule-row:last-child {
    border-bottom: none;
}

.bye-week {
    background: rgba(255, 255, 0, 0.12);
    color: #facc15;
    font-weight: bold;
    padding: 4px 6px;   /* was larger before */
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    margin-top: 4px;
}

/* ==========================================
   ADMIN PREVIEW BANNER
========================================== */

.admin-preview-banner {
    position: fixed;

    top: 45px;
    left: 0;
    right: 0;

    min-height: 42px;
    box-sizing: border-box;

    padding: 6px 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;
    flex-wrap: wrap;

    background: #b91c1c;
    color: #fff;

    font-size: 13px;
    font-weight: 700;

    text-align: center;
    text-shadow: none;

    z-index: 9000;
}


/*
 * When Admin Preview is active,
 * move the page body below both
 * the 45px navigation and the
 * 42px preview banner.
 */
body.admin-preview-active
.app-page-scroll {
    top: 87px;
}

/* ================= CLEAN NAV ================= */

.frenzy-nav {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 45px;

    background: transparent;

    z-index: 9999;
    overflow: visible;
}

/* Scroll wrapper handles scrolling ONLY */
.nav-scroll-wrapper {
    height: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;
    touch-action: pan-x;

    -webkit-overflow-scrolling: touch;
}

.nav-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.nav-scroll {
    display: flex;
    gap: 8px;
    height: 100%;
    align-items: center;
    justify-content: center; /* desktop */
    padding: 0 10px;
}

@media (max-width: 768px) {
    .nav-scroll {
        justify-content: flex-start; /* mobile */
    }
}

/* ===== Scroll Indicators ===== */

.nav-scroll-indicator {
    position: absolute;
    top: 0;
    height: 45px;
    width: 35px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 10000;
}

.nav-scroll-indicator.left {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,.85), transparent);
}

.nav-scroll-indicator.right {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,.85), transparent);
}

/* Arrow icon */
.nav-scroll-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid yellow;
    border-right: 2px solid yellow;
    transform: translateY(-50%) rotate(45deg);
}

.nav-scroll-indicator.left::after {
    left: 10px;
    transform: translateY(-50%) rotate(-135deg);
}

.nav-scroll-indicator.right::after {
    right: 10px;
}

/* Nav items */
.nav-item {
    position: relative;
    flex: 0 0 auto;
    text-align: center;
    transition: background .15s ease;
}

.nav-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: yellow;
    font-size: 10px;
}

.nav-item img {
    width: 30px;
    height: 30px;
}

.nav-item.active {
    background: black;
}

.nav-item:hover a {
    color: brown;
}

.nav-item.active a {
    color: brown;
}

/* ===============================
   MESSAGE NOTIFICATION BADGE
================================ */

.nav-item {
    position: relative;
}

.nav-message-badge {
    position: absolute;

    top: 0px;
    right: 0px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 999px;

    background: #dc2626;
    color: #fff;

    border: 2px solid #111;

    font-size: 10px;
    font-weight: bold;
    line-height: 1;

    text-shadow: none;

    z-index: 5;

    pointer-events: none;
}

/* ================= DROPDOWN ================= */

.dropdown {
    position: fixed;
    top: 43px;
    left: 0;

    background: black;
    min-width: 200px;
    padding: 6px 0;

    display: none;
    flex-direction: column;

    z-index: 30000;
}

.dropdown a {
    color: yellow;
    padding: 6px 12px;
    text-align: left;
    font-size: 13px;
    display: block;
}

.dropdown a:hover {
    background: #111;
    color: brown;
}

/* ===== Submenu (2nd Level) ===== */

.dropdown-item {
    position: relative;
}

.teams-dropdown {
    top: 45px;
    padding: 0;
    background: transparent;
}

.teams-dropdown .teams-iframe {
    display: block;
    width: 250px;
    height: 400px;
    margin: 0;
    padding: 0;
    border: 0;
}

.has-submenu > a::after {
    content: "▸";
    float: right;
    font-size: 11px;
}

/* Default: open right */
.submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background: black;
    min-width: 150px;
    padding: 6px 0;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;

    z-index: 31000;
}

/* If we need to flip */
.submenu.open-left {
    left: auto;
    right: 100%;
}

/* Show submenu on hover */
.has-submenu:hover .submenu {
    opacity: 1;
    pointer-events: auto;
}

.message-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.message-action-btn {
    background: #222;
    border: 1px solid #444;
    color: #aaa;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: .15s;
}

.message-action-btn:hover {
    border-color: #16a34a;
    color: #fff;
}

.message-edited {
    margin-top: 10px;
    font-size: 11px;
    color: #888;
}

.nav-message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;
    margin-left: 4px;

    border-radius: 999px;

    background: #dc2626;
    color: #fff;

    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

/* ===============================
   MOBILE TOUCH / SCROLL BEHAVIOR
================================ */

* {
    touch-action: auto;
}

/* =================================
   MOBILE FRENZY MENU
================================= */

.frenzy-mobile-bar,
.frenzy-mobile-menu {
    display:none;
}


@media (max-width:620px) {

    /*
     * Replace the horizontally scrolling
     * desktop navigation with the dedicated
     * mobile navigation.
     */
    .frenzy-nav {
        height:45px;

        background:#050505;
    }

    .nav-scroll-wrapper,
    .nav-scroll-indicator {
        display:none;
    }


    /* ===============================
       MOBILE TOP BAR
    =============================== */

    .frenzy-mobile-bar {
        display:flex;

        width:100%;
        height:45px;

        box-sizing:border-box;

        align-items:center;
        justify-content:space-between;

        padding:0 8px;

        background:#050505;

        border-bottom:
            1px solid #333;

        position:relative;

        z-index:40000;

        text-shadow:none;
    }


    .frenzy-mobile-home {
        display:flex;
        align-items:center;

        gap:6px;

        height:100%;

        color:#facc15;

        font-size:12px;
        font-weight:800;

        text-decoration:none;
    }

    .frenzy-mobile-home img {
        width:29px;
        height:29px;

        object-fit:contain;
    }


    .frenzy-mobile-bar-actions {
        display:flex;
        align-items:center;

        gap:5px;

        height:100%;

	margin-left: auto;
    }


    /* ===============================
       MESSAGE SHORTCUT
    =============================== */

    .frenzy-mobile-messages {
        width:40px;
        height:40px;

        position:relative;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    .frenzy-mobile-messages img {
        width:28px;
        height:28px;
    }

    .frenzy-mobile-message-badge {
        position:absolute;

        top:1px;
        right:0;

        min-width:17px;
        height:17px;

        box-sizing:border-box;

        padding:0 4px;

        display:inline-flex;
        align-items:center;
        justify-content:center;

        border:2px solid #050505;
        border-radius:999px;

        background:#dc2626;
        color:#fff;

        font-size:9px;
        font-weight:800;
        line-height:1;

        text-shadow:none;
    }


    /* ===============================
       MENU BUTTON
    =============================== */

    .frenzy-mobile-menu-button {
        appearance:none;

        height:35px;

        display:flex;
        align-items:center;

        gap:5px;

        padding:0 9px;

        border:
            1px solid #555;

        border-radius:6px;

        background:#111827;
        color:#facc15;

        font-size:11px;
        font-weight:800;

        line-height:1;

        text-shadow:none;
    }

    .frenzy-mobile-menu-button:hover {
        background:#1e293b;
        color:#facc15;
    }

    .frenzy-mobile-menu-icon {
        font-size:18px;
        line-height:1;
    }


    /* ===============================
       MOBILE MENU PANEL
    =============================== */

    .frenzy-mobile-menu {
        position:fixed;

        top:45px;
        left:0;
        right:0;

        max-height:
            calc(100dvh - 60px);

        overflow-y:auto;

        -webkit-overflow-scrolling:touch;

        box-sizing:border-box;

        background:#090909;

        border-top:
            1px solid #333;

        border-bottom:
            1px solid #444;

        box-shadow:
            0 8px 20px
            rgba(0,0,0,0.75);

        z-index:39000;

        text-shadow:none;
    }

    .frenzy-mobile-menu:not([hidden]) {
        display:block;
    }

    .frenzy-mobile-menu-placeholder {
        padding:24px;

        color:#888;

        font-size:13px;

        text-align:center;
    }
}

@media (max-width:620px) {

    .frenzy-mobile-menu-inner {
        width:100%;
        box-sizing:border-box;
    }

    .frenzy-mobile-menu-link,
    .frenzy-mobile-accordion {
        width:100%;
        min-height:46px;

        box-sizing:border-box;

        display:flex;
        align-items:center;
        justify-content:space-between;

        gap:10px;

        padding:10px 14px;

        border:0;
        border-bottom:1px solid #262626;
        border-radius:0;

        background:#0b0b0b;
        color:#facc15;

        font-family:Arial, sans-serif;
        font-size:14px;
        font-weight:700;

        text-align:left;
        text-decoration:none;

        text-shadow:none;
    }

    .frenzy-mobile-menu-link {
        justify-content:flex-start;
    }

    .frenzy-mobile-menu-link:hover,
    .frenzy-mobile-accordion:hover {
        background:#171717;
        color:#facc15;
    }

    .frenzy-mobile-accordion[aria-expanded="true"] {
        background:#171717;
    }

    .frenzy-mobile-chevron {
        flex:0 0 auto;

        font-size:15px;

        transition:
            transform 0.18s ease;
    }

    .frenzy-mobile-accordion[aria-expanded="true"]
    .frenzy-mobile-chevron {
        transform:rotate(180deg);
    }

    .frenzy-mobile-submenu {
        width:100%;

        box-sizing:border-box;

        background:#111827;

        border-bottom:1px solid #333;
    }

    .frenzy-mobile-submenu:not([hidden]) {
        display:block;
    }

    .frenzy-mobile-submenu > a {
        display:block;

        box-sizing:border-box;

        width:100%;

        padding:11px 18px 11px 34px;

        border-bottom:
            1px solid rgba(
                255,
                255,
                255,
                0.07
            );

        color:#ddd;

        font-size:13px;
        font-weight:600;

        text-align:left;

        text-decoration:none;
        text-shadow:none;
    }

    .frenzy-mobile-submenu > a:last-child {
        border-bottom:0;
    }

    .frenzy-mobile-submenu > a:hover {
        background:#1e293b;
        color:#facc15;
    }

    .frenzy-mobile-menu-label-with-badge {
        display:inline-flex;
        align-items:center;
        gap:7px;
    }

    .frenzy-mobile-inline-badge {
        min-width:18px;
        height:18px;

        box-sizing:border-box;

        padding:0 5px;

        display:inline-flex;
        align-items:center;
        justify-content:center;

        border-radius:999px;

        background:#dc2626;
        color:#fff;

        font-size:9px;
        font-weight:800;
        line-height:1;

        text-shadow:none;
    }

    .frenzy-mobile-logout {
        margin-top:8px;

        border-top:1px solid #444;

        color:#f87171;
    }

    .frenzy-mobile-payouts {
        padding:10px 14px 14px;
    }

    .frenzy-mobile-payout-summary {
        margin-bottom:10px;

        padding-bottom:10px;

        border-bottom:1px solid #444;

        color:#aaa;

        font-size:12px;
        line-height:1.6;

        text-align:left;
    }

    .frenzy-mobile-payout-row {
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        padding:6px 0;

        color:#ddd;

        font-size:12px;

        text-align:left;
    }

    .frenzy-mobile-payout-row span:last-child {
        color:#aaa;

        text-align:right;
    }

    .frenzy-mobile-menu-note {
        padding:12px;

        color:#888;

        font-size:12px;

        text-align:center;
    }
}

@media (max-width:620px) {

    .frenzy-mobile-message-wrap {
        position:relative;

        display:flex;
        align-items:center;

        height:100%;
    }


    .frenzy-mobile-messages {
        appearance:none;

        width:40px;
        height:40px;

        position:relative;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0;

        border:0;
        border-radius:6px;

        background:transparent;
    }

    .frenzy-mobile-messages:hover,
    .frenzy-mobile-messages[aria-expanded="true"] {
        background:#171717;
    }

    .frenzy-mobile-messages img {
        width:28px;
        height:28px;
    }


    .frenzy-mobile-messages-menu {
        position:fixed;

        top:45px;
        right:6px;

        width:min(
            260px,
            calc(100vw - 12px)
        );

        box-sizing:border-box;

        background:#090909;

        border:1px solid #444;
        border-top:0;

        border-radius:
            0 0 8px 8px;

        box-shadow:
            0 8px 20px
            rgba(0,0,0,.75);

        overflow:hidden;

        z-index:41000;

        text-shadow:none;
    }

	.frenzy-mobile-leagues-menu {
	    position:absolute;
	
	    top:45px;
	    left:0;
	    right:auto;
	}

    .frenzy-mobile-messages-menu:not([hidden]) {
        display:block;
    }

    .frenzy-mobile-messages-menu a {
        min-height:46px;

        box-sizing:border-box;

        display:flex;
        align-items:center;
        justify-content:space-between;

        gap:12px;

        padding:10px 14px;

        border-bottom:
            1px solid #292929;

        color:#facc15;

        font-size:13px;
        font-weight:700;

        text-align:left;
        text-decoration:none;

        text-shadow:none;
    }

    .frenzy-mobile-messages-menu a:last-child {
        border-bottom:0;
    }

    .frenzy-mobile-messages-menu a:hover {
        background:#171717;
        color:#facc15;
    }


    .frenzy-mobile-message-option-count {
        flex:0 0 auto;

        min-width:20px;
        height:20px;

        box-sizing:border-box;

        display:inline-flex;
        align-items:center;
        justify-content:center;

        padding:0 5px;

        border-radius:999px;

        background:#dc2626;
        color:#fff;

        font-size:10px;
        font-weight:800;

        text-shadow:none;
    }
}