/* Premium interactions layer (Phase-5)
 * Scope: modal/dialog + tab/navigation visual consistency.
 * Safety: CSS-only; excludes sf-tip-modal overrides.
 */

/* Backdrop consistency */
.modal-backdrop,
.modal-backdrop.show {
    background-color: #243648 !important;
}

/* Bootstrap modal shell (exclude sf-tip-modal, already specialized in bs3-compat.css) */
.modal:not(.sf-tip-modal) .modal-content {
    border: 1px solid #d6e1ec;
    border-radius: 14px !important;
    box-shadow: 0 18px 36px rgba(23, 37, 52, 0.22);
    overflow: hidden;
}

.modal:not(.sf-tip-modal) .modal-header {
    border-bottom: 1px solid #e5edf5;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
    padding: 13px 16px;
}

.modal:not(.sf-tip-modal) .modal-title {
    color: #2f4357;
    font-size: 20px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.1px;
}

.modal:not(.sf-tip-modal) .modal-header .btn-close,
.modal:not(.sf-tip-modal) .modal-header .close {
    opacity: 0.72;
    transition: opacity var(--sf-motion-fast, 140ms ease), transform var(--sf-motion-fast, 140ms ease);
}

.modal:not(.sf-tip-modal) .modal-header .btn-close:hover,
.modal:not(.sf-tip-modal) .modal-header .close:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.modal:not(.sf-tip-modal) .modal-body {
    color: #364b60;
    line-height: 1.58;
}

.modal:not(.sf-tip-modal) .modal-footer {
    border-top: 1px solid #e6edf5;
    background: #fbfdff;
    padding: 12px 16px 14px;
}

.modal:not(.sf-tip-modal) .modal-footer .btn {
    min-width: 92px;
}

/* jQuery UI dialog shell */
.ui-widget-overlay {
    background: #243648;
    opacity: 0.42;
}

.ui-dialog {
    border: 1px solid #d6e1ec !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 36px rgba(23, 37, 52, 0.22) !important;
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
    border: 0 !important;
    border-bottom: 1px solid #e5edf5 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%) !important;
    color: #2f4357 !important;
    padding: 10px 12px !important;
}

.ui-dialog .ui-dialog-title {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.ui-dialog .ui-dialog-content {
    color: #364b60;
    line-height: 1.56;
}

.ui-dialog .ui-dialog-buttonpane {
    border-top: 1px solid #e6edf5 !important;
    background: #fbfdff !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .btn {
    border-radius: 8px !important;
    font-weight: 700;
    min-width: 82px;
}

/* jQuery UI tabs: baseline consistency for pages without tab-specific styling */
.page-content .ui-tabs {
    border: 1px solid #dbe4ef;
    border-radius: 12px !important;
    background: #f7fbff;
    box-shadow: 0 6px 14px rgba(41, 57, 74, 0.08);
    padding: 10px;
}

.page-content .ui-tabs .ui-tabs-nav {
    border: 1px solid #d8e2ee;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #f5f9fd 0%, #edf3f9 100%);
    padding: 4px;
}

.page-content .ui-tabs .ui-tabs-nav li {
    border: 0;
    border-radius: 8px !important;
    margin: 0 6px 0 0;
    background: transparent;
}

.page-content .ui-tabs .ui-tabs-nav li a {
    color: #526477;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    transition: color var(--sf-motion-fast, 140ms ease), background-color var(--sf-motion-fast, 140ms ease);
}

.page-content .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: #ffffff;
    border: 1px solid #d2dce8;
    box-shadow: 0 3px 8px rgba(35, 49, 65, 0.1);
}

.page-content .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #2b3a4a;
}

.page-content .ui-tabs .ui-tabs-nav li a:focus-visible {
    outline: 2px solid rgba(26, 115, 184, 0.35);
    outline-offset: 1px;
    border-radius: 6px;
}

.page-content .ui-tabs .ui-tabs-panel {
    border: 0;
    background: transparent;
    padding: 12px 4px 2px 4px;
}

/* Bootstrap nav-tabs in portlet titles */
.page-content .portlet > .portlet-title > .nav-tabs {
    border-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.page-content .portlet > .portlet-title > .nav-tabs > li {
    margin: 0;
}

.page-content .portlet > .portlet-title > .nav-tabs > li > a {
    border: 1px solid transparent;
    border-radius: 8px !important;
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 700;
    color: #516578;
    background: transparent;
}

.page-content .portlet > .portlet-title > .nav-tabs > li > a:hover {
    border-color: #cfdae6;
    background: #f5f9fd;
    color: #2f455b;
}

.page-content .portlet > .portlet-title > .nav-tabs > li.active > a,
.page-content .portlet > .portlet-title > .nav-tabs > li.active > a:hover,
.page-content .portlet > .portlet-title > .nav-tabs > li.active > a:focus {
    border-color: #c9d6e3;
    background: #ffffff;
    color: #2a3f54;
    box-shadow: 0 3px 8px rgba(35, 49, 65, 0.1);
}

@media (max-width: 991px) {
    .modal:not(.sf-tip-modal) .modal-title {
        font-size: 18px;
    }

    .page-content .ui-tabs {
        padding: 8px;
    }
}