/* ==========================================
   StarSMP Playtime Dashboard
   Style.css
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root{

    --background:#0d1117;
    --background2:#161b22;
    --card:#1f2937;
    --table:#202938;

    --gold:#f4c542;
    --green:#22c55e;
    --red:#ef4444;
    --orange:#f97316;
    --blue:#3b82f6;
    --purple:#8b5cf6;
    --pink:#ec4899;

    --border:#2f3b4d;

    --text:#ffffff;
    --text2:#b8c0cc;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Montserrat',sans-serif;
}

body{

    background:linear-gradient(180deg,#0d1117,#111827);

    color:white;

    min-height:100vh;

}

/* Scrollbar */

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-thumb{

    background:var(--gold);
    border-radius:50px;

}

::-webkit-scrollbar-track{

    background:#111;

}

/* ==========================================
Header
========================================== */

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    background:#151b23;

    border-bottom:2px solid var(--gold);

    position:sticky;

    top:0;

    z-index:100;

}

.logo h1{

    color:var(--gold);

    font-size:34px;

    font-weight:800;

}

.logo p{

    color:#9ca3af;

    margin-top:6px;

}

/* Header Buttons */

.headerButtons{

    display:flex;

    gap:10px;

}

.headerButtons button{

    background:#232f3f;

    color:white;

    border:none;

    border-radius:12px;

    padding:12px 18px;

    cursor:pointer;

    transition:.25s;

    font-weight:700;

}

.headerButtons button:hover{

    background:var(--gold);

    color:black;

    transform:translateY(-3px);

    box-shadow:0 0 18px rgba(244,197,66,.55);

}

/* ==========================================
Week Navigation
========================================== */

nav{

    padding:20px;

    background:#10161d;

    border-bottom:1px solid var(--border);

}

.weekNavigation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}

.weekNavigation select{

    width:340px;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#1f2937;

    color:white;

    font-size:15px;

}

.weekNavigation button{

    padding:12px 20px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    transition:.25s;

}

.weekArrow{

    background:#374151;

    color:white;

}

.weekArrow:hover{

    background:var(--blue);

}

#closeWeekButton{

    background:var(--red);

    color:white;

}

#closeWeekButton:hover{

    transform:scale(1.05);

}

#openWeekButton{

    background:var(--green);

    color:white;

}

#openWeekButton:hover{

    transform:scale(1.05);

}

/* ==========================================
Statistics Cards
========================================== */

.statsGrid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:20px;

    padding:30px;

}

.statCard{

    background:var(--card);

    border:2px solid var(--border);

    border-radius:16px;

    text-align:center;

    padding:25px;

    transition:.25s;

}

.statCard:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    box-shadow:0 0 22px rgba(244,197,66,.35);

}

.statCard h2{

    color:var(--gold);

    margin-bottom:12px;

    font-size:18px;

}

.statCard span{

    font-size:30px;

    font-weight:800;

}

/* ==========================================
Toolbar
========================================== */

.toolbar{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    padding:0 30px 30px;

}

#searchPlayer{

    flex:1;

    min-width:280px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#1f2937;

    color:white;

    font-size:16px;

}

.toolbar button{

    background:#2b3445;

    color:white;

    border:none;

    border-radius:12px;

    padding:14px 20px;

    cursor:pointer;

    transition:.25s;

    font-weight:bold;

}

.toolbar button:hover{

    background:var(--gold);

    color:black;

    transform:translateY(-3px);

}

/* ==========================================
Main Layout
========================================== */

main{

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:25px;

    padding:0 30px 40px;

}

.tableContainer{

    background:var(--background2);

    border:2px solid var(--border);

    border-radius:18px;

    overflow:auto;

}

.sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* ==========================================
Cards
========================================== */

.leaderboardCard,
.topStaffCard,
.activityCard{

    background:var(--card);

    border:2px solid var(--border);

    border-radius:16px;

    padding:22px;

}

.leaderboardCard h2,
.topStaffCard h2,
.activityCard h2{

    color:var(--gold);

    margin-bottom:16px;

}

#leaderboardList{

    list-style:none;

}

#leaderboardList li{

    padding:10px;

    margin-bottom:8px;

    background:#111827;

    border-radius:10px;

}

/* ==========================================
Footer
========================================== */

footer{

    border-top:2px solid var(--border);

    padding:20px;

    text-align:center;

    color:#9ca3af;

}

/* ==========================================
   Week Closed Overlay (Improved)
========================================== */

#weekClosedOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.overlayBox{
    background:#111827;
    padding:32px 40px;
    border-radius:18px;
    border:2px solid var(--gold);
    box-shadow:0 0 25px rgba(244,197,66,.35);
    text-align:center;
    animation:fadeUp .4s ease;
}

#weekClosedOverlay h1{
    font-size:48px;
    color:var(--gold);
    text-shadow:0 0 18px rgba(244,197,66,.6);
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:12px;
}

#weekClosedOverlay p{
    color:var(--text2);
    font-size:16px;
    margin-bottom:20px;
}

/* Close Button */
#closeOverlayBtn{
    background:var(--gold);
    color:black;
    font-weight:700;
    padding:12px 22px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}

#closeOverlayBtn:hover{
    transform:scale(1.05);
    box-shadow:0 0 18px rgba(244,197,66,.55);
}

/* Hidden Class */
.hidden{
    display:none !important;
}

/* ==========================================
   Player Table
========================================== */

table{

    width:100%;

    border-collapse:collapse;

    color:white;

}

thead{

    background:#f4c542;

    color:black;

    position:sticky;

    top:0;

    z-index:20;

}

thead th{

    padding:16px;

    font-size:15px;

    text-align:center;

    border-right:1px solid rgba(0,0,0,.2);

}

tbody td{

    padding:14px;

    text-align:center;

    border-bottom:1px solid #2f3b4d;

    transition:.25s;

}

tbody tr{

    background:#1a2230;

    transition:.25s;

}

tbody tr:hover{

    background:#263246;

}

/* ==========================================
Row Colors
========================================== */

.rowGreen{

    background:rgba(34,197,94,.18)!important;

}

.rowGreen:hover{

    background:rgba(34,197,94,.30)!important;

}

.rowRed{

    background:rgba(239,68,68,.18)!important;

}

.rowRed:hover{

    background:rgba(239,68,68,.30)!important;

}

.rowOrange{

    background:rgba(249,115,22,.20)!important;

}

.rowOrange:hover{

    background:rgba(249,115,22,.34)!important;

}

/* ==========================================
Inputs
========================================== */

input[type=text],
input[type=number],
textarea,
select{

    width:100%;

    background:#111827;

    color:white;

    border:1px solid #374151;

    border-radius:8px;

    padding:8px;

    outline:none;

    transition:.25s;

}

input:focus,
textarea:focus,
select:focus{

    border-color:#f4c542;

    box-shadow:0 0 12px rgba(244,197,66,.4);

}

textarea{

    resize:vertical;

    min-height:40px;

}

/* ==========================================
Buttons inside table
========================================== */

.tableButton{

    background:#3b82f6;

    color:white;

    border:none;

    border-radius:8px;

    padding:8px 14px;

    cursor:pointer;

    transition:.25s;

    font-weight:700;

}

.tableButton:hover{

    transform:scale(1.05);

}

.deleteButton{

    background:#ef4444;

}

.deleteButton:hover{

    background:#dc2626;

}

/* ==========================================
Rank Badges
========================================== */

.rank{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    font-weight:700;

    color:white;

    min-width:120px;

}

.owner{

    background:#ff3131;

}

.coowner{

    background:#ff6b00;

}

.developer{

    background:#00d4ff;

}

.dev{

    background:#06b6d4;

}

.srmanager{

    background:#9333ea;

}

.manager{

    background:#c026d3;

}

.jrmanager{

    background:#ec4899;

}

.sradmin{

    background:#ef4444;

}

.admin{

    background:#dc2626;

}

.jradmin{

    background:#b91c1c;

}

.srmod{

    background:#16a34a;

}

.mod{

    background:#22c55e;

}

.jrmod{

    background:#4ade80;

}

.helper{

    background:#65a30d;

}

.retired{

    background:#6b7280;

}

/* ==========================================
Playtime Status
========================================== */

.status{

    display:inline-block;

    padding:6px 14px;

    border-radius:25px;

    font-weight:700;

    color:white;

}

.completed{

    background:#22c55e;

}

.notcompleted{

    background:#ef4444;

}

.quarter{

    background:#f97316;

}

.noplaytime{

    background:#ec4899;

}

.started{

    background:#3b82f6;

}

.notstarted{

    background:#7c3aed;

}

.closed{

    background:#991b1b;

}

/* ==========================================
Staff Strike
========================================== */

.strike{

    display:inline-block;

    padding:6px 14px;

    border-radius:25px;

    font-weight:bold;

    color:white;

}

.strike0{

    background:#22c55e;

}

.strike1{

    background:#ef4444;

}

.strike2{

    background:#dc2626;

}

.strike3{

    background:#7f1d1d;

}

/* ==========================================
Grand Week Total
========================================== */

tfoot{

    background:#111827;

}

tfoot td{

    padding:18px;

    font-size:18px;

    font-weight:800;

    color:#f4c542;

}

/* ==========================================
Leaderboard
========================================== */

#leaderboardList{

    counter-reset:leaderboard;

}

#leaderboardList li{

    counter-increment:leaderboard;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    margin-bottom:10px;

    border-radius:10px;

    background:#111827;

    transition:.25s;

}

#leaderboardList li:hover{

    transform:translateX(8px);

    border-left:5px solid gold;

}

#leaderboardList li::before{

    content:counter(leaderboard);

    font-weight:800;

    color:#f4c542;

}

/* ==========================================
Statistics Animation
========================================== */

.statCard{

    animation:fadeUp .5s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
Glow Animation
========================================== */

.glow{

    animation:glow 2s infinite;

}

@keyframes glow{

    0%{

        box-shadow:0 0 8px rgba(244,197,66,.2);

    }

    50%{

        box-shadow:0 0 25px rgba(244,197,66,.8);

    }

    100%{

        box-shadow:0 0 8px rgba(244,197,66,.2);

    }

}

/* ==========================================
Responsive
========================================== */

@media(max-width:1400px){

.statsGrid{

grid-template-columns:repeat(3,1fr);

}

main{

grid-template-columns:1fr;

}

.sidebar{

order:-1;

}

}

@media(max-width:900px){

header{

flex-direction:column;

gap:20px;

}

.headerButtons{

flex-wrap:wrap;

justify-content:center;

}

.weekNavigation{

flex-wrap:wrap;

}

.toolbar{

flex-direction:column;

}

.statsGrid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.statsGrid{

grid-template-columns:1fr;

}

.logo h1{

font-size:28px;

}

#weekClosedOverlay h1{

font-size:60px;

}

}
/* ===========================
Week Tabs
=========================== */

#weekTabs{

display:flex;

gap:10px;

overflow-x:auto;

padding:15px;

margin-top:15px;

}

.weekTab{

background:#222;

color:white;

border:none;

padding:12px 18px;

border-radius:10px;

cursor:pointer;

transition:.25s;

font-weight:bold;

white-space:nowrap;

}

.weekTab:hover{

background:#444;

}

.activeWeek{

background:gold;

color:black;

box-shadow:0 0 20px gold;

}