/* Shared presentation layer; retain AdminLTE's layout and interaction hooks. */
:root {
  --ms-ink: #192b42;
  --ms-muted: #64748b;
  --ms-border: #e2e8f0;
  --ms-blue: #245bd6;
  --ms-surface: #f3f6fa;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ms-ink); font-size: .9375rem; }
a { color: var(--ms-blue); }
a:hover { color: #1744a5; }
.text-muted { color: var(--ms-muted) !important; }
.text-primary { color: var(--ms-blue) !important; }
.content-wrapper { background: var(--ms-surface); }
.main-header { min-height: 64px; border-bottom: 1px solid var(--ms-border); padding: .5rem 1rem; }
.main-header .nav-link { border-radius: 8px; }
.main-header .nav-link:hover { background: var(--ms-surface); }
.main-sidebar { background: #142237; box-shadow: 4px 0 20px rgba(15, 23, 42, .08) !important; }
.brand-link { min-height: 64px; border-bottom: 1px solid rgba(255,255,255,.09) !important; padding: 1rem; }
.brand-link .brand-text { color: #fff; font-weight: 650 !important; font-size: 1.12rem; letter-spacing: -.025em; }
.brand-link .brand-image { box-shadow: none !important; background-color: transparent !important; }
.sidebar { padding: 0 .75rem; }
.sidebar .user-panel { border-bottom-color: rgba(255,255,255,.09); align-items: center; }
.sidebar .user-panel .info { white-space: normal; }
.sidebar .user-panel a { color: #cbd5e1; font-size: .85rem; }
.sidebar .nav-header { color: #8ea3bd; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1.1rem .75rem .5rem; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { background: var(--ms-blue); box-shadow: none; }
.nav-sidebar .nav-link { border-radius: 8px; padding: .65rem .8rem; margin-bottom: 4px; }
.nav-sidebar .nav-link > i { margin-right: .5rem; }
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link { color: #aebdd0; font-size: .875rem; }
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active { background: rgba(110,161,255,.14); color: #e0ebff; }
.content-header { padding: 28px 24px 18px; }
.content-header h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.035em; color: var(--ms-ink) !important; }
.content-header h1.text-danger { color: #b42338 !important; }
.content-header .breadcrumb { font-size: .8rem; padding-top: .5rem; }
.content-wrapper > .content { padding: 0 24px 24px; }
.content > .content { padding: 0; }
.card { border: 1px solid var(--ms-border); border-radius: 12px; box-shadow: 0 3px 12px rgba(25,43,66,.04); margin-bottom: 24px; }
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ms-border); border-radius: 11px 11px 0 0; }
.card-title { font-size: 1rem; font-weight: 650; line-height: 1.6; }
.card-body { padding: 1.25rem; }
.card-footer { padding: 1rem 1.25rem; background: #f8fafc; border-top: 1px solid var(--ms-border); border-radius: 0 0 11px 11px; }
.card-primary:not(.card-outline) > .card-header { background: #edf3ff; color: #244c91; }
.card-outline.card-primary { border-top: 3px solid var(--ms-blue); }
.card-tools .pagination { margin-bottom: 0; }
.table { margin-bottom: 0; color: var(--ms-ink); }
.table thead th { background: #f8fafc; color: var(--ms-muted); font-size: .7rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; border-top: 0; border-bottom: 1px solid var(--ms-border); white-space: nowrap; padding: .9rem 1rem; }
.table td { padding: .9rem 1rem; border-top: 1px solid #edf1f6; vertical-align: middle; }
.table tbody tr:hover { background: #f8faff; }
.table td b { font-weight: 600; }
.table-responsive { border-radius: 0 0 11px 11px; }
.badge { padding: .35em .6em; border-radius: 5px; font-weight: 600; line-height: 1.3; }
.badge-success { background: #dcf5e7; color: #146c43; }
.badge-danger { background: #fde7eb; color: #a5223a; }
.badge-warning { background: #fff0cb; color: #805800; }
.badge-info { background: #e0f1fa; color: #176180; }
.badge-secondary { background: #e9eef5; color: #526176; }
.form-group { margin-bottom: 1.25rem; }
label:not(.form-check-label):not(.custom-control-label) { font-size: .85rem; font-weight: 600; margin-bottom: .45rem; }
.form-control, .custom-select { border: 1px solid #cbd5e1; border-radius: 7px; color: var(--ms-ink); }
.form-control:not(textarea):not(.form-control-sm), .custom-select { min-height: 42px; }
.form-control:focus, .custom-select:focus { border-color: #7095e8; box-shadow: 0 0 0 3px rgba(36,91,214,.12); }
.form-control:disabled, .form-control[readonly] { background: #f1f5f9; }
.input-group-text { background: #f8fafc; border-color: #cbd5e1; color: var(--ms-muted); border-radius: 7px; }
.btn { border-radius: 7px; font-size: .875rem; font-weight: 600; padding: .5rem .9rem; }
.btn-sm, .btn-group-sm > .btn { padding: .3rem .65rem; font-size: .8rem; }
.btn-primary { background: var(--ms-blue); border-color: var(--ms-blue); }
.btn-primary:hover, .btn-primary:focus { background: #194bb9; border-color: #194bb9; }
.btn-default { background: #fff; border-color: #cbd5e1; color: #42546b; }
.page-link { border-color: var(--ms-border); color: var(--ms-blue); padding: .45rem .7rem; }
.page-item.active .page-link { background: var(--ms-blue); border-color: var(--ms-blue); }
.dropdown-menu { border: 1px solid var(--ms-border); border-radius: 9px; padding: .4rem; box-shadow: 0 8px 28px rgba(15,23,42,.12); }
.dropdown-item { border-radius: 5px; padding: .5rem .75rem; font-size: .875rem; }
.modal-content { border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,.2); }
.modal-header, .modal-footer { border-color: var(--ms-border); padding: 1.1rem 1.4rem; }
.modal-body { padding: 1.4rem; }
.modal-title { font-weight: 650; font-size: 1.15rem; }
.alert, .callout { border-radius: 9px; }
.info-box, .small-box { border-radius: 12px; box-shadow: 0 3px 12px rgba(25,43,66,.06); }
.info-box { border: 1px solid var(--ms-border); padding: .75rem; }
.info-box .info-box-icon { border-radius: 9px; }
.small-box .inner { padding: 20px; }
.nav-tabs { border-color: var(--ms-border); }
.nav-tabs .nav-link { border-radius: 7px 7px 0 0; font-weight: 600; }
.main-footer { background: #fff; border-color: var(--ms-border); color: var(--ms-muted); font-size: .8rem; padding: 1rem 1.75rem; }
.login-page { background: radial-gradient(ellipse at top left, #dce9ff, transparent 55%), var(--ms-surface); min-height: 100vh; height: auto; padding: 32px 16px; }
.login-box { width: 420px; max-width: 100%; }
.login-box .card { box-shadow: 0 18px 50px rgba(25,43,66,.1); }
.login-box .card-header { background: #fff; padding: 28px 24px 12px; border-bottom: 0; }
.login-box .card-body { padding: 24px 32px 32px; }
.ms-login-brand { font-size: 1.7rem; font-weight: 700; color: var(--ms-ink); letter-spacing: -.045em; }
.ms-login-brand > span { color: var(--ms-blue); }
.ms-login-brand .fas { font-size: 1.4rem; margin-right: .3rem; }
.login-box-msg { color: var(--ms-muted); padding: 0 0 24px; font-size: .9rem; }
.login-box .social-auth-links:empty { display: none; }
:focus-visible { outline: 3px solid #7095e8; outline-offset: 3px; }
@media (max-width: 767.98px) {
  .content-header { padding: 20px 12px 12px; }
  .content-header h1 { font-size: 1.45rem; }
  .content-wrapper > .content { padding: 0 12px 16px; }
  .content-header .breadcrumb { float: none !important; margin: .4rem 0 0; }
  .card-header { padding: .9rem 1rem; }
  .card-header > .card-tools { float: none; margin: .65rem 0 0; }
  .card-tools .pagination { float: none !important; flex-wrap: wrap; gap: 3px; }
  .card-body { padding: 1rem; }
  .table td { padding: .75rem; }
  .login-box .card-body { padding: 20px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* Operational summaries and charts. Missing observations have their own pattern. */
.ms-healthy { background: #218653; color: #fff; }
.ms-errors { background: #c63750; color: #fff; }
.ms-warnings { background: #dfa321; color: #192b42; }
.ms-changed { background: #7954be; color: #fff; }
.ms-pending, .ms-disabled { background: #8292a9; color: #fff; }
.ms-missing { background: repeating-linear-gradient(135deg,#edf1f6,#edf1f6 3px,#cbd5e1 3px,#cbd5e1 4px); }
.ms-filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ms-chip { display:inline-flex; gap:8px; align-items:center; padding:7px 12px; border:1px solid var(--ms-border); border-radius:20px; background:white; color:var(--ms-ink); font-size:.85rem; }
.ms-chip.active { background:#e7efff; color:#194bb9; border-color:#7095e8; }
.ms-chip strong { font-size:.8rem; }
.ms-status-strip { display:flex; gap:3px; min-width:170px; height:20px; }
.ms-status-strip > span { flex:1; border-radius:3px; }
.ms-sparkline { display:block; width:120px; height:32px; color:var(--ms-blue); margin-top:6px; }
.ms-monitor-row > td:first-child { border-left:3px solid #8292a9; }
.ms-state-healthy > td:first-child { border-left-color:#218653; }
.ms-state-errors > td:first-child { border-left-color:#c63750; }
.ms-state-warnings > td:first-child { border-left-color:#dfa321; }
.ms-state-changed > td:first-child { border-left-color:#7954be; }
.ms-destination { display:inline-block; padding:2px 7px; border-radius:5px; background:#edf3ff; margin:2px; }
.ms-health-bar { display:flex; height:26px; border-radius:8px; overflow:hidden; gap:2px; background:#edf1f6; }
.ms-health-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }
.ms-health-legend a { color:var(--ms-ink); }
.ms-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.ms-bars { display:grid; gap:10px; margin:16px 0; }
.ms-bar-row { display:grid; grid-template-columns:minmax(80px,1fr) 2fr 55px; align-items:center; gap:12px; font-size:.85rem; }
.ms-bar-row > span { overflow-wrap:anywhere; }
.ms-bar-row strong { text-align:right; }
.ms-bar-track { background:#edf1f6; height:10px; border-radius:6px; overflow:hidden; }
.ms-fill { display:block; height:100%; border-radius:6px; }
.ms-trend-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.ms-heat-cell { text-align:center; min-width:32px; font-size:.75rem; padding:8px 4px !important; }
.ms-heat-legend { display:flex; align-items:center; gap:8px; font-size:.8rem; margin-top:12px; }
.ms-heat-legend span { width:80px; height:10px; background:linear-gradient(90deg,#edf3ff,#267bd9); border-radius:4px; }
[hidden] { display:none !important; }
.ms-daily-line .ms-sparkline { width:100%; height:120px; }
[data-slack-section="lifecycle"] table:first-of-type td:first-child { border-left:3px solid #7954be; }
@media print { [data-slack-section][hidden], [data-participation="messages"][hidden] { display:block !important; } .ms-filter-chips { display:none; } }
.ms-monitor-picker { border:0; padding:0; margin:0 0 20px; min-width:0; }
.ms-monitor-type-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ms-monitor-type { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid var(--ms-border); border-radius:10px; background:#fff; cursor:pointer; margin:0; }
.ms-monitor-type:has(input:checked) { border-color:var(--ms-blue); background:#edf3ff; box-shadow:0 0 0 1px var(--ms-blue); }
.ms-monitor-type:has(input:focus-visible) { outline:3px solid #7095e8; outline-offset:2px; }
.ms-monitor-type:hover { border-color:#7095e8; }
.ms-monitor-type input { margin-top:5px; accent-color:var(--ms-blue); flex-shrink:0; }
.ms-type-content { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ms-type-heading { display:flex; gap:10px; align-items:center; }
.ms-type-heading i { color:var(--ms-blue); font-size:1.2rem; width:24px; text-align:center; }
.ms-type-description { color:var(--ms-muted); font-size:.8rem; line-height:1.5; font-weight:400; }
.ms-type-content .badge { align-self:flex-start; }
.ms-type-locked { background:#f8fafc; cursor:default; }
.ms-type-locked .ms-type-heading i { color:var(--ms-muted); }
@media (max-width:575.98px) { .ms-monitor-type-grid { grid-template-columns:1fr; } }

/* Compact Slack activity heatmaps; daily history stays inside its own scroll area. */
.ms-slack-heat-scroll { overflow:auto; }
.ms-slack-heat { width:100%; margin-bottom:0; font-size:.75rem; border-collapse:separate; border-spacing:0; }
.ms-slack-heat th, .ms-slack-heat td { padding:4px !important; text-align:center; white-space:nowrap; }
.ms-slack-heat .ms-heat-cell { min-width:24px; height:26px; }
.ms-slack-heat th:first-child { position:sticky; left:0; z-index:1; background:#fff; text-align:left; }
.ms-slack-heat-count { opacity:0; }
.ms-slack-heat .ms-heat-cell:hover .ms-slack-heat-count,
.ms-slack-heat .ms-heat-cell:focus .ms-slack-heat-count { opacity:1; }
.ms-slack-heat .ms-heat-cell:focus { outline:2px solid #343a40; outline-offset:-2px; }
.ms-slack-heat-detail { max-height:360px; }
.ms-slack-heat-detail thead th { position:sticky; top:0; z-index:2; background:#fff; }
.ms-slack-heat-detail thead th:first-child { z-index:3; }