/* 1. Container aur Layout Fix */
.container {
    max-width: 1250px;
    margin: 10px auto;
    display: flex !important;
    gap: 15px;
    align-items: flex-start !important; /* Dono ko top se start karega */
}

.job-main-content {
    flex: 3;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    margin-top: 15px;
}

.short-info-box {
    background-color: #fff9e6; /* Halka sa yellowish/white shade jo aankhon ko acha lage */
    border: 1px dashed #b3b3b3; /* Dashed border professional lagti hai summary ke liye */
    padding: 15px;
    margin: 15px 0;
    font-family: 'Arial', sans-serif;
}

.short-info-box p {
    margin: 0 !important;
    font-size: 15px; /* Thoda bada font size */
    color: #222; /* Ekdum kaala nahi, thoda soft black */
    line-height: 1.8 !important; /* Lines ke beech mein acha gap */
    text-align: justify; /* Text dono side se barabar dikhega */
}

.short-info-box strong {
    color: #c00; /* "Short Information:" likha hua Red color mein aayega */
    font-size: 16px;
    text-transform: uppercase; /* CAPITAL letter mein heading */
}
/* 2. GAP FIXING (Sabse important) */
/* CKEditor har table ke upar aur niche extra space dalta hai, use zero kar rahe hain */
.content-area, .content-area * {
    margin-top: 0 !important;
}

.content-area table, 
.content-area figure.table {
    margin-top: -5px !important; /* Isse table thoda upar chadh jayegi sidebar ke barabar */
}

/* Tables ke beech ki khali jagah (p tags) ko khatam karne ke liye */
/* === EQUAL COLUMN & HEIGHT FIX === */

.content-area table {
    width: 100% !important;
    table-layout: fixed !important; /* Ye sabse important hai columns barabar karne ke liye */
    border-collapse: collapse !important;
    margin: 0 0 0px 0 !important; 
    border: 1px solid #000 !important;
}

/* Table Cells (td aur th) */
.content-area table tr td, 
.content-area table tr th {
    width: auto !important; /* Browser ko auto-calculate karne do barabar hisso mein */
    height: 50px; /* Ek minimum height set kar di taaki box chota na lage */
    background-color: #ffffff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    padding: 10px !important;
    text-align: center;
    font-weight: bold;
    word-wrap: break-word; /* Agar text bada ho toh box se bahar na jaye */
    vertical-align: middle; /* Text hamesha beech mein rahega (Height fix) */
}

/* Pehli Row (Header) Fix */
/* Purana tr:first-child wala code hata kar ye dalo */

/* Har wo row green hogi jisme tum Header set karoge */
.content-area table tr th,
.content-area table thead tr td,
.content-area table tr.table-header { /* Extra safety class */
    background-color: #008c76 !important;
    color: white !important;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding: 10px !important;
    border: 1px solid #000 !important;
}

/* Baaki normal rows white hi rahengi */
.content-area table tr td {
    background-color: #ffffff !important;
    color: #000 !important;
}

/* 4. Sidebar Styling */
.sidebar {
    flex: 1;
    min-width: 300px;
    background: #fff;
    border: 1px solid #008c76;
    margin-top: 15px !important;
    position: -webkit-sticky; /* Safari ke liye */
    position: sticky;
    top: 51px;
}
.sidebar h3 {
    background: #008c76;
    color: white;
    padding: 10px;
    margin: 0;
    text-align: center;
}
.update-link {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #008c76;
    font-weight: bold;
    font-size: 13px;
}

.post-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    color: #008c76;
}



/* Top Grid Boxes */
.top-updates-grid {
    max-width: 1000px;
    margin: 10px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.update-box {
    background: #fff;
    border: 1px solid #000;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    display: flex; /* Text ko center karne ke liye flex behtar hai */
    align-items: center;
    justify-content: center;
    height: 50px;
    overflow: hidden;
    transition: 0.3s;
}

.update-box:hover {
    background-color: #f0f0f0;
    color: #ff0000;
}

/* Main Job Content Container */
.job-main-wrapper {
    max-width: 900px;
    margin: 20px auto;
    border: 2px solid #2c3e50;
    padding: 15px;
    background-color: #fff;
}

.job-main-title {
    color: #d32f2f;
    text-align: center;
    text-decoration: underline;
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.separator-line {
    max-width: 1000px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 10px auto;
}