/* MetaGuard PGO theme: restyles the Backpack/CoreUI shell to match the original React UI
   (white shell, slate text, rose accent). Loaded last so it wins over the compiled theme. */
:root {
    --mg-accent: #d94157; --mg-accent-600: #c83249; --mg-accent-700: #a9253b; --mg-accent-50: #fff1f3; --mg-accent-300: #f4a0ad;
    --mg-slate-50: #f8fafc; --mg-slate-100: #f1f5f9; --mg-slate-200: #e2e8f0; --mg-slate-300: #cbd5e1;
    --mg-slate-500: #64748b; --mg-slate-600: #475569; --mg-slate-700: #334155; --mg-slate-800: #1e293b; --mg-slate-900: #0f172a;
}
html body { background: #fff; color: var(--mg-slate-800); }
html body.app { font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---- brand ---- */
.mg-brand { display: inline-grid; place-items: center; overflow: hidden; border-radius: 9999px; background: #000; flex-shrink: 0; }
.mg-brand img { width: 100%; height: 100%; object-fit: cover; animation: mg-spin 8s linear infinite; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mg-brand img { animation: none; } }
.mg-brand-name { margin-left: .5rem; font-size: 1rem; font-weight: 600; color: var(--mg-slate-900); }

/* ---- sidebar ---- */
html body .sidebar.mg-sidebar { background: #fff; border-right: 1px solid var(--mg-slate-200); color: var(--mg-slate-600); }
html body .mg-sidebar .sidebar-brand { background: #fff; height: 64px; border-bottom: 1px solid var(--mg-slate-200); justify-content: space-between; padding: 0 1rem; }
html body .mg-sidebar .sidebar-brand .navbar-brand { display: flex; align-items: center; color: var(--mg-slate-900); padding: 0; margin: 0; }
html body .mg-sidebar .sidebar-collapse-toggle { color: var(--mg-slate-500); }
html body .mg-sidebar .sidebar-nav { padding: .75rem; }
html body .mg-sidebar .nav-link { display: flex; align-items: center; gap: .75rem; border-radius: .375rem; padding: .5rem .75rem; margin-bottom: .25rem; font-size: .875rem; font-weight: 500; color: var(--mg-slate-600); background: transparent; }
html body .mg-sidebar .nav-link .nav-icon { color: inherit; margin: 0; width: 1.1rem; font-size: 1.1rem; flex: 0 0 auto; }
html body .mg-sidebar .nav-link:hover { background: var(--mg-slate-50); color: var(--mg-slate-900); }
html body .mg-sidebar .nav-link.active { background: var(--mg-accent-50); color: var(--mg-accent-700); }
html body .mg-sidebar .nav-link.active .nav-icon { color: var(--mg-accent-700); }
html body .mg-sidebar .mg-sidebar-footer { background: #fff; border-top: 1px solid var(--mg-slate-200); padding: .75rem; }
html body .mg-sidebar .mg-sidebar-footer .nav-link { margin: 0; }

/* ---- header ---- */
html body .app-header.mg-header { background: #fff; height: 64px; border-bottom: 1px solid var(--mg-slate-200); box-shadow: none; }
.mg-header .mg-crumb { list-style: none; margin-left: 1.5rem; font-size: .875rem; color: var(--mg-slate-500); }
.mg-header .mg-crumb strong { font-weight: 500; color: var(--mg-slate-800); }
.mg-header .avatar-name { font-size: .875rem; font-weight: 500; color: var(--mg-slate-800); line-height: 1.25; }
.mg-header .avatar-name small { font-size: .75rem; font-weight: 400; color: var(--mg-slate-500); }
.mg-header .img-avatar { width: 32px; height: 32px; }
.main nav[aria-label="breadcrumb"] { display: none !important; }

/* ---- page ---- */
.main { background: #fff; }
.main > .container-fluid { padding: 1.5rem 2rem; }
.main section.container-fluid h2, .main div.container-fluid h2 { font-size: 1.25rem; font-weight: 600; color: var(--mg-slate-900); margin: 0 0 1.25rem; line-height: 1.4; }
.main h2 small { display: block; margin: .25rem 0 0; font-size: .875rem; font-weight: 400; color: var(--mg-slate-500); }
.main h2 small a { font-size: .8rem; }
.main .container-fluid.mg h2 { margin-bottom: 1.25rem; }

/* ---- buttons ---- */
html body .btn { border-radius: .375rem; font-size: .875rem; font-weight: 500; padding: .5rem .75rem; box-shadow: none; }
html body .btn-primary, html body .btn-success { background: var(--mg-accent); border-color: var(--mg-accent-600); color: #fff; }
html body .btn-primary:hover, html body .btn-success:hover, html body .btn-primary:focus, html body .btn-success:focus { background: var(--mg-accent-600); border-color: var(--mg-accent-600); color: #fff; }
html body .btn-outline-dark, html body .btn-secondary, html body .btn-default { background: #fff; border-color: var(--mg-slate-300); color: var(--mg-slate-700); }
html body .btn-outline-dark:hover, html body .btn-secondary:hover, html body .btn-default:hover { background: var(--mg-slate-50); color: var(--mg-slate-900); border-color: var(--mg-slate-300); }
html body .btn-outline-danger { background: #fff; border-color: #fca5a5; color: #b91c1c; }
html body .btn-outline-danger:hover { background: #fef2f2; color: #b91c1c; }
html body .btn-link { color: var(--mg-accent-700); }
html body a { color: var(--mg-accent-700); }
html body .btn:focus, html body .form-control:focus { box-shadow: 0 0 0 2px rgba(217, 65, 87, .3); outline: none; }

/* ---- forms ---- */
html body .form-control, html body .select2-container--bootstrap .select2-selection { border: 1px solid var(--mg-slate-300); border-radius: .375rem; font-size: .875rem; padding: .5rem .75rem; height: auto; background: #fff; }
html body .form-control:focus { border-color: var(--mg-accent); }
html body label { font-size: .875rem; font-weight: 500; color: var(--mg-slate-700); margin-bottom: .375rem; }
html body .form-group small, html body .help-block { font-size: .75rem; color: var(--mg-slate-500); }
html body .card { border: 1px solid var(--mg-slate-200); border-radius: .5rem; box-shadow: none; background: #fff; }
html body .card .card-header { background: #fff; border-bottom: 1px solid var(--mg-slate-200); font-weight: 600; }
html body .card .card-body { padding: 1.25rem; }
html body .bgc-white.shadow, html body .shadow { box-shadow: none !important; }

/* ---- list tables (DataTables) ---- */
html body #crudTable_wrapper { background: transparent; }
html body table.dataTable, html body #crudTable { width: 100%; font-size: .875rem; border: 1px solid var(--mg-slate-200); border-radius: .5rem; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
html body #crudTable thead th { background: var(--mg-slate-50); color: var(--mg-slate-500); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding: .75rem 1rem; border-top: 0; border-bottom: 1px solid var(--mg-slate-200); }
html body #crudTable tbody td { padding: .75rem 1rem; vertical-align: top; color: var(--mg-slate-700); border-top: 1px solid var(--mg-slate-100); }
html body #crudTable tbody tr:hover td { background: var(--mg-slate-50); }
html body #crudTable tbody tr.odd td, html body #crudTable tbody tr.even td { background-color: transparent; }
html body #crudTable_wrapper .dataTables_filter input { border: 1px solid var(--mg-slate-300); border-radius: .375rem; padding: .4rem .75rem; font-size: .875rem; }
html body #crudTable_wrapper .dataTables_length select { border: 1px solid var(--mg-slate-300); border-radius: .375rem; padding: .25rem .5rem; }
html body .dataTables_info, html body .dataTables_length, html body .dataTables_filter { font-size: .875rem; color: var(--mg-slate-600); }
html body .page-item.active .page-link { background: var(--mg-accent); border-color: var(--mg-accent); }
html body .page-link { color: var(--mg-accent-700); }

/* ---- status badges (reused in lists) ---- */
.mg-badge { display: inline-flex; border: 1px solid; border-radius: 9999px; padding: .125rem .5rem; font-size: .75rem; font-weight: 500; white-space: nowrap; }

/* ---- login ---- */
html body.app.flex-row { background: var(--mg-slate-100); min-height: 100vh; }
.mg-login { display: grid; place-items: center; padding: 1rem; }
.mg-login-card { width: 100%; max-width: 24rem; background: #fff; border: 1px solid var(--mg-slate-200); border-radius: .5rem; padding: 1.75rem; }
.mg-login-card h1 { font-size: 1.25rem; font-weight: 600; color: var(--mg-slate-900); margin: 0; }
.mg-login-card p { margin: .25rem 0 0; font-size: .875rem; color: var(--mg-slate-500); }
.mg-login-error { margin-bottom: 1rem; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; border-radius: .375rem; padding: .75rem; font-size: .875rem; }

/* alerts (noty toasts) keep their own colours */

/* no page fade-in: content must be readable immediately */
.animated, .fadeIn { animation: none !important; opacity: 1 !important; }

/* status badges available on every page (lists included) */
.mg-badge.NORMAL, .mg-badge.COMPLETED, .mg-badge.SENT, .mg-badge.ACTIVE { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.mg-badge.CHANGED, .mg-badge.PENDING { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.mg-badge.CRITICAL, .mg-badge.FAILED { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.mg-badge.SCAN_FAILED, .mg-badge.DISABLED, .mg-badge.SKIPPED { border-color: #cbd5e1; background: #f1f5f9; color: #475569; }
.mg-badge.PENDING_BASELINE { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }

/* ---- larger sidebar ---- */
html body .mg-sidebar .nav-link { font-size: 1rem; padding: .7rem .9rem; margin-bottom: .3rem; gap: .9rem; }
html body .mg-sidebar .nav-link .nav-icon { font-size: 1.4rem; width: 1.5rem; }
html body .mg-sidebar .sidebar-brand .navbar-brand .mg-brand { width: 40px !important; height: 40px !important; }
html body .mg-brand-name { font-size: 1.15rem; }

@media (min-width: 992px) {
    /* collapsed state: 88px column, icon on top with its label underneath (no hover flyout) */
    html body.sidebar-minimized .sidebar.mg-sidebar { flex: 0 0 104px; width: 104px; }
    html body.sidebar-minimized .sidebar.mg-sidebar .sidebar-nav,
    html body.sidebar-minimized .sidebar.mg-sidebar .nav { width: 104px; }
    html body.sidebar-minimized .mg-sidebar .sidebar-nav { padding: .75rem .5rem; }
    html body.sidebar-minimized .mg-sidebar .nav-link,
    html body.sidebar-minimized .mg-sidebar .nav-link:hover,
    html body.sidebar-minimized .mg-sidebar .nav-item:hover > .nav-link {
        flex-direction: column; justify-content: center; gap: .25rem;
        width: 96px; min-height: 66px; height: auto; padding: .5rem .25rem; margin: 0 0 .3rem;
        font-size: .75rem; line-height: 1.15; text-align: center; white-space: normal; overflow: visible; overflow-wrap: break-word;
        background: transparent; color: var(--mg-slate-600);
    }
    html body.sidebar-minimized .mg-sidebar .nav-link:hover,
    html body.sidebar-minimized .mg-sidebar .nav-item:hover > .nav-link { background: var(--mg-slate-50); color: var(--mg-slate-900); }
    html body.sidebar-minimized .mg-sidebar .nav-link.active,
    html body.sidebar-minimized .mg-sidebar .nav-link.active:hover { background: var(--mg-accent-50); color: var(--mg-accent-700); }
    html body.sidebar-minimized .mg-sidebar .nav-link .nav-icon { font-size: 1.5rem; width: auto; margin: 0; color: inherit; }
    /* CoreUI pins each <li> to 50px with overflow hidden, which is what cut the labels off */
    html body.sidebar-minimized .mg-sidebar .nav-item { width: 96px; overflow: visible; }
    html body.sidebar-minimized .mg-sidebar .sidebar-collapse-toggle { flex: 0 0 104px; width: 104px; font-size: 1.5rem; }
    html:not([dir="rtl"]) body.sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-header { margin-left: 104px; }
    html:not([dir="rtl"]) body.sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
    html:not([dir="rtl"]) body.sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer { margin-left: 104px; }
}

.mg-badge.UP { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.mg-badge.DOWN { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

/* ---- static (fixed) top header bar: stays in place while the page scrolls ---- */
html body .app-header.mg-header { position: fixed; top: 0; right: 0; left: 0; width: auto; z-index: 1030; }
/* the theme resets this to 0 on phones with a more specific selector, hence :not(.header_fixed) */
html body .app-body,
html body:not(.header_fixed) .app-body { margin-top: 64px; }
@media (max-width: 991.98px) {
    html body .app-header.mg-header { margin-left: 0; }
}

/* ---- sidebar brand row and header bar share one height so their bottom borders form a single line ---- */
html body .mg-sidebar .sidebar-brand,
html body .app-header.mg-header { box-sizing: border-box; height: 64px; min-height: 64px; }
html body .mg-sidebar .sidebar-brand { flex: 0 0 64px; }

@media (min-width: 992px) {
    /* collapsed sidebar: fill the top row with the logo, keep the expand button next to it */
    html body.sidebar-minimized .mg-sidebar .sidebar-brand { display: flex !important; align-items: center; justify-content: center; gap: .25rem; padding: 0; }
    html body.sidebar-minimized .mg-sidebar .sidebar-brand .navbar-brand { display: flex !important; flex: 0 0 auto; width: auto; padding: 0; margin: 0; }
    html body.sidebar-minimized .mg-sidebar .sidebar-brand .mg-brand-name { display: none; }
    html body.sidebar-minimized .mg-sidebar .sidebar-brand .mg-brand { width: 36px !important; height: 36px !important; }
    html body.sidebar-minimized .mg-sidebar .sidebar-collapse-toggle { flex: 0 0 36px; width: 36px; font-size: 1.25rem; }
}

/* hovered sidebar item: the icon turns red (CoreUI's default would make it white on a near-white background) */
html body .mg-sidebar .nav-link:hover .nav-icon,
html body .mg-sidebar .nav-item:hover > .nav-link .nav-icon,
html body.sidebar-minimized .mg-sidebar .nav-link:hover .nav-icon,
html body.sidebar-minimized .mg-sidebar .nav-item:hover > .nav-link .nav-icon { color: var(--mg-accent); }

/* collapse/expand button: clearly visible dark icon, red on hover */
html body .mg-sidebar .sidebar-collapse-toggle { color: var(--mg-slate-700); display: flex; align-items: center; justify-content: center; opacity: 1; }
html body .mg-sidebar .sidebar-collapse-toggle:hover,
html body .mg-sidebar .sidebar-collapse-toggle:focus { color: var(--mg-accent); }
html body .mg-sidebar .sidebar-collapse-toggle .mg-hamburger { display: block; width: 22px; height: 22px; }

/* ---- phone header: [menu] [logo + title / current page] ............ [avatar] ---- */
@media (max-width: 991.98px) {
    html body .app-header.mg-header { display: flex; align-items: center; padding: 0 .75rem 0 .25rem; text-align: left; }
    html body .app-header.mg-header .navbar-toggler { margin: 0 .25rem 0 0 !important; padding: .5rem; flex: 0 0 auto; }
    html body .app-header.mg-header .navbar-toggler-icon {
        width: 26px; height: 26px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
    }
    /* the theme absolutely centres the brand at left:50%; put it back in the flow so it can carry a title */
    html body .app-header.mg-header .navbar-brand {
        position: static; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; width: auto;
        display: flex; align-items: center; justify-content: flex-start; gap: .6rem; text-align: left;
    }
    .mg-header-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .mg-header-title strong { font-size: 1rem; font-weight: 600; color: var(--mg-slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mg-header-title small { font-size: .75rem; font-weight: 400; color: var(--mg-slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html body .app-header.mg-header .navbar-nav.ml-auto { flex: 0 0 auto; margin-left: auto; }
    html body .app-header.mg-header .nav-item.dropdown { padding-right: 0 !important; }
    html body .app-header.mg-header .img-avatar { width: 36px; height: 36px; }
}
@media (min-width: 992px) { .mg-header-title { display: none; } }