/*
  Sakhi Manpower Design System — Components
  One canonical style per component, used everywhere (admin, portal, auth, public).
  Reads only tokens.css custom properties. No page should define its own button,
  card, badge, table or form style — extend a class here instead.
*/

/* ============ Buttons ============ */
.btn{font-weight:var(--font-weight-bold);border-radius:var(--radius-md);padding:.68rem 1.1rem;letter-spacing:-.01em;transition:transform var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{border-radius:var(--radius-sm);padding:.45rem .8rem;font-size:var(--font-size-sm)}
.btn-lg{padding:.85rem 1.4rem;font-size:var(--font-size-md)}
.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));border-color:transparent;box-shadow:0 12px 28px rgba(91,44,201,.24)}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#4d25b5,var(--color-primary));box-shadow:0 16px 34px rgba(91,44,201,.3)}
.btn-outline-primary{border-color:var(--color-border-strong);color:var(--color-primary);background:var(--color-surface)}
.btn-outline-primary:hover{background:var(--color-surface-2);border-color:var(--color-primary);color:var(--color-primary)}
.btn-secondary{background:var(--color-secondary);border-color:var(--color-secondary)}
.btn-success{background:var(--color-success);border-color:var(--color-success)}
.btn-danger{background:var(--color-error);border-color:var(--color-error)}
.btn-warning{background:var(--color-accent);border-color:var(--color-accent);color:#3c2a00}
.btn-light{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-sm);color:var(--color-text)}
.btn-soft{background:var(--color-surface-2);color:var(--color-primary);border:1px solid var(--color-border)}
.btn-soft:hover{background:var(--color-primary);color:var(--color-text-on-primary)}
.btn-icon{width:42px;height:42px;border-radius:var(--radius-md);display:inline-grid;place-items:center;padding:0}
.btn:disabled,.btn.disabled{opacity:.55;transform:none;box-shadow:none;cursor:not-allowed}

/* ============ Forms ============ */
label,.form-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text);margin-bottom:.4rem;display:inline-block}
.form-hint{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-top:.3rem}
.form-control,.form-select{min-height:46px;border-radius:var(--radius-md);border:1px solid #DDD6FE;padding:.68rem .9rem;background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-base);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.form-control:hover,.form-select:hover{border-color:var(--color-border-strong)}
.form-control:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--color-error)}
.invalid-feedback{color:var(--color-error);font-size:var(--font-size-xs)}
textarea.form-control{min-height:110px}
.input-group-text{border-radius:var(--radius-md);background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text-secondary)}
.form-check-input{width:1.15em;height:1.15em;border-radius:.35em;border-color:var(--color-border-strong)}
.form-check-input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}
.required-mark{color:var(--color-error);margin-left:.15rem}
fieldset.form-section{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-5)}
fieldset.form-section legend{width:auto;padding:0 var(--space-2);font-size:var(--font-size-md);font-weight:var(--font-weight-black);color:var(--color-primary-dark)}

/* Multi-step "smart form" shell (see js/smart-form-onboarding.js for behavior) */
.smart-progress{height:6px;border-radius:var(--radius-pill);background:var(--color-surface-2);overflow:hidden;margin-bottom:var(--space-4)}
.smart-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));transition:width var(--duration-base) var(--ease)}
.smart-step-nav{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}
.smart-step-nav button{border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);border-radius:var(--radius-pill);padding:.4rem .85rem;font-weight:var(--font-weight-bold);font-size:var(--font-size-xs)}
.smart-step-nav button.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.smart-step-nav button.done{color:var(--color-success);border-color:var(--color-success-border)}
.smart-form-step{display:none}
.smart-form-step.active{display:block;animation:uiFade var(--duration-base) var(--ease) both}
.smart-review-item{display:flex;justify-content:space-between;gap:var(--space-3);padding:.6rem 0;border-bottom:1px solid var(--color-border)}
.smart-review-item span{color:var(--color-text-secondary)}

/* ============ Cards ============ */
.ui-card,.card,.admin-panel,.form-card,.portal-widget{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease),box-shadow var(--duration-base) var(--ease),border-color var(--duration-base) var(--ease)}
.ui-card-hover:hover,.ui-card.hoverable:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.ui-card-body,.card-body{padding:var(--space-5)}
.ui-card-title,.card-title{font-weight:var(--font-weight-black);letter-spacing:-.02em;color:var(--color-text)}
.admin-panel h5,.admin-panel h4,.portal-widget h4{font-weight:var(--font-weight-black);color:var(--color-primary-dark)}

/* Stat / KPI card */
.stat-card{position:relative;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.stat-card .stat-icon{width:52px;height:52px;border-radius:var(--radius-md);display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));font-size:1.3rem;margin-bottom:var(--space-4)}
.stat-card small{display:block;color:var(--color-text-secondary);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.06em;font-size:var(--font-size-xs)}
.stat-card strong{display:block;font-size:var(--font-size-2xl);line-height:1;font-weight:var(--font-weight-black);color:var(--color-text);letter-spacing:-.03em;margin-top:var(--space-2)}
.stat-card .stat-trend{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-3);padding:.35rem .65rem;border-radius:var(--radius-pill);font-size:var(--font-size-xs);font-weight:var(--font-weight-black)}
.stat-trend.up{background:var(--color-success-bg);color:var(--color-success)}
.stat-trend.down{background:var(--color-error-bg);color:var(--color-error)}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.stat-card.tone-blue .stat-icon{background:linear-gradient(135deg,#2563EB,#06B6D4)}
.stat-card.tone-pink .stat-icon{background:linear-gradient(135deg,var(--color-secondary),#F43F5E)}
.stat-card.tone-gold .stat-icon{background:linear-gradient(135deg,var(--color-accent),#F97316)}
.stat-card.tone-green .stat-icon{background:linear-gradient(135deg,var(--color-success),#10B981)}
.stat-card.tone-purple .stat-icon{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light))}

/* ============ Tables ============ */
.table{border-collapse:separate;border-spacing:0 10px;--bs-table-bg:transparent}
.table thead th{border:0;color:var(--color-text-secondary);text-transform:uppercase;font-size:var(--font-size-xs);letter-spacing:.07em;font-weight:var(--font-weight-bold);background:transparent;white-space:nowrap}
.table tbody tr{box-shadow:var(--shadow-sm)}
.table tbody td{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:var(--space-3) var(--space-4);vertical-align:middle;color:var(--color-text)}
.table tbody td:first-child{border-left:1px solid var(--color-border);border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.table tbody td:last-child{border-right:1px solid var(--color-border);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.table-hover tbody tr:hover td{background:var(--color-surface-2)}
.table-responsive{border-radius:var(--radius-lg)}

/* Data-table shell (search/filter/bulk/export) — behavior in js/data-table-ux.js */
.dtux-table-shell{position:relative}
.dtux-table-meta{display:flex;justify-content:space-between;align-items:center;color:var(--color-text-secondary);font-size:var(--font-size-xs);margin-bottom:var(--space-2);padding:0 var(--space-1)}
.dtux-bulkbar{display:none;align-items:center;justify-content:space-between;background:var(--color-primary-dark);color:#fff;border-radius:var(--radius-md);padding:.6rem var(--space-4);margin-bottom:var(--space-3)}
.dtux-bulkbar.show{display:flex}
.dtux-select-cell{width:36px}
.dtux-empty,.dtux-no-results{display:none}
.dtux-no-results.dtux-empty{display:block}
.dtux-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);margin-bottom:var(--space-4)}
.dtux-toolbar .form-control,.dtux-toolbar .form-select{min-height:42px}
.dtux-search-wrap{position:relative;flex:1;min-width:220px}
.dtux-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--color-text-secondary)}
.dtux-search-wrap input{padding-left:38px}
.dtux-toolbar-actions{display:flex;gap:var(--space-2);margin-left:auto;flex-wrap:wrap}
tr.dtux-selected td{background:var(--color-surface-2)!important}
td.dtux-hidden-col,th.dtux-hidden-col{display:none}
.dtux-table.compact tbody td{padding:.45rem var(--space-3)}
.dtux-columns-menu{gap:.4rem;padding:var(--space-3);min-width:200px}
.dtux-columns-menu.show{display:grid}
.dtux-columns-menu label{display:flex;align-items:center;gap:.5rem;font-weight:var(--font-weight-regular);font-size:var(--font-size-sm)}

/* Mobile: convert dense tables into stacked cards instead of shrinking columns */
@media (max-width:767px){
  .dtux-table-wrap table.dtux-table thead{display:none}
  .dtux-table-wrap table.dtux-table,.dtux-table-wrap table.dtux-table tbody,.dtux-table-wrap table.dtux-table tr,.dtux-table-wrap table.dtux-table td{display:block;width:100%}
  .dtux-table-wrap table.dtux-table tr{margin-bottom:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--shadow-sm)}
  .dtux-table-wrap table.dtux-table td{border:0!important;padding:.35rem 0;display:flex;justify-content:space-between;gap:var(--space-3);text-align:right}
  .dtux-table-wrap table.dtux-table td.dtux-select-cell{justify-content:flex-start}
  .dtux-table-wrap table.dtux-table td[data-label]:before{content:attr(data-label);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);text-align:left}
}

/* ============ Badges / status chips ============ */
.badge{border-radius:var(--radius-pill);padding:.42rem .7rem;font-weight:var(--font-weight-black);font-size:var(--font-size-xs);letter-spacing:-.01em}
.status-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:.42rem .72rem;font-weight:var(--font-weight-black);font-size:var(--font-size-xs)}
.status-badge:before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor}
.badge-success,.status-success,.text-bg-success{background:var(--color-success-bg)!important;color:var(--color-success)!important}
.badge-warning,.status-warning,.text-bg-warning{background:var(--color-warning-bg)!important;color:var(--color-warning)!important}
.badge-danger,.status-danger,.text-bg-danger{background:var(--color-error-bg)!important;color:var(--color-error)!important}
.badge-info,.status-info,.text-bg-primary{background:var(--color-info-bg)!important;color:var(--color-info)!important}
.badge-purple,.status-purple{background:var(--color-surface-2)!important;color:var(--color-primary)!important}
.badge-neutral{background:#F1F0F4!important;color:var(--color-text-secondary)!important}

/* ============ Tabs ============ */
.nav-tabs{border:0;gap:var(--space-2)}
.nav-tabs .nav-link{border:1px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-text-secondary);font-weight:var(--font-weight-bold);background:var(--color-surface);padding:.55rem 1rem}
.nav-tabs .nav-link.active{background:var(--color-primary-dark);color:#fff;border-color:var(--color-primary-dark)}
.nav-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);border:0;margin-bottom:var(--space-4)}
.nav-pills .nav-link{border:1px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-text-secondary);font-weight:var(--font-weight-bold);background:var(--color-surface);padding:.55rem 1rem;font-size:var(--font-size-sm)}
.nav-pills .nav-link.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* ============ Mobile bottom tab bar (candidate/recruiter mobile-first pages) ============ */
.mobile-bottom-nav{display:none}
@media (max-width:767px){
  .mobile-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1010;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -10px 30px rgba(36,16,79,.1);padding:6px 4px}
  .mobile-bottom-nav button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--color-text-secondary);font-size:.68rem;font-weight:var(--font-weight-bold);padding:6px 2px;border-radius:var(--radius-sm)}
  .mobile-bottom-nav button i{font-size:1.05rem}
  .mobile-bottom-nav button.active{color:var(--color-primary)}
  .mobile-bottom-nav button.primary{color:#fff;background:var(--color-primary);margin:0 3px;border-radius:var(--radius-md)}
  body.has-mobile-bottom-nav{padding-bottom:64px}
}

/* ============ Breadcrumbs / pagination ============ */
.breadcrumb-mini{display:flex;align-items:center;gap:7px;font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:var(--font-weight-bold)}
.breadcrumb-mini a{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-black)}
.pagination .page-link{border-radius:var(--radius-sm);border-color:var(--color-border);color:var(--color-text);margin:0 2px}
.pagination .page-item.active .page-link{background:var(--color-primary);border-color:var(--color-primary)}

/* ============ Modals / Drawers ============ */
.modal-content{border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.modal-header{border-bottom:1px solid var(--color-border);padding:var(--space-5)}
.modal-header h5{font-weight:var(--font-weight-black);color:var(--color-primary-dark)}
.modal-body{padding:var(--space-5)}
.modal-footer{border-top:1px solid var(--color-border);padding:var(--space-4) var(--space-5)}

.ui-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--color-surface);box-shadow:var(--shadow-lg);transform:translateX(105%);transition:transform var(--duration-base) var(--ease);z-index:1050;overflow-y:auto;padding:var(--space-5)}
.ui-drawer.open{transform:translateX(0)}
.ui-drawer-overlay{position:fixed;inset:0;background:rgba(23,18,43,.45);opacity:0;pointer-events:none;transition:opacity var(--duration-base) var(--ease);z-index:1049}
.ui-drawer-overlay.open{opacity:1;pointer-events:auto}

/* ============ Toasts / Alerts ============ */
.ui-toast-stack{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:2000;display:grid;gap:var(--space-3)}
.ui-toast{min-width:260px;max-width:360px;background:var(--color-surface);border:1px solid var(--color-border);border-left:5px solid var(--color-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-4);color:var(--color-text);font-weight:var(--font-weight-bold);animation:uiToastIn var(--duration-base) var(--ease)}
.ui-toast.success{border-left-color:var(--color-success)}
.ui-toast.danger{border-left-color:var(--color-error)}
.ui-toast.warning{border-left-color:var(--color-warning)}
@keyframes uiToastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.alert{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

/* ============ Empty / loading states ============ */
.empty-state{border:1.5px dashed var(--color-border);border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--color-surface),var(--color-surface-2));padding:var(--space-7) var(--space-5);text-align:center;color:var(--color-text-secondary)}
.empty-state i{width:64px;height:64px;border-radius:var(--radius-lg);background:var(--color-surface-2);color:var(--color-primary);display:inline-grid;place-items:center;font-size:1.6rem;margin-bottom:var(--space-4)}
.empty-state h3,.empty-state h4{font-weight:var(--font-weight-black);color:var(--color-text)}
.empty-state p{max-width:440px;margin:0 auto}
.empty-state .btn{margin-top:var(--space-4)}

.skeleton{position:relative;overflow:hidden;background:var(--color-surface-2);border-radius:var(--radius-sm);min-height:16px}
.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:skeletonShimmer 1.4s infinite}
@keyframes skeletonShimmer{to{transform:translateX(100%)}}
.skeleton-card{border-radius:var(--radius-lg);padding:var(--space-5);background:var(--color-surface);box-shadow:var(--shadow-sm)}
.skeleton-row{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3)}

/* ============ Confirmation dialogs (native confirm() is triggered via [data-confirm] in app.js) ============ */
.confirm-dialog-body{color:var(--color-text-secondary)}

/* ============ File uploader ============ */
.file-drop{border:2px dashed var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;color:var(--color-text-secondary);background:var(--color-surface-2);cursor:pointer;transition:border-color var(--duration-fast),background var(--duration-fast)}
.file-drop:hover,.file-drop.dragover{border-color:var(--color-primary);background:var(--color-surface)}
.file-drop i{font-size:1.8rem;color:var(--color-primary);margin-bottom:var(--space-2)}
.file-drop .file-name{font-weight:var(--font-weight-bold);color:var(--color-text)}

/* ============ Inline contact quick-actions (call/whatsapp icons in tables) ============ */
.contact-actions{display:flex;gap:6px;margin-top:4px}
.contact-actions a{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;text-decoration:none}
.contact-actions a.call{background:var(--color-info-bg);color:var(--color-info)}
.contact-actions a.whatsapp{background:var(--color-success-bg);color:var(--color-success)}

/* ============ Site brand mark (logo image vs icon fallback, see site_brand_mark_html()) ============ */
.brand-logo-img{max-height:32px;max-width:160px;width:auto;height:auto;object-fit:contain;display:block}
.brand-logo:has(.brand-logo-img),.brand-mark:has(.brand-logo-img),.footer-mark:has(.brand-logo-img){background:none;box-shadow:none;width:auto;height:auto;padding:0}
.sidebar-brand .brand-mark .brand-logo-img{max-height:40px}
.auth-logo:has(.brand-logo-img){background:none;box-shadow:none}
.auth-logo .brand-logo-img{max-height:40px}

/* ============ Avatar / profile ============ */
.avatar-circle{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:var(--font-weight-black);background:linear-gradient(135deg,#fff,#efe5ff);color:var(--color-primary);flex:none}
.avatar-lg{width:72px;height:72px;font-size:1.4rem}

/* ============ Activity timeline ============ */
.ui-timeline{position:relative;padding-left:var(--space-6)}
.ui-timeline:before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--color-border)}
.ui-timeline-item{position:relative;padding-bottom:var(--space-5)}
.ui-timeline-item:before{content:"";position:absolute;left:-29px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--color-primary);border:3px solid var(--color-surface-2)}
.ui-timeline-item time{display:block;font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-bottom:2px}
.ui-timeline-item strong{color:var(--color-text)}
.ui-timeline-item p{margin:.2rem 0 0;color:var(--color-text-secondary)}

/* ============ Recruitment funnel strip ============ */
.funnel-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:var(--space-3)}
.funnel-stage{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);text-align:center}
.funnel-stage small{display:block;color:var(--color-text-secondary);font-weight:var(--font-weight-bold);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.03em}
.funnel-stage strong{display:block;font-size:1.4rem;color:var(--color-primary-dark);margin-top:4px}

/* ============ Module hero (simple title+action banner used by module overview pages) ============ */
.module-hero{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);align-items:center;background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));border-radius:var(--radius-xl);padding:var(--space-5) var(--space-6);color:#fff;box-shadow:var(--shadow-lg)}
.module-hero h2{color:#fff;margin:var(--space-2) 0}
.module-hero p{color:var(--color-text-on-dark);max-width:640px;margin:0}
.module-hero .eyebrow{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}

/* ============ Panel (dashboard content section) ============ */
.ui-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5);margin-bottom:var(--space-4)}
.ui-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}
.ui-panel-head h5{font-weight:var(--font-weight-black);color:var(--color-primary-dark);margin-bottom:2px}
.ui-panel-sub{color:var(--color-text-secondary);font-size:var(--font-size-sm)}
.ui-panel-tools{display:flex;gap:var(--space-2);align-items:center}

/* ============ Action list (dashboard quick actions) ============ */
.action-list{display:grid;gap:var(--space-2)}
.action-list a{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);font-weight:var(--font-weight-black)}
.action-list a:hover{background:var(--color-primary);color:#fff}
.action-list i{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-primary);display:grid;place-items:center}
.action-list a:hover i{background:rgba(255,255,255,.16);color:#fff}

/* ============ Recruitment Kanban pipeline (admin/recruitment_workspace.php) ============ */
.p42-hero{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);align-items:center;background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));border-radius:var(--radius-xl);padding:var(--space-6);color:#fff;box-shadow:var(--shadow-lg);margin-bottom:var(--space-4)}
.p42-hero h2{color:#fff;font-size:var(--font-size-xl);margin:var(--space-2) 0}
.p42-hero p{color:var(--color-text-on-dark);max-width:560px;margin:0}
.p42-hero-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.p42-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.p42-kpi{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}
.p42-kpi small{display:block;color:var(--color-text-secondary);font-weight:var(--font-weight-bold);font-size:var(--font-size-xs);text-transform:uppercase}
.p42-kpi strong{display:block;font-size:1.5rem;color:var(--color-primary-dark);margin:4px 0}
.p42-kpi em{font-style:normal;color:var(--color-text-secondary);font-size:var(--font-size-xs)}
.p42-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.p42-toolbar-left{display:flex;gap:var(--space-2);flex-wrap:wrap}
.p42-search{min-width:240px}
.p42-stage-select{min-width:170px}
.p42-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-4);align-items:start}
.p42-board-wrap{overflow-x:auto;padding-bottom:var(--space-3)}
.p42-board{display:grid;grid-auto-flow:column;grid-auto-columns:280px;gap:var(--space-3);min-height:120px}
.p42-column{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.p42-column-head{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.p42-column-head h6{font-size:var(--font-size-sm);font-weight:var(--font-weight-black);color:var(--color-primary-dark);text-transform:uppercase;letter-spacing:.03em;margin:0}
.p42-count{background:var(--color-primary);color:#fff;border-radius:999px;font-size:.7rem;font-weight:var(--font-weight-black);padding:2px 8px}
.p42-cards{display:flex;flex-direction:column;gap:var(--space-2);min-height:60px}
.p42-candidate{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);cursor:pointer;transition:transform var(--duration-fast),box-shadow var(--duration-fast),border-color var(--duration-fast)}
.p42-candidate:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}
.p42-card-top{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.p42-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff;display:grid;place-items:center;font-weight:var(--font-weight-black);flex:none}
.p42-card-name{font-weight:var(--font-weight-black);color:var(--color-text);font-size:.92rem;line-height:1.2}
.p42-card-role{color:var(--color-text-secondary);font-size:.78rem}
.p42-meta{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:var(--color-text-secondary);margin-bottom:var(--space-2)}
.p42-meta i{width:14px;color:var(--color-primary);margin-right:4px}
.p42-card-actions{display:flex;gap:6px}
.p42-card-actions select{font-size:.78rem;min-height:36px;padding:.3rem .5rem}
.p42-card-actions button{min-height:36px}
.p42-empty{text-align:center;color:var(--color-text-secondary);padding:var(--space-4);font-size:.85rem}
.p42-empty i{display:block;font-size:1.4rem;margin-bottom:6px;color:var(--color-border-strong)}
.p42-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);box-shadow:var(--shadow-sm)}
.p42-panel-head h5{font-weight:var(--font-weight-black);color:var(--color-primary-dark);margin-bottom:2px}
.p42-sub{color:var(--color-text-secondary);font-size:var(--font-size-xs)}
.p42-list-item{padding:var(--space-2) 0;border-bottom:1px solid var(--color-border)}
.p42-list-item:last-child{border-bottom:0}
.p42-list-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.p42-list-row small{display:block;color:var(--color-text-secondary);font-size:.72rem}
.p42-overlay{position:fixed;inset:0;background:rgba(23,18,43,.45);opacity:0;pointer-events:none;transition:opacity var(--duration-base);z-index:1049}
.p42-overlay.open{opacity:1;pointer-events:auto}
.p42-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--color-surface);box-shadow:var(--shadow-lg);transform:translateX(105%);transition:transform var(--duration-base) var(--ease);z-index:1050;overflow-y:auto}
.p42-drawer.open{transform:translateX(0)}
.p42-drawer-head{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));color:#fff;padding:var(--space-5)}
.p42-close{background:rgba(255,255,255,.15);border:0;color:#fff;width:32px;height:32px;border-radius:50%}
.p42-profile{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.p42-profile .p42-avatar{width:52px;height:52px;background:#fff;color:var(--color-primary);font-size:1.2rem}
.p42-drawer-body{padding:var(--space-5)}
.p42-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}
.p42-detail small{display:block;color:var(--color-text-secondary);font-size:.7rem;text-transform:uppercase;font-weight:var(--font-weight-bold)}
.p42-detail strong{color:var(--color-text)}
.p42-section-title{font-weight:var(--font-weight-black);color:var(--color-primary-dark);font-size:.85rem;text-transform:uppercase;margin:var(--space-3) 0 6px}
.p42-note{background:var(--color-surface-2);border-radius:var(--radius-sm);padding:var(--space-3);color:var(--color-text-secondary);font-size:.88rem;min-height:20px}
@media (max-width:1199px){ .p42-shell{grid-template-columns:1fr} .p42-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .p42-hero{padding:var(--space-4)} .p42-kpis{grid-template-columns:1fr 1fr} .p42-board{grid-auto-columns:78vw} }

/* ============ Utility ============ */
.min-w-0{min-width:0}
.ux48-skip-link{position:absolute;left:-999px;top:-999px;background:var(--color-primary-dark);color:#fff;padding:.6rem 1rem;border-radius:var(--radius-sm);z-index:3000}
.ux48-skip-link:focus{left:var(--space-3);top:var(--space-3)}
.ux48-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media (max-width:767px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-responsive{border-radius:var(--radius-md)}
  .ui-toast-stack{left:var(--space-3);right:var(--space-3);bottom:var(--space-3)}
  .ui-toast{min-width:0;max-width:none}
}
@media (max-width:480px){
  .stat-grid{grid-template-columns:1fr}
}
@media print{
  .ui-toast-stack,.ui-drawer,.ui-drawer-overlay{display:none!important}
}