/* public/styles.css */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 0; }
header { display:flex; justify-content: space-between; align-items:center; padding: 10px 16px; background:#004c97; color:white; }
header a[title="Admin"] { color: #ffd; font-size: 18px; }
header a[title="Admin"]:hover { color: #fff; }
#filters { display:flex; gap:16px; padding:10px 16px; background:#f5f5f5; align-items:center; }
.week-grid { display:flex; flex-direction:column; width:100%; }
.row { display:grid; grid-template-columns: 100px repeat(7, 1fr); }
.day.holiday { background: #fff7f0; }
.cell { border: 1px solid #ddd; padding: 6px; min-height: 40px; position: relative; }
.header .cell { background:#f0f8ff; font-weight:600; }
.cell.time { background:#fafafa; text-align:right; font-weight:600; }
.cell.slot { background:#fff; }
.appt { position:absolute; left: 110px; right: 6px; top: 6px; background:#e3f2fd; border:1px solid #64b5f6; border-radius:4px; padding:4px 6px; cursor:pointer; }
#editor { position: fixed; right: 10px; top: 80px; width: 360px; background:white; border:1px solid #ccc; border-radius: 8px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
#editor form { display:flex; flex-direction:column; gap:8px; }
#editor label { display:flex; flex-direction:column; font-size: 12px; gap: 4px; }
#editor .actions { display:flex; gap:8px; justify-content:flex-end; }

/* Smart multi select */
.smart-multi { border:1px solid #ccc; border-radius:6px; padding:6px; min-height:36px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:#fff; }
.smart-multi .token { background:#eef3fa; border:1px solid #bcd; padding:2px 6px; border-radius:12px; font-size:12px; display:flex; align-items:center; gap:6px; }
.smart-multi .token .rm { cursor:pointer; font-weight:bold; }
.smart-multi input { border:none; outline:none; min-width:120px; font-size:12px; }
.smart-suggestions { position:absolute; background:#fff; border:1px solid #ccc; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:1000; max-height:180px; overflow:auto; }
.smart-suggestions div { padding:6px 8px; cursor:pointer; }
.smart-suggestions div:hover { background:#f0f6ff; }
.appt-title { font-size:11px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-sub { font-size:9px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#calendar { position: relative; }
.day-overlay { position:absolute; pointer-events:auto; }
.appt { position:absolute; left: 4px; right: 4px; top: 0; background:#e3f2fd; border:1px solid #64b5f6; border-radius:4px; padding:4px 6px; cursor:move; box-sizing:border-box; overflow:hidden; }
.appt .resize-handle { position:absolute; left:0; right:0; bottom:0; height:6px; cursor:ns-resize; background:rgba(100,100,100,0.15); border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.slot.selected { outline: 2px solid #64b5f6; outline-offset: -2px; }
.selection-box { position:absolute; left:2px; right:2px; background:rgba(100,149,237,0.25); border:1px dashed rgba(100,149,237,0.9); pointer-events:none; }
.color-palette { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.color-swatch { width:18px; height:18px; border-radius:4px; border:1px solid #ccc; cursor:pointer; box-shadow: inset 0 0 2px rgba(0,0,0,0.15); }
.color-swatch.selected { outline:2px solid #333; }