/* Styles for Master Schedule and calendar placeholders
   No inline styles to satisfy CSP. */

.master-schedule-container {
  max-width: 1400px;
}

.master-schedule-container.staff-layout {
  max-width: 100%;
}

.ms-filters-above {
  position: relative;
  z-index: 10;
}

.province-multiselect {
  min-width: 16rem;
}

.province-multiselect-wrapper {
  position: relative;
}

.province-multiselect-button {
  display: block;
  width: 100%;
  min-width: 16rem;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  text-align: left;
  cursor: pointer;
}

.province-multiselect-button::after {
  content: "▾";
  float: right;
  color: #6c757d;
}

.province-multiselect-list.hidden {
  display: none;
}

.province-multiselect-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 16rem;
  padding: 0.5rem;
  border: 1px solid #ced4da;
  border-radius: 0 0 0.375rem 0.375rem;
  background: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

.min-height-0 {
  min-height: 0;
}

/* Legend badges — uniform width so all three entries align */
.ms-legend-badge {
  min-width: 9rem;
  justify-content: center;
}

/* Master schedule event badges: show a visible border for staffing status.
   Only set width and style here; the border-color comes from pms-*-border classes. */
.ms-bordered-badge {
  border-width: 3px !important;
  border-style: solid !important;
}

/* More vibrant green border on master schedule only, for clearer contrast with slate-grey "not my location" */
.ms-bordered-badge.pms-green-border {
  border-color: #28a745 !important;
}

.ms-select {
  display: inline-block;
  width: auto;
}

/* Topbar month/year selects (new booking header) */
.ms-topbar-month {
  width: 9em; /* fits "September" */
}
.ms-topbar-year {
  width: 6em;
}
.ms-topbar-province {
  width: 12em; /* fits province names */
}

.ps-fullcalendar {
  max-width: 900px;
  margin: 0 auto 1rem;
}

.calendar-table {
  margin: 0 auto; /* center the calendar */
  max-width: 980px; /* keep table reasonably narrow on large screens */
  width: 100%;
  table-layout: fixed; /* equal column widths */
  border-collapse: separate;
  border-spacing: 0;
  height: 740px; /* increased total calendar height so rows can comfortably hold badges + 'More' */
}

/* Provide CSS class-based row-count helpers to set the --ms-rows variable
   without using inline styles (CSP-safe). The server renders `ms-rows-N` on
   the table element where N is the number of weeks shown (typically 5 or 6). */
.calendar-table.ms-rows-5 { --ms-rows: 5; }
.calendar-table.ms-rows-6 { --ms-rows: 6; }

/* Top bar laid out as 7 equal columns so Prev/Month/Next align with calendar days */
.ms-topbar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 0.5rem;
  max-width: 980px;
  margin: 0 auto 0.5rem;
}
.ms-top-left { grid-column: 1; justify-self: start; }
.ms-top-center { grid-column: 2 / span 5; justify-self: center; }
.ms-top-right { grid-column: 7; justify-self: end; }

/* Override any Bootstrap button styles for prev/next navigation buttons */
.ms-topbar .pms-nav-btn,
.ms-topbar a.pms-nav-btn {
  padding: 8px 16px;
  background-color: #343a40;
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-right: 1px solid #495057;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background-color 0.2s;
  min-width: 140px;
  text-align: center;
  border-radius: 4px;
}

.ms-topbar .pms-nav-btn:hover,
.ms-topbar a.pms-nav-btn:hover {
  background-color: #495057;
  color: #ffffff;
  text-decoration: none;
}

.ms-topbar .pms-nav-btn:active,
.ms-topbar a.pms-nav-btn:active {
  background-color: #343a40;
  color: #ffffff;
}

/* Control bar must line up with calendar edges */
.ms-controlbar { max-width: 980px; margin: 0 auto 0.75rem; display: flex; justify-content: space-between; }

/* Fixed vertical sizing: keep normal table layout so header columns align with body
  columns, but fix the overall table height and give the header a fixed pixel
  height; compute each body-row height from the remaining pixels so rows are
  equal. Using explicit px calc ensures thead and tbody column widths align. */
.calendar-table thead { display: table-header-group; }
.calendar-table thead th { height: 44px; line-height: 44px; }
.calendar-table tbody { display: table-row-group; }
.calendar-table tbody tr { height: calc((740px - 44px) / var(--ms-rows, 6)); }
.calendar-table tbody td { height: 100%; }

/* Enforce per-cell heights so rows don't vary due to content. Use the --ms-rows
  CSS variable (set on the table element) so months with 5 or 6 weeks divide
  the available space evenly. */
.calendar-table tbody tr td { height: calc((740px - 44px) / var(--ms-rows, 6)); min-height: calc((740px - 44px) / var(--ms-rows, 6)) !important; max-height: calc((740px - 44px) / var(--ms-rows, 6)) !important; overflow: hidden; }

/* Day cell base styling. Use attribute-match selectors so this still applies
   even if the class tokens are concatenated (e.g. "ms-day-past"). */
.calendar-table td[class*="ms-day"] {
  vertical-align: top;
  padding: 0.35rem 0.5rem;
  width: calc(100% / 7); /* equal narrow columns */
  overflow-wrap: break-word;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #dee2e6;
}

/* Prevent any cell's content from forcing its row to grow. Ensure the
   immediate div wrapper inside the cell fills the cell and uses column flex
   so the day number stays at the top and the content area can be constrained.
   Use min-height: 0 so flex children can shrink below their content's intrinsic
   minimum height when needed. */
.calendar-table td[class*="ms-day"] { overflow: hidden; min-height: 0; }
.calendar-table td[class*="ms-day"] > div { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.calendar-table td[class*="ms-day"] > div > div:first-child { flex: 0 0 auto; }
.calendar-table td[class*="ms-day"] > div > div:not(:first-child) { flex: 1 1 auto; overflow: hidden; }

/* Variants (not-current-month, past, selected) also matched via attribute selectors */
.calendar-table td.ms-today strong {
  color: #E08000;
}

.calendar-table td[class*="ms-day"][class*="not-current-month"] {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Past days are view-only: slightly muted and not selectable */
.calendar-table td[class*="ms-day"][class*="past"] {
  opacity: 0.65;
  cursor: default;
}

/* Dates with no staff available — light reddish background */
.calendar-table td[class*="ms-day"][class*="no-staff-available"] {
  background-color: #ffe0e0;
  border: 1px solid #999;
}

/* Dates with only shoot-and-show staff available — light amber background */
.calendar-table td[class*="ms-day"][class*="shoot-and-show-only"] {
  background-color: #ffe0b3;
  border: 1px solid #999;
}

.calendar-table td[class*="ms-day"][class*="selected"] {
  outline: 3px solid rgba(13,110,253,0.45);
  background-color: #e7f1ff; /* stronger visual highlight */
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(13,110,253,0.08) inset;
}

.calendar-table td[class*="ms-day"][class*="selected"] strong {
  color: #5a7a9c; /* make the day number more visible */
}

.calendar-table .badge {
  font-size: 0.78rem;
  display: block; /* make each location name take its own line */
  text-align: center; /* center location names */
  white-space: normal; /* allow wrapping to next line */
  overflow-wrap: anywhere;
  margin: 0.15rem 0;
}

/* Badges container — clip overflow so cells don't expand. Use a column-flex
   layout so the '.ms-more-placeholder' can be pushed to the bottom via
   margin-top:auto instead of absolutely positioning it. This avoids
   brittle interactions with height:100% and Turbo head/morph timing. */
.ms-badges {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ms-badges-clipped { overflow: hidden; }

/* Make the Show More pill centered and sized like the badges without using
   inline styles (CSP-safe). */
.ms-more-link { display: block; margin: 0; box-sizing: border-box; width: 100%; text-align: center; }

/* Place the placeholder in-flow and push it to the bottom of the badges
   container when present using margin-top:auto. The inner link remains
   pointer-interactive while the placeholder container itself does not eat
   pointer events. */
.ms-more-placeholder { position: static; margin-top: auto; width: 100%; text-align: center; pointer-events: none; }
.ms-more-placeholder .ms-more-link { pointer-events: auto; display: block; margin: 0; padding: 0.15rem 0.5rem; }

/* Button sizing for master schedule controls - colors handled by Bootstrap classes */
.ms-control-button { width: 140px; min-width: 140px; }

/* Make the More link visually similar to badges (small pill) */
.ms-more-placeholder .ms-more-link {
  background: #5a7a9c;
  color: #fff;
  border-radius: 0.375rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  text-decoration: underline;
}

/* Particulars modal: scrollable dates list (no inline styles) */
.particulars-dates { 
  max-height: 420px; 
  overflow-y: auto;
}

.particulars-dates .list-group-item {
  padding-left: 2rem;
}

/* Modal close button - transparent background, no border */
/* General rule for all pms-close buttons */
.pms-close.pms-button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: auto !important;
  box-shadow: none !important;
}

/* Specific modal overrides */
#particularsModal .modal-header .pms-close,
#bookingModal .modal-header .pms-close,
#newTodoFromNotesModal .modal-header .pms-close {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: auto !important;
}

#particularsModal .modal-header .pms-close::before,
#bookingModal .modal-header .pms-close::before,
#newTodoFromNotesModal .modal-header .pms-close::before {
  content: "\00D7";
  font-size: 1.5rem;
  line-height: 1;
  color: #000;
  opacity: 0.5;
}
#particularsModal .modal-header .pms-close:hover::before,
#bookingModal .modal-header .pms-close:hover::before,
#newTodoFromNotesModal .modal-header .pms-close:hover::before {
  opacity: 0.75;
}

/* Particulars modal sizing tweaks */
#particularsModal .form-select[data-particulars-target="slotLength"] { max-width: 110px; }
#particularsModal input[type="time"] { min-width: 150px; width: 100%; box-sizing: border-box; }
/* Compact time spinner styling */
#particularsModal .time-spinner {
  min-width: 120px;
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-size: 0.9rem;
  padding-right: 10px; /* arrows moved outside the input */
}

/* Position the up/down buttons inside the input on the right, vertically centered */
#particularsModal .input-group { position: relative; }
/* Place the spinner buttons outside the input to the right. This makes
   positioning simpler across browsers and avoids clipping inside the input.
   The container is inline (static) and vertically centered next to the
   input. */
#particularsModal .input-group .ms-1.d-flex {
  position: static;
  margin-left: 0;
  margin-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  align-self: center; /* vertically center beside the input */
}
/* Ghost-style spinner buttons: no background/border so they appear as icons inside the input */
#particularsModal .input-group .ms-1.d-flex .btn {
  padding: 0;
  min-width: 30px;
  width: 30px;
  height: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #dee2e6;
  color: #495057;
}

/* Ensure SVG icons are compact and centered inside each half. */
#particularsModal .input-group .ms-1.d-flex .btn svg {
  display: block;
  width: 12px;
  height: 12px;
}
/* Position icons at the edges of each half without overflow.
   Use flex alignment on the button itself so icons are not clipped. */
#particularsModal .input-group .ms-1.d-flex .btn:first-child,
#particularsModal .input-group .ms-1.d-flex .btn:last-child {
  /* ensure the icons are centered inside each small button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* remove divider — user requested no horizontal line between arrows */
#particularsModal .input-group .ms-1.d-flex .btn.btn-sm { padding: 0; }
#particularsModal .input-group .ms-1.d-flex .btn:focus { box-shadow: none; }
#particularsModal .modal-content { overflow: visible; }

/* New: compact spinner box to the left of the input within .time-control
   - small bordered box matching form input border
   - two icon buttons stacked inside, each 50% height
   - input sits to the right of the box */
#particularsModal .time-control .input-group { display: flex; align-items: center; }
#particularsModal .time-control .input-group .ms-1.d-flex {
  display: flex;
  flex-direction: column;
  width: 20px;
  height: 34px;
  min-width: 20px;
  box-sizing: border-box;
  border: 1px solid #6c757d;
  border-radius: 0.25rem;
  overflow: visible;
  margin-left: 6px;
  background: #6c757d;
  gap: 1px;
}
#particularsModal .time-control .input-group .ms-1.d-flex .btn,
#particularsModal .time-control .input-group .ms-1.d-flex .pms-button {
  width: 100%;
  flex: 1;
  padding: 0;
  margin: 0;
  border: 0;
  background: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  line-height: 1;
  min-height: 15px;
}
#particularsModal .time-control .input-group .ms-1.d-flex .btn:hover,
#particularsModal .time-control .input-group .ms-1.d-flex .pms-button:hover {
  background: #5a6268;
}
#particularsModal .time-control .input-group .ms-1.d-flex .btn svg,
#particularsModal .time-control .input-group .ms-1.d-flex .pms-button svg { 
  width: 10px; 
  height: 10px;
  fill: #fff;
  display: block;
}
#particularsModal .time-control .time-spinner { margin-left: 0; }
/* Width for 24-hour time format */
#particularsModal .time-control .time-spinner { width: 80px; }
/* Ensure labels sit above the inputs (stack), not inline next to them by default.
  Time controls (with class .time-control) will be laid out inline so label and
  input share a kline for a compact form. */
#particularsModal .col-md-7 .row .col-6 { display: flex; flex-direction: column; align-items: stretch; }
#particularsModal .col-md-7 .row .col-6 .form-label { margin-bottom: 0.25rem; }

/* Inline time-control: label, spinner box and input on the same row, compact size.
   Prevent wrapping so the spinner box sits immediately to the right of the label.
   Input width is constrained so the layout doesn't wrap on narrow containers. */
#particularsModal .time-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap; /* keep label, box, and input on one line */
}
#particularsModal .time-control .form-label {
  flex: 0 0 75px; /* fixed label column */
  margin-bottom: 0;
  font-size: 0.95rem;
}
#particularsModal .time-control .input-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto; /* prevent input-group from growing full width */
}
#particularsModal .time-control .time-spinner {
  flex: 0;
  width: 80px; /* width for 24-hour format */
  min-width: 80px;
}

/* Increase modal max-width a touch for very wide screens */
.modal-xxl { max-width: 1300px; }

/* Make the day number centered and slightly bolder for readability */
.calendar-table td[class*="ms-day"] > div > div strong {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight: 600;
}

/* Edit Schedule Modal: Apply same styling as particulars modal */
#editScheduleModal .form-select[data-edit-schedule-target="slotLength"] { max-width: 110px; }
#editScheduleModal input[type="time"] { min-width: 150px; width: 100%; box-sizing: border-box; }
/* Compact time spinner styling */
#editScheduleModal .time-spinner {
  min-width: 120px;
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  font-size: 0.9rem;
  padding-right: 10px; /* arrows moved outside the input */
}

/* Position the up/down buttons inside the input on the right, vertically centered */
#editScheduleModal .input-group { position: relative; }
#editScheduleModal .input-group .ms-1.d-flex {
  position: static;
  margin-left: 0;
  margin-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  align-self: center; /* vertically center beside the input */
}
/* Ghost-style spinner buttons: no background/border so they appear as icons inside the input */
#editScheduleModal .input-group .ms-1.d-flex .btn {
  padding: 0;
  min-width: 30px;
  width: 30px;
  height: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #dee2e6;
  color: #495057;
}

/* Ensure SVG icons are compact and centered inside each half. */
#editScheduleModal .input-group .ms-1.d-flex .btn svg {
  display: block;
  width: 12px;
  height: 12px;
}
/* Position icons at the edges of each half without overflow. */
#editScheduleModal .input-group .ms-1.d-flex .btn:first-child,
#editScheduleModal .input-group .ms-1.d-flex .btn:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#editScheduleModal .input-group .ms-1.d-flex .btn.btn-sm { padding: 0; }
#editScheduleModal .input-group .ms-1.d-flex .btn:focus { box-shadow: none; }
#editScheduleModal .modal-content { overflow: visible; }

/* Compact spinner box styling */
#editScheduleModal .time-control .input-group { display: flex; align-items: center; }
#editScheduleModal .time-control .input-group .ms-1.d-flex {
  display: flex;
  flex-direction: column;
  width: 22px;
  height: 30px;
  min-width: 22px;
  box-sizing: border-box;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  overflow: hidden;
  margin-left: 8px; /* small gap between input and arrows */
  background: #fff;
}
#editScheduleModal .time-control .input-group .ms-1.d-flex .btn {
  width: 100%;
  height: 50%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
#editScheduleModal .time-control .input-group .ms-1.d-flex .btn svg { width: 12px; height: 12px; }
#editScheduleModal .time-control .time-spinner { margin-left: 0; }
/* Make the visible input smaller so boxes don't overflow the modal */
#editScheduleModal .time-control .time-spinner { width: 85px; }

/* Inline time-control: label, spinner box and input on the same row, compact size. */
#editScheduleModal .time-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap; /* keep label, box, and input on one line */
}
#editScheduleModal .time-control .form-label {
  flex: 0 0 75px; /* fixed label column */
  margin-bottom: 0;
  font-size: 0.95rem;
}
#editScheduleModal .time-control .input-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto; /* prevent input-group from growing full width */
}
#editScheduleModal .time-control .time-spinner {
  flex: 0;
  width: 70px; /* moderate fixed input width to keep spinner box visible */
  min-width: 70px;
}

/* ----------------------------------------
   Staff Assignment Matrix
---------------------------------------- */
.staff-matrix-container {
  max-width: 1600px;
}

.staff-matrix-table {
  min-width: 500px; /* ensures horizontal scroll on narrow screens */
}

.staff-matrix-name-col {
  min-width: 180px;
  width: 200px;
  white-space: nowrap;
}

.staff-matrix-date-col {
  min-width: 72px;
  width: 80px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.staff-matrix-name-cell {
  font-size: 0.9rem;
  vertical-align: middle;
}

/* Unavailable cell — greyed out to signal no action possible */
.staff-cell-unavailable {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

.staff-unavail-marker {
  font-size: 1rem;
  color: #bbb;
  user-select: none;
}

/* Warning cell — assigned but now marked unavailable */
.staff-cell-assigned-unavail {
  background-color: #fff3cd;
}

/* Legend dots next to the role selector */
.staff-legend-available-dot,
.staff-legend-unavailable-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
}
.staff-legend-available-dot   { background: #fff; border: 1px solid #adb5bd; }
.staff-legend-unavailable-dot { background: #f0f0f0; border: 1px solid #ccc; }

/* Assignment summary cards at the bottom of the page */
.staff-summary-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  min-width: 140px;
  font-size: 0.85rem;
}

/* Past-date column — muted header and cell background */
th.staff-date-past {
  background-color: #e9ecef !important;
  color: #6c757d !important;
}
th.staff-date-past .text-muted {
  color: #adb5bd !important;
}
td.staff-date-past {
  background-color: #f3f4f6;
}
td.staff-cell-unavailable.staff-date-past {
  background-color: #ebebeb;
}

.staff-legend-past-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
  background: #e9ecef;
  border: 1px solid #ccc;
}

/* Filter panel: month/year dropdowns side by side */
.ms-month-filter {
  flex: 1 1 auto; /* expands to fill available space */
  min-width: 0;
}
.ms-year-filter {
  flex: 0 0 auto;
  width: 6em;
}

.staff-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.staff-grid-top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  flex: 0 0 auto;
}

.staff-grid-top-scroll-inner {
  height: 1px;
}

.staff-grid-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.staff-grid-table {
  font-size: 0.82rem;
  width: max-content;
  min-width: 100%;
}

.staff-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

.staff-grid-table thead .staff-grid-rm-row .staff-grid-rm-heading {
  top: 0;
  z-index: 4;
}

.staff-grid-table thead tr:nth-child(2) th {
  top: 0;
}

.staff-grid-table th,
.staff-grid-table td {
  min-width: 7em;
  vertical-align: top;
}

.staff-grid-date-heading {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 8em !important;
  max-width: 8em;
  width: 8em;
  background: #fff;
  vertical-align: top;
}

.staff-grid-rm-heading {
  text-align: center;
  font-weight: 600;
  background: #e9ecef;
  border-bottom: 2px solid #dee2e6;
}

.staff-grid-staff-heading {
  background: #f8f9fa;
}

.staff-grid-bucket-heading {
  background: #e2e3e5;
  font-style: italic;
}

.staff-grid-bucket-cell {
  background: #f8f9fa;
}

.staff-grid-secondary-heading {
  background: #e9ecef;
  color: #6c757d;
  font-style: italic;
}

.staff-grid-secondary-cell {
  background: #f1f3f5;
}

.staff-grid-booking-secondary {
  background: #e9ecef;
  border-color: #adb5bd;
  color: #6c757d;
  cursor: default;
  opacity: 0.7;
}

.staff-grid-cross-role-booking {
  background: #f0f4f8;
  border: 1px dashed #9bb5d0;
  color: #5a7a9b;
  cursor: default;
}

.staff-grid-cross-role-label {
  font-size: 0.7rem;
  font-style: italic;
  display: block;
  color: #8a9bb0;
}

.staff-grid-unassigned-rm-heading {
  background: #f8d7da;
}

.staff-grid-rm-row .staff-grid-date-heading {
  z-index: 5;
  top: 0;
}

.staff-grid-date-heading.staff-grid-date-sunday {
  color: #dc3545;
}

.staff-grid-date-heading.staff-grid-date-holiday {
  color: #0d6efd;
  background: #e7f1ff !important;
}

.staff-grid-holiday-row .staff-grid-cell,
.staff-grid-holiday-row .staff-grid-unassigned-cell {
  background: #e7f1ff;
}

.staff-grid-date-annotation {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.15rem;
  white-space: normal;
  line-height: 1.1;
}

.staff-grid-date-info {
  color: #6c757d;
}

.staff-grid-cell.staff-grid-disabled {
  background: #e9ecef;
  cursor: not-allowed;
}

.staff-grid-booking {
  background: #e7f1ff;
  border: 1px solid #0d6efd;
  border-radius: 0.25rem;
  cursor: grab;
  font-size: 0.85rem;
  margin: 0.2rem;
  padding: 0.35rem;
}

.staff-grid-town-code {
  display: inline-block;
  font-size: 0.7rem;
  color: #6c757d;
  margin-left: 0.25rem;
}

.staff-grid-unassigned-booking {
  background: #f8f9fa;
  border-color: #6c757d;
}

.staff-grid-drop-target {
  background: #d1e7dd !important;
  outline: 2px dashed #198754;
}

.staff-grid-drop-error {
  background: #f8d7da !important;
}

.staff-grid-drop-not-allowed {
  background: #f8d7da !important;
  outline: 2px dashed #dc3545;
  cursor: not-allowed !important;
  position: relative;
}

.staff-grid-drop-not-allowed::after {
  content: "15-min appointments";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  color: #842029;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.staff-grid-col-dragging {
  opacity: 0.5;
  cursor: grabbing !important;
}

.staff-grid-col-drop-target {
  border-left: 3px solid #0d6efd !important;
  border-right: 3px solid #0d6efd !important;
}

.staff-grid-staff-heading[draggable="true"] {
  cursor: grab;
}

.staff-grid-staff-heading[draggable="true"]:active {
  cursor: grabbing;
}