@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

:root {
  --epi-primary: #1d3557;
  --epi-bg: #f8f9fa;
  --epi-border: #c2d1d9;
}

/* --------------------------------------
   1. EXTREME HISTORY REMOVAL
--------------------------------------- */
div[class*="uptime"],
span[class*="uptime"],
.shared-partial-uptime-90-days-wrapper,
.shared-partial-uptime-60-days-wrapper,
.timeline-container {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  border: none !important;
  font-size: 0 !important;
}

/* --------------------------------------
   2. HIDE NATIVE ATLASSIAN ICONS (Fixes Double-Tick)
--------------------------------------- */
.icon-indicator,
.status-icon,
.component-inner-container > svg {
  display: none !important;
}

/* --------------------------------------
   3. Floating, Oval, Status-Colored Tabs
--------------------------------------- */
.epi-sp-tabs-wrapper { margin-bottom: 32px; }
.epi-sp-tabs {
  display: flex;
  gap: 16px; 
  padding-bottom: 12px; 
  overflow-x: auto;
}
.epi-sp-tab {
  border: none;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px; /* Forces the oval pill shape */
  cursor: pointer;
  white-space: nowrap;
  color: #ffffff !important; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Floating drop shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  background-color: #339966; /* Default to green */
}
.epi-sp-tab:hover {
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
.epi-sp-tab.active {
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.3); 
  transform: translateY(1px);
  filter: brightness(0.9); 
}
.epi-sp-tabpanel { display: none; animation: epiFadeIn 0.3s ease; }
@keyframes epiFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dynamic Colors populated by JS based on component health */
.epi-sp-tab.tab-operational { background-color: #339966; } 
.epi-sp-tab.tab-degraded { background-color: #f1c40f; color: #212529 !important; } 
.epi-sp-tab.tab-partial { background-color: #e67e22; } 
.epi-sp-tab.tab-major { background-color: #e74c3c; } 
.epi-sp-tab.tab-maintenance { background-color: #3498db; } 

/* --------------------------------------
   4. Base Components (E-Commerce & P2P)
--------------------------------------- */
.component-container {
  background: #ffffff;
  border: 1px solid var(--epi-border);
  border-radius: 6px;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.component-inner-container {
  padding: 6px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* --------------------------------------
   5. Markets 6-Column Grid Layout
--------------------------------------- */
.members-table-wrapper {
  width: 100%;
  overflow-x: auto; /* Allows scrolling on mobile */
  margin-top: 8px;
  margin-bottom: 32px;
}
.members-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--epi-border);
  min-width: 900px; /* Prevents columns from squishing too much */
}
.market-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--epi-border);
  background: #ffffff;
}
.market-col:last-child {
  border-right: none;
}
.market-header {
  background: #2b3954; /* Dark blue matching screenshot */
  color: #ffffff;
  padding: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--epi-border);
}
/* Converts the standard Atlassian rows into grid cells */
.market-member-cell {
  padding: 12px;
  border-bottom: 1px solid var(--epi-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.market-col .market-member-cell:last-child {
  border-bottom: none !important;
}
.market-member-cell .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #212529;
}

/* --------------------------------------
   6. Custom SVGs & Legend Styling
--------------------------------------- */
.component-status svg {
  width: 16px;
  height: 18px;
  display: block;
}
.component-statuses-legend,
.component-statuses-legend * {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.component-statuses-legend {
  margin-top: 0 !important;
  margin-bottom: 24px !important; 
  justify-content: flex-start !important;
  gap: 10px !important;
}
.component-statuses-legend .legend-item {
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.9rem !important;
  color: var(--epi-primary) !important;
  font-weight: 600 !important;
}
                          
                        
 /* --------------------------------------
   7. Tooltip / Question Mark Fix
--------------------------------------- */
/* Turn the name container into a tight flexbox and disable Atlassian's truncation */
.component-inner-container .name {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important; /* Spacing between text and the question mark */
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important; 
  max-width: 85% !important; 
}

/* Target any inner spans Atlassian uses to guarantee no truncation */
.component-inner-container .name span:not(.tooltip) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Strip Atlassian's hidden floats and positioning from the Question Mark */
.component-inner-container .name a,
.component-inner-container .name .tooltip,
.component-inner-container .name .component-description {
  position: static !important; 
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important; 
}

/* Ensure the status icon on the far right doesn't get pushed off screen */
.component-inner-container .component-status {
  flex-shrink: 0 !important;
}