/*
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;
}

/* 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);
}