/* «الحضور والانصراف» (attendance.js) — laptop and phone, light and dark. */
#att .st-P,.at-pop .st-P,.st-P{--c:#15803d;--s:rgba(22,163,74,.13)}
.st-A{--c:#dc2626;--s:rgba(220,38,38,.12)}.st-L{--c:#c2610c;--s:rgba(234,122,12,.14)}
.st-V{--c:#2563eb;--s:rgba(37,99,235,.12)}.st-S{--c:#7c3aed;--s:rgba(124,58,237,.12)}.st-M{--c:#475569;--s:rgba(71,85,105,.13)}
html.desk-dark .st-P,:root[data-theme="dark"] .st-P{--c:#4ade80;--s:rgba(74,222,128,.15)}
html.desk-dark .st-A,:root[data-theme="dark"] .st-A{--c:#f87171;--s:rgba(248,113,113,.16)}
html.desk-dark .st-L,:root[data-theme="dark"] .st-L{--c:#fb923c;--s:rgba(251,146,60,.16)}
html.desk-dark .st-V,:root[data-theme="dark"] .st-V{--c:#7aa7ff;--s:rgba(122,167,255,.16)}
html.desk-dark .st-S,:root[data-theme="dark"] .st-S{--c:#b79cff;--s:rgba(183,156,255,.16)}
html.desk-dark .st-M,:root[data-theme="dark"] .st-M{--c:#b4bfd6;--s:rgba(180,191,214,.14)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .st-P{--c:#4ade80;--s:rgba(74,222,128,.15)}:root:not([data-theme="light"]) .st-A{--c:#f87171;--s:rgba(248,113,113,.16)}
  :root:not([data-theme="light"]) .st-L{--c:#fb923c;--s:rgba(251,146,60,.16)}:root:not([data-theme="light"]) .st-V{--c:#7aa7ff;--s:rgba(122,167,255,.16)}
  :root:not([data-theme="light"]) .st-S{--c:#b79cff;--s:rgba(183,156,255,.16)}:root:not([data-theme="light"]) .st-M{--c:#b4bfd6;--s:rgba(180,191,214,.14)}
}
#att{--at-sh:var(--d-sh,0 1px 2px rgba(15,20,48,.05),0 2px 6px rgba(15,20,48,.04));--at-navy:#2B3484;--at-ring:#2B3484}
html.desk-dark #att,html.desk-dark .at-pop,:root[data-theme="dark"] #att,:root[data-theme="dark"] .at-pop{--at-ring:#8592ff}
#att .at-head{display:flex;align-items:flex-end;gap:16px;margin:8px 0 18px;flex-wrap:wrap}
#att .at-head h1{margin:0;font-size:26px;font-weight:600;color:var(--text)}
#att .at-head p{margin:6px 0 0;color:var(--muted);font-size:13.5px}
#att .at-tools{margin-inline-start:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#att .at-month{display:flex;align-items:center;gap:6px;background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:var(--at-sh)}
#att .at-month b{min-width:110px;text-align:center;font-size:14px;color:var(--text)}
#att .at-month button{all:unset;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
#att .at-month button:hover{background:var(--panel-bg)}
#att .dh-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
#att .at-k{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}
#att .at-k>div{background:var(--card-bg);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--at-sh)}
#att .at-k span{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}
#att .at-k b{display:block;font-size:26px;font-weight:600;color:var(--text);margin-top:6px}
#att .at-k b.c{color:var(--c)}
#att .at-k small{font-size:12px;font-weight:500;color:var(--muted)}
#att .at-legend{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;align-items:center}
#att .at-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:99px;padding:5px 12px;background:var(--s);color:var(--c)}
#att .at-legend .wk{margin-inline-start:auto;font-size:12.5px;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
#att .at-legend .wk i{display:inline-block;width:16px;height:16px;border-radius:5px;border:1px solid var(--line);background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(127,140,180,.22) 3px 5px)}
#att .at-card{background:var(--card-bg);border:1px solid var(--line);border-radius:16px;box-shadow:var(--at-sh);overflow:hidden}
#att .at-scroll{overflow-x:auto}
#att col.c-nm{width:160px}#att col.c-off{width:21px}#att col.c-mo{width:140px}
#att .at-t{border-collapse:separate;border-spacing:0;width:100%;min-width:1000px;table-layout:fixed;font-size:12.5px;font-weight:500;margin:0;background:none}
#att .at-t th,#att .at-t td{border:0;border-bottom:1px solid var(--line);padding:0;text-align:center;white-space:nowrap;color:var(--text);background-clip:padding-box}
#att .at-t thead th{background:var(--th-bg);font-weight:600;padding:9px 0 8px;font-size:12.5px;position:static}
#att .at-t thead th small{display:block;font-weight:500;color:var(--muted);font-size:10.5px;margin-top:3px}
#att .at-t thead th.go{cursor:pointer}#att .at-t thead th.go:hover{color:var(--at-ring)}
#att .at-t .nm{text-align:start;padding:10px 16px;border-inline-end:1px solid var(--line);overflow:hidden;text-overflow:ellipsis}
/* the names stay in sight when the month scrolls sideways (phones) */
#att .at-t .nm{position:sticky;inset-inline-start:0;z-index:2;background-color:var(--card-bg)}
#att .at-t thead .nm{background-color:var(--th-bg)}#att .at-t tfoot .nm{background-color:var(--panel-bg)}
#att .at-t thead .nm,#att .at-t thead .mo{font-size:12.5px;color:var(--muted);font-weight:600}
#att .at-t td.nm b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis}
#att .at-t td.nm small{color:var(--muted);font-size:11.5px;font-weight:500}
#att .at-t td.nm.ed{cursor:pointer}#att .at-t td.nm.ed:hover b{color:var(--at-ring)}
#att .at-t tr.out td.nm b{color:var(--muted)}
#att .at-t td.d{height:54px}
#att .at-t .off{background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(127,140,180,.10) 4px 7px)}
#att .at-t th.off{color:var(--muted);font-weight:500;font-size:10.5px;padding-top:12px}
#att .at-t .today{background-color:rgba(133,146,255,.10)}
#att .at-t th.today{color:var(--at-ring);box-shadow:inset 0 -3px 0 var(--at-ring);font-weight:700}
#att .at-cell{all:unset;box-sizing:border-box;width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;background:var(--s);color:var(--c);transition:transform .12s;vertical-align:middle}
#att .at-cell svg{width:13px;height:13px}
#att button.at-cell{cursor:pointer}#att button.at-cell:hover{transform:scale(1.12)}
#att button.at-cell:focus-visible{outline:2px solid var(--at-ring);outline-offset:2px}
#att .at-cell.empty{border:1.5px dashed var(--line);background:none}
#att button.at-cell.empty:hover{border-color:var(--at-ring)}
#att .at-cell.fut{opacity:0}#att td:hover .at-cell.fut,#att .at-cell.fut:focus-visible,#att .at-cell.fut.sel{opacity:.85}
#att .at-cell.sel{box-shadow:0 0 0 2px var(--card-bg),0 0 0 4px var(--at-ring);transform:scale(1.12)}
#att .at-cell .dot{position:absolute}
#att .at-cell.has-note{position:relative}
#att .at-cell.has-note::after{content:"";position:absolute;top:-3px;inset-inline-end:-3px;width:7px;height:7px;border-radius:50%;background:var(--at-ring);border:1.5px solid var(--card-bg)}
#att .at-t .mo{border-inline-start:1px solid var(--line);padding:8px 14px;text-align:start}
#att .at-t td.mo .r{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
#att .at-t td.mo .r i{flex:1;height:6px;border-radius:9px;background:var(--line);overflow:hidden}
#att .at-t td.mo .r i::after{content:"";display:block;height:100%;width:var(--w);background:#16a34a;border-radius:9px}
#att .at-t td.mo small{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:5px;font-size:11.5px;font-weight:500;color:var(--muted)}
#att .at-t td.mo small em{font-style:normal;color:var(--c);font-weight:600}
#att .at-t tfoot td{border-bottom:0;background:var(--panel-bg);height:40px;font-size:12px;font-weight:600;color:var(--muted)}
#att .at-t tfoot td.nm{font-size:12.5px;font-weight:500}
#att .at-t tfoot td.full{color:#16a34a}
html.desk-dark #att .at-t tfoot td.full,:root[data-theme="dark"] #att .at-t tfoot td.full{color:#4ade80}
#att .at-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;color:var(--muted);font-size:12.5px;font-weight:500;border-top:1px solid var(--line)}
#att .at-foot b{color:var(--text)}
#att .at-empty{padding:40px 16px;text-align:center;color:var(--muted)}
/* the picker beside a day */
.at-pop{position:absolute;z-index:1200;width:264px;box-sizing:border-box;background:var(--card-bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 50px -14px rgba(15,20,48,.45);padding:14px;color:var(--text);--at-ring:#2B3484}
.at-pop h4{margin:0 0 10px;font-size:14px;color:var(--text)}
.at-pop h4 small{display:block;color:var(--muted);font-weight:500;font-size:11.5px;margin-top:3px}
.at-pop .g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.at-pop .g button{all:unset;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:12px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid transparent;background:var(--s);color:var(--c)}
.at-pop .g button svg{width:18px;height:18px}
.at-pop .g button.on{border-color:var(--c)}
.at-pop .g button[disabled]{opacity:.3;cursor:not-allowed}
.at-pop label{display:block;margin-top:10px;font-size:12px;font-weight:500;color:var(--muted)}
.at-pop input{width:100%;box-sizing:border-box;margin:4px 0 0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--input-bg);color:var(--text);font:inherit;font-size:13px}
.at-pop .row{display:flex;gap:8px}.at-pop .row label{flex:1}
.at-pop .act{display:flex;gap:8px;margin-top:12px}
.at-pop .act button{all:unset;flex:1;text-align:center;padding:9px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer}
.at-pop .act .p{background:#2B3484;color:#fff}.at-pop .act .p[disabled]{opacity:.45;cursor:not-allowed}
.at-pop .act .s{border:1px solid var(--line);color:var(--text)}
.at-pop .who{margin-top:10px;font-size:11px;font-weight:500;color:var(--muted)}
.at-pop .err{margin-top:8px;font-size:12px;font-weight:500;color:#dc2626}
.at-pop::after{content:"";position:absolute;top:var(--ay);width:14px;height:14px;background:var(--card-bg);transform:translateY(-50%) rotate(45deg)}
.at-pop.to-l::after{right:-8px;border-right:1px solid var(--line);border-top:1px solid var(--line)}
.at-pop.to-r::after{left:-8px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.at-pop.mid::after{display:none}
/* add / edit a person */
.at-modal{position:fixed;inset:0;z-index:1250;background:rgba(10,14,40,.45);display:grid;place-items:center;padding:16px}
body.desk-on .at-modal{inset-inline-start:var(--d-side,0)}
.at-modal>div{width:min(380px,100%);box-sizing:border-box;background:var(--card-bg);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 30px 60px -20px rgba(10,14,40,.5);color:var(--text)}
.at-modal h3{margin:0 0 12px;font-size:17px}
.at-modal label{display:block;margin-top:10px;font-size:12.5px;font-weight:500;color:var(--muted)}
.at-modal input,.at-modal select{width:100%;box-sizing:border-box;margin:5px 0 0;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--input-bg);color:var(--text);font:inherit;font-size:14px}
.at-modal .chk{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px}
.at-modal .chk input{width:auto;margin:0}
.at-modal .act{display:flex;gap:8px;margin-top:16px}
.at-modal .act button{all:unset;flex:1;text-align:center;padding:10px;border-radius:11px;font-weight:600;font-size:14px;cursor:pointer}
.at-modal .act .p{background:#2B3484;color:#fff}.at-modal .act .s{border:1px solid var(--line);color:var(--text)}
.at-modal .err{margin-top:8px;font-size:12.5px;font-weight:500;color:#dc2626}
@media (max-width:900px){
  #att .at-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  #att .at-k>div:first-child{grid-column:1/-1}
  #att .at-head h1{font-size:22px}
  #att .at-legend .wk{margin-inline-start:0}
}

/* a smaller laptop (1280–1400px): narrower name and month columns so the whole month still fits */
@media (max-width:1400px){#att col.c-nm{width:132px}#att col.c-off{width:17px}#att col.c-mo{width:112px}#att .at-t{min-width:900px}#att .at-t .nm{padding:10px 12px}}