body {
  font-family: 'Segoe UI', 'Droid Sans', Arial, sans-serif;
}

/* Calendar Timeline Styles */
.calendar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.calendar-nav-btn {
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 3px;
}

.calendar-nav-btn:hover {
  background-color: #e0e0e0;
}

.calendar-view-select {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.calendar-date-display {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

.calendar-timeline-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendar-section-header {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
  font-weight: bold;
  text-align: left;
  width: 150px;
  position: sticky;
  left: 0;
  z-index: 10;
  background-color: #f0f0f0;
}

.calendar-date-header {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
  background-color: #f9f9f9;
  min-width: 80px;
}

.calendar-date-header.calendar-today {
  background-color: #e3f2fd;
  font-weight: bold;
}

.calendar-date-header.calendar-weekend {
  background-color: #f5f5f5;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

.calendar-date-day {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
}

.calendar-date-number {
  font-size: 14px;
  font-weight: bold;
}

.calendar-section-name {
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #fff;
  font-weight: 500;
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: #fff;
}

.calendar-cell-container {
  padding: 0;
  position: relative;
  height: 50px;
  width: 100%;
}

.calendar-booking-row {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  min-height: 50px;
}

.calendar-cell {
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  min-height: 50px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.calendar-cell:hover {
  background-color: #f5f5f5;
}

.calendar-cell.calendar-weekend {
  background-color: #fafafa;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.02) 2px,
    rgba(0, 0, 0, 0.02) 4px
  );
}

.calendar-cell.calendar-weekend:hover {
  background-color: #f0f0f0;
}

.calendar-booking-bar {
  position: absolute;
  border-radius: 3px;
  padding: 2px 5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.2;
  border: 1px solid #ee0000;
  z-index: 2;
  /* top and height are set dynamically via JavaScript */
}

.calendar-booking-bar:hover {
  opacity: 0.8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Booking color classes */
.booking {
  background-color: #ff2222;
  border-color: #ee0000;
  color: #fff;
}

.booking401 {
  background-color: #ff228d;
  border-color: #ee0000;
  color: #fff;
}

.booking402 {
  background-color: #9c7a7a;
  border-color: #ee0000;
  color: #fff;
}

.booking403 {
  background-color: #463838;
  border-color: #ee0000;
  color: #fff;
}

.booking404 {
  background-color: #73335f;
  border-color: #ee0000;
  color: #fff;
}

.booking405 {
  background-color: #6a3040;
  border-color: #ee0000;
  color: #fff;
}

.enquiry {
  background-color: #FFE0D8;
  border-color: #ee0000;
  color: #000;
}

.cancellation {
  background-color: #FFECFC;
  border-color: #ee0000;
  color: #000;
}

.phantom {
  background-color: #FFFFFF;
  border-color: #ee0000;
  color: #000;
}

/* Legacy styles (kept for compatibility) */
.time-sch-item-event {
  border-width: 1px;
  border-style: solid;
  width: 2px; }

.item-event-none {
  background-color: green;
  border-color: #004d00; }

  .item-event-one {
        background-color: #ff2222;
        border-color: #ee0000; }

.item-event-two {
  background-color: blue;
  border-color: #3333ff; }

.item-event-three {
  background-color: orange;
  border-color: #cc8400; }

.item-status-none {
  background-color: green; }

.item-status-one {
  background-color: #ff2222; }

.item-status-two {
  background-color: blue; }

.item-status-three {
  background-color: orange; }

.time-sch-item {
  transition: background-color ease 0.1s;
  border-width: 1px;
  border-style: solid; }
  .time-sch-item.item-status-none {
    border-color: #006700; }
    .time-sch-item.item-status-none:hover {
      background-color: #00b300; }
  .time-sch-item.item-status-one {
    border-color: #ff0808; }
    .time-sch-item.item-status-one:hover {
      background-color: #ff5555; }
  .time-sch-item.item-status-two {
    border-color: #0000e6; }
    .time-sch-item.item-status-two:hover {
      background-color: #3333ff; }
  .time-sch-item.item-status-three {
    border-color: #e69500; }
    .time-sch-item.item-status-three:hover {
      background-color: #ffb733; }
  .time-sch-item.ui-draggable-dragging {
    cursor: move; }

.realtime-info {
  display: none; }

.period-3day .time-sch-header-0-date-even {
  background-color: #F0F0F0; }

.period-1week .time-sch-header-0-date-even {
  background-color: #F0F0F0; }

.period-1month .time-sch-header-1-date-even {
  background-color: #F0F0F0; }

.time-sch-wrapper .time-sch-header-1-current-time {
  background-color: #999999;
  border-color: #888888; }
.time-sch-wrapper .time-sch-header-0-date-start {
  border-left-color: #444444; }
.time-sch-wrapper .time-sch-header-0-date-end {
  border-right-color: #444444; }