/**
 * Calendar Styles - סגנונות לוח שנה
 * כל הסגנונות של לוח השנה שצריכים להיות זמינים בכל מקום
 * Organized with proper nesting for maintainability
 */

/* ========================================
   EMPTY CALENDARS STATE - כרטיס כשאין יומנים
   ======================================== */

.booking-calendar-empty-state {
  font-family: var(--font-primary);
}

.booking-calendar-empty-state__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8, 2rem) var(--space-5, 1.25rem);
  border: 3px solid var(--color-border-light-blue, #c5d9f0);
  border-radius: var(--radius-xl, 12px);
  text-align: center;
  min-height: 200px;
}

.booking-calendar-empty-state__icon {
  margin-bottom: var(--space-4, 1rem);
  color: var(--color-secondary, #2271b1);
}

.booking-calendar-empty-state__icon svg {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto;
}

.booking-calendar-empty-state__message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-gray-800, #1e293b);
}

/* ========================================
   MAIN CALENDAR CONTAINER - מיכל לוח השנה הראשי
   ======================================== */

.appointments-calendar, .booking-calendar-shortcode {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--color-border-light-blue);
  border-radius: var(--radius-xl);
  width: 478px;

  /* IMPORTANT: Don't use universal selector (*) - it affects all children including JetFormBuilder forms */
  /* Only apply font to specific elements, not all children */
  > *,
  .top-section,
  .bottom-section,
  .widget-selection-form,
  .form-field-select,
  .days-carousel,
  .time-slots-container {
    font-family: var(--font-primary);
  }
  
  /* Explicitly exclude JetFormBuilder forms from our styles */
  .jet-form-builder,
  .jet-form-builder * {
    font-family: inherit !important; /* Let JetFormBuilder use its own fonts */
  }

  h3 {
    margin-top: 0;
    margin-bottom: var(--space-5);
    color: var(--color-gray-900);
    font-size: 1.3em;
    font-weight: 600;
  }

  /* ========================================
     TOP SECTION - החלק העליון
     ======================================== */

  .top-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--color-bg-light-blue);
    padding: 16px 12px 16px 12px;
  }

  /* ========================================
     FORM ELEMENTS - אלמנטי טופס
     ======================================== */

  .widget-selection-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .form-field-select {
    flex-grow: 1;
    width: auto;
    margin-left: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid #d0d7e8;
    border-radius: var(--radius-base);
    background-color: var(--color-white);
    font-size: 14px;
    color: #495057;
    transition: var(--transition-base);
    vertical-align: middle;

    &:first-of-type {
      margin-left: 0;
    }

    &:focus {
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    &:hover {
      border-color: #adb5bd;
    }
  }
}

/* יומן מורחב – אותם סגנונות גלובליים לשדות בחירה */
.bcm-dialog .form-field-select {
  flex-grow: 1;
  width: auto;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-base);
  background-color: var(--color-white);
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  transition: var(--transition-base);
  vertical-align: middle;

  &:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-google-blue-alpha-20);
  }

  &:hover {
    border-color: var(--color-gray-400);
  }
}

/* המשך בלוק לוח השנה (לאחר form-field-select) */
.appointments-calendar,
.booking-calendar-shortcode {

  /* ========================================
     CALENDAR HEADER - כותרת לוח השנה
     ======================================== */

  .month-and-year {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-secondary);
  }

  /* ========================================
     DAYS CAROUSEL - קרוסלת ימים
     ======================================== */

  .days-carousel {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .days-container-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    /* Max-width will be set dynamically by JavaScript to show exactly 6 days */
  }

  .days-container {
    display: flex;
    gap: 26px;
    padding: 0 10px;
    overflow-x: auto;
    scroll-behavior: auto; /* Changed from 'smooth' to allow jQuery animate to control scrolling */
    -webkit-overflow-scrolling: touch;
    
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    
    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }
    
    /* Enable drag scrolling on desktop */
    cursor: grab;
    
    &:active {
      cursor: grabbing;
    }
  }

  /* Carousel Navigation Arrows */
  .days-carousel-arrow {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-secondary);
    background: none !important;
    border: none !important;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    outline: none !important;
    
    .dashicons {
      font-size: 20px;
      width: 20px;
      height: 20px;
      line-height: 1;
    }
    
    &:hover:not(:disabled):not(.disabled) {
      color: var(--color-primary);
    }
    
    &:active:not(:disabled):not(.disabled) {
      transform: scale(0.95);
    }
    
    &:focus,
    &:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }
    
    &:disabled,
    &.disabled {
      color: #b0b0b0;
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  .days-carousel-arrow-prev {
    order: 1;
  }

  .days-container-wrapper {
    order: 2;
    flex: 1;
  }

  .days-carousel-arrow-next {
    order: 3;
  }

  /* ========================================
     DAY TABS - טאבי ימים
     ======================================== */

  .day-tab {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0 auto;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* Prevent drag on day tabs (let container handle dragging) */
    -webkit-user-drag: none;
    user-drag: none;

    /* Day Tab Elements */
    .day-abbrev {
      margin: 0 auto;
      width: 20px;
      height: 13px;
      font-family: var(--font-primary);
      font-style: normal;
      font-weight: 400;
      font-size: 10px;
      line-height: 13px;
      text-align: center;
      color: var(--color-secondary);
    }

    .day-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: transparent;
      border-radius: var(--radius-sm);
      width: 38px;
      height: 60px;
      transition: var(--transition-slow);
    }

    .day-number {
      margin: 0 auto;
      width: 20px;
      height: 26px;
      font-family: var(--font-primary);
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 26px;
      text-align: center;
      color: var(--color-secondary);
    }

    .day-slots-count {
      margin: 0 auto;
      width: 20px;
      height: 20px;
      background: var(--color-secondary);
      border-radius: 999px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-family: var(--font-primary);
      font-style: normal;
      font-weight: 700;
      font-size: 10px;
      line-height: 13px;
      text-align: center;
      color: var(--color-white);
    }

    /* Day Tab States - Active */
    &.active, &.selected, &:hover {
      .day-content {
        background-color: var(--color-primary);
      }

      .day-number {
        color: var(--color-white);
        font-weight: 700;
      }

      .day-slots-count {
        color: var(--color-primary);
        background: var(--color-primary-light);
      }
    }

  
    /* Day Tab States - Disabled */
    &.disabled {
      cursor: not-allowed;
      opacity: 0.5;

      .day-number {
        color: var(--color-disabled);
      }

      .day-slots-count {
        background-color: var(--color-disabled);
      }
    }
  }

  /* ========================================
     BOTTOM SECTION - החלק התחתון
     ======================================== */

  .bottom-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
    flex: 1;
    gap: 16px;
    padding: 16px;
  }

  /* ========================================
     TIME SLOTS CONTAINER - מיכל תורי זמן
     ======================================== */

  .time-slots-container {
    flex: 1;
    height: 164px;
  }

  .time-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .no-slots {
    text-align: center;
    color: var(--color-gray-500);
    font-style: italic;
    padding: var(--space-10) var(--space-5);
    margin: 0;
  }

  /* ========================================
     TIME SLOTS - תורי זמן
     ======================================== */

  .time-slot,
  .time-slot-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    transition: var(--transition-slow);
    cursor: pointer;
    height: 32px;
    width: 51px;
    background: var(--color-gray-100);
    color: var(--color-secondary);

    .slot-time {
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      color: var(--color-secondary);
    }

    /* Time Slot States - Hover */
    &:hover:not(.booked):not(.disabled) {
      background: var(--color-secondary);
      color: var(--color-white);
      transform: translateY(-3px);
      box-shadow: var(--shadow-sm);

      .slot-time {
        color: var(--color-white);
      }
    }

    /* Time Slot States - Selected */
    &.selected {
      background: var(--color-secondary);
      border-color: var(--color-secondary);
      color: var(--color-white);
      box-shadow: var(--shadow-primary-md);
      transform: translateY(-2px);

      .slot-time {
        color: var(--color-white);
      }
    }

    /* Time Slot States - Booked (Hidden) */
    &.booked {
      display: none;
    }

    /* Time Slot States - Disabled */
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

  }

  /* Overflow indicator – כמו time-slot-badge רגיל אבל ללא רקע ועם cursor רגיל */
  .time-slot-overflow {
    background: transparent !important;
    cursor: default;
    pointer-events: none;

    &:hover:not(.booked):not(.disabled) {
      background: transparent !important;
      color: var(--color-secondary);
      transform: none;
      box-shadow: none;
    }
  }

  /* ========================================
     ACTION BUTTONS - כפתורי פעולה
     ======================================== */

  .action-buttons-container {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    .btn {
      flex: 1;
    }
  }

  /* View All Button - כפתור צפייה בכל התורים */
  .ap-view-all-btn {
    background-color: var(--color-white) !important;
    border: 1px solid #e8e8e8 !important; /* גבול עדין אפור בהיר */
    color: var(--color-primary) !important; /* #d82466 - ורוד/מגנטה בולט */
    border-radius: 12px !important; /* פינות מעוגלות מאוד */
    font-weight: 700 !important; /* מודגש */
    font-family: var(--font-primary) !important; /* sans-serif */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; /* צל עדין מאוד */
    transition: all var(--transition-base) !important;
    
    &:hover:not(:disabled) {
      background-color: var(--color-white) !important;
      border-color: #e0e0e0 !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
      color: var(--color-primary) !important;
    }
    
    &:active:not(:disabled) {
      transform: translateY(1px) !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    }
    
    &:focus-visible {
      outline: 2px solid var(--color-primary) !important;
      outline-offset: 2px !important;
    }
    
    &:disabled {
      background-color: var(--color-white) !important;
      border-color: #e8e8e8 !important;
      color: #b0b0b0 !important;
      cursor: not-allowed !important;
    }
  }
}

/* ========================================
   CALENDAR GRID LAYOUT - פריסת רשת לוח השנה (למסכים גדולים - דשבורד אדמין)
   ======================================== */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);

  .time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4);
    max-height: 300px;
    overflow-y: auto;
  }

  .time-slot {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 0.85em;
    transition: all var(--transition-base);
    white-space: nowrap;
    min-width: 80px;
    justify-content: center;

    .time {
      font-weight: 600;
    }

    .status {
      font-size: 0.8em;
      padding: 4px 8px;
      border-radius: var(--radius-base);
      font-weight: 500;
    }

    .patient {
      font-size: 0.8em;
      color: var(--color-gray-500);
      font-style: italic;
    }
  }
}

/* ========================================
   EXPANDED APPOINTMENTS MODAL (bcm-*)
   ======================================== */

/* Body lock when modal is open */
.bcm-body-lock {
  overflow: hidden;
}

/* Overlay / Backdrop
   כשהמודל נמצא בתוך ה-widget (לפני המעבר ל-body ב-JS) הוא לא מוצג כלל.
   לאחר שה-JS מעביר אותו ל-body ומוסיף bcm-open – הוא מוצג. */
.bcm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  pointer-events: none;

  @media (min-width: 600px) {
    align-items: center;
  }

  &.bcm-open {
    display: flex;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: all;
  }
}

/* Dialog box */
.bcm-dialog {
  background: var(--color-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 580px;
  height: 92vh;
  height: 92dvh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: var(--transition-smooth);
  overflow: hidden;
  direction: rtl;
  font-family: var(--font-primary);
  box-shadow: var(--shadow-xl);

  @media (min-width: 600px) {
    border-radius: var(--radius-xl);
    transform: translateY(24px) scale(0.97);
  }

  &.bcm-dialog--visible {
    transform: translateY(0) scale(1);
  }
}

/* Header */
.bcm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-light-blue);
  flex-shrink: 0;
  font-family: var(--font-primary);

  .bcm-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
  }

  .bcm-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--color-text-caption);
    transition: var(--transition-base);
    flex-shrink: 0;

    &:hover {
      background: var(--color-gray-200);
      color: var(--color-secondary);
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }
}

/* Filters – משתנים גלובליים כמו בטופס הראשי */
.bcm-filters {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light-blue);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  font-family: var(--font-primary);
}

.bcm-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  align-items: center;

  &.bcm-filters-row--selects {
    .bcm-select {
      flex: 1 1 140px;
    }
  }

  &.bcm-filters-row--dates {
    .bcm-field {
      flex: 1 1 110px;
    }
  }

  &.bcm-filters-row--days {
    align-items: center;
    gap: var(--spacing-3xs);

    .bcm-update-btn {
      margin-right: auto;
    }
  }
}

/* Input – שדות תאריך/שעה */
.bcm-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  font-family: var(--font-primary);

  .bcm-label {
    font-size: 11px;
    color: var(--color-text-caption);
    font-weight: 500;
  }

  .bcm-input {
    height: 34px;
    padding: 0 var(--spacing-2xs);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-base);
    background: var(--color-white);
    font-size: var(--font-size-sm);
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    transition: var(--transition-base);

    &:focus {
      outline: 0;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 0.2rem var(--color-google-blue-alpha-20);
    }

    &:hover {
      border-color: var(--color-gray-400);
    }
  }
}

/* Day checkboxes – פילטר ימי שבוע */
.bcm-day-label {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-primary);

  input[type="checkbox"] {
    display: none;
  }

  .bcm-day-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    color: var(--color-text-caption);
    transition: var(--transition-base);
  }

  input:checked + .bcm-day-pill {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
  }

  &:hover .bcm-day-pill {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
  }
}

/* Update button – עיצוב מ-.btn.btn-secondary; רק override לayout */
.bcm-update-btn {
  height: 34px;
}

/* Results list */
.bcm-results {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 0 var(--spacing-md) var(--spacing-12);
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-primary);
}

/* Day block */
.bcm-day-block {
  padding: var(--spacing-sm) 0 var(--spacing-2xs);
  border-bottom: 1px solid var(--color-gray-100);

  &:last-child {
    border-bottom: none;
  }

  .bcm-day-title {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-secondary);
  }
}

/* Slots במודל – אותו מראה כמו ביומן הרגיל (time-slot-badge) */
.bcm-dialog .time-slots-grid.bcm-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  font-family: var(--font-primary);
}

.bcm-dialog .time-slots-grid .time-slot-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: var(--transition-slow);
  cursor: pointer;
  height: 32px;
  width: 51px;
  background: var(--color-gray-100);
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-primary);
}

.bcm-dialog .time-slots-grid .time-slot-badge:hover:not(.booked):not(.disabled) {
  background: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

.bcm-dialog .time-slots-grid .time-slot-badge.bcm-slot--selected,
.bcm-dialog .time-slots-grid .time-slot-badge.selected {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-md);
  transform: translateY(-2px);
}

/* No slots / empty */
.bcm-no-slots {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
}

.bcm-empty {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--color-gray-500);
  font-family: var(--font-primary);

  .bcm-empty-icon {
    font-size: 32px;
    display: block;
    margin-bottom: var(--spacing-2xs);
  }

  p {
    margin: 0;
    font-size: var(--font-size-base);
  }
}

/* Load more – עיצוב מ-.btn.btn-secondary; רק override צורה */
.bcm-load-more-wrap {
  text-align: center;
  padding: var(--spacing-12) 0 var(--spacing-3xs);
}

.bcm-load-more-btn {
  border-radius: var(--radius-full);
}

/* Footer */
.bcm-footer {
  padding: var(--spacing-12) var(--spacing-md);
  border-top: 1px solid var(--color-border-light-blue);
  flex-shrink: 0;
  background: var(--color-white);
  font-family: var(--font-primary);
}

/* כפתור הזמן תור – עיצוב מ-.btn.btn-primary; רק layout */
.bcm-book-btn {
  display: block;
  width: 100%;
  height: 48px;
}