/* Night-shift attendance — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root{
  --bg:#0F1420; --panel:#171E2E; --panel2:#1E2740; --line:#28324D;
  --ink:#EAEEF7; --muted:#8B94AB; --amber:#E8A33D; --amber-dk:#B87F26;
  --green:#4CC38A; --red:#E5645A; --radius:14px;
  font-size:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  min-height:100vh;
}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1080px; margin:0 auto; padding:24px 20px 60px;}
.wrap.narrow{max-width:520px;}

/* header */
.top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:28px; flex-wrap:wrap;}
.brand{font-weight:800; letter-spacing:.02em; font-size:1.05rem;}
.brand span{color:var(--amber);}
.clock{font-family:'IBM Plex Mono',monospace; color:var(--muted); font-size:.95rem;}

/* panels */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.card + .card{margin-top:16px;}
h1{font-size:1.5rem; font-weight:800; margin-bottom:6px;}
h2{font-size:1.05rem; font-weight:700; margin-bottom:14px; color:var(--ink);}
.sub{color:var(--muted); font-size:.92rem; line-height:1.45;}

/* kiosk */
.status-line{display:flex; align-items:center; gap:10px; margin:18px 0 22px; font-size:1rem;}
.dot{width:10px; height:10px; border-radius:50%; background:var(--muted);}
.dot.in{background:var(--green); box-shadow:0 0 12px rgba(76,195,138,.6);}
.bigbtn{
  display:block; width:100%; border:0; cursor:pointer;
  border-radius:var(--radius); padding:26px; font-size:1.35rem; font-weight:800;
  font-family:inherit; letter-spacing:.02em; transition:transform .06s ease, filter .15s;
}
.bigbtn:active{transform:scale(.985);}
.bigbtn.in{background:var(--green); color:#08130D;}
.bigbtn.out{background:var(--red); color:#1A0806;}
.bigbtn[disabled]{filter:grayscale(.8) brightness(.55); cursor:not-allowed;}
.bigbtn + .bigbtn{margin-top:14px;}
.since{margin-top:16px; text-align:center; color:var(--muted); font-size:.9rem;}

/* forms */
label{display:block; font-size:.82rem; color:var(--muted); margin:12px 0 6px; letter-spacing:.04em; text-transform:uppercase;}
input,select{
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; border-radius:10px; font-size:1rem; font-family:inherit;
}
input:focus,select:focus{outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber);}
.btn{
  display:inline-block; background:var(--amber); color:#221703; border:0; cursor:pointer;
  padding:12px 20px; border-radius:10px; font-weight:700; font-size:.95rem; font-family:inherit;
  margin-top:16px;
}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink);}
.btn.small{padding:7px 12px; font-size:.82rem; margin-top:0;}
.btn.danger{background:transparent; border:1px solid var(--red); color:var(--red);}

/* messages */
.msg{padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:.92rem;}
.msg.ok{background:rgba(76,195,138,.12); border:1px solid rgba(76,195,138,.4); color:var(--green);}
.msg.err{background:rgba(229,100,90,.12); border:1px solid rgba(229,100,90,.4); color:var(--red);}

/* admin nav */
.tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.tabs a{
  text-decoration:none; color:var(--muted); padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); font-size:.9rem; font-weight:600;
}
.tabs a.on{background:var(--amber); border-color:var(--amber); color:#221703;}

/* tables */
table{width:100%; border-collapse:collapse; font-size:.92rem;}
th{color:var(--muted); font-weight:600; text-align:left; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line);}
td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:0;}
td.num, th.num{text-align:right; font-family:'IBM Plex Mono',monospace;}
.tag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700;}
.tag.on{background:rgba(76,195,138,.15); color:var(--green);}
.tag.off{background:rgba(139,148,171,.15); color:var(--muted);}
.tag.idle{background:rgba(232,163,61,.15); color:var(--amber);}
.bar{height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; min-width:120px;}
.bar i{display:block; height:100%; background:var(--green);}
.bar i.warn{background:var(--amber);}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px;}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.kpi .v{font-family:'IBM Plex Mono',monospace; font-size:1.4rem; font-weight:600; margin-top:4px;}
.kpi .l{color:var(--muted); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;}
.filters{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px;}
.filters > div{flex:0 0 auto;}
.filters label{margin-top:0;}
code.tok{background:var(--panel2); padding:3px 8px; border-radius:6px; font-size:.8rem; word-break:break-all;}
.scroll{overflow-x:auto;}
@media (max-width:640px){ .wrap{padding:16px 12px 40px;} .card{padding:16px;} }