/* CSS khusus career.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css.
   Tata letak ala portal lowongan (13 Nov 2026): kolom cari di atas, daftar kiri + detail menempel di kanan. */
:root {
    /* warna mengikuti token tema (ugs-site.css) supaya ikut dark mode; --ugs-navy dipakai kepala modal lamaran */
    --ugs-navy: var(--ugs-fg);
    --ugs-blue: var(--ugs-accent);
    --ugs-border: var(--ugs-hairline-strong);
}

.ugs-career-page { background: var(--ugs-page); color: var(--ugs-fg); font-family: var(--font-body); }

/* ── PENCARIAN ── */
.ugs-jobs-search { background: var(--ugs-studio); padding: calc(var(--ugs-nav-h, 52px) + 2.5rem) 0 2rem; }
.ugs-career-page .ugs-jobs-heading { font-family: var(--ugs-font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; text-transform: uppercase; line-height: .95; color: var(--ugs-fg); margin: 0 0 .5rem; }
.ugs-jobs-sub { color: var(--ugs-fg-2); margin: 0 0 1.5rem; }
.ugs-jobs-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.ugs-jobs-field { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.ugs-jobs-field span { font-size: .82rem; font-weight: 600; color: var(--ugs-fg-2); }
.ugs-jobs-field input, .ugs-jobs-field select {
    width: 100%; min-height: 48px; padding: 0 1rem; font: inherit; font-size: .95rem;
    color: var(--ugs-fg); background: var(--ugs-card); border: 1px solid var(--ugs-hairline-strong); border-radius: 12px; outline: none;
}
.ugs-jobs-field select { appearance: none; padding-right: 2.25rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; }
.ugs-jobs-field input:focus, .ugs-jobs-field select:focus { border-color: var(--ugs-accent); box-shadow: 0 0 0 3px rgba(var(--ugs-accent-deep-rgb), .15); }
.ugs-jobs-field input::placeholder { color: var(--ugs-fg-3); }
.ugs-jobs-field option { background: var(--ugs-card); color: var(--ugs-fg); }
.ugs-jobs-submit { min-height: 48px; padding: 0 2rem; border: 0; border-radius: 12px; background: var(--ugs-accent); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; }
.ugs-jobs-submit:hover { background: var(--ugs-accent-dark); }
@media (max-width: 767.98px) {
    .ugs-jobs-search { padding: calc(var(--ugs-nav-h, 52px) + 1.5rem) 0 1.25rem; }
    .ugs-jobs-sub { margin-bottom: 1rem; }
    .ugs-jobs-form { grid-template-columns: 1fr 1fr; }
    .ugs-jobs-field-q, .ugs-jobs-submit { grid-column: 1 / -1; }
}

/* ── HASIL ── */
.ugs-jobs-main { padding-top: 1.5rem; padding-bottom: 4rem; }
.ugs-jobs-count { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin-bottom: .75rem; scroll-margin-top: calc(var(--ugs-nav-h, 52px) + 16px); }
.ugs-jobs-count strong { font-size: 1rem; font-weight: 600; }
.ugs-jobs-clear { border: 0; background: none; padding: .5rem 0; color: var(--ugs-accent-text); font-weight: 500; cursor: pointer; }
.ugs-jobs-clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.ugs-jobs-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-bottom: .5rem; color: var(--ugs-fg); font-weight: 500; text-decoration: none; }

/* kartu lowongan: seluruh kartu bisa diklik lewat tautan judul */
.ugs-job-list { display: flex; flex-direction: column; gap: .75rem; transition: opacity .15s; }
.ugs-job-list.is-loading { opacity: .5; }
.ugs-job-card { position: relative; background: var(--ugs-card); border: 1px solid var(--ugs-hairline); border-radius: 14px; padding: 1.1rem 1.25rem; transition: border-color .15s, box-shadow .15s; }
.ugs-job-card:hover { border-color: var(--ugs-hairline-strong); box-shadow: 0 6px 20px var(--ugs-shadow); }
.ugs-job-card.is-active { border-color: var(--ugs-accent); box-shadow: inset 4px 0 0 var(--ugs-accent); }
.ugs-career-page .ugs-job-title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; line-height: 1.35; text-transform: none; letter-spacing: -.01em; margin: 0 0 .15rem; }
.ugs-job-link { color: var(--ugs-fg); text-decoration: none; }
.ugs-job-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ugs-job-link:focus-visible { outline: none; }
.ugs-job-link:focus-visible::after { outline: 2px solid var(--ugs-accent); outline-offset: 2px; }
.ugs-job-card:hover .ugs-job-link { color: var(--ugs-accent-text); }
.ugs-job-company { margin: 0 0 .6rem; color: var(--ugs-fg-2); font-size: .92rem; }
.ugs-job-facts, .ugs-jdetail-facts { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--ugs-fg); }
.ugs-job-facts i, .ugs-jdetail-facts i { width: 1.1rem; margin-right: .5rem; color: var(--ugs-fg-3); text-align: center; }
.ugs-job-snippet { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.55; color: var(--ugs-fg-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ugs-job-dates { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--ugs-fg-3); }

.ugs-empty-jobs { padding: 2rem 1.5rem; background: var(--ugs-card); border: 1px solid var(--ugs-hairline); border-radius: 14px; }
.ugs-career-page .ugs-empty-jobs h2 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin: 0 0 .35rem; }
.ugs-empty-jobs p { margin: 0; color: var(--ugs-fg-2); font-size: .92rem; }
.ugs-pagination-wrap { margin-top: 1.25rem; }

/* ── DETAIL ── */
.ugs-jdetail { background: var(--ugs-card); border: 1px solid var(--ugs-hairline); border-radius: 14px; padding: 1.5rem 1.75rem; }
@media (min-width: 992px) {
    /* menempel & bergulir sendiri, daftar di kiri tetap bisa digulir */
    .ugs-jdetail { position: sticky; top: calc(var(--ugs-nav-h, 52px) + 16px); max-height: calc(100vh - var(--ugs-nav-h, 52px) - 32px); overflow-y: auto; overscroll-behavior: contain; }
}
.ugs-jdetail-head { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--ugs-hairline); }
.ugs-career-page .ugs-jdetail-title { font-family: var(--font-body); font-size: clamp(1.35rem, 2.2vw, 1.65rem); font-weight: 700; line-height: 1.25; text-transform: none; letter-spacing: -.015em; color: var(--ugs-fg); margin: 0 0 .25rem; }
.ugs-jdetail-facts { margin: .75rem 0 1.25rem; font-size: .95rem; gap: .45rem; }
.ugs-jdetail-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.ugs-jdetail-apply { min-height: 48px; padding: 0 2rem; border: 0; border-radius: 12px; background: var(--ugs-accent); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; }
.ugs-jdetail-apply:hover { background: var(--ugs-accent-dark); }
.ugs-jdetail-copy { min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--ugs-hairline-strong); border-radius: 12px; background: transparent; color: var(--ugs-fg); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.ugs-jdetail-copy:hover { border-color: var(--ugs-fg-3); }
.ugs-jdetail-deadline { margin: .75rem 0 0; font-size: .88rem; color: var(--ugs-fg-2); }
.ugs-detail-closed { margin: 0; color: var(--ugs-fg-2); font-size: .95rem; }
.ugs-job-description { font-size: .95rem; line-height: 1.75; color: var(--ugs-fg-2); }
.ugs-job-description p, .ugs-job-description li { color: inherit; }
.ugs-job-description strong, .ugs-job-description b { color: var(--ugs-fg); }
.ugs-career-page .ugs-job-description h1, .ugs-career-page .ugs-job-description h2, .ugs-career-page .ugs-job-description h3, .ugs-career-page .ugs-job-description h4 {
    font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ugs-fg); margin: 1.5rem 0 .5rem; }
.ugs-jdetail-foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ugs-hairline); }
@media (max-width: 991.98px) {
    .ugs-jdetail { padding: 1.25rem; }
    .is-job-page .ugs-jobs-main { padding-top: calc(var(--ugs-nav-h, 52px) + 1rem); padding-bottom: 6rem; }
    .is-job-page .ugs-jdetail-actions .ugs-jdetail-apply, .is-job-page .ugs-jdetail-foot { display: none; }
}
/* HP: tombol lamar menempel di bawah layar */
.ugs-japply-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; padding: .75rem 16px calc(.75rem + env(safe-area-inset-bottom)); background: var(--ugs-card); border-top: 1px solid var(--ugs-hairline); }
.ugs-japply-bar .ugs-jdetail-apply { width: 100%; }

/* ── PAGINASI (partials/pager) ── */
.ugs-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .6rem; }
.ugs-pager-btn, .ugs-pager-num { min-height: 44px; min-width: 44px; border-radius: 999px; border: 1.5px solid var(--ugs-hairline-strong); background: var(--ugs-card); color: var(--ugs-fg); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 1rem; }
.ugs-pager-num { padding: 0; }
.ugs-pager-btn:hover:not(:disabled), .ugs-pager-num:hover:not(.is-current) { border-color: var(--ugs-accent); }
.ugs-pager-btn:disabled { opacity: .35; cursor: default; }
.ugs-pager-num.is-current { background: var(--ugs-accent); border-color: var(--ugs-accent); color: #fff; }
.ugs-pager-nums { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.ugs-pager-gap { align-self: center; color: var(--ugs-fg-3); }
.ugs-pager-info { flex-basis: 100%; text-align: center; margin: .25rem 0 0; font-size: .85rem; color: var(--ugs-fg-2); }
@media (max-width: 420px) { .ugs-pager-btn span { display: none; } .ugs-pager-btn { padding: 0; } }

/* ── MODAL & FORMULIR LAMARAN (Bootstrap) ── */
.ugs-career-page .btn-primary, .ugs-career-page .btn.btn-primary { background-color: var(--ugs-accent) !important; border-color: var(--ugs-accent) !important; color: #fff !important; border-radius: 999px; }
.ugs-career-page .btn-primary:hover { background-color: var(--ugs-accent-dark) !important; border-color: var(--ugs-accent-dark) !important; }
.ugs-career-page .btn-primary:disabled { opacity: .65; }
.ugs-career-page .btn-outline-secondary { color: var(--ugs-fg-2) !important; border-color: var(--ugs-hairline-strong) !important; background: transparent !important; }
.ugs-career-page .btn-outline-secondary:hover { background: var(--ugs-surface) !important; color: var(--ugs-fg) !important; }
.ugs-career-page .text-danger { color: #c0392b !important; }
.ugs-career-page .text-success { color: #16a34a !important; }
.ugs-career-page .alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; border-radius: 10px !important; }
:root[data-ugs-theme="dark"] .ugs-career-page .modal-content { background: var(--ugs-card); color: var(--ugs-fg); border: 1px solid var(--ugs-hairline); }
:root[data-ugs-theme="dark"] .ugs-career-page .modal-header, :root[data-ugs-theme="dark"] .ugs-career-page .modal-footer { border-color: var(--ugs-hairline); }
:root[data-ugs-theme="dark"] .ugs-career-page .btn-close { filter: invert(1); }
:root[data-ugs-theme="dark"] .ugs-career-page .form-control, :root[data-ugs-theme="dark"] .ugs-career-page .form-select { background-color: var(--ugs-surface); color: var(--ugs-fg); border-color: var(--ugs-hairline-strong); }
:root[data-ugs-theme="dark"] .ugs-career-page .form-label, :root[data-ugs-theme="dark"] .ugs-career-page label { color: var(--ugs-fg); }
:root[data-ugs-theme="dark"] .ugs-career-page .text-muted { color: var(--ugs-fg-3) !important; }

/* Tombol pilih file CV (menggantikan "Choose File / No file chosen" bawaan browser) */
.ugs-file { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ugs-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ugs-file-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--ugs-hairline-strong); background: var(--ugs-card); color: var(--ugs-fg); font-weight: 600; cursor: pointer; margin: 0; }
.ugs-file-btn:hover { border-color: var(--ugs-accent); }
.ugs-file-input:focus-visible + .ugs-file-btn { outline: 2px solid var(--ugs-accent); outline-offset: 2px; }
.ugs-file-input.is-invalid + .ugs-file-btn { border-color: #dc3545; }
.ugs-file-name { font-size: .9rem; color: var(--ugs-fg-2); overflow-wrap: anywhere; }

/* HP: panel detail tidak tampil di daftar, jadi kartu pertama tidak ditandai aktif */
@media (max-width: 991.98px) { .ugs-job-card.is-active { border-color: var(--ugs-hairline); box-shadow: none; } }