/* ===== GLOBAL STATUSPAGE STYLES ===== */
/* Ensure modals appear above the header but below modal backdrop */
.modal {
  z-index: 10050 !important;
}

.modal-backdrop {
  z-index: 10040 !important;
}

/* Hide the default component layout to show our custom dashboard */
.components-section {
  display: none !important;
}

/* Remove any visible legacy Subscribe links */
a.show-updates-dropdown {
  display: none !important;
}

.unresolved-incident.impact-critical::before {
  content: "Active Incidents";
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  background-color: #282E37;
  color: #ffffff;
  padding: 1.25rem 1rem !important; /* Reduced padding */
  border-left: 12px solid #EE312E !important; /* Diligent red */
  margin-bottom: 1.5rem !important; /* Reduced margin */
}

.color-primary:not(.incident-name, .incident-body) {
  color: #282E37 !important; /* Diligent font color */
  text-decoration: none !important;
  font-weight: 600 !important; /* Make text bolder */
  font-size: 1.1rem !important; /* Slightly larger text */
  border-left: 4px solid #EE312E !important; /* Subtle red accent */
  padding: 1rem 1rem 1rem 1.25rem !important; /* Consistent padding with extra left for border */
  margin: 0 -0.85rem 0.75rem -0.85rem !important; /* Negative margins to align with container edges */
  border-radius: 3px !important; /* Subtle rounded corners */
  background-color: rgba(238, 49, 46, 0.05) !important; /* Very subtle red background */
  transition: all 0.2s ease !important; /* Smooth hover transitions */
  display: block !important; /* Keep block display for proper positioning */
  width: fit-content !important; /* Dynamic width based on content */
}

.whitespace-pre-wrap {
  color: #282E37 !important; /* Diligent font color */
  text-decoration: none !important;
}

body > div.layout-content.status.status-index.starter > div.container > div.page-status.status-none {
  display: none !important;
}

.unresolved-incident.impact-critical {
  padding: 1.25rem !important; /* Reduced padding for critical incidents */
  margin-bottom: 1.5rem !important; /* Reduced space between incidents */
  border-radius: 6px !important;
  width: 100% !important;
  max-width: 1200px !important; /* Match header container width */
  margin-left: auto !important;
  margin-right: auto !important;
  color:#282E37 !important;
}

/* Add title before maintenance incidents */
.unresolved-incident.impact-maintenance::before {
  content: "Scheduled Maintenance";
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  background-color: #282E37;
  color: #ffffff;
  padding: 1.25rem 1rem !important; /* Reduced padding */
  border-left: 12px solid #EE312E !important; /* Diligent red */
  margin-bottom: 1.5rem !important; /* Reduced margin */
}

.unresolved-incident.impact-maintenance{
  width: 100% !important;
  max-width: 1200px !important; /* Match header container width */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1.25rem !important; /* Reduced padding for maintenance incidents */
  margin-bottom: 1.5rem !important; /* Reduced space between incidents */
}

.incidents-list.format-expanded {
  width: 100% !important;
  max-width: 1200px !important; /* Match header container width */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1.25rem !important; /* Reduced padding */
  margin-bottom: 1.5rem !important; /* Reduced space after incident list */
}

/* Hide/disable subscribe buttons within maintenance notices */
.impact-maintenance a[data-toggle="modal"].subscribe {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide subscribe button in page title */
.page-title a.subscribe-button,
.page-title a[data-toggle="modal"][href*="subscribe-modal"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide all subscribe buttons with data-toggle="modal" and class="subscribe" */
a[data-toggle="modal"].subscribe,
a.subscribe[data-toggle="modal"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.incident-container {
  background-color: #f8f9fa !important;
  padding: 1.25rem !important; /* Reduced padding */
  margin-bottom: 0.75rem !important; /* Reduced space between incident containers */
}

.incident-title.font-large {
  color: #282E37 !important;
  padding: 1rem !important; /* Reduced padding */
}

/* More specific rule for incident title links */
a.incident-title.font-large {
  color: #282E37 !important;
  text-decoration: none !important;
}

/* Override critical incident title styling */
a.incident-title.font-large.impact-critical,
a.impact-critical.incident-title.font-large {
  color: #282E37 !important; /* Diligent black color */
  text-decoration: none !important; /* Remove underlines */
  font-style: normal !important; /* Remove italic styling */
  text-transform: none !important; /* Remove any text transformation */
}

/* Direct targeting of incident title links */
a.actual-title.with-ellipsis,
a.whitespace-pre-wrap.actual-title.with-ellipsis {
  color: #282E37 !important;
  text-decoration: none !important;
  font-weight: 600 !important; /* Make text bolder */
  font-size: 1.1rem !important; /* Slightly larger text */
  border-left: 4px solid #EE312E !important; /* Subtle red accent */
  padding: 1rem 1rem 1rem 1.25rem !important; /* Consistent padding with extra left for border */
  margin: 0 -0.85rem 0.75rem -0.85rem !important; /* Negative margins to align with container edges */
  border-radius: 3px !important; /* Subtle rounded corners */
  background-color: rgba(238, 49, 46, 0.05) !important; /* Very subtle red background */
  transition: all 0.2s ease !important; /* Smooth hover transitions */
  display: block !important; /* Keep block display for proper positioning */
  width: fit-content !important; /* Dynamic width based on content */
}

/* Hover effect for better interactivity */
a.actual-title.with-ellipsis:hover,
a.whitespace-pre-wrap.actual-title.with-ellipsis:hover {
  background-color: rgba(238, 49, 46, 0.1) !important; /* Slightly stronger red on hover */
  border-left-width: 6px !important; /* Thicker accent border on hover */
  transform: translateX(2px) !important; /* Subtle slide effect */
  padding-left: 1.5rem !important; /* Adjust padding for thicker border */
}

.font-largest.no-link {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  background-color: #282E37;
  color: #ffffff;
  padding: 1.25rem 1rem !important; /* Reduced padding */
  border-left: 12px solid #EE312E !important; /* Diligent red */
  margin-bottom: 1.5rem !important; /* Reduced margin */
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .unresolved-incident.impact-critical::before {
    font-size: 1.25rem !important; /* Smaller font size on mobile */
    padding: 1.5rem 0.75rem !important; /* Even more increased top/bottom padding on mobile */
    margin-bottom: 1rem !important; /* Reduced margin on mobile */
  }

  .unresolved-incident.impact-maintenance::before {
    font-size: 1.25rem !important; /* Smaller font size on mobile */
    padding: 1.5rem 0.75rem !important; /* Even more increased top/bottom padding on mobile */
    margin-bottom: 1rem !important; /* Reduced margin on mobile */
  }

  .font-largest.no-link {
    font-size: 1.25rem !important; /* Smaller font size on mobile */
    padding: 1.5rem 0.75rem !important; /* Even more increased top/bottom padding on mobile */
    margin-bottom: 1rem !important; /* Reduced margin on mobile */
  }

  /* Mobile responsive styling for incident title links - slightly smaller than headers */
  a.actual-title.with-ellipsis,
  a.whitespace-pre-wrap.actual-title.with-ellipsis {
    font-size: 1.15rem !important; /* Slightly smaller than 1.25rem headers on mobile */
    padding: 0.65rem 0.65rem 0.65rem 1rem !important; /* Reduced padding with extra left for border */
    margin: 0 -0.85rem 0rem -0.85rem !important; /* Negative margins MATCH header padding of 0.75rem */
    width: fit-content !important; /* Dynamic width based on content */
  }

  /* Mobile hover effect adjustments */
  a.actual-title.with-ellipsis:hover,
  a.whitespace-pre-wrap.actual-title.with-ellipsis:hover {
    transform: translateX(1px) !important; /* Smaller slide effect on mobile */
    padding-left: 1.2rem !important; /* Adjust padding for thicker border */
  }
}

@media (max-width: 480px) {
  .unresolved-incident.impact-critical::before {
    font-size: 1.1rem !important; /* Even smaller font size on small mobile */
    padding: 0.5rem 0.5rem !important; /* Very compact padding on small mobile */
    margin-bottom: 0.75rem !important; /* Reduced margin on small mobile */
  }

  .unresolved-incident.impact-maintenance::before {
    font-size: 1.1rem !important; /* Even smaller font size on small mobile */
    padding: 0.5rem 0.5rem !important; /* Very compact padding on small mobile */
    margin-bottom: 0.75rem !important; /* Reduced margin on small mobile */
  }

  .font-largest.no-link {
    font-size: 1.1rem !important; /* Even smaller font size on small mobile */
    padding: 0.5rem 0.5rem !important; /* Very compact padding on small mobile */
    margin-bottom: 0.75rem !important; /* Reduced margin on small mobile */
  }

  /* Small mobile responsive styling for incident title links - slightly smaller than headers */
  a.actual-title.with-ellipsis,
  a.whitespace-pre-wrap.actual-title.with-ellipsis {
    font-size: 1rem !important; /* Slightly smaller than 1.1rem headers on small mobile */
    padding: 0.5rem 0.5rem 0.5rem 0.8rem !important; /* Very compact padding with extra left for border */
    margin: 0 -0.85rem 0.5rem -0.85rem !important; /* Negative margins MATCH header padding of 0.5rem */
    width: fit-content !important; /* Dynamic width based on content */
  }

  /* Small mobile hover effect adjustments */
  a.actual-title.with-ellipsis:hover,
  a.whitespace-pre-wrap.actual-title.with-ellipsis:hover {
    transform: translateX(1px) !important; /* Small slide effect on small mobile */
    padding-left: 1rem !important; /* Adjust padding for thicker border */
  }
}

.incident-title.impact-maintenance.font-large {
  background-color: transparent !important;
  color: #282E37 !important;
  margin-bottom: 0.75rem !important; /* Reduced space after maintenance titles */
  border-radius: 0 !important;
}

.updates.font-regular {
  border: none !important;
  padding: 0.75rem 0 !important; /* Reduced space around updates */
  margin-bottom: 0.75rem !important; /* Reduced space after updates */
}


/* Page title full width styling - target specific container structure */
body > div.layout-content.status.status-incident > div.container {
  width: 100% !important;
  max-width: 1200px !important; /* Match header container max-width */
  padding-left: 15px !important; /* Match header container padding */
  padding-right: 15px !important; /* Match header container padding */
  margin-left: auto !important; /* Center the container */
  margin-right: auto !important; /* Center the container */
}

/* Adjust for sectional system with side navigation */
.sectional-container .container,
.sectional-container .unresolved-incident,
.sectional-container .incidents-list,
.sectional-container .unresolved-incident.impact-critical,
.sectional-container .unresolved-incident.impact-maintenance,
.sectional-container .incidents-list.format-expanded {
  width: 100% !important;
  max-width: calc(1200px - 120px) !important; /* Reduce max-width to account for full side nav padding */
  padding-left: 15px !important; /* Match header container padding */
  padding-right: 15px !important; /* Match header container padding */
  margin-left: auto !important; /* Center the container */
  margin-right: auto !important; /* Auto centering */
  box-sizing: border-box !important;
}

.page-title {
  width: 100% !important;
  max-width: 1200px !important; /* Match header container max-width */
  padding-left: 15px !important; /* Match header container padding */
  padding-right: 15px !important; /* Match header container padding */
  margin-left: auto !important; /* Center the container */
  margin-right: auto !important; /* Center the container */
}

/* Adjust page title for sectional system */
.sectional-container .page-title {
  max-width: calc(1200px - 120px) !important; /* Reduce max-width to account for full side nav padding */
  margin-right: auto !important; /* Auto centering */
  box-sizing: border-box !important;
}

/* Mobile adjustments - disable side nav adjustments on mobile */
@media (max-width: 768px) {
  .sectional-container .container,
  .sectional-container .unresolved-incident,
  .sectional-container .incidents-list,
  .sectional-container .unresolved-incident.impact-critical,
  .sectional-container .unresolved-incident.impact-maintenance,
  .sectional-container .incidents-list.format-expanded {
    max-width: 1200px !important; /* Restore full width on mobile */
    margin-right: auto !important; /* Standard centering on mobile */
  }

  .sectional-container .page-title {
    max-width: 1200px !important; /* Restore full width on mobile */
    margin-right: auto !important; /* Standard centering on mobile */
  }
}

/* Alternative approach - target the container holding page-title */
.container:has(.page-title),
.page-title-container,
div:has(> .page-title) {
  width: 100% !important;
  max-width: 1200px !important; /* Match header container max-width */
  padding-left: 15px !important; /* Match header container padding */
  padding-right: 15px !important; /* Match header container padding */
  margin-left: auto !important; /* Center the container */
  margin-right: auto !important; /* Center the container */
}

/* Ensure page title contents use full available width */
.page-title h1,
.page-title .font-largest,
.page-title .subheader {
  width: 100% !important;
  max-width: 100% !important;
}

/* Override page title h1 color to match design system */
.page-title h1,
.page-title h1.color-primary,
.page-title h1.incident-name {
  color: #282E37 !important; /* Diligent font color */
}

/* Keep the bluehero visible */
.bluehero {
  display: block !important;
  margin-bottom: 2rem !important; /* Reduced spacing */
}

/* Global button styling for modals and forms */
.flat-button {
  background-color: #EE312E !important; /* Diligent red */
  color: white !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important; /* Better button padding */
  margin: 0.5rem 0 !important; /* Consistent button spacing */
  transition: all 0.3s !important;
  border: none !important;
}

.flat-button:hover {
  background-color: #cc1a17 !important; /* Darker red for hover */
}

/* Prevent body scroll issues when modal is open */
body.modal-open {
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* Ensure modal overlay doesn't interfere with header */
.modal-backdrop.show {
  opacity: 0.5 !important;
}

/* Global typography */
h3, h4 {
  color: #282E37; /* Diligent font color */
}

/* Global link styling - applies to links not explicitly overridden */
a:not(.incident-title):not(.actual-title):not(.flat-button):not(.subscribe-button):not(.color-primary):not(.diligent-button):not(.whitespace-pre-wrap):not(.contact-support-link) {
  color: #EE312E !important; /* Diligent red */
  text-decoration: none !important;
}

/* Global link hover effect */
a:not(.incident-title):not(.actual-title):not(.flat-button):not(.subscribe-button):not(.color-primary):not(.whitespace-pre-wrap):not(.diligent-button):hover {
  color: #cc1a17 !important; /* Darker red on hover */
  text-decoration: underline !important;
}

/* Custom graph class if needed */
.graph-element {
  color: #00D3F3; /* Diligent graph color */
}

/* Global text color styles */
.text-center {
  padding: 1rem;
  color: #A0A2A5; /* Diligent light font color */
}

/* ===== FIX: Always use white background for body ===== */
body {
  background-color: #fff !important;
}