/* Gaya tambahan situs publik, di atas Bootstrap 4.5 (css/app.css). Diambil dari tampilan InfoLokerJabar lama. */
body { background-color: #f8fafc; }
a { color: #185a91; }

/* Navbar */
#navbar { box-shadow: 0 2px 10px rgba(0, 0, 0, .05); z-index: 1050; }
#navbar .nav-link { font-weight: 500; color: #555 !important; }
#navbar .nav-link:hover, #navbar .nav-link.active { color: #185a91 !important; }
#navbar .dropdown-menu { border: 0; border-radius: 8px; font-size: .9rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }

/* Kartu dan judul seksi */
.hover-shadow { transition: box-shadow .2s ease; }
.hover-shadow:hover { box-shadow: 0 0 5px 1px rgba(0, 0, 0, .25); }
.section-title { font-weight: 700; margin-bottom: 0; }
.section-title span { border-bottom: 3px solid #185a91; padding-bottom: .4rem; }
.text-navy { color: #003366; }

/* Beranda: baris lowongan */
.job-item-modern { border-left: 4px solid transparent; transition: background-color .2s ease, border-color .2s ease; }
.job-item-modern:hover { background-color: #f8fbff; border-left-color: #185a91; }
.job-item-modern .icon-box { width: 45px; height: 45px; background-color: #f1f5f9; transition: background-color .25s ease; }
.job-item-modern:hover .icon-box { background-color: #185a91; }
.job-item-modern:hover .icon-box i { color: #fff !important; }
.job-info { min-width: 0; }
.employer-logo { width: 60px; height: 60px; object-fit: contain; background: #fff; }

/* Daftar lowongan */
.search-bar { background-color: #f5fdff; }
.job-logo { object-fit: contain; background: #fff; }
.filter-card .form-group { margin-bottom: .9rem; }

/* Detail lowongan */
.company-banner { height: 200px; position: relative; overflow: hidden; background-color: #000; }
.company-banner-img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6)); }
.company-media { position: absolute; left: 1.25rem; bottom: 0; max-width: calc(100% - 4.5rem); background: #fff; padding: 12px 20px 10px 12px; border-radius: 12px 12px 0 0; display: flex; align-items: center; }
.company-logo { width: 60px; height: 60px; object-fit: contain; margin-right: 12px; flex-shrink: 0; }
.company-banner-img.is-brochure { object-position: center top; opacity: 1; }
.company-brochure-link { position: absolute; right: 16px; top: 14px; z-index: 2; }
.company-website { position: absolute; right: 16px; bottom: 14px; z-index: 2; }
.job-title { font-size: 1.7rem; font-weight: 800; color: #003366; letter-spacing: -.4px; line-height: 1.3; overflow-wrap: anywhere; }
.detail-heading { font-size: 1.05rem; font-weight: 700; color: #333; margin-bottom: 1rem; padding-bottom: 8px; border-bottom: 2px solid #185a91; display: inline-block; }
.badge-status { display: inline-block; padding: 6px 14px; margin: 0 8px 8px 0; border-radius: 50px; font-size: .8rem; font-weight: 600; }
.bg-soft-danger { background-color: #fee2e2; }
.custom-table td { border: 0; font-size: .95rem; vertical-align: top; padding: .35rem .5rem .35rem 0; }
.badge-skill { display: inline-block; background-color: #f1f5f9; color: #185a91; padding: 4px 12px; margin: 0 6px 6px 0; border-radius: 6px; font-size: .85rem; font-weight: 600; border: 1px solid #e2e8f0; }
.prose { line-height: 1.8; overflow-wrap: anywhere; }
.social-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff !important; margin-left: 8px; text-decoration: none; }
.social-icon.wa { background: #25d366; }
.social-icon.fb { background: #3b5998; }
.job-item-sidebar { transition: background-color .2s ease; }
.job-item-sidebar:hover { background-color: #f8fbff; }
.side-logo { width: 48px; height: 48px; min-width: 48px; object-fit: contain; background: #fff; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Footer */
.footer-main { background-color: #272727; color: #ddd; margin-top: 3rem; }
.footer-main .footer-hdr { color: #ddd; }
.footer-main .footer-link-list a { display: block; color: #ccc; padding: 3px 0; font-size: .9rem; }
.footer-main .footer-link-list a:hover { color: #fff; text-decoration: none; }
.footer-main .scam-note { border-top: 1px solid #3d3d3d; font-size: .85rem; color: #aaa; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.min-w-0 { min-width: 0; }

/* Halaman informasi dan artikel Tips Kerja */
.info-page { line-height: 1.8; overflow-wrap: anywhere; }
.info-page p, .info-page li { max-width: 72ch; }
.info-page ul, .info-page ol { padding-left: 1.25rem; }
.info-page li { margin-bottom: .35rem; }
.tip-icon { width: 45px; height: 45px; background-color: #f1f5f9; }

/* Laporkan lowongan */
#report-form[hidden] { display: none; }
#report-status.is-error { color: #b91c1c; }
#report-status.is-ok { color: #15803d; }

/* Profil perusahaan */
.social-link-pill { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f1f5f9; color: #185a91; margin: 0 6px 6px 0; border: 1px solid #e2e8f0; }
.social-link-pill:hover { background: #185a91; color: #fff; text-decoration: none; }

/* Akun pencari kerja */
.acc-tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: .25rem; }
.acc-tabs .nav-link { color: #185a91; font-weight: 600; font-size: .9rem; }
.acc-tabs .nav-link.active { background-color: #185a91; color: #fff; }
#nav-auth .btn-link { text-decoration: none; }
#apply-box form[hidden], #account-app[hidden] { display: none; }

/* Marketplace */
#mp-app[hidden] { display: none; }
.mp-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.mp-stat { font-size: 1.35rem; font-weight: 800; color: #003366; }
.mp-milestone { border-left: 4px solid #cbd5e1; }
.mp-milestone.is-info { border-left-color: #0ea5e9; }
.mp-milestone.is-warning { border-left-color: #f59e0b; }
.mp-milestone.is-success { border-left-color: #16a34a; }
.mp-milestone.is-danger { border-left-color: #dc2626; }
.mp-msg { max-width: 82%; border-radius: 10px; padding: .55rem .8rem; background: #f1f5f9; overflow-wrap: anywhere; white-space: pre-line; }
.mp-msg.is-mine { background: #dbeafe; margin-left: auto; }
.mp-pre { white-space: pre-line; overflow-wrap: anywhere; }

/* Banner promosi (slot home_top dan sidebar) */
.banner-slot a { display: block; }
.banner-slot-img { display: block; width: 100%; height: auto; border-radius: .25rem; }

/* Footer 4 kolom (sama dengan joblister) */
.footer-main .footer-links { padding-top: 2rem; padding-bottom: 2rem; }
.footer-main .footer-links .footer-hdr { color: #ddd; }
.footer-main .footer-links .footer-link-list .footer-links { display: block; color: #ccc; padding: 3px 0; margin: 0; font-size: .9rem; }
.footer-main .footer-links .footer-link-list .footer-links:hover { color: #fff; text-decoration: none; }
.footer-main .social-links { margin: 20px 0; }
.footer-main .social-links .social-link { background-color: #fff; color: #333; padding: 8px 10px; border-radius: 50%; transition: all .3s ease; }
.footer-main .social-links .social-link:hover { color: #fff; background-color: #0261a6; }

/* Banner ajakan daftar untuk tamu */
.login-banner { background-color: #fff; }
.login-banner-text { font-size: 1.6rem; color: #185a91; margin: 0; }
.login-banner[hidden] { display: none !important; }

/* Login / daftar: poster di sisi samping */
.login-poster { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .35)), url('../images/login-bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; }
.login-container .login-form h1 { font-size: 1.4rem; }

/* Halaman informasi */
.info-card { border: 1px solid #dee2e6; background: #fff; }

/* Area akun: kerangka "Pengaturan Akun" ala joblister (header berbingkai + menu samping) */
.account-layout .account-hdr { padding: 1rem; background-color: #fff; }
.account-layout .account-hdr h1, .account-layout .account-hdr h5 { margin: 0; }
.account-layout .account-main { background: #fff; border: 1px solid #dee2e6; }
.account-layout .account-body { margin-top: 1rem; }
.acc-tabs.account-nav-v { flex-direction: column; flex-wrap: nowrap; overflow: visible; white-space: normal; background: #fff; border: 1px solid #dee2e6; padding-bottom: 0; margin-bottom: 1rem; }
.acc-tabs.account-nav-v .nav-item { border-bottom: 1px solid #dee2e6; }
.acc-tabs.account-nav-v .nav-item:last-child { border-bottom: 0; }
.acc-tabs.account-nav-v .nav-link { border-radius: 0; padding: .75rem 1.25rem; }
.acc-tabs.account-nav-v .nav-link:hover { background-color: #f8fbff; }
.acc-tabs.account-nav-v .nav-link.active { background-color: #185a91; color: #fff; }
@media (min-width: 768px) { .acc-tabs.account-nav-v { margin-bottom: 0; border-right: 0; } }

/* Detail lowongan: penyesuaian ala joblister */
.job-detail .btn-primary { background-color: #003366; border-color: #003366; }
.job-detail .btn-primary:hover { background-color: #002244; border-color: #002244; }
.job-detail .text-description-header { text-align: justify; line-height: 1.6; }
.job-detail .social-icon { transition: all .3s; }
.job-detail .social-icon:hover { transform: translateY(-3px); opacity: .9; }
.job-detail .fa-fire { animation: flame 1.5s ease-in-out infinite alternate; }
@keyframes flame {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 0, 0, .4)); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 5px rgba(255, 0, 0, .7)); }
}
.detail-side { top: 100px; z-index: 10; }
@media (max-width: 767.98px) { .detail-side { position: static; } }

/* Tips Kerja: daftar dan detail ala halaman "content" joblister */
.job-listing { background: #fff; }
.content-card { background: #fff; transition: .25s ease; }
.content-card:hover { background: #f8fafc; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.content-card .arrow-icon { transition: .2s ease; font-size: 1.2rem; }
.content-card:hover .arrow-icon { transform: translateX(5px); color: #2563eb; }
.content-body p { margin-bottom: 1rem; line-height: 1.7; font-size: 1.05rem; max-width: none; }
.content-body h2, .content-body h3 { margin-top: 1.7rem; margin-bottom: 1rem; font-weight: bold; }
.content-body ul, .content-body ol { margin-left: 20px; margin-bottom: 1rem; padding-left: 1.25rem; }
.content-body li { margin-bottom: .35rem; max-width: none; }
.content-body blockquote { padding: 10px 15px; border-left: 4px solid #888; background: #f7f7f7; border-radius: 4px; margin: 1rem 0; font-style: italic; }

/* Latihan Tes Kerja */
.ex-stat { background: #f8fafc; }
.ex-timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.ex-timer.is-low { color: #dc3545; }
.ex-option { display: flex; align-items: flex-start; gap: .65rem; border: 1px solid #dee2e6; border-radius: .35rem; padding: .7rem .9rem; margin-bottom: .6rem; cursor: pointer; background: #fff; transition: .15s ease; }
.ex-option:hover { background: #f8fbff; border-color: #9ec5fe; }
.ex-option.is-selected { border-color: #185a91; background: #eef5fc; }
.ex-option input { margin-top: .3rem; flex-shrink: 0; }
.ex-option.is-right { border-color: #198754; background: #eaf6ef; }
.ex-option.is-wrong { border-color: #dc3545; background: #fcecee; }
.ex-option.is-review { cursor: default; }
.ex-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.ex-nav button { width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid #ced4da; border-radius: .3rem; background: #fff; font-weight: 600; }
.ex-nav button.is-answered { background: #d9e8f7; border-color: #185a91; }
.ex-nav button.is-current { background: #185a91; color: #fff; border-color: #185a91; }
.ex-score { font-size: 3rem; font-weight: 800; line-height: 1; }

/* ---------- Chat (/pesan) ---------- */
.chat-shell { display: flex; height: 72vh; min-height: 420px; overflow: hidden; }
.chat-list-pane { width: 320px; flex: 0 0 320px; border-right: 1px solid #dee2e6; display: flex; flex-direction: column; min-width: 0; }
.chat-thread-pane { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chat-thread { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-thread[hidden], .chat-empty[hidden] { display: none; }
.chat-empty { margin: auto; }
.chat-pane-hdr { padding: .65rem .85rem; border-bottom: 1px solid #dee2e6; background: #f8fbff; }
.chat-back { display: none; }
.chat-list { overflow-y: auto; flex: 1 1 auto; }
.chat-item { display: flex; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eef1f4; background: #fff; padding: .6rem .85rem; align-items: center; gap: .65rem; }
.chat-item:hover, .chat-item.active { background: #eef5fc; }
.chat-item.unread .chat-item-name { font-weight: 700; }
.chat-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chat-item-name { font-weight: 600; color: #212529; min-width: 0; }
.chat-item-preview { color: #6c757d; font-size: .85rem; min-width: 0; }
.chat-item-time { color: #6c757d; font-size: .75rem; flex: 0 0 auto; margin-left: .5rem; }
.chat-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #185a91; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.chat-notice { padding: .4rem .85rem; background: #fff8e1; border-bottom: 1px solid #f0e2a8; }
.chat-notice-danger { background: #fdecea; border-bottom-color: #f5c6cb; }
.chat-messages { flex: 1 1 auto; overflow-y: auto; padding: .85rem; background: #f4f7fa; min-height: 0; }
.chat-row { display: flex; margin-bottom: .45rem; }
.chat-row.me { justify-content: flex-end; }
.chat-bubble { max-width: 78%; padding: .45rem .7rem; border-radius: .6rem; background: #fff; border: 1px solid #e3e8ee; word-wrap: break-word; overflow-wrap: anywhere; }
.chat-row.me .chat-bubble { background: #dcecfb; border-color: #c4dcf3; }
.chat-text { white-space: pre-wrap; }
.chat-meta { font-size: .72rem; color: #6c757d; text-align: right; margin-top: .15rem; }
.chat-reply-link { color: #6c757d; margin-right: .35rem; }
.chat-tick { color: #9aa5b1; }
.chat-tick.read { color: #1c9be6; }
.chat-quote { font-size: .8rem; color: #495057; border-left: 3px solid #185a91; padding-left: .5rem; margin-bottom: .3rem; background: rgba(24, 90, 145, .06); }
.chat-img { max-width: 100%; max-height: 220px; border-radius: .4rem; display: block; }
.chat-file { display: flex; align-items: center; padding: .35rem .5rem; margin-bottom: .25rem; border: 1px solid #dee2e6; border-radius: .4rem; background: #fff; color: #185a91; }
.chat-reply-bar { display: flex; justify-content: space-between; align-items: center; padding: .3rem .85rem; background: #eef5fc; border-top: 1px solid #dee2e6; }
.chat-files { padding: .4rem .85rem 0; border-top: 1px solid #dee2e6; }
.chat-form { display: flex; align-items: flex-end; gap: .5rem; padding: .6rem .85rem; border-top: 1px solid #dee2e6; background: #fff; }
.chat-form textarea { resize: none; max-height: 120px; }
@media (max-width: 767.98px) {
  .chat-shell { height: 78vh; }
  .chat-list-pane { width: 100%; flex-basis: 100%; border-right: 0; }
  .chat-thread-pane { display: none; width: 100%; }
  #chat-app.chat-open .chat-list-pane { display: none; }
  #chat-app.chat-open .chat-thread-pane { display: flex; }
  .chat-back { display: inline-block; }
  .chat-bubble { max-width: 90%; }
}

/* Foto profil: lingkaran dengan inisial sebagai cadangan */
.gw-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: #185a91; color: #fff; font-weight: 700; line-height: 1; vertical-align: middle; }
.gw-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gw-avatar-sm { width: 24px; height: 24px; font-size: .7rem; }
.gw-avatar-md { width: 48px; height: 48px; font-size: 1.1rem; }
.gw-avatar-lg { width: 88px; height: 88px; font-size: 2rem; }