:root{
  --bg:#edf4fb;--bg2:#f7fbff;--glass:rgba(255,255,255,.72);--glass-strong:rgba(255,255,255,.9);--panel:#fff;--ink:#142033;--muted:#6f7f95;--line:rgba(36,77,125,.12);--line-strong:rgba(36,77,125,.2);--blue:#1477ff;--blue2:#5ca8ff;--green:#159969;--red:#dc4456;--orange:#e78b24;--purple:#7158e8;--shadow:0 18px 52px rgba(31,66,107,.08);--shadow-sm:0 8px 24px rgba(31,66,107,.07);--radius:22px;--radius-sm:14px;--sidebar:238px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:linear-gradient(135deg,#f9fcff,#edf4fb 55%,#eaf2ff);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(10px);pointer-events:none}body:before{width:520px;height:520px;right:-120px;top:-170px;background:radial-gradient(circle,rgba(63,142,255,.22),transparent 70%)}body:after{width:460px;height:460px;left:20%;bottom:-260px;background:radial-gradient(circle,rgba(131,160,255,.18),transparent 70%)}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.boot{min-height:100vh;display:grid;place-items:center;align-content:center;gap:9px;color:var(--muted)}.boot b{font-size:22px;color:var(--ink)}.logo-orb{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:24px;background:linear-gradient(145deg,#8dc4ff,#1477ff 62%,#0b56bb);box-shadow:inset 0 1px rgba(255,255,255,.8),0 12px 28px rgba(20,119,255,.25)}

/* Auth */
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(360px,520px) 1fr;padding:22px;gap:22px}.auth-card,.auth-visual{border:1px solid rgba(255,255,255,.9);background:var(--glass);backdrop-filter:blur(24px) saturate(145%);box-shadow:var(--shadow);border-radius:30px}.auth-card{padding:34px;display:flex;flex-direction:column}.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#9fcbff,#1777f3 65%,#0d58bf);color:#fff;font-weight:900;box-shadow:inset 0 1px rgba(255,255,255,.8),0 9px 25px rgba(20,119,255,.2)}.auth-brand b{font-size:19px}.auth-brand small{display:block;color:var(--muted);margin-top:2px}.auth-card h1{font-size:32px;letter-spacing:-.035em;margin:8px 0}.auth-card>p{color:var(--muted);line-height:1.65;margin:0 0 24px}.auth-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:5px;background:rgba(235,242,250,.86);border-radius:14px;margin-bottom:22px}.auth-tabs button{border:0;border-radius:10px;padding:9px;background:transparent;color:var(--muted)}.auth-tabs button.active{background:#fff;color:var(--blue);box-shadow:var(--shadow-sm);font-weight:700}.form-grid{display:grid;gap:14px}.form-grid.two{grid-template-columns:1fr 1fr}.field{display:grid;gap:6px}.field label{font-size:12px;color:#596b83;font-weight:700}.field input,.field select,.field textarea,.input{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.86);border-radius:13px;padding:11px 12px;outline:none;color:var(--ink);transition:.18s}.field textarea{min-height:92px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:rgba(20,119,255,.5);box-shadow:0 0 0 4px rgba(20,119,255,.08)}.password-help{font-size:11px;color:var(--muted);line-height:1.45}.checkline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.checkline label{display:flex;align-items:center;gap:7px}.link-btn{border:0;background:transparent;color:var(--blue);padding:0}.btn{border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px 14px;color:var(--ink);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--blue),#468ef4);color:#fff;border-color:transparent;box-shadow:0 9px 22px rgba(20,119,255,.18)}.btn.danger{color:var(--red);border-color:rgba(220,68,86,.22);background:#fff7f8}.btn.success{color:#fff;background:linear-gradient(135deg,#14a36f,#4fc38f);border-color:transparent}.btn.soft{background:rgba(255,255,255,.62)}.btn.small{padding:7px 10px;min-height:32px;font-size:12px}.auth-footer{margin-top:auto;padding-top:22px;font-size:11px;color:#91a0b3}.auth-visual{padding:54px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.auth-visual:before{content:"";position:absolute;width:440px;height:440px;right:-110px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(42,134,255,.32),transparent 65%)}.auth-visual h2{font-size:48px;letter-spacing:-.05em;line-height:1.04;max-width:760px;margin:0}.auth-visual p{max-width:680px;color:var(--muted);font-size:17px;line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative}.feature-card{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);padding:18px;border-radius:18px;box-shadow:var(--shadow-sm)}.feature-card b{display:block;margin:7px 0}.feature-card small{color:var(--muted);line-height:1.5}.auth-notice{border-radius:14px;padding:12px 13px;font-size:12px;line-height:1.55;background:#eef7ff;border:1px solid #cde5ff;color:#315b87}.auth-notice.success{background:#effaf5;border-color:#c8efdd;color:#217251}.auth-notice.error{background:#fff1f3;border-color:#ffd2da;color:#9f2e42}

/* App shell */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:14px;padding:14px}.glass{background:var(--glass);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(22px) saturate(145%);box-shadow:var(--shadow)}.sidebar{border-radius:28px;padding:16px 12px;display:flex;flex-direction:column;position:sticky;top:14px;height:calc(100vh - 28px);overflow:auto}.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}.brand b{font-size:18px}.brand span{font-size:10px;font-weight:800;color:var(--blue);margin-left:4px}.brand small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.nav-group{margin:8px 6px 4px;color:#99a7b8;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.nav{display:grid;gap:3px}.nav button{border:0;background:transparent;text-align:left;border-radius:13px;padding:10px 11px;color:#5c6e85;display:flex;gap:10px;align-items:center}.nav button i{font-style:normal;width:23px;text-align:center;color:#7187a2}.nav button:hover,.nav button.active{background:rgba(255,255,255,.86);color:#176bc8;box-shadow:0 6px 18px rgba(38,82,132,.06)}.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:14px 8px 5px}.side-user{display:flex;align-items:center;gap:9px}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#dceafd;color:#2168ba;font-weight:900}.side-user b{font-size:12px}.side-user small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.main{min-width:0}.topbar{height:64px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:9px 12px 9px 18px;position:sticky;top:14px;z-index:20}.searchbox{display:flex;align-items:center;gap:9px;color:#718197;min-width:300px;max-width:520px;width:44%}.searchbox input{border:0;background:transparent;outline:none;width:100%;color:var(--ink)}kbd{font-size:10px;border:1px solid var(--line);background:#eef3f9;border-radius:7px;padding:3px 6px;color:#7a899b}.top-actions{display:flex;align-items:center;gap:7px}.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.7);display:grid;place-items:center;position:relative}.badge-dot{position:absolute;right:5px;top:5px;width:8px;height:8px;background:var(--red);border:2px solid #fff;border-radius:50%}.content{max-width:1560px;margin:0 auto;padding:34px 26px 70px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:var(--blue);margin-bottom:6px}.page-head h1{font-size:32px;letter-spacing:-.04em;margin:0}.page-head p{color:var(--muted);margin:6px 0 0;line-height:1.55}.head-actions{display:flex;gap:8px;flex-wrap:wrap}.statusbar{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}.chip{font-size:10px;border:1px solid var(--line);background:rgba(255,255,255,.65);border-radius:999px;padding:6px 9px;color:#607189}.chip.blue{color:#176dca;background:#eaf4ff;border-color:#cfe5ff}.chip.green{color:#16784f;background:#ecfaf4;border-color:#c8efdd}.chip.red{color:#a33245;background:#fff1f3;border-color:#ffd1d8}.chip.orange{color:#a15e10;background:#fff6e8;border-color:#ffe0ad}.chip.purple{color:#6248ce;background:#f2efff;border-color:#ddd5ff}

/* Cards / tables */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px}.kpi{background:var(--glass-strong);border:1px solid rgba(255,255,255,.94);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm)}.kpi label{display:block;color:#6d7d92;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.kpi strong{display:block;font-size:25px;margin:7px 0 3px;letter-spacing:-.03em}.kpi small{color:#8896a8}.grid{display:grid;gap:12px}.grid.two{grid-template-columns:1.35fr 1fr}.grid.equal{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.panel{background:var(--glass-strong);border:1px solid rgba(255,255,255,.95);border-radius:20px;box-shadow:var(--shadow-sm);padding:18px;min-width:0}.panel.pad0{padding:0;overflow:hidden}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.panel-title h2{font-size:16px;margin:0}.panel-title p{font-size:11px;color:var(--muted);margin:3px 0 0}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.toolbar .input{width:auto;min-width:180px}.table-wrap{overflow:auto;border:1px solid #edf1f6;border-radius:14px;background:#fff}.table{border-collapse:collapse;width:100%;font-size:11px;min-width:820px}.table th{padding:10px 11px;background:#f6f9fc;text-align:left;color:#718196;font-size:9px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;z-index:1}.table td{padding:10px 11px;border-top:1px solid #eef2f6;vertical-align:middle}.table tr:hover td{background:#fbfdff}.namecell{display:flex;align-items:center;gap:8px}.mini-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e8f2ff;color:#246fca;font-weight:800;flex:0 0 auto}.namecell b{display:block;font-size:11px}.namecell small{display:block;color:var(--muted);margin-top:2px}.money{font-variant-numeric:tabular-nums;font-weight:700}.muted{color:var(--muted)}.empty{padding:44px 20px;text-align:center;color:#8a98aa}.empty b{display:block;color:#4e6078;font-size:14px;margin-bottom:5px}.row-list{display:grid;gap:8px}.list-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid #edf1f6;background:#fbfdff;border-radius:13px;padding:11px}.list-row b{font-size:11px}.list-row small{display:block;color:var(--muted);margin-top:3px}.actions-inline{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.kanban{display:grid;grid-template-columns:repeat(7,minmax(210px,1fr));gap:10px;overflow:auto;padding-bottom:6px}.kanban-col{background:rgba(245,249,253,.92);border:1px solid #e8eef5;border-radius:16px;padding:10px;min-height:280px}.kanban-head{display:flex;justify-content:space-between;font-size:10px;font-weight:900;color:#5e7088;margin-bottom:8px}.deal-card{background:#fff;border:1px solid #edf1f6;border-radius:12px;padding:10px;margin-bottom:8px;box-shadow:0 5px 15px rgba(35,75,120,.05)}.deal-card b{font-size:11px}.deal-card small{display:block;color:var(--muted);margin-top:3px}.deal-meta{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:9px;color:#6d7d91}.progress{height:6px;background:#e9eef5;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#1477ff,#65adff)}.metric-line{display:flex;justify-content:space-between;gap:10px;margin:8px 0;font-size:11px}.metric-line span{color:var(--muted)}

/* Dashboard */
.hero-panel{border-radius:24px;padding:22px;background:linear-gradient(135deg,rgba(255,255,255,.91),rgba(241,248,255,.88));border:1px solid rgba(255,255,255,.96);box-shadow:var(--shadow);margin-bottom:12px;display:flex;justify-content:space-between;gap:20px;align-items:center}.hero-panel h2{font-size:22px;margin:0 0 6px;letter-spacing:-.03em}.hero-panel p{margin:0;color:var(--muted);line-height:1.55}.health{display:flex;align-items:center;gap:7px;font-size:11px;color:#197a51;background:#effaf5;border:1px solid #c9efdd;border-radius:999px;padding:8px 10px;white-space:nowrap}.health i{width:8px;height:8px;border-radius:50%;background:#1aa36f;box-shadow:0 0 0 5px rgba(26,163,111,.09)}.activity{display:grid;gap:7px}.activity-item{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:start;padding:8px 0;border-bottom:1px solid #eff2f6}.activity-item:last-child{border-bottom:0}.activity-icon{width:28px;height:28px;border-radius:9px;background:#edf5ff;color:#2b75c9;display:grid;place-items:center;font-size:11px}.activity-item b{font-size:11px}.activity-item small{color:var(--muted);display:block;margin-top:2px}.activity-item time{font-size:9px;color:#98a5b4}

/* Detail cards/forms */
.profile{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.profile-photo{width:64px;height:64px;border-radius:19px;background:linear-gradient(145deg,#e7f2ff,#bddcff);display:grid;place-items:center;font-weight:900;font-size:21px;color:#256dc0}.profile h2{margin:0 0 5px}.profile p{margin:0;color:var(--muted);font-size:11px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.info-card{border:1px solid #edf1f6;background:#fbfdff;border-radius:14px;padding:12px}.info-card label{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.info-card b{display:block;font-size:11px;margin-top:5px}.tabs{display:flex;gap:5px;border-bottom:1px solid #edf1f6;margin-bottom:14px}.tabs button{border:0;background:transparent;padding:9px 10px;color:var(--muted);border-bottom:2px solid transparent}.tabs button.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:800}.preflight{display:grid;gap:7px}.preflight-row{display:flex;justify-content:space-between;align-items:center;border:1px solid #edf1f6;border-radius:12px;padding:10px 11px;font-size:11px}.preflight-row.ok{background:#f3fbf7}.preflight-row.bad{background:#fff7f8}.timeline{display:grid;gap:0}.timeline-step{display:grid;grid-template-columns:20px 1fr;gap:8px;position:relative;padding-bottom:15px}.timeline-step:not(:last-child):before{content:"";position:absolute;left:9px;top:18px;bottom:0;width:1px;background:#dfe7f0}.timeline-dot{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:9px;background:#edf4fb;color:#60738c;z-index:1}.timeline-step.approved .timeline-dot{background:#e7f8f0;color:#158259}.timeline-step.pending .timeline-dot{background:#eaf4ff;color:#176dca}.timeline-step.rejected .timeline-dot{background:#fff0f2;color:#bd3449}.timeline-step b{font-size:11px}.timeline-step small{display:block;color:var(--muted);margin-top:2px}

/* Modal / drawer / toast */
.modal-backdrop{position:fixed;inset:0;background:rgba(18,33,52,.24);backdrop-filter:blur(7px);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(760px,96vw);max-height:92vh;overflow:auto;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.98);border-radius:22px;box-shadow:0 30px 80px rgba(16,45,80,.22)}.modal.wide{width:min(1050px,96vw)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #edf1f6;position:sticky;top:0;background:rgba(255,255,255,.95);z-index:2}.modal-head h3{margin:0;font-size:16px}.modal-body{padding:18px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid #edf1f6;position:sticky;bottom:0;background:rgba(255,255,255,.96)}.close-btn{border:0;background:#f3f6fa;width:30px;height:30px;border-radius:9px;color:#6c7b8f}.toast-stack{position:fixed;right:16px;top:16px;z-index:150;display:grid;gap:8px;width:min(380px,calc(100vw - 32px))}.toast{border-radius:14px;padding:12px 14px;background:#fff;border:1px solid #e8edf3;box-shadow:0 16px 38px rgba(31,66,107,.16);font-size:12px;line-height:1.45}.toast.success{border-left:4px solid var(--green)}.toast.error{border-left:4px solid var(--red)}.toast.info{border-left:4px solid var(--blue)}

/* Data hub */
.dropzone{border:1.5px dashed #bdd5ee;background:#f8fbff;border-radius:16px;padding:28px;text-align:center;color:#6d7d91}.dropzone.drag{border-color:var(--blue);background:#eff7ff}.dropzone b{display:block;color:#42566e;margin-bottom:5px}.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.flow-step{border:1px solid #edf1f6;border-radius:12px;padding:10px;background:#fbfdff;font-size:10px;color:#78889c}.flow-step.active{border-color:#cce4ff;background:#eff7ff;color:#176dca}.upload-result{margin-top:12px}.codebox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#101a29;color:#d5e6f8;border-radius:12px;padding:12px;white-space:pre-wrap;font-size:10px;line-height:1.6;max-height:260px;overflow:auto}

/* Responsive */
@media(max-width:1180px){:root{--sidebar:84px}.brand>div:not(.brand-mark),.nav button span,.nav-group,.side-user>div:not(.avatar){display:none}.brand{justify-content:center}.nav button{justify-content:center}.nav button i{width:auto}.side-user{justify-content:center}.kpis{grid-template-columns:repeat(3,1fr)}.grid.two,.grid.equal{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.auth-page{display:block;padding:8px}.auth-visual{display:none}.auth-card{min-height:calc(100vh - 16px);border-radius:22px;padding:24px}.form-grid.two{grid-template-columns:1fr}.shell{display:block;padding:7px}.sidebar{display:none}.topbar{top:7px}.content{padding:24px 8px 60px}.searchbox{min-width:0;width:auto;flex:1}.searchbox input{font-size:11px}.top-actions .btn.soft,.top-actions .icon-btn:nth-child(1){display:none}.page-head{display:block}.head-actions{margin-top:12px}.kpis{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.hero-panel{display:block}.health{width:max-content;margin-top:14px}.flow-steps{grid-template-columns:1fr 1fr}.feature-grid{grid-template-columns:1fr}.table{min-width:720px}.profile{grid-template-columns:auto 1fr}.profile>.actions-inline{grid-column:1/-1}}
@media(max-width:480px){.kpis{grid-template-columns:1fr}.auth-card h1{font-size:27px}.page-head h1{font-size:27px}.modal-backdrop{padding:7px}.modal{border-radius:18px}.top-actions .btn.primary{font-size:0;width:39px;padding:0}.top-actions .btn.primary:before{content:"+";font-size:20px}.flow-steps{grid-template-columns:1fr}}

/* CONTRACT_VIEW_CSS_V1 */
.contract-view-content{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:420px;
  overflow:auto;
  padding:16px;
  border:1px solid var(--border, #dfe3e8);
  border-radius:12px;
  background:var(--surface-2, #f7f8fa);
  font-family:inherit;
  line-height:1.6;
}

/* PAYROLL_ACTIONS_CSS_V46 */
.app-payroll-actions-cell {
  min-width: 520px;
  vertical-align: middle;
}

.app-payroll-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.app-payroll-actions > .btn,
.app-payroll-actions > a.btn {
  white-space: nowrap;
  margin: 0;
}

@media (max-width: 1100px) {
  .app-payroll-actions-cell {
    min-width: 420px;
  }
}

/* PAYROLL_ACTIONS_CSS_V47 */
.app-payroll-actions-cell {
  vertical-align: middle;
}

.app-payroll-actions-cell .app-payroll-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 34px;
}

.app-payroll-actions-cell .app-payroll-actions > .btn,
.app-payroll-actions-cell .app-payroll-actions > a.btn {
  flex: 0 0 auto;
  margin: 0 !important;
  white-space: nowrap;
}

/* PAYROLL_ACTIONS_CSS_V48 */
.app-payroll-actions-cell {
  min-width: 560px;
  vertical-align: middle;
  visibility: visible !important;
}

.app-payroll-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 34px;
}

.app-payroll-actions > .btn,
.app-payroll-actions > a.btn {
  flex: 0 0 auto;
  margin: 0 !important;
  white-space: nowrap;
}

/* ATTENDANCE_AUTO_FULL_CSS_V1 */
.app-att-auto-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 12px;
  background: rgba(16,185,129,.07);
  line-height: 1.45;
}

.app-att-auto-table th,
.app-att-auto-table td {
  vertical-align: middle;
}

.app-att-absence-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.app-att-absence-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.app-att-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.app-att-weekdays label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border, #dbe4ef);
  border-radius: 10px;
  background: #fff;
}

/* ATTENDANCE_MATRIX_CSS_V2 */
.app-att-page {
  display: grid;
  gap: 14px;
}

.app-att-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.app-att-filter-panel {
  padding: 14px;
}

.app-att-filters {
  display: grid;
  grid-template-columns: 170px 240px minmax(220px,1fr) auto;
  gap: 10px;
  align-items: end;
}

.app-att-stats {
  grid-template-columns: repeat(5,minmax(0,1fr));
}

.app-att-matrix-panel {
  overflow: hidden;
}

.app-att-matrix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 10px;
}

.app-att-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted,#6b7a90);
}

.app-att-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.app-att-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.app-att-dot.present { background: #2dbb89; }
.app-att-dot.paid { background: #22a06b; }
.app-att-dot.absent { background: #ef5b68; }
.app-att-dot.late { background: #f2a93b; }
.app-att-dot.holiday { background: #3b82f6; }
.app-att-dot.off { background: #a8b3c3; }

.app-att-matrix-scroll {
  width: 100%;
  overflow: auto;
  border-top: 1px solid var(--border,#e3e9f1);
  max-height: 68vh;
}

.app-att-matrix {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max-content;
  width: 100%;
  font-size: 11px;
}

.app-att-matrix th,
.app-att-matrix td {
  border-right: 1px solid #e8edf4;
  border-bottom: 1px solid #e8edf4;
  padding: 5px 6px;
  text-align: center;
  background: #fff;
  min-width: 58px;
  height: 48px;
}

.app-att-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #f5f8fc;
  color: #66758b;
  font-weight: 700;
}

.app-att-matrix thead th small {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.app-att-matrix th.weekend {
  background: #f1f3f7;
}

.app-att-matrix .sticky-col {
  position: sticky;
  z-index: 5;
  text-align: left;
  background: #fff;
}

.app-att-matrix thead .sticky-col {
  z-index: 10;
  background: #f5f8fc;
}

.app-att-matrix .sticky-col.code {
  left: 0;
  min-width: 92px;
  width: 92px;
}

.app-att-matrix .sticky-col.name {
  left: 92px;
  min-width: 190px;
  width: 190px;
}

.app-att-matrix .sticky-col.dept {
  left: 282px;
  min-width: 135px;
  width: 135px;
}

.app-att-cell {
  position: relative;
}

.app-att-cell.present {
  background: rgba(45,187,137,.08);
}

.app-att-cell.absent {
  background: rgba(239,91,104,.09);
}

.app-att-cell.late {
  background: rgba(242,169,59,.11);
}

.app-att-cell.off,
.app-att-cell.future {
  background: #f4f6f9;
  color: #9aa6b6;
}

.app-att-cell.missing {
  background: rgba(239,91,104,.04);
  color: #a77575;
}

.app-att-cell-inner {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 48px;
}

.app-att-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 22px;
  padding: 2px 5px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 10px;
  background: #e8edf4;
}

.present .app-att-code {
  background: #42b99a;
  color: #fff;
}

.absent .app-att-code {
  background: #ef6571;
  color: #fff;
}

.late .app-att-code {
  background: #f0aa3d;
  color: #fff;
}

.app-att-cell small {
  font-size: 9px;
  color: #74849a;
  white-space: nowrap;
}


.app-att-policy-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.app-att-policy-days label,
.app-att-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border,#dbe4ef);
  border-radius: 10px;
  background: #fff;
}

.app-att-auto-toggle {
  margin-bottom: 12px;
}

.app-att-import-errors {
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .app-att-filters {
    grid-template-columns: 1fr 1fr;
  }

  .app-att-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* SUPER_ADMIN_DATA_GOVERNANCE_CSS_V1 */
.app-data-gov-page {
  display: grid;
  gap: 16px;
}

.app-data-gov-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.app-data-gov-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--border,#dfe7f0);
  border-radius: 16px;
  background: #fff;
}

.app-data-gov-card h3 {
  margin: 5px 0 8px;
}

.app-data-gov-card p {
  margin: 0;
  color: var(--muted,#6d7c91);
  line-height: 1.55;
}

.app-data-gov-card.danger-zone {
  border-color: rgba(239,91,104,.45);
  background: rgba(239,91,104,.04);
}

.app-data-gov-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-data-gov-card-foot > div {
  display: grid;
}

.app-data-gov-card-foot strong {
  font-size: 24px;
}

.app-data-gov-card-foot span {
  color: var(--muted,#6d7c91);
  font-size: 12px;
}

@media (max-width: 1200px) {
  .app-data-gov-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  .app-data-gov-grid {
    grid-template-columns: 1fr;
  }
}

/* PAYROLL_UI_FIX_CSS_V49 */
.app-payroll-drive-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(2px);
}

.app-payroll-drive-progress-card {
  width: min(520px,calc(100vw - 40px));
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
}

.app-payroll-drive-progress-card h3 {
  margin: 5px 0 16px;
}

.app-payroll-drive-progress-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf4;
}

.app-payroll-drive-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width .45s ease;
}

.app-payroll-drive-progress-percent {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
}

.app-payroll-drive-progress-message {
  min-height: 42px;
  margin: 8px 0 14px;
  color: var(--muted,#64748b);
  line-height: 1.5;
}

.app-payroll-drive-progress-result {
  display: grid;
  gap: 12px;
}

.app-payroll-drive-result-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f8fc;
}

/* PAYROLL_STRUCTURAL_ACTION_CSS_V413 */
/*
  The payroll table currently has 8 real columns and THAO TÁC is last.
  JS V4.13 removes any legacy td appended after that column.
  This CSS is a visual failsafe during the few milliseconds before cleanup.
*/
table[data-app-payroll-v413="1"] tbody tr > td:nth-child(n+9) {
  display: none !important;
}

/* PAYROLL_TARGETED_LEGACY_HIDE_V415 */
[data-app-legacy-payroll-action="lock"],
[data-app-legacy-payroll-action="delete"] {
  display: none !important;
}

/* COMPLIANCE_MONTHLY_CSS_V1 */
.app-compliance-month-toolbar {
  display: flex;
  align-items: end;
  gap: 8px;
}

.app-compliance-month-toolbar label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted,#718096);
}

.app-compliance-month-toolbar input[type="month"] {
  height: 42px;
  min-width: 150px;
  padding: 0 12px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.app-compliance-notice {
  margin: 0 0 12px;
}

.app-compliance-table th,
.app-compliance-table td {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .app-compliance-month-toolbar {
    width: 100%;
    align-items: stretch;
  }

  .app-compliance-month-toolbar label {
    flex: 1;
  }

  .app-compliance-month-toolbar input[type="month"] {
    width: 100%;
  }
}

/* PAYROLL_DETAIL_MODAL_CSS_V1 */

[data-app-payroll-detail-modal="1"] .modal-card,
[data-app-payroll-detail-modal="1"].modal-card,
[data-app-payroll-detail-modal="1"] > .modal-content {
  width: min(1380px, calc(100vw - 28px)) !important;
  max-width: min(1380px, calc(100vw - 28px)) !important;
}

[data-app-payroll-detail-wrap="1"] {
  overflow-x: auto !important;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

table[data-app-payroll-detail-table="1"] {
  width: max-content !important;
  min-width: 1180px !important;
  table-layout: auto !important;
}

table[data-app-payroll-detail-table="1"] th,
table[data-app-payroll-detail-table="1"] td {
  vertical-align: middle !important;
}

table[data-app-payroll-detail-table="1"] thead th {
  white-space: normal !important;
  line-height: 1.15;
}

table[data-app-payroll-detail-table="1"] th:nth-child(1),
table[data-app-payroll-detail-table="1"] td:nth-child(1) {
  min-width: 150px;
  width: 170px;
}

table[data-app-payroll-detail-table="1"] th:nth-child(n+2):nth-child(-n+11),
table[data-app-payroll-detail-table="1"] td:nth-child(n+2):nth-child(-n+11) {
  min-width: 78px;
}

table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-col="1"],
table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-cell="1"] {
  min-width: 250px !important;
  width: 280px !important;
  max-width: 320px !important;
}

table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-cell="1"] {
  white-space: normal !important;
  overflow: visible !important;
}

table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-cell="1"] > *,
table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-cell="1"] .chip,
table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-cell="1"] .badge,
table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-cell="1"] .warning,
table[data-app-payroll-detail-table="1"]
[data-app-payroll-warning-cell="1"] .alert {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.35 !important;
  box-sizing: border-box;
}

table[data-app-payroll-detail-table="1"] th:last-child,
table[data-app-payroll-detail-table="1"] td:last-child {
  min-width: 96px;
  text-align: center;
}

table[data-app-payroll-detail-table="1"] tbody tr {
  height: auto !important;
}

table[data-app-payroll-detail-table="1"] tbody td {
  overflow: visible;
}

[data-app-payroll-detail-modal="1"] {
  overflow: auto !important;
}

@media (max-width: 900px) {
  table[data-app-payroll-detail-table="1"] {
    min-width: 1120px !important;
  }

  table[data-app-payroll-detail-table="1"]
  [data-app-payroll-warning-col="1"],
  table[data-app-payroll-detail-table="1"]
  [data-app-payroll-warning-cell="1"] {
    min-width: 220px !important;
    width: 240px !important;
  }
}

/* EMPLOYER_INSURANCE_CSS_V12 */
.app-compliance-table {
  min-width: 1280px;
}

.app-compliance-table th,
.app-compliance-table td {
  white-space: nowrap;
}

.app-employer-insurance,
.app-employer-insurance-total {
  background: rgba(59,130,246,.035);
}

.app-employer-insurance-total {
  min-width: 110px;
}

/* COMPLIANCE_COMBINED_TABLE_CSS_V13 */

[data-app-compliance-combined-grid-v13="1"] {
  grid-template-columns: minmax(0,1fr) !important;
}

[data-app-compliance-hidden-v13="1"] {
  display: none !important;
}

[data-app-compliance-combined-panel-v13="1"] {
  min-width: 0;
}

[data-app-compliance-combined-panel-v13="1"] .table-wrap {
  overflow-x: auto !important;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.app-compliance-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.app-compliance-pagination-summary {
  color: var(--muted,#718096);
  font-size: 13px;
}

.app-compliance-pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app-compliance-pagination-actions label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted,#718096);
  font-size: 12px;
  font-weight: 700;
}

.app-compliance-pagination-actions select {
  height: 38px;
  min-width: 70px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.app-compliance-page-indicator {
  min-width: 88px;
  text-align: center;
  font-size: 13px;
}

.app-compliance-combined-table {
  width: max-content !important;
  min-width: 1680px !important;
  table-layout: auto !important;
}

.app-compliance-combined-table th,
.app-compliance-combined-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.app-compliance-combined-table thead tr:first-child th {
  text-align: center;
  border-bottom: 1px solid var(--border,#dce5ef);
}

.app-compliance-group {
  font-weight: 900 !important;
  letter-spacing: .03em;
}

.app-compliance-combined-table th:nth-child(1),
.app-compliance-combined-table td:nth-child(1) {
  min-width: 180px;
}

.app-compliance-combined-table th:nth-child(2),
.app-compliance-combined-table td:nth-child(2) {
  min-width: 120px;
}

.app-compliance-combined-table th:nth-child(n+3):nth-child(-n+10),
.app-compliance-combined-table td:nth-child(n+3):nth-child(-n+10) {
  min-width: 105px;
}

.app-compliance-combined-table th:nth-child(11),
.app-compliance-combined-table td:nth-child(11) {
  min-width: 120px;
}

.app-compliance-combined-table th:nth-child(12),
.app-compliance-combined-table td:nth-child(12),
.app-compliance-combined-table th:nth-child(13),
.app-compliance-combined-table td:nth-child(13),
.app-compliance-combined-table th:nth-child(15),
.app-compliance-combined-table td:nth-child(15) {
  min-width: 135px;
}

.app-compliance-total {
  font-weight: 800;
}

.app-compliance-tax {
  font-weight: 800;
}

@media (max-width: 760px) {
  .app-compliance-pagination {
    align-items: stretch;
  }

  .app-compliance-pagination-actions {
    width: 100%;
  }
}

/* COMMERCIAL_INLINE_CUSTOMER_CSS_V1 */

.commercial-customer-field-v1 {
  min-width: 0;
}

.commercial-customer-tools-v1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.commercial-customer-tools-v1 .muted {
  font-size: 12px;
}

.commercial-customer-create-v1 {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 16px;
  background: rgba(59,130,246,.035);
}

.commercial-customer-create-v1[hidden] {
  display: none !important;
}

.commercial-customer-create-head-v1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.commercial-customer-create-head-v1 b {
  display: block;
  margin-bottom: 3px;
}

.commercial-customer-address-v1 {
  min-width: 0;
}

.commercial-customer-create-actions-v1 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .commercial-customer-create-head-v1 {
    display: grid;
  }

  .commercial-customer-create-actions-v1 {
    justify-content: stretch;
  }

  .commercial-customer-create-actions-v1 .btn {
    flex: 1;
  }
}

/* CONTRACT_BUILDER_CSS_V2 */

.contract-builder-section-v2 {
  border: 1px solid var(--border,#dce5ef);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.72);
}

.contract-builder-title-v2,
.contract-clause-head-v2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.contract-builder-title-v2 {
  margin-bottom: 12px;
}

.contract-builder-title-v2 small {
  display: block;
  margin-top: 3px;
  color: var(--muted,#718096);
}

.contract-builder-opening-v2,
.contract-builder-section-v2 textarea {
  width: 100%;
  box-sizing: border-box;
}

.contract-clause-card-v2 {
  padding: 14px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 14px;
  background: #fff;
}

.contract-clause-card-v2 + .contract-clause-card-v2 {
  margin-top: 10px;
}

.contract-clause-head-v2 {
  margin-bottom: 10px;
}

.contract-builder-preview-v2 {
  border: 1px dashed var(--border,#dce5ef);
  border-radius: 14px;
  padding: 12px;
}

.contract-builder-preview-v2 summary {
  cursor: pointer;
  font-weight: 800;
}

.contract-builder-preview-v2 pre {
  margin: 12px 0 0;
  white-space: pre-wrap;
  line-height: 1.55;
  max-height: 380px;
  overflow: auto;
}

.commercial-total-value-v2 input {
  font-weight: 900;
}

.commercial-financial-summary-v2 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin: 14px 0;
}

.commercial-financial-summary-v2 > div {
  padding: 12px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 12px;
  background: #fff;
}

.commercial-financial-summary-v2 span {
  display: block;
  color: var(--muted,#718096);
  font-size: 12px;
  margin-bottom: 4px;
}

.commercial-financial-summary-v2 b {
  font-size: 16px;
}

.commercial-financial-summary-v2 .total {
  background: rgba(59,130,246,.06);
}

@media (max-width:760px) {
  .commercial-financial-summary-v2 {
    grid-template-columns: 1fr;
  }

  .contract-builder-title-v2,
  .contract-clause-head-v2 {
    display: grid;
  }
}

/* CONTRACT_EDIT_CSS_V1 */
[data-edit-contract] {
  white-space: nowrap;
}

#contract-edit-commercial-v1 input[readonly] {
  background: rgba(15,23,42,.035);
  font-weight: 800;
}

/* DYNAMIC_TEMPLATE_FIELDS_CSS_V3 */

.app-template-field-section {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 16px;
  background: rgba(59,130,246,.025);
}

.app-template-field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.app-template-field-head b {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}

.app-template-fields-host {
  display: grid;
  gap: 10px;
}

.app-template-fields-empty {
  padding: 18px;
  border: 1px dashed var(--border,#dce5ef);
  border-radius: 12px;
  color: var(--muted,#718096);
  background: #fff;
}

.app-template-clause {
  padding: 14px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 14px;
  background: #fff;
}

.app-template-clause-title {
  font-weight: 900;
  margin-bottom: 12px;
}

.app-template-token {
  margin-left: 6px;
  color: var(--muted,#718096);
  font-weight: 500;
  font-size: 10px;
}

.app-template-linked-value {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 10px;
  background: rgba(15,23,42,.025);
}

.app-template-linked-value span {
  display: block;
  font-weight: 750;
  word-break: break-word;
}

.app-template-linked-value small {
  display: block;
  margin-top: 3px;
  color: var(--muted,#718096);
  font-size: 11px;
}

.app-template-autofill label::after {
  content: " · tự điền";
  color: #0f9f6e;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width:760px) {
  .app-template-field-section {
    padding: 12px;
  }
}

/* COMMERCIAL_DYNAMIC_FIELDS_CSS_V31 */
#commercial-template-fields-v31 {
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

#commercial-template-fields-v31 .app-template-clause {
  scroll-margin-top: 8px;
}

#commercial-template-fields-v31 input[data-app-commercial-dynamic-v31] {
  background: #fff;
}

/* FULL_CLAUSE_EDITOR_CSS_V4 */
.app-full-clause-section {
  margin-top: 16px;
}

.app-clause-editor-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.app-clause-editor-actions,
.app-clause-order {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.app-contract-opening {
  padding: 14px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
}

.app-contract-opening textarea,
.app-editable-clause textarea,
.app-editable-clause input {
  width: 100%;
  box-sizing: border-box;
}

.app-full-clauses {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow: auto;
  padding-right: 3px;
}

.app-editable-clause {
  scroll-margin-top: 8px;
}

.app-editable-clause-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.app-editable-clause textarea {
  min-height: 125px;
  resize: vertical;
  line-height: 1.5;
}

@media (max-width:760px) {
  .app-editable-clause-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* EMPLOYMENT_STATUS_CSS_V11 */

.app-employment-overview {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 18px;
  background: #fff;
}

.app-employment-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.app-employment-overview-head b {
  display: block;
  font-size: 16px;
}

.app-employment-overview-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted,#718096);
  font-size: 12px;
}

.app-employment-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.app-employment-stat {
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  color: inherit;
}

.app-employment-stat:hover,
.app-employment-stat.selected,
[data-app-employment-filter-v11].selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.08);
}

.app-employment-stat span,
.app-employment-stat small {
  display: block;
}

.app-employment-stat span {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted,#718096);
}

.app-employment-stat b {
  display: block;
  margin: 5px 0 2px;
  font-size: 24px;
}

.app-employment-stat small {
  color: var(--muted,#718096);
  font-size: 11px;
}

.app-employment-status-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  justify-items: start;
  gap: 4px;
  cursor: pointer;
  color: inherit;
}

.app-employment-status-button small {
  color: var(--muted,#718096);
  font-size: 10px;
}

.app-employment-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.app-employment-chip.active {
  color: #087a55;
  background: #eafaf3;
  border: 1px solid #bcebd7;
}

.app-employment-chip.leave {
  color: #9a5a00;
  background: #fff7e6;
  border: 1px solid #f7d99c;
}

.app-employment-chip.terminated {
  color: #a93a47;
  background: #fff0f2;
  border: 1px solid #f6c4cb;
}

.app-employment-current {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.app-employment-current > div {
  padding: 13px;
  border: 1px solid var(--border,#dce5ef);
  border-radius: 12px;
  background: rgba(15,23,42,.025);
}

.app-employment-current span,
.app-employment-current b {
  display: block;
}

.app-employment-current span {
  color: var(--muted,#718096);
  font-size: 11px;
  margin-bottom: 4px;
}

.app-employment-history {
  margin-top: 18px;
}

.app-employment-history-title {
  font-weight: 850;
  margin-bottom: 8px;
}

@media (max-width:760px) {
  .app-employment-stats,
  .app-employment-current {
    grid-template-columns: 1fr;
  }

  .app-employment-overview-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* MOBILE_NAVIGATION_CSS_V1 */

#app-mobile-nav,
#app-mobile-drawer,
#app-mobile-overlay {
  display: none;
}

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding-bottom:
      calc(
        76px + env(safe-area-inset-bottom)
      );
  }

  #app-mobile-nav {
    position: fixed;
    z-index: 1050;
    left: 8px;
    right: 8px;
    bottom:
      calc(
        8px + env(safe-area-inset-bottom)
      );
    min-height: 62px;
    display: grid;
    grid-template-columns:
      repeat(4,minmax(0,1fr));
    align-items: stretch;
    gap: 2px;
    padding: 5px;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: 20px;
    background: rgba(255,255,255,.97);
    box-shadow:
      0 14px 35px rgba(15,23,42,.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .app-mobile-tab {
    appearance: none;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #64748b;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 2px;
    font: inherit;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.15;
    cursor: pointer;
  }

  .app-mobile-tab > span:last-child {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .app-mobile-tab.active {
    color: #1677ff;
    background: #edf5ff;
  }

  .app-mobile-tab-icon {
    display: grid;
    place-items: center;
    min-height: 22px;
    font-size: 18px;
    line-height: 1;
    font-weight: 850;
  }

  #app-mobile-overlay {
    position: fixed;
    z-index: 1060;
    inset: 0;
    display: block;
    border: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(15,23,42,.38);
    transition:
      opacity .18s ease,
      visibility .18s ease;
  }

  #app-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #app-mobile-drawer {
    position: fixed;
    z-index: 1070;
    left: 10px;
    right: 10px;
    bottom:
      calc(
        10px + env(safe-area-inset-bottom)
      );
    display: block;
    max-height:
      min(
        76vh,
        660px
      );
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: 24px;
    background: #fff;
    box-shadow:
      0 24px 70px rgba(15,23,42,.24);
    transform: translateY(
      calc(100% + 40px)
    );
    opacity: 0;
    visibility: hidden;
    transition:
      transform .22s ease,
      opacity .18s ease,
      visibility .18s ease;
  }

  #app-mobile-drawer.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .app-mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #e8eef5;
  }

  .app-mobile-drawer-head small,
  .app-mobile-drawer-head b {
    display: block;
  }

  .app-mobile-drawer-head small {
    margin-bottom: 2px;
    color: #1677ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  .app-mobile-drawer-head b {
    color: #172033;
    font-size: 18px;
  }

  .app-mobile-close {
    appearance: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
  }

  .app-mobile-drawer-list {
    display: grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    gap: 8px;
    padding: 12px;
    max-height:
      calc(
        min(76vh,660px) - 72px
      );
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-mobile-drawer-item {
    appearance: none;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6edf5;
    border-radius: 14px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
  }

  .app-mobile-drawer-item.active {
    color: #1677ff;
    border-color: #bfdbfe;
    background: #eff6ff;
  }

  .app-mobile-drawer-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f1f5f9;
    font-size: 16px;
    font-weight: 850;
  }

  .app-mobile-drawer-item.active
  .app-mobile-drawer-icon {
    background: #dbeafe;
  }

  html.app-mobile-menu-open,
  html.app-mobile-menu-open body {
    overflow: hidden;
  }
}

@media (max-width: 390px) {
  #app-mobile-nav {
    left: 5px;
    right: 5px;
    bottom:
      calc(
        5px + env(safe-area-inset-bottom)
      );
  }

  .app-mobile-tab {
    font-size: 8px;
  }

  .app-mobile-drawer-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* EMPLOYMENT_STATUS_ACTION_CSS_V12 */

.app-employment-manage {
  margin-left: 8px;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .app-employment-manage {
    margin-left: 6px;
  }
}


/* ATTENDANCE_CLEAN_UI_V12 */
.app-att-cell.editable {
  cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease;
}

.app-att-cell.editable:hover {
  box-shadow: inset 0 0 0 2px rgba(59,130,246,.20);
}

.app-att-cell.paid-leave {
  background: rgba(34,197,94,.08);
}

.app-att-cell.paid-leave .app-att-code {
  background: #22a06b;
  color: #fff;
}

.app-att-cell.holiday {
  background: rgba(59,130,246,.075);
  color: #55708f;
}

.app-att-cell.holiday .app-att-code {
  background: #dbeafe;
  color: #2563eb;
}

/* UIUX_PHASE4_V4_0
   Visual-only design system. No business/API behavior is defined here. */
:root{
  --bg:#f3f6fb;
  --bg2:#f8fafc;
  --glass:rgba(255,255,255,.82);
  --glass-strong:rgba(255,255,255,.96);
  --panel:#fff;
  --ink:#172033;
  --muted:#6b7a90;
  --line:rgba(100,116,139,.16);
  --line-strong:rgba(71,85,105,.24);
  --blue:#2563eb;
  --blue2:#60a5fa;
  --green:#10a36f;
  --red:#e05265;
  --orange:#e99a32;
  --purple:#7657e8;
  --shadow:0 20px 55px rgba(15,23,42,.075);
  --shadow-sm:0 8px 24px rgba(15,23,42,.065);
  --radius:24px;
  --radius-sm:14px;
  --sidebar:264px;
}
html{scroll-behavior:smooth;background:#f3f6fb}
body{
  background:
    radial-gradient(circle at 82% -10%,rgba(59,130,246,.12),transparent 30%),
    radial-gradient(circle at 18% 108%,rgba(45,212,191,.10),transparent 28%),
    linear-gradient(180deg,#f8fafc 0%,#f2f6fb 48%,#eef3f9 100%);
  letter-spacing:-.005em;
}
body:before{width:620px;height:620px;right:-260px;top:-280px;background:radial-gradient(circle,rgba(37,99,235,.11),transparent 68%)}
body:after{width:520px;height:520px;left:12%;bottom:-330px;background:radial-gradient(circle,rgba(20,184,166,.09),transparent 70%)}
::selection{background:rgba(37,99,235,.18);color:#0f172a}

/* Shell */
.app-shell{gap:18px;padding:18px}
.app-shell .sidebar{
  height:calc(100vh - 36px);
  top:18px;
  padding:18px 12px 14px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 18% 0%,rgba(59,130,246,.28),transparent 26%),
    linear-gradient(180deg,#121c2e 0%,#0b1322 100%);
  box-shadow:0 22px 55px rgba(15,23,42,.18);
  backdrop-filter:none;
}
.app-shell .brand{padding:4px 10px 20px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:8px}
.app-shell .brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#7cc0ff,#3578ee 55%,#335bd8);box-shadow:0 10px 28px rgba(37,99,235,.38),inset 0 1px rgba(255,255,255,.6)}
.app-shell .brand b{color:#f8fafc;font-size:17px;letter-spacing:-.02em}
.app-shell .brand b span{color:#7db7ff;font-size:10px}
.app-shell .brand small{color:#7f91aa;font-size:9px;letter-spacing:.04em}
.app-shell .nav-group{color:#5f728e;margin:15px 10px 6px;font-size:8px;letter-spacing:.15em}
.app-shell .nav{gap:4px}
.app-shell .nav button{min-height:42px;border-radius:12px;color:#aebcd0;padding:10px 12px;transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}
.app-shell .nav button i{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:#7f94b0;font-size:14px;background:rgba(255,255,255,.04)}
.app-shell .nav button:hover{background:rgba(255,255,255,.065);color:#fff;transform:translateX(2px);box-shadow:none}
.app-shell .nav button.active{background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(79,70,229,.92));color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.22)}
.app-shell .nav button.active i{background:rgba(255,255,255,.15);color:#fff}
.app-shell .side-bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 8px 3px}
.app-shell .side-user{padding:8px;border-radius:14px;background:rgba(255,255,255,.045)}
.app-shell .side-user b{color:#eef4fc}
.app-shell .side-user small{color:#7f91aa}
.app-shell .avatar{background:linear-gradient(145deg,#dbeafe,#bfdbfe);color:#245eb9;box-shadow:0 6px 18px rgba(0,0,0,.12)}

.app-shell .topbar{
  height:68px;top:18px;border-radius:20px;padding:10px 12px 10px 18px;
  border:1px solid rgba(255,255,255,.92);
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 34px rgba(15,23,42,.07);
  backdrop-filter:blur(20px) saturate(150%);
}
.app-shell .searchbox{height:42px;padding:0 12px;border:1px solid rgba(148,163,184,.18);border-radius:13px;background:#f7f9fc;color:#8290a4;transition:border-color .16s,background .16s,box-shadow .16s}
.app-shell .searchbox:focus-within{background:#fff;border-color:rgba(37,99,235,.32);box-shadow:0 0 0 4px rgba(37,99,235,.07)}
.app-search-icon{font-size:17px;color:#77879c}
.app-shell kbd{background:#fff;border-color:#e2e8f0;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.app-shell .icon-btn{border-color:#e5eaf0;background:#fff;box-shadow:0 3px 10px rgba(15,23,42,.04);transition:transform .16s,box-shadow .16s,border-color .16s}
.app-shell .icon-btn:hover{transform:translateY(-1px);border-color:#cfd8e5;box-shadow:0 7px 16px rgba(15,23,42,.07)}
.app-shell .content{max-width:1560px;padding:36px 30px 80px}

/* Page hierarchy */
.app-eyebrow-dot{width:6px;height:6px;border-radius:99px;display:inline-block;margin-right:7px;background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.10);vertical-align:1px}
.page-head{margin-bottom:24px;align-items:flex-end}
.page-head h1{font-size:34px;color:#111827;line-height:1.12}
.page-head p{max-width:760px;color:#738196;font-size:12.5px}
.eyebrow{color:#3b72cf;font-size:9px;letter-spacing:.14em}

/* Dashboard welcome illustration */
.app-dashboard-hero{
  min-height:230px;padding:30px 32px;overflow:hidden;position:relative;isolation:isolate;
  background:
    radial-gradient(circle at 75% 40%,rgba(255,255,255,.24),transparent 24%),
    linear-gradient(128deg,#13233d 0%,#1f4b92 46%,#397eef 100%);
  border:0;color:#fff;box-shadow:0 28px 60px rgba(30,64,175,.18);
}
.app-dashboard-hero:before{content:"";position:absolute;inset:auto auto -180px -90px;width:420px;height:420px;border-radius:50%;border:70px solid rgba(255,255,255,.035);z-index:-1}
.app-dashboard-hero:after{content:"";position:absolute;right:31%;top:-70px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.32),transparent 67%);z-index:-1}
.app-hero-copy{max-width:720px;position:relative;z-index:2}
.app-hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#cfe3ff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:7px 10px;margin-bottom:13px}
.app-hero-kicker span{width:7px;height:7px;border-radius:50%;background:#5ee0b2;box-shadow:0 0 0 5px rgba(94,224,178,.10)}
.app-dashboard-hero h2{font-size:30px;line-height:1.12;letter-spacing:-.045em;margin:0 0 11px;color:#fff;max-width:650px}
.app-dashboard-hero p{color:#cad9ef;max-width:670px;font-size:13px;line-height:1.7}
.app-hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px}
.app-dashboard-hero .health{background:rgba(10,27,49,.28);color:#d8f9ed;border-color:rgba(134,239,205,.2);backdrop-filter:blur(8px)}
.app-dashboard-hero .health i{background:#51d8a7;box-shadow:0 0 0 5px rgba(81,216,167,.12)}
.app-live-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);font-size:10px;color:#d9e8fb}
.app-hero-visual{width:390px;height:190px;flex:0 0 390px;position:relative;margin-right:5px;perspective:900px}
.app-orb{position:absolute;width:170px;height:170px;border-radius:50%;right:35px;top:3px;background:radial-gradient(circle at 35% 30%,#a6ddff 0%,#5fa8ff 24%,#386ee6 55%,#223b94 78%,rgba(20,38,83,.2) 100%);box-shadow:inset -22px -24px 45px rgba(10,22,59,.36),0 30px 60px rgba(7,20,56,.32)}
.app-orb:before,.app-orb:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.22);border-radius:50%;inset:22px;transform:rotate(28deg)}
.app-orb:after{inset:48px -25px;transform:rotate(-18deg)}
.app-visual-card{position:absolute;border:1px solid rgba(255,255,255,.18);background:rgba(15,31,58,.48);backdrop-filter:blur(14px);box-shadow:0 18px 36px rgba(7,18,48,.20);color:#fff}
.app-visual-card.main{left:0;top:35px;width:205px;padding:16px;border-radius:18px;transform:rotateY(8deg) rotateZ(-2deg)}
.app-visual-card.main small{display:block;color:#8fb9f4;font-size:8px;font-weight:800;letter-spacing:.12em}
.app-visual-card.main b{display:block;font-size:14px;margin-top:5px}
.app-mini-bars{height:54px;display:flex;align-items:flex-end;gap:6px;margin-top:13px}
.app-mini-bars i{width:18px;border-radius:5px 5px 2px 2px;background:linear-gradient(#71c4ff,#4d7bf4);box-shadow:0 5px 12px rgba(69,123,244,.18)}
.app-mini-bars i:nth-child(1){height:38%}.app-mini-bars i:nth-child(2){height:62%}.app-mini-bars i:nth-child(3){height:48%}.app-mini-bars i:nth-child(4){height:82%}.app-mini-bars i:nth-child(5){height:70%}
.app-visual-card.float{min-width:112px;height:42px;border-radius:13px;display:flex;align-items:center;gap:8px;padding:0 11px;font-size:10px}
.app-visual-card.float span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(89,213,174,.16);color:#8cf0cc;font-size:12px}
.app-visual-card.float.one{right:0;top:18px}.app-visual-card.float.two{right:18px;bottom:5px}.app-visual-card.float.two span{background:rgba(112,166,255,.16);color:#a7caff}

/* KPI cards */
.app-kpis{gap:14px;margin:14px 0;grid-template-columns:repeat(3,minmax(0,1fr))}
.app-kpis .kpi,.kpi{position:relative;overflow:hidden;border:1px solid #e9eef5;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(15,23,42,.05);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.app-kpis .kpi:hover,.kpi:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(15,23,42,.075);border-color:#dde5ef}
.app-kpis .kpi:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:#3b82f6}
.app-kpis .kpi:nth-child(2):before{background:#14b8a6}.app-kpis .kpi:nth-child(3):before{background:#8b5cf6}.app-kpis .kpi:nth-child(4):before{background:#f59e0b}.app-kpis .kpi:nth-child(5):before{background:#10b981}
.kpi{padding:18px;border-radius:18px}.kpi label{color:#7c899d}.kpi strong{font-size:27px;color:#162238}.kpi small{font-size:10px;color:#8b98aa}

/* Panels, lists, tables */
.panel{border:1px solid #e8edf4;background:rgba(255,255,255,.97);border-radius:20px;box-shadow:0 10px 30px rgba(15,23,42,.045)}
.panel-title{margin-bottom:15px}.panel-title h2{font-size:15px;color:#172033}.panel-title p{color:#8a97a8}
.app-panel-badge{font-size:9px;font-weight:800;letter-spacing:.05em;color:#167757;background:#eafaf3;border:1px solid #cdeede;border-radius:999px;padding:6px 9px}
.list-row{border-color:#edf1f6;background:#fbfcfe;transition:border-color .15s,background .15s,transform .15s}
.list-row:hover{background:#fff;border-color:#dae3ee;transform:translateY(-1px)}
.activity-item{padding:10px 0}.activity-icon{background:linear-gradient(145deg,#edf5ff,#e2edff);color:#346fc1}
.empty{border:1px dashed #e3e8ef;border-radius:14px;background:#fbfcfe;padding:38px 20px}.empty span{display:block;font-size:10px;margin-top:4px;color:#98a4b4}
.table-wrap{border-color:#e5eaf1;border-radius:15px;box-shadow:inset 0 1px rgba(255,255,255,.8)}
.table th{background:#f7f9fc;color:#718096;padding:11px 12px;border-bottom:1px solid #e7ecf2}
.table td{padding:11px 12px;border-top-color:#eef2f6}.table tr:hover td{background:#f8fbff}
.mini-avatar{background:linear-gradient(145deg,#edf6ff,#dcecff);color:#2866bd;border:1px solid #d7e8fb}

/* Controls */
.btn{border-radius:12px;min-height:40px;border-color:#e1e7ef;background:#fff;box-shadow:0 2px 5px rgba(15,23,42,.025);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(15,23,42,.06);border-color:#d2dbe7}
.btn.primary{background:linear-gradient(135deg,#2878ee,#3e62df);box-shadow:0 9px 20px rgba(37,99,235,.19)}
.btn.primary:hover{box-shadow:0 12px 24px rgba(37,99,235,.25)}
.btn.small{min-height:34px;border-radius:10px}
.field input,.field select,.field textarea,.input{border-color:#dfe6ee;background:#fff;border-radius:12px;min-height:42px}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:rgba(37,99,235,.48);box-shadow:0 0 0 4px rgba(37,99,235,.075)}
.chip{font-weight:650;border-color:#e0e7ef;background:#f8fafc}

/* Auth polish */
.feature-card{border-color:#e8edf4;background:rgba(255,255,255,.82)}

/* Modal / toast */
.modal-backdrop{background:rgba(10,20,35,.34);backdrop-filter:blur(9px)}
.modal{border-radius:22px;border-color:#f2f5f8;box-shadow:0 34px 90px rgba(15,23,42,.24)}
.modal-head,.modal-foot{background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
.toast{border-color:#e4eaf1;box-shadow:0 18px 40px rgba(15,23,42,.14)}

/* Focus/accessibility */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(37,99,235,.30);outline-offset:2px}

/* Mobile / tablet */
@media(max-width:1180px){
  :root{--sidebar:88px}
  .app-shell .sidebar{padding-inline:8px}
  .app-shell .brand{justify-content:center;padding-inline:0}
  .app-shell .nav button{justify-content:center;padding:10px}
  .app-shell .nav button:hover{transform:none}
  .app-hero-visual{width:320px;flex-basis:320px;transform:scale(.92);transform-origin:right center}
}
@media(max-width:860px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .app-shell{display:block;padding:8px}
  .app-shell .sidebar{display:none!important}
  .app-shell .topbar{top:8px;height:60px;border-radius:17px;padding:8px 9px 8px 12px}
  .app-shell .content{padding:26px 8px 72px}
  .app-shell .searchbox{min-width:0;width:auto;flex:1;height:40px}
  .app-shell .searchbox kbd{display:none}
  .app-dashboard-hero{min-height:0;padding:24px;display:block}
  .app-dashboard-hero h2{font-size:25px}
  .app-hero-visual{position:absolute;right:-65px;top:25px;opacity:.28;transform:scale(.72);pointer-events:none}
  .app-hero-copy{max-width:88%}
  #app-mobile-nav{border-color:rgba(148,163,184,.20);background:rgba(255,255,255,.94);box-shadow:0 18px 42px rgba(15,23,42,.15);backdrop-filter:blur(22px) saturate(150%)}
  .app-mobile-tab.active{background:linear-gradient(145deg,#edf5ff,#e7efff);color:#2563eb}
  #app-mobile-drawer{border-color:#e3e9f1;box-shadow:0 26px 80px rgba(15,23,42,.24)}
}
@media(max-width:760px){
  .page-head h1{font-size:29px}.page-head{margin-bottom:18px}.page-head p{font-size:11.5px}
  .app-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .kpi{padding:14px}.kpi strong{font-size:22px}
  .panel{padding:15px;border-radius:17px}
  .app-dashboard-grid{grid-template-columns:1fr}
  .modal{border-radius:18px}
}
@media(max-width:480px){
  .app-shell .top-actions{gap:5px}.app-shell .top-actions .icon-btn{width:36px;height:36px}
  .app-dashboard-hero{padding:21px 19px;border-radius:20px}
  .app-dashboard-hero h2{font-size:23px}.app-dashboard-hero p{font-size:11.5px;line-height:1.6}
  .app-hero-copy{max-width:100%}.app-hero-visual{display:none}
  .app-kpis{grid-template-columns:1fr 1fr}.app-kpis .kpi:nth-child(odd):last-child{grid-column:1/-1}
  .kpi label{font-size:9px}.kpi strong{font-size:21px}
}
@media(max-width:360px){.app-kpis{grid-template-columns:1fr}.app-kpis .kpi:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}


/* WORKFLOW_ENGINE_V1 */
.workflow-overdue{border-left:3px solid currentColor;padding-left:12px}
#workflow-settings-panel textarea{width:100%;resize:vertical}
#workflow-settings-panel .row-list.compact{gap:6px}
#workflow-settings-panel .row-list.compact label{display:flex;gap:8px;align-items:center;padding:5px 0}

/* WORKFLOW_UX_V1_1 */
.workflow-overdue{border-left:3px solid currentColor;padding-left:12px}
.wf-settings-shell{overflow:hidden}
.wf-section{margin-top:22px}
.wf-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.wf-section-head h3{margin:0 0 4px;font-size:16px}
.wf-section-head p{margin:0;color:var(--muted,#667085);font-size:13px}
.wf-profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wf-profile-card{position:relative;text-align:left;border:1px solid var(--border,#d8e1ee);background:var(--surface,#fff);border-radius:14px;padding:14px;min-height:132px;cursor:pointer;color:inherit;box-shadow:none;transition:.15s ease}
.wf-profile-card:hover{border-color:#8fb1ff;transform:translateY(-1px)}
.wf-profile-card.selected{border:2px solid #2f6fed;background:rgba(47,111,237,.055);padding:13px}
.wf-profile-card b,.wf-profile-card strong,.wf-profile-card small{display:block}
.wf-profile-card b{font-size:15px;margin-bottom:2px}
.wf-profile-card strong{font-size:12px;color:#2f6fed;margin-bottom:8px}
.wf-profile-card small{font-size:12px;line-height:1.45;color:var(--muted,#667085)}
.wf-profile-check{display:none;position:absolute;right:10px;top:9px;width:23px;height:23px;border-radius:50%;background:#2f6fed;color:#fff;align-items:center;justify-content:center;font-size:13px}
.wf-profile-card.selected .wf-profile-check{display:flex}
.wf-advanced-global,.wf-config-help,.wf-step-advanced{margin-top:14px;border:1px solid var(--border,#d8e1ee);border-radius:12px;background:rgba(248,250,253,.65)}
.wf-advanced-global>summary,.wf-config-help>summary,.wf-step-advanced>summary{cursor:pointer;padding:11px 13px;font-weight:600;font-size:13px}
.wf-smart-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:0 13px 13px}
.wf-toggle{display:flex;align-items:flex-start;gap:10px;padding:9px 0;cursor:pointer}
.wf-toggle input[type=checkbox]{appearance:auto!important;-webkit-appearance:checkbox!important;width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;margin:2px 0 0!important;padding:0!important;box-shadow:none!important}
.wf-toggle span{display:block;min-width:0}
.wf-toggle b,.wf-toggle small{display:block}
.wf-toggle b{font-size:13px}
.wf-toggle small{font-size:12px;line-height:1.4;color:var(--muted,#667085);margin-top:3px}
.wf-toggle.compact{padding:4px 0}
.wf-settings-save-row{margin-top:12px}
.wf-process-list{display:flex;flex-direction:column;gap:9px}
.wf-process-card{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--border,#d8e1ee);border-radius:13px;padding:13px 14px;background:var(--surface,#fff)}
.wf-process-main{min-width:0;flex:1}
.wf-process-title{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.wf-process-main>small{display:block;color:var(--muted,#667085);font-size:12px;line-height:1.35}
.wf-version{font-size:10px;padding:2px 6px;border-radius:999px;background:#eef3fb;color:#5a6b85}
.wf-process-actions{display:flex;gap:7px;flex:0 0 auto}
.wf-route{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:9px}
.wf-route-chip{padding:4px 8px;border-radius:999px;background:#f2f6fc;border:1px solid #dde7f5;font-size:11px;font-weight:600}
.wf-route-arrow{font-size:12px;color:#8390a6}
.wf-muted{font-size:12px;color:var(--muted,#667085)}
.wf-config-intro{padding:12px 14px;border-radius:12px;background:#f2f7ff;border:1px solid #cfe0ff;margin-bottom:12px}
.wf-config-intro b{font-size:15px}.wf-config-intro span{display:inline-block;margin-left:8px;font-size:11px;padding:2px 7px;border-radius:999px;background:#fff;color:#2f6fed}.wf-config-intro p{margin:5px 0 0;font-size:12px;color:#52637d}
.wf-step-list{display:flex;flex-direction:column;gap:10px}
.wf-step-card{border:1px solid var(--border,#d8e1ee);border-radius:13px;background:var(--surface,#fff);padding:12px}
.wf-step-top{display:flex;align-items:flex-end;gap:10px}
.wf-step-number{width:30px;height:30px;min-width:30px;border-radius:50%;background:#2f6fed;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:4px}
.wf-step-main{flex:1;min-width:0;display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.8fr);gap:8px;align-items:end}
.wf-step-main>label{grid-column:1/-1;font-size:12px;font-weight:600;color:#53627a;margin-bottom:-3px}
.wf-step-main select,.wf-step-main input,.wf-step-advanced input,.wf-step-advanced select{width:100%;min-height:40px}
.wf-step-actions{display:flex;gap:5px;align-items:center;padding-bottom:1px}
.wf-step-actions .btn[disabled]{opacity:.35;cursor:not-allowed}
.wf-step-advanced{margin:10px 0 0 40px}
.wf-step-advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:0 12px 12px}
.wf-condition-box{grid-column:1/-1}
.wf-condition-box>label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.wf-condition-row{display:grid;grid-template-columns:1fr 90px 1fr;gap:8px}
.wf-add-step{margin-top:10px;width:100%;border-style:dashed!important}
.wf-config-help{margin-top:10px}.wf-config-help p{padding:0 13px 12px;margin:0;color:var(--muted,#667085);font-size:12px;line-height:1.5}
.wf-empty-steps{padding:22px}.wf-empty-steps small{display:block;margin-top:4px}
@media(max-width:1050px){.wf-profile-grid{grid-template-columns:1fr 1fr}.wf-process-card{align-items:flex-start;flex-direction:column}.wf-process-actions{width:100%;flex-wrap:wrap}.wf-step-main{grid-template-columns:1fr}.wf-step-main>label{grid-column:1}.wf-step-top{align-items:flex-start}.wf-step-actions{flex-direction:column}.wf-smart-grid{grid-template-columns:1fr}}
@media(max-width:640px){.wf-profile-grid{grid-template-columns:1fr}.wf-step-top{display:grid;grid-template-columns:30px 1fr}.wf-step-actions{grid-column:2;flex-direction:row}.wf-step-main{grid-column:2}.wf-step-advanced{margin-left:0}.wf-step-advanced-grid{grid-template-columns:1fr}.wf-condition-row{grid-template-columns:1fr}.wf-process-actions .btn{flex:1}.wf-process-actions{display:flex}.wf-smart-grid{padding-left:10px;padding-right:10px}}


/* CONTRACT_TEMPLATE_STUDIO_UI_V1 */
.app-template-studio-help{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--border,#dbe4f0);background:#f7faff;border-radius:12px;margin-bottom:12px}.app-template-studio-help span{margin-left:auto;color:var(--muted,#64748b);font-weight:600}.app-template-studio-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:16px;min-height:560px}.app-template-preview-pane{max-height:66vh;overflow:auto;padding:8px;background:#eef3f8;border-radius:14px}.app-docx-part>h4{margin:8px 6px;color:#475569}.app-docx-page{background:#fff;border:1px solid #d8e1ec;border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.07);padding:42px 46px;min-height:480px}.app-docx-paragraph{min-height:22px;margin:4px 0;line-height:1.65;white-space:pre-wrap}.app-docx-run{position:relative;border:0;background:transparent;padding:1px 2px;border-radius:4px;font:inherit;color:inherit;cursor:pointer;text-align:left}.app-docx-run:hover{background:#eaf2ff;outline:1px solid #93b7ff}.app-docx-run.mapped{background:#e9fdf2;outline:1px solid #67d391}.app-docx-run.selected{background:#e7efff;outline:2px solid #3974ef}.app-map-badge{position:absolute;left:0;bottom:calc(100% + 3px);font-size:10px;line-height:1;padding:3px 5px;border-radius:5px;background:#176b3a;color:#fff;white-space:nowrap;z-index:2}.app-template-mapping-pane{border:1px solid var(--border,#dbe4f0);border-radius:14px;padding:16px;align-self:start;position:sticky;top:0;background:#fff}.app-anchor-text{padding:10px 12px;background:#f6f8fb;border-radius:10px;margin:8px 0 14px;word-break:break-word}.app-mapping-empty{text-align:center;color:#64748b;padding:48px 18px}.app-check-row{display:flex;gap:8px;align-items:center;padding-top:28px}.app-check-row input{width:18px!important;height:18px!important;min-width:18px!important}.app-template-row small{display:block;margin-top:4px}.modal.wide .app-template-studio-grid select,.modal.wide .app-template-studio-grid input{max-width:100%}@media(max-width:900px){.app-template-studio-grid{grid-template-columns:1fr}.app-template-mapping-pane{position:static}.app-docx-page{padding:24px 18px}.app-template-studio-help span{margin-left:0;width:100%}}

/* CONTRACT_TEMPLATE_SOURCE_PICKER_V1_2_1 */
.app-template-source-box{grid-template-columns:1fr;gap:10px;padding:10px 12px;margin:8px 0 12px;border:1px solid var(--border,#dbe4f0);border-radius:12px;background:#f8fbff}.app-template-source-box.form-grid.two{grid-template-columns:1fr 1fr}.app-template-source-box .field{margin:0}.app-template-source-box select,.app-template-source-box input{width:100%}.app-template-mapping-pane .field>label{font-weight:600}.app-template-mapping-pane #app-map-kind{font-weight:600}@media(max-width:700px){.app-template-source-box.form-grid.two{grid-template-columns:1fr}.app-template-mapping-pane{padding:12px}.app-template-source-box{padding:10px}}
/* CONTRACT_COMMERCIAL_DIRECT_PARTNER_V1_2_2 */
.app-contract-blocker h3{margin:0 0 8px}.app-contract-blocker p{margin:0 0 14px;color:var(--muted,#64748b);line-height:1.55}.app-template-help{margin-top:14px;padding:12px 14px;border:1px solid #dbeafe;background:#eff6ff;border-radius:12px;color:#334155}.app-counterparty-box{padding:14px;border:1px solid #dbe4f0;border-radius:14px;background:#f8fafc}.app-counterparty-title{grid-column:1/-1;display:flex;flex-direction:column;gap:3px;margin-bottom:2px}.app-counterparty-title small{color:var(--muted,#64748b)}

/* Workspace design tokens and components */
:root{
  --color-bg:#f5f7fa;--color-surface:#fff;--color-surface-subtle:#f8fafc;--color-border:#e5e9ef;--color-text:#202938;--color-text-muted:#687486;
  --color-primary:#3769d6;--color-success:#16815f;--color-warning:#a96612;--color-danger:#bd3e4b;--color-info:#3568aa;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;
  --radius-1:8px;--radius-2:10px;--radius-3:12px;--radius-4:16px;
  --shadow-subtle:0 1px 2px rgba(22,34,52,.04);--shadow-card:0 4px 16px rgba(22,34,52,.045);--shadow-floating:0 16px 44px rgba(22,34,52,.16);
  --font-12:12px;--font-13:13px;--font-14:14px;--font-16:16px;--font-18:18px;--font-20:20px;--font-24:24px;--font-30:30px;
  --sidebar:248px;--bg:var(--color-bg);--panel:var(--color-surface);--ink:var(--color-text);--muted:var(--color-text-muted);--line:var(--color-border);--blue:var(--color-primary);--shadow:var(--shadow-card);--shadow-sm:var(--shadow-subtle)
}
html,body{background:var(--color-bg);color:var(--color-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:var(--font-14)}
body:before,body:after{display:none}
.app-shell{min-height:100vh;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:0;padding:0;background:var(--color-bg)}
.app-shell .sidebar{top:0;height:100vh;border:0;border-right:1px solid var(--color-border);border-radius:0;padding:20px 14px 14px;background:var(--color-surface);box-shadow:none;z-index:4}
.app-shell .brand{gap:10px;padding:2px 8px 22px}.app-shell .brand-mark{width:32px;height:32px;border-radius:9px;background:#eaf0fc;color:var(--color-primary);box-shadow:none;font-size:16px}.app-shell .brand b{font-size:16px;letter-spacing:.01em}.app-shell .brand small{font-size:11px;color:var(--color-text-muted)}
.app-shell .nav{gap:2px}.app-shell .nav-group{margin:17px 9px 6px;color:#8791a0;font-size:10px;letter-spacing:.075em;font-weight:650}.app-shell .nav button{min-height:40px;padding:8px 10px;border:1px solid transparent;border-radius:var(--radius-2);gap:11px;color:#526071;font-size:13px;font-weight:500;transition:background-color .14s ease,color .14s ease,border-color .14s ease}.app-shell .nav button i{width:20px;height:20px;color:#7b8796}.app-shell .nav button:hover{background:#f5f7fa;color:var(--color-text);transform:none}.app-shell .nav button.active{background:#edf2fc;border-color:#e5ebf8;color:#2e5fc3;font-weight:600}.app-shell .nav button.active i{color:#3769d6}.app-shell .side-bottom{border-top:1px solid var(--color-border);padding-top:12px}.app-shell .side-user{border-radius:10px;padding:8px}.app-shell .side-user b{font-size:12px;font-weight:600}.app-shell .side-user small{font-size:11px}
.app-shell .main{min-width:0}.app-shell .topbar{height:64px;top:0;margin:0;padding:0 28px;border:0;border-bottom:1px solid var(--color-border);border-radius:0;background:rgba(255,255,255,.96);box-shadow:none;backdrop-filter:blur(5px);z-index:3}.app-shell .searchbox{width:min(360px,42vw);min-width:220px;height:38px;border:1px solid var(--color-border);border-radius:10px;background:#fafbfd;box-shadow:none}.app-shell .searchbox input{font-size:13px}.app-shell .top-actions{gap:10px}.app-shell .icon-btn{width:38px;height:38px;border:1px solid transparent;border-radius:10px;background:transparent;color:#596779}.app-shell .icon-btn:hover{background:#f3f5f8;border-color:var(--color-border)}.app-shell .btn.primary{background:var(--color-primary);border-color:var(--color-primary);border-radius:9px;box-shadow:none}.app-shell .btn.primary:hover{background:#2e5fc3;box-shadow:none}.app-shell .content{width:min(1480px,100%);margin:0 auto;padding:30px 32px 56px}
.app-shell .page-head{margin:0 0 24px;align-items:center;gap:20px}.app-shell .page-head h1{font-size:var(--font-30);font-weight:620;letter-spacing:-.035em;line-height:1.2;color:var(--color-text)}.app-shell .page-head p{margin-top:6px;color:var(--color-text-muted);font-size:13px}.app-shell .head-actions{display:flex;flex-wrap:wrap;gap:8px}
.app-shell .panel{border:1px solid var(--color-border);border-radius:var(--radius-3);background:var(--color-surface);box-shadow:var(--shadow-subtle)}.app-shell .panel-title h2{font-size:var(--font-18);font-weight:600;color:var(--color-text)}.app-shell .panel-title p{font-size:12px;color:var(--color-text-muted)}
.app-shell .kpi{border:1px solid var(--color-border);border-radius:var(--radius-3);background:var(--color-surface);box-shadow:var(--shadow-subtle);padding:17px;transition:border-color .14s ease,box-shadow .14s ease}.app-shell .kpi:before{display:none}.app-shell .kpi:hover{transform:none;border-color:#d3dbe6;box-shadow:var(--shadow-card)}.app-shell .kpi label{font-size:12px;color:var(--color-text-muted)}.app-shell .kpi strong{font-size:24px;font-weight:620;letter-spacing:-.02em;color:var(--color-text)}.app-shell .kpi small{font-size:11px;color:#8490a0}
.app-shell .table-wrap{overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-2);box-shadow:none}.app-shell .table{min-width:100%;font-size:13px}.app-shell .table thead th{position:sticky;top:0;z-index:1;background:#f7f8fa;color:#697587;padding:12px;font-size:12px;font-weight:600;white-space:nowrap}.app-shell .table td{height:49px;padding:9px 12px;border-top:1px solid #edf0f3;color:#394556}.app-shell .table tbody tr:hover td{background:#f8fafd}.app-shell .table .money,.app-shell .table .numeric{text-align:right;font-variant-numeric:tabular-nums}.app-shell .chip.status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:550;white-space:nowrap}.status-chip__dot{width:6px;height:6px;border-radius:50%;background:currentColor}.status-chip--success{color:#177251!important;background:#edf7f2!important;border-color:#dcefe5!important}.status-chip--warning{color:#946011!important;background:#fbf4e6!important;border-color:#f1e5c9!important}.status-chip--danger{color:#a53b46!important;background:#fbefef!important;border-color:#f2dddd!important}.status-chip--info{color:#45668e!important;background:#eef3f9!important;border-color:#e0e8f2!important}.status-chip--locked{color:#655797!important;background:#f2eff9!important;border-color:#e7e1f3!important}
.app-shell .btn{min-height:40px;border-radius:9px;border-color:#dfe4eb;background:#fff;box-shadow:none;font-weight:550}.app-shell .btn:hover{transform:none;box-shadow:none;border-color:#cbd4df}.app-shell .field input,.app-shell .field select,.app-shell .field textarea,.app-shell .input{min-height:42px;border:1px solid #dfe4eb;border-radius:9px;background:#fff;font-size:13px}.app-shell .field label{font-size:12px;font-weight:550;color:#485565}.app-shell .field small,.app-shell .help-text{font-size:12px;color:var(--color-text-muted)}
.app-shell .modal-backdrop{backdrop-filter:blur(3px);padding:0;place-items:stretch end}.app-shell .modal{width:min(680px,100vw);height:100vh;max-height:100vh;border:0;border-left:1px solid var(--color-border);border-radius:0;box-shadow:var(--shadow-floating);animation:none}.app-shell .modal.wide{width:min(820px,100vw)}.app-shell .modal-head,.app-shell .modal-foot{backdrop-filter:none;background:#fff}.app-shell .modal-head h3{font-size:18px;font-weight:600}.app-shell .modal-body{padding:22px 24px}.app-shell .modal-backdrop:has(.modal.wide) .modal{width:min(820px,100vw)}
.app-icon{display:block;flex:0 0 auto}.nav button:focus-visible,.icon-btn:focus-visible,.btn:focus-visible{outline:3px solid #9bb5ed;outline-offset:2px}
@media(max-width:1280px){.app-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.app-shell{grid-template-columns:84px minmax(0,1fr)}.app-shell .brand{justify-content:center;padding-inline:0}.app-shell .brand>div:not(.brand-mark),.app-shell .nav button span,.app-shell .nav-group,.app-shell .side-user>div:not(.avatar){display:none}.app-shell .nav button{justify-content:center;padding:9px}.app-shell .nav button i{width:20px}}
@media(max-width:860px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.app-shell{display:block;padding:0}.app-shell .sidebar{display:none!important}.app-shell .topbar{height:60px;top:0;padding:0 16px;border-radius:0}.app-shell .content{padding:24px 18px 86px}.app-shell .searchbox{width:auto;min-width:0;flex:1}.app-shell .searchbox kbd{display:none}.app-shell .top-actions .icon-btn:first-child{display:none}.app-shell .modal-backdrop{place-items:stretch}.app-shell .modal,.app-shell .modal.wide,.app-shell .modal-backdrop:has(.modal.wide) .modal{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.dashboard-main-grid,.dashboard-trends-grid{grid-template-columns:1fr}}
@media(max-width:600px){.app-shell .content{padding:20px 14px 88px}.app-shell .page-head{display:block;margin-bottom:18px}.app-shell .page-head h1,.dashboard-welcome h1{font-size:26px}.app-shell .head-actions{margin-top:12px}.app-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.app-kpis .kpi{padding:13px}.app-kpis .kpi strong{font-size:20px}.app-kpis .kpi-money{font-size:16px!important}.app-shell .panel{padding:15px}.dashboard-main-grid,.dashboard-trends-grid{gap:12px}.dashboard-welcome{margin-bottom:17px}.app-shell .searchbox{height:38px}.app-shell .topbar{padding-inline:10px}.app-shell .top-actions{gap:4px}.app-shell .top-actions .btn.primary{font-size:0;width:40px;padding:0}.app-shell .top-actions .btn.primary:before{content:none}.app-shell .top-actions .btn.primary span{display:none}.app-shell .table-wrap{max-width:100%;overscroll-behavior-x:contain}.app-shell .table{min-width:720px}}
@media(max-width:380px){.app-kpis{grid-template-columns:1fr 1fr}.dashboard-activity-item time{display:none}.app-shell .searchbox{min-width:0}}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}.app-shell *,#app-mobile-nav *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* Modal root is a body-level portal, outside the app shell. */
body:has(.app-shell) .modal-backdrop{backdrop-filter:blur(3px);padding:0;place-items:stretch end}
body:has(.app-shell) .modal{width:min(680px,100vw);height:100vh;max-height:100vh;border:0;border-left:1px solid var(--color-border);border-radius:0;box-shadow:var(--shadow-floating);animation:none}
body:has(.app-shell) .modal.wide{width:min(820px,100vw)}
body:has(.app-shell) .modal-head,body:has(.app-shell) .modal-foot{backdrop-filter:none;background:#fff}
@media(max-width:860px){body:has(.app-shell) .modal-backdrop{place-items:stretch}body:has(.app-shell) .modal,body:has(.app-shell) .modal.wide{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}}
.app-shell .nav{flex:1;min-height:0;overflow-y:auto;align-content:start;scrollbar-width:thin;scrollbar-color:#d6dde7 transparent}.app-shell .nav-group{margin-top:13px}.app-shell .side-bottom{flex:0 0 auto;margin-top:auto}
@media(max-width:860px){.dashboard-chart-empty{min-height:104px}}

/* Liquid Glass shared overlays and document surfaces */
.modal-backdrop{background:rgba(1,10,30,.68);backdrop-filter:blur(9px)}
.modal{color:#f5f9ff;background:linear-gradient(150deg,rgba(16,61,116,.97),rgba(5,28,66,.98));border:1px solid rgba(164,219,255,.28);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.10)}
.modal-head,.modal-foot{background:rgba(7,34,76,.96);border-color:rgba(164,219,255,.17)}
.modal .field label,.modal .panel-title h2,.modal .empty b{color:#eaf6ff}
.modal input,.modal select,.modal textarea,.modal .input{color:#f5f9ff;background:rgba(4,26,61,.70);border-color:rgba(164,219,255,.22)}
.modal select option{background:#eaf3ff;color:#061a45}
.modal .btn{background:rgba(17,61,112,.75);border-color:rgba(164,219,255,.24);color:#eaf6ff}
.modal .btn.primary,.modal .btn.success{background:linear-gradient(135deg,#1969ff,#2f82ff 55%,#6f58ff);border-color:rgba(147,214,255,.5);color:#fff}
.modal .table-wrap,.modal .list-row,.modal .info-card,.modal .flow-step,.modal .dropzone{background:rgba(4,26,61,.55);border-color:rgba(164,219,255,.18);color:#eaf6ff}
.modal .table th{background:#103565;color:#bcd0ec}.modal .table td{border-color:rgba(164,219,255,.12)}
.toast{color:#eaf6ff;background:rgba(6,35,77,.95);border-color:rgba(164,219,255,.25);backdrop-filter:blur(16px)}
.unsaved-confirm{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px));padding:26px 26px 22px;border:1px solid #e4eee9;border-radius:15px;background:#fff;color:#243b34;box-shadow:0 24px 70px rgba(20,55,42,.24);text-align:center}
.unsaved-confirm-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:#fff2d8;color:#b7791f;font-weight:800;font-size:21px}
.unsaved-confirm h2{margin:0 0 8px;font-size:18px;color:#243b34}
.unsaved-confirm p{margin:0;color:#64756e;line-height:1.55;font-size:14px}
.unsaved-confirm-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.unsaved-confirm-actions .btn{min-height:40px;border-radius:10px;background:#f5faf7;border-color:#dcebe3;color:#315a49}
.unsaved-confirm-actions .unsaved-confirm-discard{background:#e5f5ec;border-color:#cce8d8;color:#24543d;font-weight:700}
.unsaved-confirm :focus-visible{outline:3px solid #83c9a5;outline-offset:3px}
@media(max-width:480px){.unsaved-confirm{padding:23px 18px 18px}.unsaved-confirm-actions{flex-direction:column-reverse}.unsaved-confirm-actions .btn{width:100%}}
.leave-balance-cards .kpi{background:linear-gradient(145deg,#f0fbf6,#fff);border-color:#d8eee4}
.leave-create-form{display:grid;gap:16px}
.leave-create-form [hidden]{display:none !important}
.leave-mode,.leave-one-fraction,.leave-create-for{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.leave-mode b,.leave-one-fraction>b{width:100%;color:#315247}
.leave-create-for{border:1px solid #d8e9e1;border-radius:14px;padding:14px}
.leave-create-for legend{font-weight:700;color:#315247;padding:0 6px}
.leave-date-grid,.leave-range-fractions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.leave-preview{margin-top:16px;padding:18px;border:1px solid #d7eee2;border-radius:16px;background:#f5fcf8}
.leave-preview h3{margin:0 0 12px;font-size:13px;letter-spacing:.06em;color:#426658}
.leave-preview #leave-breakdown>div,.leave-balance-detail>div{display:flex;justify-content:space-between;gap:20px;padding:7px 0}
.leave-allocation{display:grid;gap:8px}.leave-allocation>b{color:#27694e}.leave-allocation>span{display:flex;justify-content:space-between}
.leave-approval-summary{display:grid;gap:8px;padding:14px;margin:16px 0;background:#f0fbf6;border:1px solid #d8eee4;border-radius:14px}
.leave-approval-summary strong{color:#27694e}
.leave-balance-detail hr{border:0;border-top:1px solid #dcebe3;margin:12px 0}
@media(max-width:700px){.leave-date-grid,.leave-range-fractions{grid-template-columns:1fr}.leave-mode,.leave-one-fraction{gap:10px}.leave-preview{padding:14px}}