/* Base for jQuery UI Dialog and Form Elements */
.ui-dialog,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

/* jQuery UI Dialog */
.ui-dialog {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 1);
    z-index: 10000;
    max-width: 640px;
    overflow: hidden;
}



.ui-dialog .ui_info {
    font-size: 0.8rem;
    color: #9ECDFF;
}

.ui-dialog .ui-dialog-titlebar {
    background: #007bff;
    color: #fff;
    border: 0px #fff;
    border-radius: 1rem 1rem 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.75rem 1.25rem;
}
.ui-dialog .ui-dialog-title {
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0;
    flex-grow: 1;
    padding-left: 3.6rem;
}

.dialog_title_icon {
    font-size: 3rem;
    position: absolute;
    left: 1rem;
    top: 1rem;
}

.fc-event {
    --fc-list-event-dot-width: 2rem;
}

.fc-list-event-title {
    width: 100%;
}

/* im backend ueber calendar.js */
/* titel */
div.fc-multimonth-body div.fc-daygrid-day div.fc-daygrid-day-body div {
    font-size: 0.8rem;
}
/* zeit */
div.fc-multimonth-body div.fc-daygrid-day div.fc-daygrid-day-body div b {
}


.fc-daygrid-day {

}

.fc-list-event {

}



/* ------------------------------------------------------------------------------ */
.fc-daygrid-event div {
    font-size: 0.9rem;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none;
    border: 0px solid #fff;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2) ;
    font-size: 1.25rem;
    opacity: 0.75;
    padding: 0.25rem 0.5rem;
    max-width: fit-content;
}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
    opacity: 1;
}
.ui-dialog .ui-dialog-content {
    padding: 1.25rem;
    max-width: 640px;
    border-bottom-left-radius: 1rem; /* Round the bottom corners */
    border-bottom-right-radius: 1rem;
    width: 88%;
}
.ui-dialog .ui-dialog-buttonpane {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.3rem 0.3rem;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    text-align: right;
}
.ui-dialog .ui-dialog-buttonpane button,
.ter_kal_button, #show_preview {
    background: #007bff;
    border: 1px solid #898989;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    margin-left: 0.5rem;
}
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane button:focus,
#show_preview:focus
{
    background: #0056b3;
    border-color: #898989;
}


.ter_kal_button:hover, #show_preview:hover {
    color: #fff;
    background: #0056b3;
    border-color: #898989;
}
.ter_kal_button:focus, .ter_kal_button:visited  {
    color: #fff;
    background: #898989;
}

*#show_preview  {
    font-size:0.7rem;
    padding: 0.2rem 0.4rem;
    line-height: 1.5;
}

/* jQuery UI Form Elements */
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ui-widget button, .ui-button {
    display: inline-block;
    width: 25%;
    margin: 0.5rem;
    border: none;
}

.ui-widget input:focus,
.ui-widget select:focus,
.ui-widget textarea:focus,
.ui-widget button:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.ui-widget input[disabled],
.ui-widget select[disabled],
.ui-widget textarea[disabled],
.ui-widget button[disabled],
fieldset[disabled] .ui-widget input,
fieldset[disabled] .ui-widget select,
fieldset[disabled] .ui-widget textarea,
fieldset[disabled] .ui-widget button {
    background: #e9ecef;
    opacity: 1;
}

.ui-widget input[type=checkbox] {
    display: inline-block;
    width: 1rem;
    margin: 0 1.4rem 0 0;
}


.ui-widget .ui-widget-content {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.75rem 1.25rem;
}
.ui-widget .ui-widget-header {
    background: #007bff;
    border:5px solid #007bff;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.75rem 1.25rem;
}

.ui-dialog .ui-widget-header {
    border: 0px #fff;
    border-radius: 1rem 1rem 0px 0px;
}


/* Custom Styles for Notes Field */
.ui-widget #event-notes {
    background: #fff3cd;
    border: 1px solid #ffecb5;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

#event-dialog input.regular-text {
    margin-bottom: 10px;
}

/* Category Button Styles */
#kategoriezeile .category-button {
    display: inline-block;
    margin: 0.3rem;
    padding: 0.7rem 0.5rem;
    border-radius: 0.3rem;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
}
#kategoriezeile .category-button .dashicons {
    margin-right: 1.4rem;
    margin-left: 0px;
    font-size: 2rem;
    line-height: 0.65; /* Adjusts the line height to center it */
    padding: 0; /* Adjusts the top padding to move it up */
}

#kategoriezeile, .fc-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#kategoriezeile .kategorie_help_plus {
   font-size: 1.6rem !important;
}


/* Copy Button (Light Blue) */
.ui-dialog .ui-dialog-buttonpane .tk_btn_copy {
    background-color: #17a2b8;
    color: white;
    /*border-color: #17a2b8*/;
}

.ui-dialog .ui-dialog-buttonpane .tk_btn_copy:hover {
    background-color: #138496;
    /*border-color: #117a8b;*/
}

/* Delete Button (Red) */
.ui-dialog .ui-dialog-buttonpane .tk_btn_delete {
    background-color: #dc3545;
    color: #FFFFFF;
    /*border-color: !important #dc3545;*/
}

.ui-dialog .ui-dialog-buttonpane .tk_btn_delete:hover {
    background-color: #BD2130;
    /*border-color: #DC3545; */
}

/* Cancel Button (Less Prominent) */
.ui-dialog .ui-dialog-buttonpane .tk_btn_cancel {
    background-color: transparent;
    color: #6c757d;
    /*border-color: #6c757d;*/
}

.ui-dialog .ui-dialog-buttonpane .tk_btn_cancel:hover {
    color: #000000;
    background-color: #DEDEDE;
   /* border-color: #6c757d;*/
}

#event-form .event-dates, #reservation-form .event-dates {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    column-gap: 10px;
}

#event-form .event-dates input[type="datetime-local"], #event-form .event-dates select, #reservation-form .event-dates input[type="datetime-local"] {
    height: 2.2rem;
}

#category-form input[type="color"] {
    height: 40px; /* Adjust the value as needed */
}

.custom-select {
    position: relative;
    font-family: Arial;
}

.custom-select .select-selected {
    background-color: #eee;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ccc;
}

.custom-select .select-selected:after {
    content: "";
    position: absolute;
    top: 14px;
    right: 10px;
    border: 6px solid transparent;
    border-color: black transparent transparent transparent;
}

.custom-select .select-items {
    position: absolute;
    background-color: white;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
}

.custom-select .select-items div {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.custom-select .select-items div:hover {
    background-color: #ddd;
}

.custom-select .select-items div .dashicons {
    margin-right: 8px;
}

.select-hide {
    display: none;
}

/* Bootstrap-like button classes */
.bootstrap_button_line {
   /* background-color: #DDDDDD;*/
    display: flex;
    flex-wrap: wrap;
    /*gap: 0.01rem;  Small gap between buttons */
     /*align-items: flex-start; Align items at the start to avoid stretching */
}

.bootstrap_button_line .bootstrap_button {
    width: auto;
    font-weight: 600;
    color: #007bff;
    background-color: #fff;
    white-space: nowrap;
    border: 1px solid #DDDDDD;
    font-size: 0.8rem;
    border-radius: 0.2rem;
    margin: 0.4rem 0 0.4rem 0.3rem;
    padding: 0.4rem 0.15rem; /* h b */
     /*flex: 0 0 auto; Prevent buttons from stretching */
}


.bootstrap_primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #fff;
}


.bootstrap_info {
    color: #17a2b8 !important;
    /*background-color: #fff !important;*/

}
.bootstrap_info:hover {
    color: #fff !important;
    background-color: #17a2b8;
    border-color: #17a2b8;
}


.bootstrap_success {
    color: #28a745 !important;

}
.bootstrap_success:hover {
    color: #fff !important;
    background-color: #28a745;
    border-color: #28a745;
}


.bootstrap_warning {
    color: #ffc107 !important;

}
.bootstrap_warning:hover {
    color: #fff !important;
    background-color: #ffc107;
    border-color: #ffc107;
}


.bootstrap_dark {
    color: #343a40 !important;

}
.bootstrap_dark:hover {
    color: #fff !important;
    background-color: #343a40;
    border-color: #343a40;
}

#event-title {
    font-weight: 600;
    font-size: 1.6rem;
}

.event-time {
    font-weight: 600;
    font-size: 1rem;
}

	.label-beta{
		background-color: #f0ad4e;
		color: white;
		border-radius: 3px;
		padding: 3px 6px;
		font-size: 0.75em;
		margin-left: 10px;
	}

	.label-free{
		background-color: #53B30F;
		color: white;
		border-radius: 3px;
		padding: 3px 6px;
		font-size: 0.75em;
		margin-left: 10px;
	}

	.label-pro{
		background-color: #068BF0;
		color: white;
		border-radius: 3px;
		padding: 3px 6px;
		font-size: 0.75em;
		margin-left: 10px;
	}

    .card-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

	.card{
	   max-width: 700px;
       break-inside: avoid-column;
       word-wrap: break-word; /* Allows long words to break and wrap to the next line */
       overflow-wrap: break-word;
	}

.card img,
.card input,
.card textarea,
.card select {
    max-width: 100%; /* Ensures that these elements do not exceed the width of their parent */
    height: auto; /* Maintains the aspect ratio for images */
    box-sizing: border-box; /* Includes padding and border in the width calculation for form fields */
}

.ter_kal_info {
    font-size: 0.9rem;
    color: #495057;
}
.regenschirm {
    height: 0.001em;
    overflow: hidden;
    border: none;
}

.t_k_reservation-container {
    position: relative;
    border-radius: 1.5rem;
    background-color: #9ECDFF;
    padding: 2rem;
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 1);
    max-width: 800px;
}

.reservation_form_text, .t_k_reservation-container h3  {
    padding-top: 1rem;
    color: #ffffff;
}

.t_k_reservation-container label, .t_k_reservation-container button , .t_k_reservation-container h3 {
    font-weight: 700;
    font-size: 1rem;
}

.t_k_reservation-container input,
.t_k_reservation-container textarea,
.t_k_reservation-container select,
.t_k_reservation-container button {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.5rem
}

/* Google Calendar Event */
.fc .fc-google-event {
  border: 3px solid #9ECDFF !important;

  /* Force text wrapping */
  white-space: normal !important;
  word-break: break-word !important;

  /* Optional spacing improvements */
  padding: 2px 5px !important;
  line-height: 1.3 !important;
}

/* Fix for FullCalendar's default flex container */
.fc .fc-event-main {
  flex-wrap: wrap !important;
  min-width: 0 !important; /* Allows text truncation in flex children */
}

/* Specific fix for time-grid views */
.fc-timegrid-event-harness-inset .fc-timegrid-event {
  overflow: visible !important;
}

#event-details-html {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.event-subdetail-item {
    font-size: 0.7rem;
    color: #666666;
}

/* Style for phones (small screens) */
@media screen and (max-width: 768px) {
    .ui-dialog {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
    }
}