:root{
  --bg:#0f1115;
  --card:#1a1d24;
  --accent:#ff5a1f;
  --text:#f2f2f2;
  --muted:#9aa0a6;
  --border:#2a2e37;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}
.hidden{display:none !important;}
.screen{max-width:720px;margin:0 auto;padding:20px;}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  margin-bottom:16px;
}
.card.center{text-align:center;}
h1{margin:0 0 4px 0;font-size:28px;}
h2{margin:0;font-size:20px;}
h3{margin:0 0 12px 0;font-size:16px;color:var(--muted);}
.subtitle{color:var(--muted);margin:0 0 20px 0;}
input{
  width:100%;
  padding:12px 14px;
  margin-bottom:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#12141a;
  color:var(--text);
  font-size:15px;
}
select{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#12141a;
  color:var(--text);
}
.btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}
.btn.primary{background:var(--accent);color:white;}
.btn.small{width:auto;padding:8px 14px;background:transparent;border:1px solid var(--border);color:var(--text);font-size:13px;}
.btn.big{padding:22px;font-size:18px;}
.error{color:#ff6b6b;min-height:18px;font-size:14px;}
.hint{color:var(--muted);font-size:13px;min-height:16px;}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.status{font-size:20px;font-weight:600;margin:0 0 4px 0;}
.since{color:var(--muted);margin:0 0 16px 0;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);}
th{color:var(--muted);font-weight:500;}

.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.7);
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;z-index:100;
}
.modal-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  max-width:600px;
  width:100%;
  margin-top:20px;
}

/* ---------- ADMIN: záložky, kalendár ---------- */
#adminScreen{max-width:1100px;}
.navRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 0;margin-bottom:12px;position:sticky;top:0;background:var(--bg);z-index:5;}
.tabBtn{white-space:nowrap;padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;}
.tabBtn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.btn.outline{background:transparent;border:1px solid var(--border);color:var(--text);margin-bottom:10px;text-align:left;}
.addToggle::after{content:"▶";float:right;}
.addToggle.open::after{content:"▼";}
.addForm{padding:6px 0 18px 0;}
.btn.small.accent{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.small.danger{border-color:#c0392b;color:#ff6b6b;}

.calHead,.calGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.calHead div{text-align:center;color:var(--muted);font-size:12px;padding:4px 0;}
.calCell{background:#12141a;border:1px solid var(--border);border-radius:8px;min-height:104px;padding:6px;cursor:pointer;overflow:hidden;}
.calCell.empty{background:transparent;border:none;cursor:default;}
.calCell.today{border-color:var(--accent);}
.calCell.selected{outline:2px solid var(--accent);}
.calNum{font-size:12px;color:var(--muted);margin-bottom:4px;}
.calCell.today .calNum{color:var(--accent);font-weight:700;}
.chip{font-size:11px;line-height:1.35;border-radius:4px;padding:1px 4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chip.shift{background:rgba(255,90,31,.20);}
.chip.cls{background:rgba(80,160,255,.20);}
.chip.miss{background:rgba(255,200,0,.18);color:#ffcf5a;}
.chip.clean{background:rgba(80,200,120,.20);}
.calMini{display:none;gap:3px;flex-wrap:wrap;}
.mini{font-size:10px;font-weight:700;border-radius:4px;padding:1px 4px;}
.mini.shift{background:rgba(255,90,31,.30);}
.mini.cls{background:rgba(80,160,255,.30);}
.mini.miss{background:rgba(255,200,0,.30);color:#ffcf5a;}
.mini.clean{background:rgba(80,200,120,.30);}
.legend{margin-top:12px;}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;}
.dot.shift{background:rgba(255,90,31,.6);}
.dot.cls{background:rgba(80,160,255,.6);}
.dot.miss{background:rgba(255,200,0,.6);}
.dot.clean{background:rgba(80,200,120,.6);}
@media (max-width:640px){
  .screen{padding:12px;}
  .calCell{min-height:58px;padding:4px;}
  .calChips{display:none;}
  .calMini{display:flex;}
}

.detailTitle{font-size:18px;font-weight:600;margin:0 0 4px 0;}
.detailSec{margin-top:18px;}
.detailSec h4{margin:0 0 6px 0;font-size:14px;color:var(--muted);font-weight:600;}
.detailRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border);}
.detailRow .grow{flex:1;min-width:150px;}
.detailRow select,.detailRow input[type=number]{width:auto;margin:0;}
.detailRow input[type=number]{width:80px;}
.detailRow input[type=checkbox]{width:22px;height:22px;margin:0;flex-shrink:0;}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2a2e37;color:var(--text);padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:200;}
#toast.show{opacity:1;}

/* ---------- štatistiky, plán smien ---------- */
:root{--c-emp:#e8501a;--c-ins:#3d8ef0;--c-clean:#2fae62;}
#employeeScreen{max-width:900px;}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.tile{background:#12141a;border:1px solid var(--border);border-radius:10px;padding:12px;}
.tile .tv{font-size:22px;font-weight:700;}
.tile .tl{font-size:12px;color:var(--muted);margin-top:2px;}
.barRow{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.barLabel{width:92px;flex-shrink:0;font-size:13px;color:var(--muted);}
.barTrack{flex:1;display:flex;height:16px;min-width:0;}
.seg{height:100%;margin-right:2px;border-radius:0 4px 4px 0;min-width:0;}
.seg:last-child{margin-right:0;}
.barVal{width:84px;flex-shrink:0;text-align:right;font-size:13px;}
.chip.plan{background:transparent;border:1px dashed var(--c-emp);}
.chip.plan.mine{background:rgba(255,90,31,.20);border-style:solid;}
.mini.plan{border:1px dashed var(--c-emp);}
.earnGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:640px){.barLabel{width:70px;}.barVal{width:70px;}}
.dot.plan{background:transparent;border:1px dashed var(--c-emp);}

.clockRow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.btn.clockIn{background:#2fae62;color:#fff;}
.btn.clockOut{background:#d63c3c;color:#fff;}
.btn.clockIn:disabled,.btn.clockOut:disabled{opacity:.3;cursor:not-allowed;}

/* Výplaty: rozpis pri odpracovanom */
.workCell{white-space:nowrap;}
.tipWrap{display:inline-flex;align-items:center;gap:6px;cursor:help;}
.workShort{border-bottom:1px dotted var(--muted);}
.arrowBtn{background:none;border:1px solid var(--border,#444);color:inherit;border-radius:6px;padding:0 6px;cursor:pointer;font-size:13px;line-height:20px;}
.tipBox{display:none;position:fixed;z-index:50;max-width:420px;max-height:70vh;overflow:auto;white-space:normal;
  background:var(--card,#1b1b1f);border:1px solid var(--border,#444);border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.45);font-size:13px;cursor:default;}
.tipSum{font-weight:600;margin-bottom:4px;}
.tipWarn{color:#ffcf5a;margin-bottom:4px;}
.tipTable{margin-top:8px;font-size:12.5px;}
.tipTable th,.tipTable td{padding:4px 8px;}
.detailCell{background:rgba(255,255,255,.03);}