/* ── DateTime virtual mask display — inside group modal top panel ─────────── */

/*
 * .cModal-body has flex: 1 + overflow-y: auto inside an auto-height flex column.
 * Per CSS spec, overflow != visible resets min-height to 0, collapsing the body.
 * The :has() rule restores overflow-y: visible for the body that holds the
 * virtual mask, so its intrinsic height is respected and the content shows.
 */
.cModal-body:has(.fb-dt-virtual) {
    overflow-y: visible;
}

.fb-dt-virtual {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

/* Две пълни DD/MM/YYYY маски една до друга (DatePeriodFieldService "от"/"до")
   не се събират на тесен телефон в нормалния размер — компактен вариант,
   по-малък шрифт/padding/slot ширина, само за тоя конкретен случай (виж
   потребителски скрийншот, overflow на "до" маската). DateTime полето (дата+
   час) продължава да ползва нормалния размер, не е пипнато. */
.fb-dt-virtual--compact .fb-dt-virtual__side {
    padding: 0.5rem 0.5rem;
    min-width: 0;
}

.fb-dt-virtual--compact .formbuilder-mask {
    font-size: 0.8125rem;
    gap: 0.15rem;
}

.fb-dt-virtual--compact .formbuilder-mask__slot {
    width: 1ch;
}

.fb-dt-virtual--compact .formbuilder-mask__sep {
    padding: 0 0.05em 2px;
}

.fb-dt-virtual__side {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    gap: 0.25rem;
    transition: border-color 150ms, background 150ms;
    min-height: 2.75rem;
}

.fb-dt-virtual__side:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.fb-dt-virtual__side--active {
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 8%, #fff);
}

.fb-dt-virtual__side .formbuilder-mask {
    pointer-events: none;
}

.fb-dt-virtual__side .formbuilder-mask__slot {
    opacity: 0.6;
}

.fb-dt-virtual__side--active .formbuilder-mask__slot {
    opacity: 1;
}