/**
 * ux3.css — Ux3 Central Custom Styles v5
 */

/* ================================================================
   PACE LOADER — push down 35px
================================================================ */
.pace .pace-progress { top: 52px !important; }
.pace .pace-activity { top: 60px !important; }

/* ================================================================
   PARSLEY VALIDATION
================================================================ */
.parsley-errors-list { list-style:none; padding:0; margin:4px 0 0; }
.parsley-errors-list li { color:#e24b4a; font-size:12px; line-height:1.4; }
.parsley-error  { border-color:#e24b4a !important; }
.parsley-success{ border-color:#249d79 !important; }
.input-group { position:relative; flex-wrap:nowrap !important; }
.input-group .parsley-errors-list { position:absolute; top:100%; left:0; z-index:5; width:100%; margin-top:2px; }

/* ================================================================
   SWEETALERT2 — HUD Admin dark theme
   KEY FIX: Use a real background colour on the popup itself (no ::before trick)
   so the success icon circular animation elements see correct background.
================================================================ */
.swal2-container {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(0,0,0,.45) !important;
    z-index: 99999 !important;
}
.swal2-popup {
    background: #1c2127 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
    padding: 2rem !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.65) !important;
    color: rgba(255,255,255,.75) !important;
}

/* ── Success icon — THE critical fix ────────────────────────────
   swal2-success-circular-line-left/right and swal2-success-fix
   are animated elements that must match the popup background.
   SweetAlert2 sets them to white by default which breaks on dark.
   We match them to the popup background colour (#1c2127).
---------------------------------------------------------------- */
.swal2-icon.swal2-success {
    border-color: #249d79 !important;
    color: #249d79 !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(36,157,121,.25) !important;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #249d79 !important;
}
/* Match these to popup background so animation circle looks correct */
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix {
    background-color: #1c2127 !important;
}

/* Other icon types */
.swal2-icon.swal2-warning { border-color: #e8a838 !important; color: #e8a838 !important; }
.swal2-icon.swal2-error   { border-color: #e24b4a !important; color: #e24b4a !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #e24b4a !important; }
.swal2-icon.swal2-info    { border-color: #3fc3ee !important; color: #3fc3ee !important; }
.swal2-icon.swal2-question{ border-color: #249d79 !important; color: #249d79 !important; }

.swal2-title {
    color: rgba(255,255,255,.9) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding-top: .5rem !important;
    margin: 0 !important;
}
.swal2-html-container {
    color: rgba(255,255,255,.5) !important;
    font-size: .875rem !important;
    margin: .25rem 0 0 !important;
    padding: 0 !important;
}
.swal2-actions { margin-top: 1.5rem !important; gap: .5rem !important; }

/* Buttons — HUD Admin btn-outline-theme / btn-outline-secondary style */
.swal2-popup .swal2-confirm {
    padding: .4rem 1.25rem !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    border: 1px solid #249d79 !important;
    background: transparent !important;
    color: #249d79 !important;
    transition: all .15s !important;
    box-shadow: none !important;
}
.swal2-popup .swal2-confirm:hover {
    background: #249d79 !important;
    color: #fff !important;
}
.swal2-popup .swal2-cancel {
    padding: .4rem 1.25rem !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    background: transparent !important;
    color: rgba(255,255,255,.5) !important;
    transition: all .15s !important;
    box-shadow: none !important;
}
.swal2-popup .swal2-cancel:hover {
    background: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.85) !important;
}

/* Select picker styles are in select-picker/dist/picker.dark.css */

/* ================================================================
   DATATABLES — HUD Admin dark theme
================================================================ */
.dataTables_wrapper { color: rgba(255,255,255,.75); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.75) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none !important;
    border-color: #249d79 !important;
    box-shadow: 0 0 0 3px rgba(36,157,121,.15) !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: rgba(255,255,255,.45) !important;
    font-size: 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: rgba(255,255,255,.5) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    margin: 0 1px !important;
    cursor: pointer;
    transition: all .15s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.85) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #249d79 !important;
    border-color: #249d79 !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: rgba(255,255,255,.2) !important;
    cursor: not-allowed !important;
}
table.dataTable thead th,
table.dataTable thead td { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
table.dataTable.no-footer { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { color: rgba(255,255,255,.25) !important; }
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { color: #249d79 !important; }

.card .dataTables_wrapper { padding: 0; }
.card .dataTables_wrapper .dataTables_length,
.card .dataTables_wrapper .dataTables_filter { padding: 12px 16px; }
.card .dataTables_wrapper .dataTables_info,
.card .dataTables_wrapper .dataTables_paginate {
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,.05);
}

/* ================================================================
   WEBSITE SWITCHER GRID
================================================================ */
.ux3-site-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}
.ux3-site-grid-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px; padding: 10px 6px;
    border-radius: 8px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    transition: all .15s; text-align: center;
}
.ux3-site-grid-item:hover {
    background: rgba(var(--bs-theme-rgb),.12);
    border-color: rgba(var(--bs-theme-rgb),.3);
}
.ux3-site-grid-item.active {
    background: rgba(var(--bs-theme-rgb),.15);
    border-color: var(--bs-theme);
}
.ux3-site-grid-item .site-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(var(--bs-theme-rgb),.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--bs-theme); font-size: 15px; flex-shrink: 0;
}
.ux3-site-grid-item .site-name {
    font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,.75); line-height: 1.2;
    word-break: break-word;
}
.ux3-site-grid-item .site-domain {
    font-size: 10px; color: rgba(255,255,255,.3);
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 100%;
}

/* ================================================================
   AVATAR INITIALS
================================================================ */
.ux3-avatar-initials {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(var(--bs-theme-rgb),.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--bs-theme); font-weight: 700; font-size: 14px;
}

/* ================================================================
   HUD RADIO BUTTONS
================================================================ */
.ux3-radio-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.ux3-radio-group input[type=radio] { display: none; }
.ux3-radio-group label {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 4px; cursor: pointer;
    font-size: 13px; border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.5); background: rgba(255,255,255,.04);
    transition: all .15s;
}
.ux3-radio-group label:hover { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.ux3-radio-group input[type=radio]:checked + label {
    border-color: var(--bs-theme); color: var(--bs-theme);
    background: rgba(var(--bs-theme-rgb),.1);
}

/* ================================================================
   PAUSED SITE BANNER
================================================================ */
.site-paused-banner {
    background: rgba(232,168,56,.12); border: 1px solid rgba(232,168,56,.3);
    border-radius: 8px; padding: 10px 16px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.site-paused-banner i { color: #e8a838; font-size: 18px; flex-shrink: 0; }

/* ================================================================
   MISC
================================================================ */
.min-w-0 { min-width: 0; }
.fs-32px { font-size: 32px !important; }


/* DataTables inside .card.p-0 — add padding to toolbar rows */
.card .dataTables_wrapper .dataTables_length,
.card .dataTables_wrapper .dataTables_filter { padding: 14px 16px 6px; }
.card .dataTables_wrapper .dataTables_info,
.card .dataTables_wrapper .dataTables_paginate { padding: 8px 16px 14px; border-top: 1px solid rgba(255,255,255,.05); }

/* Search input full-width on small screens */
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter input { min-width: 180px; }



/* ================================================================
   DATATABLES — Search keyword highlight
================================================================ */
mark.ux3-dt-highlight {
    background: rgba(var(--bs-theme-rgb), .3) !important;
    color: var(--bs-theme) !important;
    border-radius: 2px !important;
    padding: 0 2px !important;
    font-weight: 600 !important;
}

/* ================================================================
   APP FOOTER — always at page bottom
================================================================ */
/* Make the main content area fill the viewport vertically */
.app-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 60px) !important; /* subtract header height */
}
.app-content .container-fluid {
    flex: 1 0 auto;
}
.app-footer {
    flex-shrink: 0;
    padding: 14px 30px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 24px;
    background: rgba(255,255,255,.02);
}
.app-footer .app-footer-inner {
    font-size: 12px;
    color: rgba(255,255,255,.3);
    text-align: center;
}
.app-footer .app-footer-inner strong {
    color: rgba(255,255,255,.5);
    font-weight: 600;
}
/* ================================================================
   DATATABLES 2.x — Processing overlay
   DataTables 2 uses .dt-processing.card (NOT .dataTables_processing)
   The processing div is a sibling of <table> inside .dt-layout-cell
================================================================ */

/* 1. Make the table-row cell the stacking context so the overlay
      is contained within the table area only */
.dt-container .dt-layout-row.dt-layout-table,
.dt-container .dt-layout-cell {
    position: relative;
}

/* 2. The DT2 processing element: stretch to fill the table cell area */
div.dt-processing.card {
    /* Override DT2 default (top:50%; left:50%; width:200px) */
    position:      absolute !important;
    inset:         0        !important;
    top:           0        !important;
    left:          0        !important;
    width:         100%     !important;
    height:        100%     !important;
    transform:     none     !important;
    margin:        0        !important;
    padding:       0        !important;
    border:        none     !important;
    border-radius: 0        !important;
    /* NO display override — DT2 controls visibility via display:none/block */
    /* display:flex would prevent DT2 from hiding the overlay with display:none */
    z-index:       50       !important;
    pointer-events: all     !important;
    /* Backdrop overlay — only visible when DT2 sets display:block */
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    background: rgba(13, 17, 23, 0.60) !important;
    /* Flex for centring our spinner — only active when shown */
    align-items:   center   !important;
    justify-content: center !important;
}
/* When DT2 shows the processing div it sets display:block via jQuery —
   override to flex so our spinner centres correctly */
div.dt-processing.card[style*="display: block"],
div.dt-processing.card[style*="display:block"] {
    display: flex !important;
}

/* 3. DT2 appends its own animated dots <div><div>...</div></div> — hide them */
div.dt-processing.card > div:last-child:not(.ux3-dt-spinner) {
    display: none !important;
}

/* 4. Our spinner card — centred floating card with card-arrow */
.ux3-dt-spinner {
    position:        relative;
    z-index:         2;
    background:      rgba(22, 27, 34, 0.97);
    border:          1px solid rgba(255, 255, 255, 0.12);
    border-radius:   8px;
    padding:         14px 28px;
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-size:       13px;
    font-weight:     500;
    color:           rgba(var(--bs-theme-rgb), 1) !important;
    white-space:     nowrap;
    box-shadow:      0 8px 32px rgba(0, 0, 0, .55);
    min-width:       155px;
    justify-content: center;
}

.ux3-dt-spinner .spinner-border {
    color: rgba(var(--bs-theme-rgb), 1) !important;
}

.ux3-dt-spinner span:last-of-type {
    color: rgba(var(--bs-theme-rgb), 1) !important;
}

/* Ensure card-arrow inside spinner is positioned correctly */
.ux3-dt-spinner .card-arrow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* DT2 uses .dt-container; keep .dataTables_wrapper for any DT1 fallback */
.dataTables_wrapper {
    position: relative;
}

/* ── Group IPs — clickable IP addresses in DataTables ─────────── */
.ux3-ip-click {
    cursor: pointer;
    border-bottom: 1px dashed rgba(255,255,255,.2);
    transition: border-color .15s;
}
.ux3-ip-click:hover {
    border-bottom-color: currentColor;
    opacity: .85;
}

/* ── Select-picker z-index fix ──────────────────────────────────────── */
/*
 * Cards with filter collapse panels get overflow:visible so the picker
 * dropdown can render above the DataTable rows below.
 * Only .ux3-filter-card is targeted — not ALL cards.
 */
/* Filter cards: allow Select2 dropdowns to render above the DataTable below.
 * IMPORTANT: only apply overflow:visible when the collapse is FULLY OPEN
 * (.collapse.show). During the open/close transition (.collapsing class), let
 * Bootstrap handle overflow:hidden so the height animation is smooth. Without
 * this distinction, the content stays at full size while the box height shrinks,
 * causing a jumpy close animation.
 */
.ux3-filter-card,
.ux3-filter-card .card-body,
.ux3-filter-card .collapse.show {
    overflow: visible !important;
}
/* During transition: keep Bootstrap's default overflow:hidden so content clips
 * smoothly with the height change. */
.ux3-filter-card .collapsing {
    overflow: hidden !important;
}

/* Picker dropdown list — high z-index to appear above DataTable */
.picker {
    position: relative;
}
.picker .pc-list {
    position: absolute !important;
    z-index: 99999 !important;
    min-width: 100%;
    left: 0;
    top: 100%;
}

/* Picker inside filter card — boost z-index even further */
.ux3-filter-card .picker .pc-list {
    z-index: 999999 !important;
}

/* ── Select2 dark theme — global ──────────────────────────────────── */
.select2-container--default .select2-selection--single {
    background: rgba(255,255,255,.05) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-radius: 2px !important;
    height: 31px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: rgba(255,255,255,.75) !important;
    line-height: 29px !important;
    padding-left: 10px !important;
    font-size: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px !important;
    top: 1px !important;
    right: 4px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255,255,255,.4) transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(36,157,121,.45) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent rgba(255,255,255,.6) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255,255,255,.3) !important;
}
.select2-dropdown {
    background: #1e2130 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
    font-size: 12px !important;
    z-index: 999999 !important;
}
.select2-search--dropdown { padding: 6px !important; }
.select2-search--dropdown .select2-search__field {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 4px !important;
    color: rgba(255,255,255,.75) !important;
    outline: none !important;
    padding: 5px 8px !important;
}
.select2-results__option {
    color: rgba(255,255,255,.7) !important;
    padding: 7px 10px !important;
}
.select2-results__option--highlighted[aria-selected] {
    background: rgba(36,157,121,.2) !important;
    color: #5dd4b4 !important;
}
.select2-results__option[aria-selected=true] {
    background: rgba(36,157,121,.1) !important;
    color: rgba(255,255,255,.45) !important;
}
.select2-container { min-width: 60px; }
/* form-select-sm size matching */
.form-select-sm + .select2-container .select2-selection--single { height: 29px !important; }
.form-select-sm + .select2-container .select2-selection--single .select2-selection__rendered { line-height: 27px !important; }


/* ================================================================
   UX3 RESPONSIVE / MOBILE / PWA
   — keeps long strings (URLs, tokens, IPs, hostnames) from breaking
     tables on narrow screens
   — tightens padding on mobile
   — hides PWA status bar / adds safe-area insets when installed to homescreen
================================================================ */

/* Break long strings in table cells so they never overflow the viewport */
table.dataTable tbody td,
.table td,
.table th {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Code-like strings (IPs, tokens, hashes) get break-all so they wrap mid-string */
table.dataTable tbody td code,
table.dataTable tbody td .ux3-ip,
table.dataTable tbody td .token,
table.dataTable tbody td .monospace {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Allow DataTables horizontal scroll on mobile without breaking layout */
.dataTables_wrapper {
    overflow-x: auto;
}

/* Small-screen refinements */
@media (max-width: 767.98px) {
    .page-header { font-size: 20px !important; }
    .card .card-body { padding: 1rem; }
    .card .dataTables_wrapper .dataTables_length,
    .card .dataTables_wrapper .dataTables_filter { padding: 10px 12px; }
    .card .dataTables_wrapper .dataTables_info,
    .card .dataTables_wrapper .dataTables_paginate { padding: 6px 12px 12px; }
    .dataTables_wrapper .dataTables_filter { text-align: left !important; }
    .dataTables_wrapper .dataTables_filter input { min-width: 100% !important; }
    .dataTables_paginate .paginate_button {
        padding: 4px 8px !important; font-size: 12px !important;
    }

    /* Stat-bar tiles stack on phone */
    .ux3-stat-bar { flex-wrap: wrap; }
    .ux3-stat-bar-item { flex: 1 0 48%; }

    /* Site grid cards become single column */
    .ux3-site-grid { grid-template-columns: 1fr !important; }

    /* Keep brand/logo compact in sidebar on narrow screens */
    .brand-text { font-size: 13px; }
}

/* PWA standalone mode — when installed to homescreen */
@media (display-mode: standalone) {
    body { user-select: none; -webkit-tap-highlight-color: transparent; }
    /* Respect iOS safe area (notch / home indicator) */
    .app-header { padding-top: env(safe-area-inset-top); }
    .app-footer { padding-bottom: env(safe-area-inset-bottom); }
    .app-sidebar { padding-top: env(safe-area-inset-top); }
}

/* Smoother tap feedback on touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn, .menu-link, .nav-link { -webkit-tap-highlight-color: rgba(var(--bs-theme-rgb), .15); }
    .menu-link, .btn { min-height: 30px; } /* easier tap targets */
}


/* ================================================================
   UX3 SIDEBAR CLOSE BUTTON + MOBILE TABLE FIX
================================================================ */

/* Mobile-only close button inside the sidebar drawer */
.ux3-sidebar-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1100;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.85);
    display: none;               /* hidden on desktop */
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ux3-sidebar-close:hover {
    background: rgba(226,75,74,.2);
    border-color: rgba(226,75,74,.4);
    color: #fff;
}
/* Show only when the drawer is actually open (mobile) */
.app-sidebar-mobile-toggled .ux3-sidebar-close {
    display: flex;
}



/* ================================================================
   UX3 CHAT
================================================================ */
.ux3-chat-card .ux3-chat-sidebar { background: rgba(0,0,0,.04); }
.ux3-chat-contact { transition: background .15s; color: inherit; }
.ux3-chat-contact:hover { background: rgba(255,255,255,.04); }
.ux3-chat-contact.active { background: rgba(36,157,121,.12); border-left: 3px solid var(--bs-theme); }

@media (max-width: 767.98px) {
    /* On mobile, stack sidebar above messages OR hide sidebar entirely when a
       conversation is open. Simplest: drop sidebar to top, compact it. */
    .ux3-chat-card .ux3-chat-sidebar {
        width: 100% !important;
        max-height: 220px;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .ux3-chat-card .card-body { flex-direction: column !important; }
    #chatMessages { max-height: 340px !important; min-height: 240px !important; }
}


/* ================================================================
   UX3 TABLE MOBILE SCROLL (v3 — no scrollX, CSS-only)
   Makes any DataTables or plain table inside a card scroll
   horizontally on viewports ≤ 991px. Columns stay aligned
   (no display:block; no scrollX — just overflow on the wrapper).
================================================================ */

/* DataTables' body row that contains the <table> */
.dataTables_wrapper .row > .col-12,
.dt-container .dt-layout-row .dt-layout-cell,
.card-body > .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Keep table readable — don't let it collapse below this width */
@media (max-width: 991.98px) {
    .dataTables_wrapper table.dataTable,
    .card-body table.table {
        min-width: 640px;
    }

    /* Stack DataTables top/bottom controls on phone */
    .dataTables_wrapper .row,
    .dt-container .dt-layout-row { flex-wrap: wrap; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dt-container .dt-length,
    .dt-container .dt-search {
        width: 100%;
        text-align: left !important;
        padding: 8px 12px !important;
    }
    .dataTables_wrapper .dataTables_filter input,
    .dt-container .dt-search input {
        width: 100% !important;
        min-width: 0 !important;
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dt-container .dt-info,
    .dt-container .dt-paging { padding: 8px 12px; }

    .dataTables_paginate .paginate_button,
    .dt-paging .dt-paging-button {
        padding: 4px 8px !important;
        font-size: 11px !important;
        margin: 0 1px !important;
    }

    /* Tighter cells on mobile — prevent wrap so horizontal scroll works */
    .card-body table.dataTable td,
    .card-body table.dataTable th,
    .card-body table.table td,
    .card-body table.table th {
        font-size: 11px !important;
        padding: 6px 8px !important;
        white-space: nowrap;
    }
}

/* Thin visible scrollbar on dark theme */
.dataTables_wrapper .row > .col-12::-webkit-scrollbar,
.dt-container .dt-layout-row .dt-layout-cell::-webkit-scrollbar,
.card-body > .table-responsive::-webkit-scrollbar { height: 6px; }
.dataTables_wrapper .row > .col-12::-webkit-scrollbar-thumb,
.dt-container .dt-layout-row .dt-layout-cell::-webkit-scrollbar-thumb,
.card-body > .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 3px;
}


/* ================================================================
   UX3 TABLE SCROLL CONTAINMENT
   Contains wide tables inside their card on all screens.
   - App content and cards NEVER exceed viewport width
   - Tables that overflow their card scroll horizontally WITHIN the card
   - Works for DataTables (scrollX wraps table in .dataTables_scrollBody)
     and plain <table class="table"> alike.
================================================================ */

/* 1. App-level containment — nothing can push the page wider than the viewport */
.app-content,
.app-content-padding,
.container-fluid,
.app-content .container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* 2. Cards contain their contents — horizontal scroll lives INSIDE the card */
.card {
    max-width: 100%;
    overflow: hidden;   /* keeps card rounded corners intact; scroll is inside card-body */
}
.card-body {
    max-width: 100%;
    overflow-x: auto;       /* scrollbar sits inside the card */
    -webkit-overflow-scrolling: touch;
}

/* 3. DataTables scrollX wraps the table in .dataTables_scrollBody.
      Ensure that wrapper is the scrollable layer, not the card-body,
      and that its parent .dataTables_wrapper doesn't add its own overflow. */
.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;    /* controls (length/search/paging) fit normally */
}
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollBody {
    width: 100% !important;
    max-width: 100% !important;
}
.dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.dataTables_scrollHead table,
.dataTables_scrollBody table {
    margin-bottom: 0 !important;
}
/* Thin horizontal scrollbar (dark theme) inside datatables body */
.dataTables_scrollBody::-webkit-scrollbar { height: 6px; }
.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.25);
    border-radius: 3px;
}
.dataTables_scrollBody::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
}

/* 4. Plain Bootstrap tables (not DataTables) — wrap in horizontal scroll.
      Do NOT use display:block (breaks column alignment) — use .table-responsive idiom. */
.card-body > .table:not(.dataTable),
.card-body > table.table:not(.dataTable) {
    width: 100%;
    max-width: 100%;
}

/* When a .table is already inside .table-responsive, Bootstrap handles scroll — we just
   make sure the wrapper can't itself overflow the card. */
.card-body > .table-responsive,
.card-body .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 5. Mobile tweaks */
@media (max-width: 767.98px) {
    /* Tighter card padding so the scroll region uses the available width */
    .card-body { padding: 0.75rem !important; }

    /* DataTables controls (search, length, pagination) stack vertically on phone */
    .dataTables_wrapper .row,
    .dt-container .dt-layout-row {
        flex-wrap: wrap;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dt-container .dt-length,
    .dt-container .dt-search {
        width: 100%;
        text-align: left !important;
        padding: 8px 12px !important;
    }
    .dataTables_wrapper .dataTables_filter input,
    .dt-container .dt-search input {
        width: 100% !important;
        min-width: 0 !important;
    }
    .dataTables_wrapper .dataTables_info,
    .dt-container .dt-info { padding: 8px 12px; }
    .dataTables_wrapper .dataTables_paginate,
    .dt-container .dt-paging { padding: 8px 12px; }

    /* Smaller pagination on phones */
    .dataTables_paginate .paginate_button,
    .dt-paging .dt-paging-button {
        padding: 4px 8px !important;
        font-size: 11px !important;
        margin: 0 1px !important;
    }

    /* Ensure datatable cells don't wrap inside the scrollable body */
    .card-body table.dataTable td,
    .card-body table.dataTable th {
        font-size: 11px !important;
        padding: 6px 8px !important;
        white-space: nowrap;
    }
    /* Cells explicitly marked to wrap (e.g. long reason text) override this */
    .card-body table.dataTable td.ux3-wrap,
    .card-body table.dataTable td .ux3-wrap {
        white-space: normal;
        word-break: break-word;
    }

    /* Plain bootstrap tables — nowrap by default to let scroll work */
    .card-body table.table:not(.dataTable) td,
    .card-body table.table:not(.dataTable) th {
        white-space: nowrap;
    }
}

/* 6. Belt-and-braces: if an ancestor is set to display:flex, prevent children
      from overflowing horizontally because of a wide min-content table */
.app-content > *, .card > *, .card-body > * { min-width: 0; }




/* ================================================================
   UX3 MOBILE POLISH — SURGICAL RULES
   Each rule targets exact DOM patterns actually rendered.
   Verified against: admin/home, email_templates/edit, visitors/threats,
   analytics/fails, admin/settings/general/_card_*, dashboard/chat.
================================================================ */

/* ─── Generic page header pattern ──────────────────────────────
   <div class="d-flex align-items-center mb-4 pt-3">
     <div> ...title / breadcrumb... </div>
     <div class="ms-auto ..."> ...buttons/form... </div>
   </div>
   Found on: admin/home, email_templates/edit, threats, fails, bots,
   visitors index, ban index, settings pages, sites list, etc.
*/
@media (max-width: 767.98px) {
    /* Force wrap of the entire page header row */
    .app-content > .d-flex.align-items-center.mb-4.pt-3,
    .app-content > .d-flex.align-items-center.mb-4,
    .app-content > .d-flex.align-items-center.mb-3.pt-3,
    .app-content > .d-flex.align-items-center.mb-3,
    .app-content .d-flex.align-items-center.mb-4.pt-3,
    .app-content .d-flex.align-items-center.mb-4,
    .app-content .d-flex.align-items-center.mb-3.pt-3,
    .app-content .d-flex.align-items-center.mb-3 {
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    /* Title/breadcrumb block takes full first row */
    .app-content > .d-flex.align-items-center.mb-4.pt-3 > div:first-child:not(.ms-auto),
    .app-content > .d-flex.align-items-center.mb-4 > div:first-child:not(.ms-auto),
    .app-content > .d-flex.align-items-center.mb-3.pt-3 > div:first-child:not(.ms-auto),
    .app-content > .d-flex.align-items-center.mb-3 > div:first-child:not(.ms-auto) {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Right action block drops to its own full-width second row */
    .app-content > .d-flex.align-items-center.mb-4.pt-3 > .ms-auto,
    .app-content > .d-flex.align-items-center.mb-4 > .ms-auto,
    .app-content > .d-flex.align-items-center.mb-3.pt-3 > .ms-auto,
    .app-content > .d-flex.align-items-center.mb-3 > .ms-auto {
        margin-left: 0 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* If .ms-auto contains a .d-flex of buttons, wrap them and equalize width */
    .app-content > .d-flex.align-items-center > .ms-auto.d-flex,
    .app-content > .d-flex.align-items-center > .ms-auto > .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .app-content > .d-flex.align-items-center > .ms-auto.d-flex > .btn,
    .app-content > .d-flex.align-items-center > .ms-auto.d-flex > a.btn,
    .app-content > .d-flex.align-items-center > .ms-auto > .d-flex > .btn,
    .app-content > .d-flex.align-items-center > .ms-auto > .d-flex > a.btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Date-range form in page header — wraps on mobile so Apply stays in viewport.
       Uses .ms-auto as the anchor; any date input form there gets stacked. */
    .app-content .ms-auto > form.d-flex,
    .app-content .ms-auto > form {
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100%;
    }
    /* Override inline style="width:140px" on date inputs — must be !important with high specificity */
    .app-content .ms-auto > form input[type="date"],
    .app-content .ms-auto > form input[type="text"] {
        flex: 1 1 calc(50% - 24px) !important;
        min-width: 0 !important;
        width: auto !important;
    }
    .app-content .ms-auto > form > span {
        flex: 0 0 auto;
        padding: 0 2px;
        align-self: center;
    }
    .app-content .ms-auto > form > button {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* Breadcrumb cleanup */
    .breadcrumb { font-size: 11px !important; margin-bottom: 6px !important; flex-wrap: wrap; }
    .page-header { font-size: 20px !important; line-height: 1.2; }
    .page-header .badge { font-size: 12px !important; }
}

/* ─── General Settings — info text full width, bigger input, smaller unit label ─── */
@media (max-width: 767.98px) {
    /* The row pattern:
         <div class="d-flex align-items-start gap-3">
           <div class="flex-1"> ...title, info, badges... </div>
           <div class="flex-shrink-0" style="width:130px">
             <input type="number"> + <span>chars</span>
           </div>
         </div>
       On mobile: stack vertically, input takes 100%, unit label shrinks. */
    .card-body > .py-3 > .d-flex.gap-3,
    .card-body .py-3 > .d-flex.gap-3 {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .card-body .py-3 > .d-flex.gap-3 > .flex-1,
    .card-body .py-3 > .d-flex.gap-3 > .flex-shrink-0 {
        width: 100% !important;
    }
    /* Input group becomes full width */
    .card-body .py-3 > .d-flex.gap-3 > .flex-shrink-0 .input-group {
        width: 100% !important;
    }
    /* Input group must fit inside the card, no overflow */
    .card-body .py-3 > .d-flex.gap-3 > .flex-shrink-0 {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .card-body .py-3 .input-group {
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Number input — grows to fill, CRITICAL: min-width:0 to allow shrink below content width */
    .card-body .py-3 .input-group .form-control[type="number"],
    .card-body .py-3 .input-group input[type="number"] {
        height: 44px !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: left !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
    }
    /* Unit label (sec/tries/min) — compact, hugs its text only */
    .card-body .py-3 .input-group-text {
        font-size: 11px !important;
        padding: 12px 12px !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        width: auto !important;
        text-align: center !important;
        justify-content: center !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* "60 min" helper below the input — left-align under the number input */
    .card-body .py-3 > .d-flex.gap-3 > .flex-shrink-0 > .text-inverse.text-opacity-25 {
        text-align: left !important;
    }

    /* UX3-SETTINGS-MOBILE-2026-04-24-1815 */
    /* Info/hint text — full width, no truncation */
    .card-body .text-inverse.text-opacity-40.fs-11px,
    .card-body .text-inverse.text-opacity-50.fs-11px,
    .card-body .fs-11px.mt-1,
    .card-body > * .fs-11px,
    .card-body .form-text {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Badge explanation rows (Higher/Lower etc) stack full width */
    .card-body .py-3 .row.g-2 > [class*="col-sm-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ─── Chat: mobile-only ─ make search available INSIDE the contacts drawer ─── */
/* Toggle bar — hidden on desktop */
.ux3-chat-mobile-toggle { display: none; }

@media (max-width: 767.98px) {
    /* Toggle bar — visible on mobile above conversation */
    .ux3-chat-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;      /* arrow floats to right edge */
        gap: 8px;
        padding: 12px 16px;
        background: rgba(255,255,255,.04);
        border-bottom: 1px solid rgba(255,255,255,.08);
        color: #e6edf3;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s;
    }
    .ux3-chat-mobile-toggle:hover,
    .ux3-chat-mobile-toggle:active {
        background: rgba(255,255,255,.07);
    }
    .ux3-chat-mobile-toggle > div:first-child {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 auto;
        min-width: 0;
    }
    .ux3-chat-mobile-toggle .ux3-chat-mt-caret {
        font-size: 14px;
        color: rgba(255,255,255,.5);
        transition: transform .2s ease;
        flex: 0 0 auto;
    }
    /* When drawer is open — rotate caret up (bi-chevron-up also applied by JS toggle) */
    .ux3-chat-card.ux3-chat-mobile-contacts-open .ux3-chat-mobile-toggle {
        background: rgba(36,157,121,.1);
        border-bottom-color: rgba(36,157,121,.35);
    }
    .ux3-chat-card.ux3-chat-mobile-contacts-open .ux3-chat-mobile-toggle .ux3-chat-mt-caret {
        transform: rotate(180deg);
        color: #249d79;
    }

    /* Always reveal the sidebar (including search input) when toggle is ON */
    .ux3-chat-card.ux3-chat-mobile-contacts-open .ux3-chat-sidebar {
        display: flex !important;
    }
    /* When drawer is closed, only the toggle bar shows */
    .ux3-chat-card:not(.ux3-chat-mobile-contacts-open) .ux3-chat-sidebar {
        display: none !important;
    }
    /* Drawer — absolute overlay directly below toggle bar (looks like dropdown) */
    .ux3-chat-card.ux3-chat-mobile-contacts-open .ux3-chat-sidebar {
        position: absolute !important;
        top: 57px; left: 0; right: 0;                /* drawer starts 57px below card top (under toggle bar) */
        z-index: 30;
        background: #121722;
        box-shadow: 0 12px 32px rgba(0,0,0,.6);       /* strong dropdown-like shadow */
        border: 1px solid rgba(36,157,121,.25);       /* accent border matching toggle-open state */
        border-top: 0;                                /* flush with toggle bar */
        border-bottom-left-radius: 8px;               /* rounded bottom corners */
        border-bottom-right-radius: 8px;
        max-height: 70vh;
        overflow: hidden;
        width: 100% !important;
        flex-direction: column !important;
    }
    /* Search input area at top of drawer — always visible */
    .ux3-chat-card .ux3-chat-sidebar > .p-3.border-bottom {
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: #121722;
        z-index: 2;
    }
    /* Contact list area takes the rest, scrolls internally */
    .ux3-chat-card .ux3-chat-sidebar > #chatContacts {
        flex: 1 1 auto;
        max-height: calc(70vh - 80px) !important;
        overflow-y: auto !important;
    }
}

/* ─── DataTables: horizontal scroll + mobile pagination dropdown ─── */
/* Fix: when pagination became a dropdown, the .dt-container parent lost overflow-x.
   Ensure BOTH header and body scroll together, and the wrapper stays bounded. */
@media (max-width: 767.98px) {
    /* DataTables wrapper on mobile: don't override display, just contain width */
    .card-body > .dataTables_wrapper {
        max-width: 100%;
    }
    /* ScrollX creates .dataTables_scroll > .dataTables_scrollHead + .dataTables_scrollBody.
       The scrollBody does horizontal scroll. Keep it containerized to card width. */
    .dataTables_wrapper .dataTables_scroll {
        max-width: 100%;
    }
    .dataTables_wrapper .dataTables_scrollHead,
    .dataTables_wrapper .dataTables_scrollBody {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Top/bottom control rows (length/filter/info/paginate) stack vertically and stay visible.
       Crucially: DO NOT set any overflow on .row — it must let content (pagination dropdown) grow. */
    .dataTables_wrapper .row {
        margin: 0 !important;
        flex-wrap: wrap;
    }
    .dataTables_wrapper .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }
    /* Mobile paginate dropdown container */
    .ux3-dt-mobile-paginate {
        width: 100%;
    }
}


/* ================================================================
   UX3 MOBILE POLISH — RESTORED RULES (previously removed in surgical rewrite)
   These were verified done previously; restoring to keep fixes intact.
================================================================ */

/* 1. Top IP-Lookup search close button — always visible & tappable on mobile */
.app-header-menu-search-toggled .menu-search {
    z-index: 1060;
}
.app-header-menu-search-toggled .menu-search .menu-search-container {
    position: relative;
}
.app-header-menu-search-toggled .menu-search .menu-search-icon:last-child {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    color: #fff;
    opacity: 1;
    pointer-events: auto;
}
.app-header-menu-search-toggled .menu-search .menu-search-icon:last-child a {
    color: #fff;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

/* 2. Site / User form footer buttons — 100% width on mobile */
@media (max-width: 767.98px) {
    .card-body form hr + .d-flex.gap-2,
    .card-body form hr + .d-flex {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .card-body form hr + .d-flex.gap-2 > *,
    .card-body form hr + .d-flex > .btn,
    .card-body form hr + .d-flex > a.btn,
    .card-body form hr + .d-flex > button {
        width: 100% !important;
        flex: 1 1 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* 3. Website dashboard top-right buttons — Clear Cache overflow fix */
@media (max-width: 991.98px) {
    .app-content > .d-flex.align-items-center.justify-content-between.flex-wrap.gap-2.mb-3.pt-3 > .d-flex.align-items-center.gap-2.flex-shrink-0,
    .app-content > .d-flex.align-items-center.justify-content-between.mb-3 > .d-flex.gap-2.flex-shrink-0,
    .app-content > div > .d-flex.align-items-center.gap-2.flex-shrink-0 {
        flex-shrink: 1 !important;
        flex-wrap: wrap;
        width: 100%;
    }
}
@media (max-width: 767.98px) {
    .app-content .d-flex.align-items-center.gap-2.flex-shrink-0 {
        flex-shrink: 1 !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100%;
        justify-content: flex-start;
    }
    .app-content .d-flex.align-items-center.gap-2.flex-shrink-0 > .btn,
    .app-content .d-flex.align-items-center.gap-2.flex-shrink-0 > form {
        flex: 1 1 auto;
    }
    .app-content .d-flex.align-items-center.gap-2.flex-shrink-0 > .btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* 4. Disk Space alert — split into two parts (message + button) on mobile */
@media (max-width: 767.98px) {
    #diskSpaceAlert,
    .app-content .alert.alert-dismissible.d-flex.align-items-center.gap-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    #diskSpaceAlert { position: relative; }
    #diskSpaceAlert .flex-1,
    .app-content .alert.alert-dismissible.d-flex > .flex-1 {
        width: 100%;
    }
    #diskSpaceAlert > .btn,
    #diskSpaceAlert > #diskAlertHideBtn {
        width: 100%;
        flex-shrink: 1 !important;
    }
    #diskSpaceAlert > .btn-close {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}


/* ================================================================
   UX3 DT MOBILE PAGINATION — Prev | Page N of M | Next
   Applied on viewports <= 767.98px. The JS helper inserts 
   .ux3-dt-mobile-paginate above the default .dataTables_paginate.
   Default numbered pagination is hidden.
================================================================ */
.ux3-dt-mobile-paginate {
    display: none;  /* hidden on desktop */
}
@media (max-width: 767.98px) {
    /* Hide ALL default pagination on mobile — both DT1 and DT2 variants */
    .dataTables_paginate .pagination,
    .dataTables_wrapper .dataTables_paginate,
    .dt-container .dt-paging,
    .dt-paging .dt-paging-button,
    .dataTables_paginate .paginate_button {
        display: none !important;
    }
    /* Show our clean Prev | info | Next row */
    .ux3-dt-mobile-paginate {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        width: 100%;
    }
    .ux3-dt-mobile-paginate .ux3-dt-pg-btn {
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.15);
        color: #e6edf3;
        border-radius: 6px;
        padding: 6px 14px;
        font-size: 12px;
        cursor: pointer;
        line-height: 1.4;
        min-width: 72px;
        flex: 0 0 auto;
    }
    .ux3-dt-mobile-paginate .ux3-dt-pg-btn[disabled] {
        opacity: .35;
        cursor: not-allowed;
    }
    .ux3-dt-mobile-paginate .ux3-dt-pg-btn:hover:not([disabled]) {
        background: rgba(255,255,255,.12);
    }
    .ux3-dt-mobile-paginate .ux3-dt-pg-info {
        flex: 1 1 auto;
        text-align: center;
        font-size: 12px;
        color: rgba(255,255,255,.65);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ================================================================
   UX3 FIX: table cells nowrap on mobile
   The generic `word-break: break-word; overflow-wrap: anywhere` rule
   applied earlier breaks URLs character-by-character on narrow
   screens. On mobile we want cells NOT to wrap — scrollX on the
   table handles horizontal overflow instead.
================================================================ */
@media (max-width: 767.98px) {
    /* Force table to have min-width so columns keep their natural width and scrollX activates */
    table.dataTable,
    .dataTables_scrollBody > table.dataTable,
    .dataTables_scrollHead > .dataTables_scrollHeadInner > table.dataTable {
        min-width: 800px !important;
    }
    /* Cells on one line — scrollX handles horizontal overflow. Applies to ALL descendants too. */
    table.dataTable tbody td,
    table.dataTable tbody td *,
    table.dataTable thead th,
    table.dataTable thead th *,
    .dataTables_scrollBody table td,
    .dataTables_scrollBody table td *,
    .dataTables_scrollBody table th,
    .dataTables_scrollBody table th * {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        max-width: none !important;
    }
    /* Opt-in: long content cells that SHOULD wrap get .ux3-wrap class */
    table.dataTable tbody td.ux3-wrap,
    table.dataTable tbody td .ux3-wrap {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 300px !important;
    }
}

/* ───────── btn-outline-theme tap state contrast (mobile fix) ───────── */
/* On touch devices, :active sticks during the tap. Theme fills bg with green
   but text doesn't always become white → green-on-green = invisible. Force it. */
.btn-outline-theme:active,
.btn-outline-theme:focus,
.btn-outline-theme.active,
.btn-outline-theme:active:focus,
.btn-outline-theme:focus-visible {
    background-color: #249d79 !important;
    color: #ffffff !important;
    border-color: #249d79 !important;
}
.btn-outline-theme:active i,
.btn-outline-theme:focus i,
.btn-outline-theme.active i {
    color: #ffffff !important;
}
/* Loading-spinner state (when JS adds disabled + spinner during submit) */
.btn-outline-theme:disabled,
.btn-outline-theme.disabled {
    color: rgba(255,255,255,.85) !important;
    background-color: rgba(36,157,121,.85) !important;
    border-color: rgba(36,157,121,.85) !important;
    opacity: 1 !important;
}

/* ───────── HUD theme bottom fade-out override ───────── */
/* HUD Admin Bootstrap theme applies a mask-image linear-gradient on .app-content
   that fades the bottom edge of the page (decorative "scanner screen" effect).
   On mobile this dims the last few rows of any list/table — confusing UX.
   Force-disable masks across all main content containers. */
.app,
.app-content,
.app-content-padding,
.app-content > *,
.app-content .container,
.app-content .container-fluid,
.app-footer,
body {
    -webkit-mask-image: none !important;
            mask-image: none !important;
}

/* ───────── HUD theme html-element bottom fade override (mobile fix) ─────────
   Diagnostic found the HTML element itself was causing the bottom dim strip
   on real mobile devices (does not reproduce in desktop responsive mode).
   The HUD admin theme applies one or more of: gradient background, mask-image,
   backdrop-filter, filter, or low opacity to html. We neutralize all of them. */
html {
    -webkit-mask-image:    none      !important;
            mask-image:    none      !important;
    -webkit-backdrop-filter: none    !important;
            backdrop-filter: none    !important;
    filter:                none      !important;
    opacity:               1         !important;
    /* Don't blanket override the background — html might legitimately use one for the grid pattern.
       But forcibly disable bottom-edge gradient masks via background-attachment + image override. */
}



/* ────────────────────────────────────────────────────────────────────
   My Profile page — explicit grid (Bootstrap-independent)
   ──────────────────────────────────────────────────────────────────── */
.ux3-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 768px) {
    .ux3-profile-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}
.ux3-profile-col-main,
.ux3-profile-col-side {
    min-width: 0;  /* allow children to shrink properly inside the grid cell */
}

/* ================================================================
   TASK 18 — Email Template Preview Modal: Swal-style backdrop
   Blurry transparent backdrop instead of solid overlay, matching
   the SweetAlert2 modal aesthetic in this app.
================================================================ */
.modal-backdrop.show {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    opacity: 1 !important;
}
/* The modal-backdrop is a separate element from the modal itself; Bootstrap
   sets opacity to 0.5 on .show. Override above to use rgba alpha + blur. */

/* For the email preview modal specifically, give the body the same dark
   card surface as the rest of the app. */
#tmplPreviewModal .modal-content {
    background: #1c2127 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65) !important;
}


/* ================================================================
   KNOWLEDGE BASE
================================================================ */

/* Category cards on the KB index — hover lift */
.kb-cat-card {
    transition: transform .15s, border-color .15s;
}
.kb-cat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--bs-theme-rgb), .35) !important;
}

/* Article body typography */
.kb-article-body h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-inverse);
    margin: 32px 0 12px;
    letter-spacing: -0.01em;
}
.kb-article-body h2:first-child { margin-top: 0; }
.kb-article-body h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--bs-theme);
    margin: 24px 0 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.kb-article-body p,
.kb-article-body li {
    font-size: 14px;
    line-height: 1.75;
}
.kb-article-body strong { color: var(--bs-inverse); }
.kb-article-body ul,
.kb-article-body ol { padding-left: 22px; margin: 12px 0 16px; }
.kb-article-body li { margin-bottom: 6px; }
.kb-article-body li::marker { color: rgba(var(--bs-theme-rgb), .7); }
.kb-article-body a {
    color: var(--bs-theme);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--bs-theme-rgb), .4);
}
.kb-article-body a:hover { filter: brightness(1.15); }
.kb-article-body code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: rgba(0, 0, 0, .25);
    color: var(--bs-theme);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .05);
}
.kb-article-body pre {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.6;
}
.kb-article-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: rgba(var(--bs-inverse-rgb), .85);
}
.kb-article-body table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 12.5px;
}
.kb-article-body table th,
.kb-article-body table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    text-align: left;
}
.kb-article-body table th {
    color: var(--bs-inverse);
    font-weight: 600;
    background: rgba(0, 0, 0, .2);
}

/* ================================================================
   SIDEBAR DOCUMENTATION CTA (pinned at bottom of sidebar)
================================================================ */
.app-sidebar-cta {
    padding: 16px 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    background: var(--bs-app-sidebar-bg, transparent);
}
.app-sidebar-cta .btn {
    width: 100%;
    padding: 10px 12px;
    font-weight: 600;
}
/* When sidebar is collapsed (icon-only), shrink the CTA to just the icon */
.app-sidebar-collapsed .app-sidebar-cta {
    padding: 12px 8px;
}
.app-sidebar-collapsed .app-sidebar-cta .btn span {
    display: none;
}
.app-sidebar-collapsed .app-sidebar-cta .btn i {
    font-size: 16px;
}