@import url(https://cdn.jsdelivr.net/npm/@scania/tegel@1.37.1/dist/tegel.css);
/* customFonts.css */

/* Define font faces */
@font-face {
  font-family: 'MyCustomFont';
  font-style: normal;
  font-weight: 700; /* Bold font */
  src: url(/static/ScaniaSans-Bold.4e9618b089f7c743e338.woff2) format('woff2');
}

@font-face {
  font-family: 'Scania Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/static/ScaniaSansHeadline-Regular.a042a31b727fa8a14b44.woff2) format('woff2');
}

@font-face {
  font-family: 'Scania Sans Bold';
  font-style: normal;
  font-weight: 4000 !important;
  src: url(/static/ScaniaSans-Bold.4e9618b089f7c743e338.woff2) format('woff2');
}
@font-face {
  font-family: 'Scania Sans Quote';
  font-style: normal;
  font-weight: 400;
  src: url(/static/ScaniaSans-Regular.72728661cd64e1589066.woff2) format('woff2');
}

/* Apply font styles globally
  h1, h2, h3, h4, h5, h6 {
    font-family: 'MyCustomFont';
    font-weight: 4000;
  } */

/* body, p, span, div {
    font-family: 'MyCustomFont';
    font-weight: 300 !important;
  } */

/*
   * Attempting to target the title in the GitLab People card.
   * The exact selector might need adjustment based on browser inspection.
   */
.MuiCard-root h5,
.MuiCard-root h6,
.MuiCard-root .MuiTypography-h5,
.MuiCard-root .MuiTypography-h6 {
  font-size: 0.8em !important; /* Reduce the font size */
}

/* Toolkit hover effect for icons and labels (circle only) */
.toolkit-hover.toolkit-icon:hover {
  box-shadow: 0 4px 16px rgba(180, 180, 180, 0.25), 0 1.5px 6px rgba(180, 180, 180, 0.15) !important;
  transform: translateY(-2px) scale(1.05) !important;
  background-color: #f5f5f5 !important;
}
.toolkit-hover.toolkit-icon:hover + span,
.toolkit-hover.toolkit-icon:hover ~ span,
.toolkit-hover.toolkit-icon:hover span,
.toolkit-hover.toolkit-icon:hover + .MuiTypography-caption,
.toolkit-hover.toolkit-icon:hover ~ .MuiTypography-caption {
  color: #1756a9 !important;
}

/* Apply hover effect to all circular icons in feature doc cards */
.MuiCard-root a > div,
.InfoCard-root a > div {
  transition: box-shadow 0.2s, transform 0.2s;
}

/* Target divs that look like our circular icons */
.MuiCard-root a > div[style*="borderRadius"][style*="50%"]:hover,
.InfoCard-root a > div[style*="borderRadius"][style*="50%"]:hover,
.MuiCard-root a > div.toolkit-icon:hover,
.InfoCard-root a > div.toolkit-icon:hover {
  box-shadow: 0 4px 16px rgba(180, 180, 180, 0.25), 0 1.5px 6px rgba(180, 180, 180, 0.15) !important;
  transform: translateY(-2px) scale(1.05) !important;
  background-color: #f5f5f5 !important;
}

/* Apply color change to caption when hovering on circular icon */
.MuiCard-root a:hover .MuiTypography-caption,
.InfoCard-root a:hover .MuiTypography-caption,
.MuiCard-root a > div:hover + .MuiTypography-caption,
.InfoCard-root a > div:hover + .MuiTypography-caption,
.MuiCard-root a > div:hover ~ .MuiTypography-caption,
.InfoCard-root a > div:hover ~ .MuiTypography-caption {
  color: #1756a9 !important;
  transition: color 0.2s !important;
}

/* Remove hover from square (outer container) */
.toolkit-hover:not(.toolkit-icon):hover {
  box-shadow: none;
  transform: none;
  background-color: inherit;
}

/* Simple hover effect for homepage cards */
.simplehover:hover {
  box-shadow: 0 2px 6px rgba(23, 86, 169, 0.08), 0 1px 3px rgba(23, 86, 169, 0.06);
  transform: translateY(-1px);
  background-color: #fff;
}

/* Clean and simple sidebar active menu item styling */
/* Remove all complex selectors and use one simple approach */

/* Universal selector for ANY active menu item */
[aria-current="page"] {
  background-color: #4A4D50 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: auto !important;
  position: relative !important;
  /* Complete blue box with thick left line */
  border-left: 3px solid #1756a9 !important;
  border-top: 1px solid #1756a9 !important;
  border-right: 1px solid #1756a9 !important;
  border-bottom: 1px solid #1756a9 !important;
  /* Compensate padding to prevent any shift */
  padding-left: 13px !important;
}

/* Add hover effect for active menu items */
[aria-current="page"]:hover {
  background-color: rgba(116, 118, 121, 0.2) !important;
}

/* Prevent layout shift by reserving space */
.MuiDrawer-root .MuiListItem-root,
.MuiDrawer-root .MuiButtonBase-root {
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Text color for active items - fix spacing to match inactive items */
[aria-current="page"] span,
[aria-current="page"] .MuiTypography-root,
[aria-current="page"] .MuiListItemText-primary {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Icon color for active items - match spacing with inactive items */
[aria-current="page"] svg,
[aria-current="page"] .MuiListItemIcon-root {
  color: #ffffff !important;
  margin: 0 16px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Exclude ONLY the logo - be very specific about logo vs Home menu */
[aria-current="page"][aria-label="Home"]:first-child,
.MuiDrawer-root > div:first-child [aria-current="page"][aria-label="Home"],
.MuiDrawer-root > div > div:first-child [aria-current="page"][aria-label="Home"] {
  border: none !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.MuiDrawer-root > div:first-child [aria-current="page"][aria-label="Home"] span,
.MuiDrawer-root > div:first-child [aria-current="page"][aria-label="Home"] svg,
.MuiDrawer-root > div > div:first-child [aria-current="page"][aria-label="Home"] span,
.MuiDrawer-root > div > div:first-child [aria-current="page"][aria-label="Home"] svg {
  color: inherit !important;
  font-weight: inherit !important;
}

/* Restore default dark grey hover effect for non-active menu items */
.MuiDrawer-root .MuiListItem-root:hover:not([aria-current="page"]),
.MuiDrawer-root .MuiButtonBase-root:hover:not([aria-current="page"]),
.MuiDrawer-root [role="button"]:hover:not([aria-current="page"]) {
  background-color: rgba(116, 118, 121, 0.1) !important;
}

/* Ensure hover works for all sidebar navigation items */
.MuiDrawer-root a:hover:not([aria-current="page"]):not([aria-label="Home"]) {
  background-color: rgba(116, 118, 121, 0.1) !important;
}

/* Exclude logo area from sidebar styling */
.MuiDrawer-root a[aria-label="Home"],
.MuiDrawer-root [class*="logo"],
.MuiDrawer-root [class*="Logo"] {
  border: none !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* Ensure sidebar hover doesn't override active state */
.MuiDrawer-root .MuiList-root .MuiListItem-root:hover:not([aria-current="page"]),
.MuiDrawer-root .MuiList-root .MuiButtonBase-root:hover:not([aria-current="page"]) {
  background-color: rgba(116, 118, 121, 0.1) !important;
}










/* Self Service Page Styles */

/* Import Tegel CSS for web components */

/* Minimal top banner spacing */
.selfservice-top-banner { margin: 0 0 24px 0; }

/* MUI Alert banner minimal tweaks */
.selfservice-alert-banner {
  font-size: 0.95rem;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  /* Theme colors will be applied via CSS custom properties */
}

/* Extracted inline styles for card body slot (override existing if needed) */
.selfservice-card-body-slot {
  font-size: 3rem;
  color: var(--card-secondary-text-color);
  line-height: 1.6;
  margin: 0;
  padding: 0 24px 60px 24px; /* Removed right padding to allow text to extend to edge */
  white-space: pre-line;
  text-align: left;
}

/* Card body text styling - now handled via JSX inline styles */
.card-body-text {
  font-size: 0.8rem !important;
  line-height: 1.8 !important;
  color: var(--card-secondary-text-color) !important;
  white-space: pre-line !important;
  font-family: 'Scania Sans Quote', Arial, sans-serif !important;
}

/* Direct Typography styling for card body text - bypasses Shadow DOM issues */
.card-body-text {
  font-size: 0.8rem !important; /* Match banner font size */
  line-height: 1.8 !important;
  color: var(--card-secondary-text-color) !important;
  white-space: pre-line !important;
  font-weight: 400 !important;
  font-family: 'Scania Sans Quote', Arial, sans-serif !important;
}

/* Action icon style */
.selfservice-card-action-icon {
  width: 24px;
  height: 24px;
  filter: var(--icon-filter);
}

/* Styled links inside help section */
.selfservice-help-link {
  color: var(--link-color);
  text-decoration: none;
}

/* Custom Tegel card hover effects for Self Service page */
tds-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  height: 100%;
  min-height: 380px;
  cursor: pointer;
  /* Base shadow as recommended by Tegel */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  display: block;
  position: relative;
  z-index: 1;
  background: var(--card-bg-color);
  /* Add slight rounded corners for modern look */
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  margin-bottom: 12px;
  /* Prevent double card effect */
  border: 1px solid transparent;
}

tds-card:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 5;
  isolation: isolate;
  /* Ensure single card appearance on hover */
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Logo and title side by side layout using grid (use header slot) */
tds-card [slot="header"] {
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 0 24px !important;
  min-height: 60px !important;
}

/* GitLab specific header layout with banner */
tds-card[card-id="gitlab"] [slot="header"] {
  grid-template-columns: 48px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px 16px !important;
}

/* Confluence specific header layout with banner */
tds-card[card-id="confluence"] [slot="header"] {
  grid-template-columns: 48px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px 16px !important;
}

/* AWS specific header layout with banner */
tds-card[card-id="aws"] [slot="header"] {
  grid-template-columns: 48px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px 16px !important;
}

/* Position GitLab banner to span full width below logo and title */
.gitlab-blue-banner {
  grid-column: 1 / -1 !important;
  background: #E6F2FF !important;
  /* Make banner full-bleed inside header by offsetting header padding */
  margin: 8px -24px 0 -24px !important;
  /* Provide internal, even horizontal padding */
  padding: 6px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: 1px solid #B3D4FC !important;
  border-radius: 8px !important;
}

/* Title styling using span with card-title class in header slot */
tds-card [slot="header"] .card-title,
tds-card [slot="header"] span.card-title {
  font-size: 1.5rem !important;
  font-weight: 400 !important; /* Scania Sans Regular */
  color: var(--card-text-color) !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Scania Sans Quote', Arial, sans-serif !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Logo styling for header side-by-side layout */
tds-card [slot="header"] img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Body content styling for better readability */
tds-card [slot="body"],
tds-card .tds-card__body {
  font-size: inherit !important; /* let .card-body-text take over */
  line-height: 1.65 !important;
  color: inherit !important; /* let .card-body-text control color too */
  padding: 0 24px 60px 24px !important; /* Removed right padding, kept left padding for consistency */
  font-weight: 400 !important;
  font-family: 'Scania Sans Quote', Arial, sans-serif !important;
  text-align: left !important;
  white-space: pre-line !important;
}

tds-card [slot="body"] ul,
tds-card .tds-card__body ul {
  font-size: 1.45rem !important;
  line-height: 1.55 !important;
  color: var(--card-secondary-text-color) !important;
  margin: 8px 0 !important;
  padding-left: 20px !important;
  font-family: 'Scania Sans Quote', Arial, sans-serif !important;
  text-align: left !important;
  list-style-position: outside !important;
}

tds-card [slot="body"] li,
tds-card .tds-card__body li {
  margin-bottom: 6px !important;
}

/* GitLab card styling - specific fix for double card issue */
tds-card[card-id="gitlab"] {
  border-top: 4px solid #e15426;
  isolation: isolate;
  transform: translateZ(0);
  /* Fix double card appearance - GitLab specific */
  background: var(--card-bg-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* GitLab card body - inherits standard padding from general body styling */

tds-card[card-id="gitlab"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #c9461f;
  /* Ensure single card on hover */
  box-shadow: var(--card-hover-shadow) !important;
}

/* Remove GitLab-specific internal styling conflicts - but preserve body content padding */
tds-card[card-id="gitlab"]::part(card),
tds-card[card-id="gitlab"] .tds-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
}

/* Preserve body content styling for GitLab */
tds-card[card-id="gitlab"] [slot="body"],
tds-card[card-id="gitlab"] .tds-card__body {
  padding: 0 24px 60px 24px !important; /* Removed right padding */
}

/* Jira card styling */
tds-card[card-id="jira"] {
  border-top: 4px solid #4C9AFF;
  isolation: isolate;
  transform: translateZ(0);
}

tds-card[card-id="jira"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #2684ff;
}

/* Confluence card styling - specific fix for double card issue */
tds-card[card-id="confluence"] {
  border-top: 4px solid #0065FF;
  isolation: isolate;
  transform: translateZ(0);
  /* Fix double card appearance - Confluence specific */
  background: var(--card-bg-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Confluence card body - inherits standard padding from general body styling */

tds-card[card-id="confluence"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #0052cc;
  /* Ensure single card on hover */
  box-shadow: var(--card-hover-shadow) !important;
}

/* Remove Confluence-specific internal styling conflicts - but preserve body content padding */
tds-card[card-id="confluence"]::part(card),
tds-card[card-id="confluence"] .tds-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
}

/* Preserve body content styling for Confluence */
tds-card[card-id="confluence"] [slot="body"],
tds-card[card-id="confluence"] .tds-card__body {
  padding: 0 24px 60px 24px !important; /* Removed right padding */
}

/* Artifactory card styling */
tds-card[card-id="jfrog"] {
  border-top: 4px solid #36B37E;
  isolation: isolate;
  transform: translateZ(0);
}

tds-card[card-id="jfrog"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #00875a;
}

/* AWS @ Scania card styling */
tds-card[card-id="aws"] {
  border-top: 4px solid #041E42;
  isolation: isolate;
  transform: translateZ(0);
}

/* AWS card body - inherits standard padding from general body styling */

tds-card[card-id="aws"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #1565C0;
}

/* GitHub Copilot card styling */
tds-card[card-id="github-copilot"] {
  border-top: 4px solid #7C3AED;
  isolation: isolate;
  transform: translateZ(0);
}

tds-card[card-id="github-copilot"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #6d28d9;
}

/* GitHub Copilot logo - make white in dark mode */
tds-card[card-id="github-copilot"] [slot="header"] img {
  filter: var(--logo-filter-dark) !important;
}

/* LaunchDarkly card styling */
tds-card[card-id="launchdarkly"] {
  border-top: 4px solid #000000;
  isolation: isolate;
  transform: translateZ(0);
}

tds-card[card-id="launchdarkly"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #000000;
}

/* LaunchDarkly logo - make white in dark mode */
tds-card[card-id="launchdarkly"] [slot="header"] img {
  filter: var(--logo-filter-dark) !important;
}

/* Azure card styling */
tds-card[card-id="azure"] {
  border-top: 4px solid #0078d4;
  isolation: isolate;
  transform: translateZ(0);
}

tds-card[card-id="azure"]:hover {
  background: var(--card-hover-bg) !important;
  border-top-color: #106ebe;
}

/* Actions styling */
tds-card [slot="actions"] {
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 16px 16px 16px 8px !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 0px !important;
  right: 0 !important;
  height: auto !important;
  min-height: 24px !important;
}

tds-card:hover [slot="actions"] {
  opacity: 1;
}

/* Grid item spacing fix - Enhanced for better 2-3-2 visibility */
.MuiGrid-item {
  padding: 12px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  justify-content: center !important;
}

/* Ensure cards don't overlap and container is responsive */
.MuiGrid-container {
  overflow: visible !important;
  min-width: 320px !important;
  justify-content: center !important;
}

/* Fix for card containers - Better responsive behavior */
.MuiGrid-item > tds-card {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 450px !important;
  min-width: 320px !important;
}

.confluence-blue-banner {
  grid-column: 1 / -1 !important;
  background: #E6F2FF !important;
  color: #000 !important;
  margin: 8px -24px 0 -24px !important;
  padding: 6px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: 1px solid #B3D4FC !important;
  border-radius: 8px !important;
}

.aws-darkblue-banner {
  grid-column: 1 / -1 !important;
  background: #F0F4FF !important;
  color: #000 !important;
  margin: 8px -24px 0 -24px !important;
  padding: 6px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border: 1px solid #B3C2E6 !important;
  border-radius: 8px !important;
}

.banner-warning-icon,
.gitlab-blue-banner .banner-warning-icon,
.confluence-blue-banner .banner-warning-icon,
.aws-darkblue-banner .banner-warning-icon {
  width: 0.9rem !important;
  height: 0.9rem !important;
  min-width: 0.9rem !important;
  min-height: 0.9rem !important;
  max-width: 1.1rem !important;
  max-height: 1.1rem !important;
  object-fit: contain !important;
  margin-right: 0.5rem !important;
  vertical-align: middle !important;
  filter: var(--banner-icon-filter) !important;
}

.banner-warning-text {
  font-size: 0.9rem !important;
  color: var(--banner-text-color) !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
}

/* Ensure banner text and icon are aligned */
.gitlab-blue-banner,
.confluence-blue-banner,
.aws-darkblue-banner {
  display: inline-flex !important;
  align-items: center !important;
}

/* ======= Override: Remove unwanted right padding ======= */
/* Applies to all card body slots to zero out right padding */
.selfservice-card-body-slot,
tds-card [slot="body"],
tds-card .tds-card__body {
  padding: 0 0 60px 24px !important;
}

/* Alternatively, minimal override */
.selfservice-card-body-slot,
tds-card [slot="body"],
tds-card .tds-card__body {
  padding-right: 0 !important;
}

/* Theme-responsive styling using CSS custom properties */
/* These will be set dynamically by the React component based on the current theme */

/* Tegel cards background and text using theme variables */
tds-card,
tds-card::part(card),
tds-card .tds-card {
  background: var(--card-bg-color) !important;
  color: var(--card-text-color) !important;
  box-shadow: var(--card-shadow) !important;
  border: 1px solid var(--card-border-color) !important;
}

tds-card [slot="header"] .card-title,
tds-card [slot="header"] span.card-title {
  color: var(--card-text-color) !important;
}

/* Ensure the header img stays visible */
tds-card [slot="header"] img {
  filter: none !important;
}

tds-card [slot="body"],
tds-card .tds-card__body,
.selfservice-card-body-slot,
.card-body-text {
  color: var(--card-secondary-text-color) !important;
  background: transparent !important;
}

/* Banners in header using theme variables */
.gitlab-blue-banner {
  background: rgba(230, 242, 255, var(--banner-bg-opacity)) !important;
  color: var(--banner-text-color) !important;
  border: 1px solid rgba(179, 212, 252, var(--banner-border-opacity)) !important;
}

.confluence-blue-banner {
  background: rgba(230, 242, 255, var(--banner-bg-opacity)) !important;
  color: var(--banner-text-color) !important;
  border: 1px solid rgba(179, 212, 252, var(--banner-border-opacity)) !important;
}

.aws-darkblue-banner {
  background: rgba(240, 244, 255, var(--banner-bg-opacity)) !important;
  color: var(--banner-text-color) !important;
  border: 1px solid rgba(179, 194, 230, var(--banner-border-opacity)) !important;
}

/* Hover effects using theme variables */
tds-card:hover {
  box-shadow: var(--card-hover-shadow) !important;
  transform: translateY(-2px) translateZ(0);
  background: var(--card-hover-bg) !important;
}

/* Adjust MuiGrid backgrounds */
.MuiGrid-container {
  background: transparent !important;
}

/* Alert banner using theme variables */
.selfservice-alert-banner {
  background-color: var(--alert-bg-color) !important;
  border-color: var(--alert-border-color) !important;
  color: var(--card-text-color) !important;
}


/*# sourceMappingURL=main.ce996700.css.map*/