/* አሚኮ ብራንድ — ቀለሞች እና ፊደል በዚህ አንድ ፋይል ብቻ ይቀየራሉ። */
/* የአሚኮ ብራንድ: ቀይ RGB(228,27,24) · ሰማያዊ RGB(47,42,133) · ሲያን RGB(0,152,152) */
@font-face{font-family:"Nokia Pure Headline";font-weight:700;font-display:swap;
  src:local("Nokia Pure Headline Bold"),local("NokiaPureHeadline-Bold"),local("Nokia Pure Headline");}
@font-face{font-family:"Nokia Pure Headline";font-weight:400;font-display:swap;
  src:local("Nokia Pure Headline Light"),local("NokiaPureHeadline-Light"),local("Nokia Pure Headline");}
/* የፊደል ፋይሎች ካሉዎት public/fonts/ ውስጥ አስገብተው እዚህ ይጨምሩ:
   src: url("/fonts/NokiaPureHeadline-Bold.woff2") format("woff2"), local(...); */
:root{
  --brand-red:#E41B18; --brand-blue:#2F2A85; --brand-cyan:#009898;
  --brand-blue-dark:#221E66;
  --font-head:"Nokia Pure Headline","Noto Sans Ethiopic","Nyala",system-ui,sans-serif;
  --font-body:"Noto Sans Ethiopic","Nyala",system-ui,sans-serif;
  --pri:var(--brand-blue);--pri2:var(--brand-blue-dark);--warn:#b9770e;--bad:var(--brand-red);--acc:var(--brand-cyan);
}
h1,h2,h3,.pop h3,.stat b,nav button.on{font-family:var(--font-head);font-weight:700}
body{font-family:var(--font-body);font-size:var(--b-f,16px)}
header{border-bottom:4px solid var(--brand-red)}
nav button.on{border-color:var(--brand-cyan);color:var(--brand-blue)}
.btn.sec{background:#e6f5f5;color:var(--brand-blue)}
.btn.bad{background:var(--brand-red)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-cyan);border-color:var(--brand-cyan)}
h2{color:var(--brand-blue)}
.emp:active{background:#e6f5f5}

/* =====================================================================
   ዘመናዊ የእይታ ንብርብር (v2) — አሰራሩ አይቀየርም፤ ይህ ክፍል መልኩን ብቻ ነው የሚቀይረው።
   ===================================================================== */
:root{
  --bg:#f2f4fa;--card:#fff;--ink:#141a33;--mut:#68718f;--line:#e4e8f3;
  --sh1:0 1px 2px rgba(20,26,51,.05),0 4px 14px rgba(20,26,51,.06);
  --sh2:0 10px 30px rgba(34,30,102,.16);
  --ok:#0f9d6b;--okbg:#e3f6ee;--late:#b9770e;--latebg:#fff1d6;--badbg:#fde8e7;--inbg:#e8ecfc;
  --r:16px;
}
@media (prefers-color-scheme:dark){
html:not([data-theme=light]){--bg:#0e1124;--card:#171b35;--ink:#e9ecf8;--mut:#9aa3c4;--line:#262c4f;--sh1:0 1px 2px rgba(0,0,0,.4);
    --okbg:#0d3a2c;--latebg:#3d2e0b;--badbg:#431a19;--inbg:#1c2551}
html:not([data-theme=light]) input,html:not([data-theme=light]) select,html:not([data-theme=light]) textarea,html:not([data-theme=light]) dialog,html:not([data-theme=light]) .pop,html:not([data-theme=light]) .stat,html:not([data-theme=light]) .emp,html:not([data-theme=light]) nav{background:var(--card)!important;color:var(--ink)}
html:not([data-theme=light]) th{background:#1b2040!important}
html:not([data-theme=light]) .msg.ok{background:#0d3a2c;color:#9be8c8}
html:not([data-theme=light]) .msg.err{background:#431a19;color:#ffb4ae}
html:not([data-theme=light]) .msg.info{background:#3d2e0b;color:#ffd990}
html:not([data-theme=light]) .btn.sec{background:#222850!important;color:#cfd6ff!important}
html:not([data-theme=light]) .t-ok{background:var(--okbg)!important;color:#7be0b8!important}
html:not([data-theme=light]) .t-late{background:var(--latebg)!important;color:#ffcf75!important}
html:not([data-theme=light]) .t-abs{background:var(--badbg)!important;color:#ff9f98!important}
html:not([data-theme=light]) .t-in{background:var(--inbg)!important;color:#aab8ff!important}
html:not([data-theme=light]) .t-mut{background:#222850!important}
}
body{background:var(--bg);background-image:radial-gradient(900px 380px at 100% -80px,rgba(0,152,152,.10),transparent 70%),radial-gradient(700px 320px at -10% -60px,rgba(47,42,133,.10),transparent 70%);background-repeat:no-repeat;line-height:1.5;font-size:15px}
header{background:linear-gradient(120deg,#221E66 0%,#2F2A85 55%,#3a3396 100%);border-bottom:0;padding:var(--h-y,14px) var(--h-x,18px);position:relative;box-shadow:var(--sh2)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--brand-red),var(--brand-red) 62%,var(--brand-cyan) 62%)}
header>div:first-child{display:flex;flex-direction:column;padding-left:50px;position:relative;min-height:40px;justify-content:center}
header>div:first-child::before{content:"";position:absolute;left:0;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:12px;background:#e41f26 url(/icon.svg) center/92% no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.35)}
header h1{font-size:var(--h-f,18px);letter-spacing:.2px}
header .sub{opacity:.85;font-size:calc(var(--h-f,18px)*.68)}
header a{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);border-radius:99px;padding:8px 14px;font-weight:600;transition:.15s}
header a:hover{background:rgba(255,255,255,.22)}
nav{gap:6px;padding:8px 10px;background:rgba(255,255,255,.86)!important;backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(20,26,51,.05);scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{flex:0 0 auto;min-width:0;padding:var(--n-y,9px) 16px;font-size:var(--n-f,14px);border-radius:99px;border:0;font-weight:600;color:var(--mut);transition:.15s}
nav button:hover{background:rgba(47,42,133,.07);color:var(--brand-blue)}
nav button.on{background:var(--brand-blue);color:#fff!important;border:0!important;box-shadow:0 4px 12px rgba(47,42,133,.35)}
nav #mypw{margin-left:auto}
main{padding:18px 16px 40px;max-width:var(--p-w,1100px)}
.card{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);padding:var(--c-p,20px);animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h2{font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--brand-blue)}
@media (prefers-color-scheme:dark){
html:not([data-theme=light]) h2{color:#b9c2ff}
}
.btn{border-radius:12px;background:linear-gradient(135deg,#2F2A85,#3b35a6);box-shadow:0 3px 10px rgba(47,42,133,.28);transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover{filter:brightness(1.08);box-shadow:0 6px 16px rgba(47,42,133,.32)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.sec{box-shadow:none;background:#eceffb;color:var(--brand-blue)}
.btn.bad{background:linear-gradient(135deg,#E41B18,#c41411);box-shadow:0 3px 10px rgba(228,27,24,.28)}
input,select,textarea{border:1.5px solid var(--line);border-radius:12px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-cyan);box-shadow:0 0 0 4px rgba(0,152,152,.15)}
.msg{border-radius:12px;border:1px solid transparent}
.msg.ok{background:var(--okbg);color:#0b5a41;border-color:rgba(15,157,107,.2)}
.msg.err{background:var(--badbg);border-color:rgba(228,27,24,.18)}
.msg.info{background:var(--latebg);border-color:rgba(185,119,14,.2)}
/* ሰንጠረዥ */
.wrap{border:1px solid var(--line);border-radius:12px;max-height:68vh;overflow:auto}
table{font-size:13.5px;border-collapse:separate;border-spacing:0}
th{position:sticky;top:0;z-index:1;background:#f6f8fd;text-transform:none;font-size:12.5px;letter-spacing:.2px;padding:11px 10px;border-bottom:1px solid var(--line)}
td{padding:var(--t-y,10px) 10px;border-bottom:1px solid var(--line)}
tbody tr:hover td,tr:hover>td{background:rgba(47,42,133,.04)}
tr:last-child>td{border-bottom:0}
.tag{padding:3px 10px;font-weight:600;font-size:12px;position:relative}
.t-ok{background:var(--okbg);color:#0b5a41}.t-late{background:var(--latebg);color:#8a5a00}.t-abs{background:var(--badbg);color:#a3271f}.t-in{background:var(--inbg);color:#1a47a0}
/* ቁጥሮች (stats) */
.stats{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px}
.stat{position:relative;overflow:hidden;border-radius:14px;padding:14px 14px 12px;box-shadow:var(--sh1);border:1px solid var(--line);transition:transform .15s}
.stat:hover{transform:translateY(-2px)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand-blue)}
.stat:nth-child(2)::before{background:var(--ok)}.stat:nth-child(3)::before{background:var(--brand-cyan)}.stat:nth-child(4)::before{background:#7a86b8}
.stat:nth-child(5)::before{background:#e0962a}.stat:nth-child(6)::before{background:var(--brand-red)}.stat:nth-child(7)::before{background:#8b5cf6}
.stat b{font-size:30px;font-variant-numeric:tabular-nums}
.stat span{font-weight:600}
.stat i{position:absolute;right:10px;top:8px;font-style:normal;font-size:22px;opacity:.5}
/* ዳሽቦርድ ቀለበት + ግራፍ */
.hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-bottom:14px}
.ring{--p:0;width:116px;height:116px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),#e7ebf6 0);display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px var(--line)}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--card)}
.ring b{position:relative;font-size:26px;font-family:var(--font-head)}.ring small{position:relative;display:block;font-size:11px;color:var(--mut);margin-top:-4px;text-align:center}
.ring>div{position:relative;text-align:center}
.bars{display:flex;align-items:flex-end;gap:8px;height:96px;padding-top:6px}
.bars .bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:11px;color:var(--mut)}
.bars .bar i{display:block;width:100%;max-width:38px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--brand-cyan),var(--brand-blue));min-height:3px;transition:height .5s}
.bars .bar b{font-size:11px;color:var(--ink)}
.hbar{height:8px;border-radius:99px;background:#e9edf8;overflow:hidden;min-width:70px}.hbar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-cyan),var(--brand-blue))}
.hbar.late>i{background:linear-gradient(90deg,#f0b34a,#e0962a)}.hbar.abs>i{background:linear-gradient(90deg,#ff7a72,var(--brand-red))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--sh1)}
.kpi span{font-size:12px;color:var(--mut);font-weight:600}.kpi b{display:block;font-size:26px;font-family:var(--font-head);margin-top:2px}.kpi small{color:var(--mut)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:99px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.chip:hover,.chip.on{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.two>.card{margin-bottom:14px}
.rank{display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px}.rank:last-child{border:0}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--brand-blue)}
/* ኪዮስክ */
.clock .t{font-size:56px;letter-spacing:1px;background:linear-gradient(120deg,var(--brand-blue),var(--brand-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.clock .d{font-weight:600}
#fcVideo{box-shadow:0 14px 40px rgba(34,30,102,.28);border:4px solid #fff}
#fcRing{border-radius:20px!important;transition:border-color .2s,box-shadow .2s;inset:-2px!important}
#fcSay{border-radius:14px;font-weight:700;margin-top:14px}
.pop{border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:pop .28s cubic-bezier(.2,1.4,.4,1) both;position:relative;overflow:hidden}
.pop::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--brand-blue)}
.pop.ok::before{background:var(--ok)}.pop.late::before{background:#e0962a}.pop.err::before{background:var(--brand-red)}
.pop .ic{filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.pop.ok .ic{animation:tick .5s ease both}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes tick{from{transform:scale(.4) rotate(-20deg)}to{transform:none}}
.overlay{backdrop-filter:blur(6px);background:rgba(14,17,36,.62)}
dialog{border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.emp{border-radius:16px;box-shadow:var(--sh1);transition:.15s}.emp:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.hint{color:var(--mut)}
@media (max-width:700px){
  .two{grid-template-columns:1fr}.hero{grid-template-columns:1fr;justify-items:center}
  nav{padding:6px 8px}nav button{padding:9px 13px}
  .clock .t{font-size:44px}
}
/* ህትመት (Print / PDF) */
.printhead{display:none}
@media print{
  body{background:#fff!important;background-image:none!important;color:#000}
  header,nav,.noprint,.btn,.chips,#rMsg,.hint{display:none!important}
  .printhead{display:block;margin-bottom:12px}
  .card{box-shadow:none;border:0;padding:0;animation:none;break-inside:auto}
  .wrap{max-height:none!important;overflow:visible!important;border:0}
  th{position:static;background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table{font-size:10.5px}td,th{padding:4px 5px;white-space:normal}
  .tag,.hbar,.hbar>i,.bars .bar i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4 landscape;margin:12mm}
}
/* ገጽ-ማድረጊያ (10 / 50 / ሁሉም) */
.pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 10px;font-size:13px;color:var(--mut)}
.pager label{margin:0;font-size:13px}.pager select{width:auto;padding:6px 10px;border-radius:10px}
.pager [data-pgi]{font-weight:700;color:var(--ink);min-width:90px;text-align:center}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* =================== ተጨማሪ ዘመናዊ ክፍሎች (v3) =================== */
.skel-card{pointer-events:none}
.skel{height:14px;border-radius:8px;margin:12px 0;background:linear-gradient(90deg,rgba(120,130,170,.12) 25%,rgba(120,130,170,.28) 37%,rgba(120,130,170,.12) 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite}
.skel.w40{width:40%}.skel.w60{width:60%}.skel.w80{width:80%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{background:var(--inbg);color:var(--brand-blue);border-radius:99px;padding:4px 11px;font-size:12.5px;font-weight:600}.pill.mut{background:#eceffb;color:var(--mut)}
@media (prefers-color-scheme:dark){
html:not([data-theme=light]) .pill{color:#b9c2ff}
html:not([data-theme=light]) .pill.mut{background:#222850}
}
.prof-h{display:flex;gap:14px;align-items:center}
.avatar{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));color:#fff;display:grid;place-items:center;font:700 24px var(--font-head);box-shadow:var(--sh1)}
.dots{display:flex;flex-wrap:wrap;gap:5px}.dot{display:inline-block;width:16px;height:16px;border-radius:5px}
dialog{max-width:640px}
/* ኪዮስክ: ሞላላ የፊት መመሪያ + የእርምጃ ነጥቦች */
.oval{position:absolute;left:50%;top:50%;width:56%;height:86%;transform:translate(-50%,-50%);border:3px dashed rgba(255,255,255,.75);border-radius:50%;pointer-events:none;box-shadow:0 0 0 999px rgba(14,17,36,.32);transition:border-color .2s}
.oval.act{border-style:solid;border-color:#00c2c2;animation:pulse 1.2s ease-in-out infinite}
.oval.good{border-style:solid;border-color:#27d17f}.oval.bad{border-style:solid;border-color:#ff5a52}
@keyframes pulse{50%{box-shadow:0 0 0 999px rgba(14,17,36,.32),0 0 22px 4px rgba(0,194,194,.55)}}
#fcRing{overflow:hidden}
.camwrap{overflow:hidden}
.steps{display:flex;align-items:center;justify-content:center;gap:0;margin:12px 0 0;min-height:0}
.steps:empty{display:none}
.steps i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--font-head);font-style:normal;background:#e3e7f6;color:var(--mut);transition:.25s}
.steps i.now{background:var(--brand-blue);color:#fff;box-shadow:0 0 0 5px rgba(47,42,133,.2);transform:scale(1.1)}
.steps i.done{background:var(--ok);color:#fff}
.steps b{width:34px;height:3px;background:#d3d8ee;margin:0 4px;border-radius:3px}
/* የኪዮስክ ጨለማ ገጽታ */
body.kiosk{background:#0b0e24;background-image:radial-gradient(800px 420px at 50% -80px,rgba(0,152,152,.22),transparent 70%),radial-gradient(700px 400px at 100% 100%,rgba(47,42,133,.35),transparent 70%);color:#e9ecf8}
body.kiosk .card{background:rgba(23,27,53,.88);border-color:#262c4f;box-shadow:0 18px 50px rgba(0,0,0,.4)}
body.kiosk h2{color:#b9c2ff}body.kiosk .hint,body.kiosk .clock .d{color:#9aa3c4}
body.kiosk .clock .t{background:linear-gradient(120deg,#fff,#7ee3e3);-webkit-background-clip:text;background-clip:text}
body.kiosk input{background:#0f1330;color:#fff;border-color:#2b3260}
body.kiosk .btn.sec{background:#222850;color:#cfd6ff}
body.kiosk .msg.info{background:#1d2547;color:#e9ecf8;border-color:#2b3260}
body.kiosk .msg.err{background:#431a19;color:#ffb4ae}body.kiosk .msg.ok{background:#0d3a2c;color:#9be8c8}
body.kiosk #fcVideo{border-color:#262c4f}
body.kiosk .emp{background:#171b35;color:#e9ecf8;border-color:#262c4f}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:3px solid rgba(0,152,152,.55);outline-offset:2px}
dialog .kpis{grid-template-columns:repeat(5,1fr);gap:8px}dialog .kpi{padding:10px}dialog .kpi b{font-size:21px}dialog .kpi span{font-size:11px}
@media (max-width:560px){dialog .kpis{grid-template-columns:repeat(3,1fr)}}

/* =================== የመጨረሻ ዘመናዊ ንብርብር (v4) =================== */
html{scroll-behavior:smooth}
::selection{background:rgba(0,152,152,.28)}
*{scrollbar-width:thin;scrollbar-color:rgba(100,110,160,.4) transparent}
body{font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
/* መግቢያ */
.card.login{max-width:410px;margin:34px auto 12px;padding:0 26px 26px;overflow:hidden;position:relative;box-shadow:var(--sh2)}
.card.login::before{content:"";display:block;height:92px;margin:0 -26px 0;background:linear-gradient(120deg,#221E66,#2F2A85 55%,#17a0a0);}
.lg-emblem{width:78px;height:78px;margin:-40px auto 10px;border-radius:24px;background:#e41f26 url(/icon.svg) center/84% no-repeat;border:5px solid var(--card);box-shadow:0 10px 28px rgba(34,30,102,.35);position:relative}
.card.login h2{justify-content:center;font-size:21px;margin:4px 0 2px}
.lg-sub{text-align:center;color:var(--mut);font-size:13.5px;margin:0 0 14px}
.pwbox{position:relative}.pwbox input{padding-right:46px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:18px;cursor:pointer;padding:8px;border-radius:10px;opacity:.7}
.eye:hover{opacity:1;background:rgba(47,42,133,.08)}
.remember{display:flex;gap:8px;align-items:center;color:var(--ink);margin-top:12px;font-size:13.5px}
.foot{text-align:center;color:var(--mut);font-size:12.5px;margin:10px 0 0}
/* አሰሳ: አዶዎች */
nav button[data-t]::before{margin-right:6px;font-size:14px}
nav button[data-t=dash]::before{content:"📊"}nav button[data-t=emps]::before{content:"👥"}nav button[data-t=rep]::before{content:"📈"}
nav button[data-t=leave]::before{content:"🌴"}nav button[data-t=ev]::before{content:"🔔"}nav button[data-t=fix]::before{content:"🛠"}nav button[data-t=set]::before{content:"⚙️"}
nav{justify-content:flex-start}
/* ካርዶች */
.card{transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 2px 4px rgba(20,26,51,.05),0 12px 30px rgba(20,26,51,.09)}
h2::before{content:"";width:5px;height:18px;border-radius:4px;background:linear-gradient(var(--brand-red),var(--brand-cyan));flex:0 0 5px}
.card.login h2::before{display:none}
.stat i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(47,42,133,.07);opacity:1;font-size:18px;right:10px;top:10px}
tbody tr:nth-child(even) td{background:rgba(47,42,133,.018)}
th{backdrop-filter:blur(6px)}
.btn{letter-spacing:.2px}
.btn.sec:hover{background:#dde3f7}
.btn:focus-visible{outline-offset:3px}
.tag{border:1px solid rgba(0,0,0,.04)}
/* ኪዮስክ */
body.kiosk::before{content:"";position:fixed;inset:-20% -10% auto -10%;height:60vh;background:radial-gradient(closest-side,rgba(0,194,194,.18),transparent 70%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none;z-index:0}
body.kiosk main,body.kiosk header{position:relative;z-index:1}
@keyframes drift{from{transform:translateX(-4%)}to{transform:translateX(8%)}}
body.kiosk .clock .t{font-size:clamp(34px,10vw,62px);white-space:nowrap;text-shadow:0 8px 40px rgba(0,194,194,.35)}
body.kiosk main a{color:#7ee3e3}
body.kiosk .card{backdrop-filter:blur(10px)}
body.kiosk #fcVideo{border-radius:22px}
body.kiosk .btn:not(.sec){background:linear-gradient(135deg,#00a3a3,#2F2A85)}
@media (min-width:900px){body.kiosk main{max-width:620px}body.kiosk .clock{container-type:inline-size}body.kiosk .clock .t{font-size:min(var(--k-t,84px),64px);font-size:min(var(--k-t,84px),10.5cqw)}}
@media (max-width:700px){nav button[data-t]::before{margin-right:4px}.card.login{margin-top:20px}}
@media (prefers-color-scheme:dark){
html:not([data-theme=light]) .stat i{background:rgba(255,255,255,.07)}
html:not([data-theme=light]) tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
html:not([data-theme=light]) .eye:hover{background:rgba(255,255,255,.08)}
}
body.kiosk{min-height:100vh;background-attachment:fixed}html:has(body.kiosk){background:#0b0e24}
/* የኢትዮጵያ ቀን መምረጫ */
.etp,.ett{display:flex;gap:6px;align-items:center}
.etp select,.ett select{width:auto;min-width:0;padding:10px 8px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit}
.etp .etd{width:64px}.etp .etm{flex:1 1 100px;min-width:96px}.etp .ety{width:84px}
.etp select:focus,.ett select:focus{outline:0;border-color:var(--brand-cyan);box-shadow:0 0 0 4px rgba(0,152,152,.15)}

/* ግርጌ (footer): የራስጌው የአሚኮ ብራንድ ቀለም */
body{min-height:100vh;display:flex;flex-direction:column}
#app{flex:1 0 auto}
#appFoot{flex:0 0 auto;position:relative;margin-top:26px;padding:calc(var(--f-y,18px) + 2px) var(--f-x,18px) var(--f-y,18px);text-align:center;color:rgba(255,255,255,.92);font-size:var(--f-f,13px);line-height:1.7;
  background:linear-gradient(120deg,#221E66 0%,#2F2A85 55%,#3a3396 100%);box-shadow:0 -8px 24px rgba(34,30,102,.12)}
#appFoot::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--brand-red),var(--brand-red) 62%,var(--brand-cyan) 62%)}
#appFoot span{display:inline-block;margin:0 8px}
#appFoot b{font-family:var(--font-head);font-variant-numeric:tabular-nums}
@media (max-width:560px){#appFoot span{display:block;margin:0}}
@media print{#appFoot{display:none!important}}

/* ፈጣን መዝለያ (ቅንብር) */
.jump{position:sticky;top:56px;z-index:4;display:flex;gap:8px;overflow-x:auto;padding:8px 2px 10px;margin:-4px 0 6px;background:linear-gradient(var(--bg) 70%,transparent);scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}.jump .chip{flex:0 0 auto;padding:6px 12px;font-size:12.5px}
.card{scroll-margin-top:120px}
/* በስልክ: ሰፊ ሰንጠረዥ → ካርዶች */
@media (max-width:700px){
  table.rsp thead,table.rsp tr:has(>th){display:none!important}
  table.rsp,table.rsp tbody,table.rsp tr,table.rsp td{display:block;width:100%;box-sizing:border-box}
  .wrap:has(table.rsp){border:0;max-height:none;overflow:visible}
  table.rsp tr{border:1px solid var(--line);border-radius:14px;margin:0 0 10px;padding:8px 12px;background:var(--card);box-shadow:var(--sh1)}
  table.rsp td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0!important;padding:6px 0;text-align:right;background:transparent!important}
  table.rsp td[data-label]::before{content:attr(data-label);color:var(--mut);font-weight:600;font-size:12.5px;flex:0 0 38%;text-align:left}
  table.rsp td:empty{display:none}
  table.rsp td .btn{margin:2px 0 2px 6px}
  table.rsp td select{max-width:60%}
  table.rsp td:not([data-label]){display:block;text-align:center}
}
@media (max-width:700px){table.rsp td[data-label="#"]{display:none}table.rsp tr{padding:6px 12px}}

@media (max-width:560px){body>header h1{font-size:calc(var(--h-f,18px)*.86)}}
.uiad{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:10px 0}
.uiad .ctl{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card)}
.uiad .ctl b{display:block;font-size:13px;margin-bottom:6px}
.uiad .row2{display:flex;align-items:center;gap:8px}.uiad .row2 input[type=range]{flex:1;padding:0;box-shadow:none;border:0}
.uiad .row2 button{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
.uiad .row2 button:hover{background:var(--inbg)}.uiad .row2 output{min-width:46px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* ራስጌ ማስተካከያ (ከገጹ ውስጣዊ ዘይቤ በላይ እንዲሰራ) */
body>header{padding:var(--h-y,14px) var(--h-x,18px)}
body>header h1{font-size:var(--h-f,18px)}
body>header .sub{font-size:calc(var(--h-f,18px)*.68)}
@media (max-width:560px){body>header h1{font-size:calc(var(--h-f,18px)*.86)}}

.uiad .ugrp{grid-column:1/-1;margin:8px 0 0;font-size:14px;color:var(--brand-blue);border-bottom:2px solid var(--brand-cyan);padding-bottom:4px}
@media (max-width:700px){body.kiosk .clock .t{font-size:calc(var(--k-t,84px)*.52)}}
/* የአድሚን ማስተካከያ እሴቶች (ከላይ ያሉትን ደንቦች የሚሽሩ) */
html body{font-size:var(--b-f,15px)}
html body main{max-width:var(--p-w,1100px)}
html body .card{padding:var(--c-p,20px);border-radius:var(--r,16px)}
html body nav button{padding:var(--n-y,9px) 16px;font-size:var(--n-f,14px)}
html body td{padding:var(--t-y,10px) 10px}
html body .card.login{max-width:var(--lg-w,410px)}
html body .lg-emblem{width:var(--lg-e,78px);height:var(--lg-e,78px);margin-top:calc(var(--lg-e,78px)/-2 - 1px)}
html body .btn{padding:var(--bn-y,11px) 16px;border-radius:var(--bn-r,12px)}
html body input,html body select,html body textarea{padding-top:var(--in-y,11px);padding-bottom:var(--in-y,11px)}
html body label{font-size:var(--lb-f,13px)}
html body .btn{max-width:100%;white-space:normal}
html body .row>.fit{max-width:100%;flex:0 1 auto}

/* በእጅ የተመረጠ ጨለማ ገጽታ */
html[data-theme=dark]{--bg:#0e1124;--card:#171b35;--ink:#e9ecf8;--mut:#9aa3c4;--line:#262c4f;--sh1:0 1px 2px rgba(0,0,0,.4);
    --okbg:#0d3a2c;--latebg:#3d2e0b;--badbg:#431a19;--inbg:#1c2551}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea,html[data-theme=dark] dialog,html[data-theme=dark] .pop,html[data-theme=dark] .stat,html[data-theme=dark] .emp,html[data-theme=dark] nav{background:var(--card)!important;color:var(--ink)}
html[data-theme=dark] th{background:#1b2040!important}
html[data-theme=dark] .msg.ok{background:#0d3a2c;color:#9be8c8}
html[data-theme=dark] .msg.err{background:#431a19;color:#ffb4ae}
html[data-theme=dark] .msg.info{background:#3d2e0b;color:#ffd990}
html[data-theme=dark] .btn.sec{background:#222850!important;color:#cfd6ff!important}
html[data-theme=dark] .t-ok{background:var(--okbg)!important;color:#7be0b8!important}
html[data-theme=dark] .t-late{background:var(--latebg)!important;color:#ffcf75!important}
html[data-theme=dark] .t-abs{background:var(--badbg)!important;color:#ff9f98!important}
html[data-theme=dark] .t-in{background:var(--inbg)!important;color:#aab8ff!important}
html[data-theme=dark] .t-mut{background:#222850!important}
html[data-theme=dark] h2{color:#b9c2ff}
html[data-theme=dark] .pill{color:#b9c2ff}
html[data-theme=dark] .pill.mut{background:#222850}
html[data-theme=dark] .stat i{background:rgba(255,255,255,.07)}
html[data-theme=dark] tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
html[data-theme=dark] .eye:hover{background:rgba(255,255,255,.08)}

.hdr-r{display:flex;align-items:center;gap:8px}
.thbtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:99px;width:38px;height:36px;font-size:16px;line-height:1;cursor:pointer;padding:0;transition:.15s}
.thbtn:hover{background:rgba(255,255,255,.22)}
@media print{.thbtn{display:none}}
html body>header{flex-wrap:wrap;row-gap:8px}.hdr-r{margin-left:auto}
/* በስልክ የሰንጠረዥ ካርዶች: ባለ2 አምድ ፍርግርግ (ረጅም ዝርዝር በግማሽ ይቀንሳል) */
@media (max-width:700px){
  html body table.rsp tr{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:2px;padding:10px 14px}
  html body table.rsp td[data-label]{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px;text-align:left;padding:4px 0;min-width:0;overflow-wrap:anywhere}
  html body table.rsp td[data-label]::before{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--mut)}
  html body table.rsp td:not([data-label]),html body table.rsp td:has(.bar),html body table.rsp td:has(.hbar){grid-column:1/-1}
  html body table.rsp td select{max-width:100%;width:100%}
  html body table.rsp td:not([data-label]) .btn{margin:3px 4px 3px 0}
}

#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 24px)}
#toast .ti{pointer-events:auto;background:#221E66;color:#fff;padding:10px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.28);font-weight:600;font-size:14px;animation:tin .25s ease both;border-left:5px solid var(--brand-cyan)}
#toast .ti.late{border-left-color:#e6a100}#toast .ti.err{border-left-color:var(--brand-red)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media print{#toast{display:none}}

/* የሰራተኛ መገለጫ ፎቶ */
.ph{border-radius:12px;object-fit:cover;flex:none;display:inline-block;vertical-align:middle;background:#e6ebf5}
.ph0{display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--brand-blue),var(--brand-cyan));color:#fff;font-family:var(--font-head);font-weight:700}
.nm{display:flex;align-items:center;gap:10px}
.pf-ph{display:flex;flex-direction:column;align-items:center;gap:10px}
.pf-box{width:min(220px,60vw);aspect-ratio:1;border-radius:18px;overflow:hidden;background:#111;display:grid}
.pf-box img{width:100%;height:100%;object-fit:cover}
.pf-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
html[data-theme=dark] .ph{background:#2a3350}
@media (max-width:640px){html body table.rsp td{white-space:normal;flex-wrap:wrap;min-width:0}html body table.rsp td .btn{margin:2px 2px 2px 0}}

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.shot{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:4px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;font:inherit;color:inherit}
.shot img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.shot.on{border-color:var(--ok);box-shadow:0 0 0 3px rgba(20,160,90,.25)}
.shot span{font-size:12px}

/* ፈጣን ፍለጋ + ብልህ ግንዛቤ */
.qf-l{margin-top:10px;max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.qf-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer}
.qf-i small{display:block;color:var(--mut);font-size:12px}
.qf-i.on,.qf-i:hover{background:rgba(35,196,196,.16)}
.qf-t{width:30px;height:30px;border-radius:10px;background:var(--brand-blue);color:#fff;display:grid;place-items:center;flex:none}
#qfBtn{flex:0 0 auto;min-width:48px}
.ins-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ins-g h3{font-size:14px;margin:0 0 6px}
.ins-l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ins-l li{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ins-l a,.ins-p a{color:inherit;text-decoration:none}
.ins-l a:hover{text-decoration:underline}
.ins-p{display:flex;flex-wrap:wrap;gap:6px}

.phone-only{display:none}
@media (max-width:640px){html body .phone-only{display:inline-block}}
#apBox td{white-space:normal;vertical-align:middle}#apBox table{width:100%}#apBox code{word-break:break-all;white-space:normal}
@media (max-width:640px){#apBox td:first-child{min-width:0}#apBox .btn{white-space:normal}}

/* 📱 የኃላፊ ክትትል */
.mg-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;position:sticky;top:0;z-index:5;padding:6px 0}
.mg-bar b{flex:1;text-align:center;font-size:15px}
.mg-hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.mg-k{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mg-k div{display:flex;flex-direction:column}.mg-k b{font-size:24px;font-family:var(--font-head)}.mg-k span{font-size:12px;color:var(--mut)}
.mg-list{display:flex;flex-direction:column;gap:4px}
.mg-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line)}
.mg-row small{color:var(--mut)}
.mg-call{min-width:44px;min-height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(35,196,196,.16);text-decoration:none}
.ett .eth{flex:1 1 120px;min-width:110px}.ett .etn{width:74px}
html body .ett{gap:4px}
html body .ett select{padding:10px 2px 10px 8px;text-overflow:clip}
html body .ett .eth{flex:1 1 auto;min-width:104px;width:auto}
html body .ett .etn{flex:0 0 58px;width:58px;min-width:58px}


/* ===== «ጀምር» መመሪያ (setup checklist) ===== */
.setup{border:1.5px solid rgba(0,152,152,.35);background:linear-gradient(135deg,rgba(0,152,152,.07),rgba(47,42,133,.05)),var(--card)}
.suBar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:6px 0 14px}
.suBar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-cyan),var(--brand-blue));transition:width .6s ease}
.suList{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.suStep{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.suStep small{display:block;color:var(--mut);font-size:12px;line-height:1.35;margin-top:2px}
.suStep b{font-size:14px}
.suStep .btn{margin-left:auto;padding:6px 12px;font-size:12px;white-space:nowrap}
.suDot{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px}
.suStep.ok{opacity:.75}.suStep.ok .suDot{background:var(--ok);border-color:var(--ok)}
.suStep:not(.ok) .suDot{border-color:var(--brand-cyan)}
@media (max-width:560px){.suList{grid-template-columns:1fr}}


/* ===== ሊታጠፉ ክፍሎች + ቅንብር ፍለጋ ===== */
.card.acc>h2{cursor:pointer;user-select:none;position:relative;padding-right:30px}
.card.acc>h2::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2.5px solid var(--mut);border-bottom:2.5px solid var(--mut);transform:rotate(45deg);transition:transform .2s}
.card.acc.acc-closed>h2::after{transform:rotate(-45deg);margin-top:-4px}
.card.acc>h2:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:4px;border-radius:8px}
.card.acc.acc-closed>*:not(h2){display:none!important}
.card.acc.acc-closed{padding-bottom:var(--c-p,20px)}
.card.acc.acc-closed>h2{margin-bottom:0}
.setbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.setbar input{flex:1 1 240px;min-width:0;margin:0}
.setbar .btn{flex:0 0 auto}
@media print{.card.acc.acc-closed>*:not(h2){display:revert!important}}


/* ===== ስልክ: የታች ዳሰሳ ባር (በአውራ ጣት ለመድረስ) — አስተዳዳሪ ===== */
@media (max-width:700px){
  nav#tabs{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:40;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))!important;border-bottom:0!important;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,26,51,.12)!important;overflow-x:auto;scroll-snap-type:x proximity}
  nav#tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:1 0 64px;min-width:64px;padding:6px 4px!important;font-size:11px!important;line-height:1.25;border-radius:14px;scroll-snap-align:center;white-space:nowrap}
  nav#tabs button[data-t]::before{display:block;margin:0!important;font-size:21px!important;line-height:1.2}
  nav#tabs button.on{background:rgba(47,42,133,.13)!important;color:var(--brand-blue)!important;box-shadow:none!important}
  nav#tabs #mypw,nav#tabs #logout,nav#tabs #qfBtn{flex:0 0 auto}
  nav#tabs #qfBtn{font-size:20px!important}
  body:has(nav#tabs) main{padding-bottom:96px}
  body:has(nav#tabs) footer{padding-bottom:84px}
  .jump{top:0}
}
@media (max-width:700px) and (prefers-color-scheme:dark){html:not([data-theme=light]) nav#tabs button.on{background:rgba(185,194,255,.16)!important;color:#dfe4ff!important}}
html[data-theme=dark] nav#tabs button.on{background:rgba(185,194,255,.16)!important;color:#dfe4ff!important}

/* ===== ኪዮስክ: ለስልክ ስክሪን ቦታ ማስለቀቅ ===== */
body.kiosk footer{display:none}
@media (max-height:520px){body.kiosk header .sub{display:none}body.kiosk header{padding-top:6px;padding-bottom:6px}}
:fullscreen body.kiosk header,html:fullscreen body.kiosk header{padding-top:max(10px,env(safe-area-inset-top))}

nav button[data-t=mgr]::before{content:"📱"}
@media (max-width:700px){.setbar input{flex:1 1 100%}.setbar .btn{flex:1 1 40%}}

.mlist{display:grid;gap:8px}
.mrow{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.mact{display:flex;gap:6px;flex-wrap:wrap}
.btn.sm{padding:6px 10px;font-size:12px}
@media (max-width:700px){body:has(nav#tabs) #toast{bottom:92px!important}}

.insight{border:1.5px solid rgba(185,119,14,.35);background:linear-gradient(135deg,rgba(185,119,14,.07),transparent),var(--card)}
.insL{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.insR{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:14px}
.insR.ins-absent{border-left:4px solid var(--bad)}.insR.ins-late{border-left:4px solid var(--warn)}.insR.ins-noout{border-left:4px solid var(--brand-cyan)}