:root{--ink:#16202a;--mute:#5b6773;--line:#d9dfe5;--bg:#f3f5f7;--card:#fff;--blue:#1e3a5f;--ok:#1b7f4b;--warn:#b26a00;--err:#b3261e}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 "Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
nav{background:var(--blue);color:#fff;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding:10px 20px}
nav a{color:#dbe6f3;text-decoration:none;padding:4px 0}nav a:hover,nav a.on{color:#fff;border-bottom:2px solid #fff}
nav .sp{flex:1}nav b{margin-right:8px}
main{max-width:1180px;margin:24px auto;padding:0 16px}
h1{font-size:1.5rem;margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:16px}
form.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
label{display:flex;flex-direction:column;font-size:.85rem;color:var(--mute);gap:4px}
input,select,button,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
button,.btn{background:var(--blue);color:#fff;border:0;cursor:pointer;text-decoration:none;display:inline-block;padding:8px 14px;border-radius:4px}
button.sm{padding:3px 8px;font-size:.8rem}button.g{background:var(--ok)}button.r{background:var(--err)}button.l{background:#eef1f4;color:var(--ink)}
:focus-visible{outline:3px solid #7aa7d9;outline-offset:1px}
.tbl{width:100%;border-collapse:collapse;background:var(--card)}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
.tbl th{font-size:.85rem;color:var(--mute);font-weight:600}.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.tag{padding:2px 8px;border-radius:10px;font-size:.8rem;color:#fff}
.tag.approved{background:var(--ok)}.tag.pending{background:var(--warn)}.tag.rejected{background:var(--err)}
.sum{display:flex;gap:24px;margin-bottom:16px}.sum div{font-size:.85rem;color:var(--mute)}.sum b{display:block;font-size:1.6rem;color:var(--ink)}
.msg{padding:10px 14px;border-radius:4px;margin-bottom:12px}.msg.ok{background:#e3f4ea;color:var(--ok)}.msg.err{background:#fbe6e4;color:var(--err)}
.login{max-width:340px;margin:12vh auto}.login form{display:flex;flex-direction:column;gap:12px}
.empty{color:var(--mute);padding:20px;text-align:center}
.inl{display:inline}
@media print{nav,.noprint,.msg{display:none!important}body{background:#fff}main{margin:0;max-width:none}.card{border:0;padding:0}}
/* OT form (matches the company sheet) */
.sheet.apc{min-width:1000px}
.sheet{background:#fff;border:1px solid var(--line);padding:14px;margin-bottom:24px;font-family:Arial,Tahoma,sans-serif;font-size:11px;color:#000;overflow-x:auto}
.grid{width:100%;border-collapse:collapse;table-layout:fixed}
.grid th,.grid td{border:1.5px solid #000;padding:2px 3px;text-align:center;font-size:10px;vertical-align:middle;overflow:hidden}
.grid th{background:#fff;font-weight:bold}.grid tr.grp th{background:#d3d3d3;font-size:10px}
.grid tr.d td{height:26px;font-size:11px}.grid td.gy{background:#d3d3d3}.grid td.big{font-size:14px;font-weight:normal}
footer{display:flex;gap:26px;margin-top:14px;align-items:flex-start}
.leg{border-collapse:collapse;font-size:10px}.leg th,.leg td{border:1.5px solid #000;padding:1px 6px}.leg th{background:#d3d3d3}.leg td:first-child{text-align:center;font-weight:bold}
footer>.leg{width:300px}.mid{width:230px}.mid .leg{width:100%;margin-bottom:10px}
.hr{border:1.5px solid #000;height:88px;padding:4px 6px;text-align:left}
.appr{flex:1;border:1.5px solid #000}.ah{background:#d3d3d3;display:grid;grid-template-columns:1fr 1fr;padding:2px 20px;font-size:12px}.ah span:first-child{text-align:center}.ah span:last-child{text-align:left}
.appr .ar{display:grid;grid-template-columns:1fr 36%;border-top:1.5px solid #000}
.appr .ar .c1{padding:2px 8px 0;border-right:3px solid #000}.appr .ar .c2{padding:2px 6px 0}
.appr .ar .l1{font-size:10px;text-align:right}.appr .ar .l2{font-size:10px;text-align:left}.appr .ar .c2 .l2{font-weight:bold}
.appr .ar b{display:block;text-align:left;font-size:12px;border-bottom:1px solid #000;padding-bottom:2px}
@page{size:A4 landscape;margin:7mm}
@page ct{size:A4 portrait;margin:0}
@media print{
 .sheet{border:0;padding:0;margin:0;min-width:0!important;overflow:visible;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .sheet:last-of-type{break-after:auto}
 /* CT form font: the PC's own Simplified Arabic, or a copy in static/fonts (so it prints right on any PC) */
@font-face{font-family:"CT Simp";font-weight:normal;src:local("Simplified Arabic"),local("SimplifiedArabic"),url("fonts/simpo.ttf") format("truetype")}
@font-face{font-family:"CT Simp";font-weight:bold;src:local("Simplified Arabic Bold"),local("SimplifiedArabic-Bold"),url("fonts/simpbdo.ttf") format("truetype")}
.sheet.ct{page:ct}}
/* interactive bits */
dialog{border:0;border-radius:8px;padding:0;box-shadow:0 10px 40px rgba(0,0,0,.3);max-width:96vw}
dialog::backdrop{background:rgba(15,25,40,.45)}
dialog form{display:flex;flex-direction:column;gap:12px;padding:20px;min-width:min(420px,90vw)}
dialog h2{margin:0;font-size:1.2rem}dialog .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
dialog .acts{display:flex;gap:8px;justify-content:flex-end}
table.sortable th{cursor:pointer;user-select:none}table.sortable th:hover{color:var(--ink)}
input[type=search]{min-width:200px}
.tbl tr:hover td{background:#f7f9fb}
.mail{margin-bottom:20px}.mail h3{margin:0 0 4px;font-size:1.05rem}.mail .meta{color:var(--mute);font-size:.85rem;margin-bottom:8px}
.mail iframe{width:100%;height:380px;border:1px solid var(--line);background:#fff;margin:8px 0}
.mail summary{cursor:pointer;color:var(--blue)}
.prev input,.prev select{padding:4px 6px;font-size:.85rem;width:100%}.prev td{padding:4px}
.prev .w1{width:78px}.prev .w2{width:120px}.prev .w3{width:210px}
tr.dim td{opacity:.4}
.tag.new{background:var(--blue)}.tag.update{background:var(--warn)}.tag.already{background:#7a8794}
.savebar{position:sticky;bottom:0;background:var(--bg);padding:12px 0;display:flex;gap:12px;align-items:center}
.prev input[type=time]{min-width:104px}.prev input[type=date]{min-width:130px}
.muted{color:var(--mute);margin:0 0 12px}.btn.sm{padding:3px 8px;font-size:.8rem}a.btn.l{background:#eef1f4;color:var(--ink)}

.sheet .hd{direction:ltr;display:grid;grid-template-columns:200px 1fr 310px;align-items:center;row-gap:5px;margin-bottom:8px}
.sheet .hd img{grid-column:1;grid-row:1/5;width:190px;height:80px;align-self:start}
.sheet .t1,.sheet .t2{grid-column:2/4;text-align:center;font-weight:bold;font-size:13px}
.sheet .t1{grid-row:1}.sheet .t2{grid-row:2}
.sheet .sec{grid-column:2;grid-row:3;text-align:right;padding-right:8px}.sheet .dept{grid-column:3;grid-row:3;text-align:right}
.sheet .day{grid-column:2;grid-row:4;text-align:right;padding-right:8px}.sheet .dt{grid-column:3;grid-row:4;text-align:right}
.sheet .hd div{font-size:12px}

/* ---------- phase 1 additions ---------- */
.msg.warn{background:#fff4e0;color:#8a4b00}
small{color:var(--mute)}.sum small{display:block;font-size:.7rem}
.nowrap{white-space:nowrap}.lnk{cursor:pointer;color:var(--blue)}.h2{font-size:1.1rem;margin:20px 0 8px}
label.chk{flex-direction:row;align-items:center;gap:6px}
.ty{font-size:.72rem;font-weight:600;padding:1px 6px;border-radius:3px;background:#e6ebf1;color:#1e3a5f;white-space:nowrap}
.ty.Contractor{background:#f6e7d8;color:#7a3e00}.ty.CT{background:#e3f0e6;color:#1d5b2e}
.tag.waiting_times,.tag.waiting_confirm{background:#6b5bb5}
.tag.st-waiting_hr{background:#8a96a3}.tag.st-waiting_supervisor{background:var(--warn)}.tag.st-accepted_ask,.tag.st-accepted_plan{background:var(--ok)}.tag.st-rejected{background:var(--err)}
.flag{color:#8a4b00;font-size:.8rem;white-space:nowrap}.flag.err,.warnc{color:var(--err)}
tr.bad td{background:#fdecea!important}
.lv{padding:1px 6px;border-radius:3px}.lv.warn{background:#ffe2a8;color:#6a3d00}.lv.over{background:#f6c3be;color:#8c1d15;font-weight:600}
.limitbar .bar{position:relative;height:10px;background:#e8ecf0;border-radius:5px;margin-top:8px;overflow:hidden}
.limitbar .bar span{position:absolute;inset:0 auto 0 0;background:var(--ok)}.limitbar .bar span.warn{background:#e0a100}.limitbar .bar span.over{background:var(--err)}
.limitbar .bar i{position:absolute;top:0;bottom:0;width:2px;background:#6a3d00}
.apinfo{display:flex;flex-direction:column;gap:4px}
.decide{align-items:center}.decide form{display:inline}
button:disabled{opacity:.45;cursor:not-allowed}
.settings .card label{margin-bottom:10px}.settings h2{font-size:1.05rem;margin:0 0 10px}.settings{max-width:760px}
.chg div{font-size:.82rem}.info .msg{margin:6px 0 0}
dialog .info:empty{display:none}
/* ---------- contractor form (copied from Contractor_OT_Form.xlsx) ---------- */
.sheet.con{min-width:1000px;font-family:Arial,Tahoma,sans-serif}
.cx{width:100%;border-collapse:collapse;table-layout:fixed}
.cx td{padding:0 2px;vertical-align:middle;white-space:nowrap;overflow:hidden;font-size:10px;line-height:1.05}
.cx .c{text-align:center}.cx .l{text-align:left}.cx .r{text-align:right}.cx .b{font-weight:bold}
.cx .f8{font-size:7.2px}.cx .f9{font-size:8.1px}.cx .f10{font-size:9px}.cx .f11{font-size:9.9px}.cx .f12{font-size:10.8px}.cx .f14{font-size:12.6px}.cx .f16{font-size:14.4px}.cx .f20{font-size:18px}
.cx .yel{background:#ffff00}
.cx .ub{border-bottom:1px solid #000}.cx .ut{border-top:1px solid #000}
.cx .bx{border:1px solid #000}
.cx tr.grp td{background:#808080;color:#fff}
.cx tr.hdr td{text-align:center;font-weight:bold;font-size:7.2px;white-space:normal}
.cx tr.dat td{text-align:center;font-weight:bold;font-size:12.6px}
.cx tr.dat td.f12{font-size:10.8px}.cx tr.dat td.f8{font-size:7.2px}
.cx .blk{background:#000}
.cx .gh{background:#808080;color:#fff}
.cx .lg b{font-weight:bold}.cx .lg span{font-weight:normal}
.cx .hrt{border:1px solid #000;border-bottom:0}.cx .hrm{border-left:1px solid #000;border-right:1px solid #000}.cx .hrb{border:1px solid #000;border-top:0}
.cx .apph span{display:inline-block}.cx .apph{display:table-cell;text-align:left}.cx .apph span:first-child{float:left;padding-left:18px}.cx .apph span:last-child{float:right;padding-right:90px}
.cx .apM{border-right:1px solid #000}.cx .apN{border-left:1px solid #000}.cx .apb{border-bottom:1px solid #000}
.cx .aprow{display:flex;justify-content:flex-start;gap:28%;padding:0 12px}
.cx .aprow2{display:flex;gap:14%;padding:0 4px}
.cx .apn{text-align:left;direction:rtl;border-bottom:1px solid #000;unicode-bidi:plaintext}
.cx tr.top td{overflow:visible}.cx .n{font-weight:normal;font-size:.8em}
.cx td.lg{white-space:normal;line-height:1}
/* ---------- CT form (copied from CT_Additional_Training_Form.docx) ---------- */
/* CT form: an exact A4 page; positions in mm from the Word print of the original (see _form_ct.html) */
.sheet.ct{position:relative;width:210mm;height:297mm;box-sizing:border-box;padding:0;margin:0 auto 24px;overflow:hidden;
 font-family:"CT Simp","Simplified Arabic","Traditional Arabic",Arial,Tahoma,sans-serif;font-size:14pt;line-height:8.2mm;color:#000}
.sheet.ct .ca{position:absolute;white-space:nowrap;margin:0}
.sheet.ct .b{font-weight:bold}.sheet.ct .c{text-align:center}
.sheet.ct .u span,.sheet.ct .u{text-decoration:underline;text-decoration-thickness:0.72pt;text-underline-offset:2pt}
.sheet.ct .en{font-family:"CT Simp","Simplified Arabic",Arial,sans-serif}  /* the original uses Simplified Arabic for English too */
.sheet.ct .dots{overflow:hidden;font-size:8pt;line-height:4.7mm;letter-spacing:0.25mm;direction:ltr;text-align:left}
.sheet.ct .ct-grid{position:absolute;width:169.5mm;border-collapse:collapse;table-layout:fixed}
.sheet.ct .ct-grid th,.sheet.ct .ct-grid td{border:0.48pt solid #000;text-align:center;vertical-align:middle;padding:0 1mm;overflow:hidden}
.sheet.ct .ct-grid th{font-weight:bold;font-size:11pt;line-height:6.4mm}
.sheet.ct .ct-grid th .en{font-size:11pt}.sheet.ct .ct-grid th .sm{font-size:10pt;line-height:5.9mm}
.sheet.ct .ct-grid tr.h1{height:13.08mm}.sheet.ct .ct-grid tr.h2{height:13.1mm}
.sheet.ct .ct-grid tr.h1 th[rowspan]{vertical-align:middle}
.sheet.ct .ct-grid td{font-size:11pt;line-height:1.15;height:9.6mm}.sheet.ct .ct-grid tr.d1 td{height:8mm}
.sheet.ct .ct-grid td.bl{color:#002060;font-weight:bold}
.sheet.ct .ct-grid td.bl{font-family:Calibri,Arial,sans-serif}  /* day and date: Calibri Bold 11 pt, dark blue */
.sheet.ct .ct-grid td.no{text-align:right;padding-right:3mm}
@media print{.sheet.ct{margin:0;border:0}main:has(.sheet.ct){padding:0}}
@media print{.sheet.con,.sheet.apc{min-width:0}}
.prev select[name^=user]{min-width:220px}.prev select[name^=wt]{min-width:52px}.prev select[name^=code]{min-width:62px}
.tag.st-on_file{background:#5b7fa6}