/* ============================================================================
   AdvEntERP — Master console
   A deliberately distinct look from the tenant app: this console spans every
   tenant and can destroy data, so it should never be mistaken for the books.
   ========================================================================== */
:root {
    --bg: #0F1720;
    --panel: #161F2B;
    --panel-2: #1C2735;
    --line: #26344504;
    --line-solid: #263445;
    --text: #E6EDF3;
    --muted: #8B9AAC;
    --faint: #5E6E80;
    --brand: #4C8DFF;
    --brand-soft: rgba(76, 141, 255, .14);
    --pos: #3FB984;
    --pos-soft: rgba(63, 185, 132, .14);
    --warn: #E0A54A;
    --warn-soft: rgba(224, 165, 74, .14);
    --neg: #E5624F;
    --neg-soft: rgba(229, 98, 79, .14);
    --sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'Cascadia Mono', Consolas, monospace;
    --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    font-size: 15px;
}

a { color: var(--brand); text-decoration: none }
a:hover { text-decoration: underline }
button { font-family: inherit; cursor: pointer }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px }

/* ── shell ─────────────────────────────────────────────────────────────── */
.ms-shell { display: flex; min-height: 100vh }

.ms-side {
    width: 232px; flex: none; background: #0B121A;
    border-right: 1px solid var(--line-solid);
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.ms-logo { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px }
.ms-mark {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    background: linear-gradient(140deg, var(--brand), #7A5CFF);
    display: grid; place-items: center; font-family: var(--mono); font-weight: 700;
}
.ms-logo b { display: block; font-size: .98rem; letter-spacing: -.01em }
.ms-logo span {
    display: block; font-size: .62rem; color: var(--warn); letter-spacing: .12em;
    text-transform: uppercase; font-weight: 700;
}
.ms-nav { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1 }
.ms-nav a {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
    color: var(--muted); font-size: .87rem; font-weight: 500; text-decoration: none;
}
.ms-nav a:hover { background: var(--panel); color: var(--text) }
.ms-nav a.active { background: var(--brand-soft); color: #A9C8FF }
.ms-nav svg { width: 16px; height: 16px; flex: none }
.ms-side-foot { padding: 14px 16px; border-top: 1px solid var(--line-solid); font-size: .74rem; color: var(--faint) }

.ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column }
.ms-top {
    display: flex; align-items: center; gap: 14px; padding: 14px 26px;
    border-bottom: 1px solid var(--line-solid); background: rgba(15,23,32,.82);
    backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
}
.ms-top h1 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em }
.ms-spacer { flex: 1 }
.ms-who { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--muted) }
.ms-avatar {
    width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2);
    display: grid; place-items: center; font-size: .74rem; font-weight: 700; color: var(--text);
}
.ms-body { padding: 22px 26px 44px; max-width: 1500px; width: 100% }

/* ── environment banner ────────────────────────────────────────────────── */
.ms-env {
    display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px;
    background: var(--warn-soft); border: 1px solid rgba(224,165,74,.32);
    color: #F0C88A; font-size: .8rem; margin-bottom: 18px;
}
.ms-env svg { width: 16px; height: 16px; flex: none }

/* ── stat tiles ────────────────────────────────────────────────────────── */
.ms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 22px }
.ms-stat { background: var(--panel); border: 1px solid var(--line-solid); border-radius: var(--radius); padding: 15px 16px }
.ms-stat span { display: block; font-size: .71rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 700 }
.ms-stat b { display: block; margin-top: 7px; font-size: 1.65rem; font-weight: 650; letter-spacing: -.02em }
.ms-stat small { display: block; margin-top: 3px; font-size: .74rem; color: var(--muted) }
.ms-stat.accent b { color: #8FB8FF }

/* ── panels & tables ───────────────────────────────────────────────────── */
.ms-panel { background: var(--panel); border: 1px solid var(--line-solid); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden }
.ms-panel-h { display: flex; align-items: center; gap: 10px; padding: 14px 17px; border-bottom: 1px solid var(--line-solid) }
.ms-panel-h h2 { font-size: .93rem; font-weight: 600 }
.ms-panel-h p { font-size: .78rem; color: var(--muted); margin-top: 2px }
.ms-panel-b { padding: 16px 17px }

.ms-tablewrap { overflow-x: auto }
table.ms-table { width: 100%; border-collapse: collapse; font-size: .84rem }
.ms-table th {
    text-align: left; padding: 10px 14px; font-size: .69rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--faint); font-weight: 700;
    border-bottom: 1px solid var(--line-solid); white-space: nowrap;
}
.ms-table td { padding: 11px 14px; border-bottom: 1px solid rgba(38,52,69,.55); vertical-align: middle }
.ms-table tr:last-child td { border-bottom: none }
.ms-table tbody tr:hover { background: rgba(76,141,255,.05) }
.ms-table td.r, .ms-table th.r { text-align: right }
.ms-name { font-weight: 600; color: var(--text) }
.ms-sub { display: block; font-size: .74rem; color: var(--faint); margin-top: 2px }

/* ── pills & buttons ───────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: .71rem; font-weight: 700; letter-spacing: .02em }
.pill.on { background: var(--pos-soft); color: var(--pos) }
.pill.off { background: var(--neg-soft); color: var(--neg) }
.pill.plan { background: var(--panel-2); color: var(--muted) }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }

.btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--line-solid); background: var(--panel-2); color: var(--text);
    font-size: .81rem; font-weight: 550; transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: #24313f; border-color: #33445a }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn svg { width: 14px; height: 14px }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff }
.btn.primary:hover:not(:disabled) { background: #3C7BEC }
.btn.danger { background: var(--neg-soft); border-color: rgba(229,98,79,.4); color: #FF9E8D }
.btn.danger:hover:not(:disabled) { background: rgba(229,98,79,.24) }
.btn.solid-danger { background: var(--neg); border-color: var(--neg); color: #fff }
.btn.solid-danger:hover:not(:disabled) { background: #D2503D }
.btn.sm { padding: 5px 10px; font-size: .76rem }

.ms-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }

/* filter switch in a panel header */
.ms-toggle { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted);
  white-space: nowrap; cursor: pointer; user-select: none }
.ms-toggle input { width: 15px; height: 15px; accent-color: var(--brand-2); cursor: pointer; flex: none }
.ms-toggle:hover { color: var(--text) }

/* ── notices ───────────────────────────────────────────────────────────── */
.note { display: flex; gap: 9px; padding: 11px 13px; border-radius: 10px; font-size: .82rem; line-height: 1.5; margin-bottom: 14px }
.note svg { width: 16px; height: 16px; flex: none; margin-top: 1px }
.note.ok { background: var(--pos-soft); border: 1px solid rgba(63,185,132,.3); color: #8FE0BC }
.note.err { background: var(--neg-soft); border: 1px solid rgba(229,98,79,.32); color: #FFAA9B }
.note.warn { background: var(--warn-soft); border: 1px solid rgba(224,165,74,.32); color: #F0C88A }
.note.info { background: var(--brand-soft); border: 1px solid rgba(76,141,255,.3); color: #A9C8FF }

/* ── forms ─────────────────────────────────────────────────────────────── */
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px }
.fld span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700 }
.fld input {
    padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line-solid);
    background: #0D141C; color: var(--text); font-family: inherit; font-size: .88rem;
}
.fld input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }
.fld input::placeholder { color: var(--faint) }
.fld.mono input { font-family: var(--mono) }

/* ── purge preview ─────────────────────────────────────────────────────── */
.ms-preview { max-height: 320px; overflow-y: auto; border: 1px solid var(--line-solid); border-radius: 10px; background: #0D141C }
.ms-preview table { width: 100%; border-collapse: collapse; font-size: .8rem }
.ms-preview td { padding: 6px 12px; border-bottom: 1px solid rgba(38,52,69,.4) }
.ms-preview td:last-child { text-align: right; font-family: var(--mono); color: var(--muted) }
.ms-preview tr:last-child td { border-bottom: none }

/* ── login ─────────────────────────────────────────────────────────────── */
.ms-login { min-height: 100vh; display: grid; place-items: center; padding: 24px }
.ms-login-card { width: min(390px, 100%); background: var(--panel); border: 1px solid var(--line-solid); border-radius: 16px; padding: 30px 28px }
.ms-login-card h1 { font-size: 1.3rem; font-weight: 650; margin-bottom: 5px }
.ms-login-card p.lead { font-size: .84rem; color: var(--muted); margin-bottom: 20px; line-height: 1.55 }
.ms-login-card .btn { width: 100%; justify-content: center; padding: 11px }

.ms-empty { padding: 34px; text-align: center; color: var(--faint); font-size: .86rem }

@media (max-width: 900px) {
    .ms-side { display: none }
    .ms-body { padding: 16px }
}