/* ========================================================================
   UI-7 — Employee Portal UX
   ======================================================================== */
.employee-page.ui7-employee-page { width: min(1440px,100%); margin-inline:auto; padding-bottom:36px; }
.employee-hero, .employee-page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:26px 32px 20px; }
.employee-hero h2, .employee-page-header h2 { margin:5px 0 6px; color:var(--text-strong); font-size:28px; letter-spacing:-.03em; }
.employee-hero .muted, .employee-page-header .muted { margin:0; max-width:760px; }
.employee-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
.employee-stat-grid { padding-bottom:20px; }
.employee-stat-grid .stat-card { min-height:96px; }
.employee-stat-grid .stat-card:hover { transform:translateY(-1px); }
.employee-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:16px; padding:0 32px; }
.employee-panel { min-width:0; }
.employee-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.employee-quick-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:78px; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:inherit; text-decoration:none; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.employee-quick-card:hover { transform:translateY(-1px); border-color:var(--line-strong); background:var(--surface); }
.employee-quick-card strong,.employee-quick-card small { display:block; }
.employee-quick-card small { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.45; }
.employee-quick-card b { color:var(--muted-2); font-size:18px; }
.employee-quick-icon,.employee-list-icon,.employee-side-icon,.employee-app-mark { display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:var(--info-bg); color:var(--primary-2); font-weight:800; }
.employee-quick-icon { width:36px; height:36px; }
.employee-list { display:grid; gap:0; }
.employee-list-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.employee-list-item:last-child { border-bottom:0; }
.employee-list-main { min-width:0; display:flex; align-items:center; gap:10px; }
.employee-list-icon { width:34px; height:34px; }
.employee-list-main strong { color:var(--text-strong); }
.employee-list-main p { margin:3px 0 0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.text-link { color:var(--primary-2); font-size:13px; font-weight:700; text-decoration:none; }
.employee-page-header { align-items:flex-start; }
.employee-surface { margin:0 32px 20px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.employee-surface-header { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); }
.employee-surface-header strong,.employee-surface-header span { display:block; }
.employee-surface-header strong { color:var(--text-strong); }
.employee-surface-header div span { margin-top:3px; color:var(--muted); font-size:12px; }
.employee-table { min-width:780px; }
.employee-table th { background:var(--surface-2); }
.mono-text { font-family:var(--font-mono); font-size:12px; }
.employee-application-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0 32px; }
.employee-application-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.employee-application-top { display:flex; align-items:flex-start; gap:11px; }
.employee-app-mark { width:42px; height:42px; border-radius:12px; }
.employee-app-title { min-width:0; flex:1; }
.employee-app-title h3 { margin:4px 0 0; font-size:17px; color:var(--text-strong); }
.employee-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.employee-application-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.employee-application-meta strong { color:var(--text); font-weight:700; }
.employee-profile-grid,.employee-security-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; padding:0 32px; align-items:start; }
.employee-profile-grid .employee-surface,.employee-security-grid .employee-surface { margin:0; }
.employee-form { padding:20px; }
.employee-side-card { padding:20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.employee-side-icon { width:42px; height:42px; margin-bottom:14px; }
.employee-side-card h3 { margin:0 0 7px; color:var(--text-strong); }
.employee-side-card p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.6; }
.employee-side-card .secondary { width:100%; }
.employee-notification-list { display:grid; }
.employee-notification { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:12px; align-items:start; padding:16px 18px; border-bottom:1px solid var(--line); }
.employee-notification:last-child { border-bottom:0; }
.employee-notification.is-unread { background:color-mix(in srgb,var(--info-bg) 40%,transparent); }
.employee-notification-dot { width:8px; height:8px; margin-top:7px; border-radius:50%; background:transparent; }
.employee-notification.is-unread .employee-notification-dot { background:var(--primary-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--info-bg) 75%,transparent); }
.employee-notification-main { min-width:0; }
.employee-notification-title { display:flex; align-items:center; gap:8px; }
.employee-notification-main p { margin:5px 0 5px; color:var(--muted); font-size:13px; line-height:1.55; }
.employee-notification-main small { color:var(--muted-2); font-size:11px; }
.employee-notification-actions { display:flex; gap:7px; white-space:nowrap; }
.employee-loading { min-height:150px; display:grid; place-items:center; color:var(--muted); padding:25px; text-align:center; }
.employee-empty { min-height:150px; display:grid; place-content:center; gap:5px; padding:28px; text-align:center; color:var(--muted); }
.employee-empty-wide { grid-column:1/-1; border:1px dashed var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); }
.employee-empty strong { color:var(--text-strong); }
.employee-empty.error { color:var(--danger); }
.spinner-dot { width:18px; height:18px; border:2px solid var(--line-strong); border-top-color:var(--primary-2); border-radius:50%; animation:ui7spin .7s linear infinite; }
@keyframes ui7spin { to { transform:rotate(360deg); } }
.small { min-height:34px !important; padding:7px 10px !important; font-size:12px !important; }

@media (max-width:1100px) {
  .employee-dashboard-grid { grid-template-columns:1fr; }
  .employee-application-grid { grid-template-columns:1fr; }
  .employee-profile-grid,.employee-security-grid { grid-template-columns:1fr; }
  .employee-side-card { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; }
  .employee-side-icon { grid-row:span 2; margin:0; }
  .employee-side-card p { margin-bottom:8px; }
  .employee-side-card .secondary { width:max-content; }
}
@media (max-width:850px) {
  .employee-hero,.employee-page-header { padding-inline:20px; }
  .employee-dashboard-grid,.employee-application-grid,.employee-profile-grid,.employee-security-grid { padding-inline:20px; }
  .employee-surface { margin-inline:20px; }
}
@media (max-width:640px) {
  .employee-hero,.employee-page-header { flex-direction:column; align-items:stretch; padding:18px 16px 16px; }
  .employee-hero h2,.employee-page-header h2 { font-size:24px; }
  .employee-hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .employee-hero-actions > * { width:100%; }
  .employee-stat-grid { grid-template-columns:1fr 1fr; padding-inline:16px; }
  .employee-dashboard-grid,.employee-application-grid,.employee-profile-grid,.employee-security-grid { padding-inline:16px; }
  .employee-quick-grid { grid-template-columns:1fr; }
  .employee-surface { margin-inline:16px; }
  .employee-notification { grid-template-columns:8px minmax(0,1fr); }
  .employee-notification-actions { grid-column:2; flex-wrap:wrap; }
  .employee-side-card { display:block; }
  .employee-side-icon { margin-bottom:12px; }
}