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

html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  font-family: var(--ms-font-body);
  font-size: var(--ms-fs-body);
  line-height: var(--ms-lh-body);
  color: var(--ms-text);
  background: var(--ms-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-font-display);
  font-weight: 800;
  line-height: var(--ms-lh-tight);
  color: var(--ms-ink-950);
  letter-spacing: -0.01em;
}

a { color: var(--ms-primary-500); text-decoration: none; transition: color var(--ms-dur-fast); }
a:hover { color: var(--ms-primary-600); }

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }

:focus-visible { outline: none; box-shadow: var(--ms-focus-ring); border-radius: var(--ms-radius-sm); }

::selection { background: var(--ms-primary-100); color: var(--ms-ink-950); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ms-border-strong); border-radius: 99px; border: 2px solid var(--ms-bg-page); }
::-webkit-scrollbar-thumb:hover { background: var(--ms-text-light); }

/* Icons (Lucide sprite, see static/js/icons.js) */
.ic {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle;
}
.ic-xs { width: 14px; height: 14px; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 22px; height: 22px; }
.ic-xl { width: 28px; height: 28px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ms-skip-link {
  position: absolute; left: 12px; top: -48px; z-index: var(--ms-z-tooltip);
  background: var(--ms-ink-950); color: #fff; padding: 8px 14px; border-radius: var(--ms-radius-sm);
  font-weight: 700; transition: top var(--ms-dur-fast);
}
.ms-skip-link:focus { top: 12px; color: #fff; }

.ms-app {
  min-height: 100vh;
  display: flex;
}

.ms-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--ms-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip; /* hidden menus never cause sideways scroll; keeps sticky working */
  transition: margin-left var(--ms-dur-base) var(--ms-ease);
}

.ms-app[data-sidebar="collapsed"] .ms-main { margin-left: var(--ms-sidebar-w-collapsed); }

.ms-sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--ms-sidebar-w);
  z-index: var(--ms-z-sidebar);
  display: flex; flex-direction: column;
  background: var(--ms-ink-950);
  color: var(--ms-ink-text);
  box-shadow: var(--ms-shadow-sidebar);
  transition: width var(--ms-dur-base) var(--ms-ease), transform var(--ms-dur-base) var(--ms-ease);
}

.ms-sidebar__brand {
  height: var(--ms-topbar-h);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--ms-ink-600);
}
.ms-brand { display: flex; align-items: center; gap: 11px; color: #fff; min-width: 0; }
.ms-brand:hover { color: #fff; }
.ms-brand__mark {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--ms-primary-500);
  color: #fff;
  position: relative;
}
.ms-brand__mark::after {  
  content: ""; position: absolute; right: -2px; top: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ms-accent-500); border: 2px solid var(--ms-ink-950);
}
.ms-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ms-brand__name { font-family: var(--ms-font-display); font-weight: 800; font-size: 16.5px; letter-spacing: -0.015em; white-space: nowrap; }

.ms-sidebar__collapse {
  width: 30px; height: 30px; border-radius: var(--ms-radius-sm);
  display: grid; place-items: center; color: var(--ms-ink-muted);
  transition: background var(--ms-dur-fast), color var(--ms-dur-fast);
}
.ms-sidebar__collapse:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.ms-sidebar__collapse { display: none; }  

.ms-sidebar__nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 12px 18px;
}
.ms-sidebar__nav::-webkit-scrollbar-thumb { background: var(--ms-ink-600); border-color: var(--ms-ink-950); }

.ms-nav__section + .ms-nav__section { margin-top: 18px; }
.ms-nav__title {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--ms-ink-muted) 75%, var(--ms-ink-950)); padding: 0 12px 7px; white-space: nowrap;
}
.ms-nav__list { display: flex; flex-direction: column; gap: 2px; }

.ms-nav__link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--ms-radius-md);
  color: var(--ms-ink-muted);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--ms-dur-fast), color var(--ms-dur-fast);
}
.ms-nav__link .ic { width: 18px; height: 18px; stroke-width: 2.1; }
.ms-nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.ms-nav__link[aria-current="page"] {
  color: #fff; font-weight: 700;
  background: var(--ms-ink-700);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.ms-nav__link[aria-current="page"] .ic { color: var(--ms-accent-500); }
.ms-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ms-nav__badge {
  font-size: 10.5px; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: var(--ms-radius-pill);
  color: var(--ms-ink-text); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
}
.ms-nav__badge--warn { color: var(--ms-warning); }
.ms-nav__badge--accent { color: var(--ms-accent-500); }

/* Collapsed sidebar (icon rail) */
.ms-app[data-sidebar="collapsed"] .ms-sidebar { width: var(--ms-sidebar-w-collapsed); }
.ms-app[data-sidebar="collapsed"] .ms-sidebar__brand { padding: 0; justify-content: center; flex-direction: column; gap: 0; }
.ms-app[data-sidebar="collapsed"] .ms-brand__text,
.ms-app[data-sidebar="collapsed"] .ms-nav__label,
.ms-app[data-sidebar="collapsed"] .ms-nav__badge { display: none; }
.ms-app[data-sidebar="collapsed"] .ms-nav__title { text-align: center; padding: 0 0 7px; font-size: 0; }
.ms-app[data-sidebar="collapsed"] .ms-nav__title::after { content: ""; display: block; width: 18px; height: 1px; margin: 4px auto 0; background: var(--ms-ink-600); }
.ms-app[data-sidebar="collapsed"] .ms-nav__link { justify-content: center; padding: 10px 0; }
.ms-app[data-sidebar="collapsed"] .ms-nav__link[data-badge]::after {  
  content: ""; position: absolute; top: 7px; right: 13px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ms-warning); border: 1.5px solid var(--ms-ink-950);
}

.ms-rail-tip {
  position: fixed; z-index: var(--ms-z-tooltip);
  background: var(--ms-ink-950); color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: var(--ms-radius-sm);
  box-shadow: var(--ms-shadow-lg); pointer-events: none; white-space: nowrap;
  transform: translateY(-50%);
}

.ms-scrim {
  position: fixed; inset: 0; z-index: calc(var(--ms-z-sidebar) - 1);
  background: rgba(27, 36, 48, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--ms-dur-base), visibility var(--ms-dur-base);
}

.ms-topbar {
  position: sticky; top: 0; z-index: var(--ms-z-topbar);
  height: var(--ms-topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--ms-gutter);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--ms-border-subtle);
}

.ms-topbar__left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ms-topbar__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ms-menu-btn .i-expand { display: none; }
.ms-app[data-sidebar="collapsed"] .ms-menu-btn .i-collapse { display: none; }
.ms-app[data-sidebar="collapsed"] .ms-menu-btn .i-expand { display: inline-block; }

.ms-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ms-text-light); min-width: 0; white-space: nowrap; }
.ms-breadcrumb a { color: var(--ms-text-muted); font-weight: 500; }
.ms-breadcrumb a:hover { color: var(--ms-primary-500); }
.ms-breadcrumb .ic { width: 14px; height: 14px; color: var(--ms-border-strong); }
.ms-breadcrumb [aria-current="page"] { color: var(--ms-ink-950); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }

.ms-topbar__divider { width: 1px; height: 26px; background: var(--ms-border); margin: 0 4px; }

.ms-notify__btn { position: relative; }
.ms-notify__count {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; line-height: 1; color: #fff;
  background: var(--ms-danger); box-shadow: 0 0 0 2px #fff;
}
.ms-notify__panel { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.ms-notify__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--ms-border-subtle); }
.ms-notify__heading { font-family: var(--ms-font-display); font-size: 15px; font-weight: 800; color: var(--ms-ink-950); }
.ms-notify__sub { font-size: 12px; color: var(--ms-text-light); margin-top: 1px; }
.ms-notify__mark { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--ms-primary-600); }
.ms-notify__mark .ic { width: 15px; height: 15px; }
.ms-notify__mark:hover { background: var(--ms-bg-hover); }
.ms-notify__list { max-height: min(420px, 60vh); overflow-y: auto; }
.ms-notify__item {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 13px 34px 13px 16px; border-bottom: 1px solid var(--ms-border-subtle); color: inherit;
  transition: background var(--ms-dur-fast);
}
.ms-notify__item:hover, .ms-notify__item:focus-visible { background: var(--ms-bg-hover); color: inherit; box-shadow: none; }
.ms-notify__item.is-unread .ms-notify__title { color: var(--ms-ink-950); }
.ms-notify__item.is-unread::after { content: ""; position: absolute; right: 16px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--ms-primary-500); }
.ms-notify__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-border); }
.ms-notify__icon .ic { width: 18px; height: 18px; }
.ms-notify__icon--success { color: var(--ms-success-text); }
.ms-notify__icon--warning { color: var(--ms-warning-text); }
.ms-notify__icon--primary { color: var(--ms-primary-600); }
.ms-notify__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ms-notify__title { font-size: 13.5px; font-weight: 600; color: var(--ms-ink-950); }
.ms-notify__item.is-unread .ms-notify__title { font-weight: 800; }
.ms-notify__text { font-size: 12.5px; color: var(--ms-text-muted); }
.ms-notify__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 11.5px; color: var(--ms-text-light); }
.ms-notify__go { font-weight: 700; color: var(--ms-primary-600); }
.ms-notify__go::before { content: "·"; margin-right: 8px; color: var(--ms-text-light); font-weight: 400; }
.ms-notify__foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-size: 13px; font-weight: 700; color: var(--ms-primary-600); background: var(--ms-bg-hover); }
.ms-notify__foot .ic { width: 15px; height: 15px; }
.ms-notify__foot:hover { color: var(--ms-primary-700); background: var(--ms-bg-subtle); }

.ms-user-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px; border-radius: var(--ms-radius-pill);
  border: 1px solid transparent;
  transition: background var(--ms-dur-fast), border-color var(--ms-dur-fast);
}
.ms-user-btn:hover, .ms-user-btn[aria-expanded="true"] { background: var(--ms-bg-subtle); border-color: var(--ms-border); }
.ms-user-btn__text { text-align: left; line-height: 1.15; }
.ms-user-btn__name { display: block; font-size: 13px; font-weight: 700; color: var(--ms-ink-950); }
.ms-user-btn__role { display: block; font-size: 11px; color: var(--ms-text-light); }
.ms-user-btn > .ic { color: var(--ms-text-light); width: 15px; height: 15px; }

.ms-content { flex: 1; padding: 26px var(--ms-gutter) 40px; }
.ms-container { max-width: var(--ms-content-max); margin: 0; } /* fixed max width, left-aligned next to the sidebar (never centred) */

.ms-page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.ms-page-header__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ms-primary-500); margin-bottom: 6px;
}
.ms-page-header__title { font-size: var(--ms-fs-display); letter-spacing: -0.025em; }
.ms-page-header__sub { color: var(--ms-text-muted); margin-top: 6px; max-width: 680px; }
.ms-page-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ms-section { margin-top: 32px; }
.ms-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ms-section__title { font-size: var(--ms-fs-h2); }
.ms-section__sub { font-size: var(--ms-fs-sm); color: var(--ms-text-light); }

.ms-footer {
  padding: 16px var(--ms-gutter);
  border-top: 1px solid var(--ms-border-subtle);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--ms-text-light);
}

.ms-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.ms-grid > * { min-width: 0; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: 1 / -1; }

.ms-auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr)); gap: 16px; }

.ms-stack { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.ms-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 8px); }
.ms-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms-grow { flex: 1; min-width: 0; }

.text-muted { color: var(--ms-text-muted); }
.text-light { color: var(--ms-text-light); }
.text-sm { font-size: var(--ms-fs-sm); }
.text-xs { font-size: var(--ms-fs-xs); }
.mono { font-family: var(--ms-font-mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; }

/* Four cards in a row become two. Side-by-side pairs (8 + 4, 5 + 7) stay side by side until 1100 px,
   where everything stacks; widening only one of a pair left half a row empty. */
@media (max-width: 1280px) {
  .span-3 { grid-column: span 6; }
}

@media (max-width: 1100px) {
  .ms-user-btn__text { display: none; }
  .ms-topbar .ms-hide-md { display: none; }
}

@media (max-width: 900px) {
  :root { --ms-gutter: var(--ms-gutter-sm); }

  .ms-main, .ms-app[data-sidebar="collapsed"] .ms-main { margin-left: 0; }

  /* Sidebar becomes an off-canvas drawer, always shown expanded */
  .ms-sidebar,
  .ms-app[data-sidebar="collapsed"] .ms-sidebar { width: min(var(--ms-sidebar-w), 86vw); transform: translateX(-100%); }
  .ms-app[data-mobile-nav="open"] .ms-sidebar { transform: translateX(0); }
  .ms-app[data-mobile-nav="open"] .ms-scrim { opacity: 1; visibility: visible; }
  .ms-app[data-sidebar="collapsed"] .ms-brand__text,
  .ms-app[data-sidebar="collapsed"] .ms-nav__label,
  .ms-app[data-sidebar="collapsed"] .ms-nav__badge { display: revert; }
  .ms-app[data-sidebar="collapsed"] .ms-nav__link { justify-content: flex-start; padding: 9px 12px; }
  .ms-app[data-sidebar="collapsed"] .ms-sidebar__brand { padding: 0 14px 0 18px; justify-content: space-between; flex-direction: row; }
  .ms-app[data-sidebar="collapsed"] .ms-nav__title { font-size: 10px; text-align: left; padding: 0 12px 7px; }
  .ms-app[data-sidebar="collapsed"] .ms-nav__title::after,
  .ms-app[data-sidebar="collapsed"] .ms-nav__link[data-badge]::after { display: none; }
    .ms-sidebar__collapse { display: grid; }
  .ms-menu-btn .i-collapse, .ms-menu-btn .i-expand,
  .ms-app[data-sidebar="collapsed"] .ms-menu-btn .i-expand { display: none; }
  .ms-menu-btn .i-menu { display: inline-block; }
  .ms-topbar .ms-hide-sm { display: none; }
  .ms-breadcrumb > :not(:last-child) { display: none; }

  .ms-content { padding-top: 20px; }
  .ms-page-header { align-items: flex-start; }
  .ms-page-header__title { font-size: var(--ms-fs-h1); }
  .ms-page-header__actions { width: 100%; }

  .span-2, .span-3, .span-4, .span-5, .span-6 { grid-column: 1 / -1; }
  .ms-grid { gap: 14px; }
}

@media (min-width: 901px) {
  .ms-menu-btn .i-menu { display: none; }
}

@media print {
  .ms-sidebar, .ms-topbar, .ms-scrim, .ms-footer, .ms-toast-stack { display: none !important; }
  .ms-main { margin-left: 0 !important; }
  body { background: #fff; }
}