/* M&S Investment Limited — HRMS design system */
:root{
  --mns-navy: #01264C;
  --mns-navy-light: #0A2E58;
  --mns-blue: #0058E2;
  --mns-blue-hover: #0048BC;
  --mns-bg: #F5F7FA;
  --mns-card: #FFFFFF;
  --mns-border: #E7EAF0;
  --mns-text: #1F2937;
  --mns-muted: #6B7280;
  --mns-green: #16A34A;
  --mns-green-bg: #DCFCE7;
  --mns-purple: #7C3AED;
  --mns-purple-bg: #EDE7FE;
  --mns-orange: #F59E0B;
  --mns-orange-bg: #FEF3E2;
  --mns-red: #DC2626;
  --mns-red-bg: #FEE2E2;
}

body{
  background: var(--mns-bg);
  color: var(--mns-text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

/* ---------- Layout ---------- */
.mns-shell{ display:flex; min-height:100vh; }

.mns-sidebar{
  width: 260px;
  background: var(--mns-navy);
  color:#CBD5E1;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:40;
  transition: transform .25s ease;
}
.mns-sidebar-brand{
  display:flex; align-items:center; gap:.65rem;
  padding: 20px 20px 12px 20px;
}
.mns-sidebar-brand-icon{
  width:42px;height:42px;border-radius:10px;
  background: #fff;
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:20px; padding:4px; flex-shrink:0;
}
.mns-sidebar-brand-icon img{ width:100%;height:100%;object-fit:contain;}
.mns-sidebar-brand-text b{ color:#fff; font-size:15px; display:block; line-height:1.1;}
.mns-sidebar-brand-text span{ color:#93A5C3; font-size:10px; letter-spacing:.4px;}
.mns-sidebar-label{
  font-size:11px; letter-spacing:1px; color:#5E76A0; padding:14px 20px 6px;
  text-transform:uppercase;
}
.mns-nav{ flex:1; overflow-y:auto; padding-bottom:10px;}
.mns-nav-link{
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; margin:2px 12px; border-radius:10px;
  color:#B7C4DC; text-decoration:none; font-size:13.5px; font-weight:500;
  transition: all .15s ease;
}
.mns-nav-link i{ font-size:18px; line-height:1;}
.mns-nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.mns-nav-link.active{ background: var(--mns-blue); color:#fff; box-shadow: 0 4px 10px rgba(0,88,226,.35);}
.mns-nav-badge{
  margin-left:auto; background:rgba(255,255,255,.15); color:#fff; font-size:10.5px;
  padding:1px 7px; border-radius:20px;
}
.mns-sidebar-footer{
  padding:16px 18px; border-top:1px solid rgba(255,255,255,.08);
}
.mns-status-pill{
  display:flex; align-items:center; gap:8px; font-size:12px; color:#93E6B7;
  background: rgba(255,255,255,.05); padding:8px 10px; border-radius:10px; margin-bottom:8px;
}
.mns-status-dot{ width:8px;height:8px;border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.2);}
.mns-copyright{ font-size:10.5px; color:#5E76A0; line-height:1.4;}

.mns-main{ margin-left:260px; flex:1; min-width:0; display:flex; flex-direction:column;}
body.sidebar-collapsed .mns-sidebar{ transform: translateX(-260px); }
body.sidebar-collapsed .mns-main{ margin-left:0; }

.mns-topbar{
  height:66px; background:#fff; border-bottom:1px solid var(--mns-border);
  display:flex; align-items:center; gap:16px; padding:0 22px; position:sticky; top:0; z-index:30;
}
.mns-burger{
  border:none;background:transparent;font-size:20px;color:#374151;cursor:pointer;
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.mns-burger:hover{ background:#F1F5F9; }
.mns-search{
  flex:1; max-width:520px; position:relative;
}
.mns-search input{
  width:100%; border:1px solid var(--mns-border); background:#F8FAFC; border-radius:10px;
  padding:9px 14px 9px 38px; font-size:13.5px; outline:none;
}
.mns-search input:focus{ border-color: var(--mns-blue); background:#fff; box-shadow:0 0 0 3px rgba(0,88,226,.12);}
.mns-search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9CA3AF;}
.mns-topbar-right{ display:flex; align-items:center; gap:8px; margin-left:auto;}
.mns-icon-btn{
  position:relative; width:40px;height:40px;border-radius:10px;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;color:#4B5563;font-size:19px;cursor:pointer;
}
.mns-icon-btn:hover{ background:#F1F5F9;}
.mns-icon-badge{
  position:absolute; top:2px; right:2px; background:var(--mns-red); color:#fff; font-size:9.5px;
  min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center; padding:0 3px;
}
.mns-user{ display:flex; align-items:center; gap:10px; padding:4px 8px 4px 4px; border-radius:12px; cursor:pointer;}
.mns-user:hover{ background:#F1F5F9;}
.mns-avatar{
  width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,var(--mns-blue),#4F8CFF);
  color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-size:14px; overflow:hidden;
}
.mns-avatar img{ width:100%;height:100%;object-fit:cover;}
.mns-user-name{ font-size:13.5px; font-weight:600; color:#111827; line-height:1.1;}
.mns-user-role{ font-size:11px; color:#9CA3AF;}

.mns-content{ padding:26px 28px 60px; }

/* ---------- Cards ---------- */
.mns-card{
  background:var(--mns-card); border:1px solid var(--mns-border); border-radius:14px;
  padding:20px; box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
.mns-stat-card{ display:flex; flex-direction:column; gap:10px;}
.mns-stat-icon{
  width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center;font-size:21px;
}
.mns-stat-value{ font-size:26px; font-weight:700; color:#111827; line-height:1;}
.mns-stat-title{ font-size:13px; color:#374151; font-weight:600;}
.mns-stat-sub{ font-size:11.5px; color:#9CA3AF;}
.mns-stat-link{ font-size:12px; color:var(--mns-blue); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:3px;}
.mns-stat-link:hover{ text-decoration:underline; }

.mns-section-title{ font-size:15px; font-weight:700; color:#111827;}
.mns-section-sub{ font-size:12px; color:#9CA3AF;}
.mns-link-sm{ font-size:12.5px; color:var(--mns-blue); font-weight:600; text-decoration:none;}

.mns-quick-action{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:14px 8px; border-radius:12px; border:1px solid var(--mns-border); background:#fff; text-decoration:none;
  color:#374151; font-size:12px; font-weight:600; transition:.15s;
}
.mns-quick-action:hover{ border-color:var(--mns-blue); background:#F5F9FF; color:var(--mns-blue); transform:translateY(-1px);}
.mns-quick-action .qi{ width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;}

.mns-approval-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--mns-border);}
.mns-approval-item:last-child{ border-bottom:none;}
.mns-approval-icon{ width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px; flex-shrink:0;}
.mns-approval-title{ font-size:13px; font-weight:600; color:#111827;}
.mns-approval-sub{ font-size:11.5px; color:#9CA3AF;}
.mns-approval-count{ background:#EEF2FF; color:var(--mns-blue); font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; margin-left:auto;}

.mns-activity-item{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--mns-border);}
.mns-activity-item:last-child{ border-bottom:none;}
.mns-activity-icon{ width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px; flex-shrink:0;}
.mns-activity-text{ font-size:13px; color:#1F2937; font-weight:500;}
.mns-activity-time{ font-size:11px; color:#9CA3AF; white-space:nowrap; margin-left:auto;}

.mns-event-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--mns-border);}
.mns-event-item:last-child{ border-bottom:none;}
.mns-event-date{
  width:46px; text-align:center; background:#F5F9FF; border-radius:9px; padding:6px 2px; flex-shrink:0;
}
.mns-event-date .mo{ font-size:9.5px; font-weight:700; color:var(--mns-blue); text-transform:uppercase;}
.mns-event-date .dd{ font-size:15px; font-weight:800; color:#111827; line-height:1.1;}
.mns-event-title{ font-size:13px; font-weight:600; color:#111827;}
.mns-event-sub{ font-size:11.5px; color:#9CA3AF;}
.mns-event-time{ font-size:11px; color:#9CA3AF; margin-left:auto; white-space:nowrap;}

.badge-status{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block;}
.badge-active{ background:var(--mns-green-bg); color:var(--mns-green);}
.badge-pending{ background:var(--mns-orange-bg); color:var(--mns-orange);}
.badge-inactive, .badge-terminated, .badge-rejected{ background:var(--mns-red-bg); color:var(--mns-red);}
.badge-probation{ background:#E0E7FF; color:#4338CA;}

.btn-mns-primary{
  background:var(--mns-blue); border:none; color:#fff; font-weight:600; font-size:13.5px;
  padding:9px 18px; border-radius:10px; display:inline-flex; align-items:center; gap:6px;
}
.btn-mns-primary:hover{ background:var(--mns-blue-hover); color:#fff;}
.btn-mns-outline{
  background:#fff; border:1px solid var(--mns-border); color:#374151; font-weight:600; font-size:13.5px;
  padding:8px 16px; border-radius:10px; display:inline-flex; align-items:center; gap:6px;
}
.btn-mns-outline:hover{ border-color:var(--mns-blue); color:var(--mns-blue);}
.btn-mns-danger{ background:var(--mns-red); border:none; color:#fff; font-weight:600; font-size:13.5px; padding:8px 16px;border-radius:10px;}

.mns-table{ width:100%; border-collapse:collapse; font-size:13px;}
.mns-table thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#9CA3AF;
  border-bottom:1px solid var(--mns-border); padding:10px 12px; background:#FAFBFC;
}
.mns-table tbody td{ padding:12px; border-bottom:1px solid var(--mns-border); vertical-align:middle;}
.mns-table tbody tr:hover{ background:#F9FAFB;}
.mns-avatar-sm{
  width:32px;height:32px;border-radius:50%; background:linear-gradient(135deg,var(--mns-blue),#4F8CFF);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;
}

/* Modal overrides to match design */
.modal-content{ border-radius:16px; border:none; box-shadow:0 24px 60px rgba(1,38,76,.22);}
.modal-header{ border-bottom:1px solid var(--mns-border); padding:18px 22px;}
.mns-modal-header{ background:#FAFBFC; border-radius:16px 16px 0 0;}
.mns-modal-icon{
  width:42px;height:42px;border-radius:12px; flex-shrink:0;
  background:#DCE9FF; color:var(--mns-blue); font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.mns-modal-subtitle{ font-size:12px; color:#9CA3AF; margin-top:1px;}
.modal-title{ font-weight:700; font-size:16px; color:#111827;}
.modal-body{ padding:22px; max-height:calc(100vh - 220px); overflow-y:auto;}
.modal-footer{ border-top:1px solid var(--mns-border); padding:14px 22px;}
.form-label{ font-size:12.5px; font-weight:600; color:#374151; margin-bottom:5px;}
.form-label .req{ color:var(--mns-red); margin-left:2px;}
.form-control, .form-select{
  border-radius:9px; border:1px solid var(--mns-border); font-size:13.5px; padding:9px 12px;
}
.form-control:focus, .form-select:focus{ border-color:var(--mns-blue); box-shadow:0 0 0 3px rgba(0,88,226,.12);}
.form-text{ font-size:11.5px; color:#9CA3AF; margin-top:3px;}
.form-check-input{ cursor:pointer;}
.form-check-input:checked{ background-color:var(--mns-blue); border-color:var(--mns-blue);}
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(0,88,226,.12);}

/* ---------- Form sections (used inside modals for grouped fields) ---------- */
.mns-form-section{
  background:#FAFBFC; border:1px solid var(--mns-border); border-radius:12px;
  padding:18px 18px 6px; margin-bottom:16px;
}
.mns-form-section:last-of-type{ margin-bottom:0;}
.mns-form-section-title{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color:#374151; text-transform:uppercase; letter-spacing:.4px; margin-bottom:14px;
}
.mns-form-section-title i{ color:var(--mns-blue); font-size:15px;}

/* ---------- Numbered wizard stepper (Add Employee, etc.) ---------- */
.mns-wizard-steps{ display:flex; align-items:center; margin-bottom:22px; padding:0 4px;}
.mns-wizard-step{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; flex-shrink:0;}
.mns-wizard-dot{
  width:32px; height:32px; border-radius:50%; background:#F1F5F9; color:#94A3B8; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; border:2px solid #F1F5F9; transition:.2s;
}
.mns-wizard-label{ font-size:11px; font-weight:600; color:#94A3B8; white-space:nowrap;}
.mns-wizard-step.active .mns-wizard-dot{ background:var(--mns-blue); border-color:var(--mns-blue); color:#fff; box-shadow:0 0 0 4px rgba(0,88,226,.12);}
.mns-wizard-step.active .mns-wizard-label{ color:var(--mns-blue);}
.mns-wizard-step.done .mns-wizard-dot{ background:var(--mns-green); border-color:var(--mns-green); color:#fff;}
.mns-wizard-step.done .mns-wizard-dot::after{ content:"\2713";}
.mns-wizard-step.done .mns-wizard-dot{ font-size:0;}
.mns-wizard-step.done .mns-wizard-label{ color:var(--mns-green);}
.mns-wizard-line{ flex:1; height:2px; background:#F1F5F9; margin:0 8px 20px;}

/* ---------- Page-level tab strip (e.g. employee detail page) ---------- */
.mns-page-tabs{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--mns-border); margin-bottom:20px; padding-bottom:0;}
.mns-page-tab{
  border:none; background:transparent; color:#64748B; font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:9px 9px 0 0; cursor:pointer; display:flex; align-items:center; gap:7px;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:.15s;
}
.mns-page-tab i{ font-size:16px;}
.mns-page-tab:hover:not(.active){ color:#374151; background:#F8FAFC;}
.mns-page-tab.active{ color:var(--mns-blue); border-bottom-color:var(--mns-blue); background:#F5F9FF;}

/* ---------- Professional pill tabs used in modals ---------- */
.mns-tabs{ display:flex; gap:6px; background:#F1F5F9; border-radius:11px; padding:4px; margin-bottom:18px;}
.mns-tabs .mns-tab{
  flex:1; text-align:center; border:none; background:transparent; color:#64748B;
  font-size:12.5px; font-weight:600; padding:9px 10px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:.15s;
}
.mns-tabs .mns-tab i{ font-size:15px;}
.mns-tabs .mns-tab.active{ background:#fff; color:var(--mns-blue); box-shadow:0 1px 3px rgba(16,24,40,.08);}
.mns-tabs .mns-tab:hover:not(.active){ color:#374151;}

.mns-avatar-upload{
  width:84px;height:84px;border-radius:16px; background:#EEF2FF; border:2px dashed #C7D6F5;
  display:flex;align-items:center;justify-content:center; color:var(--mns-blue); font-size:28px;
  position:relative; overflow:hidden; flex-shrink:0; cursor:pointer;
}
.mns-avatar-upload img{ width:100%;height:100%;object-fit:cover;}
.mns-avatar-upload input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer;}
.mns-form-sticky-footer{
  position:sticky; bottom:-22px; margin:18px -22px -22px; padding:14px 22px;
  background:#fff; border-top:1px solid var(--mns-border); border-radius:0 0 16px 16px;
}

.mns-leave-days-badge{
  display:inline-flex; align-items:center; gap:6px; background:#EEF2FF; color:var(--mns-blue);
  font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:20px;
}
.mns-period-preview{
  display:flex; align-items:center; gap:8px; background:#F5F9FF; border:1px dashed #C7D6F5;
  color:var(--mns-blue); font-size:12.5px; font-weight:600; padding:10px 14px; border-radius:10px; margin-top:10px;
}
.mns-stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--mns-border); border-radius:9px; overflow:hidden;}
.mns-stepper button{
  width:38px; height:38px; border:none; background:#F8FAFC; color:var(--mns-blue); font-size:16px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.mns-stepper button:hover{ background:#EEF2FF;}
.mns-stepper input{ border:none; text-align:center; font-weight:700; font-size:14px; flex:1; min-width:0; padding:9px 4px;}
.mns-stepper input:focus{ outline:none; box-shadow:none;}
.mns-req-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--mns-purple-bg); color:var(--mns-purple);
  font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:20px;
}
.badge-on_leave{ background:#E0E7FF; color:#4338CA;}
.badge-suspended{ background:var(--mns-red-bg); color:var(--mns-red);}
.badge-resigned{ background:#F1F5F9; color:#64748B;}
.badge-approved{ background:var(--mns-green-bg); color:var(--mns-green);}
.badge-cancelled{ background:#F1F5F9; color:#64748B;}
.badge-completed{ background:var(--mns-green-bg); color:var(--mns-green);}
.badge-processing, .badge-processed, .badge-pending_approval{ background:var(--mns-orange-bg); color:var(--mns-orange);}
.badge-draft{ background:#F1F5F9; color:#64748B;}
.badge-open{ background:var(--mns-green-bg); color:var(--mns-green);}
.badge-closed{ background:#F1F5F9; color:#64748B;}
.badge-requested{ background:var(--mns-orange-bg); color:var(--mns-orange);}

.mns-auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at top left, #0A2E58, #01264C 60%);
  padding:20px;
}
.mns-auth-card{ background:#fff; border-radius:18px; padding:38px 36px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3);}

/* ---------- Split-screen login ---------- */
.mns-login-shell{ min-height:100vh; display:flex;}
.mns-login-brand-panel{
  flex:1; background:linear-gradient(160deg,var(--mns-navy) 0%,#04315E 55%,#0A2E58 100%);
  display:flex; align-items:center; justify-content:center; padding:60px; position:relative; overflow:hidden;
}
.mns-login-brand-panel::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  border:1px solid rgba(255,255,255,.06); top:-160px; right:-160px;
}
.mns-login-brand-panel::after{
  content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  border:1px solid rgba(255,255,255,.06); bottom:-120px; left:-100px;
}
.mns-login-blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none;
  animation: mns-float 14s ease-in-out infinite;
}
.mns-login-blob.b1{ width:340px; height:340px; background:#0058E2; top:-80px; left:-60px; animation-delay:0s;}
.mns-login-blob.b2{ width:260px; height:260px; background:#F59E0B; bottom:-60px; right:10%; animation-delay:-5s;}
.mns-login-blob.b3{ width:200px; height:200px; background:#7C3AED; bottom:20%; left:20%; animation-delay:-9s;}
@keyframes mns-float{
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(20px,-24px) scale(1.06); }
  66% { transform: translate(-16px,16px) scale(0.96); }
}
.mns-login-brand-inner{ position:relative; z-index:1; max-width:420px; animation: mns-fade-up .7s ease both;}
.mns-login-mark{ width:76px; height:auto; background:#fff; padding:10px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.mns-login-feature-list{ display:flex; flex-direction:column; gap:12px;}
.mns-login-feature-list div{ display:flex; align-items:center; gap:10px; color:#CBD5E1; font-size:13px; opacity:0; animation: mns-fade-up .6s ease both;}
.mns-login-feature-list div:nth-child(1){ animation-delay:.25s;}
.mns-login-feature-list div:nth-child(2){ animation-delay:.38s;}
.mns-login-feature-list div:nth-child(3){ animation-delay:.51s;}
.mns-login-feature-list i{ color:#4F8CFF; font-size:17px;}
.mns-login-form-panel{
  width:460px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:#F5F7FA; padding:24px;
}
.mns-login-form-panel .mns-auth-card{ box-shadow:0 10px 40px rgba(1,38,76,.08); border:1px solid var(--mns-border); animation: mns-fade-up .7s ease .1s both;}
.mns-login-wordmark{ height:44px; width:auto;}
@keyframes mns-fade-up{
  from { opacity:0; transform: translateY(14px); }
  to { opacity:1; transform: translateY(0); }
}
.mns-input-icon{ position:relative;}
.mns-input-icon i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9CA3AF; font-size:16px; transition:color .15s;}
.mns-input-icon input{ padding-left:36px; transition: box-shadow .15s, border-color .15s;}
.mns-input-icon input:focus + i, .mns-input-icon input:focus ~ i{ color:var(--mns-blue);}

.mns-demo-panel{ border:1px dashed var(--mns-border); border-radius:12px; overflow:hidden;}
.mns-demo-toggle{
  width:100%; display:flex; align-items:center; gap:8px; background:#FAFBFC; border:none;
  padding:10px 14px; font-size:12px; font-weight:600; color:#64748B; cursor:pointer;
}
.mns-demo-toggle:hover{ background:#F1F5F9;}
.mns-demo-list{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; background:#fff;}
.mns-demo-list div{ font-size:12px; color:#374151; display:flex; align-items:center; gap:8px;}
.mns-demo-list .badge-status{ min-width:66px; text-align:center;}

@media (max-width: 860px){
  .mns-login-shell{ flex-direction:column;}
  .mns-login-brand-panel{ padding:40px 24px; min-height:220px;}
  .mns-login-feature-list{ display:none;}
  .mns-login-form-panel{ width:100%;}
}

.mns-page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}

@media (max-width: 991px){
  .mns-sidebar{ transform: translateX(-260px); }
  .mns-main{ margin-left:0; }
  body.sidebar-open .mns-sidebar{ transform:translateX(0); }
  .mns-search{ display:none; }
}

.toast-mns{ border-radius:12px; border:none; box-shadow:0 10px 30px rgba(0,0,0,.15);}

/* ---------- Payslip document viewer ---------- */
.mns-payslip-frame{
  background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 20px rgba(1,38,76,.08);
}
.mns-payslip-frame table{ border-collapse:collapse;}

/* ---------- Global polish: motion, elevation, focus ---------- */
.btn-mns-primary, .btn-mns-outline, .btn-mns-danger{
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-mns-primary:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,88,226,.28);}
.btn-mns-primary:active{ transform: translateY(0); box-shadow:0 2px 6px rgba(0,88,226,.25);}
.btn-mns-outline:hover{ transform: translateY(-1px); box-shadow:0 4px 12px rgba(16,24,40,.08);}
.btn-mns-danger:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(220,38,38,.25);}

.mns-card{ transition: box-shadow .2s ease, transform .2s ease;}
.mns-stat-card:hover{ box-shadow:0 8px 24px rgba(1,38,76,.08); transform: translateY(-2px);}
.mns-stat-icon{ transition: transform .2s ease;}
.mns-stat-card:hover .mns-stat-icon{ transform: scale(1.08) rotate(-4deg);}

.mns-quick-action{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;}
.mns-quick-action:hover{ box-shadow:0 8px 20px rgba(0,88,226,.14);}
.mns-quick-action:active{ transform: translateY(0) scale(.98);}
.mns-quick-action .qi{ transition: transform .2s ease;}
.mns-quick-action:hover .qi{ transform: scale(1.1);}

.mns-nav-link{ position:relative; overflow:hidden;}
.mns-nav-link:not(.active)::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mns-blue);
  transform: scaleY(0); transition: transform .15s ease; transform-origin:center;
}
.mns-nav-link:hover:not(.active)::before{ transform: scaleY(1);}

/* Buttons show a spinner via JS already; add a subtle disabled fade */
.btn-mns-primary:disabled, .btn-mns-outline:disabled, .btn-mns-danger:disabled{ opacity:.7; cursor:progress;}

/* Modal entrance polish */
.modal.fade .modal-dialog{ transition: transform .25s cubic-bezier(.34,1.4,.64,1), opacity .2s ease;}

/* Custom scrollbar for modal bodies and tables */
.modal-body::-webkit-scrollbar, .table-responsive::-webkit-scrollbar{ width:8px; height:8px;}
.modal-body::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb{ background:#D9E0EA; border-radius:20px;}
.modal-body::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track{ background:transparent;}

/* Table row hover lift */
.mns-table tbody tr{ transition: background-color .12s ease;}

/* Toast slide/pop */
.toast-mns{ animation: mns-toast-in .25s ease both;}
@keyframes mns-toast-in{ from{ opacity:0; transform: translateY(8px) scale(.98);} to{ opacity:1; transform:none;} }

/* Page content fade-in on load */
.mns-content > *{ animation: mns-fade-up .35s ease both;}

/* Wizard dot pulse when active */
.mns-wizard-step.active .mns-wizard-dot{ animation: mns-pulse-ring 1.6s ease-out infinite;}
@keyframes mns-pulse-ring{
  0% { box-shadow:0 0 0 0 rgba(0,88,226,.35); }
  70% { box-shadow:0 0 0 8px rgba(0,88,226,0); }
  100% { box-shadow:0 0 0 0 rgba(0,88,226,0); }
}

/* Success ring animation used after a payroll "Complete & Send" style action */
.mns-success-pop{ animation: mns-pop .3s ease; }
@keyframes mns-pop{ 0%{ transform:scale(.9); opacity:0;} 60%{ transform:scale(1.04); opacity:1;} 100%{ transform:scale(1);} }

@keyframes mns-ripple{
  to { transform: scale(2.2); opacity:0; }
}

/* ================= Add Employee — full page onboarding wizard ================= */
.mns-breadcrumb{ font-size:12.5px; color:#9CA3AF; display:flex; align-items:center; gap:6px; margin-bottom:18px;}
.mns-breadcrumb a{ color:#6B7280; text-decoration:none;}
.mns-breadcrumb a:hover{ color:var(--mns-blue);}
.mns-breadcrumb .sep{ color:#D1D5DB;}
.mns-breadcrumb .current{ color:#111827; font-weight:600;}

/* Big horizontal page-level stepper */
.mns-page-stepper{
  display:flex; align-items:flex-start; background:#fff; border:1px solid var(--mns-border); border-radius:14px;
  padding:22px 28px 18px; margin-bottom:20px; overflow-x:auto;
}
.mns-page-step{ display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; min-width:110px; cursor:pointer;}
.mns-page-step-circle{
  width:40px; height:40px; border-radius:50%; border:2px solid #E5E9F0; background:#fff; color:#9CA3AF;
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.2s;
}
.mns-page-step-label{ font-size:12px; font-weight:600; color:#9CA3AF; text-align:center; white-space:nowrap;}
.mns-page-step.active .mns-page-step-circle{ background:var(--mns-blue); border-color:var(--mns-blue); color:#fff; box-shadow:0 0 0 5px rgba(0,88,226,.12);}
.mns-page-step.active .mns-page-step-label{ color:var(--mns-blue);}
.mns-page-step.done .mns-page-step-circle{ background:var(--mns-green); border-color:var(--mns-green); color:#fff; font-size:0;}
.mns-page-step.done .mns-page-step-circle::after{ content:"\2713"; font-size:15px;}
.mns-page-step.done .mns-page-step-label{ color:var(--mns-green);}
.mns-page-step-line{ flex:1; height:2px; background:#E5E9F0; margin:19px 6px 0; min-width:24px;}
.mns-page-step-line.done{ background:var(--mns-green);}

/* Two-column onboarding layout */
.mns-onboard-layout{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;}
@media (max-width: 1100px){ .mns-onboard-layout{ grid-template-columns:1fr;} }

.mns-onboard-section-header{ display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.mns-onboard-section-icon{
  width:34px;height:34px;border-radius:9px; background:#DCE9FF; color:var(--mns-blue);
  display:flex;align-items:center;justify-content:center; font-size:16px; flex-shrink:0;
}
.mns-onboard-section-title{ font-size:15px; font-weight:700; color:#111827;}

/* Sidebar cards */
.mns-onboard-sidebar-card{ background:#fff; border:1px solid var(--mns-border); border-radius:14px; padding:18px; margin-bottom:16px;}
.mns-onboard-sidebar-title{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:#111827; margin-bottom:14px;}
.mns-onboard-sidebar-icon{
  width:32px;height:32px;border-radius:9px; display:flex;align-items:center;justify-content:center; font-size:15px; flex-shrink:0;
}
.mns-summary-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:12.5px; border-bottom:1px dashed #F1F5F9;}
.mns-summary-row:last-child{ border-bottom:none;}
.mns-summary-row .label{ color:#9CA3AF;}
.mns-summary-row .value{ color:#111827; font-weight:600; text-align:right;}
.mns-doc-checklist{ display:flex; flex-direction:column; gap:11px;}
.mns-doc-checklist-item{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:#4B5563;}
.mns-doc-checklist-item i{ color:#C7D6F5; font-size:16px; transition: color .2s;}
.mns-doc-checklist-item.attached{ color:#111827; font-weight:600;}
.mns-doc-checklist-item.attached i{ color:var(--mns-green);}
.mns-note-card{
  background:#FDF6E3; border:1px solid #F3D9A4; border-radius:14px; padding:16px 18px; display:flex; gap:12px;
}
.mns-note-card i{ color:var(--mns-orange); font-size:20px; flex-shrink:0;}
.mns-note-card .title{ font-weight:700; font-size:13px; color:#111827; margin-bottom:3px;}
.mns-note-card .body{ font-size:12px; color:#6B7280; line-height:1.5;}

/* Passport photo upload box */
.mns-photo-upload-box{
  width:100%; aspect-ratio:1/1; max-width:150px; border:2px dashed #C7D6F5; border-radius:12px; background:#F8FAFF;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  position:relative; overflow:hidden; text-align:center; padding:10px; margin-left:auto;
}
.mns-photo-upload-box:hover{ border-color:var(--mns-blue); background:#F0F6FF;}
.mns-photo-upload-box .icon-circle{
  width:38px;height:38px;border-radius:50%; background:#DCE9FF; color:var(--mns-blue); font-size:17px;
  display:flex;align-items:center;justify-content:center;
}
.mns-photo-upload-box .hint{ font-size:9.5px; color:#9CA3AF; line-height:1.3;}
.mns-photo-upload-box .cta{ font-size:11px; font-weight:600; color:#374151;}
.mns-photo-upload-box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.mns-photo-upload-box input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer;}

/* Phone input with flag prefix */
.mns-phone-group{ display:flex; align-items:stretch;}
.mns-phone-flag{
  display:flex; align-items:center; gap:5px; background:#F8FAFC; border:1px solid var(--mns-border); border-right:none;
  border-radius:9px 0 0 9px; padding:0 10px; font-size:13px; font-weight:600; color:#374151; white-space:nowrap;
}
.mns-phone-group input{ border-radius:0 9px 9px 0 !important; border-left:none;}
.mns-phone-group input:focus{ z-index:2;}

/* Document upload row (Documents step) */
.mns-doc-upload-row{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--mns-border); border-radius:12px; margin-bottom:10px;
  transition: border-color .15s, background .15s;
}
.mns-doc-upload-row.has-file{ border-color:var(--mns-green); background:#F4FBF6;}
.mns-doc-upload-row .doc-icon{
  width:38px;height:38px;border-radius:9px; background:#EEF2FF; color:var(--mns-blue); display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
}
.mns-doc-upload-row.has-file .doc-icon{ background:var(--mns-green-bg); color:var(--mns-green);}
.mns-doc-upload-row .doc-label{ font-weight:600; font-size:13px; color:#111827;}
.mns-doc-upload-row .doc-filename{ font-size:11.5px; color:#9CA3AF;}
.mns-doc-upload-row .doc-file-btn{ margin-left:auto;}

/* Review step */
.mns-review-block{ margin-bottom:20px;}
.mns-review-block-title{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--mns-blue); margin-bottom:10px;}

/* ================= Add Leave Request page ================= */
.mns-balance-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed #F1F5F9;}
.mns-balance-row:last-of-type{ border-bottom:none;}
.mns-balance-dot{ width:9px;height:9px;border-radius:50%; flex-shrink:0;}
.mns-balance-name{ font-size:12.5px; font-weight:600; color:#374151; flex:1;}
.mns-balance-days{ font-size:12.5px; color:#6B7280; white-space:nowrap;}
.mns-balance-tag{ font-size:10.5px; font-weight:700; color:var(--mns-green); white-space:nowrap;}

.mns-guideline-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.mns-guideline-list li{ position:relative; padding-left:14px; font-size:12px; color:#6B7280; line-height:1.5;}
.mns-guideline-list li::before{ content:"•"; position:absolute; left:0; color:var(--mns-blue); font-weight:700;}

.mns-approval-flow{ display:flex; flex-direction:column;}
.mns-approval-flow-step{ display:flex; gap:12px; position:relative; padding-bottom:22px;}
.mns-approval-flow-step:last-child{ padding-bottom:0;}
.mns-approval-flow-step::before{
  content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:#E5E9F0;
}
.mns-approval-flow-step:last-child::before{ display:none;}
.mns-approval-flow-num{
  width:29px;height:29px;border-radius:50%; border:2px solid var(--mns-blue); color:var(--mns-blue); background:#fff;
  font-weight:700; font-size:12.5px; display:flex;align-items:center;justify-content:center; flex-shrink:0; z-index:1;
}
.mns-approval-flow-title{ font-size:13px; font-weight:700; color:#111827;}
.mns-approval-flow-sub{ font-size:11.5px; color:#9CA3AF;}

.mns-dropzone{
  border:2px dashed #C7D6F5; border-radius:12px; background:#F8FAFF; padding:26px 20px; text-align:center;
  cursor:pointer; transition:.15s; position:relative;
}
.mns-dropzone:hover, .mns-dropzone.dragover{ border-color:var(--mns-blue); background:#F0F6FF;}
.mns-dropzone i{ font-size:26px; color:var(--mns-blue);}
.mns-dropzone .cta{ font-size:13px; color:#374151; margin-top:6px;}
.mns-dropzone .cta a{ color:var(--mns-blue); font-weight:600;}
.mns-dropzone .hint{ font-size:11px; color:#9CA3AF; margin-top:2px;}
.mns-dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer;}
.mns-dropzone .filename{ font-size:12.5px; font-weight:600; color:var(--mns-green); margin-top:6px;}

.mns-char-count{ display:flex; justify-content:space-between; font-size:11px; color:#9CA3AF; margin-top:4px;}

.mns-radio-pill{ display:flex; align-items:center; gap:6px; font-size:13px; color:#374151;}
.mns-radio-pill input{ cursor:pointer;}

/* Sub-nav (Leave Management expandable group) */
.mns-subnav{ margin:2px 12px;}
.mns-subnav-toggle{
  display:flex; align-items:center; gap:12px; width:100%; background:transparent; border:none; text-align:left;
  padding:10px 8px; border-radius:10px; color:#B7C4DC; font-size:13.5px; font-weight:500; cursor:pointer;
}
.mns-subnav-toggle:hover{ background:rgba(255,255,255,.06); color:#fff;}
.mns-subnav-toggle i.chev{ margin-left:auto; font-size:15px; transition: transform .2s;}
.mns-subnav.open .mns-subnav-toggle i.chev{ transform: rotate(180deg);}
.mns-subnav-items{ display:none; padding-left:14px; border-left:1px solid rgba(255,255,255,.08); margin-left:19px;}
.mns-subnav.open .mns-subnav-items{ display:block;}
.mns-subnav-item{
  display:block; padding:8px 14px; border-radius:8px; color:#93A5C3; text-decoration:none; font-size:12.5px; font-weight:500;
  margin:1px 0;
}
.mns-subnav-item:hover{ background:rgba(255,255,255,.06); color:#fff;}
.mns-subnav-item.active{ background:var(--mns-blue); color:#fff;}

/* ================= Add New Payroll Period page ================= */
.mns-whatsnext-card{
  background:#EFFBF3; border:1px solid #BEEBC8; border-radius:14px; padding:16px 18px; display:flex; gap:12px;
}
.mns-whatsnext-card i.icon{ color:var(--mns-green); font-size:20px; flex-shrink:0;}
.mns-whatsnext-card .title{ font-weight:700; font-size:13px; color:#111827; margin-bottom:8px;}
.mns-whatsnext-list{ list-style:none; counter-reset:step; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.mns-whatsnext-list li{ position:relative; padding-left:22px; font-size:12px; color:#374151; counter-increment:step;}
.mns-whatsnext-list li::before{
  content:counter(step); position:absolute; left:0; top:0; width:16px;height:16px;border-radius:50%;
  background:var(--mns-green); color:#fff; font-size:9.5px; font-weight:700; display:flex;align-items:center;justify-content:center; line-height:1;
}
.mns-stat-inline-box{
  background:#F5F9FF; border:1px solid #DCE9FF; border-radius:12px; padding:18px; text-align:center; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.mns-stat-inline-box .lbl{ font-size:11px; color:var(--mns-blue); font-weight:600; display:flex; align-items:center; gap:5px;}
.mns-stat-inline-box .icon-wrap{ color:var(--mns-blue); font-size:22px; margin-top:2px;}
.mns-stat-inline-box .num{ font-size:26px; font-weight:800; color:#111827;}
.mns-stat-inline-box .sub{ font-size:11px; color:#6B7280;}
.mns-scope-radio{ display:flex; align-items:center; gap:8px; font-size:13px; color:#374151;}

/* ================= Add New Leave Type page ================= */
.mns-page-title-icon{
  width:44px;height:44px;border-radius:12px; background:var(--mns-blue); color:#fff; font-size:20px;
  display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 4px 10px rgba(0,88,226,.25);
}
.mns-page-title-row{ display:flex; align-items:center; gap:14px;}
.mns-category-list{ display:flex; flex-direction:column; gap:12px;}
.mns-category-item{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:#374151; font-weight:600;}
.mns-category-item .default-pill{
  background:#DCE9FF; color:var(--mns-blue); font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:auto;
}
.mns-required-note{ font-size:11px; color:#9CA3AF; margin-top:4px;}

/* ================= Log Attendance page ================= */
.mns-clock-card{ background:#fff; border:1px solid var(--mns-border); border-radius:14px; padding:24px 26px;}
.mns-clock-avatar{
  width:64px;height:64px;border-radius:50%; background:#DCE9FF; color:var(--mns-blue); font-size:28px;
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.mns-clock-meta{ display:flex; align-items:center; gap:10px;}
.mns-clock-meta-icon{ color:#9CA3AF; font-size:19px;}
.mns-clock-meta-label{ font-size:12.5px; color:#9CA3AF;}
.mns-clock-meta-value{ font-size:14px; font-weight:700; color:#111827;}
.mns-clock-time{ font-size:22px; font-weight:800; color:#111827; line-height:1.1;}
.btn-clock-in{
  background:var(--mns-green); border:none; color:#fff; font-weight:600; font-size:14px;
  padding:13px 20px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
}
.btn-clock-in:hover:not(:disabled){ background:#12873D; color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(22,163,74,.28);}
.btn-clock-out{
  background:#8FB8F0; border:none; color:#fff; font-weight:600; font-size:14px;
  padding:13px 20px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  transition: transform .12s ease, box-shadow .15s ease, background .15s;
}
.btn-clock-out:hover:not(:disabled){ background:var(--mns-blue); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,88,226,.28);}
.btn-clock-in:disabled, .btn-clock-out:disabled{ opacity:.5; cursor:not-allowed;}
.mns-clock-status{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:#6B7280; margin-top:10px;}
.mns-clock-status .dot{ width:8px;height:8px;border-radius:50%; flex-shrink:0;}

/* Tinted stat tiles */
.mns-att-tile{ border-radius:14px; border:1px solid var(--mns-border); padding:18px; height:100%;}
.mns-att-tile.tile-plain{ background:#fff;}
.mns-att-tile.tile-green{ background:#F2FBF5; border-color:#CDEBD8;}
.mns-att-tile.tile-blue{ background:#F2F7FF; border-color:#D3E3FB;}
.mns-att-tile.tile-red{ background:#FEF4F4; border-color:#F8D7D7;}
.mns-att-tile-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px;}
.mns-att-tile-icon{ width:30px;height:30px;border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:15px; flex-shrink:0;}
.mns-att-tile-label{ font-size:12.5px; font-weight:600; color:#64748B;}
.mns-att-tile-value{ font-size:20px; font-weight:800; color:#111827; display:flex; align-items:center; gap:8px;}
.mns-att-tile-value.is-green{ color:var(--mns-green);}
.mns-att-tile-value.is-red{ color:var(--mns-red);}
.mns-att-tile-pill{
  display:inline-block; margin-top:7px; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:20px;
  background:rgba(255,255,255,.75); color:#64748B;
}
.mns-att-tile-sub{ font-size:11px; color:#9CA3AF; margin-top:6px;}

/* Donut legend */
.mns-donut-legend{ display:flex; flex-direction:column; gap:9px;}
.mns-donut-legend-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#374151;}
.mns-donut-legend-row .val{ margin-left:auto; font-weight:700; color:#111827;}

/* Monthly summary rows */
.mns-msummary-row{ display:flex; align-items:center; gap:8px; padding:7px 0; font-size:12.5px; border-bottom:1px solid #F1F5F9;}
.mns-msummary-row:last-child{ border-bottom:none;}
.mns-msummary-row .label{ color:#4B5563;}
.mns-msummary-row .val{ margin-left:auto; font-weight:700;}

/* Quick action grid in sidebar */
.mns-qa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mns-qa-tile{
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; text-decoration:none;
  border:1px solid var(--mns-border); border-radius:12px; padding:14px 8px; background:#fff;
  font-size:11.5px; font-weight:600; color:#374151; transition:.15s;
}
.mns-qa-tile:hover{ border-color:var(--mns-blue); background:#F5F9FF; color:var(--mns-blue); transform:translateY(-1px);}
.mns-qa-tile .qi{ width:34px;height:34px;border-radius:9px; display:flex;align-items:center;justify-content:center; font-size:16px;}

.mns-info-note{
  background:#EFF6FF; border:1px solid #CFE0FB; border-radius:14px; padding:16px 18px; display:flex; gap:12px;
}
.mns-info-note i{ color:var(--mns-blue); font-size:20px; flex-shrink:0;}
.mns-info-note .title{ font-weight:700; font-size:13px; color:#111827; margin-bottom:3px;}
.mns-info-note .body{ font-size:12px; color:#6B7280; line-height:1.5;}

/* ================= Record Attendance page ================= */
.mns-action-btn{
  display:flex; align-items:center; gap:11px; border:none; border-radius:11px; padding:15px 18px;
  color:#fff; text-decoration:none; width:100%; text-align:left; transition: transform .12s ease, box-shadow .15s ease, opacity .15s;
}
.mns-action-btn i{ font-size:22px; flex-shrink:0;}
.mns-action-btn .t{ font-size:13.5px; font-weight:700; line-height:1.2;}
.mns-action-btn .s{ font-size:10.5px; opacity:.85; line-height:1.2;}
.mns-action-btn:hover:not(.is-disabled){ transform:translateY(-1px); color:#fff;}
.mns-action-btn.blue{ background:var(--mns-blue);}
.mns-action-btn.blue:hover:not(.is-disabled){ box-shadow:0 6px 16px rgba(0,88,226,.3);}
.mns-action-btn.green{ background:#12883E;}
.mns-action-btn.green:hover:not(.is-disabled){ box-shadow:0 6px 16px rgba(18,136,62,.3);}
.mns-action-btn.indigo{ background:#5B5BD6;}
.mns-action-btn.indigo:hover:not(.is-disabled){ box-shadow:0 6px 16px rgba(91,91,214,.3);}
.mns-action-btn.is-disabled{ opacity:.55; cursor:not-allowed;}

/* Attendance mode segmented control */
.mns-mode-group{ display:flex; border:1px solid var(--mns-border); border-radius:10px; overflow:hidden;}
.mns-mode-btn{
  flex:1; border:none; background:#fff; color:#64748B; font-size:12.5px; font-weight:600;
  padding:10px 12px; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:.15s;
  border-right:1px solid var(--mns-border);
}
.mns-mode-btn:last-child{ border-right:none;}
.mns-mode-btn:hover:not(.active){ background:#F8FAFC; color:#374151;}
.mns-mode-btn.active{ background:var(--mns-blue); color:#fff;}

/* Employee picker result dropdown */
.mns-emp-results{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; background:#fff;
  border:1px solid var(--mns-border); border-radius:11px; box-shadow:0 10px 30px rgba(16,24,40,.12);
  max-height:290px; overflow-y:auto; padding:6px;
}
.mns-emp-result{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; border:none;
  background:transparent; width:100%; text-align:left;
}
.mns-emp-result:hover{ background:#F5F9FF;}
.mns-emp-result .nm{ font-size:13px; font-weight:600; color:#111827;}
.mns-emp-result .mt{ font-size:11px; color:#9CA3AF;}
.mns-emp-result .flag{ margin-left:auto; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--mns-orange-bg); color:var(--mns-orange);}

/* Selected employee panel */
.mns-selected-emp{ background:#F8FAFC; border:1px solid var(--mns-border); border-radius:12px; padding:18px;}
.mns-selected-emp-avatar{
  width:62px;height:62px;border-radius:12px; background:linear-gradient(135deg,var(--mns-blue),#4F8CFF);
  color:#fff; font-size:22px; font-weight:700; display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.mns-input-with-icon{ position:relative;}
.mns-input-with-icon > i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9CA3AF; font-size:16px; pointer-events:none;}
.mns-input-with-icon input{ padding-left:36px;}

/* Summary tiles (2x2) */
.mns-sum-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mns-sum-tile{ border-radius:12px; padding:14px; display:flex; align-items:center; gap:10px;}
.mns-sum-tile.green{ background:#F2FBF5; border:1px solid #CDEBD8;}
.mns-sum-tile.red{ background:#FEF4F4; border:1px solid #F8D7D7;}
.mns-sum-tile.amber{ background:#FEF9EC; border:1px solid #F5E2B8;}
.mns-sum-tile.blue{ background:#F2F7FF; border:1px solid #D3E3FB;}
.mns-sum-tile i{ font-size:22px; flex-shrink:0;}
.mns-sum-tile .n{ font-size:19px; font-weight:800; color:#111827; line-height:1.1;}
.mns-sum-tile .l{ font-size:11px; color:#64748B; font-weight:600;}

/* Mini calendar */
.mns-mini-cal{ width:100%; border-collapse:collapse;}
.mns-mini-cal th{ font-size:10.5px; color:#9CA3AF; font-weight:600; text-align:center; padding:5px 0;}
.mns-mini-cal td{ text-align:center; padding:2px;}
.mns-mini-cal a, .mns-mini-cal span{
  display:inline-flex; align-items:center; justify-content:center; width:27px;height:27px; border-radius:50%;
  font-size:11.5px; color:#374151; text-decoration:none;
}
.mns-mini-cal a:hover{ background:#F1F5F9;}
.mns-mini-cal .is-selected{ background:var(--mns-blue); color:#fff; font-weight:700;}
.mns-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.mns-cal-head .m{ font-size:13px; font-weight:700; color:#111827;}
.mns-cal-head a{ color:#9CA3AF; font-size:17px; text-decoration:none; padding:0 4px;}
.mns-cal-head a:hover{ color:var(--mns-blue);}

/* Quick action link rows */
.mns-qa-row{
  display:flex; align-items:center; gap:10px; padding:10px 0; text-decoration:none; font-size:12.5px;
  font-weight:600; color:#374151; border-bottom:1px solid #F1F5F9;
}
.mns-qa-row:last-child{ border-bottom:none;}
.mns-qa-row:hover{ color:var(--mns-blue);}
.mns-qa-row .ic{ width:28px;height:28px;border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:14px; flex-shrink:0;}
.mns-qa-row .arw{ margin-left:auto; color:#CBD5E1;}
.mns-qa-row:hover .arw{ color:var(--mns-blue);}

/* ================= Edit Employee (full page) ================= */
.mns-page-banner{
  background:linear-gradient(90deg,#EFF6FF,#F8FAFF); border:1px solid #DCE9FF; border-radius:14px;
  padding:18px 22px; display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.mns-page-banner-icon{
  width:44px;height:44px;border-radius:12px; background:var(--mns-blue); color:#fff; font-size:20px;
  display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 4px 10px rgba(0,88,226,.25);
}
.mns-page-banner .t{ font-size:16px; font-weight:700; color:#111827;}
.mns-page-banner .s{ font-size:12.5px; color:#6B7280;}

.mns-photo-card-img{
  width:100%; max-width:150px; aspect-ratio:1/1; border-radius:12px; object-fit:cover;
  background:#F1F5F9; border:1px solid var(--mns-border);
}
.mns-photo-placeholder{
  width:100%; max-width:150px; aspect-ratio:1/1; border-radius:12px; background:#EEF2FF;
  display:flex; align-items:center; justify-content:center; color:var(--mns-blue);
  font-size:38px; font-weight:700; border:1px solid #DCE9FF;
}
.mns-photo-hint{ font-size:11.5px; color:#9CA3AF; line-height:1.6;}

/* Skills tag editor */
.mns-skills-box{
  border:1px solid var(--mns-border); border-radius:10px; padding:9px 10px; background:#fff;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:44px; cursor:text;
}
.mns-skills-box:focus-within{ border-color:var(--mns-blue); box-shadow:0 0 0 3px rgba(0,88,226,.12);}
.mns-skill-tag{
  display:inline-flex; align-items:center; gap:6px; background:#EFF6FF; color:var(--mns-blue);
  border:1px solid #D3E3FB; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:7px;
}
.mns-skill-tag button{
  border:none; background:transparent; color:var(--mns-blue); padding:0; line-height:1; cursor:pointer;
  font-size:13px; opacity:.7;
}
.mns-skill-tag button:hover{ opacity:1;}
.mns-skills-input{ border:none; outline:none; flex:1; min-width:110px; font-size:13px; padding:3px 2px; background:transparent;}
.mns-skill-suggestions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.mns-skill-suggestion{
  border:1px dashed var(--mns-border); background:#FAFBFC; color:#64748B; font-size:11px;
  padding:3px 9px; border-radius:7px; cursor:pointer; transition:.15s;
}
.mns-skill-suggestion:hover{ border-color:var(--mns-blue); color:var(--mns-blue); background:#F5F9FF;}
.mns-skill-suggestion.is-added{ opacity:.4; cursor:not-allowed;}

.mns-account-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #F1F5F9;}
.mns-account-row:last-child{ border-bottom:none;}
.mns-account-row .lbl{ font-size:12.5px; font-weight:600; color:#374151;}
.mns-account-row .ctl{ margin-left:auto; display:flex; align-items:center; gap:9px;}
.mns-account-row .form-select{ min-width:165px;}