/* ======================================================
   ALL VIRUS PANNEL — UI IMPROVEMENTS  (virusIndex.css)
   ====================================================== */

/* ---- Inter Font -------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body, h1, h2, h3, h4, h5, h6, p, span,
label, input, select, textarea, button, td, th, a {
    font-family: 'Inter', sans-serif;
}

/* ---- Loader ------------------------------------------ */
/*
 * Do NOT set display on #loader here.
 * Bootstrap's .d-none has specificity 10; #loader has specificity 100,
 * so any display:flex here overrides d-none and makes the loader stick.
 * Using :not(.d-none) lets Bootstrap fully own show/hide.
 */
#loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.88) !important;
    z-index: 99999 !important;
    backdrop-filter: blur(3px);
}
#loader:not(.d-none) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#loader #loading-image { width: 80px; }

/* ---- Branded Top Bar --------------------------------- */
.vp-topbar {
    background: linear-gradient(135deg, #1a1f3e 0%, #2d3561 100%);
    padding: 11px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1000;   /* below modal (10500) but above page content */
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.vp-topbar-logo {
    height: 28px;
    filter: brightness(0) invert(1);
}
.vp-topbar-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.2);
}
.vp-topbar-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
}
.vp-topbar-title i {
    color: #7b96f5;
    font-size: 17px;
}

/* ---- Section / Outer padding ------------------------- */
section#home {
    padding-top: 14px;
    padding-bottom: 40px;
}

/* ---- Nav Tabs ---------------------------------------- */
.nav-tabs-custom {
    background: #fff;
    border-bottom: 2px solid #dee2e6 !important;
    border-radius: 10px 10px 0 0;
    padding: 0 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.nav-tabs-custom .nav-item .nav-link {
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    padding: 10px 18px;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: -2px;
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-tabs-custom .nav-item .nav-link i { font-size: 14px; }
.nav-tabs-custom .nav-item .nav-link:hover {
    color: #556ee6;
    background: #f0f3ff;
    border-radius: 6px 6px 0 0 !important;
}
.nav-tabs-custom .nav-item .nav-link.active {
    color: #556ee6 !important;
    background: #fff !important;
    border-bottom: 3px solid #556ee6 !important;
    font-weight: 600;
}

/* ---- Tab Content Area -------------------------------- */
.tab-content.p-3 {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 10px 10px;
    min-height: 420px;
}

/* ---- Filter Wrap ------------------------------------- */
.filter-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px 10px;
    margin-top: 14px !important;
    margin-bottom: 16px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
.filter-wrap label {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #74788d !important;
    margin-bottom: 3px !important;
    display: block;
    white-space: nowrap;
}
.filter-wrap .form-control,
.filter-wrap .form-select {
    font-size: 13px;
    border-radius: 6px !important;
    border-color: #ced4da;
}
.filter-wrap .form-control:focus,
.filter-wrap .form-select:focus {
    border-color: #556ee6 !important;
    box-shadow: 0 0 0 0.15rem rgba(85,110,230,0.18) !important;
}

/* ---- Record Count Badge (all trecord variants) ------- */
h5[id*="trecord"] {
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #e3f7f0 !important;
    color: #0caa70 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #b8edd9 !important;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    line-height: 1.6;
    margin: 0;
}

/* ---- Cards ------------------------------------------- */
.card {
    border-radius: 10px !important;
    overflow: hidden;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    margin-bottom: 16px;
}
.card-header {
    background: linear-gradient(135deg, #1e2d3d 0%, #2b3a52 100%) !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}
.card-header h5 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-header h5 i { color: rgba(255,255,255,0.65); }
.card-footer {
    background: #f4f6fb !important;
    padding: 9px 16px !important;
    border-top: 1px solid #e9ecef !important;
}
.card-footer p {
    margin: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Buttons ----------------------------------------- */
.btn { border-radius: 6px !important; font-size: 13px; }
.btn-success {
    background: linear-gradient(135deg, #34c38f, #20a57a) !important;
    border-color: transparent !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #28a87c, #189065) !important;
    box-shadow: 0 4px 12px rgba(52,195,143,0.35) !important;
}
.btn-danger {
    background: linear-gradient(135deg, #f46a6a, #e53535) !important;
    border-color: transparent !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #e35252, #c82a2a) !important;
    box-shadow: 0 4px 12px rgba(244,106,106,0.35) !important;
}
.btn-secondary { border-radius: 6px !important; }

/* ---- Modal ------------------------------------------- */
.modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, #1e2d3d 0%, #2b3a52 100%);
    border-bottom: none !important;
    padding: 13px 20px;
    display: flex;
    align-items: center;
}
.modal-title {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600;
}
.modal-body { padding: 16px 20px; }
.modal-footer {
    border-top: 1px solid #eff2f7 !important;
    padding: 10px 20px;
}
.modal-footer .btn { padding: 6px 18px; }

/* Slide-in right modal (DashboardvirusReportModal) */
.modal.right .modal-dialog {
    position: fixed;
    right: 0;
    margin: 0;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}
.modal.right.show .modal-dialog { transform: translateX(0); }

/* XL modal width */
.modal-dialog.modal-xl {
    min-width: calc(100% - 10%) !important;
}

/* ---- Modal Close Button (vp-close-btn) --------------- */
.vp-close-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    font-size: 22px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    line-height: 1;
    margin-left: auto;
}
.vp-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

/* ---- Modal z-index — must be above sticky thead ------ */
/*
 * AllVirusPannel/css/custom.css sets thead th { z-index: very high }.
 * Bootstrap default modal z-index (1055) is lower than that, so sticky
 * headers bleed through open modals. Raise modal + backdrop above any
 * sticky header we set, and keep thead at z-index:1 explicitly.
 */
.modal         { z-index: 10500 !important; }
.modal-backdrop { z-index: 10490 !important; }

/* ---- Tables ------------------------------------------ */
table.dataTable {
    overflow-wrap: break-word !important;
    border-collapse: collapse !important;
    max-width: none !important;
}
/*
 * Bare selector covers ALL tables — including JS-built ones without
 * Bootstrap's "table" class (e.g. combineData() creates <table id="appconTable">).
 * z-index:1 keeps headers visible while scrolling but below any modal.
 */
thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 10px !important;
    z-index: 1 !important;
    top: -16px !important;
}
.table > tbody td {
    font-size: 13px;
    vertical-align: middle;
    color: #343a40;
}
table:not(.modal table) td:hover { cursor: pointer; }
.no-wrap { white-space: nowrap; }

/* ---- Select2 ----------------------------------------- */
.select2-container { z-index: 9999; width: 100% !important; }
.select2-container--default .select2-selection--single {
    height: 36px !important;
    border-radius: 6px !important;
    border-color: #ced4da !important;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    font-size: 13px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}
.select2-dropdown {
    border-color: #ced4da !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
    font-size: 13px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #556ee6 !important;
}

/* ---- DataTables search box --------------------------- */
.dataTables_filter input {
    border-radius: 6px !important;
    border: 1px solid #ced4da;
    padding: 4px 10px;
    font-size: 13px;
}

/* ---- bg-secondary override (card footer) ------------- */
.bg-secondary { background-color: #f4f6fb !important; }