:root {
    --color-primary: #0b6e8a;
    --color-primary-dark: #08546a;
    --color-bg: #f4f7f9;
    --color-surface: #ffffff;
    --color-border: #d6dee3;
    --color-text: #1f2a30;
    --color-error: #b3261e;
    --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--color-text);
    background: var(--color-bg);
}

h1:focus { outline: none; }

a { color: var(--color-primary); }

.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    flex: 0 0 240px;
    width: 240px;
    display: flex;
    flex-direction: column;
    background: var(--color-primary-dark);
    color: #fff;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.app-sidebar .app-brand { color: #fff; padding: 0.9rem 1rem; margin: 0; }
.app-nav { display: flex; flex-direction: column; padding: 0.25rem 0 1rem; }
.nav-heading { padding: 1rem 1rem 0.3rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; }
.nav-item { display: block; padding: 0.55rem 1rem 0.55rem 1.25rem; color: #fff; text-decoration: none; border-left: 4px solid transparent; }
.nav-item:hover { background: rgba(255, 255, 255, 0.12); }
.nav-item.active { background: rgba(255, 255, 255, 0.2); border-left-color: #fff; font-weight: 600; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.6rem 1.25rem;
    background: var(--color-primary);
    color: #fff;
}
.font-size-control { display: inline-flex; gap: 0.25rem; }
.app-company { margin-right: auto; font-weight: 600; text-decoration: none; }
.app-company:hover { text-decoration: underline; }
.app-tenant { font-weight: 600; }
.app-content { flex: 1 1 auto; }
@media (max-width: 760px) {
    .app-shell { flex-direction: column; }
    .app-sidebar { position: static; width: 100%; flex-basis: auto; height: auto; }
    .app-nav { flex-direction: row; flex-wrap: wrap; }
}

.app-header a, .app-header .btn-link { color: #fff; }
.app-header form { margin: 0; }
.app-brand { font-weight: 600; font-size: 1.2rem; text-decoration: none; }
.app-content { padding: 1.25rem; }

.account-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.login-card h1 { margin: 0; color: var(--color-primary); }
.login-subtitle { margin-top: 0.25rem; }

.form-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.form-field input {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
}
.form-check { margin-bottom: 1rem; }
.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.app-content h1 { margin-top: 0; }

.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.95rem;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-link { background: none; text-decoration: underline; padding: 0; }
.btn-block { width: 100%; }

.text-error { color: var(--color-error); }
.esi-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-weight: 600; color: #fff; white-space: nowrap; }
.esi-1 { background: #b71c1c; }
.esi-2 { background: #e65100; }
.esi-3 { background: #f9a825; color: #222; }
.esi-4 { background: #2e7d32; }
.esi-5 { background: #1565c0; }
.lab-prio { font-weight: 600; }
.lab-prio-stat { color: #b71c1c; }
.lab-prio-urgent { color: #e65100; }
.lab-abnormal { color: #e65100; font-weight: 600; }
.lab-critical { color: #b71c1c; font-weight: 700; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}
.data-table th, .data-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.data-table form { margin: 0; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background: #ffe9a8;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; }

/* Branding and language switcher */
.app-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.app-brand img { width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
.login-card { text-align: center; }
.login-card form, .login-card .form-field, .login-card .form-check { text-align: left; }
.login-logo { display: block; width: 190px; max-width: 70%; height: auto; margin: 0 auto 0.75rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.account-shell { position: relative; }
.account-lang { position: absolute; top: 1rem; right: 1rem; }
.lang-switcher { display: inline-flex; gap: 0.25rem; margin: 0; }
.lang-option { border: 1px solid currentColor; background: transparent; color: inherit; border-radius: var(--radius); padding: 0.15rem 0.5rem; font-size: 0.8rem; cursor: pointer; opacity: 0.75; }
.lang-option.active { background: #fff; color: var(--color-primary); opacity: 1; font-weight: 600; }
.account-lang .lang-option { color: var(--color-primary); border-color: var(--color-primary); }
.account-lang .lang-option.active { background: var(--color-primary); color: #fff; }

/* Home dashboard */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.dash-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); text-decoration: none; border-left: 4px solid var(--color-primary); }
.dash-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.dash-title { font-size: 0.85rem; opacity: 0.8; }
.dash-value { font-size: 1.9rem; font-weight: 600; color: var(--color-primary-dark); }
.dash-detail { font-size: 0.8rem; opacity: 0.75; }
.dash-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash-link { padding: 0.35rem 0.8rem; border: 1px solid var(--color-primary); border-radius: var(--radius); color: var(--color-primary); text-decoration: none; }
.dash-link:hover { background: var(--color-primary); color: #fff; }

/* Install (PWA) button: temporarily hidden. To enable it again, uncomment the rule below
   (it then shows only when the browser says the app can be installed). */
.pwa-install { display: none; }
/* html.pwa-can-install .pwa-install { display: inline-block; } */