/* ============================================================
   NOC.sba.nl - status page styling
   SBA huisstijl: blauw #005FD7, oranje #FF6D02, groen #037A28, zwart #000
   ============================================================ */

/* Brand variables */
:root {
    --sba-black:  #000000;
    --sba-blue:   #005FD7;
    --sba-orange: #FF6D02;
    --sba-green:  #037A28;
    --sba-red:    #D32F2F;
    --sba-gray:   #6c757d;
    --sba-bg:     #f4f6f9;
}

/* Base */
body {
    background: var(--sba-bg);
    color: #1b1f24;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The header bar */
.noc-header {
    background: var(--sba-black);
    padding: 14px 0;
}

/* The brand link in the header */
.noc-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* The SBA icon logo */
.noc-logo {
    width: 34px;
    height: 34px;
    margin-right: 12px;
}

/* The brand wordmark */
.noc-brand-text {
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.5px;
}

/* The overall status banner */
.noc-banner {
    padding: 32px 0;
    color: #fff;
    background: linear-gradient(135deg, #001f47, #0049a6);
}

/* Banner colour per severity level */
.noc-banner.level-operational {
    background: linear-gradient(135deg, #024d1a, var(--sba-green));
}

/* Banner colour for a minor incident */
.noc-banner.level-minor {
    background: linear-gradient(135deg, #b34c00, var(--sba-orange));
}

/* Banner colour for a major incident */
.noc-banner.level-major {
    background: linear-gradient(135deg, #8e1f1f, var(--sba-red));
}

/* Banner colour for maintenance */
.noc-banner.level-maintenance {
    background: linear-gradient(135deg, #001f47, var(--sba-blue));
}

/* Banner title */
.noc-banner-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

/* Banner subtitle */
.noc-banner-sub {
    opacity: 0.92;
    font-size: 14px;
}

/* The "last updated" inline note */
.noc-updated {
    display: inline-block;
    margin-left: 8px;
    opacity: 0.75;
}

/* The status dot */
.noc-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

/* The large banner dot */
.noc-dot-lg {
    width: 22px;
    height: 22px;
    margin-right: 18px;
}

/* Main content wrapper */
.noc-main {
    padding: 32px 15px 48px;
}

/* Section titles */
.noc-section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--sba-black);
}

/* Sub-section title */
.noc-section-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--sba-black);
}

/* A single incident card */
.noc-incident {
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid var(--sba-gray);
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Incident card accent per severity */
.noc-incident.sev-major       { border-left-color: var(--sba-red); }
.noc-incident.sev-minor       { border-left-color: var(--sba-orange); }
.noc-incident.sev-maintenance { border-left-color: var(--sba-blue); }

/* Incident title */
.noc-incident-title {
    font-size: 16px;
    font-weight: 600;
    margin: 8px 0 0;
}

/* Incident description text */
.noc-incident-desc {
    margin: 8px 0 0;
    color: #3a4149;
}

/* Severity badge */
.noc-badge {
    color: #fff;
    font-weight: 600;
}

/* Severity badge colours */
.badge-sev-major       { background: var(--sba-red); }
.badge-sev-minor       { background: var(--sba-orange); }
.badge-sev-maintenance { background: var(--sba-blue); }

/* Status badge next to the severity */
.noc-status-badge {
    margin-left: 4px;
    border: 1px solid #dde2e8;
}

/* Service tags on an incident */
.noc-services {
    margin-top: 12px;
}

/* A single service tag */
.noc-service-tag {
    display: inline-block;
    background: #eef2f7;
    color: #38414a;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 12px;
    margin: 2px 4px 2px 0;
}

/* The services grid */
.noc-service-grid {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* A single service row */
.noc-service-row {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #eef1f5;
}

/* No border on the last service row */
.noc-service-row:last-child {
    border-bottom: none;
}

/* The service name */
.noc-service-name {
    margin-left: 14px;
    font-weight: 500;
}

/* The service state label on the right */
.noc-service-state {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
}

/* The admin toggle link */
.noc-admin-toggle {
    color: var(--sba-gray);
    font-size: 13px;
}

/* The admin panel */
.noc-admin {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Checkbox group in the form */
.noc-checkboxes {
    display: flex;
    flex-wrap: wrap;
}

/* A single checkbox label */
.noc-check {
    width: 50%;
    font-weight: 400;
    margin-bottom: 6px;
}

/* The primary SBA button */
.btn-sba {
    background: var(--sba-blue);
    border-color: var(--sba-blue);
    color: #fff;
    font-weight: 600;
}

/* Hover state of the primary button */
.btn-sba:hover {
    background: #004cac;
    border-color: #004cac;
    color: #fff;
}

/* The admin incident table */
.noc-admin-table td {
    vertical-align: middle;
}

/* Footer */
.noc-footer {
    background: var(--sba-black);
    color: #cfd6de;
    padding: 24px 0;
    text-align: center;
    font-size: 14px;
}

/* Footer links */
.noc-footer a {
    color: #fff;
    text-decoration: none;
}

/* Footer link hover */
.noc-footer a:hover {
    text-decoration: underline;
}

/* Responsive: single column checkboxes on small screens */
@media (max-width: 575px) {
    .noc-check {
        width: 100%;
    }
    .noc-banner-title {
        font-size: 21px;
    }
}