/* ============================================================
   site-v17.css — Popup + sidebar + dashboard polish (v1.5.3)
   ============================================================ */

/* ── 1. Popup / modal size + scroll ───────────────────── */
.modal {
  max-width: 460px !important;
  max-height: calc(100vh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.modal-head {
  background: #ffffff !important;
  color: #14213D !important;
  padding: 18px 22px 14px !important;
  border-bottom: 1px solid rgba(20,33,61,0.08) !important;
}
.modal-head::before, .modal-head::after { display: none !important; }
.modal-head .brand-row { gap: 10px !important; }
.modal-head .brand-row img {
  background: #ffffff !important;
  border: 1px solid rgba(20,33,61,0.10) !important;
  border-radius: 6px !important;
  padding: 3px !important;
  width: 32px !important;
  height: 32px !important;
}
.modal-head .brand-row span { color: #14213D !important; font-weight: 600 !important; }
.modal-head h2 {
  color: #14213D !important;
  font-size: 18px !important;
  margin: 10px 0 4px !important;
}
.modal-head p { color: #6B7280 !important; font-size: 12px !important; margin: 0 !important; }
.modal-head .close {
  background: #f5f6f8 !important;
  color: #14213D !important;
  border: 1px solid rgba(20,33,61,0.10) !important;
}
.modal-head .close:hover { background: #eaecf0 !important; }
.modal-tabs { background: #ffffff !important; border-bottom: 1px solid rgba(20,33,61,0.08) !important; }
.modal-tab { color: #6b7280 !important; padding: 11px 12px !important; font-size: 12px !important; }
.modal-tab.is-active { background: #ffffff !important; color: #4F8EDC !important; border-bottom: 2px solid #4F8EDC !important; }
.modal-body {
  padding: 16px 22px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}
.modal-body h3 { font-size: 15px !important; margin: 0 0 4px !important; }
.modal-body .sub { font-size: 12px !important; margin: 0 0 14px !important; }
.modal-foot {
  padding: 12px 22px 18px !important;
  border-top: 1px solid rgba(20,33,61,0.06) !important;
  flex-shrink: 0 !important;
}
.modal-foot .alt { font-size: 12px !important; }

/* Tighten the form inside modal to avoid overflow */
.modal-body .input-group { margin-bottom: 10px !important; }
.modal-body .input-group label { font-size: 11px !important; margin-bottom: 4px !important; }
.modal-body .input-group input,
.modal-body .input-group select,
.modal-body .input-group textarea {
  padding: 9px 12px !important;
  font-size: 13px !important;
}
.modal-body .input-group .hint { font-size: 11px !important; margin-top: 4px !important; }
.modal-body .role-row { gap: 8px !important; margin-bottom: 12px !important; }
.modal-body .role-row .role-card { padding: 10px 8px !important; }
.modal-body .role-row .role-card .ic { width: 28px !important; height: 28px !important; font-size: 13px !important; margin-bottom: 4px !important; }
.modal-body .role-row .role-card .ttl { font-size: 12px !important; }
.modal-body .role-row .role-card .sub-l { font-size: 10px !important; }
.modal-body .input-row { gap: 8px !important; }
.modal-body button[type="submit"] { padding: 11px 18px !important; }
.modal-body .divider { margin: 12px 0 !important; }
.modal-body .social-row { gap: 8px !important; }
.modal-body .social-btn { padding: 9px 12px !important; font-size: 12px !important; }
.modal-body .forgot { margin: -2px 0 6px !important; }

/* Login-mode toggle inside modal */
.modal-body .login-mode {
  font-size: 11px !important;
  padding: 7px !important;
  border-radius: 4px !important;
}

@media (max-width: 520px) {
  .modal { max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 16px) !important; }
  .modal-head, .modal-body, .modal-foot { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── 2. Dashboard sidebar — white, grey hover, blue active ── */
.dash-sidebar {
  background: #ffffff !important;
  color: #14213D !important;
  border-right: 1px solid rgba(20,33,61,0.08) !important;
}
.dash-sidebar .brand .name { color: #14213D !important; }
.dash-sidebar .brand .role { color: #4F8EDC !important; }
.dash-sidebar .brand img { background: #ffffff !important; border: 1px solid rgba(20,33,61,0.10) !important; padding: 3px !important; }

.dash-sidebar .section-label { color: #6B7280 !important; }
.dash-sidebar nav a {
  background: #ffffff !important;
  color: #14213D !important;
  border: 1px solid transparent !important;
  margin-bottom: 2px !important;
}
.dash-sidebar nav a:hover {
  background: #f5f6f8 !important;
  color: #14213D !important;
  border-color: rgba(20,33,61,0.06) !important;
}
.dash-sidebar nav a.is-active {
  background: #4F8EDC !important;
  color: #ffffff !important;
  border-color: #4F8EDC !important;
  box-shadow: 0 4px 12px -4px rgba(79,142,220,0.5) !important;
}
.dash-sidebar nav a .ic { color: #6B7280 !important; }
.dash-sidebar nav a:hover .ic { color: #4F8EDC !important; }
.dash-sidebar nav a.is-active .ic { color: #ffffff !important; }
.dash-sidebar nav a .badge {
  background: rgba(79,142,220,0.10) !important;
  color: #4F8EDC !important;
}
.dash-sidebar nav a.is-active .badge {
  background: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
}
.dash-sidebar .foot { border-top: 1px solid rgba(20,33,61,0.08) !important; }
.dash-sidebar .foot a { background: #ffffff !important; color: #6B7280 !important; }
.dash-sidebar .foot a:hover { background: #f5f6f8 !important; color: #4F8EDC !important; }

/* ── 3. Dashboard top-right user chip (clickable) ─────── */
.dash-topbar .user {
  background: #ffffff !important;
  border: 1px solid rgba(20,33,61,0.10) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background .2s, border-color .2s;
}
.dash-topbar .user:hover { background: #f5f6f8 !important; border-color: rgba(79,142,220,0.25) !important; }
.dash-topbar .user .avatar { background: #4F8EDC !important; color: #ffffff !important; }
.dash-topbar .user .name { color: #14213D !important; }
.dash-topbar .user::after {
  content: '▾';
  font-size: 10px;
  color: #6B7280;
  margin-left: 4px;
}

/* Dropdown menu injected by JS */
.dash-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid rgba(20,33,61,0.10);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20,33,61,0.14);
  padding: 6px;
  z-index: 60;
  display: none;
}
.dash-topbar .user.is-open .dash-user-menu { display: block; }
.dash-user-menu .menu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(20,33,61,0.08);
}
.dash-user-menu .menu-head .name { font-weight: 600; font-size: 13px; color: #14213D; }
.dash-user-menu .menu-head .role { font-size: 11px; color: #4F8EDC; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.dash-user-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #14213D;
  transition: background .15s, color .15s;
}
.dash-user-menu a:hover { background: #f5f6f8; color: #4F8EDC; }
.dash-user-menu a.logout {
  color: #ef4444;
  border-top: 1px solid rgba(20,33,61,0.06);
  border-radius: 0;
  margin-top: 4px;
}
.dash-user-menu a.logout:hover { background: #fef2f2; color: #ef4444; }
.dash-user-menu .ic { width: 16px; text-align: center; opacity: 0.7; }

/* ── 4. Employer & seeker dashboard sections — white surfaces ── */
.dash-page { background: #ffffff !important; }
.dash-grid > .dash-card,
.dash-page-head,
.profile-card,
.dash-tabs,
.kpi {
  background: #ffffff !important;
}
.dash-page-head h1 { color: #14213D !important; }
.dash-page-head p  { color: #6B7280 !important; }
.dash-tabs { border-bottom: 1px solid rgba(20,33,61,0.08) !important; }
.dash-tabs a { color: #6B7280 !important; }
.dash-tabs a:hover { color: #4F8EDC !important; }
.dash-tabs a.is-active { color: #4F8EDC !important; border-bottom-color: #4F8EDC !important; }

/* Profile cover stays blue as accent */
.profile-cover {
  background: linear-gradient(135deg, #4F8EDC 0%, #66b3ff 100%) !important;
  height: 110px !important;
}

/* Sticky CTA on mobile dashboards */
.sticky-cta { background: #4F8EDC !important; }