/* ==========================================================================
     CUSTOM CALENDAR OVERLAY GRID STYLING
     ========================================================================== */
  #main-app-section.calendar-active .container {
    width: 96% !important;
    max-width: none !important;
  }
  #main-app-section.calendar-active .ss-top-bar {
    max-width: 1280px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  @media only screen and (max-width: 992px) {
    #main-app-section.calendar-active .ss-top-bar {
      width: 85%;
    }
  }
  @media only screen and (max-width: 600px) {
    #main-app-section.calendar-active .ss-top-bar {
      width: 90%;
    }
  }

  /* #calendarScrollableArea sets overflow-x:auto inline but never an explicit overflow-y —
     that leaves the vertical axis to the CSS spec's implicit auto-promotion rather than a
     declared value, which mobile Safari's touch axis-lock heuristics can reportedly mishandle
     on elements combining -webkit-overflow-scrolling:touch with an ambiguous overflow-y (see
     styles.css's #calendarScrollableArea rule). Declaring it explicitly costs nothing on
     desktop (it's already the spec-equivalent behavior there) and is the most likely fix for
     touch scrolling appearing "stuck" partway down the day on mobile. Also gives it a real
     height ceiling on mobile specifically — without one, this element and .calendar-grid-wrapper
     (both otherwise unconstrained in height) just grow to the full day's content height and rely
     on the whole PAGE scrolling instead, which pushes the sticky date header out of view; a
     bounded, explicitly-scrollable grid area is both the more reliable fix and better UX (date
     header and column headers stay visible while only the time grid scrolls). */
  #calendarScrollableArea {
    overflow-y: auto;
  }
  @media only screen and (max-width: 992px) {
    #calendarScrollableArea {
      max-height: calc(100vh - 260px); /* fallback for browsers without dvh support */
      max-height: calc(100dvh - 260px); /* accounts for mobile browser chrome (address bar etc.) showing/hiding */
    }
  }

  .calendar-grid-wrapper {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
    overflow: hidden;
    margin-top: 15px;
  }

  .calendar-grid-header-row {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .calendar-grid-header-cell {
    flex: 1;
    min-width: 150px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 10px 3px 10px;
    text-align: center;
    font-weight: 600;
    color: #004d40;
    font-size: 0.95rem;
    border-left: 1px solid #e0e0e0;
  }

  .calendar-grid-header-cell.time-header-spacer {
    position: sticky;
    left: 0;
    z-index: 26;
    flex: 0 0 80px;
    min-width: 80px;
    border-left: none;
    background: #f1f3f4;
    border-right: 1px solid #e0e0e0;
  }

  :root, #matGridContainer {
    --pixels-per-minute: 2;
    --column-min-width: 150px;
    --total-minutes: 540;
  }

  .calendar-grid-body-row {
    display: flex;
    position: relative;
    background: #ffffff;
    height: calc(var(--total-minutes) * var(--pixels-per-minute) * 1px);
  }

  .calendar-time-axis {
    position: sticky;
    left: 0;
    z-index: 25;
    flex: 0 0 80px;
    min-width: 80px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    user-select: none;
    border-right: 1px solid #cccccc;
    height: calc(var(--total-minutes) * var(--pixels-per-minute) * 1px);
  }

  .calendar-time-axis-cell {
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #dcdcdc;
    flex-shrink: 0;
    height: calc(30 * var(--pixels-per-minute) * 1px);
  }
  .calendar-time-axis-cell.half-hour-cell {
    border-bottom: 1px dashed #e8e8e8;
  }
  .calendar-time-axis-cell span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: #546e7a;
    font-weight: 500;
    background: #fafafa;
    padding: 0 4px;
    z-index: 2;
  }
  .calendar-time-axis-cell.half-hour-cell span {
    color: #90a4ae;
    font-size: 0.74rem;
  }

  .calendar-columns-container {
    display: flex;
    flex-grow: 1;
    position: relative;
  }

  .calendar-grid-stylist-column {
    flex: 1;
    min-width: var(--column-min-width);
    position: relative;
    border-left: 1px solid #cccccc;
    background: #ffffff;
    box-sizing: border-box;
  }

  .calendar-grid-stylist-column:first-child {
    border-left: none;
  }

  .calendar-grid-line-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
  }

  .calendar-grid-horizontal-line {
    box-sizing: border-box;
    height: calc(30 * var(--pixels-per-minute) * 1px);
  }
  .calendar-grid-horizontal-line.hour-line {
    border-bottom: 1px solid #dcdcdc;
  }
  .calendar-grid-horizontal-line.half-hour-line {
    border-bottom: 1px dashed #e8e8e8;
  }

  .calendar-grid-events-layer {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 5;
  }

  .calendar-grid-event-card {
    position: absolute;
    left: 6px;
    right: 6px;
    border-radius: 8px;
    padding: 8px 12px;
    color: #ffffff;
    font-size: 0.85rem;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: move;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    top: calc(var(--start-offset) * var(--pixels-per-minute) * 1px);
    height: calc(var(--duration) * var(--pixels-per-minute) * 1px);
  }
  .calendar-grid-event-card *, .dragging-clone * {
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .calendar-grid-event-card:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 12;
  }

  .calendar-grid-event-card.pending {
    background: #78909c !important;
  }

  .calendar-grid-event-card.draft {
    background: #7e57c2 !important;
    border: 2px dashed rgba(255, 255, 255, 0.75) !important;
  }

  .calendar-grid-event-card.break {
    background: #ff8f00 !important;
    cursor: pointer;
  }

  /* Time range, always pinned to the bottom edge of the block so it stays readable */
  .calendar-grid-event-time {
    margin-top: auto;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.97;
    line-height: 1.1;
    padding-top: 4px;
    padding-bottom: 4px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }

  /* "Now" indicator: a red line spanning every stylist column at the current time.
     updateCurrentTimeLine() (calendar-grid.js) sets --current-time-offset in minutes since
     day start — this rule was missing the actual top: calc(...) that turns that into a
     position, same idiom .calendar-grid-event-card already uses for --start-offset, so the
     line never moved off its default position regardless of the real time. */
  .calendar-current-time-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    top: calc(var(--current-time-offset) * var(--pixels-per-minute) * 1px);
    border-top: 2px solid #e53935;
    z-index: 15;
    pointer-events: none;
  }
  .calendar-current-time-line::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e53935;
    box-shadow: 0 0 0 2px rgba(229,57,53,0.25);
  }
  .calendar-current-time-badge {
    position: absolute;
    left: 4px;
    top: -9px;
    background: #e53935;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 10px;
    z-index: 16;
    pointer-events: none;
  }

  .calendar-grid-event-resize-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    cursor: ns-resize;
    background: rgba(255,255,255,0.18);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    touch-action: none;
    transition: filter 0.1s ease;
  }

  .calendar-grid-event-resize-bar:hover {
    filter: brightness(1.2);
  }

  /* Conflict highlighting overlay and badge */
  .calendar-grid-conflict-zone {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--start-offset) * var(--pixels-per-minute) * 1px);
    height: calc(var(--duration) * var(--pixels-per-minute) * 1px);
    background: repeating-linear-gradient(
      45deg,
      rgba(244, 67, 54, 0.12),
      rgba(244, 67, 54, 0.12) 10px,
      rgba(244, 67, 54, 0.22) 10px,
      rgba(244, 67, 54, 0.22) 20px
    );
    border-top: 1px dashed #f44336;
    border-bottom: 1px dashed #f44336;
    border-left: 3px solid #f44336;
    border-right: 3px solid #f44336;
    z-index: 11;
    pointer-events: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .calendar-grid-conflict-zone .conflict-badge {
    background-color: #d32f2f;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    white-space: nowrap;
  }

  /* Unavailable/Fully Booked zone overlay and badge */
  .calendar-grid-unavailable-zone {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--start-offset) * var(--pixels-per-minute) * 1px);
    height: calc(var(--duration) * var(--pixels-per-minute) * 1px);
    background: repeating-linear-gradient(
      45deg,
      rgba(97, 97, 97, 0.28),
      rgba(97, 97, 97, 0.28) 10px,
      rgba(66, 66, 66, 0.38) 10px,
      rgba(66, 66, 66, 0.38) 20px
    ) !important;
    border-top: 2.5px dashed #424242 !important;
    border-bottom: 2.5px dashed #424242 !important;
    border-left: 4px solid #424242 !important;
    border-right: 4px solid #424242 !important;
    z-index: 15 !important;
    pointer-events: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .calendar-grid-unavailable-zone .unavailable-badge {
    background-color: #546e7a;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    white-space: nowrap;
  }

  /* Stylist column drag-over highlighting */
  .calendar-grid-stylist-column.column-drag-hover {
    background: color-mix(in oklch, var(--primary-color) 12%, white) !important;
    transition: background 0.15s ease;
  }

  /* Original block placeholder styling while dragging custom reposition clone */
  .calendar-grid-event-card.dragging-placeholder {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border: 2px dashed #b0bec5 !important;
    box-shadow: none !important;
    color: transparent !important;
    transform: none !important;
  }
  .calendar-grid-event-card.dragging-placeholder * {
    visibility: hidden !important;
  }

  /* Customer's requested-stylist line shown on every booking card */
  .calendar-grid-event-choice {
    font-size: 0.72rem;
    margin-top: 4px;
    opacity: 0.9;
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 3px;
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Backlog ("Χωρίς προτίμηση") column — visually distinct as the assignment inbox */
  .calendar-grid-header-cell.backlog-header {
    background: #eef2f4;
    color: #455a64;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .calendar-grid-header-cell.backlog-header .material-icons {
    font-size: 1rem;
  }
  .calendar-grid-stylist-column.backlog-column {
    background: repeating-linear-gradient(
      45deg,
      #fafbfc,
      #fafbfc 10px,
      #f4f6f7 10px,
      #f4f6f7 20px
    );
    border-left: 2px dashed #cfd8dc;
    border-right: 1px solid #e0e0e0;
  }
  .calendar-grid-stylist-column.backlog-column.column-drag-hover {
    background: #fff3e0 !important; /* warm highlight when assigning out */
  }

  /* ---- NEW RESERVATION MODAL ---- */
  #newReservationModal {
    width: 520px;
    max-width: 94vw;
    max-height: 90vh;  /* fit content; no dead vertical space */
    max-height: 90dvh;
  }
  /* Content scrolls on its own (footer stays put); no reliance on flex because
     Materialize forces inline display:block on the modal when it opens. */
  #newReservationModal .modal-content {
    max-height: calc(90vh - 62px);
    max-height: calc(90dvh - 62px);
    overflow-y: auto;
  }
  #newResDragHandle {
    cursor: move;
    user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #newResDragHandle .drag-hint {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: #b0bec5;
  }

  /* Collapsible service categories styled compactly in a 2-column grid layout */
  #newResServices {
    padding: 0;
    border: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
    margin-top: 5px;
  }
  .res-cat {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 0;
    overflow: hidden;
    background: #fff;
  }
  .res-cat summary {
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #37474f;
    background: #fafafa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
    user-select: none;
    list-style: none;
  }
  .res-cat summary::-webkit-details-marker { display: none; }
  .res-cat summary i { transition: transform 0.2s ease; color: #78909c; font-size: 1.15rem; }
  .res-cat[open] summary i { transform: rotate(180deg); color: #00796b; }
  .res-svc-row {
    padding: 6px 12px;
    border-top: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
  }
  .res-svc-row label { display: flex; align-items: center; margin: 0; cursor: pointer; }
  .res-svc-row .res-svc-name { font-size: 0.85rem; color: #37474f; }
  .res-svc-row .res-svc-dur { font-size: 0.74rem; color: #90a4ae; margin-left: 6px; }
  .res-svc-row.selected { background: #e0f2f1; box-shadow: inset 4px 0 0 #00796b; }

  /* Phone / time / stylist share a row that wraps cleanly on small screens */
  #newResFieldRow { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  #newResFieldRow .input-field { flex: 1 1 140px; margin-top: 8px; }

  @media (max-width: 600px) {
    #newReservationModal { width: 94vw; max-height: 92vh; max-height: 92dvh; }
    #newResDragHandle .drag-hint { display: none; }
    #newResServices { grid-template-columns: 1fr; }
  }

  /* Disable Materialize range slider value bubble (fixes top-left floating triangle bug) */
  input[type=range] + .thumb {
    display: none !important;
  }

  /* --- Composite (multi-phase) workflow bookings --- */
  .calendar-grid-event-card.wf-group {
    border: 3px solid rgba(255, 255, 255, 0.7); /* overridden inline per group */
  }

  .wf-part-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 0 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
  }

  .calendar-grid-event-card.wf-group-linked {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wf-group-color, #fff) !important;
    z-index: 6;
  }

  .res-svc-row.res-svc-disabled {
    opacity: 0.45;
    pointer-events: none;
  }