/*
 * BKG Work System — shared interaction theme
 * Loaded by bkg_preview_assets.php for every active portal module.
 * Keep rules focused on controls and overlays so each module can retain its own layout.
 */

:root {
    --bkg-ui-radius-sm: 10px;
    --bkg-ui-radius: 12px;
    --bkg-ui-radius-lg: 18px;
    --bkg-ui-control-height: 40px;
    --bkg-ui-accent: var(--accent-color, var(--accent, var(--brand-2, #38bdf8)));
    --bkg-ui-text: var(--bs-body-color, var(--text-main, var(--ink, #e2e8f0)));
    --bkg-ui-muted: var(--muted, #94a3b8);
    --bkg-ui-border: var(--border-color, var(--line, rgba(148, 163, 184, .28)));
    --bkg-ui-surface: var(--bs-body-bg, #0f172a);
    --bkg-ui-elevated: var(--bs-tertiary-bg, var(--card, #1e293b));
    --bkg-ui-shadow: 0 18px 48px rgba(2, 6, 23, .24);
    --bkg-ui-focus: 0 0 0 3px color-mix(in srgb, var(--bkg-ui-accent) 22%, transparent);
    --bkg-ui-speed: 160ms;
}

html[data-theme="light"],
html[data-bs-theme="light"],
body[data-theme="light"],
body.light-theme,
body.light-mode {
    --bkg-ui-text: var(--bs-body-color, var(--text-main, var(--ink, #0f172a)));
    --bkg-ui-muted: var(--muted, #64748b);
    --bkg-ui-border: var(--border-color, var(--line, #cbd5e1));
    --bkg-ui-surface: var(--bs-body-bg, #f8fafc);
    --bkg-ui-elevated: var(--bs-tertiary-bg, var(--card, #fff));
    --bkg-ui-shadow: 0 18px 48px rgba(15, 23, 42, .16);
}

/* Form controls and search */
body.bkg-ui-ready :where(.form-control, .form-select, .form-control-plaintext, .bkg-search-control),
body.bkg-ui-ready :where(input, select, textarea).bkg-ui-control {
    border-radius: var(--bkg-ui-radius-sm) !important;
    border-color: var(--bkg-ui-border) !important;
    transition: border-color var(--bkg-ui-speed) ease,
                box-shadow var(--bkg-ui-speed) ease,
                background-color var(--bkg-ui-speed) ease !important;
}

body.bkg-ui-ready :where(.form-control, .form-select, .bkg-search-control):not(textarea):not([multiple]) {
    min-height: var(--bkg-ui-control-height);
}

/* Every single-line field uses one visual height, including Bootstrap sm/lg variants. */
body.bkg-ui-ready :where(input.bkg-ui-control, select.bkg-ui-control, .form-control, .form-select):not(textarea) {
    box-sizing: border-box;
}

body.bkg-ui-ready :where(input.bkg-ui-control, select.bkg-ui-control, .form-control, .form-select):not(textarea):not([multiple]):not([size]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    height: var(--bkg-ui-control-height) !important;
    min-height: var(--bkg-ui-control-height) !important;
}

body.bkg-ui-ready :where(.form-control, .form-select, .bkg-search-control):focus {
    border-color: var(--bkg-ui-accent) !important;
    box-shadow: var(--bkg-ui-focus) !important;
    outline: 0 !important;
}

body.bkg-ui-ready :where(.form-control, .bkg-search-control)::placeholder {
    color: var(--bkg-ui-muted) !important;
    opacity: .82;
}

body.bkg-ui-ready .bkg-search-control {
    appearance: none;
    width: 100%;
    min-width: 0;
    padding-inline-start: .75rem !important;
    padding-inline-end: 2.65rem !important;
    background-image: none !important;
    border-width: 1px !important;
    border-radius: var(--bkg-ui-radius-sm) !important;
}

body.bkg-ui-ready .bkg-search-control::-webkit-search-decoration,
body.bkg-ui-ready .bkg-search-control::-webkit-search-cancel-button {
    appearance: none;
}

/* Search fields never carry a leading magnifier. The clear action lives inside. */
body.bkg-ui-ready .bkg-search-shell,
body.bkg-ui-ready .bkg-search-inner {
    position: relative;
    min-width: 0;
}

body.bkg-ui-ready .bkg-search-shell {
    display: flex;
    width: 100%;
    align-items: center;
}

body.bkg-ui-ready .bkg-search-inner {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

body.bkg-ui-ready .input-group > .bkg-search-inner,
body.bkg-ui-ready .search-input-wrap > .bkg-search-inner {
    width: 1%;
}

body.bkg-ui-ready .bkg-search-leading-icon {
    display: none !important;
}

body.bkg-ui-ready .bkg-search-shell::before,
body.bkg-ui-ready .bkg-search-inner::before {
    content: none !important;
    display: none !important;
}

body.bkg-ui-ready .bkg-search-clear {
    position: absolute !important;
    inset-inline-end: 5px !important;
    top: 50% !important;
    z-index: 6;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: var(--bkg-ui-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: color var(--bkg-ui-speed) ease,
                background-color var(--bkg-ui-speed) ease,
                opacity var(--bkg-ui-speed) ease !important;
}

body.bkg-ui-ready .bkg-search-clear > * {
    display: none !important;
}

body.bkg-ui-ready .bkg-search-clear::before {
    content: "×" !important;
    display: block !important;
    font: 700 20px/1 system-ui, sans-serif;
}

body.bkg-ui-ready .bkg-search-clear.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.bkg-ui-ready .bkg-search-clear:hover,
body.bkg-ui-ready .bkg-search-clear:focus-visible {
    color: var(--bkg-ui-text) !important;
    background: color-mix(in srgb, var(--bkg-ui-muted) 18%, transparent) !important;
    outline: 0;
}

body.bkg-ui-ready .input-group > :where(.form-control, .form-select, .btn, .input-group-text) {
    height: var(--bkg-ui-control-height) !important;
    min-height: var(--bkg-ui-control-height);
    border-color: var(--bkg-ui-border);
}

body.bkg-ui-ready .input-group > :first-child {
    border-start-start-radius: var(--bkg-ui-radius-sm) !important;
    border-end-start-radius: var(--bkg-ui-radius-sm) !important;
}

body.bkg-ui-ready .input-group > :last-child {
    border-start-end-radius: var(--bkg-ui-radius-sm) !important;
    border-end-end-radius: var(--bkg-ui-radius-sm) !important;
}

/* Meeting filters use Bootstrap dropdown buttons instead of native selects. */
body.bkg-ui-ready #filterSection > form > [class*="col-"] > .dropdown > .dropdown-toggle,
body.bkg-ui-ready #filterSection > form > [class*="col-"].d-flex > .btn {
    box-sizing: border-box;
    height: var(--bkg-ui-control-height) !important;
    min-height: var(--bkg-ui-control-height) !important;
    border-radius: var(--bkg-ui-radius-sm) !important;
}

/* Document workspace toolbar: match action buttons to the adjacent 40px fields. */
@media (min-width: 768px) {
    body.bkg-ui-ready .glass-card .row > .d-flex:has(> .btn-create-mobile) > .btn {
        box-sizing: border-box;
        height: var(--bkg-ui-control-height) !important;
        min-height: var(--bkg-ui-control-height) !important;
        border-radius: var(--bkg-ui-radius-sm) !important;
    }
}

/* Dropdowns */
body.bkg-ui-ready :where(.dropdown-menu, .dropdown-list, .select-dropdown, .choices__list--dropdown, .select2-dropdown) {
    padding: 6px !important;
    color: var(--bkg-ui-text);
    background-color: var(--bkg-ui-elevated);
    border: 1px solid var(--bkg-ui-border) !important;
    border-radius: var(--bkg-ui-radius) !important;
    box-shadow: var(--bkg-ui-shadow) !important;
    overflow: hidden;
}

body.bkg-ui-ready :where(.dropdown-item, .dropdown-menu > a, .dropdown-menu > button, .choices__item--choice, .select2-results__option) {
    border-radius: 9px !important;
    transition: color var(--bkg-ui-speed) ease, background-color var(--bkg-ui-speed) ease;
}

body.bkg-ui-ready :where(.dropdown-item, .dropdown-menu > a, .dropdown-menu > button):hover,
body.bkg-ui-ready :where(.dropdown-item, .dropdown-menu > a, .dropdown-menu > button):focus,
body.bkg-ui-ready .dropdown-item.active,
body.bkg-ui-ready .dropdown-item:active {
    color: var(--bkg-ui-text);
    background: color-mix(in srgb, var(--bkg-ui-accent) 14%, transparent) !important;
}

/* Buttons: keep module colors, standardize shape and interaction. */
body.bkg-ui-ready :where(.btn, .btn2, .action-btn, .filter-btn, .toolbar-btn) {
    border-radius: var(--bkg-ui-radius-sm) !important;
    font-weight: 650;
    transition: transform var(--bkg-ui-speed) ease,
                box-shadow var(--bkg-ui-speed) ease,
                filter var(--bkg-ui-speed) ease,
                background-color var(--bkg-ui-speed) ease,
                border-color var(--bkg-ui-speed) ease !important;
}

@media (hover: hover) {
    body.bkg-ui-ready :where(.btn, .btn2, .action-btn, .filter-btn, .toolbar-btn):not(:disabled):hover {
        transform: translateY(-1px);
        filter: brightness(1.045);
    }
}

body.bkg-ui-ready :where(.btn, .btn2, .action-btn, .filter-btn, .toolbar-btn):focus-visible {
    outline: 0 !important;
    box-shadow: var(--bkg-ui-focus) !important;
}

body.bkg-ui-ready :where(.btn, .btn2, .action-btn, .filter-btn, .toolbar-btn):active:not(:disabled) {
    transform: translateY(0) scale(.985);
}

body.bkg-ui-ready :where(.btn, .btn2, .action-btn, .filter-btn, .toolbar-btn):disabled {
    cursor: not-allowed;
    opacity: .58;
}

/* Cards, popovers and table shells share the same edge language. */
body.bkg-ui-ready :where(.card, .card-x, .card2, .popover, .offcanvas) {
    border-color: var(--bkg-ui-border) !important;
}

body.bkg-ui-ready :where(.card, .card-x, .card2) {
    border-radius: var(--bkg-ui-radius-lg) !important;
}

body.bkg-ui-ready :where(.popover, .offcanvas) {
    border-radius: var(--bkg-ui-radius) !important;
    box-shadow: var(--bkg-ui-shadow);
}

/* Bootstrap and custom modal presentation */
body.bkg-ui-ready .modal {
    --bs-modal-border-radius: var(--bkg-ui-radius-lg);
    --bs-modal-inner-border-radius: calc(var(--bkg-ui-radius-lg) - 1px);
}

body.bkg-ui-ready .modal-dialog {
    transition: transform 190ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease !important;
}

body.bkg-ui-ready .modal.fade:not(.show) .modal-dialog {
    transform: translateY(14px) scale(.985) !important;
    opacity: 0;
}

body.bkg-ui-ready .modal.show .modal-dialog {
    transform: none !important;
    opacity: 1;
}

body.bkg-ui-ready .modal-content,
body.bkg-ui-ready dialog,
body.bkg-ui-ready :where(.cute-modal-content, .custom-modal-content, .modal-card) {
    color: var(--bkg-ui-text);
    border: 1px solid var(--bkg-ui-border) !important;
    border-radius: var(--bkg-ui-radius-lg) !important;
    box-shadow: var(--bkg-ui-shadow) !important;
    overflow: hidden;
}

body.bkg-ui-ready :where(.modal-header, .modal-footer) {
    border-color: var(--bkg-ui-border) !important;
}

body.bkg-ui-ready .modal-header {
    min-height: 56px;
}

body.bkg-ui-ready .modal-title {
    font-weight: 750;
}

body.bkg-ui-ready .modal-backdrop.show {
    opacity: .62 !important;
    backdrop-filter: blur(3px);
}

body.bkg-ui-ready dialog::backdrop {
    background: rgba(2, 6, 23, .62);
    backdrop-filter: blur(3px);
}

/* File previews */
body.bkg-ui-ready :where([id*="preview" i][class*="modal" i], [id*="file" i][id*="modal" i]).modal .modal-content {
    border-radius: var(--bkg-ui-radius-lg) !important;
    background-clip: padding-box;
}

body.bkg-ui-ready :where([id*="preview" i], [class*="preview" i]) :where(iframe, video) {
    display: block;
    width: 100%;
    border: 0;
    background: #020617;
}

body.bkg-ui-ready :where([id*="preview" i], [class*="preview" i]) img:not(.bkg-pdf-preview-page) {
    max-width: 100%;
    height: auto;
    border-radius: var(--bkg-ui-radius-sm);
}

.fancybox__container .fancybox__content,
.bkg-fancybox-modal .fancybox__content {
    border-radius: var(--bkg-ui-radius) !important;
    overflow: hidden;
}

.fancybox__container .f-button,
.bkg-pdf-preview-btn {
    border-radius: var(--bkg-ui-radius-sm) !important;
}

.bkg-pdf-preview-toolbar {
    min-height: 58px !important;
    border-color: var(--bkg-ui-border) !important;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .18);
}

.bkg-pdf-preview-page,
.bkg-pdf-preview-page-slot,
.bkg-pdf-preview-loading {
    border-radius: var(--bkg-ui-radius-sm) !important;
}

@media (max-width: 575.98px) {
    :root {
        --bkg-ui-radius-lg: 16px;
        --bkg-ui-control-height: 42px;
    }

    body.bkg-ui-ready .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) {
        margin: .65rem;
    }

    body.bkg-ui-ready .modal-content {
        max-height: calc(100dvh - 1.3rem);
    }

    .bkg-pdf-preview-toolbar {
        grid-template-columns: auto minmax(0, 1fr) !important;
        min-height: 54px !important;
    }

    .bkg-pdf-preview-actions {
        grid-column: 1 / -1;
        width: 100%;
        overflow-x: auto;
        justify-content: center !important;
        padding-bottom: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.bkg-ui-ready *,
    body.bkg-ui-ready *::before,
    body.bkg-ui-ready *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body.bkg-ui-ready .modal,
    body.bkg-ui-ready .modal-backdrop,
    .fancybox__container,
    .bkg-pdf-preview-overlay {
        display: none !important;
    }
}