/* Define Theme Variables */
:root {
    --kb-bg-color: #136ef6; /* Dark mode card background */
    --kb-bg-hover: #0e5bcc; /* Dark mode hover background */
    --kb-text-color: #ffffff; /* Dark mode text color */
}

[data-theme="light"] {
    --kb-bg-color: #e0e0e0; /* Light mode card background */
    --kb-bg-hover: #ccc; /* Light mode hover background */
    --kb-text-color: #333333; /* Light mode text color */
}

/* 
  .layout-content.status .custom-header-container
  - Ensures text in the custom header container wraps properly.
  - Adds a bottom margin to separate the header from following content.
*/
.layout-content.status .custom-header-container {
    overflow-wrap: break-word; /* Ensure long words break to next line */
    margin-bottom: 0px; /* Add space between header and the components */
}

/* 
  .masthead
  - Creates a full-width header section with a vertical gradient background.
  - Uses flexbox to center its content both horizontally and vertically.
  - Sets a minimum height to ensure adequate vertical space.
*/
.masthead {
    background: #ffffff; /* Solid white background */
    width: 100%; /* Ensure the masthead spans the full width */
    padding: 2rem; /* Add padding to the masthead */
    display: flex; /* Use flexbox to center items */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    min-height: 150px; /* Set a minimum height for the masthead */
}

/* 
  .masthead-banner
  - Styles the banner within the masthead.
  - Applies a black background (using !important to override other styles) and consistent padding.
*/
.masthead-banner,
.masthead-container.basic {
    background-color: #fff !important; /* Set the background color to white */
    padding: 1rem; /* Add padding to the banner */
    margin-bottom: 3rem;
}

/* 
  .masthead-banner-inner
  - Arranges inner elements (such as headings and dropdowns) using flexbox.
  - Justifies content with space between items and vertically centers them.
  - Sets text color to white for contrast against the dark background.
  - Uses flex-wrap: nowrap to keep items on one row on larger screens.
*/
.masthead-banner-inner,
.masthead.has-logo {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align items together at the start */
    flex-wrap: nowrap;
    color: #000;
}

/* 
  .masthead-banner h1
  - Removes default margins and paddings from the heading.
  - Note: Previous flex and text-align rules were removed to allow natural left alignment.
*/
.masthead-banner h1 {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    /* Removed flex: 1 1 100% and text-align: center to let it naturally align left */
}

/* Add spacing between the image and heading */
.masthead-banner-inner h1.page-name {
    margin-left: 10px; /* Adjust spacing as needed */
}

#checklist-link:hover {
    background-color: #d4d4d4 !important;
}
#show-updates-dropdown:hover {
    background-color: #1550a9 !important;
}

/* 
  .masthead-banner .updates-dropdown-container > a.show-updates-dropdown
  - Styles the dropdown trigger link with padding, background color, border-radius, and bold white text.
  - Adds a top margin to separate it from surrounding elements.
*/
.masthead-banner .updates-dropdown-container > a.show-updates-dropdown {
    padding: 0.5em 1em; /* Add padding to the button */
    line-height: 1.5rem; /* Set the line height */
    border-radius: 0.2rem; /* Add a border radius */
    background-color: #126ef6; /* Set the background color */
    font-weight: bold; /* Set the font weight */
    color: #fff; /* Set the text color */
    margin-top: 10px; /* Add space above the button */
}

/*
  .masthead-banner .updates-dropdown-container > a.show-updates-dropdown-white
  - Styles the dropdown trigger link as a button.
  - Sets a white background with a #136ef6 font color.
  - Retains padding, border-radius, and margin for consistency.
*/
.masthead-banner .updates-dropdown-container > a.show-updates-dropdown-white {
    padding: 0.5em 1em; /* Add padding to the button */
    line-height: 1.5rem; /* Set the line height */
    border-radius: 0.2rem; /* Add a border radius */
    background-color: #fff; /* Set the background color to white */
    font-weight: bold; /* Set the font weight */
    color: #136ef6; /* Set the text color to #136ef6 */
    margin-top: 10px; /* Add space above the button */
}

/* 
  .updates-dropdown-section
  - Sets the text color for sections within the updates dropdown to black.
*/
.updates-dropdown-section {
    color: black; /* Set the text color */
}

/* 
  Dropdown Navigation Width
  - Within the updates dropdown container, each navigation link is assigned a width of roughly 16.67%,
    effectively distributing six links evenly across the container.
*/
.updates-dropdown-container
    .updates-dropdown
    .updates-dropdown-nav.nav-items-6
    a {
    width: 16.666666667%; /* Set the width of each item */
}

/* 
  .logo
  - Defines a default fixed width (500px) for the logo container.
*/
.logo {
    width: 400px; /* Default container width */
}

/* 
  .logo img
  - Ensures the logo image scales to the width of its container.
  - Maintains aspect ratio by setting height to auto and limits maximum width to 500px.
*/
.logo img {
    width: 100%; /* Set the image width to 100% of the container */
    max-width: 500px; /* Set the maximum width of the image */
    height: auto; /* Allow the height to adjust automatically */
}

/* 
  Responsive Logo Adjustment
  - For viewports smaller than 500px, the logo container width adjusts to 100% for better responsiveness.
*/
@media (max-width: 500px) {
    .logo {
        width: 100%; /* Allow the container to shrink */
    }
}

/* Remove History Link */
.history-footer-link {
    display: none; /* Hide the history link */
}

/* Remove Past Incidents Link */
.incidents-list {
    display: none; /* Hide the past incidents link */
}

/*
  Replace "x" with the number of days you want to show + 2.
  For example, if you wanted to show the last 3 days of history, you would replace x with 5.
  Do the replacements described above and then paste the following into your Custom CSS section.
*/
.status-day:nth-child(n + 0) {
    display: none; /* Hide the days you don't want to show */
}

@media (max-width: 576px) {
    .masthead {
        padding: 1rem;
        min-height: 200px;
    }
    .masthead-banner,
    .masthead-container.basic {
        padding: 1rem;
    }
    .masthead-banner-inner,
    .masthead.has-logo {
        flex-wrap: wrap; /* Allow wrapping on very small screens */
        justify-content: center;
    }
    /* Force the logo and buttons to be on separate rows */
    .masthead-banner-inner .logo-and-status,
    #replace-with-subscribe,
    #checklist-link {
        flex: 0 0 100%;
        text-align: center;
        margin-bottom: 1rem;
    }

    .status-legend {
        flex-wrap: wrap; /* Allow wrapping on small screens */
    }
    .legend-item {
        /* Try to make two items per row with some gap */
        flex: 1 1 calc(50% - 20px);
        font-size: 0.9rem;
    }
    /* If the breaker is interfering with the layout, hide it */
    .breaker {
        display: none;
    }
}

/* 
  .status-legend
  - Sets up the container for status legends using flexbox.
  - Centers the items and adds a consistent gap.
  - Prevents wrapping on larger screens.
*/
.status-legend {
    display: flex; /* Use flexbox to create a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-wrap: nowrap; /* Prevent wrapping on larger screens */
    gap: 20px; /* Add space between items */
}

/* 
  .legend-item
  - Styles individual legend items with flexbox.
  - Ensures items are centered vertically, have a readable font size,
    and maintain a minimum width for legibility.
*/
.legend-item {
    display: flex; /* Use flexbox to create a row */
    align-items: center; /* Center items vertically */
    font-size: 1.1rem; /* Set the font size */
    flex: 1 1 auto; /* Let items grow and shrink naturally */
    min-width: 100px; /* Prevent items from becoming too narrow */
}

/* Optional: Hide the breaker if it’s not needed on larger screens */
.breaker {
    display: none; /* Hide the breaker */
}

.layout-content.status.status-index
    .components-section
    .components-container.one-column
    .component-container {
    width: 100%;
    float: none;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-top-width: 1px !important;
}

/* 
  .status-legend
  - Sets up the container for status legends using flexbox.
  - Centers the items and adds a consistent gap.
  - Prevents wrapping on larger screens.
*/
.status-legend {
    display: flex; /* Use flexbox to create a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-wrap: nowrap; /* Prevent wrapping on larger screens */
    gap: 20px; /* Add space between items */
}

/* 
  .legend-item
  - Styles individual legend items with flexbox.
  - Ensures items are centered vertically, have a readable font size,
    and maintain a minimum width for legibility.
*/
.legend-item {
    display: flex; /* Use flexbox to create a row */
    align-items: center; /* Center items vertically */
    font-size: 1.1rem; /* Set the font size */
    flex: 1 1 auto; /* Let items grow and shrink naturally */
    min-width: 120px; /* Prevent items from becoming too narrow */
}

/* Optional: Hide the breaker if it’s not needed on larger screens */
.breaker {
    display: none; /* Hide the breaker */
}

/* 
  .component-statuses-legend
  - Styles the container for component statuses.
  - Uses flexbox with wrapping enabled for smaller screens.
  - Centers the content and provides consistent spacing.
  - Adds top margin and horizontal padding for improved layout on small screens.
*/
.component-statuses-legend {
    display: flex; /* Use flexbox to create a row */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-between; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    gap: 15px; /* Consistent spacing between items */
    width: 100%; /* Ensure the legend spans the full width */
    margin-top: 50px; /* Add space above the legend */
}

/* 
  Center text within the status legend items inside the component statuses legend.
*/
.component-statuses-legend .status-legend {
    text-align: center; /* Center the text */
}

/* 
  .regional-header
  - Ensures the regional header spans full width and provides a top margin for spacing.
  - Uses flex properties to allow natural growth and shrinkage.
*/
.regional-header {
    flex: 1 0 100%; /* Grow and shrink as needed, but always occupy 100% width */
    width: 100%; /* Ensure the header spans the full width */
    margin: 3rem 0 1rem;
}

/* 
  .global-header
  - Ensures the global header spans the full width.
  - Uses flex properties for consistent behavior similar to the regional header.
*/
.global-header {
    flex: 1 0 100%; /* Grow and shrink as needed, but always occupy 100% width */
    width: 100%; /* Ensure the header spans the full width */
}

.faq-container {
    margin: 0;
    text-align: left; /* Optional: ensure text is left-aligned */
    margin-top: 3rem; /* Add space above the container */
}

/* Dark Theme KB Cards */

/* Knowledge Base Container */
.kb-container {
    display: flex; /* Use flexbox for layout */
    gap: 20px; /* Adjust spacing between the cards */
    align-items: stretch; /* Ensure cards stretch to the same height */
    margin-bottom: 1rem;
}

/* Individual KB Card */
.kb-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    text-decoration: none;
    border-radius: 5px;
    /* Add a subtle border around the entire card: */
    border: 1px solid #e0e0e0;

    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition:
        color 0.2s,
        box-shadow 0.2s;
}

/* Hover Effect for KB Cards */
.kb-link:hover {
    color: #136ef6;
}

/* Top Icon Styling */
.kb-top-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.kb-top-icon img {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

.kb-top-icon img[alt="SkyTab Icon"] {
    margin: -1px; /* adjust as needed */
    height: 72px;
}

/* Center the Card Text */
a .kb-card-text {
    text-align: center;
    margin-bottom: 10px;
}

/* Position Arrow Icon at the Bottom */
.kb-arrow-icon img {
    width: 28px;
    height: auto;
}

/* Match Atlassian Statuspage Subscribe via email button color */
.flat-button,
.masthead .updates-dropdown-container .show-updates-dropdown,
.layout-content.status-full-history .show-filter.open {
    background-color: #136ef6 !important;
}

/* Global primary button standard (exclude subscribe + offline checklist controls) */
:is(button, input[type="button"], input[type="submit"], .flat-button, .btn):not(
        #checklist-link
    ):not(.cancel-btn):not(.btn-outline-secondary):not(.subscribe-button):not(
        .show-updates-dropdown
    ):not(.show-updates-dropdown-white) {
    min-height: 40px;
    padding: 0.5em 1em;
    line-height: 1.5rem;
    border-radius: 0.2rem;
    background-color: #136ef6 !important;
    color: #fff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    border: 1px solid #136ef6 !important;
}

/*–– Subscribe button should look exactly like the show‑updates‑dropdown ––*/
.flat-button.subscribe-button {
    display: inline-block; /* same as your dropdown */
    padding: 0.5em 1em; /* identical padding */
    line-height: 1.5rem; /* identical line‑height */
    border-radius: 0.2rem; /* identical border‑radius */
    background-color: #136ef6 !important; /* identical bg color */
    font-weight: bold !important; /* identical font weight */
    color: #fff !important; /* identical text color */
    text-decoration: none; /* remove underline */
    margin-top: 10px; /* identical top margin */
}

/* hover state */
.flat-button.subscribe-button:hover {
    background-color: #1550a9 !important; /* identical hover color */
}

/* Cancel button should match Offline Checklists button styling */
.cancel-btn,
.flat-button.cancel-btn {
    color: #136ef6 !important;
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    font-weight: bold !important;
    font-size: 16px !important;
    min-height: 40px;
    padding: 0.5em 1em;
    line-height: 1.5rem;
}

.cancel-btn:hover,
.cancel-btn:focus,
.flat-button.cancel-btn:hover,
.flat-button.cancel-btn:focus {
    color: #136ef6 !important;
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
}

/* Match native Statuspage caret behavior/icons */
.group-parent-indicator.fa-plus-square-o:before {
    content: "\f105" !important; /* fa-angle-right */
    font-family: FontAwesome !important;
    font-weight: normal !important;
}

.group-parent-indicator.fa-minus-square-o:before {
    content: "\f107" !important; /* fa-angle-down */
    font-family: FontAwesome !important;
    font-weight: normal !important;
}

/* Remove 90 day uptime wrapper */
.shared-partial.uptime-90-days-wrapper {
    display: none;
}

/* Actions container to align Subscribe and Dropdown side-by-side */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Make checklist button look like Bootstrap's btn-light without changing markup */
.header-actions .btn.btn-outline-secondary {
    color: #136ef6; /* blue text */
    background-color: #f8f9fa; /* light gray bg */
    border-color: #f8f9fa; /* match light bg */
}

/* Make the checklist button text bold */
.header-actions .btn.btn-outline-secondary {
    font-weight: bold;
}

.header-actions .btn.btn-outline-secondary:hover,
.header-actions .btn.btn-outline-secondary:focus {
    color: #136ef6;
    background-color: #e2e6ea; /* slightly darker on hover */
    border-color: #dae0e5;
}
.header-actions .btn.btn-outline-secondary:active,
.header-actions .show > .btn.btn-outline-secondary.dropdown-toggle {
    color: #136ef6;
    background-color: #e2e6ea; /* keep light tone when menu is open */
    border-color: #dae0e5;
}

/* Minimal Bootstrap‑like button reset */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition:
        color 0.15s ease-in-out,
        background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

/* Outline secondary style */
.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Make Subscribe and Checklist controls the exact same size */
.header-actions .btn,
.header-actions .flat-button.subscribe-button,
.header-actions #replace-with-subscribe a,
.header-actions #replace-with-subscribe button {
    /* Standardize box metrics */
    font-size: 1rem;
    line-height: 1rem;
    padding: 0.5em 1em;
    border-radius: 0.2rem;
}

/* Dropdown wrapper */
.dropdown {
    position: relative;
}

/* Toggle caret mimic */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Menu positioning + base styles */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 12rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    right: 0; /* align to right edge of button */
}

/* Fix: prevent hover background from escaping menu corners */
.dropdown-menu {
    overflow: hidden; /* clip child hover backgrounds to rounded corners */
}

/* Show state */
.dropdown.show .dropdown-menu {
    display: block;
}

/* Dropdown items */
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
/* Fix: avoid width+padding overflow on items */
.dropdown-item {
    box-sizing: border-box; /* include padding in width */
    width: auto; /* let it naturally fill the container without overflow */
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e37b9;
    background-color: #f8f9fa;
}

/* Respect small screens: stack actions */
@media (max-width: 576px) {
    .header-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* Large screens: keep statuses on a single line when using .font-small */
@media (min-width: 992px) {
    .component-statuses-legend.font-small {
        flex-wrap: nowrap; /* prevent wrapping of the outer legend row */
    }

    /* Ensure the inner status-legend row also stays on a single line */
    .component-statuses-legend.font-small .status-legend {
        flex-wrap: nowrap;
    }

    /* Allow items to shrink, remove right margin, and keep labels on one line */
    .component-statuses-legend.font-small .legend-item {
        flex: 0 1 auto;
        min-width: 0; /* override base 120px min-width */
        margin-right: 0; /* as requested */
        white-space: nowrap;
    }
}

/* Override upstream 5% right margin on legend items to prevent wrapping; use container gap for spacing */
.layout-content.status.status-index
    .components-section
    .component-statuses-legend
    .legend-item {
    margin-right: 0 !important;
}

/* Make any .container used with/inside kb-container span full width */
.kb-container .container,
.kb-container.container {
    width: 100% !important;
    max-width: 100% !important;
}

.layout-content.status.status-index .unresolved-incidents {
    margin-bottom: 38.5px;
}

.components-section .component-statuses-legend {
    display: none !important;
}

/* Components heading controls: keep Select none left, actions right */
.components-alert-message {
    margin: 0 0 8px;
}

.components-heading-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow: visible;
}

.components-heading-controls #component-selector-toggle {
    display: inline-block;
    white-space: nowrap;
}

.components-heading-controls .form-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
    white-space: nowrap;
}

.components-heading-controls .form-actions .cancel-btn,
.components-heading-controls .form-actions .flat-button {
    margin: 0;
    display: inline-block;
    padding: 0.5em 1em;
    line-height: 1.5rem;
    border-radius: 0.2rem;
    text-decoration: none;
}

.components-heading-controls .form-actions .flat-button {
    background-color: #136ef6 !important;
    color: #fff !important;
    font-weight: bold !important;
    border: 1px solid #136ef6 !important;
}

.components-heading-controls .form-actions .flat-button:hover,
.components-heading-controls .form-actions .flat-button:focus {
    background-color: #1550a9 !important;
    border-color: #1550a9 !important;
}

.components-heading-controls .form-actions .cancel-btn {
    color: #136ef6 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #f8f9fa !important;
    font-weight: bold !important;
}

.components-heading-controls .form-actions .cancel-btn:hover,
.components-heading-controls .form-actions .cancel-btn:focus {
    color: #136ef6 !important;
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
}