:root {
    --color-page-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f7f7;
    --color-surface-soft: #fbfbfb;
    --color-surface-muted: #f5f6f7;
    --color-surface-control: #f0f0f0;
    --color-border: #e4e4e4;
    --color-border-strong: #999999;
    --color-text: #212529;
    --color-text-strong: #222222;
    --color-text-muted: #6c757d;
    --color-text-soft: #555555;
    --color-text-inverse: #ffffff;
    --color-link-subtle: #c9c9c9;
    --color-brand-accent: #9b2122;
    --color-brand-accent-dark: #7f1b1c;
    --color-brand-accent-soft: #d29593;
    --color-brand-accent-pale: #fcecec;
    --color-nav-support: #ce0808;
    --color-chart-secondary: #0d6efd;
    --color-chart-success: #198754;
    --color-chart-warning: #fd7e14;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-none: 0;
    --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-iframe: 0 0 10px rgba(0, 0, 0, 0.15);
    --font-size-nav: clamp(0.85rem, 0.81rem + 0.18vw, 0.95rem);
    --font-size-heading: clamp(1.35rem, 1.14rem + 0.9vw, 1.6rem);
    --font-size-back-link: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
    --font-size-meta: clamp(0.68rem, 0.65rem + 0.14vw, 0.75rem);
    --font-size-note: clamp(0.95rem, 0.9rem + 0.24vw, 1.05rem);
    --font-size-control: clamp(0.875rem, 0.84rem + 0.16vw, 0.95rem);
    --font-size-sla-meta: clamp(0.8rem, 0.76rem + 0.15vw, 0.875rem);
    --font-size-chart-label: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
    --font-size-chart-value: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
    --font-size-sla-gauge: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
    --transition-lift: transform 0.2s ease;
}

/* Root element fills entire viewport */
html,
body {
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--color-page-bg);
    color: var(--color-text);
}

/*
header navigation
*/
.app-header-shell {
    border-bottom: 1px solid var(--color-brand-accent);
}

div#app-header {
    min-height: 85px;
    height: auto;
    display: block;
    overflow: visible;
}

.headerNavigation {
    margin: 7px 0 0 0;
    font-size: var(--font-size-nav);
    display: block;
}

.login-status-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.45rem 0.8rem;
    background-color: var(--color-brand-accent);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    font-size: var(--font-size-control);
    font-weight: 600;
    white-space: nowrap;
}

.login-status-bar a {
    color: var(--color-text-inverse);
    text-decoration: none;
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.login-status-bar a:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-brand-accent);
}

.headerNavigation a,
.headerNavigation a.support {
    text-decoration: none;
    padding: 2px 8px 4px;
    background-color: var(--color-brand-accent);
    border-radius: var(--radius-sm);
    margin-right: 1rem;
    color: var(--color-text-inverse);
    line-height: 1;
}

.headerNavigation a.support {
    background-color: var(--color-nav-support);
}

.headerNavigation a.active,
.headerNavigation a:hover {
    background-color: var(--color-brand-accent-dark);
    color: var(--color-text-inverse);
}

/* Optional: Add shadow or border styling */
.iframe-container iframe {
    box-shadow: var(--shadow-iframe);
}

.logo {
    max-height: 80px;
}

h1 {
    font-size: var(--font-size-heading);
}

span.backLink {
    font-size: var(--font-size-back-link);
}

span.backLink a {
    text-decoration: none;
}

.card {
    border-radius: var(--radius-lg);
    transition: var(--transition-lift);
}

.card:hover {
    transform: translateY(-5px);
}

.btn-primary {
    --bs-btn-bg: var(--color-brand-accent);
    --bs-btn-border-color: var(--color-brand-accent);
    --bs-btn-hover-bg: var(--color-brand-accent-dark);
    --bs-btn-hover-border-color: var(--color-brand-accent-dark);
    --bs-btn-active-bg: var(--color-brand-accent-dark);
    --bs-btn-active-border-color: var(--color-brand-accent-dark);
    --bs-btn-focus-shadow-rgb: 155, 33, 34;
    border-radius: var(--radius-md);
    font-size: var(--font-size-control);
}

.dataLink {
    font-size: var(--font-size-meta);
    color: var(--color-link-subtle);
    text-decoration: none;
}

.reportNote {
    margin: 1rem;
    line-height: 1.1;
    font-size: var(--font-size-note);
}

/*
Auto Height CSS & Controls for embeeded iframe view using Javascript
*/
#looker-container {
    margin: 0;
}

#looker-controls {
    padding: 5px;
    background: var(--color-surface-control);
    border: 0 solid var(--color-border);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: system-ui;
    border-radius: var(--radius-none);
    justify-content: flex-end;
    font-size: var(--font-size-control);
}

#looker-controls label {
    font-weight: 500;
    margin-right: 5px;
}

#height-down,
#height-up {
    padding: 0px 5px;
    cursor: pointer;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

#height-input {
    width: 65px;
    padding: 1px 5px;
    font-size: var(--font-size-control);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

#height-save {
    padding: 1px 10px;
    background: var(--color-brand-accent);
    color: var(--color-text-inverse);
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-control);
}

#height-save:hover {
    background: var(--color-brand-accent-dark);
}

@media (max-width: 991.98px) {
    .login-status-bar {
        width: 100%;
        justify-content: space-between;
        margin-top: 0.35rem;
    }
}