:root {
    --navy:   #23395d;
    --gold:   #a07840;
    --gold2:  #c9a96e;
    --cream:  #ffffff;
    --white:  #ffffff;
    --light:  #f5f5f5;
    --muted:  #6b7280;
    --border: #cccccc;
    --red:    #b91c1c;
    --green:  #15803d;
    --blue:   #1d4ed8;
    --shadow: 0 4px 24px rgba(13,27,62,0.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body {
    font-family:'DM Sans',sans-serif;
    background: var(--cream);
    color: var(--navy);
    min-height:100vh;
}
a { color: var(--navy); text-decoration:none; }
a:hover { color: var(--gold); }

.topbar {
    background: var(--navy);
    color: var(--gold2);
    padding: 0 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: 64px;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    width:100%;
}
.topbar-brand {
    display:flex;
    align-items:center;
    gap:.9rem;
}
.topbar-brand .logo-ring {
    width:40px;height:40px;
    border:2px solid var(--gold);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-family:'EB Garamond',serif;
    font-size:1.15rem;font-weight:700;
    color:var(--gold);
    overflow:hidden;
    background:var(--white);
}
.topbar-brand .logo-ring img {
    width:100%;height:100%;
    object-fit:contain;
    border-radius:50%;
}
.topbar-brand h1 {
    font-family:'EB Garamond',serif;
    font-size:1.15rem;
    font-weight:600;
    line-height:1.2;
    color:var(--white);
}
.topbar-brand p { font-size:.7rem; color:var(--gold2); letter-spacing:.04em; }
.topbar-right { display:flex; align-items:center; gap:1rem; font-size:.85rem; }
.topbar-right .user-chip {
    background:rgba(200,168,75,.15);
    border:1px solid rgba(200,168,75,.3);
    padding:.3rem .9rem;
    border-radius:2rem;
    color:var(--gold2);
}
.btn-logout {
    background:transparent;
    border:1px solid rgba(200,168,75,.4);
    color:var(--gold2);
    padding:.3rem .9rem;
    border-radius:.3rem;
    cursor:pointer;
    font-size:.8rem;
    transition:all .2s;
}
.btn-logout:hover { background:var(--gold); color:var(--navy); }

.container { width:100%; padding:1.5rem 2rem; }
.page-title {
    font-family:'EB Garamond',serif;
    font-size:1.6rem;
    font-weight:700;
    color:var(--navy);
    margin-bottom:1.5rem;
    padding-bottom:.6rem;
    border-bottom:2px solid var(--gold);
    display:flex;
    align-items:center;
    gap:.6rem;
}
.page-title::before {
    content:'';
    display:inline-block;
    width:6px;height:24px;
    background:var(--gold);
    border-radius:3px;
}

.flash {
    padding:.8rem 1.2rem;
    border-radius:.4rem;
    margin-bottom:1.2rem;
    font-size:.9rem;
    line-height:1.5;
}
.flash-success { background:#dcfce7; border:1px solid #86efac; color:#166534; }
.flash-error   { background:#fee2e2; border:1px solid #fca5a5; color:#991b1b; }

.login-wrap {
    min-height:100vh;
    background: linear-gradient(135deg, #23395d 0%, #2d4a75 60%, #1a2f4a 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:2rem;
}
.login-card {
    background:var(--white);
    border-radius:.8rem;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    width:100%;max-width:440px;
    overflow:hidden;
}
.login-header {
    background: var(--navy);
    padding:2rem;
    text-align:center;
    border-bottom:3px solid var(--gold);
}
.login-header .iet-logo {
    width:60px;height:60px;
    border:3px solid var(--gold);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto .8rem;
    font-family:'EB Garamond',serif;
    font-size:1.5rem;font-weight:700;
    color:var(--gold);
    overflow:hidden;
    background:var(--white);
}
.login-header .iet-logo img {
    width:100%;height:100%;
    object-fit:contain;
    border-radius:50%;
}
.login-header h2 {
    font-family:'EB Garamond',serif;
    color:var(--white);
    font-size:1.4rem;
    margin-bottom:.2rem;
}
.login-header p { color:var(--gold2); font-size:.8rem; }

.login-body { padding:2rem; }
.tab-row {
    display:flex;
    border:1px solid var(--border);
    border-radius:.4rem;
    overflow:hidden;
    margin-bottom:1.5rem;
}
.tab-btn {
    flex:1;
    padding:.65rem;
    border:none;
    background:var(--light);
    color:var(--muted);
    cursor:pointer;
    font-family:'DM Sans',sans-serif;
    font-size:.9rem;
    transition:all .2s;
}
.tab-btn.active { background:var(--navy); color:var(--gold2); font-weight:500; }

.card {
    background:var(--white);
    border-radius:.6rem;
    box-shadow:var(--shadow);
    padding:1.8rem;
    margin-bottom:1.5rem;
}
.card-title {
    font-family:'EB Garamond',serif;
    font-size:1.1rem;
    font-weight:700;
    color:var(--navy);
    margin-bottom:1.2rem;
    padding-bottom:.5rem;
    border-bottom:1px solid var(--border);
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
    gap:1rem 1.2rem;
}
@media (min-width:900px) {
    .form-grid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1400px) {
    .form-grid { grid-template-columns:repeat(5,1fr); }
}
.form-group { display:flex; flex-direction:column; gap:.3rem; }
.form-group label {
    font-size:.8rem;
    font-weight:600;
    color:var(--navy);
    letter-spacing:.02em;
    text-transform:uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding:.55rem .85rem;
    border:1px solid var(--border);
    border-radius:.35rem;
    font-family:'DM Sans',sans-serif;
    font-size:.92rem;
    color:var(--navy);
    background:var(--white);
    transition:border-color .2s;
    width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(200,168,75,.15);
}
.form-group input[readonly] {
    background: var(--light);
    color: var(--muted);
    cursor:default;
}
.form-group .hint { font-size:.75rem; color:var(--muted); }
.form-full { grid-column:1/-1; }

.btn {
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.55rem 1.2rem;
    border-radius:.35rem;
    border:none;
    font-family:'DM Sans',sans-serif;
    font-size:.88rem;
    font-weight:500;
    cursor:pointer;
    transition:all .2s;
    text-decoration:none;
}
.btn-primary   { background:var(--navy); color:var(--gold2); }
.btn-primary:hover { background:#1e3050; color:var(--gold2); }
.btn-gold      { background:var(--gold); color:var(--navy); }
.btn-gold:hover { background:var(--gold2); }
.btn-save-toggle { background:#16a34a; color:#ffffff; }
.btn-save-toggle:hover { background:#15803d; color:#ffffff; }
.btn-sm        { padding:.35rem .8rem; font-size:.8rem; }
.btn-approve   { background:#dcfce7; color:var(--green); border:1px solid #86efac; }
.btn-approve:hover { background:#bbf7d0; }
.btn-reject    { background:#fee2e2; color:var(--red); border:1px solid #fca5a5; }
.btn-reject:hover { background:#fecaca; }
.btn-pdf       { background:#eff6ff; color:var(--blue); border:1px solid #bfdbfe; }
.btn-pdf:hover { background:#dbeafe; }
.btn-view      { background:#f3f4f6; color:var(--navy); border:1px solid var(--border); }
.btn-view:hover { background:var(--light); }
.btn-noc       { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.btn-noc:hover { background:#fde68a; }
.inline-actions {
    display:flex;
    align-items:center;
    gap:.6rem;
    flex-wrap:wrap;
}
.locked-field {
    background:#f8f8f8 !important;
    color:var(--muted);
}

.table-wrap { overflow-x:auto; width:100%; }
table { width:100%; border-collapse:collapse; font-size:.82rem; }
thead tr { background:#ffffff; color:#000000; border-bottom: 2px solid #000000; }
thead th { padding:.65rem .75rem; text-align:left; font-weight:600; white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
tbody tr:hover { background:var(--light); }
tbody td { padding:.6rem .75rem; vertical-align:middle; }
.section-status-row td {
    padding:.45rem .75rem .7rem;
    background:#fbfcfe;
    border-top:0;
}
.section-status-line {
    display:block;
    font-size:.74rem;
    color:var(--muted);
}
.section-status-title {
    font-weight:700;
    color:var(--navy);
    margin-bottom:.55rem;
    display:block;
}
.section-milestones {
    display:flex;
    align-items:flex-start;
    width:100%;
    max-width:860px;
}
.section-milestone {
    position:relative;
    flex:1 1 0;
    min-width:84px;
    text-align:center;
    padding-top:1.15rem;
}
.section-milestone::before {
    content:"";
    position:absolute;
    top:.31rem;
    left:0;
    right:0;
    height:2px;
    background:#d1d5db;
}
.section-milestone:first-child::before { left:50%; }
.section-milestone:last-child::before { right:50%; }
.section-milestone-label {
    display:block;
    font-size:.68rem;
    line-height:1.25;
    color:var(--muted);
    padding:0 .18rem;
}
.section-dot {
    width:.62rem;
    height:.62rem;
    border-radius:50%;
    display:block;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
    box-shadow:0 0 0 2px rgba(255,255,255,.95), 0 0 0 3px rgba(15,23,42,.08);
}
.section-dot-complete { background:var(--green); }
.section-dot-incomplete { background:var(--red); }
.section-dot-pending { background:#f59e0b; }
.section-status-legend {
    margin-top:.55rem;
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
}
.section-status-legend span {
    display:inline-flex;
    align-items:center;
    gap:.28rem;
}
.section-status-legend .section-dot {
    position:static;
    transform:none;
    display:inline-block;
}
.actions-cell { display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; }
.badge {
    display:inline-block;
    padding:.2rem .7rem;
    border-radius:2rem;
    font-size:.75rem;
    font-weight:600;
}
.badge-pending  { background:#fef3c7; color:#92400e; }
.badge-approved { background:#dcfce7; color:var(--green); }
.badge-rejected { background:#fee2e2; color:var(--red); }

.pwd-banner {
    background:linear-gradient(90deg,#fef3c7,#fde68a);
    border:1px solid #fcd34d;
    border-radius:.5rem;
    padding:1rem 1.4rem;
    margin-bottom:1.5rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.pwd-banner p { font-size:.9rem; color:#78350f; }
.modal-overlay {
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);
    z-index:1000;
    align-items:center;justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal-box {
    background:var(--white);
    border-radius:.7rem;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    width:100%;max-width:400px;
    padding:2rem;
}
.modal-box h3 {
    font-family:'EB Garamond',serif;
    font-size:1.25rem;
    color:var(--navy);
    margin-bottom:1.2rem;
}
.modal-message {
    color:var(--muted);
    font-size:.92rem;
    line-height:1.5;
    margin-bottom:1.4rem;
}
.modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:.7rem;
    flex-wrap:wrap;
}

.filter-bar {
    display:flex;
    gap:.8rem;
    flex-wrap:wrap;
    align-items:flex-end;
    margin-bottom:1.2rem;
    background:var(--light);
    padding:1rem 1.2rem;
    border-radius:.5rem;
    border:1px solid var(--border);
}
.filter-bar select {
    padding:.45rem .8rem;
    border:1px solid var(--border);
    border-radius:.35rem;
    font-family:'DM Sans',sans-serif;
    font-size:.88rem;
    background:var(--white);
    min-width:160px;
}
.detail-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem 1rem;
    font-size:.88rem;
}
.detail-grid .key { color:var(--muted); font-weight:500; }
.detail-grid .val { font-weight:600; color:var(--navy); }

.group-course-header {
    background: #ffffff;
    color: #000000;
    font-family:'EB Garamond',serif;
    font-size:1rem;
    font-weight:700;
    padding:.6rem 1rem;
    margin-top:1.2rem;
    border-radius:.4rem .4rem 0 0;
    letter-spacing:.03em;
    border: 1px solid #cccccc;
    border-bottom: none;
    display:flex;
    align-items:center;
    gap:.5rem;
}
.group-branch-header {
    background: #f5f5f5;
    color: #000000;
    font-size:.82rem;
    font-weight:700;
    padding:.45rem 1rem .45rem 1.5rem;
    border-left:4px solid var(--gold);
    text-transform:uppercase;
    letter-spacing:.06em;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.group-count {
    font-size:.75rem;
    font-weight:500;
    background:var(--gold);
    color:var(--navy);
    padding:.15rem .55rem;
    border-radius:2rem;
}
.group-table-wrap {
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 .4rem .4rem;
    overflow:hidden;
    margin-bottom:.2rem;
}

.reject-modal-overlay {
    display:none;
    position:fixed;inset:0;
    background:rgba(13,27,62,.55);
    z-index:2000;
    align-items:center;justify-content:center;
}
.reject-modal-overlay.open { display:flex; }
.reject-modal-box {
    background:var(--white);
    border-radius:.7rem;
    box-shadow:0 24px 64px rgba(0,0,0,.35);
    width:100%;max-width:400px;
    overflow:hidden;
    animation:popIn .18s ease;
}
@keyframes popIn {
    from { transform:scale(.94); opacity:0; }
    to   { transform:scale(1);   opacity:1; }
}
.reject-modal-header {
    background:#fee2e2;
    border-bottom:2px solid #fca5a5;
    padding:.9rem 1.4rem;
    display:flex;align-items:center;gap:.6rem;
}
.reject-modal-header h3 {
    font-family:'EB Garamond',serif;
    font-size:1.15rem;
    color:#991b1b;
    margin:0;
}
.approve-modal-header {
    background:#dcfce7;
    border-bottom:2px solid #86efac;
}
.approve-modal-header h3 {
    color:#166534;
}
.application-status-tabs {
    display:flex;
    gap:.7rem;
    margin:1rem 0;
    overflow-x:auto;
}
.application-status-tab {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    min-width:120px;
    justify-content:center;
    padding:.65rem 1.1rem;
    border:1px solid #cbd5e1;
    border-radius:.45rem;
    background:#fff;
    color:var(--navy);
    text-decoration:none;
    font-size:.86rem;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(15,23,42,.08);
    transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
.application-status-tab span { background:#e5e7eb;color:var(--navy);border-radius:1rem;padding:.08rem .48rem;font-size:.72rem; }
.application-status-tab:hover { background:#f8fafc;color:var(--navy);border-color:#94a3b8;box-shadow:0 3px 7px rgba(15,23,42,.12);transform:translateY(-1px); }
.application-status-tab.active { background:var(--navy);border-color:var(--navy);color:var(--gold2);box-shadow:0 3px 7px rgba(15,23,42,.18); }
.application-status-tab.active span { background:var(--gold); }
.add-company-button {
    background:#15803d;
    border:1px solid #15803d;
    color:#fff;
}
.add-company-button:hover,
.add-company-button:focus {
    background:#166534;
    border-color:#166534;
    color:#fff;
}
.reject-modal-body { padding:1.4rem; }
.report-filter-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.8rem 1rem;
}
.report-filter-grid label, .exam-filter-grid label {
    font-size:.78rem;font-weight:600;display:block;margin-bottom:.3rem;color:var(--navy);
}
.report-filter-grid select, .exam-filter-grid select {
    width:100%;padding:.5rem .7rem;border:1px solid var(--border);border-radius:.35rem;font-size:.88rem;background:var(--cream);color:var(--navy);
}
.exam-filter-grid { display:grid;gap:1rem; }
.report-hint { margin-top:1rem;padding:.7rem;background:#fef3c7;border:1px solid #fcd34d;border-radius:.35rem;font-size:.78rem;color:#92400e; }
@media (max-width: 700px) {
    .report-filter-grid { grid-template-columns:1fr; }
}
.reject-info-row {
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    margin-bottom:1rem;
}
.reject-info-field { display:flex;flex-direction:column;gap:.2rem; }
.reject-info-field label {
    font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--muted);
}
.reject-info-field input {
    padding:.4rem .7rem;
    border:1px solid var(--border);
    border-radius:.3rem;
    background:var(--light);
    color:var(--muted);
    font-size:.88rem;
    font-family:'DM Sans',sans-serif;
}
.reject-reason-label {
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--navy);
    display:block;margin-bottom:.4rem;
}
.reject-reason-box {
    width:3in;
    height:1.5in;
    max-width:100%;
    resize:none;
    border:1.5px solid #fca5a5;
    border-radius:.35rem;
    padding:.55rem .75rem;
    font-family:'DM Sans',sans-serif;
    font-size:.9rem;
    color:var(--navy);
    background:#fff8f8;
    display:block;
    transition:border-color .2s, box-shadow .2s;
}
.reject-reason-box:focus {
    outline:none;
    border-color:#f87171;
    box-shadow:0 0 0 3px rgba(248,113,113,.18);
}
.reject-modal-footer {
    display:flex;gap:.7rem;justify-content:flex-end;
    padding:1rem 1.4rem;
    border-top:1px solid var(--border);
    background:#fafaf8;
}
.copyright-bar {
    text-align:center;
    padding:.7rem 1rem;
    font-size:.75rem;
    color:var(--muted);
    border-top:1px solid var(--border);
    background:var(--light);
    margin-top:2rem;
}
.copyright-bar strong { color:var(--navy); font-weight:600; }
</style>
</head>
@keyframes uiSlideIn {
  from { opacity:0; transform:translateY(-18px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
#offerLetterWarningModal.open {
  display:flex !important;
  align-items:center;
  justify-content:center;
}