:root{
  --vrm-radius: 16px;
}
body{
  background: #f5f6f8;
}
.vrm-card{
  border-radius: var(--vrm-radius);
}
.vrm-topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(10px);
}
.vrm-bottom-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(255,255,255,.95);
  border-top: 1px solid rgba(0,0,0,.06);
  padding: .35rem .5rem;
}
.vrm-bottom-nav a{
  text-decoration:none;
  color:#4b5563;
  font-size: .75rem;
}
.vrm-bottom-nav a.active{
  color:#111827;
  font-weight:700;
}
.vrm-safe-bottom{
  padding-bottom: 80px;
}
.badge-status{
  font-size:.75rem;
}
.media-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.media-grid img, .media-grid video{
  width:100%;
  border-radius: 12px;
  background:#000;
}
.small-muted{
  font-size: .85rem;
  color:#6b7280;
}

/* Schedule / calendar */
.schedule-wrap{
  overflow:auto;
  border-radius: var(--vrm-radius);
}
.schedule-table{
  margin:0;
  min-width: 920px;
}
.schedule-table th, .schedule-table td{
  border-color: rgba(0,0,0,.06);
}
.schedule-sticky-col{
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  min-width: 160px;
}
.schedule-day-head{
  min-width: 56px;
  background:#fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.day-head-btn{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  padding: 2px 0;
  border-radius: 10px;
  color: inherit;
}
.day-head-btn:hover{ background: rgba(13,110,253,.06); }
.day-head-btn:focus{ outline: none; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }

.schedule-seg{
  width: 62px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  font-weight: 700;
  font-size: .80rem;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.schedule-seg:hover{ filter: brightness(.98); }
.schedule-seg .seg-label{
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 .25rem;
}
.schedule-seg .cell-plus{
  position:absolute;
  top: 6px;
  right: 8px;
  font-size: .9rem;
  opacity: .35;
  pointer-events:none;
}

.schedule-seg .seg-handle{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.22);
  opacity: .65;
}
.schedule-seg .seg-handle-start{ left: 4px; cursor: ew-resize; }
.schedule-seg .seg-handle-end{ right: 4px; cursor: ew-resize; }
.schedule-seg:hover .seg-handle{ opacity: .95; }
.schedule-seg.seg-mid,
.schedule-seg.seg-start,
.schedule-seg.seg-end{
  border-radius: 0;
}
.schedule-seg.seg-start{ border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.schedule-seg.seg-end{ border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.schedule-seg.seg-single{ border-radius: 12px; }
.schedule-seg.seg-continued::before{
  content: "↤";
  position:absolute;
  left: 6px;
  top: 11px;
  font-size: .75rem;
  opacity: .55;
}
.schedule-seg[data-booking-drag]{ cursor: grab; }
.schedule-seg.is-dragging{ opacity: .65; cursor: grabbing; }

/* Preview bar (drag/move/resize) */
.schedule-seg{ position: relative; }
.schedule-seg > *{ position: relative; z-index: 2; }
.schedule-seg.preview-bar::after{
  content:"";
  position:absolute;
  left: 3px;
  right: 3px;
  top: 9px;
  bottom: 9px;
  background: rgba(13,110,253,.22);
  border-radius: 0;
  z-index: 1;
  pointer-events: none;
}
.schedule-seg.preview-bar.preview-bad::after{ background: rgba(220,53,69,.22); }
.schedule-seg.preview-bar.preview-good::after{ background: rgba(25,135,84,.18); }
.schedule-seg.preview-single::after{ border-radius: 12px; }
.schedule-seg.preview-start::after{ border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.schedule-seg.preview-end::after{ border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

.schedule-seg.drop-hover{
  outline: 2px dashed rgba(13,110,253,.55);
  outline-offset: 2px;
}
.schedule-seg.drop-valid{
  outline: 2px solid rgba(25,135,84,.55);
  outline-offset: 2px;
}
.schedule-seg.drop-invalid{
  outline: 2px solid rgba(220,53,69,.65);
  outline-offset: 2px;
}

.schedule-seg.resize-preview{
  box-shadow: inset 0 0 0 2px rgba(13,110,253,.35);
}
.schedule-seg.resize-preview.preview-bad{
  box-shadow: inset 0 0 0 2px rgba(220,53,69,.55);
}

body.vrm-resizing .schedule-seg{ cursor: crosshair; }

/* Batch select */
body.vrm-batch-mode .schedule-seg{ cursor: cell; }
body.vrm-batch-mode .schedule-seg[data-booking-drag]{ cursor: cell; }
.schedule-seg.batch-selected{
  outline: 2px solid rgba(13,110,253,.55);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 999px rgba(13,110,253,.08);
}

.vrm-dot-sep{
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,.12);
  display: inline-block;
}

.vrm-batch-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px; /* above bottom nav */
  z-index: 1600;
  padding: .5rem;
}
.vrm-batch-bar-inner{
  max-width: 920px;
  margin: 0 auto;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.vrm-batch-summary{ font-size: .85rem; color: #111827; white-space: nowrap; }
.vrm-batch-actions{ display:flex; gap:.5rem; align-items:center; flex-wrap: wrap; justify-content:flex-end; }

@media (max-width: 576px){
  .vrm-batch-bar{ bottom: 74px; }
  .vrm-batch-summary{ white-space: normal; }
}

.status-available{ background: rgba(25,135,84,.08); color: rgba(25,135,84,.95); }
.status-reserved{ background: rgba(255,193,7,.14); color: rgba(153,102,0,.95); }
.status-rented{ background: rgba(13,110,253,.12); color: rgba(13,110,253,.95); }
.status-maintenance{ background: rgba(220,53,69,.12); color: rgba(220,53,69,.95); }
.status-unavailable, .status-draft, .status-done{ background: rgba(108,117,125,.14); color: rgba(108,117,125,.95); }


.month-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
}
.month-dow{ padding: .25rem 0; }
.month-cell{
  text-align:left;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  padding: .5rem;
  min-height: 92px;
}
.month-cell.out{ background: rgba(0,0,0,.03); color: rgba(0,0,0,.35); }
.month-cell:hover{ filter: brightness(.99); }
.month-counts{ font-size: .78rem; color: #4b5563; display:grid; gap:.15rem; }
.dot{ display:inline-block; width:.5rem; height:.5rem; border-radius: 99px; margin-right:.25rem; vertical-align: middle; }
.dot-a{ background: rgba(25,135,84,.65); }
.dot-b{ background: rgba(255,193,7,.75); }
.dot-m{ background: rgba(220,53,69,.7); }


/* Floating tip (calendar drag/resize) */
.vrm-float-tip{
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  max-width: 320px;
}
.vrm-float-tip-inner{
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  padding: .6rem .75rem;
  font-size: .85rem;
}
.vrm-float-tip-inner .muted{
  color:#6b7280;
  font-size: .78rem;
  margin-top: .1rem;
}
.vrm-float-tip-inner .ok{
  color: rgba(25,135,84,.95);
}
.vrm-float-tip-inner .bad{
  color: rgba(220,53,69,.95);
}