/**
 * ChurchCRM Calendar Decorative Elements & DatePicker Overrides
 *
 * Minimal custom styles after Bootstrap utility migration:
 * - Strike-through text divider for "Add New Calendar" button
 * - DatePicker styling overrides for modal z-index and compatibility
 *
 * Bootstrap utilities handle: table layouts (w-100), form validation (text-danger, invisible), field sizing
 * Used in: webpack/calendar-event-editor.js, src/skin/js/Calendar.js
 */

/* ================================================
   Strike-Through Text Divider Styles
   Used for "Add New Calendar" decorative divider
   No Bootstrap equivalent - must be custom
   ================================================ */

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.strike > span {
  position: relative;
  display: inline-block;
}

.strike:hover {
  font-size: 22px;
  color: lime;
}

.strike > span:before,
.strike > span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: grey;
}

.strike > span:before {
  right: 100%;
  margin-right: 15px;
}

.strike > span:after {
  left: 100%;
  margin-left: 15px;
}

/* Bootstrap / jQuery datepicker popup
   Ensure the popup appears above fixed headers/sidebars */
.datepicker,
.datepicker.dropdown-menu,
.bootstrap-datepicker {
  z-index: 2000 !important;
}
