:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f5f7fb;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(22px,calc((100% - 1100px)/2));background:#fff;border-bottom:1px solid #e5e9f2}.brand{font-size:1.25rem;font-weight:800;color:#3157c8;text-decoration:none;letter-spacing:-.04em}.topbar nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.topbar nav a,.link-button{color:#42506a;text-decoration:none;font:inherit;font-size:.92rem}.nav-user{color:#64718a;font-size:.9rem}.nav-form{display:inline;margin:0}.link-button{border:0;background:none;cursor:pointer;padding:0}.container{max-width:1100px;margin:0 auto;padding:38px 22px 56px;min-height:calc(100vh - 130px)}.hero{padding:54px 0 60px;max-width:760px}.eyebrow{color:#3157c8;font-size:.75rem;font-weight:800;letter-spacing:.14em}.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04;letter-spacing:-.055em;margin:12px 0 20px}.lead{font-size:1.15rem;color:#64718a;line-height:1.7;max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;background:#3157c8;color:#fff;text-decoration:none;border:1px solid #3157c8;border-radius:9px;padding:11px 16px;font:inherit;font-weight:700;cursor:pointer}.button:hover{background:#2446a8}.button.secondary{background:#fff;color:#3157c8}.button.full{width:100%}.button.small{padding:9px 13px;font-size:.9rem}.grid{display:grid;gap:16px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card,.auth-card{background:#fff;border:1px solid #e5e9f2;border-radius:14px;padding:22px;box-shadow:0 5px 20px rgba(25,42,80,.025)}.card h2{font-size:1.08rem;margin:0 0 8px}.card p{line-height:1.6}.grid .card p{color:#64718a;margin-bottom:0}.auth-card{max-width:480px;margin:20px auto}.auth-card h1{margin:0 0 8px;font-size:1.8rem}.auth-card form{display:grid;gap:16px;margin:24px 0}.auth-card label,.form-grid label{display:grid;gap:7px;font-weight:650;font-size:.9rem}.auth-card input,.form-grid input,.form-grid select,.form-grid textarea{width:100%;min-width:0;border:1px solid #d7deeb;border-radius:8px;padding:11px 12px;font:inherit;background:#fff;color:#172033}.auth-card input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:3px solid #dce5ff;border-color:#3157c8}.muted{color:#6d7890;font-size:.92rem}

.page-heading h1{margin:5px 0;font-size:2rem;letter-spacing:-.04em}
.page-heading p{margin:6px 0}.application-list{display:grid;gap:14px}.application-card{padding:22px}.app-main{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.app-main h2{font-size:1.15rem;margin:0 0 6px}.app-main p{margin:0}.status{display:inline-block;white-space:nowrap;border-radius:999px;padding:6px 10px;font-size:.77rem;font-weight:750;background:#edf0f7;color:#47536b}.status-submitted{background:#eaf0ff;color:#3157c8}.status-under-review{background:#fff4d8;color:#8a5b00}.status-shortlisted{background:#e5f7ef;color:#16734b}.status-interview-scheduled{background:#e8e8ff;color:#4e46a5}.status-offered,.status-hired{background:#dff7e9;color:#17683f}.status-rejected{background:#ffebeb;color:#ad3030}.notes{margin:16px 0 0;padding:12px;background:#f7f8fc;border-radius:8px;color:#4d5a72}.application-card details{margin-top:18px;border-top:1px solid #edf0f5;padding-top:14px}.application-card summary{cursor:pointer;font-weight:700;font-size:.9rem}.history{padding-left:20px;line-height:1.6}.history li{padding:6px 0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.form-grid .wide{grid-column:1/-1}.form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;border-top:1px solid #edf0f5;padding-top:16px;margin-top:18px}.section{margin-top:32px}.section>h2{font-size:1.35rem}.count{font-size:.85rem;color:#64718a}.empty{text-align:center;padding:44px 22px}.alert{padding:12px 14px;border-radius:9px;margin:0 0 18px;background:#e5f7ef;color:#17683f}.alert.error{background:#ffebeb;color:#ad3030}.alert.info{background:#eaf0ff;color:#3157c8}.footer{text-align:center;color:#8a94a8;font-size:.82rem;padding:20px;border-top:1px solid #e5e9f2;background:#fff}@media(max-width:700px){.grid.three{grid-template-columns:1fr}.container{padding:26px 15px 40px}.topbar{padding:14px 15px}.topbar nav{gap:12px}.nav-user{display:none}.hero{padding:36px 0}.app-main{flex-direction:column}.form-grid,.form-grid.compact{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.card{padding:17px}
.page-heading h1{font-size:1.7rem}}

/* Deployment page: wider deployed-applicant list without widening other pages */
.container:has(.deployed-list-section) {
  max-width: 1600px;
}

.deployed-list-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  background: #fff;
}

.deployed-list-table {
  width: 100%;
  min-width: 1250px;
  border-collapse: collapse;
  background: #fff;
}

.deployed-list-table th,
.deployed-list-table td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #e5e9f2;
  vertical-align: top;
}

.deployed-list-table th {
  background: #f7f8fc;
  color: #42506a;
  font-size: .86rem;
  white-space: nowrap;
}

.deployed-list-table tbody tr:last-child td { border-bottom: 0; }
.deployed-list-table tbody tr:hover { background: #fbfcff; }
.deployed-list-table .nowrap { white-space: nowrap; }
.deployed-list-table .deployment-notes {
  min-width: 180px;
  max-width: 280px;
  overflow-wrap: anywhere;
}
.deployed-list-table td:last-child { min-width: 230px; white-space: nowrap; }

@media (max-width: 700px) {
  .container:has(.deployed-list-section) {
    padding-left: 12px;
    padding-right: 12px;
  }
}


.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 28px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.page-heading > div:first-child {
    flex: 1;
    min-width: 0;
}

.page-heading h1 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.page-heading .eyebrow {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.page-heading .muted {
    margin: 0;
    line-height: 1.6;
}

.page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.page-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    .page-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px;
    }

    .page-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .page-heading {
        padding: 16px;
    }

    .page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions .button {
        width: 100%;
    }
}


/* =========================================
   ADD NEW WORKER PAGE
   ========================================= */

.add-worker-card {
    width: 100%;
    max-width: none;
    margin: 0 auto 32px;
    padding: 32px;
    background: #ffffff;
    border: 1px solid #dbe5f1;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

/* Form field spacing */
.add-worker-card .form-group {
    margin-bottom: 22px;
}

.add-worker-card label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-weight: 600;
}

/* Text fields and textarea */
.add-worker-card input[type="text"],
.add-worker-card input[type="email"],
.add-worker-card input[type="password"],
.add-worker-card textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease;
}

.add-worker-card textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.add-worker-card input:focus,
.add-worker-card textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.add-worker-card small {
    display: block;
    margin-top: 7px;
    color: #64748b;
    line-height: 1.5;
    font-size: 0.85rem;
}

/* Employment details section */
.add-worker-card hr {
    margin: 32px 0 24px;
    border: 0;
    border-top: 1px solid #e2e8f0;
}
.add-worker-card h2 {
    margin: 0 0 10px;
    color: #2563a6;
    font-size: 1.35rem;
    font-weight: 700;
}

.add-worker-card > form > .muted {
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Form buttons */
.add-worker-card .page-actions {
    justify-content: flex-start;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #e2e8f0;
}

.add-worker-card .page-actions .button:first-child {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #ffffff;
}

.add-worker-card .page-actions .button:first-child:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.add-worker-card .page-actions .button:last-child {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.add-worker-card .page-actions .button:last-child:hover {
    background: #e2e8f0;
}

/* Error message */
.add-worker-card .error-message {
    padding: 12px 14px;
    margin-bottom: 22px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    line-height: 1.5;
}

/* Mobile layout */
@media (max-width: 600px) {
    .add-worker-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .add-worker-card .page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .add-worker-card .page-actions .button {
        width: 100%;
    }
}
/* Add New Worker - Heading Card */
.add-worker-heading {
    background: #e8f1ff;
    border: 1px solid #c5d9fa;
    border-radius: 18px;
    padding: 28px 32px;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.06);
}

.add-worker-heading .eyebrow {
    color: #2563a6;
}

.add-worker-heading h1 {
    color: #1e40af;
}

.add-worker-heading .muted {
    color: #526b8a;
}
.add-worker-card h2 {
    color: #2563a6 !important;
}
/* Header Navigation Buttons */
nav a {
    display: inline-block;
    padding: 9px 14px;
    margin: 0 3px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;
}

/* Hover effect */
nav a:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* Log out button */
nav a[href*="logout"] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

nav a[href*="logout"]:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}
/* Mobile Header Navigation */
@media (max-width: 768px) {
    header nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
    }

    header nav > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
        margin: 0;
        border: 1px solid #dbe5f1;
        border-radius: 8px;
        background: #f1f5f9;
        color: #334155;
        text-decoration: none;
        font-size: 14px;
        white-space: normal;
        box-sizing: border-box;
    }

    header nav > a:hover {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
    }

    header nav .nav-form {
        display: inline-flex;
        margin: 0;
    }

    header nav .nav-form .link-button {
        padding: 10px 14px;
        border: 1px solid #fecaca;
        border-radius: 8px;
        background: #fef2f2;
        color: #b91c1c;
        font-size: 14px;
        cursor: pointer;
    }

    header nav .nav-form .link-button:hover {
        background: #dc2626;
        border-color: #dc2626;
        color: #ffffff;
    }
}
/* Force navigation buttons to display on mobile */
@media screen and (max-width: 768px) {
    header nav a,
    header nav .nav-form,
    header nav .nav-form .link-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box;
    }

    header nav a {
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
        background: #f1f5f9;
        border: 1px solid #dbe5f1;
        border-radius: 8px;
        color: #334155;
        text-decoration: none;
    }

    header nav .nav-form .link-button {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 8px;
        color: #b91c1c;
    }
}
/* Desktop Logout Button */
@media (min-width: 769px) {
    header nav .nav-form {
        display: inline-flex;
        margin: 0 3px;
    }

    header nav .nav-form .link-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 14px;
        border: 1px solid #fecaca;
        border-radius: 8px;
        background: #fef2f2;
        color: #b91c1c;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease,
                    color 0.2s ease,
                    border-color 0.2s ease;
    }

    header nav .nav-form .link-button:hover {
        background: #dc2626;
        border-color: #dc2626;
        color: #ffffff;
    }
}
#worker_suggestions {
    width: 500px;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
}
#worker_search {
    width: 450px;
    max-width: 100%;
    box-sizing: border-box;
}
#worker-selector,
#worker-selector input {
    box-sizing: border-box;
    max-width: 100%;
}

#worker-selector {
    min-width: 0;
}
.deployment-heading {
    background: #eaf2ff;
    border: 1px solid #cbdcf5;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
}

.deployment-heading h2 {
    margin: 0;
    color: #234f80;
    font-size: 21px;
    font-weight: 700;
}
.deployment-heading {
    background: #eaf2ff;
    border: 1px solid #cbdcf5;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
    width: 60%;
    box-sizing: border-box;
}

.deployment-heading h2 {
    margin: 0;
    color: #234f80;
    font-size: 21px;
    font-weight: 700;
}
.followup-type-badge {
    display: inline-block;
    background: #e8f1ff;
    color: #24558a;
    border: 1px solid #c8dcf5;
    border-radius: 20px;
    padding: 7px 16px;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}
.followup-type-badge {
    display: inline-block;
    background: #e8f1ff;
    color: #24558a;
    border: 1px solid #c8dcf5;
    border-radius: 20px;
    padding: 7px 16px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.followup-type-badge-UP {
    display: inline-block;
    background: #c9cc09;
    color: #24558a;
    border: 1px solid #c8dcf5;
    border-radius: 20px;
    padding: 7px 16px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}
.followup-type-badge-PAST {
     display: inline-block;
    background: #c9cc09;
    color: #24558a;
    border: 1px solid #c8dcf5;
    border-radius: 20px;
    padding: 7px 16px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}
.worker-suggestion {
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.worker-suggestion:hover {
    background-color: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}