@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Barlow:wght@400;500;600&display=swap');

:root{
  --navy:#0a1628;
  --blue:#1a5fbc;
  --cyan:#22c1e8;
  --purple:#8b5cf6;
  --bg:#F5F6F4;
  --card:#FFFFFF;
  --line:#DDE1E4;
  --text:#0a1628;
  --text-dim:#6B7280;
  --accent:#F4B400;
  --green:#2E7D32;
  --green-bg:#E7F4E8;
  --red:#C0392B;
  --red-bg:#FBEAE8;
  --radius:10px;
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Barlow',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,.brand{
  font-family:'Barlow Semi Condensed',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:0.02em;
  margin:0;
}
a{color:inherit;}

/* ---------- App shell ---------- */
.topbar{
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
}
.topbar .brand-row{display:flex;align-items:center;gap:10px;}
.topbar .logo-mark{height:34px;width:34px;border-radius:8px;object-fit:cover;}
.topbar .brand{font-size:1.2rem; color:#fff;}
.topbar .brand span{color:var(--cyan);}
.topbar .sub{font-size:.68rem;color:#9db3d4;letter-spacing:.08em;text-transform:uppercase;margin-top:1px;}
.topbar button.link-btn{
  background:none;border:none;color:#c9d9ee;font-size:.85rem;cursor:pointer;
}
main{max-width:520px;margin:0 auto;padding:18px 16px 90px;}
.admin main, .supervisor-main{max-width:900px;}

/* ---------- Login banner ---------- */
.login-banner{text-align:center;padding:24px 16px 10px;}
.login-banner img{width:260px;max-width:80vw;height:auto;}

/* ---------- Cards / forms ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:16px;
}
label{display:block;font-size:.8rem;font-weight:600;color:var(--text-dim);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.04em;}
input,select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--text);
}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
button{
  cursor:pointer;border:none;border-radius:8px;font-family:inherit;font-weight:600;
  font-size:.95rem;padding:12px 18px;
}
.btn-primary{background:var(--navy);color:#fff;width:100%;}
.btn-primary:hover{background:var(--blue);}
.btn-accent{background:var(--accent);color:var(--navy);}
.btn-accent:hover{background:#d9a000;color:#fff;}
.btn-outline{background:none;border:1px solid var(--line);color:var(--text);}
.btn-danger{background:var(--red-bg);color:var(--red);}
.btn-sm{padding:7px 12px;font-size:.82rem;}
.row{display:flex;gap:10px;}
.row > *{flex:1;}
.error-msg{color:var(--red);font-size:.85rem;margin-top:10px;min-height:1em;}
.hint{color:var(--text-dim);font-size:.8rem;margin-top:6px;}

/* ---------- Badge (workplace ID card) ---------- */
.badge{
  position:relative;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  border-radius:14px;
  padding:22px 18px 18px;
  margin-bottom:18px;
  overflow:visible;
}
.badge::before{
  content:"";
  position:absolute;
  top:-9px;left:50%;transform:translateX(-50%);
  width:46px;height:16px;
  background:var(--navy);
  border-radius:6px;
}
.badge .name{font-family:'Barlow Semi Condensed';font-size:1.3rem;font-weight:700;}
.badge .meta{font-size:.78rem;color:#b8cbe8;margin-top:2px;}
.badge .status-line{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.95rem;font-weight:600;
}
.dot{width:10px;height:10px;border-radius:50%;background:var(--text-dim);flex:none;}
.dot.on{background:var(--green);box-shadow:0 0 0 4px rgba(46,125,50,.25);}
.dot.off{background:#9AA1AC;}
.dot.pending{background:var(--accent);box-shadow:0 0 0 4px rgba(244,180,0,.25);}
.badge .time{color:#8fa8c9;font-size:.8rem;margin-top:2px;}

/* ---------- Map ---------- */
#map{height:280px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-bottom:16px;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem;}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);}
th{color:var(--text-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;}
tr:last-child td{border-bottom:none;}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:600;}
.pill.complete{background:var(--green-bg);color:var(--green);}
.pill.missing{background:#FDF3DC;color:#a3720a;}
.pill.noshow{background:var(--red-bg);color:var(--red);}

/* ---------- Tabs / nav ---------- */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;border-top:1px solid var(--line);
  display:flex;z-index:20;
}
.tabbar button{
  flex:1;background:none;border:none;padding:10px 4px 8px;
  font-size:.72rem;color:var(--text-dim);border-radius:0;font-weight:600;
}
.tabbar button.active{color:var(--navy);border-top:2px solid var(--accent);}

.section-title{font-size:1.05rem;margin-bottom:12px;}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);}
.list-item:last-child{border-bottom:none;}
.list-item .who{font-weight:600;}
.list-item .what{font-size:.8rem;color:var(--text-dim);}

.empty-state{text-align:center;color:var(--text-dim);padding:30px 10px;font-size:.9rem;}

.top-tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;}
.top-tabs button{background:#fff;border:1px solid var(--line);color:var(--text-dim);white-space:nowrap;}
.top-tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy);}

@media (max-width:480px){
  main{padding:14px 12px 90px;}
}