/*
 * Bootstrap 3 -> 5 Compatibility Shim for Skyfilter
 * Created: 2026-02-19 (Phase 2A of BS3->BS5 migration)
 *
 * Purpose: Maps BS3 class names that are used in Skyfilter templates and JS
 * to their BS5 equivalents via pure CSS. This file is loaded AFTER bootstrap.min.css
 * and BEFORE main.css, so main.css overrides still take precedence.
 *
 * This shim covers:
 *   - Grid: col-xs-* (removed in BS5, mapped to col-*)
 *   - Buttons: btn-default (removed, mapped to btn-secondary appearance)
 *   - Buttons: btn-xs (removed in BS5)
 *   - Forms: form-group, control-label, help-block, form-control-static, form-inline
 *   - Float utilities: pull-left, pull-right, center-block
 *   - Navbar: navbar-fixed-top, flex override for .page-header.navbar
 *   - Navbar: .dropdown-toggle::after caret suppression
 *   - Navbar: .navbar-nav display:block override
 *   - Images: img-responsive (renamed to img-fluid in BS5)
 *   - Text alignment: text-left, text-right (replaced by text-start/text-end in BS5)
 *   - Caret: .caret (removed in BS5, dropdowns use CSS)
 *   - Close button: button.close (renamed to .btn-close in BS5)
 *   - Dropdowns: .open -> .show state mapping for all dropdown contexts
 *   - Sidebar: .collapse visibility override for page-sidebar (BS5 hides it)
 *   - Navbar li: display:inline-block for all TopBar nav items
 *   - Attack Monitor: .badge selector mapping for protection_states indicators
 *
 * NOT included here (already handled by main.css):
 *   - .label / .label-* (custom definitions in main.css L883-940)
 *   - .img-circle, .img-rounded (custom definitions in main.css L100-106)
 *   - .hidden-xs/sm/md/lg (not used in Skyfilter templates)
 *   - .panel / .well / .thumbnail (not used in Skyfilter)
 */

/* ============================================================
 * GRID: col-xs-* -> col-* (BS5 removed xs breakpoint prefix)
 * Used in: MonATLog, MonTrc, MonIp, MonSys, MonAtk, IpsIds,
 *          MonSTLog, MonSULog, MonRTLog, AdmnCap (25+ instances)
 * ============================================================ */
.col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* col-xs-offset-* -> offset-* */
.col-xs-offset-0 { margin-left: 0; }
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-6 { margin-left: 50%; }

/* ============================================================
 * BUTTONS: btn-default (removed in BS5)
 * Used in: MonAtk (15x), GeoFilter (2x), LoginDlg (1x),
 *          TrustedProxy (2x), core-custom.js bdialog default
 * Matches BS3 btn-default appearance (white bg, gray border)
 * ============================================================ */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default.disabled,
.btn-default:disabled {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    opacity: 0.65;
}

/* btn-xs (removed in BS5)
 * Used in: MonAtk (13x), GeoFilter (5x) */
.btn-xs {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-font-size: 12px;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: 3px;
}

/* ============================================================
 * FORMS: BS3 form classes (changed in BS5)
 * Used in: ~46 template files (212 total occurrences)
 * ============================================================ */

/* form-group -> mb-3 in BS5, but keeping as custom class */
.form-group {
    margin-bottom: 1rem;
}

/* control-label -> form-label in BS5 */
.control-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: inherit;
}

/* help-block -> form-text in BS5 */
.help-block {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-secondary-color, #6c757d);
}

/* form-control-static -> form-control-plaintext in BS5 */
.form-control-static {
    padding-top: calc(0.375rem + var(--bs-border-width, 1px));
    padding-bottom: calc(0.375rem + var(--bs-border-width, 1px));
    margin-bottom: 0;
    line-height: 1.5;
    background-color: transparent;
    border: solid transparent;
    border-width: var(--bs-border-width, 1px) 0;
}

/* form-horizontal control-label vertical alignment */
.form-horizontal .control-label {
    padding-top: calc(0.375rem + var(--bs-border-width, 1px));
}

/* form-inline (removed in BS5)
 * BS3 .form-inline makes children inline for horizontal form layouts.
 * Used in: CurNic.tpl (1x), RefTm.tpl (2x), RefTmMon.tpl (2x)
 * These control the page toolbar (Current NIC/Subnet/RN selectors)
 * and refresh interval selectors that appear on most pages. */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.form-inline .form-group,
.form-inline .mb-3 {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}
.form-inline label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    margin-right: 0.25rem;
}
.form-inline .btn {
    display: inline-block;
}
.form-inline .input-group {
    width: auto;
}
.form-inline .form-select {
    display: inline-block;
    width: auto;
}

/* ============================================================
 * FORM-HORIZONTAL ROW BEHAVIOR (BS3->BS5 regression fix)
 *
 * In BS3, .form-horizontal .form-group acted as a row:
 *   - display: flex (via clearfix + negative margins)
 *   - col-md-* children rendered side-by-side
 *
 * In BS5, .form-horizontal was removed and .mb-3 is just
 * margin-bottom — it provides NO flex/grid context.
 * Without this fix, col-md-* labels and inputs stack vertically.
 *
 * Affected: 39 template files, 168 label+col instances
 * Pattern:  .form-horizontal > ... > .mb-3 > .form-label.col-md-N
 *                                           > .col-md-M > input
 * ============================================================ */

/* Make .mb-3 inside form-horizontal act as a row */
.form-horizontal .mb-3,
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1.5rem));
}

/* Give col-* children inside form-horizontal proper gutter padding */
.form-horizontal .mb-3 > .form-label,
.form-horizontal .mb-3 > [class*="col-"],
.form-horizontal .form-group > .control-label,
.form-horizontal .form-group > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* Vertical alignment for form-label in horizontal forms
 * BS3 control-label had 7px padding-top to align with inputs */
.form-horizontal .form-label {
    padding-top: calc(0.375rem + var(--bs-border-width, 1px));
    margin-bottom: 0;
}

/* ============================================================
 * FLOAT UTILITIES (renamed in BS5)
 * pull-left -> float-start, pull-right -> float-end
 * Used in: TopBar (1x), CcDnsLst (1x), OutDnsLst (1x),
 *          main.css nav rules (6x)
 * ============================================================ */
.pull-left {
    float: left !important;
}
.pull-right {
    float: right !important;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Legacy BS3 utility used in templates (e.g. TopBar sidebar toggler). */
.hide {
    display: none !important;
}

/* ============================================================
 * TEXT ALIGNMENT (renamed in BS5 for RTL support)
 * text-left -> text-start, text-right -> text-end
 * Used in: AppBtn (1x), MonTLSet (1x), LoginDlg (5x)
 * BS5 still has text-start/text-end but removed text-left/right
 * ============================================================ */
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}

/* ============================================================
 * NAVBAR: navbar-fixed-top (changed in BS5)
 * Used in: TopBar.tpl (1x), main.css (2x)
 * BS5 uses .fixed-top instead
 * ============================================================ */
.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

/* ============================================================
 * NAVBAR FLEX OVERRIDE (BS5 regression fix)
 *
 * BS5 .navbar sets display:flex which breaks the Skyfilter
 * TopBar layout. Skyfilter's .page-header.navbar uses a custom
 * float-based layout (page-logo float:left, top-menu float:right)
 * that predates BS5's flex navbar.
 *
 * BS5 also sets display:flex on .nav and flex-direction:column
 * on .navbar-nav, which would stack menu items vertically.
 *
 * Fix: Reset .page-header.navbar to display:block so all the
 * float-based rules in main.css (L1946-2142) work correctly.
 * Also ensure .page-header-inner fills the full width.
 *
 * Affected: TopBar.tpl (navigation hub for all pages)
 * ============================================================ */

/* Reset BS5 flex on the Skyfilter page-header navbar.
 * BS5 .navbar { display:flex; flex-wrap:wrap; align-items:center;
 *               justify-content:space-between }
 * Skyfilter needs: display:block (floats handle layout) */
.page-header.navbar {
    display: block;
}

/* Ensure page-header-inner fills full width (no explicit rule
 * existed in main.css; in block context this is automatic,
 * but adding for safety if flex is ever re-introduced) */
.page-header.navbar .page-header-inner {
    width: 100%;
}

/* BS5 .navbar-nav sets display:flex + flex-direction:column.
 * main.css overrides display:block (higher specificity) but
 * adding this shim for lower-specificity contexts where
 * .navbar-nav appears outside .page-header (future-proofing). */
.page-header.navbar .navbar-nav {
    display: block;
    flex-direction: unset;
}

/* BS3 had .navbar-nav > li { float:left } which made all nav items
 * sit side-by-side. BS5 removed this (uses flexbox instead).
 * main.css only sets display:inline-block on li.dropdown (L2013-2017),
 * so non-dropdown items like li.help would stack vertically.
 * Fix: Make ALL navbar-nav li items inline-block in the TopBar. */
.page-header.navbar .top-menu .navbar-nav > li {
    display: inline-block;
    vertical-align: middle;
}

/* Desktop topbar vertical alignment calibration for BS5.
 * Keeps language/user blocks centered in 46px header line. */
@media (min-width: 992px) {
    .page-header.navbar .top-menu .navbar-nav > li {
        height: 46px;
    }
    .page-header.navbar .top-menu .navbar-nav > li > a {
        display: inline-flex;
        align-items: center;
        height: 46px;
        line-height: 1;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .page-header.navbar .top-menu .navbar-nav > li.help > a > i {
        line-height: 1;
    }
    .page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle > img {
        margin-top: 0;
    }
}

/* BS5 .dropdown-toggle::after adds a CSS triangle caret.
 * Skyfilter TopBar already has <i class="fa fa-angle-down">
 * for caret display. Hide BS5's auto-caret to prevent double carets. */
.page-header.navbar .dropdown-toggle::after {
    display: none;
}

/* ============================================================
 * IMAGES: img-responsive (renamed in BS5)
 * BS5 uses .img-fluid instead. Used in main.css table rule.
 * ============================================================ */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================================
 * CARET (removed in BS5 — dropdowns use CSS ::after)
 * No direct .caret usage in templates, but TopBar.tpl dropdowns
 * might rely on it. Included for safety.
 * ============================================================ */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
    border-top: 0;
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
    content: "";
}

/* ============================================================
 * CLOSE BUTTON: button.close (changed in BS5)
 * BS5 renamed .close to .btn-close with different markup.
 * Used in: Comm.tpl (7x), AdmnNic (3x), AdmnRa (4x),
 *          AdmnCfg (1x), LoginDlg (2x), and more (31 total)
 * Also used by jTable jquery.jtable.js (4 instances)
 *
 * BS3 pattern: <button class="close" data-dismiss="modal">
 *              <span aria-hidden="true">&times;</span></button>
 * BS5 pattern: <button class="btn-close" data-bs-dismiss="modal">
 *
 * This shim restores BS3 .close appearance so existing markup works.
 * ============================================================ */
button.close,
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    padding: 0;
    background-color: transparent;
    border: 0;
    appearance: none;
}
button.close:hover,
.close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}
button.close:focus,
.close:focus {
    outline: 0;
    box-shadow: none;
    opacity: 0.75;
}

/* ============================================================
 * MODAL ADJUSTMENTS
 * BS5 modal changes that affect existing Skyfilter modals:
 * - .modal-header flex layout (close button position)
 * - .modal-lg / .modal-sm still exist in BS5
 * ============================================================ */

/* Ensure close button inside modal-header is positioned correctly
 * BS3 uses float:right on .close, BS5 uses flex + ms-auto on btn-close.
 * Since we keep .close class, ensure it works in BS5 flex header. */
.modal-header .close {
    margin: -0.5rem -0.5rem -0.5rem auto;
    padding: 0.5rem;
}

/* ============================================================
 * DROPDOWN COMPAT
 * BS5 dropdowns require data-bs-toggle="dropdown" (handled by
 * bs3-data-shim.js). CSS classes are largely the same.
 * .dropdown-menu positioning changed to use Popper.js in BS5.
 * ============================================================ */

/* BS3 .open class -> BS5 uses .show on both toggle and menu.
 * Map ALL .open occurrences to also match .show, since BS5
 * dropdown JS toggles .show instead of .open.
 * main.css references: L471-474, L568-584, L1674-1830, L2034, L2206 */
.open > .dropdown-menu,
.show > .dropdown-menu {
    display: block;
}
.open > .dropdown-toggle.btn-default,
.show > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* Generic dropdown border on open/show (mirrors main.css L471-474) */
.dropup.show > .dropdown-toggle,
.dropdown.show > .dropdown-toggle {
    border-color: #ddd;
}

/* ============================================================
 * DROPDOWN STATE: .open -> .show (BS5 regression fix)
 *
 * BS5 toggles .show class on dropdowns instead of BS3's .open.
 * main.css uses .dropdown.open selectors for active state
 * styling (L2032-2033). These rules need .show equivalents.
 *
 * Also: BS5 applies position:static to .navbar-nav .dropdown-menu
 * in mobile context (without navbar-expand-*). Override to
 * ensure absolute positioning for TopBar dropdown menus.
 *
 * Affected: TopBar.tpl dropdown-language, dropdown-user
 * ============================================================ */

/* Map main.css .dropdown.open rules to BS5 .dropdown.show */
.page-header.navbar .top-menu .navbar-nav > li.dropdown.show .dropdown-toggle {
    background-color: #d0d0d0;
}

/* BS5 .navbar-nav .dropdown-menu { position:static } in mobile.
 * Without navbar-expand-*, this applies at all breakpoints.
 * Skyfilter TopBar needs absolute positioning for dropdown menus. */
.page-header.navbar .navbar-nav .dropdown-menu {
    position: absolute;
}

/* Mobile navbar dropdown with .show (mirrors main.css L568-584) */
@media (max-width: 767px) {
    .navbar-nav .show .dropdown-menu {
        position: absolute;
        float: left;
        width: auto;
        margin-top: 0;
        background-color: #ffffff;
        border: 1px solid #efefef;
        box-shadow: 5px 5px rgba(102, 102, 102, 0.1);
    }
    .navbar-nav .show .dropdown-menu > li > a {
        padding: 6px 0 6px 13px;
        color: #333;
    }
    .navbar-nav .show .dropdown-menu > li > a:hover,
    .navbar-nav .show .dropdown-menu > li > a:active {
        background-color: #eee;
    }
}

/* Mobile TopBar dropdown menu position (mirrors main.css L2204-2206) */
@media (max-width: 991px) {
    .page-header.navbar .top-menu .navbar-nav .show .dropdown-menu {
        position: absolute;
    }
}

/* ============================================================
 * SIDEBAR: mobile toggle via isolated .sf-sidebar-toggle class
 *
 * Previously SideBar.tpl had "navbar-collapse collapse" classes,
 * which caused BS5 Collapse plugin to manage sidebar height on
 * every reflow — producing jitter on the Overview button.
 *
 * Fix: Removed navbar-collapse/collapse classes from sidebar.
 * Added .sf-sidebar-toggle as an isolated BS5 Collapse target
 * for the mobile hamburger toggler (TopBar.tpl data-bs-target).
 *
 * Desktop (>=992px): sidebar always visible, no collapse.
 * Mobile (<992px): BS5 Collapse adds/removes .show class.
 *
 * Affected: SideBar.tpl (included in all 9 page templates)
 * ============================================================ */

/* Desktop: sidebar always visible */
@media (min-width: 992px) {
    .sf-sidebar-toggle {
        display: block !important;
    }
}

/* Mobile: sidebar hidden by default, shown when hamburger toggled.
 * BS5 Collapse adds .show class when toggled. */
@media (max-width: 991px) {
    .sf-sidebar-toggle:not(.show) {
        display: none;
    }
    .sf-sidebar-toggle.show {
        display: block !important;
    }
}

/* ============================================================
 * ATTACK MONITOR: .label -> .badge selector mapping (BS5 regression)
 *
 * MonAtk.tpl status indicators were migrated from:
 *   <div class="label label-sm label-success">
 * to:
 *   <div class="badge bg-secondary badge-sm">
 *
 * But main.css protection_states rules (L1796, L1908, L3542-3558)
 * use .label selectors for background color, icon content, and
 * sizing. These rules don't match .badge elements.
 *
 * Fix: Duplicate the protection_states .label rules for .badge.
 * ============================================================ */

/* Normal state: green background for badge indicator
 * (mirrors main.css L1796-1798) */
.protection_states > li > .col1 > .cont > .cont-col1 > .badge {
    border-color: #44b6ae !important;
    background-image: none !important;
    background-color: #44b6ae !important;
}

/* Attacking state: red background for badge indicator
 * (mirrors main.css L1908-1914) */
.protection_states > li.attacking > .col1 > .cont > .cont-col1 > .badge {
    border-color: #e35b5a !important;
    background-image: none !important;
    background-color: #e35b5a !important;
}

/* Badge display and sizing inside protection_states
 * (mirrors main.css L3542-3547) */
.protection_states li .col1 > .cont > .cont-col1 > .badge {
    display: inline-block;
    padding: 5px 4px 6px 5px;
    vertical-align: middle;
    text-align: center;
}

/* Badge icon sizing (mirrors main.css L3548-3551) */
.protection_states li .col1 > .cont > .cont-col1 > .badge > i {
    text-align: center;
    font-size: 14px;
}

/* Normal state: checkmark icon via FA content
 * (mirrors main.css L3552-3555) */
.protection_states li .col1 > .cont > .cont-col1 > .badge > i:before {
    content: "\f058";
}

/* Attacking state: warning triangle icon via FA content
 * (mirrors main.css L3556-3559) */
.protection_states li.attacking > .col1 > .cont > .cont-col1 > .badge > i:before {
    content: "\f071";
}

/* Attacking state: blink animation for badge icon
 * (mirrors main.css L3482-3483) */
.protection_states > li.attacking > .col1 .badge i {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Note: .dashboard-system-state .visual > i:before rules already
 * exist in main.css L3553-3558 with correct selectors for the
 * system attack state box. No changes needed there. */

/* ============================================================
 * BUTTON SIZING: BS3->BS5 font-size regression fix
 *
 * BS3 .btn used font-size: 14px (fixed px).
 * BS5 .btn uses --bs-btn-font-size: 1rem which equals the <html>
 * root font-size (16px browser default). Skyfilter body uses 13px
 * (main.css L16), so BS5 buttons appear ~23% larger than surrounding
 * text and 14% larger than the original BS3 buttons.
 *
 * Fix: Override BS5 .btn font-size to 14px (matching BS3) and
 * set padding to match BS3 defaults (6px 12px) using px values
 * instead of rem to avoid dependency on root font-size.
 *
 * Also restore .form-actions button spacing to match BS3 appearance.
 *
 * Affected: ALL pages with .btn elements — AppBtn.tpl (Refresh/
 *           Reset/Apply), jTable toolbars, modal buttons, etc.
 * ============================================================ */
.btn {
    --bs-btn-font-size: 14px;
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-line-height: 1.42857143;
}

/* Restore BS3 btn-sm sizing (BS5 btn-sm uses rem units) */
.btn-sm, .btn-group-sm > .btn {
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 10px;
    --bs-btn-font-size: 12px;
}

/* Form controls: BS5 uses font-size: 1rem (16px) but BS3 used 14px.
 * Override to match BS3 sizing for consistency with 13px body text. */
.form-control {
    font-size: 14px;
    padding: 6px 12px;
}
.form-select {
    font-size: 14px;
    padding: 6px 36px 6px 12px; /* extra right padding for dropdown arrow */
}

/* ============================================================
 * SELECT AFFORDANCE: make editable dropdowns look interactive
 *
 * BS3 templates use <select class="form-control ..."> extensively
 * (CurNic top toolbar, many protection pages). In BS5, .form-control
 * applies input-like rendering, which can hide the native dropdown cue
 * and make editable fields look like static text boxes.
 *
 * Fix: restore native select appearance and pointer semantics for
 * single-select controls, without changing layout/width behavior.
 * ============================================================ */
select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    cursor: pointer;
    padding-right: 28px !important; /* keep room for native arrow */
}

select.form-control:not([multiple]):not([size]):hover:not(:disabled),
select.form-select:not([multiple]):not([size]):hover:not(:disabled) {
    border-color: #8c8c8c;
}

/* Form-actions button bar: ensure compact spacing and proper layout */
.form-actions .btn {
    margin-right: 5px;
}
.form-actions .btn:last-child {
    margin-right: 0;
}

/* ============================================================
 * jTABLE MODAL FORM LAYOUT: Label visibility + form layout fix
 *
 * Problem: jTable "Add new record" and "Edit record" modals show
 * input fields but labels are invisible after BS3->BS5 migration.
 *
 * Root cause: Multiple CSS cascade conflicts between bs3-compat.css
 * (loaded via @import inside main.css at L5) and main.css rules
 * that come AFTER the import. At equal specificity, main.css wins
 * because it's processed after bs3-compat.css.
 *
 * The EXACT jTable modal DOM structure (from jquery.jtable.js):
 *
 *   div.modal.fade                     (outermost modal wrapper)
 *     div.modal-dialog
 *       div.modal-content
 *         div.modal-header
 *           button.btn-close
 *           h4.modal-title             ("Add new record")
 *         div.modal-body.form          (note: "form" is a CSS class!)
 *           form#jtable-create-form.jtable-dialog-form
 *               .jtable-create-form.form-horizontal.form-row-seperated
 *             div.form-body
 *               div.mb-3               (one per field)
 *                 label.form-label.col-md-4   <-- THE LABEL
 *                 div.col-md-8                <-- input wrapper
 *                   input.form-control        <-- the input
 *
 * Fix strategy: Use !important on ALL critical label properties
 * with the highest-specificity selectors matching the exact DOM.
 * Also override the form-body padding and mb-3 layout.
 *
 * Affected: All jTable Add/Edit modals (DdosPort, IpsIds keywords,
 *           IpFLst, DnsFLst, etc.) — any page with jTable CRUD.
 * ============================================================ */

/* Give form-body inside modal proper padding to contain the form.
 * main.css L710: .form .form-row-seperated .form-body { padding:0 }
 * overrides this at equal specificity, so !important is required. */
.modal-body.form .form-body {
    padding: 10px 15px !important;
}

/* Make each field container (mb-3/form-group) a flex row.
 * The bs3-compat general rule (.form-horizontal .mb-3) sets display:flex
 * but also adds negative margins. In modal context, remove the negative
 * margins and explicitly re-declare flex to prevent any override. */
.modal-body.form .form-horizontal .mb-3,
.modal-body.form .form-horizontal .form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* CRITICAL: Force label visibility in jTable modal forms.
 * Labels use class="form-label col-md-4" (set by jquery.jtable.js L1602).
 * Original BS3 version used class="control-label col-md-4" (L1545 in .orig).
 * Target both patterns for safety.
 *
 * The label must have:
 *  - display: block (not collapsed)
 *  - explicit width (33% for col-md-4 equivalent)
 *  - visible color and font-size
 *  - flex-shrink:0 to prevent being squeezed out */
.modal-body.form .form-horizontal .mb-3 > label,
.modal-body.form .form-horizontal .form-group > label {
    display: block !important;
    flex: 0 0 33.33333333% !important;
    max-width: 33.33333333% !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
    padding-top: calc(0.375rem + 1px) !important;
    text-align: right !important;
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    word-wrap: break-word !important;
}

/* Input wrapper (col-md-8 div) takes the remaining 66%.
 * IMPORTANT: Use div[class*="col-"] to exclude the <label> element
 * which also has col-md-4 class. Without the div qualifier, this
 * rule would override the label's 33% width (same specificity,
 * later rule wins). */
.modal-body.form .form-horizontal .mb-3 > div[class*="col-"],
.modal-body.form .form-horizontal .form-group > div[class*="col-"] {
    flex: 0 0 66.66666667% !important;
    max-width: 66.66666667% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
 * CHECKBOX VISIBILITY FIX (BS5 regression)
 *
 * BS5 .form-control applies "appearance: none" (bootstrap.css L2125)
 * which is correct for text inputs but completely removes the native
 * checkbox rendering, making checkboxes invisible.
 *
 * Affected checkboxes use class="form-control input-inline":
 *   - IpsIds.tpl L41: Check DUrl checkbox (id=idIdsIsChkDUrl)
 *   - IpsIds.tpl L47: Check Cookie checkbox (id=idIdsIsChkCke)
 *
 * Other checkboxes in the codebase (AdmnCap, DdosSCon, DdosCC, etc.)
 * use class="position-relative top-2" (no .form-control) and are NOT
 * affected.
 *
 * Fix: Restore native checkbox appearance when .form-control is applied
 * to checkbox inputs, and reset width/padding/border that .form-control
 * also sets (display:block, width:100%, padding, border).
 * ============================================================ */
input[type="checkbox"].form-control,
input[type="radio"].form-control {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: initial !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-clip: border-box !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

/* Fix radio appearance separately (radios need "radio" appearance) */
input[type="radio"].form-control {
    -webkit-appearance: radio !important;
    -moz-appearance: radio !important;
    appearance: radio !important;
}

/* ============================================================
 * MODAL HEADER: Close button order fix for jTable modals
 *
 * jTable creates modal-header with btn-close BEFORE the title:
 *   <div class="modal-header">
 *     <button class="btn-close" ...></button>
 *     <h4 class="modal-title">Add new record</h4>
 *   </div>
 *
 * BS5 modal-header uses display:flex. With the close button first,
 * and BS5's .modal-header .btn-close { margin-left: auto },
 * the close button is pushed right. But the title precedes it
 * visually. Fix: use flex order to ensure title comes first.
 * ============================================================ */
.modal-header > .modal-title {
    order: -1;
}
.modal-header > .btn-close,
.modal-header > .close {
    order: 1;
    margin-left: auto;
}

/* ============================================================
 * TIP/ERROR MODALS: modern visual language for ArnDef notices
 *
 * Scope: Only modals tagged with .sf-tip-modal in templates.
 * No behavior or dialog lifecycle changes.
 * ============================================================ */
.sf-tip-modal .modal-content {
    border: 1px solid #d7e2ee;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(25, 57, 87, 0.18);
    overflow: hidden;
}

.sf-tip-modal .modal-header {
    position: relative;
    padding: 14px 18px;
    border-bottom: 1px solid #e5ecf3;
    background: linear-gradient(180deg, #f8fbfe 0%, #f3f7fb 100%);
}

.sf-tip-modal .modal-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #5f8fb8;
}

.sf-tip-modal.sf-tip-danger .modal-header::before {
    background: #d55b5f;
}

.sf-tip-modal.sf-tip-warning .modal-header::before {
    background: #d2a545;
}

.sf-tip-modal.sf-tip-info .modal-header::before {
    background: #4f8fbd;
}

.sf-tip-modal .modal-title {
    color: #2e4153;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.sf-tip-modal .modal-title > i {
    margin-right: 8px;
    color: #687d92;
}

.sf-tip-modal .modal-header .btn-close {
    opacity: 0.7;
}

.sf-tip-modal .modal-header .btn-close:hover {
    opacity: 1;
}

.sf-tip-modal .modal-body {
    padding: 22px 20px 14px;
}

.sf-tip-modal .modal-body p {
    margin-bottom: 14px;
    color: #36495b;
    line-height: 1.6;
    font-size: 16px;
}

.sf-tip-modal .modal-body p.text-danger {
    color: #b1464b !important;
    font-weight: 600;
}

.sf-tip-modal .modal-body .alert {
    border-radius: 10px !important;
    border-width: 1px;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.sf-tip-modal .modal-body .alert strong {
    font-size: 18px;
    font-weight: 700;
}

.sf-tip-modal.sf-tip-danger .modal-body .alert-danger {
    background-color: #fdeff1;
    border-color: #f2c2c8;
    color: #a54146;
}

.sf-tip-modal.sf-tip-warning .modal-body .alert-warning {
    background-color: #fff6e7;
    border-color: #f2ddb2;
    color: #8a6a2d;
}

.sf-tip-modal.sf-tip-info .modal-body .alert-info {
    background-color: #edf6ff;
    border-color: #c8def1;
    color: #2f658d;
}

.sf-tip-modal .modal-footer {
    padding: 14px 18px 16px;
    border-top: 1px solid #e6edf5;
    background-color: #fbfdff;
}

.sf-tip-modal .modal-footer .btn {
    min-width: 88px;
    border-radius: 9px !important;
    font-weight: 600;
    padding: 7px 14px;
}

.sf-tip-modal .modal-footer .btn-primary {
    background-color: #4f8fbd;
    border-color: #467fa7;
}

.sf-tip-modal .modal-footer .btn-primary:hover {
    background-color: #427ca8;
    border-color: #3c7098;
}

.sf-tip-modal .modal-footer .btn-secondary {
    background-color: #6f7782;
    border-color: #646c76;
    color: #fff;
}

.sf-tip-modal .modal-footer .btn-secondary:hover {
    background-color: #646c76;
    border-color: #59626c;
    color: #fff;
}

@media (max-width: 768px) {
    .sf-tip-modal .modal-title {
        font-size: 20px;
    }

    .sf-tip-modal .modal-body {
        padding: 18px 14px 12px;
    }

    .sf-tip-modal .modal-body p {
        font-size: 15px;
        margin-bottom: 12px;
    }
}