/* ============================================================
   KARIRLUAR.ID — Dashboard live CSS v3.9.0
   Notification panel, Message panel, Search dropdown,
   Profile photo, Certifications. Mobile-first; respects v3.8.4
   responsive guardrails.
   ============================================================ */

/* ---------- Generic pop panel base ---------- */
.kl-pop-panel { animation: klPopFade .15s ease-out; }
@keyframes klPopFade { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: none; } }

/* ---------- Notification rows ---------- */
.kl-notif-row { transition: background-color .12s; }
.kl-notif-row:hover { background:#F9FAFB; }
.kl-notif-row:last-child { border-bottom: none !important; }

/* ---------- Message threads ---------- */
.kl-msg-thread { transition: background-color .12s; }
.kl-msg-thread:hover { background:#F9FAFB !important; }
.kl-msg-thread:last-child { border-bottom: none !important; }

/* ---------- Search dropdown ---------- */
.dash-search input[type="search"] {
  font-size: 14px;
  outline: none;
}
@media (max-width: 480px) {
  /* Make search dropdown full-width on mobile to avoid overflow */
  #klDashboardSearchResults { left: -10px !important; right: -10px !important; }
}

/* ---------- Topbar buttons (touch-target compliant 44x44) ---------- */
.dash-topbar .dash-icon-btn { min-width: 40px; min-height: 40px; }
@media (pointer: coarse) {
  .dash-topbar .dash-icon-btn { min-width: 44px; min-height: 44px; }
}

/* ---------- Mobile dashboard topbar ---------- */
@media (max-width: 600px) {
  .dash-topbar-inner { gap: 8px !important; }
  .dash-search { max-width: none !important; flex: 1 1 100%; order: 1; }
  .dash-actions { order: 2; flex: 1 1 100%; justify-content: flex-end; }
  .dash-topbar-inner { flex-wrap: wrap; }
  /* Notification + msg panels: full width on tiny screens */
  #klNotifPanel, #klMsgPanel {
    position: fixed !important;
    top: 60px !important; left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none !important;
  }
}

/* ---------- Profile photo widget ---------- */
.kl-profile-photo-widget .kl-pp-avatar img { aspect-ratio: 1/1; }
.kl-profile-photo-widget .btn-outline { border: 1px solid #C9922A; color: #C9922A; background: #fff; }
.kl-profile-photo-widget .btn-outline:hover { background: #FFFBEB; }

/* ---------- Cert modal ---------- */
#klCertModal, #klMsgModal { transition: opacity .15s; }
@media (max-width: 480px) {
  #klCertModal > div, #klMsgModal > div { border-radius: 12px 12px 0 0 !important; max-width: 100% !important; }
}

/* ---------- Cert rows ---------- */
.kl-cert-row { transition: border-color .15s, transform .15s; }
.kl-cert-row:hover { border-color: #C9922A; transform: translateY(-1px); }

/* ---------- Job lock badge ---------- */
[data-testid="job-locked-badge"]:hover { background: #FFFBEB !important; }

/* ---------- Message modal scrollbar ---------- */
#klMsgModalBody::-webkit-scrollbar { width: 8px; }
#klMsgModalBody::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 4px; }

/* ---------- Notification badge animation when new arrives ---------- */
.notif-badge {
  transition: transform .2s;
}
.notif-badge.kl-pulse { animation: klBadgePulse .4s ease-out; }
@keyframes klBadgePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- Improved dashboard topbar overflow guard ---------- */
.dash-topbar { position: relative; z-index: 50; }
.dash-topbar .container { overflow: visible; }

/* ---------- Dashboard layout overflow fix (Priority 1) ---------- */
.dash-main { min-width: 0; } /* prevent grid overflow with long content */
.dash-main img, .dash-main pre, .dash-main code { max-width: 100%; }
.dash-main table { width: 100%; }
@media (max-width: 860px) {
  .dash-layout { gap: 16px !important; }
  .dash-main { padding: 0 4px; }
}

/* ---------- Stat grid mobile compact (extension to v3.8.4) ---------- */
@media (max-width: 380px) {
  .stat-grid { gap: 8px !important; }
  .stat-box  { padding: 10px !important; }
  .stat-val  { font-size: 20px !important; }
  .stat-icon { font-size: 18px !important; }
  .stat-name { font-size: 11px !important; }
}