body {
    min-height: 100vh;
    margin: 0;
//    padding-bottom: 15px; /* same height as footer */
	margin-top: 45px;

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

    text-align: center;
    font-family: arial;
    cursor: default;
    color:white;

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

@media (max-width: 768px) {
    body {
        margin-top: 60px;
    }
}

.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; /* vertical center */

    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:#1e293b;
	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;
}

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

.frenzy-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
//	background: none;

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

    z-index: 9999;
    overflow: visible;   /* important */
}

/* Scroll wrapper handles scrolling ONLY */
.nav-scroll-wrapper {
    height: 100%;
    overflow-x: auto;
    overflow-y: visible;   /* CRITICAL */
    white-space: nowrap;
}

.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;
}
/* ================= DROPDOWN ================= */

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

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

    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;

    transition: opacity .15s ease;
    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;
}

.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;
}