/* ══════════════════════════════════════════════════════
   VNUA JobShares — Employer module shared styles
   Dùng chung cho tất cả trang trong module Employer.
   Thứ tự load: bootstrap.css → style.css → employer.css
   ══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   1. Page header
───────────────────────────────────────────────────── */
.page-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.page-header h4 {
  color: var(--primary-dark);
  font-weight: 700;
  margin-bottom: .2rem;
}

/* ─────────────────────────────────────────────────────
   2. Employer cards (base + card-header + card-body)
   Dùng chung: .section-card, .jobs-card, .form-card,
               .applicants-card, .logo-card
───────────────────────────────────────────────────── */
.emp-card,
.section-card,
.jobs-card,
.form-card,
.applicants-card,
.logo-card {
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
  overflow: hidden;
  background: var(--surface);
}

.emp-card > .card-header,
.section-card > .card-header,
.form-card > .card-header,
.applicants-card > .card-header,
.logo-card > .card-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 14px 14px 0 0 !important;
  padding: .85rem 1.25rem;
  font-weight: 600;
  font-size: .93rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.emp-card > .card-header .bi,
.section-card > .card-header .bi,
.form-card > .card-header .bi,
.applicants-card > .card-header .bi,
.logo-card > .card-header .bi {
  font-size: 1rem;
}

.emp-card > .card-body,
.section-card > .card-body,
.form-card > .card-body,
.applicants-card > .card-body {
  padding: 1.25rem;
}

/* ─────────────────────────────────────────────────────
   3. Form controls override
───────────────────────────────────────────────────── */
.form-label {
  font-size: .875rem;
  font-weight: 500;
  color: #495057;
  margin-bottom: .35rem;
}
.form-control,
.form-select {
  font-size: .9rem;
  border-radius: 8px;
}
.form-control-sm,
.form-select-sm {
  font-size: .865rem;
  border-radius: 8px;
}
.form-control:focus,
.form-select:focus,
.form-control-sm:focus,
.form-select-sm:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 .2rem rgba(30, 58, 138, .12);
}
.form-hint {
  font-size: .78rem;
  color: #6c757d;
  margin-top: .3rem;
}

/* ─────────────────────────────────────────────────────
   4. Save bar
───────────────────────────────────────────────────── */
.save-bar {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ─────────────────────────────────────────────────────
   5. Toolbar shared base
───────────────────────────────────────────────────── */
.emp-toolbar,
.jobs-toolbar {
  background: #f8f9fb;
  border-bottom: 1px solid #eef0f3;
  padding: .85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.emp-toolbar .form-control,
.emp-toolbar .form-select,
.jobs-toolbar .form-control,
.jobs-toolbar .form-select {
  font-size: .875rem;
  border-radius: 8px;
}
.emp-toolbar .search-wrap,
.jobs-toolbar .search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}
.emp-toolbar .search-wrap .bi,
.jobs-toolbar .search-wrap .bi {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  pointer-events: none;
}
.emp-toolbar .search-wrap input,
.jobs-toolbar .search-wrap input {
  padding-left: 2.1rem;
}
.toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Compact filter select (replaces inline style="width:auto;min-width:140px") */
.toolbar-filter-select {
  width: auto;
  min-width: 140px;
}

/* ─────────────────────────────────────────────────────
   6. Employer tables
───────────────────────────────────────────────────── */
.emp-table {
  font-size: .875rem;
  margin-bottom: 0;
}
.emp-table thead th {
  background: #f8f9fc;
  border-bottom: 2px solid #eef0f3;
  color: #6c757d;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .65rem 1rem;
  white-space: nowrap;
}
.emp-table tbody td {
  padding: .85rem 1rem;
  vertical-align: middle;
  border-color: #f0f2f5;
}
.emp-table tbody tr {
  transition: background .12s;
}
.emp-table tbody tr:hover {
  background: #f5f8ff;
}

/* Column width helpers (used with <th class="col-*">) */
.col-num      { width: 40px; }
.col-status   { width: 110px; }
.col-deadline { width: 120px; }
.col-date     { width: 100px; }
.col-count    { width: 90px; }
.col-actions  { width: 160px; }

/* Position chips (application / job positions) */
.position-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  border-radius: 999px;
  padding: .15rem .45rem;
  font-size: .72rem;
  font-weight: 500;
  margin: 0 .2rem .2rem 0;
}

/* ─────────────────────────────────────────────────────
   7. Status badges (shared base)
───────────────────────────────────────────────────── */
.status-badge,
.job-status-badge,
.applicant-status-badge {
  font-size: .76rem;
  font-weight: 600;
  padding: .3em .65em;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-block;
}

/* ─────────────────────────────────────────────────────
   8. Skeleton / shimmer loader
   Dùng class .sk-cell (thay thế .sk, .skeleton, .skeleton-cell)
───────────────────────────────────────────────────── */
.sk-cell,
.sk,
.skeleton,
.skeleton-cell {
  display: block;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: emp-shimmer 1.4s infinite;
  border-radius: 5px;
}
@keyframes emp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row td {
  padding: .75rem 1rem;
}

/* Skeleton size helpers — form (company-profile) */
.sk-heading         { height: 18px; width: 40%; }
.sk-heading--short  { width: 35%; }
.sk-field           { height: 38px; }
.sk-textarea        { height: 160px; }
.sk-logo            { height: 160px; width: 160px; border-radius: 12px !important; }

/* Skeleton size helpers — table cells */
.sk-num          { width: 20px;  height: 14px; }
.sk-name         { width: 120px; height: 13px; }
.sk-email        { width: 160px; height: 11px; }
.sk-date         { width: 70px;  height: 14px; }
.sk-meta         { width: 80px;  height: 14px; }
.sk-count        { width: 30px;  height: 14px; }
.sk-excerpt      { width: 150px; height: 12px; }
.sk-btn-icon     { width: 30px;  height: 26px; border-radius: 6px !important; }
.sk-badge        { width: 90px;  height: 22px; border-radius: 12px !important; }
.sk-actions      { width: 110px; height: 26px; border-radius: 8px !important; }
.sk-status-pill  { width: 70px;  height: 20px; border-radius: 6px !important; }
.sk-actions-group{ width: 130px; height: 28px; border-radius: 6px !important; }
.sk-title-sm     { width: 180px; height: 14px; }
.sk-title        { width: 220px; height: 14px; }
.sk-title-md     { width: 200px; height: 14px; }
.sk-title-lg     { width: 260px; height: 14px; }

/* ─────────────────────────────────────────────────────
   9. Empty state
───────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
}
.empty-state .empty-icon {
  font-size: 3rem;
  color: #ced4da;
  margin-bottom: 1rem;
  display: block;
}
.empty-state .bi:not(.empty-icon .bi) {
  font-size: 3.5rem;
  color: #adb5bd;
  opacity: .4;
  display: block;
  margin-bottom: .75rem;
}
.empty-state h6 {
  color: #495057;
  font-weight: 600;
  margin-bottom: .4rem;
}
.empty-state p {
  color: #6c757d;
  font-size: .875rem;
}

/* ─────────────────────────────────────────────────────
   10. Action button groups
   Dùng gap thay cho negative-margin của Bootstrap:
   mỗi button độc lập, bo góc 4px, khoảng cách .25rem
───────────────────────────────────────────────────── */
.emp-actions,
.job-actions,
.applicant-actions {
  white-space: nowrap;
  text-align: right;
}

/* Mọi btn trong action group */
.emp-actions .btn,
.job-actions .btn,
.applicant-actions .btn {
  padding: .3rem .5rem;
  font-size: .8rem;
  border-radius: 4px !important;
}

/* btn-group: tách thành separate buttons với gap */
.emp-actions .btn-group,
.job-actions .btn-group,
.applicant-actions .btn-group {
  gap: .25rem;
}

/* Reset Bootstrap's negative margin-left trên btn-group buttons */
.emp-actions .btn-group > .btn,
.job-actions .btn-group > .btn,
.applicant-actions .btn-group > .btn,
.emp-actions .btn-group > .btn:not(:first-child),
.job-actions .btn-group > .btn:not(:first-child),
.applicant-actions .btn-group > .btn:not(:first-child) {
  margin-left: 0 !important;
  border-radius: 4px !important;
}

/* ─────────────────────────────────────────────────────
   11. Summary / count badge
───────────────────────────────────────────────────── */
.summary-badge {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid #c7d2fe;
  border-radius: 20px;
  padding: .2em .75em;
  font-size: .8rem;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────
   12. Validation feedback
───────────────────────────────────────────────────── */
.field-error {
  font-size: .8rem;
  color: #dc3545;
  margin-top: .25rem;
  display: none;
}
.is-invalid ~ .field-error {
  display: block;
}

/* ─────────────────────────────────────────────────────
   13. Modal helpers (detail views)
───────────────────────────────────────────────────── */
.modal-header { border-bottom: 1px solid #f0f0f0; }
.modal-footer { border-top: 1px solid #f0f0f0; }
.detail-label {
  font-size: .78rem;
  color: #6c757d;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}
.detail-value {
  font-size: .9rem;
  color: #212529;
  margin-bottom: 1rem;
}
.cover-letter-box {
  background: #f8f9fc;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 1rem;
  font-size: .875rem;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  line-height: 1.65;
}

/* ─────────────────────────────────────────────────────
   14. Logo card
───────────────────────────────────────────────────── */
.logo-preview-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 200px;
  margin: 0 auto 1rem;
  border-radius: 12px;
  border: 2px dashed #dee2e6;
  overflow: hidden;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}
.logo-preview-wrap:hover  { border-color: var(--primary); }
.logo-preview-wrap img    { width: 100%; height: 100%; object-fit: contain; }
.logo-placeholder         { text-align: center; color: #adb5bd; }
.logo-placeholder .bi     { font-size: 3rem; }

/* Avatar preview (candidate profile) */
.avatar-preview-wrap {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 2px dashed #dee2e6;
  overflow: hidden;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}
.avatar-preview-wrap:hover { border-color: var(--primary); }
.avatar-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-placeholder { text-align: center; color: #adb5bd; }
.avatar-placeholder .bi { font-size: 2.5rem; }

/* Card footer action bar */
.card-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

/* Profile completion / stats (candidate) */
.profile-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .45rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: .85rem;
}
.profile-stat-item:last-child { border-bottom: none; }
.profile-stat-item .label { color: #6c757d; }
.profile-stat-item .value { font-weight: 600; color: #1e3a8a; }
.profile-completion-bar .progress { height: 8px; border-radius: 999px; }

/* Candidate dashboard */
.dash-stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.dash-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  border-color: #cbd5e1 !important;
  color: inherit;
}
.dash-stat-card h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.1;
}
.dash-stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.dash-stat-card .stat-link {
  font-weight: 500;
}
.quick-link-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.quick-link-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: #334155;
  font-size: .9rem;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.quick-link-item:hover {
  background: var(--primary-soft);
  border-color: #c7d2fe;
  color: var(--primary-dark);
}
.quick-link-item .ql-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: var(--primary);
  flex-shrink: 0;
}
.quick-link-item .ql-arrow {
  margin-left: auto;
  color: #94a3b8;
  font-size: .85rem;
}

/* ─────────────────────────────────────────────────────
   15. Misc utilities
───────────────────────────────────────────────────── */
/* TinyMCE border unification */
.tox-tinymce {
  border-radius: 8px !important;
  border-color: #dee2e6 !important;
}

/* Badge hint (replaces inline style on small badge text) */
.badge-hint {
  font-size: .72rem;
  font-weight: 500;
  background: #495057 !important;
}

/* Text small list (replaces inline font-size on ul/ol) */
.text-sm {
  font-size: .88rem;
}

/* Applicant info cell */
.applicant-info .name { font-weight: 600; font-size: .9rem; color: #212529; }
.applicant-info .meta { font-size: .78rem; color: #6c757d; margin-top: .1rem; }
.applicant-info .meta i { font-size: .72rem; }

/* Cover letter clamp (2 lines) */
.applicant-cover-letter {
  font-size: .82rem;
  color: #495057;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 220px;
}

/* Status select inside table */
.st-select {
  font-size: .8rem;
  border-radius: 4px;
  padding: .25rem .5rem;
  border-color: #dee2e6;
  cursor: pointer;
}
.st-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 .15rem rgba(59, 130, 246, .15);
}

/* Applicant count badge in jobs table */
.applicant-count {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8rem;
  color: #495057;
}
.applicant-count .badge { font-size: .72rem; }

/* Select2 multi-select theme fix */
.select2-container--bootstrap-5 .select2-selection {
  border-radius: 8px !important;
  min-height: 38px;
  border-color: #dee2e6;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: #3b82f6;
  box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .15);
}
.select2-container--bootstrap-5 .select2-selection__choice {
  background-color: #e8f0fe !important;
  border-color: #c7d7f9 !important;
  color: #1e3a8a !important;
  border-radius: 5px !important;
  font-size: .8rem !important;
}
.select2-new-tag  { color: #198754; font-style: italic; }
/* Select2 full-width without inline style */
#viTriIds { width: 100%; }

/* ─────────────────────────────────────────────────────
   16. Responsive
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .emp-toolbar,
  .jobs-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-right { margin-left: 0; }
  th.hide-mobile,
  td.hide-mobile { display: none; }
  .job-title-cell { max-width: 160px; }
}