:root {
    --main-bg: #f9fafb;
    --main-content-bg: #ffffff;

    --main-txt: #4C4C4C;
    --main-white: #ffffff;
    --main-red: #ef5350;

    --main-input-bg: #ffffff;
    --main-border-color: rgb(227, 221, 216);
    --bnp-color-spacer: #e5e7eb;

    --bnp-color-primary: #B3D83A;
    --bnp-color-primary-light: #A7C134;
    --bnp-color-primary-dark: #659327;
    --bnp-color-secondary: #C0D345;
    --bnp-color-secondary-light: #B9CF3E;
    --bnp-color-secondary-dark: #72A82D;

    --color-md-blue: #1e88e5;
    --color-md-blue-hover: #1976d2;
    --color-md-green: #4caf50;
    --color-md-green-hover: #43a047;
    --color-md-red: #f44336;
    --color-md-red-hover: #e53935;
    --color-md-cyan: #00bcd4;
    --color-md-cyan-hover: #00acc1;
    --color-md-lightblue: #03a9f4;
    --color-md-amber: #ffcc00;
    --color-md-amber-hover: #ffc400;
    --color-md-gray-300: #E0E0E0;
    --color-md-gray-500: #9E9E9E;
    --color-md-gray-600: #757575;
    --color-md-gray-700: #616161;

    --service-default-bg: var(--main-content-bg);
    --service-default-badge: rgba(224, 224, 224, 0.42);
    --service-default-border: var(--main-border-color);

    --service-maintenance-bg: var(--main-content-bg);
    --service-maintenance-badge: rgba(202, 138, 4, 0.1);
    --service-maintenance-txt: var( --color-md-blue);
    --service-maintenance-border: var(--main-border-color);

    --service-warning-bg: rgba(254, 252, 231, 0.7);
    --service-warning-badge: rgba(202, 138, 4, 0.1);
    --service-warning-txt: #ca8a04;
    --service-warning-border: rgba(255, 204, 0, 0.38);

    --service-critical-bg: rgba(254, 242, 242, 0.7);
    --service-critical-badge: rgba(220, 38, 38, 0.1);
    --service-critical-txt: #dc2626;
    --service-critical-border: #fecaca;
}

/* -------------------------------------------------
   Base / Reset
------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--main-bg);
    color: var(--main-txt);
}

.container {
    min-height: 100vh;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.max-w-4xl {
    max-width: 56rem;
    margin: 0 auto;
    width: 100%;
}



/* -------------------------------------------------
   Header
------------------------------------------------- */
header {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header img.logo {
    width: 150px;
}

header h1 {
    font-size: 32px;
    font-weight: 400;
    margin: 0;
    padding:0
}

/* -------------------------------------------------
   Sections
------------------------------------------------- */
.section {
    margin-bottom: 40px;
}

.section.maintenance {
    display:none;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 24px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--main-txt);
}

.section-title i {
    color: var(--bnp-color-primary-light);
    font-size: 20px;
}

/* -------------------------------------------------
   Card Layouts
------------------------------------------------- */
.incidents-container,
.maintenance-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-card {
    border: 1px dashed var(--main-border-color);
    border-radius: 8px;
    padding: 24px;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

/* -------------------------------------------------
   Incident Cards
------------------------------------------------- */

/* Incident cards */
.status-card.maintenance {
    background-color: var(--service-maintenance-bg);
    border-color: var(--service-maintenance-border);
    border-style: solid;
}

.status-card.warning {
    background-color: var(--service-warning-bg);
    border-color: var(--service-warning-border);
    border-style: solid;
}

.status-card.critical {
    background-color: var(--service-critical-bg);
    border-color: var(--service-critical-border);
    border-style: solid;
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.status-info {
    display: flex;
    gap: 12px;
    flex: 1;
}

.incident-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--main-txt);
}

.incident-description {
    font-size: 14px;
    margin-top: 8px;
    color: #4b5563;
}

.incident-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.severity-badge {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background-color: var( --service-default-badge);
}
.severity-badge.critical {
    background-color: var(--service-critical-badge);
    color: var(--service-critical-txt);
}
.severity-badge.maintenance {
    color: var(--service-maintenance-txt);
}
.severity-badge.warning {
    background-color: var(--service-warning-badge);
    color: var(--service-warning-txt);
}

.affected-services {
    margin: 16px 0;
}

.status-time-label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
.status-time-range {
    color: #4b5563;
    font-size: 14px;
}

.affected-services-label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-tag {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: var( --service-default-badge);
    color: var(--main-txt);
}
.status-card.warning .service-tag {
    background-color: var(--service-warning-badge);
}
.status-card.critical .service-tag {
    background-color: var(--service-critical-badge);
}

.affected-services-label { color: #4b5563; } /* todo: color: var(--bnp-color-primary-dark); */
.maintenance-icon { color: var(--bnp-color-primary-dark); }

/* -------------------------------------------------
   Progress Bar
------------------------------------------------- */

.progress-container {
    margin-top: 16px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s;
    background-color: var(--color-md-gray-300);
}

.progress-label,
.progress-value {
    font-size: 12px;
    font-weight: 500;
}

.progress-label,
.progress-value {
    color: #4b5563;
}

.progress-bar {
    background-color: rgba(226, 232, 240, 0.3);
}

.progress-fill.critical { background-color: var(--service-critical-txt); }
.progress-fill.warning { background-color: var(--service-warning-txt); }
.progress-fill.maintenance { background-color: var(--service-maintenance-txt); }


/* -------------------------------------------------
   Footer / Empty States
------------------------------------------------- */
.footer {
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid;
    text-align: center;
    font-size: 14px;
    color: var(--color-md-gray-500);
    border-color: var(--bnp-color-spacer);
}


/* Loading / Msg */
.loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-md-gray-600);
    align-items: center;
    justify-content: center;
    display: flex;
}

.msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: 8px;
    font-size: 16px;
    margin: 10px 0;
    color: #1e1e1e;
    background: #f4f6f8;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.msg i {
    font-size: 24px;
}

.msg.info {
    background-color: var(--color-md-blue);
    color: #ffffff;
}
.msg.success {
    background-color: var(--color-md-green);
    color: #ffffff;
}
.msg.error {
    background-color: var(--color-md-red);
    color: #ffffff;
}



/* #################################################
   RESPONSIVE
################################################# */

@media only screen and (max-width: 600px) {

    .container {
        padding: 20px 15px;
    }

    .hide-mobile {
        display:none;
    }

    .status-card {
        padding: 15px;
    }

    header {
        border-bottom: 1px solid;
        border-color: var(--bnp-color-spacer);
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    header h1 {
        font-size: 24px;
    }

    header img.logo {
        width: 100px;
    }
}