:root{--red:#ff5b5b;--pending:#ffd24d;}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;background:#f6f7f9;color:#111}
a{color:#0b5ed7;text-decoration:none}
header,main{max-width:1200px;margin:0 auto;padding:16px}
header{display:flex;gap:12px;align-items:center;background:#fff;border-bottom:1px solid #eee;}
header h1{font-size:18px;margin:0;font-weight:600}
.spacer{flex:1}
.btn{display:inline-block;padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;cursor:pointer}
.btn-primary{background:#0b5ed7;color:#fff;border-color:#0b5ed7}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.wrap{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h2{font-size:16px;margin:0 0 8px}
.card .body{padding:16px}
.grid{overflow:auto}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
th,td{border:1px solid #eee;background:#fff}
th{position:sticky;top:0;background:#fff;z-index:2;font-weight:600;font-size:12px}
th.user-col{position:sticky;left:0;z-index:3;background:#fff;min-width:220px;text-align:left}
td{padding:0}
.cell{width:26px;height:26px;transition:box-shadow .06s ease}
.pcell{width:26px;height:26px;transition:box-shadow .06s ease}
.cell-full{background:var(--red)}
.cell-am{background:linear-gradient(to bottom,var(--red) 50%,transparent 50%)}
.cell-pm{background:linear-gradient(to top,var(--red) 50%,transparent 50%)}
.pcell-full{background:var(--pending)}
.pcell-am{background:linear-gradient(to bottom,var(--pending) 50%,transparent 50%)}
.pcell-pm{background:linear-gradient(to top,var(--pending) 50%,transparent 50%)}
.clickable .cell, .clickable .pcell{cursor:pointer}
.clickable .cell:hover, .clickable .pcell:hover{box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.field{display:grid;gap:6px;margin-bottom:8px}
input,select{padding:8px 10px;border:1px solid #ddd;border-radius:8px;background:#fff}
.muted{color:#667085;font-size:12px}
.right{text-align:right}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;background:#eef1f6;border:1px solid #e5e7eb;font-size:12px}
.two-col{max-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two-col.vac-form{column-gap:28px;row-gap:16px}
.wknd{background:#fafafa}
.wknd > div.cell, .wknd > div.pcell{background-image:linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.04) 75%, transparent 75%, transparent); background-size:8px 8px;}
.today{outline:2px solid #0b5ed7; outline-offset:-1px}
.holiday{background:#fff7d6}
.legend{display:flex;gap:12px;align-items:center;margin-top:8px}
.legend .box{width:16px;height:16px;border:1px solid #ddd}
.approve-pop{position:absolute;z-index:20;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.08);padding:8px;display:flex;gap:8px}
.approve-pop .btn{padding:6px 10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px 10px;border:1px solid #eee;text-align:left}
.notice{background:#fff8f0;border:1px solid #ffd7b8;padding:10px;border-radius:10px}
.stack > *{display:block;margin:6px 0}

/* Admin Users one-row layout */
.users-table{width:100%}
.users-table th,.users-table td{vertical-align:middle}
.row-wrap{padding:0}
.row-form{
  display:grid;
  grid-template-columns: 240px 200px 140px 260px 220px 200px;
  gap:8px;
  align-items:center;
  padding:8px;
}
.row-form input[type="text"],
.row-form input[type="password"],
.row-form select{width:100%}
.actions{display:flex;gap:8px;justify-content:flex-start}
.actions .btn{white-space:nowrap}
@media (max-width: 980px){
  .row-form{grid-template-columns: 1fr 1fr; }
  .row-form .actions{grid-column:1 / -1}
}

/* Add/Delete vacation form spacing */
.vac-form label{ display:grid; grid-template-columns:1fr; gap:6px; align-items:center; }
.vac-form label input,
.vac-form label select{ justify-self:start; }
.vac-form input[type="date"],
.vac-form select{ min-width:210px; }