/* ============================================================
   RESET / GLOBAL
============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #071120;
    color: #e7edf6;

    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ============================================================
   APPLICATION SHELL
============================================================ */

.app-shell {
    width: 100%;
    min-height: 100vh;
}


/* ============================================================
   SIDEBAR
============================================================ */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: 305px;
    min-width: 305px;
    max-width: 305px;

    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 20px;

    background: #091625;

    border-right: 1px solid #293b52;

    overflow-y: auto;
    overflow-x: hidden;

    z-index: 100;
}


/* ------------------------------------------------------------
   SIDEBAR BRAND
------------------------------------------------------------ */

.sidebar-brand {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 10px 8px 20px;
}

.sidebar-logo {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #17263a;

    border: 1px solid #31455e;
    border-radius: 14px;

    font-size: 25px;
}

.sidebar-brand-text h2 {
    margin: 0;

    color: #f3f6fb;

    font-size: 19px;
}

.sidebar-brand-text p {
    margin: 4px 0 0;

    color: #8fa0b8;

    font-size: 13px;
}

.sidebar-divider {
    height: 1px;

    margin: 8px 0 20px;

    background: #2a3b51;
}


/* ------------------------------------------------------------
   NAVIGATION
------------------------------------------------------------ */

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 9px;

    width: 100%;
}

.nav-item {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 13px 15px;

    color: #bac7d8;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 12px;

    text-align: left;

    font-size: 15px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.nav-item:hover {
    color: #ffffff;

    background: #132135;
}

.nav-item.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(48, 105, 255, 0.28),
            rgba(118, 65, 220, 0.20)
        );

    border-color: #41589b;

    box-shadow:
        inset 4px 0 0 #5ba6ff;
}

.nav-icon {
    width: 22px;
}


/* ============================================================
   GOOGLE USER PROFILE
============================================================ */

.sidebar-user {
    margin-top: auto;

    width: 100%;

    padding: 18px 4px 4px;

    border-top: 1px solid #293b51;
}

.user-profile {
    display: flex;
    align-items: center;

    gap: 11px;

    width: 100%;

    margin-bottom: 13px;
}

.user-avatar {
    width: 42px;
    height: 42px;

    min-width: 42px;
    max-width: 42px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #385474;

    background: #172338;
}

.user-avatar-fallback {
    width: 42px;
    height: 42px;

    min-width: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background: #586bc6;

    border-radius: 50%;

    font-size: 18px;
}

.user-info {
    min-width: 0;
    flex: 1;
}

.user-name {
    color: #f1f5f9;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    margin-top: 3px;

    color: #8293aa;

    font-size: 10px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------------------------------------------------------
   SIGN OUT
------------------------------------------------------------ */

.signout-btn {
    appearance: none;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 10px 12px;

    color: #cbd5e1;

    background: #111f31;

    border: 1px solid #2e435c;
    border-radius: 10px;

    font-size: 12px;
    font-weight: 650;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.signout-btn:hover {
    color: #ffffff;

    background: #1a2a40;

    border-color: #526c8e;
}

.signout-btn:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* ============================================================
   MAIN CONTENT
============================================================ */

.main-content {
    display: block;

    width: calc(100% - 305px);

    min-height: 100vh;

    margin-left: 305px;

    padding: 54px 46px 80px;

    background: #071120;
}

.page-section {
    display: none;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
}

.page-section.active {
    display: block;
}


/* ============================================================
   PAGE HEADER
============================================================ */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 26px;

    margin-bottom: 40px;

    border-bottom: 1px solid #26394f;
}

.page-header h1 {
    margin: 6px 0 0;

    font-size: 30px;
}

.page-header p {
    margin: 8px 0 0;

    color: #91a2b9;
}

.page-actions {
    display: flex;
    align-items: center;

    gap: 14px;
}

.eyebrow {
    color: #65a9f7;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


/* ============================================================
   LIVE BADGE
============================================================ */

.live-badge {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 14px;

    color: #54e2a4;

    background: rgba(20, 184, 120, 0.12);

    border: 1px solid rgba(41, 210, 147, 0.25);
    border-radius: 20px;

    font-size: 13px;
    font-weight: 700;
}

.live-dot {
    width: 8px;
    height: 8px;

    background: #49e59e;

    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(73, 229, 158, 0.8);
}


/* ============================================================
   BUTTONS
============================================================ */

.secondary-btn {
    padding: 13px 18px;

    color: #e1e8f2;

    background: #132236;

    border: 1px solid #30475f;
    border-radius: 12px;

    font-weight: 650;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.secondary-btn:hover {
    background: #1b2d45;

    transform: translateY(-1px);
}

.primary-btn {
    padding: 15px 24px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #3268f2,
            #813deb
        );

    border: 0;
    border-radius: 13px;

    font-weight: 750;

    box-shadow:
        0 8px 25px rgba(76, 84, 255, 0.22);

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.primary-btn:hover {
    transform: translateY(-1px);
}

.primary-btn:disabled {
    opacity: 0.6;

    cursor: not-allowed;

    transform: none;
}


/* ============================================================
   HERO
============================================================ */

.hero-card {
    min-height: 340px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding: 46px;

    margin-bottom: 48px;

    background:
        linear-gradient(
            135deg,
            #172944,
            #172442
        );

    border: 1px solid #30486c;
    border-radius: 25px;
}

.hero-content {
    max-width: 930px;
}

.hero-card h2 {
    margin: 20px 0 18px;

    max-width: 920px;

    color: #f0f4fb;

    font-size:
        clamp(
            44px,
            5vw,
            64px
        );

    line-height: 1.06;

    letter-spacing: -1.5px;
}

.hero-card p {
    color: #9eb0c7;

    font-size: 18px;

    line-height: 1.65;
}

.hero-button {
    min-width: 210px;
}


/* ============================================================
   SECTION HEADINGS
============================================================ */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin: 10px 0 20px;
}

.section-heading h2 {
    margin: 0;

    font-size: 29px;
}

.section-heading p {
    margin: 7px 0 0;

    color: #91a2b9;

    font-size: 16px;
}


/* ============================================================
   PLATFORM HEALTH
============================================================ */

.health-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 26px;
}

.health-card {
    min-height: 160px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 25px;

    background:
        linear-gradient(
            145deg,
            #17263a,
            #122034
        );

    border: 1px solid #30445f;
    border-radius: 20px;
}

.health-icon {
    width: 66px;
    height: 66px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #20314a;

    border-radius: 17px;

    font-size: 29px;
}

.health-name {
    margin-bottom: 8px;

    color: #9bacc1;

    font-size: 16px;
}

.status {
    font-size: 19px;

    font-weight: 800;
}

.status.connected,
.status-connected,
.status-ready {
    color: #3fe091 !important;
}

.status.disconnected,
.status-disconnected {
    color: #ff647c !important;
}

.status.checking {
    color: #fbbf24;
}

.status-unknown {
    color: #fbbf24 !important;
}


/* ============================================================
   QUICK CARDS
============================================================ */

.quick-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.quick-card {
    min-height: 100px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 18px;

    padding: 22px;

    color: #e4ebf4;

    background: #122034;

    border: 1px solid #2e435d;
    border-radius: 17px;

    text-align: left;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.quick-card:hover {
    background: #172941;

    transform: translateY(-1px);
}

.quick-card-icon {
    font-size: 27px;
}

.quick-card strong {
    display: block;

    margin-bottom: 5px;
}

.quick-card small {
    color: #899bb2;

    font-size: 13px;
}

.quick-arrow {
    font-size: 25px;
}


/* ============================================================
   FORMS / MONITORING TOOLBAR
============================================================ */

.monitor-toolbar {
    display: flex;
    align-items: flex-end;

    gap: 16px;

    margin-bottom: 24px;
}

.monitor-toolbar > div {
    min-width: 240px;
}

.monitor-toolbar label,
.form-group label {
    display: block;

    margin-bottom: 9px;

    color: #bac7d7;

    font-size: 14px;
    font-weight: 650;
}

select,
input,
textarea {
    width: 100%;

    color: #e5ecf4;

    background: #0d1a2b;

    border: 1px solid #31465f;
    border-radius: 11px;

    outline: none;
}

select,
input {
    min-height: 50px;

    padding: 0 14px;
}

textarea {
    min-height: 140px;

    padding: 15px;

    resize: vertical;
}

select:focus,
input:focus,
textarea:focus {
    border-color: #4d8eff;

    box-shadow:
        0 0 0 3px rgba(77, 142, 255, 0.12);
}


/* ============================================================
   METRICS
============================================================ */

.metrics-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.metric-card {
    min-height: 145px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 25px;

    background: #122034;

    border: 1px solid #2e435d;
    border-radius: 18px;
}

.metric-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #20314a;

    border-radius: 17px;

    font-size: 27px;
}

.metric-name,
.metric-label {
    color: #93a4ba;

    font-size: 15px;
}

.metric-value {
    margin-top: 7px;

    color: #e7edf6;

    font-size: 30px;

    font-weight: 800;
}

.metric-value.danger,
.danger-text {
    color: #ff7086;
}

.metric-value.warning,
.warning-text {
    color: #fbc54d;
}


/* ============================================================
   INVESTIGATION
============================================================ */

.investigation-card {
    padding: 30px;

    background: #122034;

    border: 1px solid #30445f;
    border-radius: 20px;
}

.form-group {
    margin-bottom: 23px;
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.quick-investigations {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;
}

.quick-investigations > span {
    color: #8295ae;

    font-size: 13px;
}

.quick-question,
.quick-button {
    padding: 10px 14px;

    color: #c4d0df;

    background: #182941;

    border: 1px solid #344b68;
    border-radius: 9px;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.quick-question:hover,
.quick-button:hover {
    background: #213650;

    transform: translateY(-1px);
}


/* ============================================================
   RESULTS
============================================================ */

.result-container {
    padding: 28px;

    color: #cbd5e1;

    background: #111f31;

    border: 1px solid #30455f;
    border-radius: 20px;

    line-height: 1.6;
}

.empty-result {
    color: #8496ad;
}

.loading-result {
    color: #c7d2e5;
}

.error-result {
    border-color: #7f1d1d;
}

.loading-box,
.loading-investigation {
    display: flex;
    align-items: center;

    gap: 18px;
}

.loading-box p,
.loading-investigation p {
    margin: 6px 0 0;

    color: #899bb2;
}

.spinner {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border: 3px solid #33475f;
    border-top-color: #6d6cff;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ------------------------------------------------------------
   RESULT SUMMARY
------------------------------------------------------------ */

.result-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom: 1px solid #2c4059;
}

.result-summary h2,
.result-summary h3 {
    margin: 9px 0 0;

    font-size: 23px;
}

.result-label {
    color: #8ab4f8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* ------------------------------------------------------------
   SEVERITY
------------------------------------------------------------ */

.severity,
.severity-badge {
    display: inline-block;

    padding: 7px 12px;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 800;
}

.severity-critical,
.pod-failed {
    color: #ff7184;

    background: rgba(239, 68, 68, 0.14);
}

.severity-warning,
.pod-warning,
.warning-badge {
    color: #fbc24c;

    background: rgba(245, 158, 11, 0.14);
}

.severity-healthy,
.pod-running,
.normal-badge {
    color: #4ade80;

    background: rgba(34, 197, 94, 0.14);
}


/* ------------------------------------------------------------
   CONTEXT
------------------------------------------------------------ */

.context-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin: 22px 0;
}

.context-card {
    padding: 16px;

    background: #0c192a;

    border: 1px solid #293e58;
    border-radius: 12px;
}

.context-card span {
    display: block;

    margin-bottom: 7px;

    color: #6f86a3;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}

.context-card strong {
    color: #dce5f0;

    font-size: 13px;

    word-break: break-word;
}


/* ------------------------------------------------------------
   RESULT BLOCKS
------------------------------------------------------------ */

.result-block,
.analysis-section,
.root-cause-section,
.evidence-section,
.recommendations-section {
    margin-top: 18px;

    padding: 20px;

    background: #0c192a;

    border: 1px solid #293e58;
    border-radius: 13px;
}

.result-block h3,
.analysis-section h3,
.root-cause-section h3,
.evidence-section h3,
.recommendations-section h3 {
    margin: 0 0 12px;
}

.result-block p,
.analysis-section p,
.root-cause-section p {
    margin: 0;

    color: #b0bdce;

    line-height: 1.65;
}

.root-cause,
.root-cause-section {
    border-left: 4px solid #f59e0b;
}

.analysis-markdown {
    color: #b0bdce;

    line-height: 1.65;
}

.analysis-markdown h2 {
    margin: 18px 0 8px;

    color: #e2e8f0;

    font-size: 15px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.analysis-markdown h2:first-child {
    margin-top: 0;
}

.analysis-markdown p {
    margin: 0 0 10px;
}

.analysis-markdown ul,
.analysis-markdown ol {
    margin: 0 0 10px;

    padding-left: 22px;
}

.analysis-markdown li {
    margin-bottom: 4px;
}

.analysis-markdown code {
    padding: 1px 5px;

    background: #142438;

    border-radius: 5px;

    font-size: 12.5px;
}

.analysis-markdown pre {
    overflow-x: auto;

    padding: 12px;

    background: #142438;

    border-radius: 9px;
}

.analysis-markdown table {
    margin: 0 0 10px;

    border-collapse: collapse;
}

.analysis-markdown th,
.analysis-markdown td {
    padding: 6px 10px;

    border: 1px solid #293e58;
}


/* ------------------------------------------------------------
   EVIDENCE TABLES
------------------------------------------------------------ */

.table-scroll,
.table-wrapper {
    overflow-x: auto;
}

.evidence-table {
    width: 100%;

    min-width: 700px;

    border-collapse: collapse;
}

.evidence-table th {
    padding: 12px;

    color: #76aefa;

    border-bottom: 1px solid #33475e;

    text-align: left;

    font-size: 11px;

    letter-spacing: 0.4px;
}

.evidence-table td {
    padding: 12px;

    color: #b8c5d5;

    border-bottom: 1px solid #22364d;

    vertical-align: top;

    font-size: 13px;
}

.evidence-table tr:last-child td {
    border-bottom: 0;
}

.evidence-table code {
    color: #b8c9ff;

    font-size: 12px;
}

.event-message {
    min-width: 330px;

    line-height: 1.45;
}

.pod-status,
.warning-badge,
.normal-badge {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 16px;

    font-size: 11px;

    font-weight: 750;
}

.empty-evidence,
.evidence-empty {
    padding: 16px 0;

    color: #8496ad;
}


/* ------------------------------------------------------------
   RECOMMENDATIONS
------------------------------------------------------------ */

.recommendation-list {
    margin: 0;

    padding-left: 22px;

    color: #b8c5d5;
}

.recommendation-list li {
    margin-bottom: 10px;

    line-height: 1.55;
}


/* ============================================================
   AUTO-HEAL
============================================================ */

.remediation-block {
    border-left: 4px solid #7758ff;
}

.remediation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 20px;
}

.remediation-header h3 {
    margin: 0 0 5px;
}

.remediation-header p {
    margin: 0;

    color: #8193aa;

    font-size: 13px;
}

.remediation-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 16px;
}

.remediation-item {
    padding: 16px;

    background: #081626;

    border: 1px solid #293f59;
    border-radius: 11px;
}

.remediation-item span,
.remediation-reason span {
    display: block;

    margin-bottom: 7px;

    color: #7086a3;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}

.remediation-item strong {
    color: #e4ebf5;
}

.remediation-reason {
    padding: 16px;

    margin-bottom: 18px;

    background: #081626;

    border: 1px solid #293f59;
    border-radius: 11px;
}

.remediation-reason p {
    margin: 0;

    color: #adbdcf;

    line-height: 1.55;
}


/* ------------------------------------------------------------
   RISK
------------------------------------------------------------ */

.risk-badge {
    display: inline-block;

    padding: 7px 11px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 800;
}

.risk-low {
    color: #4ade80;

    background:
        rgba(34, 197, 94, 0.13);
}

.risk-medium {
    color: #fbbf24;

    background:
        rgba(245, 158, 11, 0.13);
}

.risk-high,
.risk-critical {
    color: #fb7185;

    background:
        rgba(239, 68, 68, 0.13);
}

.risk-none {
    color: #94a3b8;

    background:
        rgba(148, 163, 184, 0.10);
}

.eligible-yes {
    color: #4ade80 !important;
}

.eligible-no {
    color: #fb7185 !important;
}


/* ------------------------------------------------------------
   AUTO-HEAL BUTTON
------------------------------------------------------------ */

.autoheal-actions {
    display: flex;

    gap: 12px;
}

.autoheal-btn {
    padding: 13px 20px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    border: 0;
    border-radius: 11px;

    font-weight: 750;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.autoheal-btn:hover {
    transform: translateY(-1px);
}

.autoheal-btn:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}

.autoheal-blocked {
    padding: 14px;

    color: #fbbf24;

    background:
        rgba(245, 158, 11, 0.08);

    border:
        1px solid rgba(245, 158, 11, 0.20);

    border-radius: 10px;
}

.autoheal-status {
    margin-top: 15px;
}

.healing-progress {
    padding: 14px;

    color: #93c5fd;

    background:
        rgba(59, 130, 246, 0.08);

    border:
        1px solid rgba(59, 130, 246, 0.20);

    border-radius: 10px;
}

.heal-success {
    padding: 14px;

    color: #4ade80;

    background:
        rgba(34, 197, 94, 0.08);

    border:
        1px solid rgba(34, 197, 94, 0.20);

    border-radius: 10px;
}

.heal-failed {
    padding: 14px;

    color: #fb7185;

    background:
        rgba(239, 68, 68, 0.08);

    border:
        1px solid rgba(239, 68, 68, 0.20);

    border-radius: 10px;
}

.verification-message {
    margin-top: 10px;

    color: #9fd6b5;
}


/* ============================================================
   LOGIN PAGE
============================================================ */

.login-body {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at top,
            #17233b,
            #071120 55%
        );

    color: #e5e7eb;
}

.login-wrapper {
    width: 100%;
    max-width: 460px;

    padding: 24px;
}

.login-card {
    padding: 42px;

    background: #151f31;

    border: 1px solid #30415b;
    border-radius: 24px;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.35);
}

.login-logo {
    width: 68px;
    height: 68px;

    margin-bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 34px;

    background: #202d44;

    border-radius: 18px;
}

.login-card h1 {
    margin: 0;

    font-size: 30px;
}

.login-subtitle {
    margin: 8px 0 30px;

    color: #94a3b8;

    line-height: 1.5;
}

.google-login-container {
    display: flex;
    justify-content: center;

    margin: 20px 0;
}

.login-error {
    margin-bottom: 20px;
    padding: 12px 14px;

    color: #fecaca;

    background: rgba(239, 68, 68, 0.12);

    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
}

.login-status {
    margin-top: 16px;

    color: #93c5fd;

    text-align: center;
}

.login-footer {
    margin: 28px 0 0;

    text-align: center;

    color: #64748b;

    font-size: 13px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

    .health-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .metrics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .remediation-grid {
        grid-template-columns:
            1fr;
    }

    .remediation-header {
        flex-direction: column;
    }

}


@media (max-width: 760px) {

    .sidebar {
        position: relative;

        width: 100%;
        min-width: 100%;
        max-width: 100%;

        height: auto;
        min-height: auto;

        padding: 18px;
    }

    .sidebar-user {
        margin-top: 30px;
    }

    .main-content {
        width: 100%;

        margin-left: 0;

        padding: 30px 18px 60px;
    }

    .hero-card {
        align-items: flex-start;
        flex-direction: column;

        padding: 28px;
    }

    .hero-card h2 {
        font-size: 40px;
    }

    .page-header,
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .health-grid,
    .metrics-grid,
    .quick-grid,
    .form-grid,
    .context-grid {
        grid-template-columns:
            1fr;
    }

    .monitor-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-investigations {
        align-items: flex-start;
        flex-direction: column;
    }

    .quick-question,
    .quick-button {
        width: 100%;
    }

}