:root {
  --blue: #2b3990;
  --blue-600: #222b74;
  --orange: #f7941d;
  --green: #8dc63f;
  --teal: #00a79d;
  --sky: #27aae1;
  --purple: #662d91;
  --bg: #f7f8fb;
  --text: #222;
  --muted: #6b7280;
  --border: #e5e7eb;
  --tile: #fff;
}

* {
  box-sizing: border-box;
}


/* Limit dropdown height and enable scroll */
.dropdown-menu {
  max-height: 250px; /* adjust as needed */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fix checkbox layout */
.dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 14px;
  color: #222 !important;
  cursor: pointer;
  line-height: 1.2 !important;
  min-height: unset !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}

.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  height: 30px;             
  padding: 0 !important;     
  display: flex;             
  align-items: center;      
  margin: 0 !important;
}

.dropdown-menu .dropdown-item {
  height: 100% !important;   /* fill the li height */
  padding: 0 6px !important; /* horizontal padding only */
  line-height: normal !important;
}

.dropdown-menu input[type="checkbox"].form-check-input {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;
  display: inline-block !important;
  /*margin-right: 18px !important;*/
  width: 16px !important;
  height: 16px !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-left:5px;
}

.dropdown-menu .filter-search-div,
.dropdown-menu .filter-search-div input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;  /* optional padding */
  margin: 0 !important;         /* remove any margin */
  display: block !important;    /* ensure it behaves like block */
}

.dropdown-menu .filter-search-div {
  width: 100% !important;
  padding: 0 !important;
}



/* Main timetable container */
.phc-timetable {
  width: 100%;
  max-width: auto;
  margin: 0 auto;  
  background: var(--bg);
  padding: 0;
}

.phc-timetable th:first-child,
.phc-timetable td:first-child {
  padding: 12px;
  text-align: center;
  /* vertical-align: middle; */
  width: 120px; /* optional */
}


/* Sticky header container for nav + controls */
.phc-timetable header,
.phc-timetable .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

/* Calendar controls */
.phc-timetable .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  margin-top: 0;
  width: 100%;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  z-index: 51;
}

/* Filter groups */
.phc-timetable .group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
}

.phc-timetable .group-title {
  font-weight: 700;
  font-size: 13px;
}

/* Radio buttons */
.phc-timetable .radio label {
  display: block;
  margin: 2px 0;
  font-size: 14px;
}

.phc-timetable .radio input {
  accent-color: var(--blue);
  margin-right: 6px;
}

/* Nav bar (Prev/Next buttons) */
.phc-timetable .nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  background-color: #0073aa;
  z-index: 60;
}

.phc-timetable .nav button {
  background-color: #0073aa;
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.phc-timetable .nav button:hover {
  background-color: #005f8d;
}

/* Calendar table container */
.phc-timetable .calendar {
 overflow-x: auto;      /* horizontal scroll */
  overflow-y: visible;   /* allow sticky to work vertically */
  width: 100%;
  background: #fff;
}

/* Table styles */
.phc-timetable table {
  width: 100%;
  min-width: 100%;
  background: #fff;
  table-layout: fixed !important;
  border: 1px solid var(--border);
  border-collapse: separate !important;
  border-spacing: 0 !important;
  display: table !important;
}

.phc-timetable thead {
  display: table-header-group !important;
}

.phc-timetable tbody {
  display: table-row-group !important;
}

.phc-timetable tr {
  display: table-row !important;
}

.phc-timetable th,
.phc-timetable td {
  display: table-cell !important;
  vertical-align: top;
}

.phc-timetable col.time {
  width: 100px;
}

.phc-timetable thead th {
  position: sticky;
  top: 72px; /* height of nav + controls */
  z-index: 100;
  background: #fff; /* ensure background covers content behind */
  border-bottom: 1px solid var(--border);
  padding: 12px;
  font-weight: 700;
  text-align: center;
}

.phc-timetable thead th.time {
  text-align: left;
}

.phc-timetable tbody th.time {
  text-align: left;
  background: #fafafa;
}

/* Table body cells */
.phc-timetable tbody td,
.phc-timetable tbody th {
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 8px;
}

.phc-timetable tbody th {
  border-left: none;
  color: var(--muted);
  font-weight: 600;
}

/* Tiles inside table */
.phc-timetable .tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--tile);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-height: 150px;
}

.phc-timetable .tile + .tile {
  margin-top: 8px;
}

.phc-timetable .tile[data-state="full"] {
  opacity: 0.75;
  filter: saturate(0.9);
}

.phc-timetable .tile::before {
  content: "";
  display: block;
  width: 6px;
  border-radius: 6px;
  background: var(--accent, var(--blue));
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

/* Avatar & metadata */
.phc-timetable .left {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.phc-timetable .avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 28px;
  background: var(--blue);
}

.phc-timetable .meta {
  line-height: 1.2;
}

.phc-timetable .meta .name {
  font-weight: 700;
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.phc-timetable .meta .clinician {
  font-size: 12px;
  color: var(--muted);
}

/* Call to action buttons */
.phc-timetable .cta {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.phc-timetable .btn {
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.phc-timetable .btn.book {
  background: var(--blue);
  color: #fff;
}

.phc-timetable .btn.wait {
  background: #eef2ff;
  color: #111;
  border: 1px solid #e5e7eb;
}

/* Badge */
.phc-timetable .badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}

/* Tile types */
.phc-timetable .type-Reformer { --accent: var(--sky); }
.phc-timetable .type-Mat { --accent: var(--orange); }
.phc-timetable .type-Strength { --accent: var(--green); }
.phc-timetable .type-ClinicalPilates { --accent: var(--purple); }
.phc-timetable .type-EP { --accent: var(--teal); }

/* Legend */
.phc-timetable .legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
  color: var(--muted);
  font-size: 12px;
  width: 100%;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.phc-timetable .tag {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.phc-timetable .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}

/* Session button */
.sess-btn {
  text-decoration: none;
  display: block;
  width: 100%;
  background-color: #1976d2;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: transform 0.2s ease;
  box-sizing: border-box;
}

.sess-btn:hover {
  transform: scale(1.03);
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 700px) {
  .phc-timetable {
    padding: 15px 0;
  }

  .phc-timetable .controls {
    padding: 15px;
    gap: 10px;
  }

  .phc-timetable .group {
    min-width: 100%;
    width: 100%;
  }

  .phc-timetable .nav {
    width: 100%;
    justify-content: flex-end;
    padding: 12px 15px;
  }

  .phc-timetable .calendar {
    padding: 12px 15px;
  }

  .phc-timetable col.time {
    width: 88px;
  }

  .phc-timetable thead th {
    position: static !important;
  }

  .phc-timetable .legend {
    padding: 12px 15px;
  }

  .phc-timetable .nav button {
    padding: 6px 12px;
    font-size: 13px;
  }
}