/* =====================================================================
   Milo reskin — app styles (built on top of colors_and_type.css)
   ===================================================================== */

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-2);
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--mp-sapling); color: var(--mp-moss); }

#app { min-height: 100vh; }

/* =====================================================================
   App shell — sidebar + main column
   ===================================================================== */
.mp-app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: var(--bg-2);
  transition: grid-template-columns 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mp-app:has(.mp-side.is-collapsed) {
  grid-template-columns: 72px 1fr;
}

/* Sidebar: expanded by default; collapses via toggle button.
   `.is-collapsed` is set on <aside> by the React component and persists in
   localStorage. */
.mp-side {
  background: var(--mp-moss);
  color: #fff;
  width: 248px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 40;
  transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms;
}
.mp-side.is-collapsed {
  width: 72px;
}
.mp-side-inner {
  width: 248px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 18px;
  box-sizing: border-box;
}

/* Labels fade out when collapsed so the width transition leads, text follows */
.mp-side-brand-text,
.mp-side-workspace-name,
.mp-side-item > span:not(.mp-ic),
.mp-side-user-meta,
.mp-side-logout > span:not(.mp-ic),
.mp-side-toggle > span:not(.mp-ic),
.mp-side-group {
  opacity: 1;
  transition: opacity 160ms ease-out 90ms;
}
.mp-side.is-collapsed .mp-side-brand-text,
.mp-side.is-collapsed .mp-side-workspace-name,
.mp-side.is-collapsed .mp-side-item > span:not(.mp-ic),
.mp-side.is-collapsed .mp-side-user-meta,
.mp-side.is-collapsed .mp-side-logout > span:not(.mp-ic),
.mp-side.is-collapsed .mp-side-toggle > span:not(.mp-ic),
.mp-side.is-collapsed .mp-side-group {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

/* Collapse/expand toggle — sits above the user block. The divider line
   below the toggle separates it from the user/logout cluster. */
.mp-side-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  display: flex; align-items: center; gap: 12px;
  margin: 14px -4px 0;
  padding: 12px 14px;
  width: calc(100% + 8px);
  color: rgba(255,255,255,0.78);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.mp-side-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.mp-side-toggle .mp-ic { color: rgba(255,255,255,0.6); flex-shrink: 0; transform: scaleX(1); }
.mp-side-toggle:hover .mp-ic { color: #fff; }
.mp-side-toggle .mp-ic.is-flipped { transform: scaleX(-1); }
.mp-side-toggle > span:not(.mp-ic) {
  white-space: nowrap;
  overflow: hidden;
}

/* Brand row */
.mp-side-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 14px;
}
.mp-side-brand img {
  width: 40px; height: 40px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
.mp-side-brand-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.12;
  color: #fff;
  letter-spacing: -0.015em;
}

/* Workspace pill — bg only when sidebar is expanded */
.mp-side-workspace {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin: 4px 0 14px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background 200ms, border-color 200ms;
}
.mp-side:hover .mp-side-workspace {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.mp-side-workspace > .mp-side-workspace-icon { color: var(--mp-sapling); flex-shrink: 0; opacity: 0.62; }
.mp-side-workspace-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mp-side-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 4px -4px 0; padding: 0 4px; }
.mp-side-nav::-webkit-scrollbar { width: 4px; }
.mp-side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.mp-side-section { display: flex; flex-direction: column; gap: 2px; }
/* App-wide eyebrow — Instrument Serif italic. Distinctive, editorial, on-brand.
   Replaces the generic uppercase-tracked-out pattern wherever it's used. */
.mp-eyebrow-serif {
  font-family: var(--font-serif-hub);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--mp-pine);
  text-transform: none;
}
.mp-eyebrow-serif--on-dark { color: var(--mp-sapling); }

.mp-side-group {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--mp-sapling);
  opacity: 0.78;
  text-transform: none;
  padding: 0 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease, padding 200ms ease;
}
.mp-side:hover .mp-side-group {
  max-height: 34px;
  padding: 16px 12px 4px;
  transition: max-height 240ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, padding 240ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
}
.mp-side-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.78);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 140ms, color 140ms;
  border: 1px solid transparent;
}
.mp-side-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.mp-side-item.is-active {
  background: var(--mp-sapling);
  color: var(--mp-moss);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(3,45,16,0.18), 0 1px 0 rgba(255,255,255,0.05);
}
.mp-side-item.is-active .mp-ic { color: var(--mp-moss); }

/* Bottom user block — sits below the nav-toggle, separated by a top border */
.mp-side-user {
  margin-top: 0;
  padding: 14px 8px 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.mp-side-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mp-dark-teal);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.mp-side-user-meta { min-width: 0; }
.mp-side-user-name { font-weight: 700; font-size: 13px; color: #fff; line-height: 1.2; }
.mp-side-user-role {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Sidebar Log Out — works as both <a> and <button> */
.mp-side-logout {
  display: flex; align-items: center; gap: 12px;
  margin: 14px -4px -4px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none;
  border: none; background: none; cursor: pointer;
  transition: color 140ms, background 140ms;
}
.mp-side-logout:hover { color: #fff; background: rgba(255,255,255,0.05); }
.mp-side-logout .mp-ic { color: rgba(255,255,255,0.6); }
.mp-side-logout:hover .mp-ic { color: #fff; }

/* =====================================================================
   Main column (no sticky topbar — pages start at top of content area)
   ===================================================================== */
.mp-main { display: flex; flex-direction: column; min-width: 0; }

.mp-content {
  padding: 40px 40px 56px;
  display: flex; flex-direction: column;
  gap: 24px;
  max-width: 1440px;
  width: 100%;
}

/* =====================================================================
   Page head — large title + optional subtitle, no icon tile
   ===================================================================== */
.mp-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 4px;
}
.mp-page-head-text { flex: 1; min-width: 0; }
.mp-page-head-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
  color: var(--mp-deep-forest);
}
.mp-page-head-subtitle {
  font-size: 15px;
  color: var(--fg-3);
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 720px;
}
.mp-page-head-aside { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* =====================================================================
   Buttons (project-specific — separate from .mp-btn-primary in tokens.css)
   ===================================================================== */
.mp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: 10px;
  transition: filter 120ms, background 120ms, color 120ms, border-color 120ms;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.mp-btn--sm { padding: 7px 11px; font-size: 12.5px; border-radius: 8px; }
.mp-btn--md { padding: 9px 14px; font-size: 13px; }
.mp-btn--lg { padding: 12px 18px; font-size: 14px; border-radius: 12px; }

.mp-btn--primary { background: var(--mp-deep-forest); color: #fff; }
.mp-btn--primary:hover { filter: brightness(1.12); }

.mp-btn--secondary { background: #fff; color: var(--fg-1); border: 1px solid var(--border-subtle); }
.mp-btn--secondary:hover { background: var(--bg-2); }

.mp-btn--ghost { background: transparent; color: var(--fg-2); }
.mp-btn--ghost:hover { background: var(--bg-2); color: var(--fg-1); }

.mp-btn--danger { background: #fff; color: var(--mp-ember); border: 1px solid rgba(207,76,0,0.25); }
.mp-btn--danger:hover { background: rgba(207,76,0,0.06); }

.mp-btn--sapling { background: var(--mp-sapling); color: var(--mp-moss); }
.mp-btn--sapling:hover { filter: brightness(0.96); }

.mp-backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--mp-pine);
  padding: 6px 10px;
  border-radius: 8px;
  margin-left: -10px;
  width: fit-content;
  transition: background 120ms;
}
.mp-backlink:hover { background: rgba(37,103,81,0.08); }

/* =====================================================================
   Form inputs
   ===================================================================== */
.mp-input-wrap { position: relative; }
.mp-input-leading {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--fg-3); pointer-events: none;
}
.mp-input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 36px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--fg-1);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.mp-input:focus { border-color: var(--mp-pine); box-shadow: 0 0 0 3px var(--focus-pine); }
.mp-input::placeholder { color: var(--fg-3); }

.mp-input--plain { padding-left: 14px; }

.mp-select-wrap { position: relative; }
.mp-select {
  appearance: none; -webkit-appearance: none;
  height: 40px;
  padding: 0 36px 0 14px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--fg-1);
  outline: none;
  min-width: 180px;
  cursor: pointer;
}
.mp-select:focus { border-color: var(--mp-pine); box-shadow: 0 0 0 3px var(--focus-pine); }
.mp-select-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--fg-3); pointer-events: none;
}

/* A select inside a form field matches its sibling inputs, which also keeps
   its chevron attached: the chevron is absolutely positioned to the wrapper,
   so a content-width select inside a stretched wrapper detaches from it. */
.mp-field .mp-select-wrap .mp-select { width: 100%; }

/* The one form-field definition. Everything that used to patch it later —
   the modal block and the roles.css accessibility block — folds in here. */
.mp-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.mp-field:first-child { margin-top: 0; }
.mp-field-label { font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.mp-field-help  { font-size: 13px; color: var(--fg-3); margin-top: 2px; line-height: 1.5; }
.mp-field-hint  { font-size: 13px; color: var(--fg-3); margin-top: 2px; }
.mp-field-input {
  width: 100%; height: 42px;
  padding: 0 14px;
  font-family: var(--font-sans);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--fg-1);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.mp-field-input:disabled, .mp-field-input[readonly] { background: #fff; }
.mp-field-input:focus { border-color: var(--mp-pine); box-shadow: 0 0 0 3px var(--focus-pine); }

/* =====================================================================
   Cards & stat tiles
   ===================================================================== */
.mp-card-ui {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
/* Standard card padding (22px) — keeps a consistent rhythm across pages */
.mp-card-head {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mp-card-head h3 { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; }
.mp-card-head .mp-card-head-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }
.mp-card-body { padding: 22px; }
.mp-card-body--tight { padding: 12px 0; }

.mp-stat {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 160ms;
}
.mp-stat:hover { box-shadow: var(--shadow-card-hover); }
.mp-stat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.mp-stat-label { font-size: 12.5px; font-weight: 600; color: var(--fg-3); }
.mp-stat-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mp-cream); color: var(--mp-charcoal);
  display: flex; align-items: center; justify-content: center;
}
.mp-stat-info { color: var(--fg-3); display: flex; align-items: center; cursor: help; }
.mp-stat-value { font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--fg-1); margin-top: 4px; }
.mp-stat-value--zero { color: var(--fg-3); opacity: 0.6; }
.mp-stat-suffix { font-size: 14px; font-weight: 500; color: var(--fg-3); margin-left: 4px; letter-spacing: 0; }
.mp-stat-hint { font-size: 12px; color: var(--fg-3); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.mp-stat-hint .up    { color: var(--mp-pine); font-weight: 700; }
.mp-stat-hint .down  { color: var(--mp-ember); font-weight: 700; }
.mp-stat-hint .same  { color: var(--fg-3); font-weight: 600; }
.mp-stat--mist  { background: var(--mp-mist); border-color: transparent; }
.mp-stat--mist .mp-stat-label,
.mp-stat--mist .mp-stat-value,
.mp-stat--mist .mp-stat-hint { color: var(--mp-deep-forest); }
.mp-stat-icon--mist { background: var(--mp-mist); color: var(--mp-deep-forest); }
.mp-stat-icon--clay { background: rgba(217,128,66,0.14); color: var(--mp-clay-ink); }
.mp-stat--mist .mp-stat-icon { background: rgba(255,255,255,0.6); }
.mp-stat--moss { background: var(--mp-moss); border-color: transparent; }
.mp-stat--moss .mp-stat-label { color: rgba(255,255,255,0.55); }
.mp-stat--moss .mp-stat-value { color: #fff; }
.mp-stat--moss .mp-stat-hint  { color: rgba(255,255,255,0.55); }
.mp-stat--moss .mp-stat-icon  { background: rgba(210,255,133,0.18); color: var(--mp-sapling); }

/* =====================================================================
   Stat card — SUBTLE variant
   - Flat inline icon next to label, no green pill background
   - Same value typography, lighter chrome overall
   ===================================================================== */
.mp-stat--subtle {
  background: #fff;
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  padding: 18px 20px;
}
.mp-stat--subtle .mp-stat-sub-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-3);
}
.mp-stat--subtle .mp-stat-sub-head .mp-ic { color: var(--mp-pine); opacity: 0.75; }
.mp-stat--subtle .mp-stat-value { font-size: 30px; font-weight: 500; margin-top: 8px; }

/* =====================================================================
   Stat card — BOLD variant
   - Pine left-edge accent stripe + large pine icon top
   - Larger value, label below it as caption
   - Subtle mist→white gradient watermark in top right
   ===================================================================== */
.mp-stat--bold {
  position: relative;
  background: linear-gradient(135deg, #ffffff 60%, rgba(196,245,220,0.35) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 22px 22px 20px;
  overflow: hidden;
}
.mp-stat-bold-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--mp-pine);
}
.mp-stat-bold-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(37, 103, 81, 0.10);
  color: var(--mp-pine);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.mp-stat-bold-value {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--mp-deep-forest);
}
.mp-stat-bold-value span {
  font-size: 14px; font-weight: 500; color: var(--fg-3); margin-left: 4px; letter-spacing: 0;
}
.mp-stat-bold-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
  margin-top: 6px;
  letter-spacing: 0.005em;
}

/* =====================================================================
   Stat card — SAAS variant (Linear / Stripe inspired)
   - Minimal card, no icon at all
   - Label top, big tabular-num value, delta pill with trend arrow
   ===================================================================== */
.mp-stat--saas {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px 18px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.mp-stat-saas-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-3);
}
.mp-stat-value--tabular {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 30px;
  margin-top: 2px;
}
.mp-stat-saas-delta {
  display: inline-flex; align-items: center; gap: 5px;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.mp-stat-saas-delta--up   { background: var(--mp-mist);            color: var(--mp-deep-forest); }
.mp-stat-saas-delta--down { background: rgba(207,76,0,0.10);       color: var(--mp-ember); }
.mp-stat-saas-delta--flat { background: var(--bg-2);               color: var(--fg-3);  }
.mp-stat-saas-delta-cmp {
  font-weight: 500;
  color: var(--fg-3);
  opacity: 0.9;
}
.mp-stat-saas-delta--up   .mp-stat-saas-delta-cmp { color: var(--fg-3); opacity: 0.7; }
.mp-stat-saas-delta--down .mp-stat-saas-delta-cmp { color: var(--fg-3); opacity: 0.7; }

/* =====================================================================
   Grids
   ===================================================================== */
.mp-grid-stats-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mp-grid-stats-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mp-grid-stats-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mp-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.mp-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }

@media (max-width: 1100px) {
  .mp-grid-stats-4 { grid-template-columns: repeat(2, 1fr); }
  .mp-grid-2-1, .mp-grid-1-2 { grid-template-columns: 1fr; }
}

/* =====================================================================
   Badges (status, pills) — richer palette for differentiation
   ===================================================================== */
.mp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 12px; font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mp-badge--default { background: var(--bg-2); color: var(--fg-2); border-color: var(--border-subtle); }

/* Active — calm mint */
.mp-badge--ok      { background: var(--mp-mist); color: var(--mp-deep-forest); }

/* Activated — bright lime (fresh / newly active) */
.mp-badge--lime    { background: var(--mp-bright-lime); color: var(--mp-moss); }

/* For Activation — warm clay (pending) */
.mp-badge--clay    { background: rgba(217,128,66,0.15); color: var(--mp-clay); }

/* Suspended — warm cream neutral */
.mp-badge--cream   { background: var(--mp-cream); color: var(--mp-charcoal); }

/* Terminated — ember (terminal) */
.mp-badge--ember   { background: rgba(207,76,0,0.10); color: var(--mp-ember); }

/* Trialing — teal (info) */
.mp-badge--teal    { background: rgba(80,154,130,0.16); color: #1b342c; }

/* SIM type chips — categorical (digital / object / machine), not value-loaded */
.mp-badge--type-esim {
  background: rgba(80, 154, 130, 0.20);
  color: #1b342c;
}
.mp-badge--type-physical {
  background: rgba(62, 62, 57, 0.10);
  color: var(--mp-charcoal);
}
.mp-badge--type-iot {
  background: var(--mp-cream);
  color: var(--mp-charcoal);
}

/* generic info */
.mp-badge--info    { background: rgba(37,103,81,0.10); color: var(--mp-pine); }
/* generic muted */
.mp-badge--muted   { background: var(--bg-2); color: var(--fg-3); border-color: var(--border-subtle); }
/* mist (used by SimTypeBadge for eSIM) */
.mp-badge--mist    { background: var(--mp-mist); color: var(--mp-deep-forest); }
/* warn is an alias of ember: one destructive tone, one definition */
.mp-badge--warn    { background: var(--mp-ember-tint); color: var(--mp-ember); }

/* =====================================================================
   Tables
   ===================================================================== */
/* ---- Wide-table horizontal scrolling ---- */
.mp-tscroll { position: relative; }
.mp-table-wrap { overflow-x: auto; }

/* Always-visible slim scrollbar: shows how much is hidden and how far along you are */
.mp-tscroll.is-over .mp-table-wrap { scrollbar-width: thin; scrollbar-color: var(--mp-warm-gray) var(--mp-cream); padding-bottom: 2px; }
.mp-tscroll.is-over .mp-table-wrap::-webkit-scrollbar { height: 10px; }
.mp-tscroll.is-over .mp-table-wrap::-webkit-scrollbar-track { background: var(--mp-cream); border-radius: 99px; }
.mp-tscroll.is-over .mp-table-wrap::-webkit-scrollbar-thumb { background: var(--mp-warm-gray); border-radius: 99px; border: 2px solid var(--mp-cream); }
.mp-tscroll.is-over .mp-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--fg-2); }

/* Sticky actions column — the three-dot menu never scrolls out of reach */
.has-sticky-actions .mp-table thead th:last-child,
.has-sticky-actions .mp-table tbody td:last-child {
  position: sticky; right: 0; z-index: 3; background: #fff;
}
/* Floor the actions column so it can always host the chevron pair (55px) */
.has-sticky-actions .mp-table thead th:last-child,
.has-sticky-actions .mp-table tbody td:last-child { min-width: 59px; }
.has-sticky-actions .mp-table thead th:last-child { z-index: 4; background: var(--bg-2); }
/* The open row's sticky cell must outrank later rows' sticky cells — they share
   a z-index and paint later, so they'd cover this row's open menu. */
.has-sticky-actions .mp-table tbody td:last-child:has(.mp-actions.is-open) { z-index: 60; }
.is-row-zebra .has-sticky-actions .mp-table tbody tr:nth-child(even) td:last-child { background: var(--bg-2); }
.has-sticky-actions .mp-table tbody tr:hover td:last-child { background: rgba(80,154,130,0.07); }
.is-row-zebra .has-sticky-actions .mp-table tbody tr:hover td:last-child { background: rgba(80,154,130,0.10); }
.has-sticky-actions .mp-table tbody tr.is-pending td:last-child { background: #fdf7f2; }
/* Edge shadow appears only while columns are hidden underneath */
.mp-tscroll.is-over:not(.at-end) .has-sticky-actions .mp-table th:last-child,
.mp-tscroll.is-over:not(.at-end) .has-sticky-actions .mp-table td:last-child {
  box-shadow: -10px 0 12px -8px rgba(2,27,17,0.22);
}

/* Both chevrons live in the header row's empty actions cell — the one place in
   the header that carries no label — directly above the pinned row menu. */
.mp-tscroll-nav {
  position: absolute; top: 5px; z-index: 6;
  display: flex; gap: 1px; animation: mp-tscroll-in 140ms ease-out;
}
@keyframes mp-tscroll-in { from { opacity: 0 } to { opacity: 1 } }
.mp-tscroll-btn {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; color: var(--fg-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms, opacity 140ms;
}
.mp-tscroll-btn:hover { background: #fff; border-color: var(--border-subtle); color: var(--mp-deep-forest); }
/* Kept in place but inert at each end, so the pair never shifts position */
.mp-tscroll-btn.is-idle { opacity: 0.22; pointer-events: none; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-table thead th {
  text-align: left;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.mp-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.mp-table tbody tr:last-child td { border-bottom: none; }
.mp-table tbody tr { transition: background 120ms; }
.mp-table tbody tr:hover { background: rgba(80,154,130,0.07); }

/* Zebra-striping variant — toggleable via Tweaks → Row style */
.is-row-zebra .mp-table tbody td { border-bottom: none; }
.is-row-zebra .mp-table tbody tr:nth-child(even) { background: var(--bg-2); }
.is-row-zebra .mp-table tbody tr:hover { background: rgba(80,154,130,0.10); }

.mp-th-sort {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left;
}
.mp-th-sort:hover { color: var(--fg-1); }
.mp-th-sort .mp-ic { opacity: 0.4; transition: opacity 140ms; color: var(--fg-3); }
.mp-th-sort:hover .mp-ic { opacity: 0.7; }
.mp-th-sort.is-active { color: var(--mp-deep-forest); }
.mp-th-sort.is-active .mp-ic { opacity: 1; color: var(--mp-deep-forest); }

/* Numbers, serials and IMEIs. Production defines a monospace .mp-mono but
   never applies it: its table cells render in Figtree with tabular figures,
   which is the styling we match here. Tabular figures keep digits in columns
   without the width and colour shift a monospace stack brings. */
.mp-mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--fg-1); letter-spacing: 0.01em; }

.mp-cell-user { display: flex; align-items: center; gap: 10px; }
.mp-cell-user-name { font-weight: 600; color: var(--fg-1); font-size: 13px; }
.mp-cell-user-email { font-size: 12px; color: var(--fg-3); margin-top: 1px; }

/* Compact density */
.is-density-compact .mp-table thead th { padding: 8px 14px; font-size: 12px; }
.is-density-compact .mp-table tbody td { padding: 9px 14px; font-size: 12.5px; }
.is-density-compact .mp-stat { padding: 14px 14px 12px; }
.is-density-compact .mp-stat-value { font-size: 24px; }
.is-density-compact .mp-card-body { padding: 14px 16px; }
.is-density-compact .mp-card-head { padding: 13px 16px; }
.is-density-compact .mp-content { gap: 16px; padding: 24px; }

/* =====================================================================
   Avatars
   ===================================================================== */
.mp-av {
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.mp-av--cream  { background: var(--mp-cream);  color: var(--mp-deep-forest); }
.mp-av--mist   { background: var(--mp-mist);   color: var(--mp-deep-forest); }
.mp-av--sapling{ background: var(--mp-sapling);color: var(--mp-moss); }

/* =====================================================================
   Progress bars
   ===================================================================== */
.mp-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}
.mp-bar span {
  display: block; height: 100%; border-radius: 3px;
  background: var(--mp-pine);
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-bar--ok span   { background: var(--mp-pine); }
.mp-bar--warn span { background: var(--mp-clay); }
.mp-bar--mid span  { background: var(--mp-clay); }
.mp-bar--high span { background: var(--mp-clay); }
.mp-bar--crit span { background: var(--mp-ember); }
.mp-bar--mist span { background: var(--mp-bright-lime); }

/* Circular usage gauge (SIM detail) */
.mp-ring { position: relative; }
.mp-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mp-ring-pct { font-size: 36px; font-weight: 500; color: var(--fg-1); letter-spacing: -0.02em; line-height: 1; }
.mp-ring-pct i { font-size: 17px; font-weight: 500; color: var(--fg-3); font-style: normal; margin-left: 1px; }
.mp-ring-inf { color: var(--mp-pine); }
.mp-ring-sub { font-size: 12px; color: var(--fg-3); margin-top: 5px; font-weight: 600; letter-spacing: 0.01em; }
.mp-usage-ring-wrap { display: flex; justify-content: center; margin: 10px 0 18px; }
.mp-usage-stats { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }

/* % Used column dot + value */
.mp-pct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mp-pct-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.mp-pct-val {
  font-variant-numeric: tabular-nums;
}
.mp-pct-dot--ok   { background: var(--mp-pine);  box-shadow: 0 0 0 3px rgba(37,103,81,0.10); }
.mp-pct-dot--warn { background: var(--mp-clay);   box-shadow: 0 0 0 3px var(--mp-clay-tint); }
.mp-pct-dot--high { background: var(--mp-clay);  box-shadow: 0 0 0 3px rgba(217,128,66,0.16); }
.mp-pct-dot--crit { background: var(--mp-ember); box-shadow: 0 0 0 3px rgba(207,76,0,0.16); }

/* =====================================================================
   Activity list (used on Dashboard + Alerts) — per-kind icon tints
   ===================================================================== */
.mp-activity { display: flex; flex-direction: column; }
.mp-act {
  display: flex; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.mp-act:last-child { border-bottom: none; }
.mp-act-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--mp-chalk);
  color: var(--mp-charcoal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
/* Tints */
.mp-act--mist  .mp-act-ic { background: var(--mp-mist);                 color: var(--mp-deep-forest); }
.mp-act--lime  .mp-act-ic { background: var(--mp-bright-lime);          color: var(--mp-moss); }
.mp-act--teal  .mp-act-ic { background: rgba(80,154,130,0.18);          color: #1b342c; }
.mp-act--clay  .mp-act-ic { background: rgba(217,128,66,0.16);          color: var(--mp-clay); }
.mp-act--cream .mp-act-ic { background: var(--mp-cream);                color: var(--mp-charcoal); }
.mp-act--ember .mp-act-ic { background: rgba(207,76,0,0.12);            color: var(--mp-ember); }

.mp-act-body { flex: 1; min-width: 0; }
.mp-act-title { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.mp-act-desc { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; line-height: 1.55; }
.mp-act-meta { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.mp-act-time { font-size: 12px; color: var(--fg-3); align-self: flex-start; white-space: nowrap; margin-top: 4px; }

/* =====================================================================
   Filter row
   ===================================================================== */
.mp-filter-row {
  display: flex; align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mp-filter-row .mp-input-wrap { width: 260px; }

/* Search + filters wrapped at the top of a table card.
   Used by SIM Management, User Management, Admin Management and the
   per-group tables inside Data Pools. */
.mp-mem-filters {
  display: flex; align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.mp-mem-filters .mp-input-wrap { flex: 1 1 200px; min-width: 160px; max-width: 400px; }
.mp-mem-filters .mp-input-wrap .mp-input { width: 100%; }
.mp-mem-filters .mp-clear { margin-left: auto; }

/* Page-level actions row */
.mp-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* =====================================================================
   Actions dropdown — icon-only ellipsis button (more SaaS-conventional)
   ===================================================================== */
.mp-actions { position: relative; display: inline-block; }
.mp-actions-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 32px; padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.mp-actions-trigger:hover { background: var(--bg-2); color: var(--fg-1); border-color: var(--border-strong); }

.mp-actions-trigger--icon {
  width: 32px;
  padding: 0;
  color: var(--fg-3);
}
.mp-actions-menu {
  position: absolute; top: calc(100% + 6px); z-index: 50;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  padding: 6px;
  display: flex; flex-direction: column;
}
/* Rendered into <body> at fixed coordinates so no table wrap can clip it */
.mp-actions-menu.mp-actions-menu--fixed { position: fixed; top: auto; bottom: auto; right: auto; left: auto; z-index: 900; }
.mp-actions-menu--right { right: 0; }
.mp-actions-menu--left  { left: 0; }
.mp-actions-item {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--fg-1);
  border-radius: 7px;
  white-space: nowrap;
}
.mp-actions-item:hover { background: var(--bg-2); }
.mp-actions-note { padding: 8px 10px; font-size: 12px; color: var(--fg-3); }

/* =====================================================================
   Pagination
   ===================================================================== */
.mp-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.mp-pg-btn {
  min-width: 30px; height: 30px; padding: 0 10px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 120ms;
  display: inline-flex; align-items: center; justify-content: center;
}
.mp-pg-btn:hover { background: var(--bg-2); color: var(--fg-1); }
.mp-pg-btn.is-active { background: var(--mp-deep-forest); color: #fff; border-color: var(--mp-deep-forest); }
.mp-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =====================================================================
   Empty states (flat icon, no circle)
   ===================================================================== */
.mp-empty {
  padding: 56px 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.mp-empty-ic-flat {
  color: var(--mp-pine);
  margin-bottom: 6px;
}
.mp-empty-title { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.mp-empty-msg { font-size: 13px; color: var(--fg-3); max-width: 320px; }

/* =====================================================================
   FAQ accordion (Support page)
   ===================================================================== */
.mp-faq-group-title {
  font-size: 18px; font-weight: 700; padding: 18px 22px 6px;
  color: var(--fg-1);
}
.mp-faq-item {
  border-top: 1px solid var(--border-subtle);
  padding: 0 22px;
}
.mp-faq-trigger {
  width: 100%;
  background: none; border: none;
  padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 14.5px; font-weight: 600; color: var(--fg-1);
  text-align: left;
  cursor: pointer;
}
.mp-faq-trigger .lc { color: var(--fg-3); transition: transform 200ms; flex-shrink: 0; }
.mp-faq-item.is-open .mp-faq-trigger .lc { transform: rotate(180deg); color: var(--mp-pine); }
.mp-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease;
  font-size: 13.5px; color: var(--fg-3); line-height: 1.65;
}
.mp-faq-item.is-open .mp-faq-body { max-height: 500px; padding-bottom: 18px; }

/* =====================================================================
   Page-level tabs (Environmental Impact: Overview / Partners)
   ===================================================================== */
.mp-page-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-top: -8px;
}

/* Seedling partner CTA strip (Environmental Impact → Overview) */
.mp-seedling-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--mp-mist);
  border: 1px solid var(--mp-light-teal);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 4px;
}
.mp-seedling-strip-ic { color: var(--mp-pine); flex-shrink: 0; }
.mp-seedling-strip-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mp-deep-forest);
}
.mp-seedling-strip-text strong { font-weight: 700; }
.mp-seedling-strip-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--mp-pine);
  background: transparent;
  color: var(--mp-pine);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms;
}
.mp-seedling-strip-cta:hover { background: rgba(37,103,81,0.08); }

@media (max-width: 760px) {
  .mp-seedling-strip { align-items: flex-start; flex-wrap: wrap; }
  .mp-seedling-strip-cta { margin-left: 29px; }
}
.mp-page-tab {
  background: none;
  border: none;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  margin-bottom: -1px;
  transition: color 140ms;
}
.mp-page-tab:hover { color: var(--fg-1); }
.mp-page-tab.is-active {
  color: var(--mp-deep-forest);
}
.mp-page-tab.is-active::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 2.5px;
  background: var(--mp-deep-forest);
  border-radius: 2px 2px 0 0;
}

/* =====================================================================
   Chip row (Partners category filter)
   ===================================================================== */
.mp-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.mp-chip:hover { background: var(--bg-2); color: var(--fg-1); }
.mp-chip.is-active {
  background: var(--mp-deep-forest);
  color: #fff;
  border-color: var(--mp-deep-forest);
}

/* =====================================================================
   Partner cards
   ===================================================================== */
.mp-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .mp-partner-grid { grid-template-columns: 1fr; } }

.mp-partner-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 160ms, transform 200ms;
}
.mp-partner-card:hover { box-shadow: var(--shadow-card-hover); }

.mp-partner-head {
  display: flex; align-items: center; gap: 12px;
}
.mp-partner-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mp-partner-logo--mist  { background: var(--mp-mist);                       color: var(--mp-deep-forest); }
.mp-partner-logo--lime  { background: var(--mp-bright-lime);                color: var(--mp-moss); }
.mp-partner-logo--teal  { background: rgba(80,154,130,0.18);                color: #1b342c; }
.mp-partner-logo--clay  { background: rgba(217,128,66,0.18);                color: var(--mp-clay); }
.mp-partner-logo--cream { background: var(--mp-cream);                      color: var(--mp-deep-forest); }

.mp-partner-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Category pill colors (re-uses the mp-badge sizing, custom tones per cat) */
.mp-badge--cat-carbon    { background: rgba(80,154,130,0.18);         color: #1b342c; }
.mp-badge--cat-utilities { background: rgba(217,128,66,0.16);         color: var(--mp-clay); }
.mp-badge--cat-it        { background: rgba(80,154,130,0.18);         color: #1b342c; }
.mp-badge--cat-benefits  { background: var(--mp-cream);               color: var(--mp-charcoal); }
.mp-partner-head .mp-badge {
  font-size: 13px;
  padding: 4px 9px;
}

.mp-partner-desc {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0;
}

.mp-partner-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-partner-features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  color: var(--fg-1);
  line-height: 1.45;
}
.mp-partner-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mp-bright-lime);
  color: var(--mp-moss);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.mp-partner-trust {
  display: flex; align-items: center; gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--fg-3);
}
.mp-partner-trust .mp-ic { color: var(--mp-pine); }

.mp-partner-cta {
  display: flex; align-items: center; gap: 16px;
  margin-top: 2px;
}
.mp-partner-how {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  text-decoration: none;
}
.mp-partner-how:hover { color: var(--mp-pine); }

/* =====================================================================
   Form 2-column grid + right-aligned card footer (Settings page)
   ===================================================================== */
.mp-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
}
@media (max-width: 800px) {
  .mp-form-grid-2 { grid-template-columns: 1fr; }
}

.mp-form-footer {
  display: flex;
  justify-content: flex-end;
  padding: 18px 32px 24px;
  border-top: 1px solid var(--border-subtle);
}


/* =====================================================================
   Tabs (Settings)
   ===================================================================== */
.mp-tabs {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.mp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--fg-3);
  border-radius: 7px;
}
.mp-tab:hover { color: var(--fg-1); }
.mp-tab.is-active { background: #fff; color: var(--fg-1); box-shadow: var(--shadow-soft); }

/* =====================================================================
   Charts (SVG)
   ===================================================================== */
.mp-chart {
  padding: 4px 0;
  position: relative;
}
.mp-chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.mp-chart-axis { stroke: var(--border-subtle); }
.mp-chart-grid { stroke: var(--border-subtle); stroke-dasharray: 4 5; stroke-width: 1; }
.mp-chart-label,
.mp-chart-y-label,
.mp-chart-x-label {
  font-size: 13px;
  fill: var(--fg-3);
  font-family: var(--font-sans);
  font-weight: 500;
}
.mp-chart-x-label { font-weight: 600; fill: var(--fg-2); }

.mp-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 0 0; }
.mp-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.mp-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

/* =====================================================================
   Subscription cards
   ===================================================================== */
.mp-sub-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: background 120ms, box-shadow 160ms, transform 200ms;
  text-decoration: none;
  color: inherit;
}
.mp-sub-card:hover { background: var(--bg-2); box-shadow: var(--shadow-card-hover); }
.mp-sub-card-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--fg-1); }
.mp-sub-card-meta { display: flex; gap: 18px; font-size: 12.5px; color: var(--fg-3); margin-top: 6px; flex-wrap: wrap; }
.mp-sub-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mp-sub-card-price { font-size: 22px; font-weight: 800; color: var(--fg-1); text-align: right; letter-spacing: -0.01em; }
.mp-sub-card-price small { font-size: 12px; font-weight: 500; color: var(--fg-3); display: block; margin-top: 2px; }

/* SIM row inside subscription detail */
.mp-sim-row {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) minmax(210px, 1fr) 120px 132px;
  gap: 24px;
  align-items: center;
  transition: background 120ms;
}
.mp-sim-row:hover { background: var(--bg-2); }
.mp-sim-row-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mp-sim-row-id { font-weight: 600; color: var(--fg-1); font-size: 14px; }
.mp-sim-row-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.mp-sim-row-user { color: var(--mp-pine); font-weight: 700; text-decoration: none; }
.mp-sim-row-user:hover { text-decoration: underline; }
.mp-sim-row-data { min-width: 0; }
.mp-sim-row-unlimited {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--fg-2);
}
.mp-sim-row-unlimited .mp-ic { color: var(--mp-pine); }
.mp-sim-row-usage-label { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--fg-3); margin-bottom: 5px; }
.mp-sim-row-usage-label strong { color: var(--fg-1); font-weight: 600; white-space: nowrap; }
.mp-sim-row-price { font-size: 17px; font-weight: 800; color: var(--fg-1); white-space: nowrap; text-align: right; }
.mp-sim-row-price small { font-size: 12px; font-weight: 500; color: var(--fg-3); }
.mp-sim-row-action { display: flex; justify-content: flex-end; }

/* =====================================================================
   Subscription UPGRADE flow
   ===================================================================== */
/* Plan cards */
.mp-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mp-plan-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 160ms, border-color 160ms, transform 160ms;
}
.mp-plan-card[role="button"] { cursor: pointer; }
.mp-plan-card[role="button"]:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.mp-plan-card.is-disabled { opacity: 0.55; }
.mp-plan-card.is-selected { border-color: var(--mp-pine); box-shadow: 0 0 0 2px var(--mp-pine); }
.mp-plan-check {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--mp-pine); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mp-plan-label { height: 30px; }
.mp-plan-label-current, .mp-plan-label-new {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; font-size: 12.5px; font-weight: 600; color: #fff;
}
.mp-plan-label-current { background: var(--mp-pine); }
.mp-plan-label-new { background: var(--mp-moss); }
.mp-plan-body { padding: 20px 22px 22px; }
.mp-plan-name { margin: 0; font-size: 19px; font-weight: 700; color: var(--fg-1); letter-spacing: -0.01em; }
.mp-plan-price { font-size: 13.5px; color: var(--fg-3); margin: 6px 0 16px; }
.mp-plan-price span { font-size: 12px; }
.mp-plan-btn {
  width: 100%; height: 40px;
  border-radius: 10px; border: 1px solid var(--border-strong);
  background: #fff; color: var(--fg-1);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms;
}
.mp-plan-btn:hover { background: var(--bg-2); }
.mp-plan-btn.is-selected { background: var(--mp-moss); border-color: var(--mp-moss); color: #fff; }
.mp-plan-note { font-size: 12.5px; color: var(--fg-3); font-weight: 500; padding-top: 2px; }
.mp-plan-foot { font-size: 13px; color: var(--fg-3); text-align: center; margin: 16px 0 4px; }

/* SIM selection rows */
.mp-up-sim {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.mp-up-sim:hover { background: var(--bg-3); }
.mp-up-sim.is-checked { background: rgba(80,154,130,0.10); border-color: var(--mp-pine); }
.mp-up-sim.is-disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.4); }
.mp-up-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 6px; border: 1.5px solid var(--border-strong);
  background: #fff; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, border-color 120ms;
}
.mp-up-check.is-checked { background: var(--mp-pine); border-color: var(--mp-pine); }
.mp-up-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--mp-mist); color: var(--mp-deep-forest);
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms;
}
.mp-up-ic.is-checked { background: var(--mp-pine); color: #fff; }
.mp-up-sim-main { flex: 1; min-width: 0; }
.mp-up-sim-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-up-sim-plan { text-align: right; white-space: nowrap; }
.mp-up-sim-plan-data { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.mp-up-sim-plan-price { font-size: 12.5px; color: var(--fg-3); margin-top: 1px; }
.mp-up-sim-plan-price span { font-size: 12px; }

/* Sticky summary bar */
.mp-up-bar-wrap {
  position: fixed; left: 0; right: 0; bottom: 22px; z-index: 60;
  display: flex; justify-content: center;
  pointer-events: none; padding: 0 16px;
}
.mp-up-bar {
  pointer-events: auto;
  width: 100%; max-width: 880px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 14px 44px rgba(2,27,17,0.18);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.mp-up-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mp-up-bar-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; background: var(--mp-mist); color: var(--mp-deep-forest);
  display: flex; align-items: center; justify-content: center;
}
.mp-up-bar-title { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.mp-up-bar-est { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.mp-up-bar-est strong { color: var(--fg-2); font-weight: 700; }
.mp-up-bar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mp-up-bar-incr { text-align: right; line-height: 1.2; }
.mp-up-bar-incr span { display: block; font-size: 12px; color: var(--fg-3); font-weight: 600; }
.mp-up-bar-incr strong { font-size: 18px; font-weight: 700; color: var(--fg-1); letter-spacing: -0.01em; }

/* Confirm modal */
/* A modal taller than the viewport must stay reachable: the overlay scrolls
   and centres only when there is room, so nothing is clipped off either edge. */
.mp-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2,27,17,0.45);
  display: flex; align-items: safe center; justify-content: center;
  padding: 20px; overflow-y: auto; overscroll-behavior: contain;
  animation: mp-fade 140ms ease-out;
}
@supports not (align-items: safe center) { .mp-modal-overlay { align-items: flex-start; } }
.mp-modal {
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 70px rgba(2,27,17,0.3);
  padding: 26px; width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  animation: mp-pop 160ms cubic-bezier(0.16,1,0.3,1);
}
.mp-modal-title { margin: 0; font-size: 19px; font-weight: 700; color: var(--fg-1); }
.mp-modal-text { font-size: 14px; color: var(--fg-2); margin: 12px 0 0; line-height: 1.5; }
.mp-modal-figs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 16px 0; padding: 14px 16px;
  background: var(--bg-2); border-radius: 12px;
}
.mp-modal-figs span { display: block; font-size: 12px; color: var(--fg-3); font-weight: 600; }
.mp-modal-figs strong { font-size: 18px; font-weight: 700; color: var(--fg-1); letter-spacing: -0.01em; }
.mp-modal-note {
  background: var(--mp-mist); border-radius: 12px;
  padding: 14px 16px; font-size: 12.5px; color: var(--mp-deep-forest); line-height: 1.55;
}
.mp-modal-note p { margin: 0; }
.mp-modal-note p + p { margin-top: 8px; }
.mp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.mp-btn.is-disabled { opacity: 0.5; pointer-events: none; }

@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.mp-spin { animation: mp-spin 800ms linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* Inline success toast on subscription show */
.mp-toast-inline {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(80,154,130,0.12);
  border: 1px solid rgba(80,154,130,0.35);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13.5px; color: var(--mp-deep-forest); line-height: 1.5;
  margin-top: 4px;
}
.mp-toast-inline .mp-ic { color: var(--mp-pine); flex-shrink: 0; margin-top: 1px; }

@media (max-width: 1100px) {
  .mp-plan-grid { grid-template-columns: 1fr; }
  .mp-up-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .mp-up-bar-right { justify-content: space-between; }
}

@media (max-width: 1100px) {
  .mp-sim-row-price, .mp-sim-row-action { text-align: left; justify-content: flex-start; }
}

/* Section subhead (under a page head) — 22px secondary heading */
.mp-subhead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mp-subhead-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mp-deep-forest);
  margin: 0;
}
.mp-subhead-aside { display: flex; gap: 10px; }

/* Sustainability commitment band (Overview) — breakout 40px radius + gradient */
.mp-commit {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--grad-feature-mint);
  border-radius: var(--radius-rounded-section);
  padding: 32px 36px;
}
.mp-commit-icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  color: var(--mp-deep-forest);
  display: flex; align-items: center; justify-content: center;
}
.mp-commit-title {
  font-size: 18px; font-weight: 700; color: var(--mp-deep-forest); margin: 0 0 6px;
}
.mp-commit-body {
  font-size: 13.5px; color: var(--mp-deep-forest); opacity: 0.85;
  line-height: 1.6;
}

/* =====================================================================
   Profile detail block (SIM show / User show)
   ===================================================================== */
.mp-profile-block {
  background: var(--bg-2);
  border-radius: 14px;
  padding: 22px;
}
.mp-profile-row { display: flex; align-items: center; gap: 22px; }
.mp-profile-av {
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--mp-mist);
  color: var(--mp-deep-forest);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
}
.mp-profile-name { font-size: 20px; font-weight: 800; color: var(--fg-1); letter-spacing: -0.01em; }
.mp-profile-meta { font-size: 13px; color: var(--fg-3); margin-top: 4px; }

.mp-kv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px;
}
.mp-kv-label { font-size: 12px; color: var(--fg-3); margin-bottom: 4px; font-weight: 500; }
.mp-kv-value { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.mp-kv-value--ok    { color: var(--mp-pine); }
.mp-kv-value--ember { color: var(--mp-ember); }

/* =====================================================================
   QR display
   ===================================================================== */
.mp-qr {
  background: var(--bg-2);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  gap: 22px;
  align-items: center;
}
.mp-qr-img {
  width: 140px; height: 140px;
  background: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}

/* Help links list (right rail) */
.mp-help-card { padding: 20px 22px; }
.mp-help-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
/* Works as both <a> and <button> */
.mp-help-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--fg-1);
  width: 100%; text-align: left; cursor: pointer;
  transition: background 120ms;
}
.mp-help-link:hover { background: var(--mp-mist); border-color: transparent; }
.mp-help-link .lc { color: var(--mp-pine); }

/* lucide stroke override + wrapper ------------------------------------------
   .mp-ic is the sized wrapper, the SVG inside fills it. Lucide replaces our
   <i data-lucide> with an <svg> tag — without this rule it would render at
   24×24 regardless of how we tried to size the placeholder. */
.mp-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.mp-ic > svg,
.mp-ic > i {
  width: 100% !important;
  height: 100% !important;
  display: block;
  stroke-width: 1.75;
}
svg[data-lucide] { display: inline-block; vertical-align: middle; }

/* Demo popover — appears near the triggering button */
.mp-demo-pop {
  position: fixed; z-index: 9999;
  background: var(--mp-deep-forest); color: #fff;
  padding: 10px 16px; border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  pointer-events: none;
  animation: demoPopIn 200ms ease-out, demoPopOut 300ms ease-in 2.2s forwards;
  max-width: 340px;
}
.mp-demo-pop svg { flex-shrink: 0; }
.mp-demo-pop-label { color: rgba(255,255,255,0.88); font-size: 13px; font-weight: 700; }
.mp-demo-pop-body { color: rgba(255,255,255,0.88); font-weight: 500; }
@keyframes demoPopIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes demoPopOut { from { opacity: 1; } to { opacity: 0; } }

/* Toast (legacy, still used by service toasts) */
.mp-toast {
  position: fixed; top: 24px; right: 24px; z-index: 80;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--fg-1);
}
.mp-toast .lc { color: var(--mp-pine); }

/* ---- SIM actions list (inside Manage SIM panel) — matches expander tiles ---- */
.mp-action-group { margin-bottom: 18px; }
.mp-action-group-title {
  font-size: 13.5px; font-weight: 700;
  color: var(--mp-deep-forest); margin: 2px 2px 10px;
}
.mp-action-list { display: flex; flex-direction: column; gap: 12px; }
.mp-action-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; background: #fff; cursor: pointer; text-align: left;
  border: 1px solid var(--border-subtle); border-radius: 14px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--fg-1);
  transition: background 120ms;
}
.mp-action-row:hover { background: var(--bg-2); }
.mp-action-ic-lead { color: var(--mp-pine); flex-shrink: 0; }
.mp-action-label { flex: 1; }
.mp-action-chev { color: var(--fg-3); flex-shrink: 0; }


/* =====================================================================
   SIM DETAIL redesign — hero, macro states, services, Manage SIM drawer
   ===================================================================== */

/* Filled danger button (used for the Block confirm) */
.mp-btn--danger-solid { background: var(--mp-ember); color: #fff; }
.mp-btn--danger-solid:hover { filter: brightness(1.08); }

/* ---- SIM summary hero ---- */
.mp-sim-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px 20px; flex-wrap: wrap;
  padding: 20px 24px;
}
.mp-sim-hero-eyebrow {
  font-family: var(--font-sans);
  font-style: normal; font-weight: 700;
  font-size: 13.5px;
  color: var(--fg-3);
}
.mp-sim-hero-number {
  margin: 6px 0 0;
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mp-deep-forest);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.mp-sim-hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; font-size: 13.5px; color: var(--fg-2);
}

/* collapsible detail disclosure + body */
.mp-sim-banner-wrap { padding: 4px 24px 16px; }
.mp-sim-disclosure {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 13px 24px; background: var(--bg-2);
  border: none; border-top: 1px solid var(--border-subtle);
  cursor: pointer; font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; color: var(--mp-pine);
  text-align: left; transition: background 120ms;
}
.mp-sim-disclosure:hover { background: var(--bg-3); }
/* No transition: lucide rewrites this icon's SVG on every render, so a
   transform transition is discarded at its start value and the chevron freezes
   pointing the wrong way. Instant rotation is correct in every state. */
.mp-sim-disclosure .mp-ic { color: var(--mp-pine); transform: rotate(0deg); }
.mp-sim-disclosure.is-open .mp-ic { transform: rotate(180deg); }
.mp-sim-details { padding: 22px 24px 24px; border-top: 1px solid var(--border-subtle); }

/* user-page SIM card footer: disclosure toggle + manage link share one strip */
.mp-sim-cardfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-2); border-top: 1px solid var(--border-subtle);
  padding-right: 22px; flex-wrap: wrap;
}
.mp-sim-cardfoot .mp-sim-disclosure { border-top: none; background: transparent; width: auto; flex: 1; color: var(--fg-2); font-weight: 600; font-size: 15px; }
.mp-sim-cardfoot .mp-sim-disclosure .mp-coll-ic, .mp-sim-cardfoot .mp-sim-disclosure i, .mp-sim-cardfoot .mp-sim-disclosure svg { color: var(--fg-3); }
.mp-sim-cardfoot .mp-sim-disclosure:hover { background: transparent; color: var(--mp-deep-forest); }
.mp-sim-cardfoot .mp-glance-link { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; font-size: 15px; }
.mp-sim-hero-meta strong { color: var(--fg-1); font-weight: 700; }
.mp-dot-sep { color: var(--border-strong); }
.mp-sim-hero-actions { display: flex; align-items: center; flex-shrink: 0; }
.mp-sim-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-sim-actions-div { width: 1px; align-self: stretch; min-height: 24px; background: var(--border-subtle); margin: 0 3px; }

/* ---- Macro status badge ---- */
.mp-macro-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap;
}
.mp-macro-badge--active    { background: var(--mp-mist);            color: var(--mp-deep-forest); }
.mp-macro-badge--scheduled { background: var(--mp-clay-tint);       color: var(--mp-clay-ink); }
.mp-macro-badge--paused    { background: var(--bg-3);               color: var(--fg-2); }
.mp-macro-badge--blocked   { background: rgba(207,76,0,0.12);       color: var(--mp-ember); }
/* Clay means pending, and matches the clay StatusBadge so a status reads the
   same colour in a hero and in a table row. */
.mp-macro-badge--clay      { background: rgba(217,128,66,0.15);     color: var(--mp-clay-ink); }

/* ---- Macro page banner ---- */
.mp-macro-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px; border: 1px solid;
}
.mp-macro-banner .mp-ic { flex-shrink: 0; }
.mp-macro-banner-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; }
.mp-macro-banner-text strong { font-weight: 700; }
.mp-macro-banner--scheduled { background: var(--mp-clay-tint-soft); border-color: var(--mp-clay-line); color: var(--mp-clay-ink); }
.mp-macro-banner--scheduled .mp-ic { color: var(--mp-clay-ink); }
.mp-macro-banner--paused { background: var(--bg-2); border-color: var(--border-strong); color: var(--fg-2); }
.mp-macro-banner--paused .mp-ic { color: var(--fg-3); }
.mp-macro-banner--blocked { background: rgba(207,76,0,0.07); border-color: rgba(207,76,0,0.30); color: var(--mp-ember); }
.mp-macro-banner--blocked .mp-ic { color: var(--mp-ember); }
.mp-macro-banner .mp-btn { flex-shrink: 0; }

/* ---- Collapsible section ---- */
.mp-coll { border: 1px solid var(--border-subtle); border-radius: 14px; background: #fff; overflow: visible; }
.mp-coll + .mp-coll { margin-top: 12px; }
.mp-coll-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: #fff; border: none; cursor: pointer;
  border-radius: 14px 14px 0 0;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  color: var(--fg-1); text-align: left;
  transition: background 120ms;
}
.mp-coll:not(.is-open) .mp-coll-head { border-radius: 14px; }
.mp-coll-head:hover { background: var(--bg-2); }
.mp-coll-ic { color: var(--mp-pine); flex-shrink: 0; }
.mp-coll-title { flex: 1; }
.mp-coll-meta {
  font-size: 12px; font-weight: 700; color: var(--fg-3);
  background: #fff; border: 1px solid var(--border-subtle);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.mp-coll-caret { color: var(--fg-3); transition: transform 220ms cubic-bezier(0.4,0,0.2,1); }
.mp-coll.is-open .mp-coll-caret { transform: rotate(180deg); }
.mp-coll-body { padding: 4px 16px 8px; }

/* ---- Service rows ---- */
.mp-svc-list { display: flex; flex-direction: column; }
.mp-svc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--border-subtle);
}
.mp-svc-row:last-child { border-bottom: none; }
.mp-svc-ic {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 160ms, color 160ms;
}
.mp-svc-ic--on  { background: var(--mp-mist); color: var(--mp-deep-forest); }
.mp-svc-ic--off { background: var(--bg-3);    color: var(--fg-3); }
.mp-svc-text { flex: 1; min-width: 0; }
.mp-svc-label { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.mp-svc-sub { font-size: 12px; color: var(--fg-3); margin-top: 1px; }
.mp-svc-cost { position: relative; display: inline-flex; color: var(--mp-clay); flex-shrink: 0; cursor: help; outline: none; }
.mp-cost-tip {
  position: absolute; bottom: calc(100% + 8px); right: -4px;
  width: 216px; background: var(--mp-deep-forest); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left;
  padding: 9px 11px; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(2,27,17,0.25);
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease; z-index: 30;
}
.mp-svc-cost:hover .mp-cost-tip,
.mp-svc-cost:focus .mp-cost-tip { opacity: 1; transform: none; }
.mp-svc-list.is-locked .mp-svc-row { opacity: 0.5; }

/* ---- Toggle pill ---- */
.mp-toggle {
  position: relative; flex-shrink: 0;
  width: 64px; height: 28px; border-radius: 999px;
  border: none; cursor: pointer; padding: 0;
  background: var(--bg-3);
  transition: background 160ms;
}
.mp-toggle.is-on { background: var(--mp-pine); }
.mp-toggle.is-disabled { cursor: not-allowed; opacity: 0.6; }
.mp-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: left 180ms cubic-bezier(0.16,1,0.3,1);
}
.mp-toggle.is-on .mp-toggle-knob { left: 39px; }
.mp-toggle-label {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
}
.mp-toggle.is-on .mp-toggle-label { left: 11px; color: #fff; }
.mp-toggle:not(.is-on) .mp-toggle-label { right: 9px; color: var(--fg-3); }

/* ---- Read-only state pill (Services at a glance) ---- */
.mp-state-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--bg-3); color: var(--fg-3);
}
.mp-state-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); }
.mp-state-pill.is-on { background: var(--mp-mist); color: var(--mp-deep-forest); }
.mp-state-pill.is-on::before { background: var(--mp-pine); }

/* ---- Services at a glance card head ---- */
.mp-glance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-glance-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--mp-pine);
  cursor: pointer; background: none; border: none; padding: 6px 8px; border-radius: 8px;
}
.mp-glance-link:hover { background: rgba(37,103,81,0.08); }

/* ---- Manage SIM drawer ---- */
.mp-drawer-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(2,27,17,0.42);
  animation: mp-fade 160ms ease-out;
}
.mp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: 460px; max-width: calc(100vw - 24px);
  background: var(--bg-2);
  display: flex; flex-direction: column;
  box-shadow: -18px 0 50px rgba(2,27,17,0.22);
  animation: mp-slide-in 280ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes mp-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.mp-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 22px; background: #fff; border-bottom: 1px solid var(--border-subtle);
}
.mp-drawer-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--mp-deep-forest); }
.mp-drawer-sub { font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.mp-drawer-x {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--border-subtle); background: #fff; color: var(--fg-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mp-drawer-x:hover { background: var(--bg-2); color: var(--fg-1); }
.mp-drawer-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; }
.mp-drawer-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; background: #fff; border-top: 1px solid var(--border-subtle);
}

/* drawer locked banner */
.mp-svc-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; margin-bottom: 16px;
}
.mp-svc-banner .mp-ic { flex-shrink: 0; margin-top: 1px; }
.mp-svc-banner--paused { background: var(--bg-3); color: var(--fg-2); }
.mp-svc-banner--paused .mp-ic { color: var(--fg-3); }
.mp-svc-banner--blocked { background: rgba(207,76,0,0.08); color: var(--mp-ember); }
.mp-svc-banner--blocked .mp-ic { color: var(--mp-ember); }

/* ---- Diff list (save confirm modal) ---- */
.mp-diff {
  list-style: none; margin: 16px 0 0; padding: 8px 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-2); border-radius: 12px;
}
.mp-diff li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; }
.mp-diff-label { flex: 1; font-weight: 600; color: var(--fg-1); }
.mp-diff-arrow { color: var(--fg-3); }
.mp-diff-to { font-weight: 700; }
.mp-diff li.is-on .mp-diff-to { color: var(--mp-pine); }
.mp-diff li.is-off .mp-diff-to { color: var(--fg-3); }

/* modal note tones + icon header */
.mp-modal-note--warn { background: var(--mp-clay-tint); color: var(--mp-clay-ink); display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; }
.mp-modal-note--warn .mp-ic { flex-shrink: 0; margin-top: 1px; color: var(--mp-clay-ink); }
.mp-modal-note--danger { background: rgba(207,76,0,0.08); color: var(--mp-ember); display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; }
.mp-modal-note--danger .mp-ic { flex-shrink: 0; margin-top: 1px; color: var(--mp-ember); }
.mp-modal-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mp-modal-ic--neutral { background: var(--mp-chalk); border: 1px solid var(--mp-cream); color: var(--mp-charcoal); }
.mp-modal-ic--warn { background: var(--mp-clay-tint); color: var(--mp-clay-ink); }
.mp-modal-ic--danger { background: rgba(207,76,0,0.10); color: var(--mp-ember); }

@media (max-width: 860px) {
  .mp-sim-hero-actions { width: 100%; }
  .mp-sim-actions { width: 100%; }
}

/* Sort header: always show both arrows, highlight the active direction */
.mp-sort-pair { display: inline-flex; flex-direction: column; margin-left: 4px; line-height: 0; gap: -2px; vertical-align: middle; }
.mp-sort-pair .mp-ic { color: var(--border-strong); }
.mp-sort-pair .is-sort-on { color: var(--mp-pine); }

/* Not applicable: the column's question cannot apply to this row (% used on
   an Unlimited plan). Distinct from an empty cell, which stays a dash. */
.mp-na { font-size: 13px; color: var(--fg-3); font-weight: 600; }