@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400.woff2)}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(fonts/plex-arabic-500.woff2)}
@font-face{font-family:Plex;font-weight:600;font-display:swap;src:url(fonts/plex-arabic-600.woff2)}
@font-face{font-family:Plex;font-weight:700;font-display:swap;src:url(fonts/plex-arabic-700.woff2)}
@font-face{font-family:PlexL;font-weight:400;font-display:swap;src:url(fonts/plex-latin-400.woff2)}
@font-face{font-family:PlexL;font-weight:500;font-display:swap;src:url(fonts/plex-latin-500.woff2)}
@font-face{font-family:PlexL;font-weight:600;font-display:swap;src:url(fonts/plex-latin-600.woff2)}
@font-face{font-family:PlexL;font-weight:700;font-display:swap;src:url(fonts/plex-latin-700.woff2)}
:root{--g9:#0F3D2E;--g8:#124836;--g7:#1B5E46;--g6:#2F7A5C;--g5:#76AB7B;--g3:#A9CDAD;--g1:#EEF5EF;--bg:#F4F7F6;--ln:#E5EAE8;--tx:#1F2A26;--mut:#66756F;--blue:#2563EB;--blue1:#EFF6FF;--sand:#B45309;--sand1:#FFF7E8;--mauve:#7C3AED;--mauve1:#F5F3FF;--red:#C2362B;--red1:#FDF0EE;--r:14px;--rail:84px;--subw:244px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:PlexL,Plex,Tahoma,sans-serif;background:var(--bg);color:var(--tx);font-size:13.5px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--g6);text-decoration:none}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--mut)}.small{font-size:12px}.bold{font-weight:600}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--g6);outline-offset:2px}

/* layout: dark module rail · sub-menu · main */
.app{display:grid;grid-template-columns:var(--rail) var(--subw) minmax(0,1fr);min-height:100vh}
.rail{background:linear-gradient(180deg,#124836,#0B2F23);display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 0 10px;position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;z-index:20}
.rail-top{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;overflow-y:auto;scrollbar-width:none;padding-top:2px;-webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}
.rail-top::-webkit-scrollbar{display:none}
.rail-bot{flex:none;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:8px;margin-top:4px;position:relative}
.rail-bot::before{content:"";position:absolute;top:0;inset-inline:16px;height:1px;background:rgba(255,255,255,.12)}
.rail .mark{width:46px;height:46px;border-radius:13px;background:#fff;display:grid;place-items:center;margin-bottom:10px;flex:none}
.rail .mark img{width:46px;height:46px;border-radius:13px}
.rail a[data-mod]{width:72px;padding:9px 2px 7px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#BFD9C2;font-size:10.5px;font-weight:500;text-align:center;line-height:1.25;position:relative;flex:none}
.rail a[data-mod] svg{width:20px;height:20px}
.rail a[data-mod]:hover{background:rgba(255,255,255,.07);color:#fff}
.rail a[data-mod].on{background:rgba(255,255,255,.13);color:#fff}
.rail a[data-mod].on::before{content:"";position:absolute;inset-inline-start:-6px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--g5)}
.rail a em{position:absolute;top:5px;inset-inline-end:12px;background:#F59E0B;color:#fff;font:700 9.5px/1.5 PlexL;border-radius:8px;padding:0 5px;font-style:normal}
.subnav{background:#fff;border-inline-start:1px solid var(--ln);border-inline-end:1px solid var(--ln);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:15}
.subnav .brand{display:block;padding:18px 20px 10px}.subnav .brand img{height:30px;display:block}
.subnav .tenant{display:flex;gap:7px;align-items:center;margin:0 14px 6px;padding:7px 10px;border-radius:9px;background:var(--g1);color:var(--g8);font-size:11.5px;font-weight:600}
.subnav .tenant svg{width:14px;height:14px;flex:none}
.sub-h{padding:12px 20px 8px;border-top:1px solid var(--ln);margin-top:6px}.sub-h h2{font-size:16px;font-weight:700;color:var(--g9)}
.sub-b{padding:4px 12px 20px}
.sub-b .grp{font-size:10.5px;color:var(--mut);font-weight:600;padding:12px 10px 5px}
.sub-b a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#43524C;font-weight:500;font-size:13px;min-height:38px}
.sub-b a svg{width:16px;height:16px;color:var(--mut);flex:none}
.sub-b a:hover{background:#F4F7F6}
.sub-b a.on{background:var(--g1);color:var(--g8);font-weight:600}.sub-b a.on svg{color:var(--g6)}
.sub-b a em{margin-inline-start:auto;font:700 10.5px PlexL;background:var(--sand1);color:var(--sand);padding:1px 7px;border-radius:7px;font-style:normal}
main{min-width:0;display:flex;flex-direction:column}
.tb{height:62px;background:#fff;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:10px;padding:0 24px;position:sticky;top:0;z-index:10}
.tb .crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);white-space:nowrap}
.tb .crumb b{color:var(--tx);font-weight:600}.tb .crumb svg{width:13px;height:13px}
[dir=ltr] .tb .crumb svg{transform:scaleX(-1)}
.tb .sp{flex:1}
.tb .menu{display:none;border:0;background:none;padding:8px;color:var(--g9)}.tb .menu svg{width:22px;height:22px;display:block}
.gs{position:relative;flex:0 1 380px;margin-inline-start:18px;height:38px;border:1px solid var(--ln);border-radius:10px;background:#FAFBFB;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--mut)}
.gs:focus-within{border-color:var(--g6);background:#fff;box-shadow:0 0 0 3px rgba(47,122,92,.12)}
.gs>span svg{width:16px;height:16px;display:block}
.gs input{flex:1;border:0;background:none;outline:0;font-size:13px;min-width:0}
.gs kbd{font:500 10.5px PlexL;border:1px solid var(--ln);border-radius:5px;padding:0 6px;background:#fff}
.gsr{position:absolute;top:44px;inset-inline:0;background:#fff;border:1px solid var(--ln);border-radius:12px;box-shadow:0 18px 40px -16px rgba(0,0,0,.25);padding:6px;z-index:30}
.gsr a{display:flex;gap:10px;align-items:center;padding:8px;border-radius:9px;color:var(--tx)}
.gsr a:hover,.gsr a.on{background:var(--g1)}
.gsr a>b{width:32px;height:32px;border-radius:50%;background:var(--g1);color:var(--g8);display:grid;place-items:center;font-size:12px;flex:none}
.gsr a div{flex:1;min-width:0}.gsr a strong{display:block;font-size:13px}.gsr a span{font-size:11.5px;color:var(--mut)}
.gsr .none{padding:12px;color:var(--mut);font-size:12.5px;text-align:center}
.ib{width:38px;height:38px;border:1px solid var(--ln);border-radius:10px;background:#fff;display:grid;place-items:center;color:#43524C;position:relative;flex:none}
.ib:hover{border-color:#C9D6CF}.ib svg{width:18px;height:18px}
.ib.txt{font:600 12px PlexL}
.ib em{position:absolute;top:-6px;inset-inline-end:-6px;background:var(--red);color:#fff;font:700 9.5px/1.6 PlexL;border-radius:9px;padding:0 5px;border:2px solid #fff;font-style:normal}
.tb .me{display:flex;align-items:center;gap:9px;padding-inline-start:12px;margin-inline-start:4px;border-inline-start:1px solid var(--ln)}
.tb .me>b{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#2F7A5C,#124836);color:#fff;display:grid;place-items:center;font-size:12.5px;flex:none}
.tb .me strong{display:block;font-size:12.5px;line-height:1.3}.tb .me span{font-size:11px;color:var(--mut)}
.tb .me .ib{border:0;width:32px}
.navscrim{display:none}
.wrap{padding:22px 26px 40px;flex:1}
.ph{display:flex;align-items:flex-end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ph h1{font-size:22px;font-weight:700;color:var(--tx)}
.ph p{color:var(--mut);font-size:13px;margin-top:2px}
.ph .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

/* controls */
.btn{border:1px solid var(--ln);background:#fff;border-radius:10px;padding:0 14px;height:38px;font-size:13px;color:#2C3D35;display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap}
.btn:hover{border-color:#C9D6CF}
.btn svg{width:15px;height:15px;flex:none}
.btn.p{background:linear-gradient(135deg,#1B5E46,#124836);color:#fff;border-color:#124836;box-shadow:0 4px 14px -4px rgba(18,72,54,.45)}.btn.p:hover{background:#124836}
.btn.d{color:var(--red);border-color:#F0CFCB}.btn.d:hover{background:var(--red1)}
.btn.sm{height:32px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.pill{border:1px solid var(--ln);border-radius:9px;padding:6px 12px;font-size:12.5px;background:#fff;color:#3D4F47}
.in,select.in,textarea.in{width:100%;height:40px;border:1px solid #D6DFDA;border-radius:10px;padding:0 12px;background:#FBFCFC;font-size:14px}
textarea.in{height:auto;min-height:76px;padding:10px 12px;resize:vertical}
.in:focus{outline:0;border-color:var(--g6);box-shadow:0 0 0 3px rgba(52,125,98,.12);background:#fff}
.fld{display:flex;flex-direction:column;gap:5px}
.fld>span{font-size:12px;font-weight:600;color:#3D4F47}
.fld>span i{color:var(--red);font-style:normal}
.fld small{font-size:11.5px;color:var(--mut)}
.grid{display:grid;gap:12px 14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}.spanall{grid-column:1/-1}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;min-height:40px}
.chk input{width:18px;height:18px;accent-color:var(--g8)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-bottom:1px solid var(--ln)}
.filters .in{width:auto;min-width:150px;height:36px;font-size:13px}
.filters .q{min-width:240px;flex:1;max-width:360px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--ln);background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--mut)}
.chips button.on{background:var(--g9);border-color:var(--g9);color:#fff}

/* panels and tables */
.pn{background:#fff;border:1px solid var(--ln);border-radius:var(--r);min-width:0}
.pn>h3{font-size:13.5px;font-weight:600;color:var(--g9);padding:12px 16px;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:8px;min-height:48px}
.pn>h3 svg{width:16px;height:16px;color:var(--g6)}
.pn>h3 .r{margin-inline-start:auto;display:flex;gap:6px;align-items:center;font-weight:400;font-size:12px}
.pn .bd{padding:14px 16px}
.cols{display:grid;gap:14px}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.c21{grid-template-columns:2fr 1fr}.c12{grid-template-columns:1fr 2fr}
.mt{margin-top:14px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-weight:500;color:var(--mut);font-size:11.5px;text-align:start;padding:9px 12px;background:#FAFBFB;border-bottom:1px solid var(--ln);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid #F0F3F2;vertical-align:middle;white-space:nowrap}
td .sub,td code{white-space:normal}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}tbody tr.click:hover td{background:#F7FAF8}
td .sub{display:block;font-size:11.5px;color:var(--mut)}
.pager{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--ln);font-size:12.5px;color:var(--mut)}
.pager .sp{flex:1}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.kv.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kv>div{padding:9px 16px;border-bottom:1px dashed #EDF1EF;font-size:11.5px;color:var(--mut);min-width:0}
.kv>div b{display:block;font-size:13px;color:var(--tx);font-weight:500;margin-top:2px;overflow-wrap:anywhere}
.tg{white-space:nowrap;font-size:11.5px;border-radius:7px;padding:2px 9px;background:#F1F4F3;color:#3D4F47;display:inline-flex;gap:5px;align-items:center;font-weight:500}
.tg.gr{background:var(--g1);color:var(--g8)}.tg.bl{background:var(--blue1);color:var(--blue)}.tg.sd{background:var(--sand1);color:var(--sand)}.tg.rd{background:var(--red1);color:var(--red)}.tg.mv{background:var(--mauve1);color:var(--mauve)}
.tg i{width:6px;height:6px;border-radius:50%;background:currentColor}
.empty{padding:28px 16px;text-align:center;color:var(--mut);font-size:13px}
.empty svg{width:28px;height:28px;display:block;margin:0 auto 8px;color:#B7C5BE}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--g1);border-radius:12px;padding:11px 14px;font-size:12.5px;color:#36574A;line-height:1.7}
.note.sd{background:var(--sand1);color:#6B4C17}.note.rd{background:var(--red1);color:var(--red)}.note.bl{background:var(--blue1);color:#24547F}
.note svg{width:17px;height:17px;flex:none;margin-top:2px}
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:#fff;border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.stats>div{padding:12px 16px;border-inline-start:1px solid var(--ln)}
.stats>div:first-child{border-inline-start:0}
.stats label{font-size:11.5px;color:var(--mut)}
.stats b{display:block;font-size:20px;font-weight:700;color:var(--g9);margin-top:2px}
.stats b small{font-size:12px;font-weight:500;color:var(--mut)}
.bar{height:6px;border-radius:4px;background:#EEF2F0;overflow:hidden}.bar i{display:block;height:100%;background:var(--g6)}
.list>div{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid #F0F3F2}
.list>div:last-child{border-bottom:0}
.list .av{width:34px;height:34px;border-radius:10px;background:var(--g1);color:var(--g8);display:grid;place-items:center;font-weight:600;flex:none;font-size:12.5px}
.list .t{flex:1;min-width:0}.list .t b{display:block;font-weight:600;font-size:13px}.list .t span{font-size:12px;color:var(--mut)}

/* employee header */
.eh{background:#fff;border:1px solid var(--ln);border-radius:16px;overflow:hidden}
.eh .t{display:flex;gap:18px;padding:16px 20px;background:linear-gradient(90deg,#fff 45%,#F1F7EF)}
[dir=ltr] .eh .t{background:linear-gradient(270deg,#fff 45%,#F1F7EF)}
.eh .av{width:84px;height:100px;border-radius:14px;background:linear-gradient(160deg,#DCEBD8,#B9D5B3);display:grid;place-items:center;color:var(--g8);font-size:28px;font-weight:700;position:relative;flex:none;overflow:hidden}
.eh .av img{width:100%;height:100%;object-fit:cover}
.eh .av em{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10.5px;background:var(--g8);color:#fff;border-radius:6px;padding:1px 7px;white-space:nowrap}
.eh h1{font-size:21px;font-weight:700;color:var(--g9)}
.eh .en{font-size:13px;color:var(--mut);margin-top:1px}
.eh .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.eh .facts{display:grid;grid-template-columns:repeat(4,auto);gap:4px 26px;margin-inline-start:auto;align-content:start;padding-top:2px}
.eh .facts div{font-size:11.5px;color:var(--mut)}.eh .facts b{display:block;font-size:13.5px;color:var(--tx);font-weight:600;margin-top:1px}
.eh .acts{display:flex;flex-direction:column;gap:8px}
.alerts{display:flex;gap:6px 18px;padding:9px 20px;border-top:1px solid var(--ln);background:#FFFDF8;flex-wrap:wrap}
.alerts span{display:flex;gap:7px;align-items:center;font-size:12.5px;color:#6B4C17}
.alerts span.r{color:var(--red)}
.alerts svg{width:15px;height:15px}
.tabs{display:flex;gap:2px;padding:0 10px;border-top:1px solid var(--ln);overflow-x:auto;scrollbar-width:thin}
.tabs a{padding:12px 11px;font-size:13px;color:var(--mut);white-space:nowrap;border-bottom:2px solid transparent}
.tabs a.on{color:var(--g8);border-color:var(--g8);font-weight:600}
.tabs a .c{font-size:10.5px;background:var(--red1);color:var(--red);border-radius:5px;padding:0 5px;margin-inline-start:4px}
.steps{display:flex;flex-direction:column}
.steps>div{position:relative;padding:8px 22px 10px 0;border-inline-start:2px solid #E3ECE7;margin-inline-start:6px;font-size:12.5px}
[dir=rtl] .steps>div{padding:8px 22px 10px 0}
[dir=ltr] .steps>div{padding:8px 0 10px 22px}
.steps>div:before{content:"";position:absolute;inset-inline-start:-7px;top:12px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #C3D3CB}
.steps>div.APPROVED:before{background:var(--g6);border-color:var(--g6)}
.steps>div.REJECTED:before{background:var(--red);border-color:var(--red)}
.steps>div.PENDING:before{border-color:var(--sand);box-shadow:0 0 0 3px var(--sand1)}
.steps>div.SKIPPED{opacity:.6}
.steps small{display:block;color:var(--mut);font-size:11.5px}
.lines{width:100%}.lines td{padding:7px 0;border-bottom:1px dashed #EDF1EF}.lines td:last-child{text-align:end;font-weight:600}
.lines tr.t td{font-size:15px;color:var(--g9);border:0;padding-top:12px}
.lines td small{display:block;color:var(--mut);font-size:11.5px;font-weight:400}

/* modal + toast */
.scrim{position:fixed;inset:0;background:rgba(14,35,28,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow-y:auto}
.modal{background:#fff;border-radius:18px;width:100%;max-width:720px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);display:flex;flex-direction:column;max-height:92vh}
.modal.lg{max-width:1020px}.modal.sm{max-width:460px}
.modal header{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--ln)}
.modal header h2{font-size:16px;font-weight:700;color:var(--g9)}
.modal header button{margin-inline-start:auto;border:0;background:none;width:36px;height:36px;border-radius:10px}
.modal header button:hover{background:#F1F4F3}
.modal .mb{padding:18px 20px;overflow-y:auto}
.modal footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--ln);background:#FAFBFB;border-radius:0 0 18px 18px}
.modal .sec{font-size:12.5px;font-weight:700;color:var(--g8);margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--ln)}
.modal .sec:first-child{margin-top:0}
.err{background:var(--red1);color:var(--red);border-radius:10px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}
.toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(50%);background:var(--g9);color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;z-index:80;box-shadow:0 14px 34px -12px rgba(0,0,0,.4)}
[dir=ltr] .toast{transform:translateX(-50%)}
.toast.e{background:var(--red)}
.loading{padding:40px;text-align:center;color:var(--mut)}
.spin{width:22px;height:22px;border:2.5px solid #D8E3DD;border-top-color:var(--g6);border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.svc>div{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:14px 16px}
.svc h4{font-size:14px;color:var(--g9)}.svc p{font-size:12px;color:var(--mut);margin:3px 0 10px;min-height:36px}
.svc .row{display:flex;justify-content:space-between;font-size:12px;margin-top:6px}

/* print */
@media print{
  .rail,.subnav,.tb,.ph .acts,.tabs,.btn,.noprint{display:none!important}
  .app{display:block}.wrap{padding:0}
  body{background:#fff}
  .pn{border:0}
}
/* mobile */
@media (max-width:1100px){.c3{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(3,1fr)}.stats>div:nth-child(4){border-inline-start:0}.eh .facts{grid-template-columns:repeat(2,auto)}}
@media (max-width:1240px){.tb .me div{display:none}.gs{flex-basis:260px}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail,.subnav{position:fixed;top:0;height:100vh;z-index:60;display:none}
  .rail{inset-inline-start:0}.subnav{inset-inline-start:var(--rail);width:min(var(--subw),calc(100vw - var(--rail)))}
  .navopen .rail,.navopen .subnav{display:flex}
  .navopen .navscrim{display:block;position:fixed;inset:0;background:rgba(14,35,28,.4);z-index:55}
  .tb{padding:0 10px;gap:6px}.gs{margin:0;flex:1 1 auto;min-width:0;padding:0 8px}.gs kbd,.tb .crumb{display:none}.ib{width:34px;height:34px}.tb .me{padding-inline-start:6px;gap:4px}.tb .me>b{width:32px;height:32px}
  .tb .menu{display:block}
  .wrap{padding:14px 14px 30px}
  .c3,.c2,.c21,.c12,.g3,.g4{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .stats{grid-template-columns:1fr 1fr}.stats>div{border-inline-start:0;border-top:1px solid var(--ln)}
  .eh .t{flex-wrap:wrap}.eh .facts{margin:0;grid-template-columns:1fr 1fr;width:100%}.eh .acts{flex-direction:row;flex-wrap:wrap}
  .kv,.kv.k3{grid-template-columns:1fr}
  .in,select.in{font-size:16px;height:44px}
  .btn{height:42px}
  .modal{max-height:none;min-height:100%;border-radius:0}.scrim{padding:0}
  .filters .q{min-width:100%}
}

/* ===================== hrmatix components ===================== */
/* employee hero */
.hero{background:#fff;border:1px solid var(--ln);border-radius:16px;overflow:hidden;margin-bottom:14px}
.hero .band{height:64px;background:linear-gradient(120deg,#124836 0%,#1B5E46 55%,#76AB7B 130%);position:relative}
.hero .band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 40%,rgba(255,255,255,.1) 0 60px,transparent 61px),radial-gradient(circle at 22% 130%,rgba(255,255,255,.08) 0 90px,transparent 91px)}
.hb{display:flex;gap:18px;padding:0 22px 14px;align-items:flex-start;margin-top:-38px;position:relative}
.hb .big{width:96px;height:96px;border-radius:50%;background:#FEF3C7;color:#92400E;display:grid;place-items:center;font:700 30px Plex;border:4px solid #fff;box-shadow:0 0 0 2px var(--g5);flex:none;overflow:hidden}
.hb{position:relative}.hb .big{background:#E3EFE5}.hb .big svg{width:100%;height:100%}.hb .eph{position:absolute;inset-inline-start:84px;top:72px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;z-index:2}
.hb .big img{width:100%;height:100%;object-fit:cover}
.hb .who{padding-top:46px;min-width:0}
.hb h1{font-size:21px;font-weight:700;color:var(--tx);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hb h1 small{font:500 12.5px PlexL;color:var(--mut)}
.hb p{color:#43524C;font-size:12.5px;margin-top:2px}
.hb .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.hb .acts{margin-inline-start:auto;padding-top:48px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.facts6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ln)}
.facts6>div{padding:11px 18px;border-inline-start:1px solid var(--ln);min-width:0}
.facts6>div:first-child{border-inline-start:0}
.facts6 small{display:block;color:var(--mut);font-size:11px}.facts6 b{font-size:13.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facts6 em{font-style:normal;font-size:11px;color:var(--mut)}
/* compliance strip */
.comp{margin-bottom:14px}
.cmp{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.cmp>div{display:flex;gap:9px;align-items:center;border:1px solid var(--ln);border-radius:11px;padding:7px 12px;background:#fff;min-width:150px}
.cmp>div i{width:9px;height:9px;border-radius:50%;background:#9CA3AF;flex:none}
.cmp>div.g i{background:var(--g6)}.cmp>div.a i{background:#D97706}.cmp>div.r i{background:var(--red)}
.cmp>div.r{border-color:#F3C9C4;background:#FFFAF9}
.cmp b{display:block;font-size:12px;font-weight:600}.cmp span{font-size:11px;color:var(--mut)}
.cmp>div.r span{color:var(--red);font-weight:600}
/* underline tabs */
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--ln);margin-bottom:14px;overflow-x:auto;scrollbar-width:thin}
.tabs2 a{padding:10px 13px;font-weight:600;color:var(--mut);font-size:12.5px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs2 a.on{color:var(--g8);border-color:var(--g8)}
.tabs2 a .c{font:700 10px PlexL;background:var(--red1);color:var(--red);border-radius:6px;padding:0 5px;margin-inline-start:4px}
/* overview */
.ov3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 340px;gap:14px;align-items:start}
.colv{display:flex;flex-direction:column;gap:14px;min-width:0}
.amt{font:700 26px PlexL;color:var(--tx)}.amt small{font:500 12px Plex;color:var(--mut);margin-inline-start:6px}
.stack{display:flex;height:12px;border-radius:7px;overflow:hidden;margin:10px 0 8px;background:#EEF2F0}
.stack i{display:block;height:100%}
.lgd{display:flex;gap:6px 14px;font-size:11.5px;color:#43524C;flex-wrap:wrap}.lgd span{display:flex;align-items:center;gap:5px}.lgd i{width:8px;height:8px;border-radius:2px;display:inline-block}
.seg{display:flex;background:#F2F5F3;border-radius:9px;padding:3px;gap:2px}
.seg button{flex:1;border:0;background:none;padding:6px;border-radius:7px;font-size:12px;font-weight:600;color:var(--mut)}
.seg button.on{background:#fff;color:var(--g8);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 10px;text-align:center}
.ring{width:76px;height:76px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:8px;background:#fff;border-radius:50%}
.ring b{position:relative;font:700 18px PlexL;line-height:1.1}.ring b small{display:block;font:500 9.5px Plex;color:var(--mut)}
.rings span{font-size:11.5px;font-weight:600;display:block}.rings em{display:block;font-style:normal;font-size:10.5px;color:var(--mut)}
.tl{padding:6px 16px 12px}
.tl>div{display:grid;grid-template-columns:78px 14px minmax(0,1fr);gap:8px;padding:7px 0;position:relative}
.tl .d{font:600 11px PlexL;color:var(--mut);padding-top:2px}
.tl>div>i{width:11px;height:11px;border-radius:50%;margin-top:4px;background:var(--g6);box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--g3);z-index:1}
.tl>div>i.a{background:#D97706;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #FCD9A6}.tl>div>i.r{background:var(--red);box-shadow:0 0 0 3px #fff,0 0 0 4.5px #F3C9C4}
.tl>div:not(:last-child)::after{content:"";position:absolute;inset-inline-start:91px;top:22px;bottom:-8px;width:2px;background:var(--ln)}
.tl b{font-size:12.5px;font-weight:600;display:block}.tl span{font-size:11.5px;color:var(--mut)}
/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:14px 15px;display:flex;gap:12px;align-items:center;min-width:0;color:inherit}
a.kpi:hover{border-color:#C9D6CF}
.kpi .ki{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}.kpi .ki svg{width:20px;height:20px}
.kpi small{display:block;color:var(--mut);font-size:11.5px}.kpi b{font:700 22px PlexL;line-height:1.25;display:block}.kpi em{font-style:normal;font-size:10.5px;color:var(--mut);display:block}
.k-g{background:var(--g1);color:var(--g6)}.k-b{background:var(--blue1);color:var(--blue)}.k-s{background:var(--sand1);color:var(--sand)}.k-r{background:var(--red1);color:var(--red)}.k-v{background:var(--mauve1);color:var(--mauve)}
/* segmented filter tabs inside a panel head */
.ptabs{display:flex;gap:3px;background:#F2F5F3;border-radius:10px;padding:3px;flex-wrap:wrap}
.ptabs a,.ptabs button{padding:6px 12px;border-radius:8px;font-weight:600;font-size:12px;color:var(--mut);border:0;background:none}
.ptabs .on{background:#fff;color:var(--g8);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ptabs span{font:600 10.5px PlexL;margin-inline-start:4px;color:var(--sand)}
.side2{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.pers{display:flex;align-items:center;gap:10px;min-width:0}
.pers>i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 11.5px Plex;flex:none;font-style:normal}
.pers b{display:block;font-size:12.5px}.pers span{font-size:11px;color:var(--mut)}
.dist{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.dist>div{display:grid;grid-template-columns:96px 1fr 38px;align-items:center;gap:8px;font-size:12px}
.dist .t{height:8px;background:#EEF2F0;border-radius:5px;overflow:hidden}.dist .t i{display:block;height:100%;border-radius:5px}
.dist b{font:700 12px PlexL;text-align:end}
.step{display:block;font-size:10.5px;color:var(--mut);margin-top:2px}
/* leave request page */
.rh{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.rh h1{font-size:19px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rh .meta{color:var(--mut);font-size:12px;margin-top:3px}
.rh .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.fg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fg>div{padding:11px 16px;border-inline-start:1px solid #F1F4F3;border-bottom:1px solid #F1F4F3;min-width:0}
.fg>div:nth-child(4n+1){border-inline-start:0}
.fg small{display:block;color:var(--mut);font-size:11px}.fg b{font-size:13px;font-weight:600}.fg em{font-style:normal;font-size:11px;color:var(--mut);display:block}
.flow{display:flex;align-items:stretch;padding:14px 16px;gap:0;flex-wrap:wrap}
.flow>div{flex:1;text-align:center;padding:10px;border-radius:12px;background:#F7F9F8;min-width:110px}
.flow small{display:block;font-size:11px;color:var(--mut)}.flow b{font:700 22px PlexL}
.flow .neg b{color:var(--red)}.flow .pos b{color:var(--g6)}.flow .fin{background:var(--g1)}.flow .fin b{color:var(--g8)}
.flow>span{display:grid;place-items:center;width:28px;color:var(--mut)}.flow>span svg{width:15px;height:15px}
[dir=ltr] .flow>span svg{transform:scaleX(-1)}
.gantt{padding:8px 16px 14px;overflow-x:auto}
.gt{display:grid;align-items:center;font-size:11.5px;min-width:640px}
.gt>div{height:30px;border-inline-start:1px solid #F1F4F3;display:flex;align-items:center;justify-content:center;padding:0 1px}
.gt>div:first-child{justify-content:flex-start;font-weight:600;border:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-inline-end:6px}
.gt.hd>div{font:600 10.5px PlexL;color:var(--mut);height:36px;flex-direction:column;line-height:1.2}
.gt .we{background:repeating-linear-gradient(135deg,#F6F7F7 0 4px,#EEF0EF 4px 8px)}
.gt .inr{background:rgba(217,119,6,.07)}
.gb{height:18px;border-radius:5px;width:100%}
.gt.cov>div{font:700 12px PlexL}
.ck{padding:4px 16px 10px}
.ck>div{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--ln);align-items:flex-start}
.ck>div:last-child{border:0}
.ck .s{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--g1);color:var(--g6)}
.ck .s.w{background:var(--sand1);color:#D97706}.ck .s svg{width:13px;height:13px;stroke-width:2.6}
.ck b{font-size:12.5px;display:block}.ck span{font-size:11.5px;color:var(--mut)}
.ap{padding:6px 16px 12px}
.ap>div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:10px 0;position:relative}
.ap .o{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;background:#F3F4F6;color:#9CA3AF}
.ap .o svg{width:16px;height:16px;stroke-width:2.2}
.ap .o.APPROVED{background:var(--g1);color:var(--g6)}.ap .o.PENDING{background:var(--sand1);color:#D97706}.ap .o.REJECTED{background:var(--red1);color:var(--red)}
.ap>div:not(:last-child)::after{content:"";position:absolute;inset-inline-start:16px;top:46px;bottom:-8px;width:2px;background:var(--ln)}
.ap b{font-size:12.5px;display:block}.ap span{font-size:11.5px;color:var(--mut);display:block}
.ap q{display:block;margin-top:6px;background:#F7F9F8;border-radius:9px;padding:7px 10px;font-size:11.5px;color:#43524C;quotes:none}
.sla{display:inline-block;margin-top:5px;font:600 10.5px PlexL;background:var(--sand1);color:var(--sand);border-radius:6px;padding:1px 7px}
@media (max-width:1300px){.ov3{grid-template-columns:1fr 1fr}.ov3>.colv:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(3,1fr)}.facts6{grid-template-columns:repeat(3,1fr)}.facts6>div:nth-child(4){border-inline-start:0}.facts6>div:nth-child(n+4){border-top:1px solid var(--ln)}}
@media (max-width:900px){.ov3,.ov3>.colv:last-child,.side2{grid-template-columns:minmax(0,1fr)}.app{grid-template-columns:minmax(0,1fr)}.rh .acts{width:100%}.flow>div{min-width:90px}.kpis{grid-template-columns:1fr 1fr}.hb{flex-wrap:wrap}.hb .acts{padding-top:0;margin:0}.hb .who{padding-top:46px}.facts6{grid-template-columns:1fr 1fr}.facts6>div{border-inline-start:0;border-top:1px solid var(--ln)}.fg{grid-template-columns:1fr 1fr}.fg>div{border-inline-start:0}}
.rh .big2{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font:700 16px Plex;font-style:normal;flex:none}
[dir=rtl] input[type=date].in{text-align:right}
.pav{display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;flex:none;background:#E3EFE5;vertical-align:middle}.pav svg,.pav img{width:100%;height:100%;object-fit:cover;display:block}

/* ===================== responsive hardening (v15) ===================== */
/* top bar: the breadcrumb yields before anything else overflows */
.tb .crumb{min-width:0;overflow:hidden;flex:0 1 auto}.tb .crumb b{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb .me{flex:none}.tb>.ib,.tb>button{flex:none}
@media (max-width:1380px){.tb .me div{display:none}}
/* wide data grids always scroll inside their panel instead of the page */
table.pf-mx,.pn>table.lines{display:block;max-width:100%;overflow-x:auto}
/* band chips wrap instead of clipping */
.dz-nq i,.lo-band>div{white-space:normal!important;line-height:1.1;text-align:center;padding:0 2px}
/* keyboard focus is always visible */
:focus-visible{outline:2px solid #2F7A5C;outline-offset:2px}
/* phones and small tablets: touch targets ≥ 40px, inputs 16px (no iOS zoom), no sideways scroll */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .ib,.tb .menu{width:40px;height:40px;min-width:40px}
  .tb .me .ib{width:40px}
  .ptabs a,.ptabs button,.chips button,.seg button,.dx-cats button{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .btn.sm{height:auto;min-height:40px;padding:0 12px}
  .in,select.in,textarea.in,.filters .in,.gs input,h3 select.in,span>select.in,span>input.in,.an-wt input{font-size:16px}
  .filters .in{height:44px;min-width:0;flex:1 1 140px}
  .gs{height:40px}
  .hb .eph{width:40px;height:40px}
  .oc-bar .btn,.zm button,.oc-t{min-height:40px;min-width:40px}
  .pager .btn{min-width:44px}
  td .ib{width:40px;height:40px}
  label.chk,label.ck{min-height:40px;display:inline-flex;align-items:center;gap:8px}
  label.chk input,label.ck input{width:20px;height:20px}
  .modal{width:100%!important;max-width:100%!important}
  .modal .bd,.modal .body{overflow-y:auto}
  img,svg,video,canvas{max-width:100%}
  pre{white-space:pre-wrap;word-break:break-word}
}
@media (max-width:380px){
  .tb #lang{display:none}
  .wrap{padding:12px 10px 28px}
}
/* v15 pass 2: content that must shrink with the screen */
.kpi>div,.pers>div,.side2>*,.colv,.ov3>*{min-width:0}
.kpi>div small,.kpi>div em,.pers b,.pers span{overflow-wrap:anywhere}
.pn>h3{flex-wrap:wrap;row-gap:6px}.pn>h3 .r{max-width:100%;display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ig-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))!important}
.jd-a4{max-width:min(210mm,100%)!important;box-sizing:border-box;overflow-wrap:anywhere}
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:12px;gap:10px}.kpi>div b{font-size:clamp(17px,5.4vw,22px)}
  .bd>table,.pn>table,.colv>table{display:block;max-width:100%;overflow-x:auto}
  .btn{max-width:100%}.btn.sm{white-space:normal;text-align:center;line-height:1.25}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}
  .at-brush button,.pf-seg button,td>button,td>select,td>input:not([type=checkbox]):not([type=radio]),.ctl select,span>select.in,span>input.in,.an-act select,.an-lk .btn,.acts select,header>button,.dx-cats button{min-height:40px;min-width:40px}
  td>input[type=checkbox],td>input[type=radio]{width:22px;height:22px}
}
@media (max-width:380px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .lo-band>div,.dz-nq i{font-size:9px!important}
}
/* v15 pass 3 */
.note{min-width:0;overflow-wrap:anywhere}
.jd-a4 table{width:100%;table-layout:fixed}.jd-a4 td,.jd-a4 th{white-space:normal!important;overflow-wrap:anywhere}
@media (max-width:900px){
  .side2{grid-template-columns:minmax(0,1fr)!important}.side2>*{max-width:100%}
  .ptabs a,.ptabs button,.btn.sm{min-width:44px}
  .oc-bar .zm button,.oc-n .oc-t,.oc-bar .btn{min-height:40px!important;min-width:40px!important}
  input[type=checkbox],input[type=radio]{width:24px;height:24px}
}
/* v15 pass 4 */
.pf-row{grid-template-columns:minmax(80px,150px) minmax(0,1fr) auto auto!important}
@media (max-width:900px){.an-lk .btn{min-width:44px!important}td>input[type=checkbox],td>input[type=radio]{width:24px;height:24px}}
@media (max-width:380px){.lo-band{height:auto!important;min-height:30px}.lo-band>div{padding:4px 1px;overflow-wrap:anywhere;word-break:break-word;font-size:8.5px!important}}
/* v15: modals on phones — full-height sheet, sticky header/footer, scrollable body, large close */
@media (max-width:900px){
  .modal header button{width:44px;height:44px}
  .modal{display:flex;flex-direction:column;max-height:100dvh}
  .modal header{position:sticky;top:0;background:#fff;z-index:2;padding:10px 12px 10px 16px}
  .modal .mb{flex:1;overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch}
  .modal footer{position:sticky;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));flex-wrap:wrap;border-radius:0}
  .modal footer .btn{flex:1 1 auto;min-height:44px}
}

/* rail adapts to the screen height — bottom group (My space, Settings) always visible */
@media (max-height:860px){.rail a[data-mod]{padding:6px 2px 5px;gap:3px;font-size:10px}.rail a[data-mod] svg{width:19px;height:19px}.rail .mark{width:42px;height:42px;margin-bottom:6px}.rail .mark img{width:42px;height:42px}}
@media (max-height:720px){.rail a[data-mod]{width:52px;height:38px;padding:0;justify-content:center}.rail a[data-mod] span{display:none}.rail a em{top:3px;inset-inline-end:4px}}

/* rail v2: even rhythm, thin dividers between groups, settings moved to the top bar */
.rail-top{justify-content:space-evenly;gap:2px;-webkit-mask-image:none;mask-image:none}
@media (max-height:600px){.rail-top{justify-content:flex-start;-webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}}
.rail-hr{display:block;flex:none;width:40px;height:1px;margin:7px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.rail-bot{padding-top:10px}
.rail-bot::before{inset-inline:22px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.ib#gearTop.on{background:var(--g1);border-color:var(--g3);color:var(--g8)}
@media (max-height:860px){.rail-hr{margin:5px 0}}
@media (max-height:720px){.rail-hr{margin:3px 0;width:32px}}
.ib#gearTop{width:auto;padding:0 12px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#43524C}
.ib#gearTop svg{width:18px;height:18px;flex:none}
@media (max-width:900px){.ib#gearTop{width:38px;padding:0;justify-content:center}.ib#gearTop span{display:none}}