:root{
  --ink:#12161F;
  --panel:#1B212C;
  --panel-2:#232A37;
  --paper:#F6F4EE;
  --card:#FFFFFF;
  --line:#E4E0D6;
  --text:#1D2129;
  --muted:#6B7280;
  --teal:#12897E;
  --teal-soft:#E4F3F1;
  --amber:#D98B26;
  --amber-soft:#FBF0DD;
  --red:#C4453C;
  --red-soft:#F9E7E5;
  --blue:#3B5BA5;
  --blue-soft:#E8ECF6;
  font-size:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--paper);
  color:var(--text);
  min-height:100vh;
  display:flex;
}
h1,h2,h3,.brand{ font-family:'Space Grotesk', sans-serif; }
.mono{ font-family:'JetBrains Mono', monospace; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:230px;
  flex-shrink:0;
  background:var(--ink);
  color:#EDEEF2;
  display:flex;
  flex-direction:column;
  padding:28px 20px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-0.02em;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand .dot{
  width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  flex-shrink:0;
}
.brand-sub{
  font-size:0.72rem;
  color:#8A8F9C;
  margin-top:4px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.nav{ margin-top:40px; display:flex; flex-direction:column; gap:4px;}
.nav-item{
  padding:10px 12px;
  border-radius:8px;
  font-size:0.88rem;
  font-weight:500;
  color:#B7BCC7;
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  transition:background .15s, color .15s;
  border:none; background:none; text-align:left; width:100%;
}
.nav-item svg{ width:16px; height:16px; opacity:.8; flex-shrink:0;}
.nav-item:hover{ background:var(--panel); color:#fff; }
.nav-item.active{ background:var(--panel-2); color:#fff; }
.sidebar-footer{
  margin-top:auto;
  font-size:0.72rem;
  color:#5B606C;
  line-height:1.5;
  border-top:1px solid #2A303C;
  padding-top:16px;
}

/* ---------- Main ---------- */
.main{ flex:1; padding:32px 40px 60px; max-width:1400px; }
.topbar{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:28px; flex-wrap:wrap; gap:16px;
}
.topbar h1{ font-size:1.6rem; font-weight:700; letter-spacing:-0.02em;}
.topbar p{ color:var(--muted); font-size:0.9rem; margin-top:4px;}
.date-pill{
  background:var(--card); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; font-size:0.82rem;
  color:var(--muted); font-family:'JetBrains Mono', monospace;
}

/* ---------- Stat cards ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px;
}
.stat-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; position:relative; overflow:hidden;
}
.stat-card .label{ font-size:0.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; font-weight:600;}
.stat-card .value{ font-size:1.9rem; font-weight:700; font-family:'Space Grotesk',sans-serif; margin-top:6px;}
.stat-card .bar{ height:4px; border-radius:2px; margin-top:14px; background:var(--line); overflow:hidden;}
.stat-card .bar span{ display:block; height:100%; border-radius:2px;}
.stat-card.teal .bar span{ background:var(--teal); }
.stat-card.amber .bar span{ background:var(--amber); }
.stat-card.red .bar span{ background:var(--red); }
.stat-card.blue .bar span{ background:var(--blue); }

/* ---------- Panel / form ---------- */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  margin-bottom:28px; overflow:hidden;
}
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.panel-head h2{ font-size:1.02rem; font-weight:600; display:flex; align-items:center; gap:8px;}
.panel-head h2 .num{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--muted);
  background:var(--paper); padding:2px 8px; border-radius:999px; border:1px solid var(--line);
}
.chev{ transition:transform .2s; color:var(--muted);}
.panel.collapsed .chev{ transform:rotate(-90deg); }
.panel-body{ padding:22px; }
.panel.collapsed .panel-body{ display:none; }

.form-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px 18px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field.span-2{ grid-column:span 2; }
.field label{ font-size:0.76rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;}
.field input, .field select, .field textarea{
  border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font-size:0.88rem; font-family:'Inter',sans-serif; color:var(--text);
  background:var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--teal); background:#fff;
  box-shadow:0 0 0 3px var(--teal-soft);
}
.field textarea{ resize:vertical; min-height:38px; font-family:'Inter',sans-serif;}
.form-actions{ margin-top:18px; display:flex; gap:10px; align-items:center; }

.btn{
  border:none; border-radius:8px; padding:10px 18px; font-size:0.86rem;
  font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:filter .15s, transform .1s;
  font-family:'Inter',sans-serif;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ filter:brightness(1.2); }
.btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--paper); }
.btn-export{ background:var(--teal); color:#fff; }
.btn-export:hover{ filter:brightness(1.08); }
.btn-sm{ padding:6px 10px; font-size:0.76rem; border-radius:6px; }
.btn svg{ width:14px; height:14px; }
.btn[disabled]{ opacity:0.55; cursor:not-allowed; }

/* ---------- Table controls ---------- */
.table-controls{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; gap:12px; flex-wrap:wrap;
}
.search-wrap{ position:relative; flex:1; min-width:200px; max-width:320px;}
.search-wrap input{
  width:100%; padding:9px 12px 9px 34px; border:1px solid var(--line); border-radius:8px;
  font-size:0.85rem; background:var(--card);
}
.search-wrap svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted);}
.filter-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filter-row select{
  padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:0.82rem;
}

/* ---------- Table ---------- */
.table-wrap{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; overflow-x:auto;
}
table{ width:100%; border-collapse:collapse; font-size:0.84rem; min-width:1000px; }
thead th{
  text-align:left; padding:12px 14px; font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--muted); font-weight:700; border-bottom:1px solid var(--line);
  background:var(--paper); white-space:nowrap;
}
tbody td{ padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#FBFAF6; }
.emp-name{ font-weight:600; }
.emp-name .sub{ display:block; font-weight:400; color:var(--muted); font-size:0.74rem; margin-top:2px;}

.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:0.72rem; font-weight:600;
}
.badge .d{ width:6px; height:6px; border-radius:50%; }
.badge.completed{ background:var(--teal-soft); color:var(--teal); }
.badge.completed .d{ background:var(--teal); }
.badge.pending{ background:var(--amber-soft); color:var(--amber); }
.badge.pending .d{ background:var(--amber); }
.badge.progress{ background:var(--blue-soft); color:var(--blue); }
.badge.progress .d{ background:var(--blue); }

.tag{
  font-size:0.72rem; padding:3px 9px; border-radius:6px; background:var(--paper);
  border:1px solid var(--line); color:var(--text); font-weight:500;
}

.timeline{
  display:flex; height:8px; width:150px; border-radius:5px; overflow:hidden; background:var(--line);
}
.timeline span{ height:100%; }
.seg-work{ background:var(--teal); }
.seg-break{ background:var(--amber); }
.seg-lunch{ background:var(--blue); }
.timeline-labels{ display:flex; justify-content:space-between; font-size:0.66rem; color:var(--muted); margin-top:4px; font-family:'JetBrains Mono',monospace; }

.reason-cell{ max-width:160px; color:var(--muted); font-size:0.8rem; }
.row-actions{ display:flex; gap:6px; }
.icon-btn{
  width:28px; height:28px; border-radius:6px; border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted);
}
.icon-btn:hover{ background:var(--paper); color:var(--text); }
.icon-btn.danger:hover{ background:var(--red-soft); color:var(--red); border-color:var(--red-soft);}
.icon-btn svg{ width:14px; height:14px; }

.empty-state{
  text-align:center; padding:60px 20px; color:var(--muted);
}
.empty-state svg{ width:40px; height:40px; margin-bottom:12px; opacity:0.5; }
.empty-state h3{ font-family:'Space Grotesk',sans-serif; color:var(--text); font-size:1rem; margin-bottom:4px;}
.empty-state p{ font-size:0.85rem; }

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:10px; font-size:0.84rem; display:flex; align-items:center; gap:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); transform:translateY(20px); opacity:0; pointer-events:none;
  transition:transform .25s, opacity .25s; z-index:100;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast .d{ width:8px; height:8px; border-radius:50%; background:var(--teal); }
.toast.error .d{ background:var(--red); }

.sync-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; color:var(--muted);
  padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card);
}
.sync-pill .d{ width:7px; height:7px; border-radius:50%; background:var(--teal); }
.sync-pill.saving .d{ background:var(--amber); }
.sync-pill.error .d{ background:var(--red); }

@media (max-width: 980px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:repeat(2,1fr); }
  .sidebar{ display:none; }
  .main{ padding:20px; }
}