/* ===== FONT SETUP ===== */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* Fix for Chrome */
}

@supports (font-variation-settings: normal) {
  :root { 
    font-family: InterVariable, sans-serif; 
  }
}

.page-title::before {
    content: "";
    display: block;
    width: 128px;
    height: 32px;
    background-image: url("//dka575ofm4ao0.cloudfront.net/pages-transactional_logos/retina/141632/Portbase_logo_Blue_RGB_300px-d76186c3-b809-4585-93e6-630f8e3a7fbf.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    margin-bottom: 20px;
}

.fa{
  user-select: none;
}

body{
 padding: 0px 16px; 
}

/* ===== LAYOUT & CONTAINERS ===== */
.masthead-container.basic {
  max-width: 100% !important;
  width: 100% !important;
}

.container {
  padding: 0 !important;
  max-width: 600px;
  width:100%;
  
}

body.status.history .container {
  background: #f7fafc !important;
  padding: 24px !important;
  border-radius: 8px !important;
}

.layout-content.status.status-index .components-section{
 margin-bottom: 48px; 
}


.component-container.border-color:not(:first-child) {
    padding-top: 8px!important;
}


.component-container.border-color:not(:last-child) {
    padding-bottom: 8px!important;
}

/* ===== COMPONENT SECTIONS ===== */
.components-section, 
.incidents-list {
  background: #f7fafc !important;
  border-radius: 8px !important;
}

.component-container.border-color {
  border-color: transparent !important;
}

.layout-content.status.status-full-history .grouped-items-selector{
  left: 24px;
}


.component-container,
.group-parent-indicator {
  user-select: none!important;
}

/* ===== STATUS & PAGE ELEMENTS ===== */
.page-status {
  border-radius: 4px !important;
  margin-bottom: 24px;
}

.component-section {
  margin-bottom: 24px;
}

.components-section {
  margin-bottom: 24px;
}

/* ===== MASTHEAD STYLING ===== */
.layout-content.status .masthead-container.basic .masthead {
  padding: 16px 24px 0 24px;
  margin-bottom: 24px;
}

.layout-content.status .masthead-container.basic .masthead .logo-container {
  padding-top: 12px;
  max-width: 160px;
}

.layout-content.status.status-index .page-status {
  margin-bottom: 24px;
}

/* ===== TYPOGRAPHY & TEXT COLORS ===== */
h2.status.font-large {
  margin-bottom: 0;
}

h1.incident-name{
color: #002357 !important;
}



.layout-content .incident-title,
.incidents-list .incident-title.impact-minor a,
.incidents-list .incident-title.impact-major a {
  color: #002357 !important;
}

.layout-content.status.status-incident .page-title {
  text-align: left;
}

/* ===== BUTTONS ===== */
a#show-updates-dropdown, 
.flat-button {
  font-weight: 500;
  box-shadow: none !important;
  color: #ffffff !important;
  background-color: rgb(0, 89, 221);
  border-radius: 8px !important;
  text-shadow: none !important;
  text-decoration: none !important;
  height: 56px;
  align-content: center;
}

.flat-button {
  font-weight: 600;
}

a#show-updates-dropdown:hover, 
.flat-button:hover {
  box-shadow: none !important;
  background-color: #0044aa !important;
  text-shadow: none !important;
  border-radius: 8px !important;
  text-decoration: none;
}

/* ===== LINKS ===== */
a {
  text-decoration: none;
}


a.previous-page,
a.next-page {
  text-decoration: none;
}

a.color-secondary{
  text-decoration: underline!important;
}

a.previous-page,a.next-page{
  text-decoration: none!important;
}


/* ===== BACKGROUND SECTIONS ===== */
.unresolved-incidents,
.components-section,
.incidents-list,
.page-footer,
.history-container,
.history-nav,
.history-backpage,
.status-full-history .container,
.status-incident .container,
.scheduled-maintenances-container {
  background: #ffffff;
}

.history-backpage, 
.page-footer {
  background: transparent !important;
}

/* ===== SPACING & PADDING ===== */
.incidents-list,
.page-footer,
.container,
.scheduled-maintenances-container {
  padding: 24px;
}

.layout-content.status .incidents-list {
  margin-top: 24px;
}

.page-footer {
  margin: 24px 0 0 0;
}

/* ===== MOBILE RESPONSIVE ===== */
@media screen and (max-width: 650px) {
  .layout-content.status .masthead-container.basic .masthead {
    padding: 8px 0px 0px;
  }
  
  .layout-content.status.status-index .components-section{
 margin-bottom: 16px; 
}

  
  .layout-content.status .masthead-container.basic .masthead .logo-container {
    float: left;
    max-width: 130px;
    margin-bottom: 0;
  }
  
  .layout-content.status .masthead-container.basic .masthead .updates-dropdown-container {
    float: right;
  }
  
  .component-container,.component-container.is-group{
   padding-left: 16px!important; 
   padding-right: 16px!important; 
  }
  
  
}