/*
 * DCJOBS FINAL UI FIX — FULL RESTORE (FILTER FIX INCLUDED)
 */

/* ================= BASE ================= */

*,
*::before,
*::after { box-sizing: border-box; }

body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
    background:#f1f5f9;
    color:#1e293b;
}

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

header{
    background:#1e293b;
    color:#fff;
}

.header-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
}

/* ================= FOOTER ================= */

footer{
    background:#0f172a;
    color:#fff;
    padding:15px;
    text-align:center;
    margin-top:40px;
}

/* ================= DASHBOARD ================= */

.applications-dashboard{
    max-width:1400px;
    margin:auto;
    padding:20px;
}

/* HEADER */
.dashboard-header{
    background:linear-gradient(135deg,#2563EB,#1d4ed8);
    color:#fff;
    padding:25px;
    border-radius:14px;
    text-align:center;
    margin-bottom:20px;
}

.dashboard-header h1{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#fff;
}

.dashboard-header p{
    color:#e0e7ff;
}

/* JOB */
.job-header{
    background:#fff;
    border:2px solid #2563EB;
    border-radius:14px;
    padding:20px;
    margin-bottom:20px;
}

.job-header-title{
    text-align:center;
    font-weight:700;
    margin-bottom:15px;
}

.job-header-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.job-header label{
    display:block;
    color:#2563EB;
    font-weight:600;
    margin-bottom:4px;
}

/* ================= FILTER (FINAL FIX) ================= */

/* ONE ROW CONTAINER */
.filters-wrapper{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}

/* EACH BOX */
.filter-group{
    flex:1;
    background:#fff;
    border:2px solid #2563EB;
    border-radius:14px;
    padding:15px;
}

/* FORCE SINGLE LINE BUTTONS */
.filter-buttons{
    display:flex;
    flex-wrap:nowrap;          /* 🔥 IMPORTANT */
    gap:10px;
    overflow-x:auto;           /* scroll if overflow */
    padding-bottom:5px;
}

/* BUTTON */
.filter-btn{
    padding:6px 14px;
    border-radius:20px;
    background:#e5e7eb;
    border:none;
    cursor:pointer;
    white-space:nowrap;        /* prevent breaking */
    flex-shrink:0;             /* prevent shrinking */
}

.filter-btn.active{
    background:#2563EB;
    color:#fff;
}

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

.applications-layout{
    display:flex;
    gap:20px;
}

/* LEFT */
.talent-summary-panel{
    width:30%;
}

/* RIGHT */
.talent-detail-panel{
    width:70%;
}

/* TALENT CARD */
.talent-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.1);
    overflow:hidden;
}

.talent-card-header{
    background:#2563EB;
    color:#fff;
    padding:10px;
    display:flex;
    justify-content:space-between;
}

.talent-card-body{
    padding:12px;
}

/* PORTFOLIO */
.talent-detail-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.portfolio-header-bar{
    background:#2563EB;
    color:#fff;
    padding:12px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:12px 12px 0 0;
}

/* GRID */
.portfolio-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:20px;
}

.portfolio-item{
    display:flex;
    gap:10px;
}

.portfolio-item label{
    color:#2563EB;
    font-weight:600;
    min-width:120px;
}

.portfolio-item span{
    color:#000;
}

/* BUTTONS */
.action-btn{
    background:#2563EB;
    color:#fff;
    padding:8px 14px;
    border:none;
    border-radius:8px;
    margin-right:8px;
    cursor:pointer;
}

.verify-btn{
    background:#fff;
    border-radius:20px;
    padding:6px 12px;
    border:none;
}

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

@media(max-width:768px){

    .job-header-row{
        grid-template-columns:1fr;
    }

    .applications-layout{
        flex-direction:column;
    }

    .talent-summary-panel,
    .talent-detail-panel{
        width:100%;
    }

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

    /* STACK FILTER BOXES ON MOBILE */
    .filters-wrapper{
        flex-direction:column;
    }

    /* KEEP BUTTONS SCROLLABLE */
    .filter-buttons{
        overflow-x:auto;
    }
}