body {
    margin:0;
    font-family:Arial;
    background:#eef2f7;
}

/* GRID LAYOUT */
/* TOP ADVERTISEMENT */

.ads-top{
    width:100%;
    margin-top:20px;
    margin-bottom:10px;
    display:flex;
    justify-content:center;
}

.ads-banner{
    width:100%;
    max-width:1000px;
    height:90px;
    background:#e6e6e6;
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    border-radius:6px;
}

.dashboard{

display:grid;

    grid-template-columns:220px 1fr 260px;

    grid-template-rows:70px 1fr;

    grid-template-areas:

    "header header header"
    "sidebar content ads";

    min-height:80vh;

    padding:20px 40px;

}


/* HEADER */

.header{

grid-area:header;

    background:#0f172a;
    color:white;

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

    padding:0 25px;

}

.logo{
    font-size:20px;
    font-weight:bold;
}

.header-shortcuts a{

    color:white;
    margin-left:20px;
    text-decoration:none;

}

.header-right{
    display:flex;
    align-items:center;
    gap:16px;
}

/* PROFILE */

.profile-dropdown{
    position:relative;
}

.profile-btn{
    display:flex;
    align-items:center;
    gap:10px;
    background:#122033;
    border:none;
    color:#fff;
    padding:8px 14px;
    border-radius:12px;
    cursor:pointer;
    font-size:14px;
}

.profile-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#2d7dff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.dropdown-menu{
    position:absolute;
    right:0;
    top:55px;
    background:#132033;
    border-radius:14px;
    min-width:220px;
    overflow:hidden;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);

    transition:0.2s;

    box-shadow:0 10px 25px rgba(0,0,0,0.25);

    z-index:999;
}

.profile-dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown-menu a{
    display:block;
    padding:14px 16px;
    color:#d9e2ec;
    text-decoration:none;
    transition:0.2s;
    font-size:14px;
}

.dropdown-menu a:hover{
    background:#1c314b;
}

.logout-link{
    border-top:1px solid rgba(255,255,255,0.06);
    color:#ff8080 !important;
}

.mail-badge{
    display:inline-block;
    background:#dc2626;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    padding:2px 7px;
    border-radius:20px;
    margin-left:5px;
    vertical-align:middle;
    min-width:18px;
    text-align:center;
}

.dashboard-alert{
    background:#1d4ed8;
    padding:12px;
    border-radius:10px;
    margin-bottom:15px;
    font-weight:bold;
}
/* SIDEBAR */

.sidebar{

grid-area:sidebar;

    background:#1e293b;

}

.sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar a{

    display:block;
    padding:15px;
    color:#cbd5f5;
    text-decoration:none;

}

.sidebar a:hover{

    background:#334155;

}

.ads{

    grid-area:ads;
    padding:20px;
    background:#f1f5f9;
    align-self:start; /* penting */

}

.salary-info{
margin-top:8px;
color:#38bdf8;
font-weight:bold;
}

.ad-box{

    background:white;

    height:200px;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    box-shadow:0 2px 6px rgba(0,0,0,0.1);

    font-size:14px;

}


/* CONTENT */

.content{

grid-area:content;

    padding:25px;

}

.match-buttons{

    margin-top:10px;

}

.match-buttons a{

    display:inline-block;

    background:#2563eb;

    color:white;

    padding:6px 10px;

    margin-right:6px;

    border-radius:4px;

    font-size:13px;

    text-decoration:none;

}


/* WIDGET GRID */

.widgets{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}


/* WIDGET CARD */

.widget{

    background:white;

    border-radius:8px;

    padding:20px;

    box-shadow:0 2px 6px rgba(0,0,0,0.1);

}


/* FULL WIDTH WIDGET */

.full{

grid-column:1 / span 2;

}


/* TABLE */

table{

width:100%;
border-collapse:collapse;

}

th,td{

padding:8px;
border-bottom:1px solid #ddd;

}

.text-right{
text-align:right;
}

table a{
color:#222;
text-decoration:none;
font-weight:500;
}

table a:hover{
color:#0a58ca;
}

/* TIM USER LOGIN */

.my-team td{
font-weight:bold;
font-size:1.05em;
}


/* PROMOTION */

.promotion{
background:#e8f5e9;
}


/* RELEGATION */

.relegation{
background:#fdecea;
}

.myteam-box{
background:#dbeafe;
}

.table-legend{
    margin-top:10px;
    font-size:12px;
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
}

.legend{
    width:14px;
    height:14px;
    display:inline-block;
    border-radius:3px;
}
.bot-icon{
    margin-right:5px;
    font-size:14px;
    opacity:0.8;
}

/* FOOTER */

.footer{

    background:#0f172a;

    color:white;

    margin-top:30px;

    padding:30px 20px;

}

.footer-container{

    max-width:1200px;

    margin:auto;

    text-align:center;

}

.footer-ad{

    background:#334155;

    padding:15px;

    margin-bottom:20px;

    border-radius:6px;

}

.footer-menu{

    margin-bottom:15px;

}

.footer-menu a{

    color:#cbd5f5;

    margin:0 10px;

    text-decoration:none;

}

.footer-menu a:hover{

    text-decoration:underline;

}

.footer-social{

    margin-bottom:15px;

}

.footer-social a{

    color:#94a3b8;

    margin:0 8px;

    text-decoration:none;

}

.copyright{

    font-size:13px;

    color:#94a3b8;

}


/* MATCH TIME */

.match-time{

    margin-top:10px;

    font-weight:bold;

    color:#2563eb;

}

.subscribe{

    background:#f59e0b;

    padding:6px 12px;

    border-radius:5px;

    color:white;

    font-weight:bold;

}

@media (max-width:900px){

.dashboard{

grid-template-columns:1fr;

grid-template-areas:

"header"
"sidebar"
"content"
"ads"
"footer";

}

.ads{

display:block;

padding:10px;

}

}

/* DASHBOARD LAYOUT */



/* WIDGET GRID */

.widgets{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.widget.full{
grid-column:1/3;
}


/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
background:#111;
color:white;
flex-wrap:wrap;
}

.header-shortcuts{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.header a{
color:white;
text-decoration:none;
font-weight:500;
}

.header a:hover{
color:#0a58ca;
}


/* SIDEBAR */

.sidebar ul{
list-style:none;
padding:0;
}

.sidebar li{
margin-bottom:8px;
}


/* TABLE */

.table-responsive{
overflow-x:auto;
}

.league-table{
width:100%;
border-collapse:collapse;
}

.league-table th,
.league-table td{
padding:6px;
border-bottom:1px solid #ddd;
}


/* ADS */

.ads{
display:flex;
flex-direction:column;
gap:15px;
}


/* MOBILE */

@media (max-width:900px){

.dashboard{
grid-template-columns:1fr;
display:block;
padding:10px;
}

.sidebar{
order:2;
}

.ads{
order:3;
flex-direction:row;
overflow-x:auto;
}

.widgets{
grid-template-columns:1fr;
}

.widget.full{
grid-column:auto;
}

.header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

}


/* EXTRA SMALL MOBILE */

@media (max-width:480px){

.header-shortcuts a{
font-size:14px;
}

.logo{
font-size:20px;
}

.league-table th,
.league-table td{
font-size:14px;
}

}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 16px;
background:#111;
color:white;
flex-wrap:wrap;
gap:10px;
}

.logo{
font-weight:bold;
font-size:20px;
}

.header-shortcuts{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.header-shortcuts a{
text-decoration:none;
background:#222;
color:white;
padding:6px 10px;
border-radius:6px;
font-size:14px;
white-space:nowrap;
}

.subscribe{
background:#ffb400;
color:black;
font-weight:bold;
}

/* MOBILE MENU */

.mobile-menu{
display:none;
margin:10px 0;
}

.mobile-menu select{
width:100%;
padding:10px;
font-size:16px;
border-radius:6px;
}


/* MOBILE MODE */

@media (max-width:900px){

.sidebar{
display:none;
}

.mobile-menu{
display:block;
}

}

.clickable {
    cursor:pointer;
    transition:0.2s;
}

.clickable:hover {
    transform:scale(1.05);
}
    .player-link {
    color: #fff;
    text-decoration: none;
}