/* =====================================
   🔥 IMPORT CSS FILES
===================================== */

@import url("./header.css");

@import url("./highlight.css");

@import url("./social.css");

@import url("./filter.css");

@import url("./dataTable.css");

@import url("./leftmenu.css");

@import url("./upcoming.css");

@import url("./ads.css");


/* =====================================
   🔥 RESET
===================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/* =====================================
   🔥 BODY
===================================== */

body{

    background:#EEF2F7;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    color:#111827;

    overflow-x:hidden;

    font-size:14px;

    line-height:1.4;

}


/* =====================================
   🔥 IMAGE
===================================== */

img{

    max-width:100%;

    display:block;

}


/* =====================================
   🔥 LINK
===================================== */

a{

    text-decoration:none;

    color:inherit;

}


/* =====================================
   🔥 MAIN CONTAINER
===================================== */

.container{

    width:100%;

    margin:auto;

}


/* =====================================
   🔥 SECTION SPACING
===================================== */

section{

    margin-bottom:12px;

}


/* =====================================
   🔥 MAIN LAYOUT
===================================== */

.main-layout{

    width:95%;

    margin:12px auto;

    display:grid;

    grid-template-columns:
    22%
    53%
    25%;

    gap:12px;

    align-items:start;

}


/* =====================================
   🔥 CARD COMMON
===================================== */

.card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:14px;

    overflow:hidden;

    box-shadow:
    0 2px 8px rgba(0,0,0,0.04);

}


/* =====================================
   🔥 CARD TITLE
===================================== */

.card-title{

    background:
    linear-gradient(
    135deg,
    #0A2EB8,
    #2453FF
    );

    color:#FFFFFF;

    padding:14px 16px;

    font-size:18px;

    font-weight:700;

}


/* =====================================
   🔥 COMMON TITLE
===================================== */

.section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:12px;

    font-size:18px;

    font-weight:700;

    color:#111827;

}


/* line */

.section-title::after{

    content:"";

    flex:1;

    height:2px;

    background:
    linear-gradient(
    90deg,
    #0A2EB8,
    transparent
    );

    border-radius:10px;

}


/* =====================================
   🔥 CUSTOM SCROLLBAR
===================================== */

::-webkit-scrollbar{

    width:8px;

    height:8px;

}


::-webkit-scrollbar-track{

    background:#E5E7EB;

}


::-webkit-scrollbar-thumb{

    background:#94A3B8;

    border-radius:10px;

}


::-webkit-scrollbar-thumb:hover{

    background:#64748B;

}


/* =====================================
   🔥 TABLET
===================================== */

@media(max-width:991px){

    body{

        font-size:13px;

    }

    .main-layout{

        width:97%;

        grid-template-columns:
        1fr;

        gap:10px;

    }

    .card-title{

        font-size:16px;

        padding:12px 14px;

    }

}


/* =====================================
   🔥 MOBILE
===================================== */

@media(max-width:768px){

    body{

        font-size:12px;

    }

    .container{

        width:100%;

    }

    .main-layout{

        width:100%;

        margin:8px auto;

        padding:0 6px;

        grid-template-columns:1fr;

        gap:8px;

    }

    section{

        margin-bottom:8px;

    }

    .card{

        border-radius:10px;

    }

    .card-title{

        font-size:14px;

        padding:10px 12px;

    }

    .section-title{

        font-size:15px;

        margin-bottom:8px;

    }

}


/* =====================================
   🔥 EXTRA SMALL MOBILE
===================================== */

@media(max-width:420px){

    body{

        font-size:11px;

    }

    .main-layout{

        padding:0 4px;

        gap:6px;

    }

    .card-title{

        font-size:13px;

        padding:9px 10px;

    }

/* =====================================
   🔥 FINAL MOBILE PROFESSIONAL FIX
===================================== */

@media(max-width:768px){

    /* =====================================
       BODY
    ===================================== */

    body{

        overflow-x:hidden;

    }

    /* =====================================
       MAIN WIDTH
    ===================================== */

    .container,
    .main-layout,
    .highlight-container,
    .social-container,
    .filter-box,
    .left-menu,
    .table-container,
    .upcoming-box{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

    }

    /* =====================================
       PREVENT BREAK
    ===================================== */

    *{

        word-break:normal !important;

        overflow-wrap:normal !important;

    }

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

    .menu{

        display:flex !important;

        flex-wrap:nowrap !important;

        overflow-x:auto;

        overflow-y:hidden;

        scrollbar-width:none;

    }

    .menu::-webkit-scrollbar{

        display:none;

    }

    .menu a{

        flex:1 0 auto;

        width:auto !important;

        min-width:max-content;

        white-space:nowrap;

        font-size:3.2vw !important;

        padding:
        3.8vw
        3vw !important;

    }

    /* =====================================
       HEADER
    ===================================== */

    .header h1{

        font-size:10vw !important;

        white-space:nowrap;

    }

    .header p{

        font-size:2.8vw !important;

        white-space:nowrap;

    }

    /* =====================================
       HIGHLIGHT
    ===================================== */

    .highlight-row{

        display:flex;

        align-items:center;

        gap:2vw;

        overflow:hidden;

    }

    .highlight-label{

        min-width:30vw;

        font-size:2.8vw !important;

        white-space:nowrap;

    }

    .highlight-content{

        font-size:2.5vw !important;

        white-space:nowrap;

        overflow:hidden;

    }

    /* =====================================
       SOCIAL
    ===================================== */

    .social-links{

        display:flex !important;

        flex-wrap:nowrap !important;

        gap:2vw !important;

    }

    .social-btn{

        flex:1;

        min-width:0;

        height:10vw !important;

        border-radius:2vw !important;

        font-size:0 !important;

    }

    .social-btn i{

        font-size:4vw !important;

    }

    /* =====================================
       FILTER
    ===================================== */

    .filter-box{

        display:flex !important;

        flex-wrap:nowrap !important;

        gap:1.5vw !important;

        padding:2vw !important;

        overflow:hidden;

    }

    .filter-item{

        flex:1;

        min-width:0;

    }

    .filter-btn{

        height:10vw !important;

        padding:0 1vw !important;

        font-size:2.3vw !important;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    /* =====================================
       TABLE
    ===================================== */

    .job-table th,
    .job-table td{

        font-size:2.7vw !important;

        padding:2vw 1.5vw !important;

        white-space:nowrap;

    }

    /* =====================================
       LEFT MENU
    ===================================== */

    .left-menu a{

        font-size:2.8vw !important;

        padding:2.5vw !important;

        white-space:nowrap;

    }

    /* =====================================
       CARD TITLE
    ===================================== */

    .card-title{

        font-size:4vw !important;

        white-space:nowrap;

    }

}