@dialiq/calendar-component 1.1.4 → 1.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.esm.js +3 -3
  2. package/dist/index.js +3 -3
  3. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -7437,7 +7437,7 @@ function styleInject(css, ref) {
7437
7437
  }
7438
7438
  }
7439
7439
 
7440
- var css_248z$2 = ".modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n}\n\n.modal-content {\n background: #ffffff;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n width: 100%;\n max-width: 500px;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n border-bottom: 1px solid #e9ecef;\n}\n\n.modal-header h3 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #212529;\n}\n\n.modal-close-btn {\n background: none;\n border: none;\n font-size: 32px;\n line-height: 1;\n color: #6c757d;\n cursor: pointer;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n}\n\n.modal-close-btn:hover {\n background: #e9ecef;\n color: #212529;\n}\n\n.modal-body {\n padding: 20px;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 20px;\n border-top: 1px solid #e9ecef;\n}\n\n.modal-error {\n background: #f8d7da;\n color: #842029;\n padding: 12px;\n border-radius: 4px;\n margin-bottom: 16px;\n font-size: 14px;\n}\n\n.form-group {\n margin-bottom: 16px;\n}\n\n.form-group label {\n display: block;\n font-weight: 500;\n font-size: 14px;\n color: #212529;\n margin-bottom: 6px;\n}\n\n.form-group input,\n.form-group textarea {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n font-size: 14px;\n font-family: inherit;\n color: #212529;\n transition: border-color 0.2s;\n box-sizing: border-box;\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n outline: none;\n border-color: #0d6efd;\n box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\n}\n\n.form-group textarea {\n resize: vertical;\n}\n\n.form-group small {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.form-group select {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n font-size: 14px;\n font-family: inherit;\n color: #212529;\n background: #ffffff;\n cursor: pointer;\n transition: border-color 0.2s;\n box-sizing: border-box;\n}\n\n.form-group select:focus {\n outline: none;\n border-color: #0d6efd;\n box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\n}\n\n.selected-items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 8px;\n}\n\n.selected-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n background: #e7f1ff;\n border: 1px solid #b6d4fe;\n border-radius: 4px;\n font-size: 13px;\n color: #0d6efd;\n}\n\n.remove-item-btn {\n background: none;\n border: none;\n padding: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: #0d6efd;\n cursor: pointer;\n border-radius: 50%;\n transition: background-color 0.2s;\n}\n\n.remove-item-btn:hover {\n background: #b6d4fe;\n color: #084298;\n}\n\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n}\n\n.modal-btn {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.modal-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.modal-btn-primary {\n background: #0d6efd;\n color: #ffffff;\n}\n\n.modal-btn-primary:hover:not(:disabled) {\n background: #0b5ed7;\n}\n\n.modal-btn-secondary {\n background: #6c757d;\n color: #ffffff;\n}\n\n.modal-btn-secondary:hover:not(:disabled) {\n background: #5c636a;\n}\n\n@media (max-width: 576px) {\n .modal-content {\n max-width: 100%;\n }\n\n .form-row {\n grid-template-columns: 1fr;\n }\n}\n";
7440
+ var css_248z$2 = "/* Modal CSS - Inherits CSS variables from parent, uses fallbacks */\r\n.modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n background: var(--calendar-bg, #fff);\r\n border-radius: 8px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\r\n width: 100%;\r\n max-width: 500px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.modal-header h3 {\r\n margin: 0;\r\n font-size: 20px;\r\n font-weight: 600;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-close-btn {\r\n background: none;\r\n border: none;\r\n font-size: 32px;\r\n line-height: 1;\r\n color: var(--calendar-text-secondary, #666);\r\n cursor: pointer;\r\n padding: 0;\r\n width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-close-btn:hover {\r\n background: var(--calendar-border-color, #e0e0e0);\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-body {\r\n padding: 20px;\r\n}\r\n\r\n.modal-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n padding: 20px;\r\n border-top: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.modal-error {\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n color: var(--calendar-error-color, #d13438);\r\n padding: 12px;\r\n border-radius: 4px;\r\n margin-bottom: 16px;\r\n font-size: 14px;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 16px;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: var(--calendar-text-primary, #333);\r\n margin-bottom: 6px;\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--calendar-text-primary, #333);\r\n background: var(--calendar-bg, #fff);\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus {\r\n outline: none;\r\n border-color: var(--calendar-accent, #0078d4);\r\n box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);\r\n}\r\n\r\n.form-group textarea {\r\n resize: vertical;\r\n}\r\n\r\n.form-group small {\r\n display: block;\r\n margin-top: 4px;\r\n font-size: 12px;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.form-group select {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--calendar-text-primary, #333);\r\n background: var(--calendar-bg, #fff);\r\n cursor: pointer;\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group select:focus {\r\n outline: none;\r\n border-color: var(--calendar-accent, #0078d4);\r\n box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);\r\n}\r\n\r\n.selected-items {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n margin-top: 8px;\r\n}\r\n\r\n.selected-item {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 4px 8px;\r\n background: var(--calendar-today-bg, #e6f2ff);\r\n border: 1px solid var(--calendar-accent, #0078d4);\r\n border-radius: 4px;\r\n font-size: 13px;\r\n color: var(--calendar-accent, #0078d4);\r\n}\r\n\r\n.remove-item-btn {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n width: 18px;\r\n height: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 16px;\r\n color: var(--calendar-accent, #0078d4);\r\n cursor: pointer;\r\n border-radius: 50%;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.remove-item-btn:hover {\r\n background: var(--calendar-border-color, #e0e0e0);\r\n color: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n}\r\n\r\n.modal-btn {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.modal-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.modal-btn-primary {\r\n background: var(--calendar-accent, #0078d4);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-primary:hover:not(:disabled) {\r\n background: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.modal-btn-secondary {\r\n background: var(--calendar-text-secondary, #666);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-secondary:hover:not(:disabled) {\r\n background: var(--calendar-text-muted, #999);\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .modal-content {\r\n max-width: 100%;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n";
7441
7441
  styleInject(css_248z$2);
7442
7442
 
7443
7443
  const generateConfirmationNumber = () => {
@@ -7596,7 +7596,7 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
7596
7596
  React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
7597
7597
  };
7598
7598
 
7599
- var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\n\n.booking-details-modal {\n max-width: 500px;\n}\n\n.detail-section {\n padding: 12px 0;\n border-bottom: 1px solid #e9ecef;\n}\n\n.detail-section:last-child {\n border-bottom: none;\n}\n\n.detail-row {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n}\n\n.detail-row:last-child {\n margin-bottom: 0;\n}\n\n.detail-row.full-width {\n flex-direction: column;\n}\n\n.detail-label {\n font-weight: 500;\n color: #6c757d;\n font-size: 14px;\n min-width: 100px;\n}\n\n.detail-label-muted {\n color: #adb5bd;\n font-size: 12px;\n}\n\n.detail-value {\n font-weight: 500;\n color: #212529;\n font-size: 14px;\n text-align: right;\n}\n\n.detail-value-muted {\n color: #adb5bd;\n font-size: 12px;\n font-family: monospace;\n}\n\n.detail-description {\n margin: 8px 0 0 0;\n color: #495057;\n font-size: 14px;\n line-height: 1.5;\n white-space: pre-wrap;\n}\n\n.participants-list {\n margin: 8px 0 0 0;\n padding-left: 20px;\n list-style-type: disc;\n}\n\n.participant-item {\n color: #495057;\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.modal-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.modal-delete-btn {\n background: none;\n border: none;\n color: #dc3545;\n cursor: pointer;\n padding: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n}\n\n.modal-delete-btn:hover:not(:disabled) {\n background: #f8d7da;\n}\n\n.modal-delete-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.delete-confirm-box {\n background: #fff3cd;\n border: 1px solid #ffc107;\n border-radius: 4px;\n padding: 16px;\n margin-bottom: 16px;\n}\n\n.delete-confirm-box p {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: #856404;\n}\n\n.delete-confirm-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n\n.modal-btn-danger {\n background: #dc3545;\n color: #ffffff;\n}\n\n.modal-btn-danger:hover:not(:disabled) {\n background: #bb2d3b;\n}\n\n@media (max-width: 576px) {\n .booking-details-modal {\n max-width: 100%;\n }\n\n .detail-row {\n flex-direction: column;\n gap: 4px;\n }\n\n .detail-value {\n text-align: left;\n }\n}\n";
7599
+ var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\r\n\r\n.booking-details-modal {\r\n max-width: 500px;\r\n}\r\n\r\n.detail-section {\r\n padding: 12px 0;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.detail-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.detail-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.detail-row:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.detail-row.full-width {\r\n flex-direction: column;\r\n}\r\n\r\n.detail-label {\r\n font-weight: 500;\r\n color: var(--calendar-text-secondary, #666);\r\n font-size: 14px;\r\n min-width: 100px;\r\n}\r\n\r\n.detail-label-muted {\r\n color: var(--calendar-text-muted, #999);\r\n font-size: 12px;\r\n}\r\n\r\n.detail-value {\r\n font-weight: 500;\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n text-align: right;\r\n}\r\n\r\n.detail-value-muted {\r\n color: var(--calendar-text-muted, #999);\r\n font-size: 12px;\r\n font-family: monospace;\r\n}\r\n\r\n.detail-description {\r\n margin: 8px 0 0 0;\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n line-height: 1.5;\r\n white-space: pre-wrap;\r\n}\r\n\r\n.participants-list {\r\n margin: 8px 0 0 0;\r\n padding-left: 20px;\r\n list-style-type: disc;\r\n}\r\n\r\n.participant-item {\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.modal-header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.modal-delete-btn {\r\n background: none;\r\n border: none;\r\n color: var(--calendar-error-color, #d13438);\r\n cursor: pointer;\r\n padding: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-delete-btn:hover:not(:disabled) {\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n}\r\n\r\n.modal-delete-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.delete-confirm-box {\r\n background: #fff3cd;\r\n border: 1px solid #ffc107;\r\n border-radius: 4px;\r\n padding: 16px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.delete-confirm-box p {\r\n margin: 0 0 12px 0;\r\n font-size: 14px;\r\n color: #856404;\r\n}\r\n\r\n.delete-confirm-actions {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: flex-end;\r\n}\r\n\r\n.modal-btn-danger {\r\n background: var(--calendar-error-color, #d13438);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-danger:hover:not(:disabled) {\r\n background: #a52a2a;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .booking-details-modal {\r\n max-width: 100%;\r\n }\r\n\r\n .detail-row {\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .detail-value {\r\n text-align: left;\r\n }\r\n}\r\n";
7600
7600
  styleInject(css_248z$1);
7601
7601
 
7602
7602
  const BookingDetailsModal = ({ booking, timezone, businessId, apiBaseUrl, onClose, onBookingDeleted, }) => {
@@ -8068,7 +8068,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
8068
8068
  React.createElement("div", { className: "calendar-body" }, rows)));
8069
8069
  };
8070
8070
 
8071
- var css_248z = ".calendar-container {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n /* Use 100% height of parent */\r\n max-height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: #333;\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: #f5f5f5;\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: #fff;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: #0078d4;\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: #106ebe;\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: #333;\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n /* Prevent container scrolling, let body scroll */\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #666;\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n /* Prevent overflow */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n /* Scrollable body */\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n flex: 1;\r\n min-height: 100px;\r\n /* Minimum row height */\r\n border-bottom: 1px solid #e0e0e0;\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid #e0e0e0;\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n /* Prevent cell expansion */\r\n min-width: 0;\r\n /* Allow shrinking below content size */\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: #fcfcfc;\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: #f9f9f9;\r\n color: #999;\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: #e6f2ff;\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: #f5f5f5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: #d13438;\r\n background: #fde7e9;\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: #e1dfdd;\r\n /* Default neutral color */\r\n border-left: 3px solid #0078d4;\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n /* For tooltip positioning */\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: #d0d0d0;\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: #666;\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid #e0e0e0;\r\n padding-right: 17px;\r\n /* Adjust for scrollbar */\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n /* Width of time labels column */\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n min-width: 0;\r\n /* Prevent expansion */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: #e6f2ff;\r\n color: #0078d4;\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: #f0f0f0;\r\n color: #999;\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: #666;\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n /* 1 hour height */\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: #666;\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n /* 24 hours * 60px/hour = 1440px total height */\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid #e0e0e0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid #e0e0e0;\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n /* Critical for flex containers to not expand based on content */\r\n}\r\n\r\n.day-column.closed-column {\r\n background-color: repeating-linear-gradient(45deg,\r\n #fbfbfb,\r\n #fbfbfb 10px,\r\n #f5f5f5 10px,\r\n #f5f5f5 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: #e1dfdd;\r\n border-left: 4px solid #0078d4;\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n /* Bring to front on hover */\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: #555;\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: white;\r\n border: 1px solid #ccc;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\r\n/* Note: A real production app would use a library like Popper.js */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 4px;\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: #666;\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: #666;\r\n}\r\n\r\n.calendar-error {\r\n color: #d13438;\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: #f0f0f0;\r\n background-image: repeating-linear-gradient(45deg,\r\n #f0f0f0,\r\n #f0f0f0 10px,\r\n #e8e8e8 10px,\r\n #e8e8e8 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n /* Below events but above grid lines */\r\n pointer-events: none;\r\n /* Allow clicks to pass through if needed, though we block clicks in JS */\r\n border-bottom: 1px solid #ddd;\r\n border-top: 1px solid #ddd;\r\n}\r\n\r\n.closed-block-label {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: #888;\r\n font-weight: 500;\r\n}";
8071
+ var css_248z = "/*\r\n * Calendar Component \r\n *\r\n * Overriden from parent:\r\n * --calendar-bg, --calendar-bg-secondary, --calendar-bg-tertiary\r\n * --calendar-border-color, --calendar-text-primary, --calendar-text-secondary, --calendar-text-muted\r\n * --calendar-accent, --calendar-accent-hover\r\n * --calendar-cell-hover, --calendar-today-bg, --calendar-closed-bg\r\n * --calendar-closed-text, --calendar-closed-badge-bg\r\n * --calendar-booking-bg, --calendar-booking-hover\r\n * --calendar-error-color, --calendar-tooltip-bg, --calendar-tooltip-border\r\n * --calendar-font-family\r\n */\r\n\r\n.calendar-container {\r\n font-family: var(--calendar-font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n max-height: 100vh;\r\n overflow: hidden;\r\n background-color: var(--calendar-bg, #fff);\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: var(--calendar-bg-tertiary, #f5f5f5);\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: var(--calendar-bg-tertiary, #f5f5f5);\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: var(--calendar-bg, #fff);\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: var(--calendar-accent, #0078d4);\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: var(--calendar-text-secondary, #666);\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n flex: 1;\r\n min-height: 100px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n min-width: 0;\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: var(--calendar-cell-hover, #fcfcfc);\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n color: var(--calendar-text-muted, #999);\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: var(--calendar-today-bg, #e6f2ff);\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: var(--calendar-closed-text, #d13438);\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: var(--calendar-booking-bg, #e1dfdd);\r\n border-left: 3px solid var(--calendar-accent, #0078d4);\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: var(--calendar-booking-hover, #d0d0d0);\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: var(--calendar-text-secondary, #666);\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding-right: 17px;\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n min-width: 0;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: var(--calendar-today-bg, #e6f2ff);\r\n color: var(--calendar-accent, #0078d4);\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n color: var(--calendar-text-muted, #999);\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: var(--calendar-text-secondary, #666);\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n}\r\n\r\n.day-column.closed-column {\r\n background: repeating-linear-gradient(45deg,\r\n var(--calendar-bg, #fff),\r\n var(--calendar-bg, #fff) 10px,\r\n var(--calendar-closed-bg, #f5f5f5) 10px,\r\n var(--calendar-closed-bg, #f5f5f5) 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: var(--calendar-booking-bg, #e1dfdd);\r\n border-left: 4px solid var(--calendar-accent, #0078d4);\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: var(--calendar-tooltip-bg, #fff);\r\n border: 1px solid var(--calendar-tooltip-border, #ccc);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding-bottom: 4px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: var(--calendar-text-secondary, #666);\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.calendar-error {\r\n color: var(--calendar-error-color, #d13438);\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n background-image: repeating-linear-gradient(45deg,\r\n var(--calendar-closed-bg, #f5f5f5),\r\n var(--calendar-closed-bg, #f5f5f5) 10px,\r\n var(--calendar-border-color, #e0e0e0) 10px,\r\n var(--calendar-border-color, #e0e0e0) 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n pointer-events: none;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-top: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.closed-block-label {\r\n background-color: var(--calendar-closed-label-bg, rgba(255, 255, 255, 0.8));\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: var(--calendar-closed-label-text, #888);\r\n font-weight: 500;\r\n}\r\n";
8072
8072
  styleInject(css_248z);
8073
8073
 
8074
8074
  const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, employees = [], rooms = [], }) => {
package/dist/index.js CHANGED
@@ -7439,7 +7439,7 @@ function styleInject(css, ref) {
7439
7439
  }
7440
7440
  }
7441
7441
 
7442
- var css_248z$2 = ".modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n}\n\n.modal-content {\n background: #ffffff;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n width: 100%;\n max-width: 500px;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px;\n border-bottom: 1px solid #e9ecef;\n}\n\n.modal-header h3 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #212529;\n}\n\n.modal-close-btn {\n background: none;\n border: none;\n font-size: 32px;\n line-height: 1;\n color: #6c757d;\n cursor: pointer;\n padding: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n}\n\n.modal-close-btn:hover {\n background: #e9ecef;\n color: #212529;\n}\n\n.modal-body {\n padding: 20px;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 20px;\n border-top: 1px solid #e9ecef;\n}\n\n.modal-error {\n background: #f8d7da;\n color: #842029;\n padding: 12px;\n border-radius: 4px;\n margin-bottom: 16px;\n font-size: 14px;\n}\n\n.form-group {\n margin-bottom: 16px;\n}\n\n.form-group label {\n display: block;\n font-weight: 500;\n font-size: 14px;\n color: #212529;\n margin-bottom: 6px;\n}\n\n.form-group input,\n.form-group textarea {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n font-size: 14px;\n font-family: inherit;\n color: #212529;\n transition: border-color 0.2s;\n box-sizing: border-box;\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n outline: none;\n border-color: #0d6efd;\n box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\n}\n\n.form-group textarea {\n resize: vertical;\n}\n\n.form-group small {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: #6c757d;\n}\n\n.form-group select {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #ced4da;\n border-radius: 4px;\n font-size: 14px;\n font-family: inherit;\n color: #212529;\n background: #ffffff;\n cursor: pointer;\n transition: border-color 0.2s;\n box-sizing: border-box;\n}\n\n.form-group select:focus {\n outline: none;\n border-color: #0d6efd;\n box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\n}\n\n.selected-items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 8px;\n}\n\n.selected-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 8px;\n background: #e7f1ff;\n border: 1px solid #b6d4fe;\n border-radius: 4px;\n font-size: 13px;\n color: #0d6efd;\n}\n\n.remove-item-btn {\n background: none;\n border: none;\n padding: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n color: #0d6efd;\n cursor: pointer;\n border-radius: 50%;\n transition: background-color 0.2s;\n}\n\n.remove-item-btn:hover {\n background: #b6d4fe;\n color: #084298;\n}\n\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n}\n\n.modal-btn {\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.modal-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.modal-btn-primary {\n background: #0d6efd;\n color: #ffffff;\n}\n\n.modal-btn-primary:hover:not(:disabled) {\n background: #0b5ed7;\n}\n\n.modal-btn-secondary {\n background: #6c757d;\n color: #ffffff;\n}\n\n.modal-btn-secondary:hover:not(:disabled) {\n background: #5c636a;\n}\n\n@media (max-width: 576px) {\n .modal-content {\n max-width: 100%;\n }\n\n .form-row {\n grid-template-columns: 1fr;\n }\n}\n";
7442
+ var css_248z$2 = "/* Modal CSS - Inherits CSS variables from parent, uses fallbacks */\r\n.modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n background: var(--calendar-bg, #fff);\r\n border-radius: 8px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\r\n width: 100%;\r\n max-width: 500px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.modal-header h3 {\r\n margin: 0;\r\n font-size: 20px;\r\n font-weight: 600;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-close-btn {\r\n background: none;\r\n border: none;\r\n font-size: 32px;\r\n line-height: 1;\r\n color: var(--calendar-text-secondary, #666);\r\n cursor: pointer;\r\n padding: 0;\r\n width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-close-btn:hover {\r\n background: var(--calendar-border-color, #e0e0e0);\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.modal-body {\r\n padding: 20px;\r\n}\r\n\r\n.modal-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n padding: 20px;\r\n border-top: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.modal-error {\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n color: var(--calendar-error-color, #d13438);\r\n padding: 12px;\r\n border-radius: 4px;\r\n margin-bottom: 16px;\r\n font-size: 14px;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 16px;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: var(--calendar-text-primary, #333);\r\n margin-bottom: 6px;\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--calendar-text-primary, #333);\r\n background: var(--calendar-bg, #fff);\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus {\r\n outline: none;\r\n border-color: var(--calendar-accent, #0078d4);\r\n box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);\r\n}\r\n\r\n.form-group textarea {\r\n resize: vertical;\r\n}\r\n\r\n.form-group small {\r\n display: block;\r\n margin-top: 4px;\r\n font-size: 12px;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.form-group select {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: var(--calendar-text-primary, #333);\r\n background: var(--calendar-bg, #fff);\r\n cursor: pointer;\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group select:focus {\r\n outline: none;\r\n border-color: var(--calendar-accent, #0078d4);\r\n box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);\r\n}\r\n\r\n.selected-items {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n margin-top: 8px;\r\n}\r\n\r\n.selected-item {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 4px 8px;\r\n background: var(--calendar-today-bg, #e6f2ff);\r\n border: 1px solid var(--calendar-accent, #0078d4);\r\n border-radius: 4px;\r\n font-size: 13px;\r\n color: var(--calendar-accent, #0078d4);\r\n}\r\n\r\n.remove-item-btn {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n width: 18px;\r\n height: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 16px;\r\n color: var(--calendar-accent, #0078d4);\r\n cursor: pointer;\r\n border-radius: 50%;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.remove-item-btn:hover {\r\n background: var(--calendar-border-color, #e0e0e0);\r\n color: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n}\r\n\r\n.modal-btn {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.modal-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.modal-btn-primary {\r\n background: var(--calendar-accent, #0078d4);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-primary:hover:not(:disabled) {\r\n background: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.modal-btn-secondary {\r\n background: var(--calendar-text-secondary, #666);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-secondary:hover:not(:disabled) {\r\n background: var(--calendar-text-muted, #999);\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .modal-content {\r\n max-width: 100%;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n";
7443
7443
  styleInject(css_248z$2);
7444
7444
 
7445
7445
  const generateConfirmationNumber = () => {
@@ -7598,7 +7598,7 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
7598
7598
  React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
7599
7599
  };
7600
7600
 
7601
- var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\n\n.booking-details-modal {\n max-width: 500px;\n}\n\n.detail-section {\n padding: 12px 0;\n border-bottom: 1px solid #e9ecef;\n}\n\n.detail-section:last-child {\n border-bottom: none;\n}\n\n.detail-row {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n}\n\n.detail-row:last-child {\n margin-bottom: 0;\n}\n\n.detail-row.full-width {\n flex-direction: column;\n}\n\n.detail-label {\n font-weight: 500;\n color: #6c757d;\n font-size: 14px;\n min-width: 100px;\n}\n\n.detail-label-muted {\n color: #adb5bd;\n font-size: 12px;\n}\n\n.detail-value {\n font-weight: 500;\n color: #212529;\n font-size: 14px;\n text-align: right;\n}\n\n.detail-value-muted {\n color: #adb5bd;\n font-size: 12px;\n font-family: monospace;\n}\n\n.detail-description {\n margin: 8px 0 0 0;\n color: #495057;\n font-size: 14px;\n line-height: 1.5;\n white-space: pre-wrap;\n}\n\n.participants-list {\n margin: 8px 0 0 0;\n padding-left: 20px;\n list-style-type: disc;\n}\n\n.participant-item {\n color: #495057;\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.modal-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.modal-delete-btn {\n background: none;\n border: none;\n color: #dc3545;\n cursor: pointer;\n padding: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n}\n\n.modal-delete-btn:hover:not(:disabled) {\n background: #f8d7da;\n}\n\n.modal-delete-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.delete-confirm-box {\n background: #fff3cd;\n border: 1px solid #ffc107;\n border-radius: 4px;\n padding: 16px;\n margin-bottom: 16px;\n}\n\n.delete-confirm-box p {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: #856404;\n}\n\n.delete-confirm-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n\n.modal-btn-danger {\n background: #dc3545;\n color: #ffffff;\n}\n\n.modal-btn-danger:hover:not(:disabled) {\n background: #bb2d3b;\n}\n\n@media (max-width: 576px) {\n .booking-details-modal {\n max-width: 100%;\n }\n\n .detail-row {\n flex-direction: column;\n gap: 4px;\n }\n\n .detail-value {\n text-align: left;\n }\n}\n";
7601
+ var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\r\n\r\n.booking-details-modal {\r\n max-width: 500px;\r\n}\r\n\r\n.detail-section {\r\n padding: 12px 0;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.detail-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.detail-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.detail-row:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.detail-row.full-width {\r\n flex-direction: column;\r\n}\r\n\r\n.detail-label {\r\n font-weight: 500;\r\n color: var(--calendar-text-secondary, #666);\r\n font-size: 14px;\r\n min-width: 100px;\r\n}\r\n\r\n.detail-label-muted {\r\n color: var(--calendar-text-muted, #999);\r\n font-size: 12px;\r\n}\r\n\r\n.detail-value {\r\n font-weight: 500;\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n text-align: right;\r\n}\r\n\r\n.detail-value-muted {\r\n color: var(--calendar-text-muted, #999);\r\n font-size: 12px;\r\n font-family: monospace;\r\n}\r\n\r\n.detail-description {\r\n margin: 8px 0 0 0;\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n line-height: 1.5;\r\n white-space: pre-wrap;\r\n}\r\n\r\n.participants-list {\r\n margin: 8px 0 0 0;\r\n padding-left: 20px;\r\n list-style-type: disc;\r\n}\r\n\r\n.participant-item {\r\n color: var(--calendar-text-primary, #333);\r\n font-size: 14px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.modal-header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.modal-delete-btn {\r\n background: none;\r\n border: none;\r\n color: var(--calendar-error-color, #d13438);\r\n cursor: pointer;\r\n padding: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-delete-btn:hover:not(:disabled) {\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n}\r\n\r\n.modal-delete-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.delete-confirm-box {\r\n background: #fff3cd;\r\n border: 1px solid #ffc107;\r\n border-radius: 4px;\r\n padding: 16px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.delete-confirm-box p {\r\n margin: 0 0 12px 0;\r\n font-size: 14px;\r\n color: #856404;\r\n}\r\n\r\n.delete-confirm-actions {\r\n display: flex;\r\n gap: 8px;\r\n justify-content: flex-end;\r\n}\r\n\r\n.modal-btn-danger {\r\n background: var(--calendar-error-color, #d13438);\r\n color: #fff;\r\n}\r\n\r\n.modal-btn-danger:hover:not(:disabled) {\r\n background: #a52a2a;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .booking-details-modal {\r\n max-width: 100%;\r\n }\r\n\r\n .detail-row {\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .detail-value {\r\n text-align: left;\r\n }\r\n}\r\n";
7602
7602
  styleInject(css_248z$1);
7603
7603
 
7604
7604
  const BookingDetailsModal = ({ booking, timezone, businessId, apiBaseUrl, onClose, onBookingDeleted, }) => {
@@ -8070,7 +8070,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
8070
8070
  React.createElement("div", { className: "calendar-body" }, rows)));
8071
8071
  };
8072
8072
 
8073
- var css_248z = ".calendar-container {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n /* Use 100% height of parent */\r\n max-height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: #333;\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: #f5f5f5;\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: #fff;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: #0078d4;\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: #106ebe;\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: #333;\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n /* Prevent container scrolling, let body scroll */\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #666;\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n /* Prevent overflow */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n /* Scrollable body */\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n flex: 1;\r\n min-height: 100px;\r\n /* Minimum row height */\r\n border-bottom: 1px solid #e0e0e0;\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid #e0e0e0;\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n /* Prevent cell expansion */\r\n min-width: 0;\r\n /* Allow shrinking below content size */\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: #fcfcfc;\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: #f9f9f9;\r\n color: #999;\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: #e6f2ff;\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: #f5f5f5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: #d13438;\r\n background: #fde7e9;\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: #e1dfdd;\r\n /* Default neutral color */\r\n border-left: 3px solid #0078d4;\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n /* For tooltip positioning */\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: #d0d0d0;\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: #666;\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid #e0e0e0;\r\n padding-right: 17px;\r\n /* Adjust for scrollbar */\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n /* Width of time labels column */\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n min-width: 0;\r\n /* Prevent expansion */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: #e6f2ff;\r\n color: #0078d4;\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: #f0f0f0;\r\n color: #999;\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: #666;\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n /* 1 hour height */\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: #666;\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n /* 24 hours * 60px/hour = 1440px total height */\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid #e0e0e0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid #e0e0e0;\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n /* Critical for flex containers to not expand based on content */\r\n}\r\n\r\n.day-column.closed-column {\r\n background-color: repeating-linear-gradient(45deg,\r\n #fbfbfb,\r\n #fbfbfb 10px,\r\n #f5f5f5 10px,\r\n #f5f5f5 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: #e1dfdd;\r\n border-left: 4px solid #0078d4;\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n /* Bring to front on hover */\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: #555;\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: white;\r\n border: 1px solid #ccc;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\r\n/* Note: A real production app would use a library like Popper.js */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 4px;\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: #666;\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: #666;\r\n}\r\n\r\n.calendar-error {\r\n color: #d13438;\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: #f0f0f0;\r\n background-image: repeating-linear-gradient(45deg,\r\n #f0f0f0,\r\n #f0f0f0 10px,\r\n #e8e8e8 10px,\r\n #e8e8e8 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n /* Below events but above grid lines */\r\n pointer-events: none;\r\n /* Allow clicks to pass through if needed, though we block clicks in JS */\r\n border-bottom: 1px solid #ddd;\r\n border-top: 1px solid #ddd;\r\n}\r\n\r\n.closed-block-label {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: #888;\r\n font-weight: 500;\r\n}";
8073
+ var css_248z = "/*\r\n * Calendar Component \r\n *\r\n * Overriden from parent:\r\n * --calendar-bg, --calendar-bg-secondary, --calendar-bg-tertiary\r\n * --calendar-border-color, --calendar-text-primary, --calendar-text-secondary, --calendar-text-muted\r\n * --calendar-accent, --calendar-accent-hover\r\n * --calendar-cell-hover, --calendar-today-bg, --calendar-closed-bg\r\n * --calendar-closed-text, --calendar-closed-badge-bg\r\n * --calendar-booking-bg, --calendar-booking-hover\r\n * --calendar-error-color, --calendar-tooltip-bg, --calendar-tooltip-border\r\n * --calendar-font-family\r\n */\r\n\r\n.calendar-container {\r\n font-family: var(--calendar-font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n max-height: 100vh;\r\n overflow: hidden;\r\n background-color: var(--calendar-bg, #fff);\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: var(--calendar-bg-tertiary, #f5f5f5);\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: var(--calendar-bg-tertiary, #f5f5f5);\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: var(--calendar-bg, #fff);\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: var(--calendar-accent, #0078d4);\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: var(--calendar-accent-hover, #106ebe);\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: var(--calendar-text-secondary, #666);\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n flex: 1;\r\n min-height: 100px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n min-width: 0;\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: var(--calendar-cell-hover, #fcfcfc);\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n color: var(--calendar-text-muted, #999);\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: var(--calendar-today-bg, #e6f2ff);\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: var(--calendar-closed-text, #d13438);\r\n background: var(--calendar-closed-badge-bg, #fde7e9);\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: var(--calendar-booking-bg, #e1dfdd);\r\n border-left: 3px solid var(--calendar-accent, #0078d4);\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: var(--calendar-booking-hover, #d0d0d0);\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: var(--calendar-text-secondary, #666);\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding-right: 17px;\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg-secondary, #f9f9f9);\r\n min-width: 0;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: var(--calendar-today-bg, #e6f2ff);\r\n color: var(--calendar-accent, #0078d4);\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n color: var(--calendar-text-muted, #999);\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n background-color: var(--calendar-bg, #fff);\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: var(--calendar-text-secondary, #666);\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid var(--calendar-border-color, #e0e0e0);\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n}\r\n\r\n.day-column.closed-column {\r\n background: repeating-linear-gradient(45deg,\r\n var(--calendar-bg, #fff),\r\n var(--calendar-bg, #fff) 10px,\r\n var(--calendar-closed-bg, #f5f5f5) 10px,\r\n var(--calendar-closed-bg, #f5f5f5) 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: var(--calendar-booking-bg, #e1dfdd);\r\n border-left: 4px solid var(--calendar-accent, #0078d4);\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: var(--calendar-tooltip-bg, #fff);\r\n border: 1px solid var(--calendar-tooltip-border, #ccc);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n padding-bottom: 4px;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: var(--calendar-text-secondary, #666);\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n color: var(--calendar-text-primary, #333);\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: var(--calendar-text-secondary, #666);\r\n}\r\n\r\n.calendar-error {\r\n color: var(--calendar-error-color, #d13438);\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: var(--calendar-closed-bg, #f5f5f5);\r\n background-image: repeating-linear-gradient(45deg,\r\n var(--calendar-closed-bg, #f5f5f5),\r\n var(--calendar-closed-bg, #f5f5f5) 10px,\r\n var(--calendar-border-color, #e0e0e0) 10px,\r\n var(--calendar-border-color, #e0e0e0) 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n pointer-events: none;\r\n border-bottom: 1px solid var(--calendar-border-color, #e0e0e0);\r\n border-top: 1px solid var(--calendar-border-color, #e0e0e0);\r\n}\r\n\r\n.closed-block-label {\r\n background-color: var(--calendar-closed-label-bg, rgba(255, 255, 255, 0.8));\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: var(--calendar-closed-label-text, #888);\r\n font-weight: 500;\r\n}\r\n";
8074
8074
  styleInject(css_248z);
8075
8075
 
8076
8076
  const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, employees = [], rooms = [], }) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dialiq/calendar-component",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "description": "A React calendar component with booking management",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",