body { font-family: system-ui, sans-serif; margin: 0; background: #b34135; color: #fff; }
header { padding: 12px 20px; background: #7b261e; display:flex; align-items:center; justify-content:space-between; }
header h1 { margin: 0; font-size: 20px; }
#login-box { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#rfid-input { padding: 6px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; background: rgba(255,255,255,0.1); color: #fff; width: 120px; }
#rfid-input::placeholder { color: rgba(255,255,255,0.6); }
#pin { padding: 6px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; background: rgba(255,255,255,0.1); color: #fff; width: 100px; }
#pin::placeholder { color: rgba(255,255,255,0.6); }
button { padding: 6px 12px; border: none; border-radius: 4px; background: #facc6b; color: #000; font-weight: bold; cursor: pointer; }
button:hover { background: #fbbf24; }
main { padding: 12px 20px; }
.toolbar { display:flex; gap:16px; align-items:center; margin-bottom: 12px; }
.legend { display:flex; gap:8px; }
.legend-item { padding:2px 6px; border-radius:4px; font-size:12px; background:rgba(0,0,0,0.2); }
.legend-item.approved { background:#16a34a; }
.legend-item.pending { background:#eab308; }
.legend-item.blocked { background:#6b7280; }
.legend-item.bank-holiday { background:#dc2626; }
.legend-item.na-date { background:#9333ea; }

.calendar { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.month { background:#c75d50; padding:6px; border-radius:6px; }
.month-title { text-align:center; font-weight:bold; margin-bottom:4px; }
.month-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:2px; }
.day-header { text-align:center; font-weight:bold; font-size:10px; padding:2px; background:rgba(0,0,0,0.2); border-radius:2px; }
.day { background:#facc6b; color:#000; min-height:50px; border-radius:4px; padding:2px; font-size:11px; cursor:pointer; display:flex; flex-direction:column; position:relative; }
.day-label { font-weight:bold; font-size:11px; position:absolute; top:2px; left:4px; z-index:1; }
.day-content { flex:1; display:flex; align-items:stretch; margin-top:16px; }
.day.empty { background:transparent; cursor:default; }
.day.blocked { background:#9ca3af; color:#111; }
.day.bank-holiday { background:#dc2626; color:#fff; font-weight:bold; }
.day.na-date { background:#9333ea; color:#fff; font-weight:bold; }
.day.selected { outline:2px solid #2563eb; }
.day.admin-selected { outline:3px solid #fbbf24; }
.day.admin-multi-selected { outline:3px solid #3b82f6; background: rgba(59, 130, 246, 0.2) !important; }
.day-fill { flex:1; display:flex; align-items:center; justify-content:center; border-radius:2px; font-weight:bold; font-size:10px; padding:2px; min-height:100%; }
.day-split { flex:1; display:flex; align-items:center; justify-content:center; border-radius:2px; font-weight:bold; font-size:9px; padding:1px; }
.chip { padding:1px 3px; border-radius:3px; font-size:9px; background:#fbbf24; }
.chip.approved { background:#22c55e; }
.chip.pending { background:#eab308; }
.chip.rejected { background:#ef4444; }

.admin main { display:flex; flex-direction:column; gap:20px; }
.admin table { width:100%; border-collapse:collapse; background:#fff; color:#000; }
.admin th, .admin td { border:1px solid #ddd; padding:4px 6px; font-size:12px; }
.admin th { background:#f3f4f6; }
.admin button { padding: 6px 12px; margin: 4px; border: none; border-radius: 4px; cursor: pointer; background: #facc6b; color: #000; font-weight: bold; }
.admin button:hover { background: #fbbf24; }
.admin button:disabled { opacity: 0.5; cursor: not-allowed; }
#pending-requests { max-height: 300px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 4px; }
.pending-item { padding: 8px; margin: 4px 0; background: rgba(255,255,255,0.1); border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.pending-item button { padding: 4px 8px; font-size: 11px; }
/* ---------- Mobile layout tweaks ---------- */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  /* Header & login area stack nicely */
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #login-box {
    width: 100%;
    justify-content: flex-start;
  }

  #rfid-input,
  #pin,
  header button {
    width: 100%;
    max-width: none;
  }

  main {
    padding: 10px;
  }

  /* Toolbar wraps instead of squashing */
  .toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  /* Show one month per row on phones */
  .calendar {
    grid-template-columns: 1fr;
  }

  .month {
    padding: 4px;
  }

  .day {
    min-height: 40px;
    font-size: 10px;
  }

  .day-label {
    font-size: 10px;
  }

  .day-fill,
  .day-split {
    font-size: 9px;
  }

  /* Admin tables: allow horizontal scroll instead of overflowing */
  .admin table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}