/* Compact workspace shared by candidate and corporate portals. */
.career-system.role-candidate,
.career-system.role-corporate {
    --navy: #202c43;
    --navy-mid: #5e5bc8;
    --navy-soft: #f0effb;
    --gold: #d6a44a;
    --gold-soft: #fbf3e5;
    --cream: #faf9f7;
    --border: #e5e7eb;
    --ink: #273247;
    --muted: #647386;
    --shadow: 0 1px 2px rgba(39, 50, 71, .035), 0 8px 22px rgba(39, 50, 71, .04);
    --mdb-navy: #202c43;
    --mdb-navy-2: #34405a;
    --mdb-navy-3: #5e5bc8;
    --mdb-blue: #4a82c4;
    --mdb-blue-dark: #5e5bc8;
    --mdb-green: #28a99a;
    --mdb-gold: #d6a44a;
    --mdb-gold-dark: #987329;
    --mdb-gold-soft: #fbf3e5;
    --mdb-cream: #faf9f7;
    --mdb-paper: #fff;
    --mdb-ink: #273247;
    --mdb-muted: #647386;
    --mdb-line: #e5e7eb;
    --mdb-shadow: 0 1px 2px rgba(39, 50, 71, .035), 0 8px 22px rgba(39, 50, 71, .04);
    --mdb-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Avenir Next", sans-serif;
    --mdb-font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Avenir Next", sans-serif;
    color: #273247;
    background: #faf9f7;
    font-family: var(--mdb-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}
.career-shell {
    --shell-ink: #273247;
    --shell-muted: #647386;
    --shell-line: #e5e7eb;
    --shell-primary: #5e5bc8;
    --shell-primary-dark: #4b48ae;
    --shell-soft: #f0effb;
    --shell-teal: #28a99a;
    --shell-coral: #e78371;
    --shell-amber: #d6a44a;
    --shell-surface: #fff;
    --shell-shadow: 0 1px 2px rgba(39, 50, 71, .035), 0 8px 22px rgba(39, 50, 71, .04);
    min-height: 100vh;
    color: var(--shell-ink);
    background: #faf9f7;
}

/* The dark navigation stays visually light: no thick framing or filled icons. */
.career-shell .career-sidebar {
    width: 264px;
    padding: 18px 15px 15px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #202c43;
    background-image:
        url('../images/aceh-corner-motif-light.svg?v=2026092703'),
        radial-gradient(ellipse 110% 34% at 4% 0%, rgba(116, 113, 207, .16), transparent 76%),
        radial-gradient(ellipse 105% 32% at 100% 100%, rgba(40, 169, 154, .10), transparent 78%),
        linear-gradient(165deg, #202c43 8%, #25344d 56%, #202c43 100%);
    background-repeat: no-repeat;
    background-position: right -12px bottom 0, center, center, center;
    background-size: 240px auto, auto, auto, auto;
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.career-shell .career-sidebar::after { display: none; }
.career-shell .career-brand { min-height: 60px; gap: 11px; padding: 0 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.career-shell .career-brand-mark {
    display: grid; width: 42px; height: 42px; flex: 0 0 42px; padding: 5px; place-items: center;
    overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 11px; box-shadow: none;
}
.career-shell .career-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.career-shell .career-brand strong { font-family: inherit; font-size: 16px; font-weight: 650; letter-spacing: -.025em; line-height: 1.16; text-transform: none; }
.career-shell .career-brand small { margin-top: 3px; color: #b4bfd0; font-size: 13px; font-weight: 450; letter-spacing: .01em; line-height: 1.28; text-transform: none; }
.career-shell .career-nav { display: grid; gap: 15px; margin-top: 18px; }
.career-shell .career-nav__group { min-width: 0; }
.career-shell .career-nav__label {
    display: flex; align-items: center; gap: 7px; margin: 0 11px 6px; color: #aeb9ca;
    font-size: 13px; font-weight: 550; letter-spacing: .045em; line-height: 1.25;
}
.career-shell .career-nav__label::before { content: none; display: none; }
.career-shell .career-nav__items { display: grid; gap: 2px; }
.career-shell .career-nav a {
    position: relative; display: flex; min-height: 43px; gap: 10px; align-items: center; padding: 7px 10px;
    color: #d2d9e4; background: transparent; border: 1px solid transparent; border-radius: 9px;
    box-shadow: none; font-size: 13.5px; font-weight: 450; line-height: 1.2; transform: none;
    transition: background .17s ease, color .17s ease;
}
.career-shell .career-nav a i {
    display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center;
    color: #b8c4d5; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: 16px;
}
.career-shell .career-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); border-color: transparent; transform: none; }
.career-shell .career-nav a:hover i { color: #fff; }
.career-shell .career-nav a.active,
.career-shell .career-nav a[aria-current="page"] {
    color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); box-shadow: none; font-weight: 550;
}
.career-shell .career-nav a.active::before,
.career-shell .career-nav a[aria-current="page"]::before {
    content: none; display: none;
}
.career-shell .career-nav a.active i,
.career-shell .career-nav a[aria-current="page"] i { color: #fff; background: transparent; border-color: transparent; }
.role-candidate .career-nav a.profile-needs-interview-update::after {
    content: ""; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px;
    border-radius: 50%; background: #ef666b; box-shadow: 0 0 0 2px #263c58;
    animation: profile-sidebar-attention 2.4s ease-in-out infinite;
}
@keyframes profile-sidebar-attention {
    50% { box-shadow: 0 0 0 5px rgba(239, 102, 107, .12); }
}
@media (prefers-reduced-motion: reduce) {
    .role-candidate .career-nav a.profile-needs-interview-update::after { animation: none; }
}
.career-shell .sidebar-switch { position: relative; z-index: 1; margin-top: auto; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .1); }
.career-shell .sidebar-switch a,
.career-shell .sidebar-logout { min-height: 42px; gap: 10px; padding: 8px 12px; color: #cbd5e1; border-radius: 9px; font-size: 13.5px; font-weight: 450; }
.career-shell .sidebar-switch a:hover,
.career-shell .sidebar-logout:hover { color: #fff; background: rgba(255, 255, 255, .07); }

/* Light topbar and text that reads clearly at normal zoom. */
.career-shell .career-main { min-width: 0; min-height: 100vh; margin-left: 264px; }
.career-shell .career-topbar {
    display: flex; min-height: 65px; height: auto; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px clamp(20px, 3vw, 42px); background: #fff;
    border-bottom: 1px solid #e9e9e8; box-shadow: none; backdrop-filter: none;
}
.career-shell .career-topbar::before,
.career-shell .career-topbar::after { content: none; display: none; }
.career-shell .career-topbar__lead { gap: 10px; }
.career-shell .career-topbar__identity { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.career-shell .career-topbar__breadcrumb { display: block; color: #748092; font-size: 13px; font-weight: 500; letter-spacing: .015em; line-height: 1.2; text-transform: none; }
.career-shell .career-topbar__identity strong {
    overflow: hidden; color: var(--shell-ink); font-family: inherit; font-size: 16px; font-weight: 600;
    letter-spacing: -.015em; line-height: 1.18; text-overflow: ellipsis; white-space: nowrap;
}
.career-shell .career-topbar__actions { gap: 11px; }
.career-shell .language-switch { min-height: 44px; gap: 2px; padding: 2px; background: #f5f4f8; border: 1px solid #ebeaef; border-radius: 10px; }
.career-shell .language-switch span { display: none; }
.career-shell .language-switch a { display: inline-grid; min-width: 37px; min-height: 38px; padding: 5px 7px; place-items: center; border-radius: 7px; font-size: 13px; font-weight: 600; }
.career-shell .language-switch a.active { color: #fff; background: #5e5bc8; box-shadow: none; }
.career-shell .user-context { min-width: 0; gap: 10px; padding: 0 0 0 14px; border-left: 1px solid #e5e7eb; border-radius: 0; }
.career-shell .user-avatar {
    width: 37px; height: 37px; flex: 0 0 37px; color: #52657e; background: #f2f5f8;
    border: 1px solid #e1e7ef; border-radius: 11px; font-size: 14px; font-weight: 600;
}
.career-shell .user-avatar.candidate-photo-avatar { position: relative; overflow: hidden; }
.career-shell .user-avatar.candidate-photo-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.career-shell .user-context small { color: #748092; font-size: 13px; font-weight: 450; letter-spacing: .02em; }
.career-shell .user-context strong { max-width: min(20vw, 240px); overflow: hidden; color: #344057; font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.career-shell .career-content { width: 100%; max-width: 1580px; margin: 0 auto; padding: 25px clamp(20px, 3vw, 42px) 58px; }
.career-shell .career-content :is(p, li, dd) { line-height: 1.4; }

/* Shared cards, fields and data use one-pixel rules rather than heavy frames. */
.career-shell .page-heading { gap: 16px; margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid #eae8e5; }
.career-shell .page-heading .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 5px; color: #647386; font-size: 13px; font-weight: 600; letter-spacing: .045em; }
.career-shell .page-heading .eyebrow::before { content: none; display: none; }
.career-shell .page-heading h1 { color: var(--shell-ink); font-family: inherit; font-size: clamp(29px, 2.45vw, 36px); font-weight: 600 !important; letter-spacing: -.035em; line-height: 1.1; }
.career-shell .page-heading p { max-width: 780px; margin-top: 5px; color: var(--shell-muted); font-size: 14.5px; line-height: 1.38; }
.career-system.role-candidate .career-shell .career-content h1,
.career-system.role-corporate .career-shell .career-content h1 {
    font-family: var(--mdb-font) !important;
    font-weight: 600 !important;
}
.career-system.role-candidate .career-shell :is(h2, h3),
.career-system.role-corporate .career-shell :is(h2, h3) { font-family: inherit; font-weight: 600 !important; letter-spacing: -.02em; line-height: 1.15; }
.career-shell .career-card,
.career-shell .metric-card,
.career-shell .form-section-card,
.career-shell .vacancy-card {
    border: 1px solid #e6e5e6; border-radius: 15px;
    background: #fff;
    box-shadow: var(--shell-shadow);
}
.career-shell .career-card,
.career-shell .form-section-card { margin-bottom: 15px; }
.career-shell .career-card { padding: 19px; }
.career-shell .form-section-card { overflow: hidden; }
.career-shell .career-card,
.career-shell .form-section-card {
    border-color: #e6e5e6; border-radius: 15px;
    background: #fff;
    box-shadow: var(--shell-shadow);
}
.career-shell .metric-grid { gap: 12px; margin-bottom: 17px; }
.career-shell .metric-card,
.career-shell .metric-grid .metric-card:nth-child(n) {
    min-height: 142px; padding: 17px; overflow: hidden;
    background: #fff;
    border: 1px solid #e6e5e6; border-radius: 15px;
    box-shadow: var(--shell-shadow);
}
.career-shell .metric-card::before,
.career-shell .metric-grid .metric-card:nth-child(n)::before { display: none; }
.career-shell .metric-card:hover { border-color: #cbd3df; box-shadow: var(--shell-shadow); }
.career-shell .metric-icon,
.career-shell .metric-grid .metric-card:nth-child(n) .metric-icon {
    width: 37px; height: 37px; flex: 0 0 37px; margin-bottom: 9px;
    color: #52657e; background: transparent; border: 0; border-radius: 0; font-size: 17px;
}
.career-shell .metric-card__top { gap: 10px; margin-bottom: 9px; }
.career-shell .metric-card__top .metric-icon,
.career-shell .metric-grid .metric-card:nth-child(n) .metric-card__top .metric-icon { margin-bottom: 0; }
.career-shell .metric-card__meta { min-height: 0; margin-top: 5px; font-size: 13px; line-height: 1.3; }
.career-shell .metric-card small { font-size: 13px; font-weight: 450; }
.career-shell .metric-card strong { font-family: inherit; font-size: 27px; font-weight: 650; letter-spacing: -.03em; line-height: 1.08; }
.career-shell .card-head { gap: 12px; margin-bottom: 12px; padding-bottom: 11px; border-bottom-color: #eeedeb; }
.career-shell .card-head h2,
.career-shell .card-head h3,
.career-shell .form-section-title h2 { color: var(--shell-ink); font-size: 18px; }
.career-shell .form-section-title { gap: 10px; padding: 13px 17px; background: #fafafa; border-bottom: 1px solid #eceae7; }
.career-shell .form-section-title i { width: 36px; height: 36px; flex: 0 0 36px; margin-bottom: 0; color: #52657e; background: transparent; border: 0; border-radius: 0; font-size: 16px; }
.career-shell .form-section-title p { margin-top: 2px; font-size: 13px; line-height: 1.3; }
.career-shell .form-section-body { padding: 17px 19px 19px; }
.career-shell .career-form-grid { gap: 14px 16px; }
.career-shell .vacancy-grid { gap: 14px; }
.career-shell .detail-grid { gap: 16px; }
.career-shell .definition-grid { gap: 12px; }
.career-shell .filter-bar { gap: 8px; margin-bottom: 14px; }
.career-shell .career-btn { min-height: 42px; padding: 8px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; line-height: 1.24; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.career-shell .career-btn.sm { min-height: 38px; padding: 7px 11px; font-size: 13px; }
.career-shell .career-btn i,
.career-shell .sidebar-switch :is(a, button) i { display: inline-grid; place-items: center; line-height: 1; font-size: 1.06em; }
.career-shell .career-btn:hover:not(:disabled) { transform: none; }
.career-shell .career-btn.primary { color: #fff; background: #5e5bc8; box-shadow: none; }
.career-shell .career-btn.primary:hover:not(:disabled) { background: #4b48ae; box-shadow: none; }
.career-shell .career-btn.soft { color: #4e4bad; background: #f0effb; }
.career-shell .career-btn.soft:hover:not(:disabled) { background: #e7e5f8; }
.career-shell .career-btn.gold { color: #5c4520; background: #fbefd9; box-shadow: none; }
.career-shell .career-label { margin-bottom: 5px; color: #3d4657; font-size: 14px; font-weight: 550; line-height: 1.28; }
.career-shell .career-input { min-height: 44px; padding: 9px 11px; color: #273247; background: #fff; border: 1px solid #dedfe3; border-radius: 9px; font-size: 14.5px; font-weight: 400; line-height: 1.32; transition: border-color .16s ease, box-shadow .16s ease; }
/* Keep the dropdown chevron inside the control with a clear right gutter. */
.career-system select.career-input:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23647386' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px 14px;
}
.career-system .applicant-track-actions select.career-input:not([multiple]):not([size]) {
    padding-right: 31px;
    background-position: right 12px center;
    background-size: 12px 12px;
}
.career-shell .career-input:hover:not(:disabled) { border-color: #b9bac9; }
.career-shell .career-input:focus { background: #fff; border-color: #7873d5; box-shadow: 0 0 0 3px rgba(94, 91, 200, .1); }
.career-shell .field-help { margin-top: 4px; color: #6b7788; font-size: 13px; line-height: 1.34; }
.career-shell .career-table { font-size: 13.5px; line-height: 1.34; }
.career-shell .career-table th { padding: 10px 12px; color: #687486; background: #faf9f8; border-bottom: 1px solid #e9e8e6; font-size: 13px; font-weight: 550; letter-spacing: .02em; line-height: 1.27; }
.career-shell .career-table td { padding: 11px 12px; border-bottom: 1px solid #efeeec; line-height: 1.34; }
.career-shell .career-table strong { font-size: 14px; font-weight: 600; }
.career-shell .career-table small { font-size: 13px; line-height: 1.3; }
.career-shell .career-table tbody tr:hover { background: #fcfbfa; }
.career-shell .career-table-wrap { border-color: #e8e7e5; }
.career-shell .progress-track { background: #eae9ef; }
.career-shell .progress-fill { background: #5e5bc8; }
.career-shell .status-badge.draft,
.career-shell .status-badge.new,
.career-shell .status-badge.reviewing,
.career-shell .status-badge.shortlisted,
.career-shell .status-badge.interview,
.career-shell .status-badge.talent-pool { color: #524fa5; background: #efeffa; border-color: #e6e4f7; }
.career-shell .upload-box { padding: 12px; background: #fbfaf9; border-color: #cfccd8; }
.career-shell .upload-box:focus-within { background: #f7f5fd; border-color: #7873d5; }
.career-shell :is(input[type="checkbox"], input[type="radio"]) { accent-color: #5e5bc8; }
.career-shell .career-alert { align-items: flex-start; padding: 11px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 13.5px; line-height: 1.36; }
.career-shell .career-alert.success { border-color: #cce6d2; }
.career-shell .career-alert.error { border-color: #f1d2d0; }
.career-system.role-candidate .career-shell .status-badge,
.career-system.role-corporate .career-shell .status-badge {
    border-radius: 7px;
    font-size: 13px !important;
    font-weight: 550 !important;
    letter-spacing: .005em;
}
.career-shell .empty-state { padding: 29px 18px; border-radius: 14px; background: #fbfaf9; }
.career-shell .section-actions { padding: 9px; background: #faf9f7; border: 1px solid #eae8e5; box-shadow: none; backdrop-filter: none; }
.career-shell :is(a, button, input, select, textarea):focus-visible { outline: 2px solid rgba(94, 91, 200, .7); outline-offset: 2px; }
.career-shell .career-input:focus-visible { outline: 0; }

@media (max-width: 1000px) {
    .career-shell .career-sidebar { width: 264px; transform: translateX(-100%); }
    .career-shell .career-sidebar.open { transform: translateX(0); }
    .career-shell .career-main { margin-left: 0; }
    .career-shell .sidebar-toggle { display: grid; width: 42px; height: 42px; flex: 0 0 42px; padding: 0; place-items: center; color: #5e5bc8; background: #f1f0fa; border: 1px solid #e8e6f3; border-radius: 10px; font-size: 20px; }
    .career-shell .career-topbar { min-height: 63px; padding: 8px 20px; }
    .career-shell .career-content { padding: 21px 20px 50px; }
}
@media (max-width: 700px) {
    .career-shell .career-sidebar { background-position: right -8.25px bottom 0, center, center, center; background-size: 165px auto, auto, auto, auto; }
    .career-shell .career-topbar { gap: 9px; padding: 8px 15px; }
    .career-shell .career-topbar__lead { gap: 9px; }
    .career-shell .career-topbar__identity { display: flex; }
    .career-shell .career-topbar__breadcrumb { font-size: 13px; }
    .career-shell .career-topbar__identity strong { max-width: 31vw; font-size: 14.5px; }
    .career-shell .career-topbar__actions { gap: 7px; }
    .career-shell .user-context { padding-left: 8px; }
    .career-shell .user-context > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .career-shell .career-content { padding: 18px 14px 46px; }
    .career-shell .page-heading { gap: 10px; margin-bottom: 14px; padding-bottom: 11px; }
    .career-shell .page-heading h1 { font-size: clamp(27px, 6.6vw, 32px); }
    .career-shell .page-heading p { font-size: 14px; }
    .career-shell .career-card,
    .career-shell .form-section-card { border-radius: 15px; }
    .career-shell .career-card { padding: 16px; }
    .career-shell .form-section-title { padding: 12px 14px; }
    .career-shell .form-section-body { padding: 15px; }
    .career-shell .career-btn.sm { min-height: 42px; }
    .career-shell .language-switch a { min-height: 40px; }
    .career-shell .career-input { font-size: 16px; }
}
@media (max-width: 360px) {
    .career-shell .career-topbar { gap: 6px; padding-inline: 11px; }
    .career-shell .career-topbar__breadcrumb { display: none; }
    .career-shell .career-topbar__identity strong { max-width: 26vw; }
    .career-shell .language-switch a { min-width: 30px; }
    .career-shell .user-context { flex: 0 0 auto; }
    .career-shell .user-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .career-shell .career-nav a,
    .career-shell .career-btn,
    .career-shell .career-input { transition: none; }
}