/* Premium finishing layer (Phase-6)
 * Scope: state colors + micro-animation tuning.
 * Safety: CSS-only, no JS/PHP/protocol changes.
 */

body.page-header-fixed {
    --sf-state-success-bg: #e9f8ef;
    --sf-state-success-bd: #b9e4c8;
    --sf-state-success-fg: #216444;

    --sf-state-info-bg: #eaf5ff;
    --sf-state-info-bd: #bfdaf2;
    --sf-state-info-fg: #2a5f88;

    --sf-state-warning-bg: #fff6e8;
    --sf-state-warning-bd: #f1dcb3;
    --sf-state-warning-fg: #7c5a1f;

    --sf-state-danger-bg: #fdecef;
    --sf-state-danger-bd: #efc2ca;
    --sf-state-danger-fg: #8d2f3b;
}

/* Semantic text states */
.page-content .text-success {
    color: #25734e !important;
}

.page-content .text-info {
    color: #2c6a97 !important;
}

.page-content .text-warning {
    color: #8a651f !important;
}

.page-content .text-danger {
    color: #a43d4a !important;
}

/* Badge/label state consistency */
.page-content .label,
.page-content .badge {
    border-radius: 999px;
    border: 1px solid transparent;
    letter-spacing: 0.05px;
}

.page-content .label-success,
.page-content .badge.bg-success {
    background-color: var(--sf-state-success-bg) !important;
    border-color: var(--sf-state-success-bd) !important;
    color: var(--sf-state-success-fg) !important;
}

.page-content .label-info,
.page-content .badge.bg-info {
    background-color: var(--sf-state-info-bg) !important;
    border-color: var(--sf-state-info-bd) !important;
    color: var(--sf-state-info-fg) !important;
}

.page-content .label-warning,
.page-content .badge.bg-warning {
    background-color: var(--sf-state-warning-bg) !important;
    border-color: var(--sf-state-warning-bd) !important;
    color: var(--sf-state-warning-fg) !important;
}

.page-content .label-danger,
.page-content .badge.bg-danger {
    background-color: var(--sf-state-danger-bg) !important;
    border-color: var(--sf-state-danger-bd) !important;
    color: var(--sf-state-danger-fg) !important;
}

/* Alert blocks */
.page-content .alert {
    border-radius: 10px !important;
    border-width: 1px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.page-content .alert-success {
    background-color: var(--sf-state-success-bg);
    border-color: var(--sf-state-success-bd);
    color: var(--sf-state-success-fg);
}

.page-content .alert-info {
    background-color: var(--sf-state-info-bg);
    border-color: var(--sf-state-info-bd);
    color: var(--sf-state-info-fg);
}

.page-content .alert-warning {
    background-color: var(--sf-state-warning-bg);
    border-color: var(--sf-state-warning-bd);
    color: var(--sf-state-warning-fg);
}

.page-content .alert-danger {
    background-color: var(--sf-state-danger-bg);
    border-color: var(--sf-state-danger-bd);
    color: var(--sf-state-danger-fg);
}

/* Data-grid operation states */
.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-row-created > td,
.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-row-updated > td {
    background: #eef8f2;
    color: #2f6146;
}

.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-row-deleting > td {
    background: #fdecef;
    color: #8d2f3b;
}

/* Attack state emphasis */
.monitor-atk-modern .protection_states > li.attacking {
    border-color: #e4a3ac;
    box-shadow: 0 0 0 2px rgba(191, 30, 46, 0.08);
}

/* Motion fine-tuning */
.page-content .btn,
.page-content .portlet.light.bordered.primary-box-shadow,
.page-content .jtable-main-container,
.page-content .ui-tabs .ui-tabs-nav li,
.page-content .portlet > .portlet-title > .nav-tabs > li > a {
    transition: background-color var(--sf-motion-fast, 140ms ease), border-color var(--sf-motion-fast, 140ms ease),
        color var(--sf-motion-fast, 140ms ease), box-shadow var(--sf-motion-mid, 180ms ease),
        transform var(--sf-motion-fast, 140ms ease);
}

.page-content .btn:hover {
    transform: translateY(-1px);
}

.page-content .btn:active,
.page-content .btn.active {
    transform: translateY(0);
}

.page-content .portlet.light.bordered.primary-box-shadow:hover {
    transform: translateY(-1px);
}

.page-content .ui-tabs .ui-tabs-nav li:hover:not(.ui-tabs-active) {
    transform: translateY(-1px);
}

/* ============================================================
 * [FIX-NO-MOTION-BY-REQUEST] Disable open/close and hover effects
 * User requested no visual motion effects (modals/buttons/tabs/grid controls).
 * Keep premium visual style, remove movement and transition animations.
 * ============================================================ */
.modal.fade,
.modal.fade .modal-dialog,
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show {
    transition: none !important;
    animation: none !important;
}

.modal.fade .modal-dialog {
    transform: none !important;
}

.page-content .btn,
.page-content .portlet.light.bordered.primary-box-shadow,
.page-content .jtable-main-container,
.page-content .ui-tabs .ui-tabs-nav li,
.page-content .portlet > .portlet-title > .nav-tabs > li > a,
.page-content div.jtable-main-container > table.jtable > thead th.jtable-column-header-sortable,
.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-command-button,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
.page-content div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next {
    transition: none !important;
    animation: none !important;
}

.page-content .btn:hover,
.page-content .btn:active,
.page-content .btn.active,
.page-content .portlet.light.bordered.primary-box-shadow:hover,
.page-content .ui-tabs .ui-tabs-nav li:hover:not(.ui-tabs-active),
.modal:not(.sf-tip-modal) .modal-header .btn-close:hover,
.modal:not(.sf-tip-modal) .modal-header .close:hover,
.page-content div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-command-button:hover {
    transform: none !important;
}

/* ============================================================
 * [FIX-RESPONSIVE-HARDENING] Cross-device responsive safeguards
 * Goal: close remaining overflow/layout gaps on tablet/mobile.
 * ============================================================ */
@media (max-width: 991px) {
    /* Attack monitor list: avoid 250px fixed column in tablet portrait range. */
    .protection_states li .col1 {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Keep footer info block full-width on narrow layouts even with inline width attr. */
    .page-footer .page-footer-inner[style*="width:60%"] {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    /* Legacy modal dialogs with inline style width:60% (e.g., remote node settings). */
    .modal-dialog[style*="width:60%"] {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto;
    }

    /* Keep tab bars scrollable rather than wrapping/breaking layout. */
    .page-content .ui-tabs .ui-tabs-nav {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .page-content .ui-tabs .ui-tabs-nav li {
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    /* jTable bottom controls: allow wrapping and avoid clipped right area. */
    .page-content div.jtable-main-container > div.jtable-bottom-panel {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .page-content div.jtable-main-container > div.jtable-bottom-panel div.jtable-right-area {
        position: static;
    }

    /* Modal action buttons stack on very small screens. */
    .modal:not(.sf-tip-modal) .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .modal:not(.sf-tip-modal) .modal-footer .btn {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* Extra safety for dense top filter strips. */
    .page-content .heading-bar .form-inline .mb-3,
    .page-content .heading-bar .form-inline .form-group {
        width: 100%;
        flex: 1 1 100%;
    }

    .page-content .heading-bar .form-inline .form-control {
        width: 100% !important;
    }
}