/**
 * 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: react/components/Events/, 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;
}

/**
 * React DatePicker Styling Overrides
 * 
 * Critical overrides for react-datepicker in modal context:
 * - Z-index: Ensures dropdown appears above Bootstrap modals
 * 
 * Note: Core react-datepicker CSS is imported from npm package
 * (webpack/skin-main.js line 22)
 */

.react-datepicker-popper {
    z-index: 1050 !important;
}

/* Bootstrap / jQuery datepicker popup (non-react)
   Ensure the popup appears above fixed headers/sidebars
   AdminLTE/header z-index can be high; use a larger value here. */
.datepicker,
.datepicker.dropdown-menu,
.bootstrap-datepicker {
    z-index: 2000 !important;
}
