/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — APPLICATION SHELL LAYOUT

   The shell is a two-column CSS grid: a fixed top navigation bar, a left navigation
   rail, and a scrolling content column. Every dimension comes from a token, so the
   rail can be widened or the bar heightened in tokens.css without touching a rule
   here.

   LOGICAL PROPERTIES THROUGHOUT
   ----------------------------
   `inset-inline-start`, `margin-inline`, `border-inline-end`, `padding-inline` —
   never `left`/`right`. This is what makes the Arabic layout a `dir="rtl"` attribute
   rather than a second stylesheet: the rail moves to the right, the breadcrumb
   chevrons reverse and the drawer slides from the other edge with no override at all.
   `rtl.css` then handles only the handful of cases logical properties cannot express.

   RESPONSIVE MODEL — four bands, desktop-first
   -------------------------------------------
     ≥1280px  desktop     rail expanded, full content width
     ≥1024px  laptop      rail expanded, tighter gutters
     ≥768px   tablet      rail collapsed to icons, expandable
     <768px   mobile      rail becomes an overlay drawer, bottom-safe insets
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-root { min-height: 100vh; }

.mdp-shell {
  display: grid;
  grid-template-columns: var(--mdp-sidenav-w) minmax(0, 1fr);
  grid-template-rows: var(--mdp-topnav-h) minmax(0, 1fr);
  grid-template-areas:
    'brand  topnav'
    'sidenav main';
  min-height: 100vh;
}
/* `minmax(0, 1fr)` above, not `1fr`, is what stops a wide table inside the content
   column from pushing the grid past the viewport. This one keyword is the whole
   "no horizontal scrolling" guarantee at the shell level. */

.mdp-shell[data-nav-collapsed='true'] { grid-template-columns: var(--mdp-sidenav-w-collapsed) minmax(0, 1fr); }

/* ═══════════════════════════════════════════════════════════════════════════════
   TOP NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-brandbar {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  padding-inline: var(--mdp-sp-4);
  background: var(--mdp-bg-raised);
  border-inline-end: 1px solid var(--mdp-border-subtle);
  border-block-end: 1px solid var(--mdp-border-subtle);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--mdp-z-topnav);
  min-width: 0;
}

.mdp-brand {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-width: 0;
  color: var(--mdp-text-strong);
}
.mdp-brand:hover { text-decoration: none; }
.mdp-brand-mark {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-brand);
  color: var(--mdp-brand-contrast);
  font-weight: var(--mdp-fw-black);
  font-size: var(--mdp-fs-sm);
  letter-spacing: -0.02em;
}
.mdp-brand-text { min-width: 0; line-height: 1.1; }
.mdp-brand-name {
  display: block;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: -0.01em;
}
.mdp-brand-sub {
  display: block;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
}

.mdp-topnav {
  grid-area: topnav;
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding-inline: var(--mdp-sp-4) var(--mdp-sp-5);
  background: var(--mdp-bg-raised);
  border-block-end: 1px solid var(--mdp-border-subtle);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--mdp-z-topnav);
  min-width: 0;
}
.mdp-topnav-spacer { flex: 1 1 auto; min-width: var(--mdp-sp-2); }
.mdp-topnav-group { display: flex; align-items: center; gap: var(--mdp-sp-1); min-width: 0; }

/* Back to the parent platform. A quiet utility, not a call to action: it is the way out
   of the product, so it is sized like a chip and coloured like secondary text rather than
   competing with whatever primary action the screen below it is offering. The border is
   `--mdp-border-subtle` in both themes, which is what keeps it legible on the black/gold
   dark surface without becoming a second button beside the search field.

   `white-space: nowrap` because the label is a brand name and a wrapped "TradeFinance /
   AI" is worse than an ellipsis. Nothing here is a physical direction, so RTL needs no
   override: the flex order follows the writing direction and the glyph leads the label in
   Arabic exactly as it does in English. */
.mdp-platform-back {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex: 0 0 auto;
  min-width: 0;
  max-width: 16rem;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-field-bg);
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  white-space: nowrap;
  transition: background var(--mdp-dur-fast) var(--mdp-ease),
              border-color var(--mdp-dur-fast) var(--mdp-ease),
              color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-platform-back:hover {
  background: var(--mdp-surface-inset);
  border-color: var(--mdp-border-strong);
  color: var(--mdp-text-strong);
  text-decoration: none;
}
.mdp-platform-back svg { flex: 0 0 auto; }
.mdp-platform-back-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The search launcher. A button, not an input: the actual search is an overlay with
   its own focus management, and a fake input that steals focus on click is worse for
   a keyboard user than an honest button. */
.mdp-search-launcher {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-width: 0;
  max-width: 30rem;
  flex: 1 1 22rem;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  background: var(--mdp-field-bg);
  border: 1px solid var(--mdp-field-border);
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-text-faint);
  font-size: var(--mdp-fs-sm);
  text-align: start;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease), background var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-search-launcher:hover { border-color: var(--mdp-border-strong); color: var(--mdp-text-muted); }
.mdp-search-launcher-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdp-kbd {
  flex: 0 0 auto;
  padding: 1px var(--mdp-sp-2);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-xs);
  background: var(--mdp-surface-inset);
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ── Icon buttons in the bar ─────────────────────────────────────────────────── */
.mdp-iconbtn {
  position: relative;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-text-muted);
  transition: background var(--mdp-dur-fast) var(--mdp-ease), color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-iconbtn:hover { background: var(--mdp-surface-inset); color: var(--mdp-text); }
.mdp-iconbtn[aria-pressed='true'], .mdp-iconbtn[aria-expanded='true'] {
  background: var(--mdp-surface-inset);
  color: var(--mdp-text-strong);
}
.mdp-iconbtn svg { width: 18px; height: 18px; stroke-width: 1.7; }

/* The notification badge. `min-width` with a pill radius so "3" is a circle and
   "99+" is a lozenge without two separate rules. */
.mdp-badge-dot {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-danger);
  /* White, literally, and not `--mdp-text-inverse`: that token is the inverse of the page
     text and therefore near-black in the dark theme, which on this red would fail contrast.
     The badge's foreground is fixed because its background is fixed — the danger red is the
     same in both themes, so the text on it has no reason to change. */
  color: #fff;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--mdp-bg-raised);
}

/* ── Status indicator ────────────────────────────────────────────────────────── */
.mdp-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-1) var(--mdp-sp-3);
  border-radius: var(--mdp-r-pill);
  border: 1px solid var(--mdp-border);
  background: var(--mdp-surface-inset);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
  white-space: nowrap;
}
.mdp-status-led { width: 7px; height: 7px; border-radius: 50%; background: var(--mdp-neutral); flex: 0 0 auto; }
.mdp-status-indicator[data-tone='success'] .mdp-status-led { background: var(--mdp-success); }
.mdp-status-indicator[data-tone='warn'] .mdp-status-led { background: var(--mdp-warn); }
.mdp-status-indicator[data-tone='danger'] .mdp-status-led { background: var(--mdp-danger); }
.mdp-status-indicator[data-tone='info'] .mdp-status-led { background: var(--mdp-info); }

/* ── Company switch (placeholder surface — see topnav.js) ────────────────────── */
.mdp-company-switch {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  max-width: 15rem;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  border: 1px solid var(--mdp-border-subtle);
  background: var(--mdp-surface-inset);
  color: var(--mdp-text);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  min-width: 0;
}
.mdp-company-switch:hover:not([aria-disabled='true']) { border-color: var(--mdp-border-strong); }
.mdp-company-switch[aria-disabled='true'] { opacity: .82; }

/* ── User menu ───────────────────────────────────────────────────────────────── */
/* `.mdp-popover` is the positioning context every dropdown panel is placed against; the
   user menu is one of them and keeps its own class only because its trigger is styled
   differently from a plain icon button. */
.mdp-usermenu, .mdp-popover { position: relative; flex: 0 0 auto; }
.mdp-usermenu-trigger {
  display: flex; align-items: center; gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-1) var(--mdp-sp-2) var(--mdp-sp-1) var(--mdp-sp-1);
  border-radius: var(--mdp-r-pill);
  border: 1px solid var(--mdp-border-subtle);
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-usermenu-trigger:hover { border-color: var(--mdp-border-strong); }

.mdp-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--mdp-sp-2));
  inset-inline-end: 0;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2 * var(--mdp-sp-4)));
  padding: var(--mdp-sp-2);
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  box-shadow: var(--mdp-shadow-lg);
  z-index: var(--mdp-z-modal);
}
.mdp-menu-head { padding: var(--mdp-sp-2) var(--mdp-sp-3) var(--mdp-sp-3); border-block-end: 1px solid var(--mdp-border-subtle); margin-block-end: var(--mdp-sp-2); }
.mdp-menu-name { font-weight: var(--mdp-fw-semibold); color: var(--mdp-text-strong); }
.mdp-menu-meta { font-size: var(--mdp-fs-xs); color: var(--mdp-text-faint); }
.mdp-menu-item {
  display: flex; align-items: center; gap: var(--mdp-sp-3);
  width: 100%;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-text);
  font-size: var(--mdp-fs-sm);
  text-align: start;
}
.mdp-menu-item:hover { background: var(--mdp-surface-inset); text-decoration: none; color: var(--mdp-text-strong); }
.mdp-menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mdp-menu-sep { height: 1px; background: var(--mdp-border-subtle); margin: var(--mdp-sp-2) 0; }
/* RESERVED. A heading inside a dropdown, for the menu that needs to separate two kinds of
   entry — the company switcher, once a customer can belong to more than one company. Today's
   menus are short enough that `.mdp-menu-sep` is the right divider, so nothing uses this. */
.mdp-menu-group-label {
  padding: var(--mdp-sp-2) var(--mdp-sp-3) var(--mdp-sp-1);
  font-size: var(--mdp-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
}
.mdp-menu-item[aria-checked='true']::after,
.mdp-menu-item[aria-current='true']::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mdp-brand);
  margin-inline-start: auto;
}
/* The "leaves this application" marker, pushed to the trailing edge. It sits before the
   dot selector's `margin-inline-start: auto` would apply, and only one of the two is ever
   present on a row, so they cannot fight over the same space. */
.mdp-menu-ext { margin-inline-start: auto; color: var(--mdp-text-faint); display: inline-flex; }

/* The mobile rail toggle. Present in the markup at every width so the bar's contents do not
   change between bands, and shown only where the rail is a drawer — above 768px the rail is
   a permanent grid column and a button to open it would open nothing. */
.mdp-nav-toggle { display: none; }
@media (max-width: 767px) {
  .mdp-nav-toggle { display: grid; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LEFT NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-sidenav {
  grid-area: sidenav;
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  padding: var(--mdp-sp-4) var(--mdp-sp-3) var(--mdp-sp-6);
  background: var(--mdp-bg-raised);
  border-inline-end: 1px solid var(--mdp-border-subtle);
  position: sticky;
  inset-block-start: var(--mdp-topnav-h);
  align-self: start;
  block-size: calc(100vh - var(--mdp-topnav-h));
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--mdp-z-sidenav);
}

.mdp-nav-section { margin-block-start: var(--mdp-sp-4); }
.mdp-nav-section:first-child { margin-block-start: 0; }
.mdp-nav-section-label {
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
}

.mdp-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  min-width: 0;
  transition: background var(--mdp-dur-fast) var(--mdp-ease), color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-nav-item:hover { background: var(--mdp-surface-inset); color: var(--mdp-text); text-decoration: none; }
.mdp-nav-item[aria-current='page'] {
  background: var(--mdp-brand-soft);
  color: var(--mdp-text-strong);
  font-weight: var(--mdp-fw-semibold);
}
.mdp-nav-item[aria-current='page']::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 20%;
  width: 3px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-brand);
}
.mdp-nav-item[aria-disabled='true'] { opacity: .45; pointer-events: none; }
.mdp-nav-icon { flex: 0 0 auto; width: 18px; height: 18px; }
.mdp-nav-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.mdp-nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdp-nav-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px var(--mdp-sp-2);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-inset);
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mdp-nav-count[data-tone='brand'] { background: var(--mdp-brand-soft); color: var(--mdp-brand); }
.mdp-nav-count[data-tone='danger'] { background: var(--mdp-danger-soft); color: var(--mdp-danger); }
.mdp-nav-tag {
  flex: 0 0 auto;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mdp-text-faint);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-xs);
  padding: 0 4px;
}

/* ── Expandable groups ────────────────────────────────────────────────────────
   A parent entry that owns children (Integrations → Microsoft) is a link AND a disclosure: the
   row still opens the screen it always opened, and the chevron beside it shows or hides the
   children without leaving the page. Two controls and not one, because a disclosure that
   replaced the link would take away a screen the rail has always reached — and they are
   siblings rather than nested, because a button inside an anchor is not valid markup.

   Everything below is logical (`inset-inline`, `padding-inline`, `border-inline`), so Arabic
   needs no override: the guide line and the indent move to the other side on their own. */
.mdp-nav-parent { display: flex; align-items: center; gap: var(--mdp-sp-1); }
.mdp-nav-parent > .mdp-nav-item { flex: 1 1 auto; }
.mdp-nav-chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--mdp-r-xs);
  background: none;
  color: var(--mdp-text-faint);
  cursor: pointer;
  transition: background var(--mdp-dur-fast) var(--mdp-ease), color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-nav-chevron:hover { background: var(--mdp-surface-inset); color: var(--mdp-text); }
.mdp-nav-chevron-glyph { display: inline-flex; }
.mdp-nav-chevron svg { width: 14px; height: 14px; stroke-width: 1.9; }

/* The children, and the hairline that says they belong to the row above. The margin puts that
   line under the parent's icon, which is where the eye already is. */
.mdp-nav-children {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  margin-block-start: var(--mdp-sp-1);
  margin-inline-start: calc(var(--mdp-sp-3) + 7px);
  padding-inline-start: var(--mdp-sp-2);
  border-inline-start: 1px solid var(--mdp-border-subtle);
}
.mdp-nav-group[data-expanded='false'] > .mdp-nav-children { display: none; }

/* The child row. One weight lighter than a top-level entry, which is the whole visual difference
   apart from the indent: the parent above it is the heading of the pair, and a child that shouted
   as loudly would flatten the hierarchy the group exists to show. The active state is untouched —
   an open child still takes the accent bar and the semibold label every other entry takes. */
.mdp-nav-child { font-weight: var(--mdp-fw-normal); }

/* RESERVED. Pins a block to the bottom of the sidebar column, for whatever the navigation
   eventually needs to keep out of the scrolling list — a storage meter, a plan prompt, a
   release note. `margin-block-start: auto` only works on a flex child of the sidenav, which
   is why the hook belongs here rather than being improvised at the call site later. */
.mdp-sidenav-foot { margin-block-start: auto; padding-block-start: var(--mdp-sp-4); }

/* Collapsed rail: labels, counts and section headings are hidden, the icon centres,
   and the accessible name survives because it lives on the element's `title` and
   `aria-label`, not in the hidden span alone. */
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-label,
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-count,
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-tag,
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-section-label,
.mdp-shell[data-nav-collapsed='true'] .mdp-brand-text { display: none; }
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-item { justify-content: center; padding-inline: 0; }
.mdp-shell[data-nav-collapsed='true'] .mdp-sidenav { padding-inline: var(--mdp-sp-2); }
/* The chevron has nothing to point at in an icon-only rail — there is no label to reveal — so it
   goes, and the children are shown unconditionally instead. A collapsed group here would put
   Microsoft behind a control that is not drawn, which is a screen the rail can no longer reach. */
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-chevron { display: none; }
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-children {
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}
.mdp-shell[data-nav-collapsed='true'] .mdp-nav-group[data-expanded='false'] > .mdp-nav-children { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--mdp-sp-5) var(--mdp-sp-6) var(--mdp-sp-12);
}
.mdp-main > * { min-width: 0; }
.mdp-container { width: 100%; max-width: var(--mdp-content-max); margin-inline: auto; min-width: 0; }

.mdp-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--mdp-sp-4);
  margin-block-end: var(--mdp-sp-6);
}
.mdp-page-head-text { flex: 1 1 20rem; min-width: 0; }
.mdp-page-title { font-size: var(--mdp-fs-2xl); font-weight: var(--mdp-fw-bold); }
.mdp-page-sub { margin-block-start: var(--mdp-sp-2); color: var(--mdp-text-muted); font-size: var(--mdp-fs-sm); max-width: 62ch; }
.mdp-page-actions { display: flex; flex-wrap: wrap; gap: var(--mdp-sp-2); }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────────── */
.mdp-breadcrumbs { margin-block-end: var(--mdp-sp-4); }
.mdp-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mdp-sp-2); }
.mdp-breadcrumbs li { display: flex; align-items: center; gap: var(--mdp-sp-2); font-size: var(--mdp-fs-xs); color: var(--mdp-text-faint); min-width: 0; }
.mdp-breadcrumbs a { color: var(--mdp-text-muted); }
.mdp-breadcrumbs a:hover { color: var(--mdp-text); }
.mdp-breadcrumbs [aria-current='page'] { color: var(--mdp-text); font-weight: var(--mdp-fw-medium); }
/* The separator is generated content and marked aria-hidden by the component, so a
   screen reader reads "Dashboard, Trade Network" rather than "Dashboard slash". */
.mdp-crumb-sep { color: var(--mdp-text-dim, var(--mdp-text-faint)); }

/* ── Section grids used by every page ────────────────────────────────────────── */
.mdp-grid { display: grid; gap: var(--mdp-sp-4); }
.mdp-grid[data-cols='2'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mdp-grid[data-cols='3'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.mdp-grid[data-cols='4'] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.mdp-stack { display: flex; flex-direction: column; gap: var(--mdp-sp-4); }
.mdp-stack[data-gap='sm'] { gap: var(--mdp-sp-2); }
.mdp-stack[data-gap='lg'] { gap: var(--mdp-sp-8); }
.mdp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mdp-sp-3); min-width: 0; }
.mdp-row[data-justify='between'] { justify-content: space-between; }
.mdp-row[data-align='start'] { align-items: flex-start; }

/* Two-column page layout (main + aside) that collapses to one on tablet. */
.mdp-split { display: grid; gap: var(--mdp-sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .mdp-split { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL LOADING LAYER · OFFLINE INDICATOR
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-loading-layer {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: var(--mdp-z-loading);
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}
.mdp-loading-layer[hidden] { display: none; }
.mdp-loading-layer::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 40%;
  background: linear-gradient(90deg, transparent, var(--mdp-brand), transparent);
  animation: mdp-indeterminate 1.1s var(--mdp-ease) infinite;
}
@keyframes mdp-indeterminate {
  from { transform: translateX(-100%); }
  to { transform: translateX(320%); }
}

.mdp-offline {
  position: fixed;
  inset-block-end: var(--mdp-sp-4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: var(--mdp-z-toast);
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-2) var(--mdp-sp-4);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-warn-soft);
  border: 1px solid var(--mdp-warn);
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  box-shadow: var(--mdp-shadow-md);
}
.mdp-offline[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Laptop — tighter gutters, same structure. */
@media (max-width: 1279px) {
  .mdp-main { padding: var(--mdp-sp-4) var(--mdp-sp-5) var(--mdp-sp-10); }
}

/* Tablet — the rail collapses to icons by default. The customer can still expand it;
   `data-nav-collapsed` is authored state, this is only the default. */
@media (max-width: 1023px) {
  .mdp-shell { grid-template-columns: var(--mdp-sidenav-w-collapsed) minmax(0, 1fr); }
  .mdp-shell .mdp-nav-label,
  .mdp-shell .mdp-nav-count,
  .mdp-shell .mdp-nav-tag,
  .mdp-shell .mdp-nav-section-label { display: none; }
  .mdp-shell .mdp-nav-item { justify-content: center; padding-inline: 0; }
  .mdp-shell .mdp-sidenav { padding-inline: var(--mdp-sp-2); }
  /* Same reasoning as the authored collapsed rail above: no label to reveal, so no chevron, and
     the children stay reachable as icons of their own. */
  .mdp-shell .mdp-nav-chevron { display: none; }
  .mdp-shell .mdp-nav-children {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .mdp-shell .mdp-nav-group[data-expanded='false'] > .mdp-nav-children { display: flex; }
  .mdp-brand-text { display: none; }
  .mdp-search-launcher { flex: 1 1 12rem; }
  .mdp-company-switch .mdp-company-switch-name { display: none; }
  /* The way back collapses to its glyph from the tablet breakpoint down, on the same
     reasoning as the brand text and the company name beside it: the bar is a fixed row and
     the search field is the thing that deserves the width. The link keeps its accessible
     name and its tooltip, so nothing is lost but the pixels. */
  .mdp-platform-back-label { display: none; }
  .mdp-platform-back { padding-inline: var(--mdp-sp-2); }
}

/* Mobile — one column. The rail leaves the grid entirely and becomes an overlay
   drawer, which is why it is `position: fixed` here rather than `display: none`:
   hiding it would lose its scroll position and its focus target. */
@media (max-width: 767px) {
  .mdp-shell,
  .mdp-shell[data-nav-collapsed='true'] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'topnav' 'main';
  }
  .mdp-brandbar { display: none; }
  .mdp-topnav { padding-inline: var(--mdp-sp-3); gap: var(--mdp-sp-1); }
  .mdp-search-launcher { display: none; }
  .mdp-status-indicator { display: none; }
  .mdp-company-switch { display: none; }

  .mdp-sidenav {
    position: fixed;
    inset-block: var(--mdp-topnav-h) 0;
    inset-inline-start: 0;
    inline-size: min(84vw, var(--mdp-sidenav-w));
    block-size: auto;
    padding-inline: var(--mdp-sp-3);
    transform: translateX(-102%);
    transition: transform var(--mdp-dur-normal) var(--mdp-ease-out);
    z-index: var(--mdp-z-drawer);
    box-shadow: var(--mdp-shadow-lg);
  }
  .mdp-shell .mdp-sidenav .mdp-nav-label,
  .mdp-shell .mdp-sidenav .mdp-nav-count,
  .mdp-shell .mdp-sidenav .mdp-nav-tag,
  .mdp-shell .mdp-sidenav .mdp-nav-section-label { display: revert; }
  .mdp-shell .mdp-sidenav .mdp-nav-item { justify-content: flex-start; padding-inline: var(--mdp-sp-3); }
  /* The drawer is the full rail again, so the disclosure comes back with the labels: the chevron
     is drawn, the guide line is restored, and a closed group is closed. */
  .mdp-shell .mdp-sidenav .mdp-nav-chevron { display: grid; }
  .mdp-shell .mdp-sidenav .mdp-nav-children {
    margin-inline-start: calc(var(--mdp-sp-3) + 7px);
    padding-inline-start: var(--mdp-sp-2);
    border-inline-start: 1px solid var(--mdp-border-subtle);
  }
  .mdp-shell .mdp-sidenav .mdp-nav-group[data-expanded='false'] > .mdp-nav-children { display: none; }
  .mdp-shell[data-nav-open='true'] .mdp-sidenav { transform: none; }

  .mdp-main {
    padding: var(--mdp-sp-4) var(--mdp-sp-4) calc(var(--mdp-sp-12) + env(safe-area-inset-bottom));
  }
  .mdp-page-title { font-size: var(--mdp-fs-xl); }
}

/* RTL drawer direction. Logical properties cover the position; the transform is a
   physical axis and needs the one override — and it has to stay inside the mobile band,
   because above it the rail is a grid column with no transform at all and shifting it by
   its own width would park it on top of the content. */
@media (max-width: 767px) {
  :root[dir='rtl'] .mdp-sidenav { transform: translateX(102%); }
  :root[dir='rtl'] .mdp-shell[data-nav-open='true'] .mdp-sidenav { transform: none; }
}

/* The drawer backdrop. Only rendered on mobile by the shell, but the rule is
   unconditional so a future drawer at any width gets the same scrim. */
.mdp-nav-backdrop {
  position: fixed;
  inset: 0;
  background: var(--mdp-overlay);
  z-index: var(--mdp-z-backdrop);
  animation: mdp-fade-in var(--mdp-dur-fast) var(--mdp-ease);
}
@keyframes mdp-fade-in { from { opacity: 0; } to { opacity: 1; } }