:root{
  --amber:#008dd2;
  --amber-soft:#4fb8e8;
  --teal:#2fa66b;
  --red:#c4453a;
  --gold:#d4af37;
  --radius:10px;
}
html[data-theme="dark"]{
  --bg:#12151b;
  --panel:#1b1f27;
  --panel-2:#20242e;
  --ink:#ece8dd;
  --ink-dim:#9aa0ac;
  --line:rgba(236,232,221,0.10);
  --line-strong:rgba(236,232,221,0.22);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
html[data-theme="light"]{
  --bg:#f3efe6;
  --panel:#fffdf9;
  --panel-2:#faf6ec;
  --ink:#201c16;
  --ink-dim:#6b6459;
  --line:rgba(32,28,22,0.10);
  --line-strong:rgba(32,28,22,0.20);
  --shadow: 0 10px 30px rgba(120,100,60,0.12);
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,141,210,0.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  transition:background .4s ease, color .4s ease;
}
.mono{font-family:'IBM Plex Mono', monospace;}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-0.01em;}
button{font-family:inherit; cursor:pointer;}
input, select{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--amber); color:#ffffff;}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:6px;}

/* ---------- Layout shells ---------- */
#app{min-height:100vh; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; border-bottom:1px solid var(--line);
  background:var(--panel);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  display:flex; align-items:center; justify-content:center;
  color:var(--amber);
}
.brand-mark svg{height:26px; width:auto; display:block;}
.brand-name{font-weight:700; font-size:18px; letter-spacing:0.02em;}
.brand-sub{font-size:11px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace;}
.top-right{display:flex; align-items:center; gap:14px;}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--panel-2); color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.icon-btn:hover{border-color:var(--amber); transform:translateY(-1px);}
.hello{font-size:14px; text-align:right; line-height:1.3;}
.hello b{font-weight:600;}
.rolebadge{
  display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace;
  font-size:10px; padding:3px 8px; border-radius:20px; margin-left:6px;
  border:1px solid; letter-spacing:0.04em;
}
.rb-superadmin{color:var(--gold); border-color:var(--gold); text-shadow:0 0 8px rgba(212,175,55,0.6); box-shadow: 0 0 10px rgba(212,175,55,0.25) inset;}
.rb-admin{color:var(--red); border-color:var(--red); text-shadow:0 0 8px rgba(196,69,58,0.5);}
.rb-manager{color:var(--teal); border-color:var(--teal); text-shadow:0 0 6px rgba(61,139,125,0.4);}
.rb-employee{color:var(--ink-dim); border-color:var(--line-strong);}

.main{flex:1; padding:28px; max-width:1180px; margin:0 auto; width:100%;}

/* ---------- Login screen ---------- */
.login-wrap{
  flex:1; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-logo{
  display:flex; justify-content:center; margin:0 auto 22px; color:var(--amber);
  filter:drop-shadow(0 0 18px rgba(0,141,210,0.35));
}
.login-logo svg{height:58px; width:auto;}
.login-card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:34px 30px; box-shadow:var(--shadow);
  animation:riseIn .5s ease;
}
@keyframes riseIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.login-title{text-align:center; font-size:22px; margin-bottom:4px;}
.login-sub{text-align:center; color:var(--ink-dim); font-size:13px; margin-bottom:26px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; color:var(--ink-dim); margin-bottom:6px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.03em;}
.field input, .field select{
  width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--panel-2); color:var(--ink); font-size:14px; outline:none; transition:.2s;
}
.field input:focus, .field select:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(0,141,210,0.15);}
.btn{
  padding:11px 18px; border-radius:8px; border:1px solid var(--line-strong); background:var(--panel-2);
  color:var(--ink); font-size:14px; font-weight:500; transition:.2s; display:inline-flex; align-items:center; gap:7px; justify-content:center;
}
.btn:hover{border-color:var(--amber); transform:translateY(-1px);}
.btn-primary{background:linear-gradient(135deg, var(--amber), #005e94); color:#ffffff; border:none; font-weight:600;}
.btn-primary:hover{box-shadow:0 6px 20px rgba(0,141,210,0.35);}
.btn-block{width:100%;}
.btn-danger{border-color:var(--red); color:var(--red);}
.btn-danger:hover{background:rgba(196,69,58,0.1);}
.btn-teal{border-color:var(--teal); color:var(--teal);}
.btn-teal:hover{background:rgba(61,139,125,0.1);}
.btn-ghost{border:none; background:none; color:var(--ink-dim); text-decoration:underline; padding:4px;}
.btn-sm{padding:6px 10px; font-size:12px; border-radius:6px;}
.errbox{background:rgba(196,69,58,0.1); border:1px solid var(--red); color:var(--red); padding:9px 12px; border-radius:8px; font-size:12.5px; margin-bottom:14px;}
.okbox{background:rgba(61,139,125,0.1); border:1px solid var(--teal); color:var(--teal); padding:9px 12px; border-radius:8px; font-size:12.5px; margin-bottom:14px;}
.bootstrap-code{
  margin-top:18px; padding:14px; border:1px dashed var(--gold); border-radius:10px; text-align:center;
  background:rgba(212,175,55,0.06);
}
.bootstrap-code .code{font-family:'IBM Plex Mono',monospace; font-size:22px; letter-spacing:0.15em; color:var(--gold); text-shadow:0 0 12px rgba(212,175,55,0.5); margin-top:6px;}

/* ---------- Dashboard tiles ---------- */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:6px;}
@media(max-width:720px){.tiles{grid-template-columns:1fr;}}
.tile{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px;
  cursor:pointer; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position:relative; overflow:hidden;
}
.tile::before{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, rgba(0,141,210,0.30), rgba(0,141,210,0.08) 45%, rgba(0,141,210,0) 72%);
  opacity:0; transform:scale(0.25); transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  pointer-events:none;
}
.tile:hover{transform:translateY(-3px); border-color:var(--amber); box-shadow:var(--shadow);}
.tile:hover::before{ opacity:1; transform:scale(1); }
.tile-ico{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px; position:relative; z-index:1;}
.tile-1 .tile-ico{background:rgba(0,141,210,0.15); color:var(--amber);}
.tile-2 .tile-ico{background:rgba(0,141,210,0.15); color:var(--amber);}
.tile h3{font-size:19px; margin-bottom:6px; position:relative; z-index:1;}
.tile p{color:var(--ink-dim); font-size:13px; margin:0; position:relative; z-index:1;}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; margin-bottom:20px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.panel-head h2{font-size:17px;}
.row-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.backlink{display:inline-flex; align-items:center; gap:6px; color:var(--ink-dim); font-size:13px; margin-bottom:14px; cursor:pointer;}
.backlink:hover{color:var(--amber);}

/* ---------- Ticket rows (punch card feel) ---------- */
.ticket{
  display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:12px; margin-bottom:10px;
  background:var(--panel-2); overflow:hidden; transition:.2s;
}
.ticket:hover{border-color:var(--line-strong);}
.ticket-name{flex:1.3; padding:14px 16px; min-width:140px;}
.ticket-name .nm{font-weight:600; font-size:14.5px;}
.ticket-name .tag{font-size:11px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace;}
.perf{width:0; border-left:2px dashed var(--line-strong); align-self:stretch; margin:8px 0;}
.ticket-field{flex:1; padding:14px 14px; display:flex; flex-direction:column; gap:4px; min-width:110px;}
.ticket-field label{font-size:10px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; letter-spacing:0.03em;}
.ticket-field input[type=time], .ticket-field input[type=text]{
  border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); border-radius:6px; padding:6px 8px; font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.ticket-field .readonly-val{font-family:'IBM Plex Mono',monospace; font-size:14px; padding:6px 0;}
.ticket-badge{padding:0 16px; display:flex; align-items:center;}
.dot{width:9px; height:9px; border-radius:50%; margin-right:6px; display:inline-block;}
.dot-present{background:var(--teal); box-shadow:0 0 6px var(--teal);}
.dot-absent{background:var(--ink-dim);}
.dot-out{background:var(--amber); box-shadow:0 0 6px var(--amber);}
.small-note{font-size:11px; color:var(--ink-dim); margin-top:2px;}

.trip-item{border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-top:8px; background:var(--bg); display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.trip-item input{border:1px solid var(--line-strong); background:var(--panel-2); color:var(--ink); border-radius:6px; padding:6px 8px; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}

/* ---------- Autosave indicator ---------- */
.savebar{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace;
}
.savedot{width:8px; height:8px; border-radius:50%; background:var(--teal); transition:.3s;}
.savedot.saving{background:var(--amber); animation:pulse 0.9s infinite;}
@keyframes pulse{0%{opacity:1;}50%{opacity:0.3;}100%{opacity:1;}}

/* ---------- Modal ---------- */
.modal-bg{
  position:fixed; inset:0; background:rgba(10,10,10,0.55); display:flex; align-items:center; justify-content:center;
  z-index:100; padding:16px; animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--panel); border:1px solid var(--line-strong); border-radius:16px; padding:26px; width:100%; max-width:520px;
  max-height:86vh; overflow-y:auto; box-shadow:var(--shadow); animation:riseIn .25s ease;
}
.modal h2{margin-bottom:14px; font-size:18px;}
.modal-close{float:right; background:none; border:none; color:var(--ink-dim); font-size:20px; cursor:pointer;}

/* ---------- Table for user admin panel ---------- */
.utable{width:100%; border-collapse:collapse; font-size:13.5px;}
.utable th{text-align:left; padding:8px 10px; color:var(--ink-dim); font-size:11px; font-family:'IBM Plex Mono',monospace; border-bottom:1px solid var(--line-strong);}
.utable td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.utable tr:hover{background:var(--panel-2);}

.pill{padding:2px 9px; border-radius:20px; font-size:11px; border:1px solid var(--line-strong); font-family:'IBM Plex Mono',monospace;}

.codebox{font-family:'IBM Plex Mono',monospace; font-size:15px; letter-spacing:0.12em; background:var(--panel-2); padding:8px 12px; border-radius:8px; border:1px dashed var(--line-strong); display:inline-block;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:600px){.grid2{grid-template-columns:1fr;}}

.summary-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.sumcard{border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--panel-2);}
.sumcard .nm{font-weight:600; margin-bottom:8px;}
.bar-outer{height:8px; border-radius:5px; background:var(--line); overflow:hidden; margin:8px 0;}
.bar-inner{height:100%; background:linear-gradient(90deg, var(--amber), var(--teal));}
.figs{display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-dim);}

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--panel); border:1px solid var(--amber); color:var(--ink);
  padding:12px 18px; border-radius:10px; box-shadow:var(--shadow); z-index:200; font-size:13.5px; animation:riseIn .25s ease;
}
.empty{color:var(--ink-dim); font-size:13.5px; text-align:center; padding:26px 10px;}
.hint{font-size:12px; color:var(--ink-dim); margin-top:6px;}