body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 20px; }
.row { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.card { border: 1px solid #ddd; border-radius: 12px; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); margin-bottom: 14px; }
.muted { color:#666; font-size: 13px; }
.pill { padding: 4px 8px; border-radius: 999px; border:1px solid #ddd; font-size: 12px; background:#fafafa; }
button { padding: 9px 12px; border-radius: 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
button:hover { background: #f6f6f6; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* A disabled colored button (blue/green/red) still reads as that color at
   50% opacity -- override to a neutral grey so "disabled" is unambiguous. */
button.primary:disabled, button.success:disabled, button.danger:disabled {
  background: #9ca3af; border-color: #9ca3af; color: #fff;
}
button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
button.primary:hover { background: #1d4ed8; }
button.success { background: #16a34a; border-color: #16a34a; color: #fff; }
button.success:hover { background: #15803d; }
button.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
button.danger:hover { background: #b91c1c; }
input[type="text"] { padding: 9px 10px; border-radius: 10px; border: 1px solid #ccc; }
input[type="number"] { padding: 9px 10px; border-radius: 10px; border: 1px solid #ccc; width: 110px;
  -moz-appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
table { border-collapse: collapse; table-layout: fixed; }
th, td { border: 1px solid #e5e5e5; padding: 2px 1px; font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; }
th.sticky { position: sticky; top: 0; background: #fff; z-index: 5; }
th.leftsticky, td.leftsticky { position: sticky; left: 0; z-index: 4; text-align:left; padding: 3px 8px; }
th.leftsticky { background: #fff; }
td.leftsticky { background: inherit; }

/* Data cells */
td.cell { cursor: pointer; user-select: none; width: 48px; padding: 2px 0; font-size: 11px; overflow: hidden; }

/* 3-state colors */
td.cell.state-0 { background: #ffffff !important; }
td.cell.state-1 { background: #e8f5e9; }  /* Available */
td.cell.state-2 { background: #e8f5e9; }  /* Preferred + star */

/* Service-day columns: stronger border */
td.cell.svc-day { border-left: 2px solid #000; border-right: 2px solid #000; }
th.svc-day      { border-left: 2px solid #000; border-right: 2px solid #000; }

/* Drag-select highlight */
td.cell.selected { outline: 2px solid #3b82f6; outline-offset: -2px; filter: brightness(0.85); }

.gridwrap { max-height: 65vh; overflow: auto; border-radius: 10px; }
.small { font-size: 12px; }
.badge { font-size: 11px; padding: 2px 6px; border-radius: 999px; border:1px solid #ddd; background:#fafafa; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
       border: 1px solid #ddd; border-bottom-width: 2px; padding: 1px 6px; border-radius: 6px; background: #fafafa; }

/* Block colors on left label column */
.blkA { background:#FEF2CB !important; }
.blkB { background:#C5E0B3 !important; }
.blkC { background:#D9E2F3 !important; }
.blkD { background:#FBE4D5 !important; }
.blkE { background:#D8D8D8 !important; }

/* Questions grid */
.qgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.q { border:1px solid #eee; border-radius: 12px; padding: 10px; background: #fff; }
.q .qlabel { font-size: 12px; color:#555; margin-bottom: 6px; font-weight: 500; line-height: 1.35; }
.q input { width: 100%; box-sizing: border-box; }

/* Metrics grid (below the table) */
.metricgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.metric { border:1px solid #eee; border-radius: 12px; padding: 10px; background: #fafafa; }
.metric .mlabel { font-size: 12px; color:#666; }
.metric .mvalue { font-size: 20px; font-weight: 650; margin-top: 2px; }
.metric .mnote  { font-size: 12px; color:#666; margin-top: 4px; }
.metric.fail .mvalue { color: #991b1b; }
.metric.ok   .mvalue { color: #166534; }

/* Floating state-picker toolbar */
#stateToolbar {
  position: fixed; display: none; z-index: 9999;
  background: #fff; border: 1px solid #ccc; border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 6px 8px;
  gap: 6px; align-items: center; flex-wrap: nowrap;
}
#stateToolbar.visible { display: flex; }
#stateToolbar button { padding: 6px 12px; font-size: 12px; border-radius: 8px; border: 1px solid #ccc; cursor: pointer; }
#stateToolbar button:hover { filter: brightness(0.92); }
#stateToolbar .tb-avail   { background: #e8f5e9; }
#stateToolbar .tb-prefer  { background: #e8f5e9; }
#stateToolbar .tb-unavail { background: #ffffff; border: 1px solid #aaa; }
#stateToolbar .tb-cancel  { background: #f0f0f0; color: #555; }
#stateToolbar .tb-label   { font-size: 11px; color: #888; margin-right: 2px; }

/* Validation modal + standing-preferences modal share this pattern */
#valOverlay, .modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45);
  z-index:10000; align-items:center; justify-content:center; padding: 20px;
}
#valOverlay.open, .modal-backdrop.open { display:flex; }
#valModal, .modal {
  background:#fff; border-radius:14px; padding:24px 28px; max-width:560px; width:90%;
  box-shadow:0 8px 40px rgba(0,0,0,0.22); max-height:85vh; overflow-y:auto;
}
#valModal h3, .modal h2 { margin:0 0 16px; font-size:16px; }
.val-row { display:flex; align-items:baseline; gap:10px; padding:9px 12px; border-radius:8px; margin-bottom:7px; font-size:13px; }
.val-row.ok   { background:#f0fdf4; border:1px solid #86efac; }
.val-row.fail { background:#fef2f2; border:1px solid #fca5a5; }
.val-row.info { background:#f8fafc; border:1px solid #e2e8f0; }
.val-label { flex:1; color:#333; }
.val-value { font-weight:700; min-width:40px; text-align:right; }
.val-note  { font-size:11px; color:#666; min-width:90px; text-align:right; }
.val-row.ok   .val-value { color:#166534; }
.val-row.fail .val-value { color:#991b1b; }
#valClose { margin-top:16px; width:100%; padding:9px; border-radius:10px; border:1px solid #ccc; background:#f5f5f5; cursor:pointer; font-size:14px; }
#valClose:hover { background:#e8e8e8; }

/* Floating legend */
#legendBox {
  position: fixed; top: 16px; right: 16px; z-index: 8000;
  background: #fff; border: 1px solid #ddd; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12); font-size: 12px; min-width: 160px;
}
#legendToggle {
  padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 12px;
  border-bottom: 1px solid #eee; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
#legendToggle:hover { background: #f8f8f8; border-radius: 10px 10px 0 0; }
#legendContent { padding: 8px 12px; }
.hidden { display: none; }
.legend-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #ddd; display: inline-block; flex-shrink: 0; }

/* ── Additions for the magic-link / D1-backed version ─────────────────────── */
.save-state { font-size: 12px; color: #666; }
.save-state.error { color: #dc2626; }
.error-banner { color: #dc2626; font-size: 13px; margin: 8px 0; }

.points-bar { height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden; margin: 6px 0 16px; }
.points-bar .fill { height: 100%; background: #2563eb; transition: width 0.15s; }
.points-bar.over .fill { background: #dc2626; }

.rule-row { border: 1px solid #eee; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.rule-row .rule-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rule-row .rule-desc { color: #666; font-size: 12px; margin: 4px 0 8px; }
.rule-row .params { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rule-row input[type="number"] { width: 60px; }
.rule-row .weekday-set label { margin-right: 8px; font-size: 12px; }

textarea { width: 100%; font: inherit; padding: 8px; border-radius: 6px; border: 1px solid #ccc; box-sizing: border-box; }