/* ==========================================================
   Local Factory Job Portal — Design System
   Palette: steel navy / safety yellow / concrete grey
   Type: Oswald (display, condensed industrial) + Work Sans (body)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
    --navy: #16232E;
    --navy-2: #1F3244;
    --yellow: #F2B705;
    --yellow-dark: #C8930A;
    --grey-bg: #EFEDE7;
    --card: #FFFFFF;
    --ink: #202426;
    --ink-soft: #5B6570;
    --line: #DDD9CF;
    --green: #2E7D4F;
    --red: #B3412C;
    --radius: 6px;
    --shadow: 0 2px 10px rgba(22,35,46,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    background:var(--grey-bg);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.55;
}
h1,h2,h3,h4{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin:0 0 0.5em;
    color:var(--navy);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1160px; margin:0 auto; padding:0 20px;}

/* Hazard stripe divider - signature element */
.hazard-stripe{
    height:8px;
    background:repeating-linear-gradient(135deg, var(--yellow) 0 18px, var(--navy) 18px 36px);
}

/* ---------------- Header ---------------- */
.site-header{
    background:var(--navy);
    color:#fff;
    position:sticky; top:0; z-index:50;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.site-header .inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px;
}
.logo{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:1.5rem;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:0.02em;
    display:flex; align-items:center; gap:8px;
}
.logo span{color:var(--yellow);}
.nav-links{display:flex; align-items:center; gap:26px; font-weight:500;}
.nav-links a{opacity:0.9; font-size:0.95rem;}
.nav-links a:hover{opacity:1; color:var(--yellow);}
.nav-cta{display:flex; gap:10px;}

/* ---------------- Buttons ---------------- */
.btn{
    display:inline-block;
    padding:11px 22px;
    border-radius:var(--radius);
    font-weight:600;
    font-size:0.95rem;
    border:2px solid transparent;
    cursor:pointer;
    transition:all .15s ease;
}
.btn-primary{background:var(--yellow); color:var(--navy); border-color:var(--yellow);}
.btn-primary:hover{background:var(--yellow-dark); border-color:var(--yellow-dark);}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,0.4);}
.btn-outline:hover{border-color:#fff;}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:var(--navy-2);}
.btn-block{width:100%; text-align:center;}
.btn-sm{padding:7px 14px; font-size:0.85rem;}
.btn-danger{background:var(--red); color:#fff;}

/* ---------------- Hero ---------------- */
.hero{
    background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color:#fff;
    padding:70px 0 90px;
    position:relative;
}
.hero.hero-photo{
    background:
        linear-gradient(160deg, rgba(22,35,46,0.93) 0%, rgba(31,50,68,0.88) 55%, rgba(22,35,46,0.75) 100%),
        url('../images/hero-umargaon.jpg');
    background-size:cover;
    background-position:center 20%;
    min-height:620px;
}
.hero .local-tag{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(242,183,5,0.14);
    border:1px solid rgba(242,183,5,0.4);
    color:var(--yellow);
    font-size:0.8rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.06em;
    padding:6px 14px; border-radius:30px;
    margin-bottom:18px;
}
.hero h1{
    color:#fff;
    font-size:3rem;
    line-height:1.1;
    max-width:680px;
}
.hero h1 em{color:var(--yellow); font-style:normal;}
.hero p{color:#C9D2D9; font-size:1.1rem; max-width:560px; margin-bottom:28px;}
.hero-stats{display:flex; gap:40px; margin-top:40px; flex-wrap:wrap;}
.hero-stats div strong{display:block; font-family:'Oswald',sans-serif; font-size:2rem; color:var(--yellow);}
.hero-stats div span{color:#C9D2D9; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em;}

/* Search bar */
.search-box{
    background:#fff;
    border-radius:var(--radius);
    padding:10px;
    display:flex;
    gap:10px;
    max-width:640px;
    box-shadow:var(--shadow);
    margin-top:30px;
    flex-wrap:wrap;
}
.search-box input, .search-box select{
    flex:1;
    min-width:150px;
    border:none;
    padding:12px 14px;
    font-family:inherit;
    font-size:0.95rem;
    color:var(--ink);
    outline:none;
}

/* ---------------- Sections ---------------- */
section{padding:60px 0;}
.section-title{text-align:center; margin-bottom:8px;}
.section-sub{text-align:center; color:var(--ink-soft); margin-bottom:40px;}

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

/* ---------------- Job Ticket Card (signature element) ---------------- */
.job-card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    position:relative;
    padding:22px 22px 18px;
    border-left:5px solid var(--yellow);
    display:flex;
    flex-direction:column;
    gap:10px;
}
.job-card .job-type-tag{
    position:absolute;
    top:18px; right:-1px;
    background:var(--navy);
    color:var(--yellow);
    font-family:'Oswald',sans-serif;
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:4px 12px;
    border-radius:4px 0 0 4px;
}
.job-card h3{font-size:1.2rem; margin-bottom:2px; padding-right:90px;}
.job-card .factory-name{color:var(--ink-soft); font-weight:600; font-size:0.9rem;}
.job-card .meta{
    display:flex; flex-wrap:wrap; gap:8px 16px;
    font-size:0.85rem; color:var(--ink-soft);
    border-top:1px dashed var(--line);
    padding-top:10px; margin-top:6px;
}
.job-card .meta span{display:flex; align-items:center; gap:5px;}
.job-card .apply-row{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.job-card .salary{font-weight:700; color:var(--green); font-family:'Oswald',sans-serif;}

/* ---------------- Save/bookmark button ---------------- */
.save-btn{
    width:32px; height:32px; border-radius:50%;
    background:#fff; border:1px solid var(--line);
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.save-btn svg{width:15px; height:15px; stroke:var(--navy); fill:none; stroke-width:2;}
.save-btn.saved svg{fill:var(--yellow); stroke:var(--yellow-dark);}
.apply-row-actions{display:flex; align-items:center; gap:8px;}

/* ---------------- Pagination ---------------- */
.pagination{display:flex; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap;}
.pagination a{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:38px; height:38px; padding:0 8px;
    border-radius:6px; border:1px solid var(--line);
    background:#fff; color:var(--navy); font-weight:600; font-size:0.9rem;
}
.pagination a:hover{border-color:var(--yellow);}
.pagination a.active{background:var(--navy); color:var(--yellow); border-color:var(--navy);}

/* ---------------- Category chips ---------------- */
.category-chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.category-chip{
    background:#fff; border:1px solid var(--line); color:var(--navy);
    padding:9px 18px; border-radius:30px; font-weight:600; font-size:0.88rem;
}
.category-chip:hover{border-color:var(--yellow); background:var(--grey-bg);}

/* ---------------- Star Rating ---------------- */
.star-rating{display:inline-flex; align-items:center; gap:2px;}
.star-rating svg{width:15px; height:15px;}
.star-rating svg.star-filled{fill:var(--yellow-dark);}
.star-rating svg.star-empty{fill:var(--line);}
.star-count{margin-left:6px; font-size:0.82rem; color:var(--ink-soft); font-weight:600;}

.star-input{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:6px; font-size:2rem; cursor:pointer;}
.star-input input{display:none;}
.star-input label{color:var(--line); transition:color .1s;}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label{color:var(--yellow-dark);}

/* ---------------- Response badge ---------------- */
.response-badge{
    display:inline-flex; align-items:center; gap:4px;
    background:#FCF3D9; color:var(--yellow-dark);
    font-size:0.78rem; font-weight:700;
    padding:3px 10px; border-radius:20px;
}

/* ---------------- Review card ---------------- */
.review-card{
    background:#fff; border:1px solid var(--line); border-radius:6px;
    padding:16px 18px; margin-bottom:12px;
}
.review-card .review-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.review-card .review-author{font-weight:700; font-size:0.92rem;}
.review-card .review-date{font-size:0.78rem; color:var(--ink-soft);}
.review-card p{margin:6px 0 0; font-size:0.92rem; color:var(--ink);}

/* ---------------- Profile / Employee card ---------------- */
.profile-card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;
    text-align:center;
}
.profile-card img.avatar{
    width:80px; height:80px; border-radius:50%;
    object-fit:cover; margin:0 auto 12px;
    border:3px solid var(--yellow);
}
.profile-card .skills{
    display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:10px 0;
}
.tag{
    background:var(--grey-bg);
    color:var(--navy);
    font-size:0.78rem;
    font-weight:600;
    padding:4px 10px;
    border-radius:20px;
    border:1px solid var(--line);
}

/* ---------------- Verified badge ---------------- */
.verified-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:#E7F1FB;
    color:#1D6FB8;
    font-size:0.72rem;
    font-weight:700;
    padding:2px 9px 2px 7px;
    border-radius:20px;
    margin-left:6px;
    vertical-align:middle;
}
.verified-badge svg{width:11px; height:11px; flex-shrink:0;}

/* ---------------- Advanced Worker Profile ---------------- */
.completeness-wrap{background:#fff; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); margin-bottom:22px; border-top:5px solid var(--yellow);}
.completeness-label{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:0.85rem;}
.completeness-label span{color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; font-weight:600;}
.completeness-label strong{font-family:'Oswald',sans-serif; font-size:1.2rem; color:var(--navy);}
.completeness-track{height:10px; background:var(--grey-bg); border-radius:20px; overflow:hidden;}
.completeness-fill{height:100%; border-radius:20px; transition:width 0.3s ease;}
.completeness-hint{font-size:0.82rem; color:var(--ink-soft); margin:8px 0 0;}

.profile-tabs{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:24px; border-bottom:2px solid var(--line);}
.profile-tabs a{padding:10px 16px; font-size:0.88rem; font-weight:600; color:var(--ink-soft); border-bottom:3px solid transparent; margin-bottom:-2px;}
.profile-tabs a:hover{color:var(--navy);}
.profile-tabs a.active{color:var(--navy); border-bottom-color:var(--yellow);}

.section-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:20px;}
.section-card h3{font-size:1rem; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between;}

.entry-row{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px; position:relative;}
.entry-row .entry-title{font-weight:700; color:var(--navy); font-size:0.95rem;}
.entry-row .entry-sub{color:var(--ink-soft); font-size:0.85rem; margin-top:2px;}
.entry-row .entry-desc{font-size:0.88rem; margin-top:8px; color:var(--ink);}
.entry-row .entry-delete{position:absolute; top:14px; right:14px; color:var(--red); font-size:0.8rem; font-weight:600;}
.entry-row .entry-delete:hover{text-decoration:underline;}
.empty-hint{color:var(--ink-soft); font-size:0.9rem; padding:14px 0;}

.skill-chip{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--grey-bg); border:1px solid var(--line); border-radius:20px;
    padding:6px 12px 6px 14px; font-size:0.85rem; font-weight:600; color:var(--navy);
    margin:0 8px 8px 0;
}
.skill-chip .prof-dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.skill-chip .entry-delete{position:static; margin-left:4px; color:var(--red); font-weight:700;}

.timeline{position:relative; padding-left:22px;}
.timeline::before{content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line);}
.timeline .entry-row{margin-left:0;}
.timeline .entry-row::before{content:''; position:absolute; left:-22px; top:20px; width:11px; height:11px; border-radius:50%; background:var(--yellow); border:2px solid var(--navy);}

.portfolio-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.portfolio-item{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; position:relative;}
.portfolio-item img{width:100%; height:130px; object-fit:cover;}
.portfolio-item .portfolio-caption{padding:10px 12px;}
.portfolio-item .portfolio-caption strong{font-size:0.85rem; display:block;}
.portfolio-item .portfolio-caption p{font-size:0.78rem; color:var(--ink-soft); margin:4px 0 0;}
.portfolio-item .entry-delete{position:absolute; top:8px; right:8px; background:rgba(255,255,255,0.9); padding:2px 8px; border-radius:20px; font-size:0.72rem;}

.cert-row{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px;}
.cert-row .cert-icon{width:38px; height:38px; background:var(--navy); color:var(--yellow); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-right:12px;}
.cert-row .cert-info{flex:1;}
.cert-row .cert-info strong{font-size:0.9rem; display:block;}
.cert-row .cert-info span{font-size:0.8rem; color:var(--ink-soft);}

.id-verify-box{border:1px dashed var(--line); border-radius:var(--radius); padding:18px; background:var(--grey-bg);}

/* ---------------- Trust badges ---------------- */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.trust-item{text-align:center; padding:10px;}
.trust-item .icon{
    width:56px; height:56px; border-radius:50%;
    background:var(--navy); color:var(--yellow);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px; font-size:1.5rem;
}
.trust-item h4{font-size:1rem; margin-bottom:6px;}
.trust-item p{font-size:0.88rem; color:var(--ink-soft); margin:0;}

/* ---------------- WhatsApp ---------------- */
.btn-whatsapp{
    display:inline-flex; align-items:center; gap:8px;
    background:#25D366; color:#fff;
    padding:11px 22px; border-radius:var(--radius);
    font-weight:600; font-size:0.95rem; border:none;
}
.btn-whatsapp:hover{background:#1EBE57;}
.btn-whatsapp svg{width:18px; height:18px; fill:#fff; flex-shrink:0;}

.whatsapp-float{
    position:fixed; bottom:24px; right:24px; z-index:60;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    transition:transform .15s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:30px; height:30px; fill:#fff;}
@media(max-width:860px){
    .whatsapp-float{bottom:16px; right:16px; width:52px; height:52px;}
}

/* ---------------- Forms ---------------- */
.form-wrap{
    background:var(--card);
    max-width:560px;
    margin:40px auto;
    padding:36px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border-top:5px solid var(--yellow);
}
.form-wrap.wide{max-width:820px;}
.form-group{margin-bottom:18px;}
label{display:block; font-weight:600; margin-bottom:6px; font-size:0.9rem;}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=file], select, textarea{
    width:100%;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:4px;
    font-family:inherit;
    font-size:0.95rem;
    background:#fff;
}
textarea{resize:vertical; min-height:110px;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--yellow); border-color:var(--yellow);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-note{text-align:center; margin-top:16px; font-size:0.9rem; color:var(--ink-soft);}
.error-box{background:#FBEAE6; color:var(--red); padding:12px 16px; border-radius:4px; margin-bottom:18px; font-size:0.9rem; border:1px solid #E8C4BB;}
.success-box{background:#E7F4EC; color:var(--green); padding:12px 16px; border-radius:4px; margin-bottom:18px; font-size:0.9rem; border:1px solid #BFE0CC;}

/* ---------------- Dashboard ---------------- */
.dash-shell{display:flex; min-height:calc(100vh - 70px);}
.sidebar{
    width:230px; background:var(--navy); color:#fff; padding:26px 0; flex-shrink:0;
}
.sidebar a{
    display:block; padding:12px 26px; color:#C9D2D9; font-weight:500; font-size:0.92rem;
    border-left:3px solid transparent;
}
.sidebar a:hover, .sidebar a.active{background:var(--navy-2); color:#fff; border-left-color:var(--yellow);}
.dash-main{flex:1; padding:36px; max-width:100%;}
.stat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-bottom:32px;}
.stat-card{background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border-top:4px solid var(--yellow);}
.stat-card strong{display:block; font-family:'Oswald',sans-serif; font-size:2rem; color:var(--navy);}
.stat-card span{color:var(--ink-soft); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em;}

table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden;}
table th, table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:0.9rem;}
table th{background:var(--navy); color:#fff; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.05em;}
.badge{padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:700; text-transform:uppercase;}
.badge-open{background:#E7F4EC; color:var(--green);}
.badge-closed{background:#F0E8E6; color:var(--red);}
.badge-pending{background:#FCF3D9; color:var(--yellow-dark);}

/* ---------------- Footer ---------------- */
footer{background:var(--navy); color:#9FADB8; padding:40px 0 24px; margin-top:60px;}
footer .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-bottom:30px;}
footer h4{color:#fff; font-size:1rem;}
footer a{color:#9FADB8; display:block; margin-bottom:8px; font-size:0.9rem;}
footer a:hover{color:var(--yellow);}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1); padding-top:18px; text-align:center; font-size:0.82rem;}
.dash-foot-bottom{text-align:center; padding:20px 0; color:var(--ink-soft); font-size:0.8rem;}

/* ---------------- Print styles (application/profile print views) ---------------- */
@media print {
    .site-header, .hazard-stripe, .sidebar, footer, .whatsapp-float, .no-print { display:none !important; }
    .dash-shell { display:block !important; }
    .dash-main { padding:0 !important; max-width:100% !important; }
    body { background:#fff !important; }
    .section-card { box-shadow:none !important; border:1px solid var(--line) !important; page-break-inside:avoid; }
    .print-only { display:block !important; }
}

/* ---------------- Feature Discovery Grid ---------------- */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    margin-top:30px;
}
.feature-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px 22px;
    box-shadow:var(--shadow);
    transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position:relative;
    overflow:hidden;
}
.feature-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(22,35,46,0.14);
    border-color:var(--yellow);
}
.feature-card .feature-icon{
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    background:var(--navy);
    color:var(--yellow);
    border-radius:8px;
    font-size:1.4rem;
    margin-bottom:16px;
}
.feature-card.accent .feature-icon{background:var(--yellow); color:var(--navy);}
.feature-card h4{font-size:1.05rem; margin-bottom:8px;}
.feature-card p{color:var(--ink-soft); font-size:0.9rem; margin-bottom:16px; min-height:42px;}
.feature-card .feature-link{
    color:var(--navy); font-weight:600; font-size:0.88rem;
    display:inline-flex; align-items:center; gap:6px;
}
.feature-card .feature-link:hover{color:var(--yellow-dark);}
.feature-card .feature-badge{
    position:absolute; top:16px; right:16px;
    background:var(--green); color:#fff;
    font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    padding:3px 9px; border-radius:20px;
}
.feature-card .feature-badge.free{background:var(--yellow); color:var(--navy);}

/* ---------------- Responsive ---------------- */
@media(max-width:960px) and (min-width:861px){
    .feature-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
    .grid-3, .grid-2, .form-row, footer .foot-grid, .trust-grid, .feature-grid{grid-template-columns:1fr;}
    .nav-links{display:none;}
    .hero h1{font-size:2.1rem;}
    .dash-shell{flex-direction:column;}
    .sidebar{width:100%; display:flex; overflow-x:auto; padding:10px;}
    .sidebar a{padding:10px 16px; white-space:nowrap; border-left:none; border-bottom:3px solid transparent;}
    .sidebar a.active{border-left:none; border-bottom-color:var(--yellow);}
}