@media(max-width:800px){
 html{scroll-padding-top:70px}body{padding-bottom:env(safe-area-inset-bottom)}
 .mobile-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--p);border-bottom:1px solid var(--l)}
 .mobile-bar strong{flex:1}.mobile-bar button{min-height:44px;min-width:44px}
 .app>main{padding:12px 12px calc(85px + env(safe-area-inset-bottom))}
 .mobile-dock{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;gap:4px;padding:8px 5px calc(8px + env(safe-area-inset-bottom));background:var(--p);border-top:1px solid var(--l)}
 .mobile-dock button{flex:1;font-size:12px;min-height:48px;padding:6px;border:0}.mobile-dock button.on{color:var(--g);background:var(--p2)}
 .app .side.mobile-open{display:block;position:fixed;right:0;top:0;bottom:0;width:min(310px,85vw);height:100dvh;z-index:100;padding-top:65px;box-shadow:-8px 0 25px #0003}
 .mobile-shade{position:fixed;inset:0;z-index:99;background:#0008}.mobile-shade button{position:absolute;right:12px;top:12px;z-index:101}
 .modal{padding:0!important}.modal>.box{width:100%!important;max-height:100dvh!important;height:100dvh;border-radius:0;overflow-y:auto;padding:16px 12px calc(28px + env(safe-area-inset-bottom))}
 .modal .head{position:sticky;top:-16px;z-index:6;background:var(--p);padding:10px 0;flex-wrap:wrap}
 .modal .head h3{flex:1;min-width:120px;font-size:16px}.tabs{overflow-x:auto;flex-wrap:nowrap}
 .f input,.f select,.f textarea{font-size:16px}.btn{min-height:44px}.quick{grid-template-columns:1fr 1fr}.kpis{gap:8px}.card{padding:14px!important}
 .tbl{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.toast{bottom:85px!important;max-width:calc(100vw - 24px)}
}
@media(min-width:801px){.mobile-bar,.mobile-dock,.mobile-shade{display:none!important}}

@media(max-width:800px){
 body.mobile-menu-open{overflow:hidden}
 .mobile-bar{padding-top:calc(10px + env(safe-area-inset-top));box-shadow:0 3px 14px #10182808}
 .mobile-menu-close{display:block;width:100%;margin-bottom:18px}
 .app .side.mobile-open{padding-top:calc(18px + env(safe-area-inset-top))}
 .mobile-bar strong{min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-dock{box-shadow:0 -4px 20px #1018280a}
 .mobile-dock .on{box-shadow:inset 0 3px var(--g)}
 .top h2{font-size:21px}.top .actions{width:100%;justify-content:flex-end}
 .kpi b{font-size:23px;font-variant-numeric:tabular-nums}.kpi{min-width:0}
 .quick button{min-width:0;min-height:85px;font-size:15px}
 .grid2,.grid3,.photo-grid{min-width:0}.f{min-width:0}.f input,.f select{max-width:100%;min-width:0}
 .f input[type=file],input[type=file]{max-width:100%;font-size:14px}
 .f input[type=email],.f input[type=tel],.f input[type=number]{direction:ltr;text-align:right}
 .seg{gap:6px}.seg .btn{flex:1;white-space:nowrap;padding:8px;font-size:13px}
 .modal>.box{padding-top:calc(16px + env(safe-area-inset-top))}
 .modal .head .x{flex:none;min-width:44px}
 .modal .tabs button{min-height:48px}
 .modal .box>.btn{width:100%;margin-top:10px}
 .modal .box>.flex>.btn{flex:1;min-width:100px}
 .emp-table{border:0;overflow:visible}
 .emp-table table,.emp-table tbody{display:block;width:100%;min-width:0}
 .emp-table thead{display:none}
 .emp-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;border:1px solid var(--l);border-radius:14px;padding:14px;margin:12px 0;background:var(--p2);overflow:hidden}
 .emp-table td{display:block;position:static!important;padding:0;border:0;white-space:normal;overflow-wrap:anywhere;background:transparent!important}
 .emp-table td:nth-child(1){color:var(--m);align-self:center;font-size:13px;direction:ltr;text-align:right}
 .emp-table td:nth-child(2){grid-column:2;grid-row:1 / 3;align-self:center}
 .emp-table td:nth-child(3){grid-column:1;grid-row:3;font-size:13px}
 .emp-table td:nth-child(4){grid-column:1;grid-row:2;font-weight:900;font-size:17px}
 .emp-table td:nth-child(n+5){grid-column:1 / -1;font-size:13px;color:var(--m)}
 .emp-table td:nth-child(5)::before{content:'القسم: ';font-weight:bold}
 .emp-table td:nth-child(6)::before{content:'المسمى: ';font-weight:bold}
 .emp-table td[colspan]{grid-column:1 / -1}
 .public-wrap{padding:12px}.public-card{padding:16px;border-radius:16px}
 .public-card h2{font-size:20px}.public-card .brand{align-items:flex-start}.public-card .logo{flex-shrink:0}
 .public-card .upload-box input{width:100%;min-width:0}.public-card .ocrbox{overflow-wrap:anywhere}
 .public-card .ocrbox .btn{width:100%;margin:8px 0}.public-card .f{margin:8px 0}
 .login{padding:16px}.login .box{width:100%;max-width:460px;padding:22px}
}
@media(min-width:801px){.mobile-menu-close{display:none!important}}
@media(max-width:800px){
 body:has(.modal.on){overflow:hidden}
 .modal .grid2,.public-card .grid2{gap:0}
 .modal .f{margin:8px 0}
 #employees .grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 8px}
 #employees .grid3>.f:first-child{grid-column:1 / -1}
 #employees .f{margin:6px 0}
 #employees .f label{font-size:14px}
}