/*
masque-portal.css: This contains custom global styling and extensions to the base
material-design-components framework.

masque-portal-ui classes MUST be prefixed with 'mp-'.

Updated to match DataMasque 2024 brand design system.
*/


/*  Custom theme / colour extensions - aligned with design system ------------------------------------------------------- */
:root {
  --mp-palette-info: var(--dm-info, #3B82F6);
  --mp-palette-success: var(--dm-success, #10B981);
  --mp-palette-warning: var(--dm-warning, #F59E0B);
  --mp-palette-error: var(--dm-error, #EF4444);
}

body {
  height: 100%;
  margin: 0;
  background-color: var(--mdc-theme-background, #FFFFFF);
}


/* Loading overlay -------------------------------------------------------------------------------------------------- */
.mp-loading-overlay {
  display: none;
}

body.mp--loading .mp-loading-overlay {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}


/*  Buttons --------------------------------------------------------------------------------------------------------- */
/* We have to manually create 'secondary' theme colour for buttons */
.mp-button.mp-button--secondary {
  background-color: var(--mdc-theme-secondary);
}

/* Primary button styling */
.mp-button--primary {
  background-color: var(--mdc-theme-primary, #7C3AED);
  color: #FFFFFF;
  border: none;
  border-radius: var(--dm-radius, 0.375rem);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--dm-transition-fast, 150ms ease-in-out),
    box-shadow var(--dm-transition-fast, 150ms ease-in-out);
}

.mp-button--primary:hover {
  background-color: var(--mdc-theme-primary-dark, #6D28D9);
  box-shadow: var(--dm-shadow-purple, 0 4px 14px 0 rgba(124, 58, 237, 0.3));
}

/* Secondary/outlined button styling */
.mp-button--outlined {
  background-color: transparent;
  color: var(--mdc-theme-primary, #7C3AED);
  border: 2px solid var(--mdc-theme-primary, #7C3AED);
  border-radius: var(--dm-radius, 0.375rem);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--dm-transition-fast, 150ms ease-in-out),
    border-color var(--dm-transition-fast, 150ms ease-in-out),
    color var(--dm-transition-fast, 150ms ease-in-out);
}

.mp-button--outlined:hover {
  background-color: var(--dm-purple-50, #F5F3FF);
  border-color: var(--mdc-theme-primary-dark, #6D28D9);
  color: var(--mdc-theme-primary-dark, #6D28D9);
}


/*  Snackbars ------------------------------------------------------------------------------------------------------- */
/* Add colours to message snackbars */
.mp-snackbar--info > .mdc-snackbar__surface {
  background-color: var(--mp-palette-info);
}

.mp-snackbar--success > .mdc-snackbar__surface {
  background-color: var(--mp-palette-success);
}

.mp-snackbar--warning > .mdc-snackbar__surface {
  background-color: var(--mp-palette-warning);
}

.mp-snackbar--error > .mdc-snackbar__surface {
  background-color: var(--mp-palette-error);
}

/* Allows us to have multiple snackbars */
.mp-snackbar-container--stacking {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.mp-snackbar-container--stacking > .mp-snackbar {
  position: static;
}

/* Adding icons to snackbars */
.mp-snackbar .mdc-snackbar__surface > i {
  margin-left: 16px;
}

/* Top nav bar ------------------------------------------------------------------------------------------------------ */
@media (min-width: 600px) {
  .mp-toolbar-nav {
    height: 80px;
    margin-left: 2rem;
  }
}

.mp-toolbar-nav {
  display: flex;
  align-items: center;
  height: 80px;
  margin-left: 2rem;
}

.mp-toolbar-nav__tabs {
  display: flex;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-toolbar-nav__tabs > li {
  display: inline-block;
}

.mp-toolbar-nav__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
  color: var(--dm-gray-800, #27272A);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dm-transition-fast, 150ms ease-in-out);
}

.mp-top-app-bar .mp-toolbar-nav__tab {
  color: #000000;
}

.mp-toolbar-nav__tab:hover {
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-top-app-bar .mp-toolbar-nav__tab:hover {
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-toolbar-nav__tab--active {
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-top-app-bar .mp-toolbar-nav__tab--active {
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-top-app-bar .mp-user-menu-button {
  color: var(--mdc-theme-primary, #7C3AED);
}

#mp-user-options-menu.mdc-menu-surface {
  background-color: var(--mdc-theme-background, #FFFFFF);
}

/* Documentation drawer ------------------------------------------------------------------------------------------------ */
.mdc-drawer.mp-documentation-nav-drawer {
  overflow-y: auto;
}

.mdc-drawer.mp-documentation-nav-drawer a {
  text-decoration: none;
}

/* The collapsible category rows are width: 100% with padding, declared in the documentation
   templates' inline styles. Without border-box the padding is added on top and overflows the
   drawer. Set here once rather than duplicated across both templates. */
.collapsible {
  box-sizing: border-box;
}

/* Sidebar navigation (resources/training/reseller) ------------------------------------------------------------------ */
.mp-training-nav-drawer,
.mp-customer-resources-nav-drawer,
.mp-reseller-nav-drawer {
  border-right: 1px solid var(--dm-gray-200, #E4E4E7);
}

.mp-training-nav-drawer__list .heading,
.mp-customer-resources-nav-drawer__list .heading,
.mp-reseller-nav-drawer__list .heading {
  color: var(--dm-gray-800, #27272A);
  letter-spacing: 0.01em;
}

.mp-training-nav-drawer__list .mdc-list-item,
.mp-customer-resources-nav-drawer__list .mdc-list-item,
.mp-reseller-nav-drawer__list .mdc-list-item {
  border-left: 3px solid transparent;
  border-radius: 0;
  color: var(--dm-gray-700, #3F3F46);
}

.mp-training-nav-drawer .mdc-list-item:hover,
.mp-customer-resources-nav-drawer .mdc-list-item:hover,
.mp-reseller-nav-drawer .mdc-list-item:hover {
  background-color: var(--dm-gray-100, #F4F4F5);
}

.mp-training-nav-drawer .mp-training-nav-drawer__list .mdc-list-item--activated,
.mp-customer-resources-nav-drawer .mp-customer-resources-nav-drawer__list .mdc-list-item--activated,
.mp-reseller-nav-drawer .mp-reseller-nav-drawer__list .mdc-list-item--activated {
  background-color: var(--dm-purple-50, #F5F3FF);
  border-left-color: var(--mdc-theme-primary, #7C3AED);
  color: var(--mdc-theme-primary, #7C3AED);
  font-weight: 600;
}

.mp-training-nav-drawer .mp-training-nav-drawer__list .mdc-list-item--activated:not(.external-action-link)::after,
.mp-customer-resources-nav-drawer .mp-customer-resources-nav-drawer__list .mdc-list-item--activated::after,
.mp-reseller-nav-drawer .mp-reseller-nav-drawer__list .mdc-list-item--activated::after {
  content: none;
}

.mp-top-app-bar .mp-mobile-nav-trigger {
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-top-app-bar .mp-active-tab-name-display {
  color: var(--dm-gray-800, #27272A);
}


/* Cards ------------------------------------------------------------------------------------------------------------ */
.mp-card {
  background-color: #FFFFFF;
  border-radius: var(--dm-radius-xl, 1rem);
  padding: 1.5rem;
  box-shadow: var(--dm-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
  border: 1px solid var(--dm-gray-200, #E4E4E7);
  transition: box-shadow var(--dm-transition-fast, 150ms ease-in-out),
    border-color var(--dm-transition-fast, 150ms ease-in-out);
}

.mp-card:hover {
  box-shadow: var(--dm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  border-color: var(--dm-purple-300, #C4B5FD);
}


/* Badges ----------------------------------------------------------------------------------------------------------- */
.mp-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: var(--dm-radius-full, 9999px);
}

.mp-badge--primary {
  background-color: var(--dm-purple-100, #EDE9FE);
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-badge--success {
  background-color: #D1FAE5;
  color: #059669;
}

.mp-badge--neutral {
  background-color: var(--dm-gray-100, #F4F4F5);
  color: var(--dm-gray-600, #52525B);
}

.mp-badge--warning {
  background-color: #FEF3C7;
  color: #D97706;
}

.mp-badge--error {
  background-color: #FEE2E2;
  color: #DC2626;
}


/* Form inputs ------------------------------------------------------------------------------------------------------ */
.mp-input {
  background-color: #FFFFFF;
  border: 1px solid var(--dm-gray-300, #D4D4D8);
  border-radius: var(--dm-radius, 0.375rem);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: border-color var(--dm-transition-fast, 150ms ease-in-out),
    box-shadow var(--dm-transition-fast, 150ms ease-in-out);
}

.mp-input:focus {
  outline: none;
  border-color: var(--mdc-theme-primary, #7C3AED);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.mp-input--error {
  border-color: var(--dm-error, #EF4444);
}


/* Tabs ------------------------------------------------------------------------------------------------------------- */
.mp-tabs {
  display: flex;
  border-bottom: 2px solid var(--dm-gray-200, #E4E4E7);
  gap: 0;
}

.mp-tab {
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dm-gray-500, #71717A);
  cursor: pointer;
  position: relative;
  transition: color var(--dm-transition-fast, 150ms ease-in-out);
}

.mp-tab:hover {
  color: var(--dm-gray-800, #27272A);
}

.mp-tab--active {
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-tab--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--mdc-theme-primary, #7C3AED);
}


/* Alert/Callout boxes ---------------------------------------------------------------------------------------------- */
.mp-callout {
  padding: 1rem 1.25rem;
  border-radius: var(--dm-radius-lg, 0.75rem);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.mp-callout--info {
  background-color: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

.mp-callout--success {
  background-color: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.mp-callout--warning {
  background-color: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

.mp-callout--error {
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}


/* Code/monospace styling ------------------------------------------------------------------------------------------- */
code, .mp-code {
  font-family: "JetBrains Mono", Consolas, "Courier New", Courier, monospace;
  font-size: 0.875rem;
  background-color: var(--dm-gray-100, #F4F4F5);
  padding: 0.125rem 0.375rem;
  border-radius: var(--dm-radius-sm, 0.25rem);
}

pre, .mp-pre {
  font-family: "JetBrains Mono", Consolas, "Courier New", Courier, monospace;
  font-size: 0.875rem;
  border-radius: var(--dm-radius-lg, 0.75rem);
  border: none;
  overflow-x: auto;
}

pre code, .mp-pre code {
  padding: 1rem;
  display: block;
}


/* Utility classes -------------------------------------------------------------------------------------------------- */
.mp-text-primary {
  color: var(--mdc-theme-primary, #7C3AED);
}

.mp-text-secondary {
  color: var(--dm-gray-500, #71717A);
}

.mp-text-muted {
  color: var(--dm-gray-400, #A1A1AA);
}

.mp-bg-secondary {
  background-color: var(--dm-bg-secondary, #F5F3FF);
}

.mp-bg-accent {
  background-color: var(--dm-bg-accent, #EDE5FF);
}


/* Documentation image zoom ------------------------------------------------------------------------------------------ */
/* Wide screenshots are scaled to fit the column, which on a phone can leave their UI text
   unreadable. masque-portal.js makes those images open here at full size. Only images that
   are actually being shrunk get the affordance. */
.mp-documentation-panel__content img[data-mp-zoom="on"] {
  cursor: zoom-in;
}

.mp-image-zoom {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}

.mp-image-zoom::backdrop {
  background-color: rgba(0, 0, 0, 0.82);
}

/* Sizes to the image so the dialog scrolls, and fills the viewport when the image is
   smaller so there is no dead zone that swallows a dismissing click. */
.mp-image-zoom__surface {
  min-width: 100%;
  min-height: 100%;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

/* Deliberately NOT max-width: 100%. On a phone the docs column already spans the
   viewport, so fitting the image to the width would reproduce the size it is being
   zoomed away from. It opens at native size and the surface pans instead. */
.mp-image-zoom__image {
  display: block;
  max-width: none;
  height: auto;
}

.mp-image-zoom__close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 24px;
  cursor: pointer;
}

.mp-image-zoom__close:hover {
  background-color: rgba(0, 0, 0, 0.75);
}

.mp-image-zoom__close:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}


/* Responsive shell ------------------------------------------------------------------------------------------------- */
/* The authenticated shell is a flex row: a fixed-width <aside> sidebar next to the page content. Below
   900px there isn't room for both, so the sidebar becomes an off-canvas drawer toggled by
   .mp-sidebar-toggle. This covers every sidebar in the portal (documentation, knowledge base, training,
   reseller) because they are all <aside> children of .mp-body-container. */

.mp-sidebar-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  position: sticky;
  /* Clears the fixed 80px top app bar, which .mdc-top-app-bar--fixed-adjust pads for. */
  top: 80px;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--dm-gray-200, #E4E4E7);
  background-color: #FEFEFE;
  color: var(--mdc-theme-primary, #7C3AED);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mp-sidebar-scrim {
  display: none;
  position: fixed;
  /* Starts below the fixed top app bar so the main navigation stays usable while the drawer is open. */
  top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  background-color: rgba(0, 0, 0, 0.32);
}

/* Page templates declare their layout in inline <style> blocks, which the browser sees after
   this file. Equal-specificity rules there would win on source order, so the shell overrides
   below are prefixed with `body` to outrank them (0,1,1 vs 0,1,0) without reaching for
   !important. !important is reserved for rules that must beat a style="" attribute. */
@media (max-width: 900px) {
  /* Stack the shell and let the page scroll natively. The desktop layout caps every child at
     calc(100vh - 80px) and scrolls inside .mp-page-container, which fights touch scrolling and
     breaks when a mobile browser collapses its URL bar. */
  body .mp-body-container {
    flex-direction: column;
    min-height: 0;
  }

  body .mp-body-container > * {
    max-height: none;
  }

  body .mp-page-container {
    overflow-y: visible;
    min-width: 0;
  }

  /* Show the drawer toggle, but only on pages that actually have a sidebar. The .mp-has-sidebar
     rules are a separate fallback for browsers without :has() (the class is added by the drawer
     script in authenticated-base.html). They must stay separate rules, not one comma-joined
     selector: an unsupported :has() invalidates its whole selector group, which would drop the
     fallback too. */
  .mp-body-container:has(> aside) .mp-sidebar-toggle {
    display: flex;
  }
  .mp-body-container.mp-has-sidebar .mp-sidebar-toggle {
    display: flex;
  }

  /* Give the content clearance below the sticky Contents bar so the first heading isn't
     jammed against it. Only on pages that render the bar. */
  .mp-body-container:has(> aside) .mp-page-container {
    padding-top: 16px;
  }
  .mp-body-container.mp-has-sidebar .mp-page-container {
    padding-top: 16px;
  }

  /* Off-canvas sidebar. Width is capped so it never exceeds a narrow viewport; the nested
     documentation drawer sets 330px inline on desktop, hence the !important. */
  .mp-body-container > aside {
    position: fixed;
    top: 80px;
    bottom: 0;
    left: 0;
    z-index: 7;
    width: min(85vw, 300px) !important;
    min-width: 0 !important;
    max-width: none;
    margin: 0;
    border-right: 1px solid var(--dm-gray-200, #E4E4E7);
    background-color: #FEFEFE;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .mp-body-container.mp-sidebar-open > aside {
    transform: translateX(0);
  }

  .mp-body-container.mp-sidebar-open .mp-sidebar-scrim {
    display: block;
  }

  /* Documentation drawer sizes itself off the viewport height for the desktop sticky layout. */
  .mp-documentation-nav-drawer {
    height: auto !important;
    max-height: none !important;
  }

  /* The panel centres its content box. Stretching instead means the box takes the
     available width rather than sizing to its widest child, which otherwise overflows
     a phone viewport and gets clipped on both sides. */
  body .mp-documentation-panel {
    align-items: stretch;
  }

  /* Content: drop the desktop min-width floor and gutters, which together forced a
     416px minimum and produced horizontal page scroll on every phone. The nested
     documentation template sets neither a width nor box-sizing, so both are set here
     or the 16px padding is added on top of a full-width box. overflow-wrap lets
     unbreakable tokens (auth headers, endpoint paths, bare URLs) break rather than push
     the page sideways; code blocks are excluded below and scroll instead. */
  body .mp-documentation-panel__content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 16px 32px 16px;
    overflow-wrap: break-word;
  }

  /* Wide markdown tables and code blocks scroll within their own box rather than
     pushing the page sideways. Tables are wrapped by masque-portal.js so the table
     itself keeps `display: table` and its columns stay aligned. */
  .mp-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Let the table be as wide as its content needs: wide tables exceed the container and
     scroll, while a small table stays its natural width instead of being stretched to a
     fixed floor and gaining a needless scrollbar. */
  .mp-table-scroll table {
    min-width: max-content;
  }

  body .mp-documentation-panel__content pre {
    overflow-wrap: normal;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Known Issues and Profile hardcode a desktop content width (800px and 600px) with
     padding on top and no box-sizing, so they are wider than a phone. Previously the
     shell's own scroll container clipped that; now that the page scrolls natively it
     would show, so these are brought back inside the viewport. */
  body .mp-issues__container,
  body .mp-profile__section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body .mp-issues__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body .mp-profile__section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* The active page name stays in the top bar so sidebar pages (Documentation, Knowledge
     Base, etc.), whose content heading is doc-specific, still show which section you're in.
     A long name (e.g. "Reseller Resources") truncates with an ellipsis rather than pushing
     the page sideways. Below 600px the logo is dropped (see navbar.html), which leaves room. */
  body .mp-active-tab-name-display {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-body-container > aside {
    transition: none;
  }
}

/* The documentation templates hide the drawer when printing but predate these controls.
   Without this the toggle prints on pages that have no print rules of their own, and on
   documentation pages it still reserves layout space at the top of the first page.
   !important because the rule revealing the toggle is more specific and media queries
   contribute nothing to specificity, so it would otherwise win here too. */
@media print {
  .mp-sidebar-toggle,
  .mp-sidebar-scrim {
    display: none !important;
  }
}