:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #0b0f14; color: #e8eef6; }
.container { max-width: 1100px; margin: 0 auto; padding: 18px; }
.header { display:flex; gap:12px; flex-wrap:wrap; align-items:end; justify-content:space-between; }
.card { background: #101826; border: 1px solid #1b2a40; border-radius: 14px; padding: 14px; }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .grid{ grid-template-columns: 1fr;} }
.place { border-radius: 14px; padding: 14px; border: 1px solid #1b2a40; background:#0f1724; display:flex; flex-direction:column; gap:10px; }
.badge { display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; font-size: 12px; border:1px solid transparent; width: fit-content;}
.badge.free { background:#0b2a16; border-color:#134d2a; }
.badge.reserved { background:#2b1b0b; border-color:#6b3d10; }
.badge.pos { background:#2b0b16; border-color:#5a1230; }
.small { opacity:0.9; font-size: 12px; line-height: 1.35; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
a.btn, button.btn { background:#1c2b44; color:#e8eef6; border:1px solid #2b3f60; border-radius: 10px; padding: 9px 12px; text-decoration:none; cursor:pointer; }
a.btn:hover, button.btn:hover { filter: brightness(1.1); }
input, select, textarea { background:#0b1220; color:#e8eef6; border:1px solid #24324a; border-radius: 10px; padding: 9px 10px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid #1b2a40; padding:10px 8px; text-align:left; font-size: 13px; }
hr { border:0; border-top:1px solid #1b2a40; margin: 14px 0; }


/* Timeline view */
.timeline-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid #1b2a40; background:#0f1724; }
.timeline { width: max-content; border-collapse: separate; border-spacing: 0; }
.timeline th, .timeline td { border-right: 1px solid #1b2a40; border-bottom: 1px solid #1b2a40; padding: 8px 6px; font-size: 12px; white-space: nowrap; }
.timeline thead th { position: sticky; top: 0; background:#101826; z-index: 3; }
.timeline .place-col { position: sticky; left: 0; background:#101826; z-index: 4; min-width: 190px; max-width: 240px; }
.timeline td.place-col { background:#101826; font-weight: 700; }
.timeline .slot { text-align:center; min-width: 56px; }
.timeline .slot a { display:block; text-decoration:none; color: inherit; padding: 6px 4px; border-radius: 10px; }
.timeline .slot a:hover { filter: brightness(1.12); }
.slot-free a { background:#0b2a16; border: 1px solid #134d2a; }
.slot-reserved a { background:#2b1b0b; border: 1px solid #6b3d10; }
.slot-pos a { background:#2b0b16; border: 1px solid #5a1230; }
.slot-past { opacity: .55; }
.legend { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.legend .badge { margin-right: 6px; }
.timehead { font-size: 11px; opacity: .9; }
.subhead { font-size: 10px; opacity: .75; }


/* Outlook-like scheduler */
.timeline-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid #1b2a40; background:#0f1724; }
.timeline { width: max-content; border-collapse: separate; border-spacing: 0; }
.timeline th, .timeline td { border-right: 1px solid #162233; border-bottom: 1px solid #162233; padding: 0; font-size: 12px; white-space: nowrap; }
.timeline thead th { position: sticky; top: 0; background:#101826; z-index: 3; }
.timeline .place-col { position: sticky; left: 0; background:#101826; z-index: 4; min-width: 190px; max-width: 240px; padding: 10px 10px; }
.timeline td.place-col { background:#101826; font-weight: 700; }
.timeline .slot { min-width: 52px; height: 34px; }
.timeline .slot.free:hover { background:#0b1220; }
.timeline .slot a { display:block; width:100%; height:100%; text-decoration:none; color: inherit; }
.timeline .slot.free a { opacity: 0; } /* clickable but invisible */
.timeline .slot.free:hover a { opacity: 1; } /* makes click hint show if needed */

.event-cell { padding: 4px; }
.event {
  height: 26px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 8px;
  border: 1px solid transparent;
  overflow:hidden;
}
.event .title { font-weight: 700; overflow:hidden; text-overflow: ellipsis; }
.event .meta { opacity:.85; font-size: 11px; overflow:hidden; text-overflow: ellipsis; }
.event.reserved { background:#2b1b0b; border-color:#6b3d10; }
.event.pos { background:#5b2bd6; border-color:#7a55e6; color:#fff; }
.event.pos .title, .event.pos .meta { color:#fff; }
.event.pos:hover { filter: brightness(1.05); }
.event:hover { filter: brightness(1.12); }

.timehead { font-size: 11px; opacity: .9; padding: 6px 6px 0 6px; }
.subhead { font-size: 10px; opacity: .75; padding: 0 6px 6px 6px; }


/* Event spans over multiple slots (rendered in first slot only) */
td.slot { position: relative; background: transparent; }
td.slot.skip { background: transparent; }
td.slot.free:hover { background:#0b1220; }
td.slot.free a { opacity: 0; } /* clickable but invisible */
td.slot.free:hover a { opacity: .12; } /* tiny hint */

.event {
  position: absolute;
  top: 4px; left: 4px;
  height: 26px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 8px;
  border: 1px solid transparent;
  overflow:hidden;
  z-index: 2;
  pointer-events: auto;
}

.event.reserved { background:#2b1b0b; border-color:#6b3d10; }
.event.pos { background:#5b2bd6; border-color:#7a55e6; color:#fff; }
.event.pos .title, .event.pos .meta { color:#fff; }
.event.pos:hover { filter: brightness(1.05); }
.event:hover { filter: brightness(1.12); }

.now-line {
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#e8eef6;
  opacity:.75;
  pointer-events:none;
  z-index: 10;
}

td.drop-hover { outline: 2px solid #e8eef6; outline-offset: -2px; }


/* Hour-grid scheduler (Outlook-like, no 15-min cells) */
.scheduler { display:flex; border-radius: 14px; border:1px solid #1b2a40; background:#0f1724; overflow:hidden; }
.scheduler-left { width: 220px; background:#101826; border-right:1px solid #162233; }
.scheduler-left .head { position: sticky; top:0; z-index: 5; background:#101826; padding: 12px 14px; font-weight:700; border-bottom:1px solid #162233; }
.place-row-label { height: 56px; display:flex; align-items:center; padding: 0 14px; border-bottom:1px solid #162233; font-weight:700; }
.scheduler-right-wrap { flex:1; overflow:auto; position:relative; }
.scheduler-right { position:relative; min-width: 1000px; }
.time-header { position: sticky; top:0; z-index: 6; background:#101826; border-bottom:1px solid #162233; }
.time-header-inner { position:relative; height: 48px; }
.time-tick { position:absolute; top:0; bottom:0; border-left:1px solid #162233; display:flex; align-items:center; padding-left: 8px; font-size: 12px; opacity:.9; }
.grid-body { position:relative; }
.place-row { position:relative; height: 56px; border-bottom:1px solid #162233; }
.place-row .row-grid { position:absolute; left:0; top:0; right:0; bottom:0; cursor: pointer; }
.place-row .row-grid::before {
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(to right, rgba(22,34,51,1) 0 1px, rgba(0,0,0,0) 1px var(--hour-px));
  opacity: 1;
}
.place-row .row-grid::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(to right, rgba(22,34,51,.45) 0 1px, rgba(0,0,0,0) 1px calc(var(--hour-px)/4));
  opacity:.25;
}
.event-block{
  position:absolute;
  top: 12px;
  height: 32px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  padding: 0 12px;
  gap:10px;
  overflow:hidden;
  border:1px solid transparent;
  z-index: 3;
  cursor: grab;
  user-select:none;
}
.event-block .title{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-block .meta{ opacity:.85; font-size: 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-block.reserved{ background:#ff1b6b22; border-color:#ff1b6b88; }
.event-block.pos{ background:#7c4dff22; border-color:#7c4dff88; }
.event-block:hover{ filter:brightness(1.12); }

.now-line{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#e8eef6;
  opacity:.75;
  pointer-events:none;
  z-index: 8;
}

.rangebar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rangebar .pill{ padding:8px 12px; border-radius: 999px; border:1px solid #2b3f60; background:#1c2b44; color:#e8eef6; text-decoration:none; }
.rangebar .pill.active{ background:#ff1b6b; border-color:#ff1b6b; color:#0b0f14; font-weight:700; }
.navbtn{ padding:8px 12px; border-radius: 10px; border:1px solid #2b3f60; background:#1c2b44; color:#e8eef6; text-decoration:none; }
.drop-hover{ outline:2px solid #e8eef6; outline-offset:-2px; }

/* No-scroll layout overrides */
.scheduler-right-wrap { overflow: visible !important; }
.scheduler-right { min-width: 0 !important; width: 100% !important; }
.scheduler { overflow: visible !important; }
.grid-body { width: 100% !important; }
.time-header-inner { width: 100% !important; }

/* Use px-per-min for sizing */
.scheduler { --px-per-min: 2.4px; --hour-px: calc(var(--px-per-min) * 60); }
.time-tick { width: calc(var(--px-per-min) * 60); }

/* === Reservation color fixes === */
.event-block.reserved {
  background: #ffffff !important;
  color: #0b0f14 !important;
  border-color: #cbd5e1 !important;
}
.event-block.reserved .title,
.event-block.reserved .meta {
  color: #0b0f14 !important;
}


.link{color:#9ad0ff;text-decoration:underline;font-size:12px;margin-left:10px;}
.link:hover{opacity:.85}

.hover-tooltip{
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  max-width: 260px;
  background: rgba(10,14,20,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  pointer-events: none;
  color: #fff;
  font-size: 12px;
}
.hover-tooltip .tt-title{font-weight:700;margin-bottom:6px;}
.hover-tooltip .tt-row{margin:2px 0;}
.hover-tooltip .tt-muted{opacity:.75;}

.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:16px;}
.modal-card{background:rgba(10,14,20,.98);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;max-width:560px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.modal-title{font-size:16px;font-weight:800;margin-bottom:8px;color:#fff;}
.list{display:flex;flex-direction:column;gap:8px;}
.list-item{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;cursor:pointer;}
.list-item:hover{border-color:rgba(255,255,255,.18);}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;background:rgba(255,255,255,.06);}
.btn.primary{background:#e6006e;border-color:#e6006e;}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;}