/* Admin staff section (أداء الموظفين): copied from the approved reference, everything scoped under .spf */
.spf{--card:#131722;--card2:#181d2a;--line:#232a3a;--txt:#e8ebf2;--mut:#8b93a7;--gold:#f5a524;--green:#22c55e;--red:#ef4444;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--txt);font-size:14px;min-width:0}
.spf *{box-sizing:border-box;margin:0;padding:0}
.spf b{font-weight:800}
.spf button,.spf select,.spf input{font-family:inherit;color:inherit}
.spf button{cursor:pointer}
.spf h3{font-size:16px;font-weight:800;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.spf h3 small{color:var(--mut);font-weight:400;font-size:12px}
.spf h3 .tools{display:flex;gap:14px;align-items:center}
.spf .muted{color:var(--mut)}
.spf .btn{padding:9px 16px;border-radius:9px;font-weight:700;font-size:13px;border:0}
.spf .btn.g{background:var(--gold);color:#1a1200}
.spf .btn.o{background:transparent;border:1px solid var(--line);color:var(--txt)}
.spf .btn.o:hover{border-color:#3a4256}
.spf .btn:disabled{opacity:.5;cursor:wait}
.spf .md{font-size:22px}
/* period bar */
.spf .pbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#0f141d;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.spf .seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:3px}
.spf .seg button{padding:7px 14px;border-radius:8px;font-size:13px;color:var(--mut);background:none;border:0;white-space:nowrap}
.spf .seg button:hover{color:var(--txt)}
.spf .seg .on{background:var(--card2);color:var(--txt);font-weight:700}
.spf .dr{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid #5a4210;border-radius:10px;padding:5px 8px}
.spf .dr label{font-size:12px;color:var(--mut)}
.spf .din{background:#0b0e15;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--txt);direction:ltr;min-width:118px;display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative}
.spf .din input[type=text]{background:none!important;border:0!important;box-shadow:none!important;outline:0;width:84px;padding:0;font-size:13px;color:var(--txt);direction:ltr}
.spf .din button{background:none;border:0;padding:0;font-size:13px;line-height:1}
.spf .din .pick{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;color-scheme:dark}
.spf .din:focus-within{border-color:#5a4210}
.spf .sel{background:#0b0e15;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;color:var(--txt);min-width:140px;width:auto;color-scheme:dark}
.spf .din:focus,.spf .sel:focus{border-color:#5a4210!important;box-shadow:none!important;outline:0}
.spf .rng{font-size:12px;color:var(--gold);margin-inline-start:auto}
.spf .msg{color:var(--mut);padding:24px;text-align:center;border:1px dashed var(--line);border-radius:12px}
/* employee cards */
.spf .staff2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(560px,100%),1fr));gap:14px}
.spf .c2{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.spf .c2.wait{border-color:#2f3b57}
.spf .c2 .hd2{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.spf .c2 .hd2 .md{font-size:26px}.spf .c2 .hd2 .nm{flex:1;min-width:0}.spf .c2 .hd2 .nm b{font-size:18px;display:block}.spf .c2 .hd2 .nm span{font-size:12px}
.spf .shift{font-size:12px;padding:5px 12px;border-radius:999px;background:#1d2433;border:1px solid #2f384d;color:#cbd5e1;white-space:nowrap}
.spf .sec{font-size:12px;color:var(--mut);margin:14px 0 8px;display:flex;align-items:center;gap:8px}.spf .sec:after{content:"";flex:1;height:1px;background:var(--line)}
.spf .gr{display:grid;gap:8px}.spf .g3{grid-template-columns:repeat(3,1fr)}.spf .g4{grid-template-columns:repeat(4,1fr)}.spf .g5{grid-template-columns:repeat(5,1fr)}
.spf .gr[hidden]{display:none}
.spf .bx{background:#0f141d;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.spf .bx small{display:block;color:var(--mut);font-size:11px;margin-bottom:3px}.spf .bx b{font-size:19px}.spf .bx em{font-style:normal;font-size:11px;color:var(--mut);display:block;margin-top:2px}
.spf .bx.v{background:linear-gradient(180deg,#221b35,#171428);border-color:#3b2f63}.spf .bx.v small{color:#b8a9e6}.spf .bx.v b{color:#e9dcff}
.spf .bx.big b{font-size:24px}
.spf .gG{color:#4ade80}.spf .gY{color:#facc15}.spf .gR{color:#f87171}.spf .gB{color:#60a5fa}
.spf .tag2{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;margin-right:6px}
.spf .tR{background:#3a1216;color:#fca5a5}.spf .tG{background:#0f2d1c;color:#4ade80}.spf .tB{background:#0d2340;color:#93c5fd}
/* 24h timeline, always 00 on the left */
.spf .tl3{position:relative;margin-top:6px}
.spf .tl3 .track{position:relative;height:16px;border-radius:6px;background:#262d3f;overflow:hidden;direction:ltr}
.spf .tl3 .sh{position:absolute;top:0;bottom:0;background:rgba(96,165,250,.14);border-left:2px dashed #60a5fa;border-right:2px dashed #60a5fa}
.spf .tl3 .seg{position:absolute;top:3px;bottom:3px;border-radius:3px}
.spf .tl3 .ax{display:flex;justify-content:space-between;direction:ltr;color:var(--mut);font-size:10px;margin-top:4px}
.spf .lg3{display:flex;gap:14px;font-size:11px;color:var(--mut);margin-top:6px}.spf .lg3 i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-left:5px;vertical-align:middle}
@media(max-width:760px){
  .spf{padding:14px}
  .spf h3{flex-wrap:wrap}.spf h3 .tools{flex-wrap:wrap;gap:10px}
  .spf .pbar{gap:8px}.spf .seg{flex-wrap:wrap}.spf .seg button{padding:6px 10px}
  .spf .dr{flex-wrap:wrap}.spf .rng{margin-inline-start:0}
  .spf .c2{padding:14px}.spf .c2 .hd2{flex-wrap:wrap;row-gap:8px}.spf .c2 .hd2 .nm{flex:1 1 180px}.spf .shift{white-space:normal}
  .spf .g4{grid-template-columns:repeat(2,1fr)}.spf .g5,.spf .g3{grid-template-columns:repeat(3,1fr)}
}
/* Settings → work shifts form */
.shiftSettings .shiftRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.shiftSettings .shiftRow:last-child{border:0}.shiftSettings .shiftRow strong{min-width:90px}
.shiftSettings .shiftRow label{display:inline-flex;align-items:center;gap:6px;margin:0}
.shiftSettings .shiftRow .input{width:auto}.shiftSettings .offDays{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted)}

/* «📢 النشر والتسجيلات خلال الفترة»: same dark boxes, Telegram-blue top border */
.spf .bx.tg{border-top:3px solid #2aa3e0}
.spf .bx.tgClick{cursor:pointer}.spf .bx.tgClick:hover{filter:brightness(1.12)}
.spf .bx .tgHint{color:#6b7280;font-size:10.5px;margin-top:4px}
.spf .gTg{color:#4fb8ec}.spf .gGold{color:#f5a524}.spf .gY{color:#facc15}
.spf .newb{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:#0c2a4a;color:#7cc4ff}