/* ============================================================
   MSIP Admin — base styles (layered on top of Bootstrap 5)
   ============================================================ */

:root {
    --msip-bg:        #f5f6fa;
    --msip-side-bg:   #1b1f3a;
    --msip-side-fg:   #c9cee0;
    --msip-side-fg2:  #fff;
    --msip-accent:    #4f7cff;
    --msip-good:      #1bbf72;
    --msip-warn:      #e9a13b;
    --msip-bad:       #e23c5b;
}

html, body { height: 100%; }
body       { background: var(--msip-bg); }

/* ---------- Login ----------------------------------------- */
.msip-login {
    background: linear-gradient(135deg, #1b1f3a 0%, #2c3674 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.msip-login-card { width: 360px; }

/* ---------- App shell ------------------------------------- */
.msip-shell { display: flex; min-height: 100vh; }

.msip-sidebar {
    width: 220px; flex: 0 0 220px;
    background: var(--msip-side-bg);
    color: var(--msip-side-fg);
    display: flex; flex-direction: column;
}
.msip-brand {
    padding: 1.2rem 1rem; font-size: 1.3rem; font-weight: 600;
    color: var(--msip-side-fg2);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.msip-sidebar .nav-link {
    color: var(--msip-side-fg);
    padding: .65rem 1rem; border-left: 3px solid transparent;
    font-size: .95rem;
}
.msip-sidebar .nav-link i { margin-right: .55rem; }
.msip-sidebar .nav-link:hover { color: var(--msip-side-fg2); background: rgba(255,255,255,.04); }
.msip-sidebar .nav-link.active {
    color: var(--msip-side-fg2); background: rgba(79,124,255,.18);
    border-left-color: var(--msip-accent);
}

.msip-userbox {
    margin-top: auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.06);
    color: var(--msip-side-fg);
}

.msip-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.msip-topbar {
    padding: .8rem 1.25rem; background: #fff;
    border-bottom: 1px solid #e6e8f1;
    display: flex; align-items: center; justify-content: space-between;
}
.msip-topbar h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }

.msip-livedot { display: flex; align-items: center; gap: .5rem; color: #666; font-size: .85rem; }
.msip-livedot .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--msip-bad); display: inline-block;
}
.msip-livedot.is-live .dot { background: var(--msip-good); }

.msip-content { padding: 1.25rem; }

/* ---------- Stat cards ----------------------------------- */
.msip-stat .card-body { padding: 1rem 1.25rem; }
.msip-stat-label { color: #6c7290; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.msip-stat-value { font-size: 1.7rem; font-weight: 600; line-height: 1.1; margin-top: .2rem; }

/* ---------- Tables ---------------------------------------- */
.msip-table thead th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
    background: #f0f2f8; color: #586173;
}
.msip-table tbody td { vertical-align: middle; }
.msip-table .util-bar {
    height: 6px; border-radius: 3px; background: #e1e4ee; overflow: hidden;
    display: inline-block; vertical-align: middle; width: 110px;
}
.msip-table .util-bar > span { display: block; height: 100%; background: var(--msip-accent); }
.msip-table .util-bar.warn > span { background: var(--msip-warn); }
.msip-table .util-bar.bad  > span { background: var(--msip-bad); }

/* ---------- Status pills --------------------------------- */
.pill {
    display: inline-block; font-size: .72rem; padding: .12rem .55rem;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600;
}
.pill-active     { background: #e0f5ec; color: #117a4a; }
.pill-disabled,
.pill-terminated { background: #e8e9ee; color: #5b6072; }
.pill-suspended,
.pill-pending    { background: #fff1d6; color: #8a5a00; }
.pill-maintenance{ background: #d9e5ff; color: #214bbf; }

/* ---------- Toasts ---------------------------------------- */
#msip-toasts .toast { min-width: 280px; }