:root {
  --accent: #ff5c05;
  --accent-soft: #fff0e8;
  --accent-dark: #d94a00;
  --ink: #151719;
  --muted: #6f747b;
  --line: #e6e8eb;
  --surface: #ffffff;
  --bg: #f4f5f7;
  --danger: #c53535;
  --danger-soft: #fff0f0;
  --success: #1f8a55;
  --success-soft: #eaf8f0;
  --shadow: 0 10px 28px rgba(23, 29, 35, 0.07);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0,1fr); }
.sidebar {
  background: #17191c;
  color: #fff;
  padding: 24px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand-block { display: flex; gap: 12px; align-items: center; padding: 0 8px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-logo { width: 56px; height: 38px; object-fit: contain; background: #fff; border-radius: 9px; padding: 4px; }
.brand-title { font-weight: 800; font-size: 14px; }
.brand-subtitle { color: rgba(255,255,255,.58); font-size: 12px; margin-top: 2px; }
.nav-list { display: grid; gap: 7px; padding-top: 22px; }
.nav-item {
  border: 0; background: transparent; color: rgba(255,255,255,.72); border-radius: 11px;
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; text-align: left; font-weight: 600; font-size: 15px;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-icon { width: 22px; text-align: center; font-size: 16px; }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.48); font-size: 11px; padding: 12px; }
.dot { width: 7px; height: 7px; border-radius: 999px; background: #57d28a; box-shadow: 0 0 0 4px rgba(87,210,138,.12); }

.main-content { min-width: 0; max-width:100%; overflow-x:hidden; }
.topbar {
  min-height: 92px; padding: 18px 34px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0; z-index: 15;
  backdrop-filter: blur(12px);
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }

.content-section { display: none; padding: 28px 34px 40px; min-width:0; max-width:100%; overflow-x:hidden; }
.content-section.active { display: block; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stat-value { font-size: 34px; font-weight: 800; margin-top: 8px; letter-spacing: -.04em; }
.stat-value.compact { font-size: 24px; margin-top: 15px; }
.stat-hint { margin-top: 5px; color: var(--muted); font-size: 12px; }
.stat-hint.positive { color: var(--success); }
.dashboard-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-top: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { min-height: 78px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.payroll-snapshot { padding: 12px 20px 20px; }
.metric-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.metric-row:last-child { border-bottom: 0; }
.metric-row span { color: var(--muted); font-size: 13px; }
.metric-row strong { font-size: 13px; }

.toolbar { padding: 14px; display: grid; grid-template-columns: minmax(240px,1fr) 180px auto; gap: 10px; margin-bottom: 16px; }
.search-wrap { position: relative; }
.search-wrap input { padding-left: 40px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
input, select, textarea, .select-control {
  width: 100%; border: 1px solid #dfe2e6; border-radius: 10px; background: #fff; color: var(--ink); padding: 11px 12px; outline: none; transition: .18s border, .18s box-shadow;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,92,5,.11); }
textarea { resize: vertical; }
.table-panel { overflow: hidden; }
.table-wrap { overflow-x: auto; position: relative; min-height: 200px; }
table { border-collapse: collapse; width: 100%; min-width: 920px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
th { color: var(--muted); background: #fafbfc; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }
tbody tr:hover { background: #fcfcfd; }
.actions-col { text-align: right; }
.actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.employee-cell { display: flex; gap: 10px; align-items: center; min-width: 190px; }
.avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; }
.employee-meta strong { display: block; font-size: 12px; }
.employee-meta span { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; font-weight: 700; font-size: 10px; text-transform: capitalize; }
.badge.onboard { background: var(--success-soft); color: var(--success); }
.badge.terminated { background: var(--danger-soft); color: var(--danger); }
.badge::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.btn, .icon-btn, .text-btn, .mini-btn { border: 0; border-radius: 10px; font-weight: 700; }
.btn { padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 5px 16px rgba(255,92,5,.18); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: #fff; color: #2e3237; border: 1px solid var(--line); }
.btn-secondary:hover { background: #f7f8f9; }
.btn-danger { background: var(--danger); color: #fff; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; background: #f5f6f7; color: #3e4247; font-size: 20px; }
.text-btn { background: transparent; color: var(--accent-dark); padding: 6px 0; }
.text-btn.danger { color: var(--danger); }
.mini-btn { padding: 7px 8px; background: #f5f6f7; color: #42464b; font-size: 10px; }
.mini-btn:hover { background: #eceef0; }
.mini-btn.accent { color: var(--accent-dark); background: var(--accent-soft); }
.mini-btn.danger { color: var(--danger); background: var(--danger-soft); }

.empty-state { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5px; color: var(--muted); padding: 30px; }
.empty-state.small { min-height: 240px; }
.empty-state strong { color: var(--ink); font-size: 13px; }
.empty-state span { font-size: 11px; }
.empty-icon { width: 52px; height: 52px; border-radius: 15px; background: #f4f5f7; display: grid; place-items: center; font-size: 22px; margin-bottom: 6px; }

.recent-list { padding: 8px 20px 18px; }
.recent-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.recent-item:last-child { border-bottom: 0; }
.recent-item .grow { flex: 1; min-width: 0; }
.recent-item strong { font-size: 12px; display: block; }
.recent-item span { color: var(--muted); font-size: 10px; }

.salary-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 18px; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.salary-form, #companyForm { padding: 20px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 11px; font-weight: 700; color: #51565c; }
.span-2 { grid-column: span 2; }
.span-full { grid-column: 1 / -1; }
.form-divider { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }
.slip-calculation { display: grid; gap: 8px; border-radius: 12px; background: #faf7f5; border: 1px solid #f0dfd7; padding: 14px 15px; }
.slip-calculation > div { display: flex; justify-content: space-between; gap: 18px; font-size: 12px; }
.slip-calculation span { color: var(--muted); }
.slip-calculation .net { border-top: 1px solid #ead5cb; padding-top: 9px; margin-top: 2px; font-size: 14px; }
.slip-calculation .net strong { color: var(--accent-dark); }
.slip-history { padding: 8px 18px 18px; }
.slip-item { padding: 13px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.slip-item:last-child { border-bottom: 0; }
.slip-item strong { display:block; font-size: 12px; }
.slip-item span { color: var(--muted); font-size: 10px; }
.slip-item .slip-actions { display: flex; gap: 6px; }

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.upload-grid { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.upload-card { border: 1px solid var(--line); border-radius: 13px; padding: 14px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.upload-card strong { font-size: 12px; }
.upload-preview { width: 100%; height: 110px; border-radius: 10px; background: #fafafa; border: 1px dashed #d9dce0; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 11px; }
.upload-preview img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.backup-actions { display:flex; gap: 10px; flex-wrap: wrap; padding: 20px 20px 12px; }
.security-note { margin: 0 20px 20px; background: #fff8e9; border: 1px solid #f2dfb9; color: #795d23; border-radius: 11px; padding: 12px 14px; font-size: 11px; }
.file-btn { cursor: pointer; }

.dialog { border: 0; padding: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.22); width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 36px); overflow: hidden; }
.dialog::backdrop { background: rgba(15,17,19,.56); backdrop-filter: blur(3px); }
.wide-dialog { width: min(780px, calc(100vw - 28px)); }
.profile-dialog, .preview-dialog { width: min(850px, calc(100vw - 28px)); }
.dialog-shell { display: flex; flex-direction: column; max-height: calc(100vh - 36px); background: #fff; }
.dialog-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.dialog-head h2 { margin:0; font-size: 17px; }
.dialog-head p { margin:4px 0 0; color: var(--muted); font-size: 11px; }
.dialog-body { padding: 20px; overflow-y: auto; }
.dialog-actions { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; background: #fbfbfc; }

.profile-header { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.profile-avatar { width: 62px; height: 62px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-dark); display:grid; place-items:center; font-size:20px; font-weight:800; }
.profile-header h3 { margin:0; font-size: 19px; }
.profile-header p { margin:4px 0 7px; color:var(--muted); font-size:11px; }
.profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.info-card { border:1px solid var(--line); border-radius:11px; padding:11px; min-width:0; }
.info-card span { display:block; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
.info-card strong { display:block; margin-top:5px; font-size:11px; overflow-wrap:anywhere; }
.profile-section-title { margin:22px 0 8px; font-size:12px; }
.history-table { width:100%; min-width:0; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.history-table table { min-width:0; }
.history-table th,.history-table td { padding:10px; font-size:10px; }

.document-preview-wrap { background: #eceff2; padding: 20px; }
.pdf-document { width: 794px; min-height: 1123px; max-width: 100%; margin: 0 auto; background:#fff; color:#181a1d; box-shadow:0 7px 24px rgba(0,0,0,.12); padding:46px; font-family: Inter, Arial, sans-serif; }
.pdf-render-host { position: fixed; left: -10000px; top: 0; width: 794px; pointer-events: none; }
.doc-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; padding-bottom:20px; border-bottom:2px solid #ff5c05; }
.doc-logo {
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:130px;
  max-height:74px;
  object-fit:contain;
  object-position:left top;
  flex:0 0 auto;
}
.pdf-document .doc-logo,
.pdf-render-host .doc-logo {
  width:auto !important;
  height:auto !important;
  max-width:130px !important;
  max-height:74px !important;
  aspect-ratio:auto !important;
}

.doc-company { text-align:right; max-width:370px; }
.doc-company h2 { margin:0 0 7px; font-size:18px; }
.doc-company div { color:#5f646a; font-size:10px; margin-top:2px; }
.doc-title { text-align:center; margin:28px 0 22px; }
.doc-title h1 {
  margin:0;
  font-size:22px;
  letter-spacing:.02em;
  font-family:Inter, Arial, sans-serif;
  font-weight:800 !important;
  font-style:normal;
}
.doc-title p { margin:5px 0 0; color:#6c7177; font-size:10px; }
.doc-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid #e3e5e8; }
.doc-field { padding:10px 12px; border-bottom:1px solid #e3e5e8; }
.doc-field:nth-child(odd){ border-right:1px solid #e3e5e8; }
.doc-field span { font-size:8px; font-weight:800; text-transform:uppercase; color:#73787e; letter-spacing:.06em; display:block; }
.doc-field strong { font-size:10px; margin-top:4px; display:block; overflow-wrap:anywhere; }
.doc-section { margin-top:22px; }
.doc-section h3 { margin:0 0 9px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#474b50; }
.doc-table { width:100%; border-collapse:collapse; min-width:0; }
.doc-table th,.doc-table td { border:1px solid #e1e3e6; padding:9px 10px; font-size:9px; }
.doc-table th { background:#f7f8f9; color:#5f646a; }
.salary-total-box { margin-left:auto; width:310px; margin-top:15px; }
.salary-total-row { display:flex; justify-content:space-between; padding:8px 10px; border-bottom:1px solid #e6e8eb; font-size:9px; }
.salary-total-row.net { background:#fff1e9; color:#c64705; font-size:11px; font-weight:800; border-radius:6px; margin-top:5px; border:0; }
.doc-signatures { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:58px; align-items:end; }
.signature-box { text-align:center; font-size:9px; color:#666b71; display:grid; grid-template-rows:64px auto; align-items:end; }
.signature-image { width:auto; height:auto; max-width:145px; max-height:56px; object-fit:contain; object-position:center bottom; display:block; justify-self:center; align-self:end; margin:0 auto 6px; }
.signature-box > div:first-child:not(.signature-line) { height:64px !important; }
.signature-line { border-top:1px solid #777c82; padding-top:5px; }
.doc-foot { margin-top:35px; border-top:1px solid #e4e6e8; padding-top:10px; font-size:8px; color:#7d8288; text-align:center; }

.toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 99; display: grid; gap: 8px; }
.toast { min-width: 250px; max-width: 360px; background:#181a1d; color:#fff; border-radius:11px; padding:11px 13px; box-shadow:0 15px 40px rgba(0,0,0,.22); font-size:11px; animation:toastIn .2s ease-out; }
.toast.success { border-left:4px solid #4fd08a; }
.toast.error { border-left:4px solid #ff5b5b; }
@keyframes toastIn { from { transform:translateY(7px); opacity:0;} to { transform:none; opacity:1;} }
.mobile-only { display:none; }

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .salary-layout, .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -280px; width:260px; transition:left .2s ease; box-shadow:20px 0 50px rgba(0,0,0,.18); }
  .sidebar.open { left: 0; }
  .mobile-only { display:grid; }
  .topbar { padding: 15px 18px; }
  .topbar-actions .btn-secondary { display:none; }
  .content-section { padding:18px; }
  .toolbar { grid-template-columns:1fr; }
  .profile-grid { grid-template-columns:1fr 1fr; }
  .upload-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns:1fr; }
  .topbar-actions #quickAddBtn { padding:9px 10px; font-size:11px; }
  .form-grid, .profile-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:span 1; }
  .topbar h1 { font-size:19px; }
  .pdf-document { padding:24px; }
  .doc-head { display:block; }
  .doc-company { text-align:left; margin-top:12px; }
}

@media print {
  body * { visibility:hidden !important; }
  .pdf-document, .pdf-document * { visibility:visible !important; }
  .pdf-document { position:absolute; left:0; top:0; width:210mm; min-height:297mm; box-shadow:none; }
}

/* Secure server login */
.login-page { min-height:100vh; background:radial-gradient(circle at top right,#fff2ea 0,#f4f5f7 38%,#eef0f3 100%); }
.auth-gate.server-auth-gate { min-height:100vh; display:grid; place-items:center; padding:28px; }
.auth-card { width:min(430px,100%); background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 28px 80px rgba(20,24,28,.12); padding:30px; }
.auth-brand { display:flex; align-items:center; gap:13px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.auth-logo { width:68px; height:46px; object-fit:contain; border:1px solid var(--line); border-radius:11px; padding:5px; background:#fff; }
.auth-brand strong { display:block; font-size:15px; }
.auth-brand span { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.auth-heading { margin:26px 0 18px; }
.auth-heading h1 { margin:0; font-size:25px; letter-spacing:-.025em; }
.auth-heading p { margin:6px 0 0; color:var(--muted); font-size:12px; }
.auth-form { display:grid; gap:14px; }
.auth-submit { width:100%; margin-top:4px; min-height:44px; }
.auth-message { margin-top:15px; padding:11px 12px; border-radius:10px; font-size:11px; }
.auth-message.error { color:#a62d2d; background:var(--danger-soft); border:1px solid #f1caca; }
.admin-session-pill { border:1px solid var(--line); background:#f8f9fa; border-radius:10px; padding:9px 11px; font-size:11px; color:var(--muted); white-space:nowrap; }
.admin-session-pill strong { color:var(--ink); }
.logout-form { margin:0; display:inline-flex; }

/* Employee photo */
.avatar,.profile-avatar,.employee-photo-preview { overflow:hidden; }
.avatar img,.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.employee-photo-editor { display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fafbfc; }
.employee-photo-preview { width:104px; height:104px; border-radius:15px; border:1px dashed #d6d9dd; display:grid; place-items:center; background:#fff; color:var(--muted); font-size:11px; }
.employee-photo-preview img { width:100%; height:100%; object-fit:cover; }
.employee-photo-actions { display:grid; gap:7px; }
.employee-photo-actions>strong { font-size:12px; }
.employee-photo-actions>span { color:var(--muted); font-size:10px; }
.employee-photo-actions>div { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.doc-employee-photo { width:76px; height:76px; border-radius:10px; object-fit:cover; border:1px solid #e3e5e8; }
.employee-doc-title { display:flex; justify-content:center; align-items:center; gap:18px; }
.employee-doc-title>div { text-align:left; }

/* Accounts salary sheet */
.salary-sheet-stack { display:grid; gap:18px; width:100%; min-width:0; }
.salary-sheet-stack > .panel { width:100%; min-width:0; max-width:100%; overflow:hidden; }
.salary-sheet-head { align-items:flex-start; }
.sheet-head-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.salary-sheet-controls { padding:18px 20px; display:grid; grid-template-columns:180px 180px minmax(260px,1fr); gap:14px; align-items:end; border-bottom:1px solid var(--line); }
.sheet-cycle-note { min-height:67px; border-radius:11px; background:#fff7f2; border:1px solid #f1ded4; padding:12px 14px; display:grid; align-content:center; }
.sheet-cycle-note strong { font-size:11px; }
.sheet-cycle-note span { margin-top:3px; color:var(--muted); font-size:10px; }

/* Keep the Accounts salary sheet inside the available dashboard width. */
.salary-sheet-table-wrap { min-height:180px; width:100%; min-width:0; overflow-x:hidden; }
.salary-sheet-table { width:100%; min-width:0; table-layout:fixed; }
.salary-sheet-table th,.salary-sheet-table td {
  padding:10px 7px;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.salary-sheet-table th:nth-child(1),.salary-sheet-table td:nth-child(1){width:14%;}
.salary-sheet-table th:nth-child(2),.salary-sheet-table td:nth-child(2){width:13%;}
.salary-sheet-table th:nth-child(3),.salary-sheet-table td:nth-child(3){width:9%;}
.salary-sheet-table th:nth-child(4),.salary-sheet-table td:nth-child(4){width:6%;}
.salary-sheet-table th:nth-child(5),.salary-sheet-table td:nth-child(5){width:11%;}
.salary-sheet-table th:nth-child(6),.salary-sheet-table td:nth-child(6){width:10%;}
.salary-sheet-table th:nth-child(7),.salary-sheet-table td:nth-child(7){width:9%;}
.salary-sheet-table th:nth-child(8),.salary-sheet-table td:nth-child(8){width:9%;}
.salary-sheet-table th:nth-child(9),.salary-sheet-table td:nth-child(9){width:11%;}
.salary-sheet-table th:nth-child(10),.salary-sheet-table td:nth-child(10){width:8%;}
.sheet-input { width:100%; min-width:0; padding:8px 7px; border-radius:8px; font-size:11px; }
.sheet-input.small { width:100%; min-width:0; }
.calculated-cell,.payable-cell { white-space:normal; }
.payable-cell strong { color:var(--accent-dark); }
.salary-sheet-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.salary-sheet-summary>div { padding:14px; min-width:0; border-right:1px solid var(--line); }
.salary-sheet-summary>div:last-child { border-right:0; }
.salary-sheet-summary span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; }
.salary-sheet-summary strong { display:block; margin-top:5px; font-size:12px; overflow-wrap:anywhere; }
.salary-sheet-summary .grand { background:var(--accent-soft); }
.salary-sheet-summary .grand strong { color:var(--accent-dark); }
.salary-sheet-footer-actions { padding:16px 20px; display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; min-width:0; }
.salary-sheet-footer-actions .btn { max-width:100%; white-space:normal; text-align:center; }

/* New employee salary statement uses the same internal spacing as the other forms. */
#employeeSalaryStatementForm { padding:20px; }
.landscape-preview-wrap { overflow-x:auto; }
.pdf-document-landscape { width:1123px; min-height:794px; }
.pdf-render-host .pdf-document-landscape { width:1123px; }
.salary-sheet-doc-table th,.salary-sheet-doc-table td { font-size:7px; padding:7px 6px; white-space:nowrap; }
.salary-sheet-doc-table tfoot th { background:#fff1e9; color:#b84408; }
.sheet-doc-formula { margin-top:12px; font-size:7.5px; color:#70757b; }

@media (max-width:1100px){.salary-sheet-controls{grid-template-columns:1fr 1fr}.sheet-cycle-note{grid-column:1/-1}.salary-sheet-summary{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.topbar-actions .logout-form .logout-btn{display:inline-flex!important}.admin-session-pill{display:none}.salary-sheet-head{display:grid}.sheet-head-actions{justify-content:flex-start}.salary-sheet-controls{grid-template-columns:1fr}.sheet-cycle-note{grid-column:auto}.salary-sheet-summary{grid-template-columns:1fr 1fr}.employee-photo-editor{grid-template-columns:88px minmax(0,1fr)}.employee-photo-preview{width:82px;height:82px}}
@media (max-width:560px){.auth-gate.server-auth-gate{padding:16px}.auth-card{padding:22px;border-radius:17px}.salary-sheet-summary{grid-template-columns:1fr}.salary-sheet-summary>div{border-right:0}.employee-doc-title{display:block;text-align:center}.employee-doc-title>div{text-align:center;margin-top:10px}}

/* Employee verification certificate */
.verification-layout { max-width: 860px; margin: 0 auto; }
.verification-form { padding: 20px; }
.verification-note { border:1px solid #eadfd8; background:#fff8f4; border-radius:12px; padding:13px 14px; display:grid; gap:4px; }
.verification-note strong { font-size:11px; }
.verification-note span { color:var(--muted); font-size:10px; line-height:1.5; }
.certificate-document { padding:54px 58px; }
.certificate-head { padding-bottom:18px; }
.certificate-title { margin:30px 0 24px; }
.certificate-title h1 {
  font-size:21px;
  letter-spacing:.035em;
  font-family:Inter, Arial, sans-serif;
  font-weight:800 !important;
  font-style:normal;
}
.certificate-date { text-align:right; font-size:10.5px; margin-bottom:26px; }
.certificate-body { font-size:11px; line-height:1.85; color:#25282c; }
.certificate-body p { margin:0 0 18px; }
.certificate-salutation { margin-bottom:22px !important; }
.certificate-closing { margin-top:28px; font-size:10.5px; line-height:1.65; color:#2c3034; }
.certificate-closing p { margin:0 0 12px; }
.certificate-sign-label { margin-top:28px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#60656a; }
.certificate-signatures { margin-top:14px; gap:46px; }
.certificate-signatures .signature-image { max-width:130px; max-height:50px; }

@media (max-width:560px){
  .verification-form{padding:16px}
  .certificate-document{padding:28px}
}

/* Ensure off-screen PDF rendering uses the same bold title weight as preview. */
.pdf-document .doc-title h1,
.pdf-render-host .doc-title h1,
.pdf-document .certificate-title h1,
.pdf-render-host .certificate-title h1 {
  font-family:Inter, Arial, sans-serif !important;
  font-weight:800 !important;
  font-style:normal !important;
}
.pdf-document .doc-company h2,
.pdf-render-host .doc-company h2 {
  font-family:Inter, Arial, sans-serif !important;
  font-weight:800 !important;
}


/* ===== PDF CONTENT SIZE: 13PX =====
   Main document content is 13px. Spacing is tightened so portrait documents
   continue to fit on one A4 page, while salary sheets remain one full-length page. */

.pdf-document {
  padding:38px;
}

.pdf-document .doc-head {
  gap:18px;
  padding-bottom:14px;
}

.pdf-document .doc-company h2 {
  margin-bottom:4px;
}

.pdf-document .doc-company div,
.pdf-render-host .doc-company div {
  font-size:13px !important;
  line-height:1.25;
  margin-top:1px;
}

.pdf-document .doc-title {
  margin:18px 0 14px;
}

.pdf-document .doc-title p,
.pdf-render-host .doc-title p {
  margin-top:4px;
  font-size:13px !important;
  line-height:1.25;
}

.pdf-document .doc-field {
  padding:7px 10px;
}

.pdf-document .doc-field span,
.pdf-render-host .doc-field span {
  font-size:10px !important;
  line-height:1.15;
}

.pdf-document .doc-field strong,
.pdf-render-host .doc-field strong {
  margin-top:2px;
  font-size:13px !important;
  line-height:1.25;
}

.pdf-document .doc-section {
  margin-top:15px;
}

.pdf-document .doc-section h3,
.pdf-render-host .doc-section h3 {
  margin-bottom:6px;
  font-size:13px !important;
  line-height:1.2;
}

.pdf-document .doc-table th,
.pdf-document .doc-table td,
.pdf-render-host .doc-table th,
.pdf-render-host .doc-table td {
  padding:6px 7px;
  font-size:13px !important;
  line-height:1.2;
}

.pdf-document .salary-total-box {
  margin-top:10px;
}

.pdf-document .salary-total-row,
.pdf-render-host .salary-total-row {
  padding:6px 8px;
  font-size:13px !important;
  line-height:1.2;
}

.pdf-document .salary-total-row.net,
.pdf-render-host .salary-total-row.net {
  margin-top:3px;
  font-size:14px !important;
}

.pdf-document .doc-signatures {
  gap:42px;
  margin-top:30px;
}

.pdf-document .signature-box,
.pdf-render-host .signature-box {
  grid-template-rows:52px auto;
  font-size:12px !important;
}

.pdf-document .signature-box > div:first-child:not(.signature-line) {
  height:52px !important;
}

.pdf-document .signature-image {
  max-height:48px;
  margin-bottom:4px;
}

.pdf-document .signature-line {
  padding-top:4px;
}

.pdf-document .doc-foot,
.pdf-render-host .doc-foot {
  margin-top:20px;
  padding-top:7px;
  font-size:11px !important;
}

/* Salary Sheet / Employee Salary Statement */
.pdf-document-landscape .salary-sheet-doc-table th,
.pdf-document-landscape .salary-sheet-doc-table td,
.pdf-render-host .pdf-document-landscape .salary-sheet-doc-table th,
.pdf-render-host .pdf-document-landscape .salary-sheet-doc-table td {
  padding:6px 5px;
  font-size:13px !important;
  line-height:1.15;
}

.pdf-document-landscape .sheet-doc-formula,
.pdf-render-host .pdf-document-landscape .sheet-doc-formula {
  margin-top:8px;
  font-size:11px !important;
  line-height:1.25;
}

/* Verification Certificate / Experience Certificate / Bank Letter */
.pdf-document.certificate-document {
  padding:42px 48px;
}

.pdf-document .certificate-head {
  padding-bottom:12px;
}

.pdf-document .certificate-title {
  margin:18px 0 15px;
}

.pdf-document .certificate-date,
.pdf-render-host .certificate-date {
  margin-bottom:14px;
  font-size:13px !important;
  line-height:1.3;
}

.pdf-document .certificate-body,
.pdf-render-host .certificate-body {
  font-size:13px !important;
  line-height:1.85;
}

.pdf-document .certificate-body p {
  margin:0 0 18px;
}

.pdf-document .certificate-salutation {
  margin-bottom:22px !important;
}

.pdf-document .certificate-closing,
.pdf-render-host .certificate-closing {
  margin-top:28px;
  font-size:13px !important;
  line-height:1.65;
}

.pdf-document .certificate-closing p {
  margin:0 0 12px;
}

.pdf-document .certificate-sign-label,
.pdf-render-host .certificate-sign-label {
  margin-top:28px;
  font-size:11px !important;
}

.pdf-document .certificate-signatures {
  margin-top:14px;
  gap:46px;
}

.pdf-document .certificate-signatures .signature-image {
  max-height:44px;
}

/* Employee Profile fallback message uses the same 13px content size. */
.pdf-document .doc-section > div[style*="font-size:10px"] {
  font-size:13px !important;
  padding:8px !important;
}


/* ===== LARGER COMPANY STAMP IN PDF DOCUMENTS =====
   The second signature box is always the Company Stamp.
   Increase only the stamp while preserving its original aspect ratio. */
.pdf-document .doc-signatures .signature-box:last-child,
.pdf-render-host .doc-signatures .signature-box:last-child {
  grid-template-rows:72px auto !important;
}

.pdf-document .doc-signatures .signature-box:last-child .signature-image,
.pdf-render-host .doc-signatures .signature-box:last-child .signature-image {
  width:auto !important;
  height:auto !important;
  max-width:180px !important;
  max-height:68px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

.pdf-document .certificate-signatures .signature-box:last-child .signature-image,
.pdf-render-host .certificate-signatures .signature-box:last-child .signature-image {
  max-width:175px !important;
  max-height:66px !important;
}


/* ===== SALARY SHEET PREVIEW LAYOUT FIX =====
   Preview-only rules. Exported Salary Sheet PDF keeps its dedicated wide-page logic. */

#salarySheetPreviewDialog.preview-dialog {
  width:min(1080px, calc(100vw - 24px));
  max-width:none;
}

#salarySheetPreviewDialog .dialog-shell {
  width:100%;
}

#salarySheetPreviewDialog .document-preview-wrap {
  width:100%;
  min-width:0;
  padding:20px;
  overflow:auto;
  box-sizing:border-box;
}

#salarySheetPreviewDialog #salarySheetDocument {
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:0;
  margin:0 auto;
  padding:34px;
  box-sizing:border-box;
  overflow:hidden;
}

/* Keep the entire Salary Sheet table inside the white preview page. */
#salarySheetPreviewDialog .salary-sheet-doc-table {
  width:100%;
  min-width:0;
  max-width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}

#salarySheetPreviewDialog .salary-sheet-doc-table th,
#salarySheetPreviewDialog .salary-sheet-doc-table td {
  min-width:0;
  padding:7px 5px;
  font-size:11px !important;
  line-height:1.2;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
  vertical-align:middle;
}

/* Balanced preview-only column widths. */
#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(1),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(1) { width:16%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(2),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(2) { width:15%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(3),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(3) { width:12%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(4),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(4) { width:7%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(5),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(5) { width:12%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(6),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(6) { width:10%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(7),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(7) { width:10%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(8),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(8) { width:8%; }

#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(9),
#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(9) { width:10%; }

#salarySheetPreviewDialog .salary-sheet-doc-table tfoot th {
  overflow-wrap:anywhere;
}

#salarySheetPreviewDialog .sheet-doc-formula {
  white-space:normal;
  overflow-wrap:anywhere;
}

@media (max-width:760px) {
  #salarySheetPreviewDialog #salarySheetDocument {
    padding:22px 16px;
  }

  #salarySheetPreviewDialog .salary-sheet-doc-table th,
  #salarySheetPreviewDialog .salary-sheet-doc-table td {
    padding:6px 3px;
    font-size:9px !important;
  }
}


/* ===== EMPLOYEE SALARY STATEMENT PREVIEW / PDF FIX =====
   Completely scoped so the main Salary Sheet layout is unaffected. */

#employeeSalaryStatementPreviewDialog.preview-dialog {
  width:min(1080px, calc(100vw - 24px));
  max-width:none;
}

#employeeSalaryStatementPreviewDialog .dialog-shell {
  width:100%;
}

#employeeSalaryStatementPreviewDialog .document-preview-wrap {
  width:100%;
  min-width:0;
  padding:20px;
  overflow:auto;
  box-sizing:border-box;
}

#employeeSalaryStatementPreviewDialog #employeeSalaryStatementDocument {
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:0;
  margin:0 auto;
  padding:34px;
  box-sizing:border-box;
  overflow:hidden;
}

/* Employee information grid stays compact and readable. */
#employeeSalaryStatementPreviewDialog .doc-grid {
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

#employeeSalaryStatementPreviewDialog .doc-field {
  min-width:0;
}

#employeeSalaryStatementPreviewDialog .doc-field strong {
  white-space:normal;
  overflow-wrap:anywhere;
}

/* The statement has 8 columns, not the 9-column Salary Sheet layout. */
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table {
  width:100%;
  min-width:0;
  max-width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th,
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td {
  min-width:0;
  padding:7px 5px;
  font-size:11px !important;
  line-height:1.2;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
  vertical-align:middle;
}

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(1),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(1) { width:12%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(2),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(2) { width:13%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(3),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(3) { width:7%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(4),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(4) { width:14%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(5),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(5) { width:13%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(6),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(6) { width:13%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(7),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(7) { width:13%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table th:nth-child(8),
#employeeSalaryStatementPreviewDialog .employee-salary-statement-table td:nth-child(8) { width:15%; }

#employeeSalaryStatementPreviewDialog .employee-salary-statement-table tfoot th {
  overflow-wrap:anywhere;
}

/* Export-specific layout: preserve 13px PDF content while preventing clipping. */
.pdf-render-host .employee-salary-statement-export .employee-salary-statement-table,
.employee-salary-statement-export .employee-salary-statement-table {
  width:100%;
  min-width:0;
  table-layout:fixed;
  border-collapse:collapse;
}

.pdf-render-host .employee-salary-statement-export .employee-salary-statement-table th,
.pdf-render-host .employee-salary-statement-export .employee-salary-statement-table td,
.employee-salary-statement-export .employee-salary-statement-table th,
.employee-salary-statement-export .employee-salary-statement-table td {
  padding:7px 7px;
  font-size:13px !important;
  line-height:1.2;
  white-space:normal !important;
  overflow-wrap:anywhere;
  vertical-align:middle;
}

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(1),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(1) { width:12%; }

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(2),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(2) { width:13%; }

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(3),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(3) { width:7%; }

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(4),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(4) { width:14%; }

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(5),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(5) { width:13%; }

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(6),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(6) { width:13%; }

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(7),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(7) { width:13%; }

.employee-salary-statement-export .employee-salary-statement-table th:nth-child(8),
.employee-salary-statement-export .employee-salary-statement-table td:nth-child(8) { width:15%; }

@media (max-width:760px) {
  #employeeSalaryStatementPreviewDialog #employeeSalaryStatementDocument {
    padding:22px 16px;
  }

  #employeeSalaryStatementPreviewDialog .doc-grid {
    grid-template-columns:1fr 1fr;
  }

  #employeeSalaryStatementPreviewDialog .employee-salary-statement-table th,
  #employeeSalaryStatementPreviewDialog .employee-salary-statement-table td {
    padding:6px 3px;
    font-size:9px !important;
  }
}

/* Attendance-hours payroll: fit the extended table while retaining usable inputs. */
.salary-sheet-controls { grid-template-columns:repeat(4,minmax(135px,1fr)); align-items:end; }
.salary-sheet-controls .sheet-holidays { grid-column:span 2; }
.salary-sheet-controls .sheet-cycle-note { grid-column:span 2; }
.salary-sheet-controls textarea { min-height:58px; resize:vertical; }
.salary-sheet-table-wrap { overflow-x:auto; }
.salary-sheet-table { min-width:1170px; }
.salary-sheet-table th,.salary-sheet-table td { padding:10px 5px; font-size:12px; }
.salary-sheet-table th:nth-child(1),.salary-sheet-table td:nth-child(1){width:13%;}
.salary-sheet-table th:nth-child(2),.salary-sheet-table td:nth-child(2){width:12%;}
.salary-sheet-table th:nth-child(3),.salary-sheet-table td:nth-child(3){width:9%;}
.salary-sheet-table th:nth-child(4),.salary-sheet-table td:nth-child(4){width:8%;}
.salary-sheet-table th:nth-child(5),.salary-sheet-table td:nth-child(5){width:7%;}
.salary-sheet-table th:nth-child(6),.salary-sheet-table td:nth-child(6){width:11%;}
.salary-sheet-table th:nth-child(7),.salary-sheet-table td:nth-child(7){width:9%;}
.salary-sheet-table th:nth-child(8),.salary-sheet-table td:nth-child(8){width:8%;}
.salary-sheet-table th:nth-child(9),.salary-sheet-table td:nth-child(9){width:7%;}
.salary-sheet-table th:nth-child(10),.salary-sheet-table td:nth-child(10){width:10%;}
.salary-sheet-table th:nth-child(11),.salary-sheet-table td:nth-child(11){width:6%;}
#salarySheetPreviewDialog .salary-sheet-doc-table th:nth-child(n),#salarySheetPreviewDialog .salary-sheet-doc-table td:nth-child(n){width:auto;}
#salarySheetPreviewDialog .salary-sheet-doc-table th,#salarySheetPreviewDialog .salary-sheet-doc-table td {font-size:9px!important;padding:6px 3px;}
@media(max-width:1100px){.salary-sheet-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.salary-sheet-controls{grid-template-columns:1fr}.salary-sheet-controls .sheet-holidays,.salary-sheet-controls .sheet-cycle-note{grid-column:auto}}

/* V2: compact and accessible holiday controls. Isolated from shared .field styles. */
.salary-sheet-controls .sheet-holidays { align-self:start; display:flex; flex-direction:column; gap:6px; min-width:0; }
.sheet-holidays > label > span { display:block; font-size:12px; font-weight:650; }
.sheet-holiday-picker-row { display:flex; align-items:center; justify-content:flex-start; gap:7px; width:max-content; max-width:100%; }
.salary-sheet-controls .sheet-holiday-picker-row input#sheetHolidayDatePicker {
  display:block; flex:0 0 172px; width:172px; max-width:calc(100vw - 125px); min-width:0;
  height:34px; min-height:34px; padding:3px 9px; margin:0;
  box-sizing:border-box; border:1px solid #cfd7e3; border-radius:8px;
  background:#fff; color:#172333; font-family:inherit; font-size:12px; font-weight:500; color-scheme:light;
}
.salary-sheet-controls .sheet-holiday-picker-row button#sheetHolidayAddBtn {
  appearance:none; display:flex; align-items:center; justify-content:center;
  flex:0 0 34px; width:34px; min-width:34px; height:34px; min-height:34px;
  margin:0; padding:0; background:#fff; color:#e43c35; border:1px solid #f0c5c3;
  border-radius:8px; box-shadow:none; cursor:pointer; transition:background .15s,border-color .15s;
}
.salary-sheet-controls .sheet-holiday-picker-row button#sheetHolidayAddBtn:hover:not(:disabled) {background:#fff3f2;border-color:#e43c35;}
.salary-sheet-controls .sheet-holiday-picker-row button#sheetHolidayAddBtn:disabled {opacity:.4;cursor:not-allowed;}
.sheet-holiday-picker-row :is(input,button):focus-visible,.sheet-holiday-remove:focus-visible {outline:2px solid #3279cc;outline-offset:2px;}
.sheet-holiday-feedback {font-size:11px;color:#237348;line-height:1.3;min-height:0;}
.sheet-holiday-feedback:empty {display:none;}
.sheet-holiday-feedback.is-error {color:#b42318;}
.sheet-holiday-chips {display:flex;flex-wrap:wrap;gap:6px;min-height:16px;align-items:center;}
.sheet-holiday-chip {display:inline-flex;gap:8px;align-items:center;padding:4px 6px 4px 9px;background:#eaf1fb;border:1px solid #cbdcf3;border-radius:15px;color:#123b70;font-size:11px;font-weight:600;}
.sheet-holiday-remove {background:#fff;border:0;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#b42318;font-size:17px;line-height:1;padding:0;}
.sheet-holiday-remove:hover {background:#ffe1e1;}
.holiday-empty,.sheet-holiday-hint {color:#64748b;font-size:11px;line-height:1.4;}
.visually-hidden {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
@media(max-width:460px){.salary-sheet-controls .sheet-holiday-picker-row input#sheetHolidayDatePicker{flex:0 1 172px;width:172px;}}

/* Compact month-level paid-leaves selector */
.salary-sheet-controls .sheet-paid-leaves-field {align-self:end;}
.salary-sheet-controls .sheet-paid-leaves-field select#sheetPaidLeaves {
  display:block;width:135px;max-width:100%;height:34px;min-height:34px;
  margin:0;padding:3px 30px 3px 10px;border:1px solid #cfd7e3;
  border-radius:8px;background-color:#fff;color:#172333;
  font-family:inherit;font-size:12px;font-weight:550;box-shadow:none;
}
.salary-sheet-controls .sheet-paid-leaves-field select#sheetPaidLeaves:focus-visible {outline:2px solid #3279cc;outline-offset:2px;}

/* Accounts Salary Sheet spacing refinement (2026-10-01). */
/* Scope the reduced outer margin to this section; other modules keep their original spacing. */
#salarySheetSection.content-section,
#salarySheetSection.content-section.active { padding: 10px !important; }
/* Provide breathing room at the left edge of the employee names. */
#salarySheetSection .salary-sheet-table th:first-child,
#salarySheetSection .salary-sheet-table td:first-child { padding-left: 16px; }

/* Embedded attendance module and payroll attendance reconciliation */
#attendanceSection{padding:10px!important;overflow:visible}
.attendance-integrated-header{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid #e2e5eb;border-radius:14px 14px 0 0;padding:16px 18px}
.attendance-integrated-header h2{margin:0 0 5px;font-size:19px}.attendance-integrated-header p{margin:0;color:#64748b;font-size:12px}
#attendanceFrame{display:block;width:100%;height:calc(100vh - 190px);min-height:670px;border:1px solid #e2e5eb;border-radius:14px;background:#fff}
.attendance-payroll-import{grid-column:1/-1;background:#f8fafc;border:1px solid #e0e7ef;border-radius:12px;padding:13px 14px;min-width:0}
.attendance-payroll-import label{display:block;color:#253449;font-weight:700;margin-bottom:9px;font-size:12px}
.attendance-payroll-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attendance-payroll-actions select{flex:1;min-width:185px;width:auto;height:38px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font:inherit}
.attendance-payroll-actions button{height:38px;padding:0 13px}
.attendance-payroll-hint{display:block;color:#64748b;font-size:11px;margin-top:8px}
.attendance-import-dialog{width:min(980px,96vw);max-height:88vh;border:1px solid #e2e8f0;border-radius:15px;padding:19px;background:#fff;box-shadow:0 20px 65px #17223544}
.attendance-import-dialog::backdrop{background:rgba(16,24,40,.56)}
.attendance-import-head,.attendance-import-footer{display:flex;justify-content:space-between;align-items:center;gap:15px}
.attendance-import-head h2{margin:0;font-size:19px}.attendance-import-dialog p{color:#64748b;font-size:12px;margin:12px 0}
.attendance-import-table-wrap{overflow:auto;max-height:52vh}.attendance-import-table-wrap table{width:100%;min-width:610px;border-collapse:collapse}
.attendance-import-table-wrap th,.attendance-import-table-wrap td{padding:10px 8px;text-align:left;border-bottom:1px solid #e5e7eb;font-size:12px}
.attendance-import-table-wrap select{max-width:320px;width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:8px}
.attendance-import-footer{margin-top:15px;flex-wrap:wrap}.attendance-import-footer>span{flex:1;color:#64748b;font-size:12px}
.attendance-import-alert{color:#9a3412;font-weight:700}
@media(max-width:640px){.attendance-integrated-header{flex-wrap:wrap}#attendanceFrame{height:74vh;min-height:560px}.attendance-payroll-actions select{flex-basis:100%}}

/* Attendance shares the EMS content surface; no second bordered/scrolling panel. */
#attendanceSection.content-section,#attendanceSection.content-section.active{padding:10px!important;overflow:visible!important;max-width:100%}
#attendanceFrame{display:block;width:100%;height:900px;min-height:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden}
@media(max-width:640px){#attendanceSection.content-section{padding:8px!important}#attendanceFrame{height:780px;min-height:0}}