/**
 * 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;
}