h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-valid);
}

.invalid {
    outline: 1px solid var(--color-invalid);
}

.validation-message {
    color: var(--color-invalid);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* --- Theme tokens ---
   Light values live on bare :root. Dark values are redefined twice,
   deliberately: once under prefers-color-scheme for "System" (no explicit
   choice), guarded so an explicit "Light" pick always wins, and again under
   [data-theme="dark"] for an explicit "Dark" pick, so the toggle wins in
   both directions. Settings.razor is the only thing that ever sets
   data-theme (via wwwroot/theme.js) -- see that page and MainLayout.razor
   for how a signed-in user's own saved preference gets applied. */
:root {
    --color-bg: #f6f7f9;
    --color-surface: #ffffff;
    --color-surface-muted: #f6f7f9;
    --color-text: #1a1a1a;
    --color-text-muted: #888888;
    --color-text-soft: #666666;
    --color-border: #e2e4ea;
    --color-accent: #2f5cff;
    --color-accent-contrast: #ffffff;
    --color-topbar-bg: #1b1f3b;
    --color-topbar-text: #ffffff;
    --color-topbar-text-muted: #cfd3ee;
    --color-heading: #1b1f3b;
    --color-success: #1a7f37;
    --color-warning: #b8860b;
    --color-danger: #c62828;
    --color-danger-hover: #8f1d1d;
    --color-danger-bg: #fff8f7;
    --color-danger-border: #f2b8b5;
    --color-danger-disabled: #e2a5a2;
    --color-invalid: #e50000;
    --color-valid: #26b050;
    --shadow-card: 0 4px 24px rgba(27, 31, 59, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #12141f;
        --color-surface: #1b1e2e;
        --color-surface-muted: #232637;
        --color-text: #e7e8ee;
        --color-text-muted: #9296a8;
        --color-text-soft: #a7abbd;
        --color-border: #2e3247;
        --color-accent: #7691ff;
        --color-accent-contrast: #0b0d16;
        --color-topbar-bg: #0c0e1a;
        --color-topbar-text: #ffffff;
        --color-topbar-text-muted: #9aa0c9;
        --color-heading: #e7e8ee;
        --color-success: #3ddc84;
        --color-warning: #e0b13a;
        --color-danger: #ff6b6b;
        --color-danger-hover: #ff8a8a;
        --color-danger-bg: #2a1717;
        --color-danger-border: #5a2b2b;
        --color-danger-disabled: #5a3a3a;
        --color-invalid: #ff6b6b;
        --color-valid: #3ddc84;
        --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
    }
}

:root[data-theme="dark"] {
    --color-bg: #12141f;
    --color-surface: #1b1e2e;
    --color-surface-muted: #232637;
    --color-text: #e7e8ee;
    --color-text-muted: #9296a8;
    --color-text-soft: #a7abbd;
    --color-border: #2e3247;
    --color-accent: #7691ff;
    --color-accent-contrast: #0b0d16;
    --color-topbar-bg: #0c0e1a;
    --color-topbar-text: #ffffff;
    --color-topbar-text-muted: #9aa0c9;
    --color-heading: #e7e8ee;
    --color-success: #3ddc84;
    --color-warning: #e0b13a;
    --color-danger: #ff6b6b;
    --color-danger-hover: #ff8a8a;
    --color-danger-bg: #2a1717;
    --color-danger-border: #5a2b2b;
    --color-danger-disabled: #5a3a3a;
    --color-invalid: #ff6b6b;
    --color-valid: #3ddc84;
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* --- Innsikt shell --- */
body { font-family: system-ui, sans-serif; margin: 0; background: var(--color-bg); color: var(--color-text); }
.page { display: flex; flex-direction: column; min-height: 100vh; }
.top-bar {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--color-topbar-bg); color: var(--color-topbar-text); padding: 0.75rem 1.5rem;
}
.top-bar .brand { color: var(--color-topbar-text); font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.top-bar nav { display: flex; gap: 1rem; flex: 1; }
.top-bar nav a { color: var(--color-topbar-text-muted); text-decoration: none; }
.top-bar nav a.active { color: var(--color-topbar-text); font-weight: 600; }
.top-bar .user { display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; color: var(--color-topbar-text-muted); }
.top-bar .user a, .top-bar .user button.link { color: var(--color-topbar-text); }

/* Deliberately loud -- the one state in the app where the top bar does NOT
   mean "this is your own organization". See MainLayout.razor's own comment. */
.top-bar.impersonating { background: #7a4a00; }
.top-bar.impersonating .brand,
.top-bar.impersonating nav a { color: #ffe9c7; }
.top-bar.impersonating nav a.active { color: white; }
.impersonating-label { color: #ffe9c7; font-weight: 600; }
.top-bar .user a.button.danger {
    background: var(--color-danger); color: white; padding: 0.35rem 0.9rem;
    border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.top-bar .user a.button.danger:hover { background: var(--color-danger-hover); }
button.link {
    background: none; border: none; padding: 0; font: inherit; cursor: pointer;
    text-decoration: none;
}
/* Comfortable reading width by default -- most pages (Settings, Apps
   grid, a control panel form) are actively worse when stretched edge to
   edge. Pages with genuinely wide content (the admin console's tables,
   full of columns) opt out by wrapping their content in .page-wide, which
   this rule detects on `main`'s own child -- see Admin.razor and
   AdminTenantDetail.razor. :has() is supported by every evergreen browser
   this app targets (no IE/legacy requirement here). */
main { padding: 1.5rem 2rem; max-width: 1100px; }
main:has(> .page-wide) { max-width: none; }

.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.app-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 1.25rem; }
.app-card .permissions { font-size: 0.8rem; color: var(--color-text-soft); }
.app-card button, .button {
    display: inline-block; background: var(--color-accent); color: var(--color-accent-contrast); border: none;
    border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; text-decoration: none; font-size: 0.9rem;
}
.status { font-size: 0.85rem; font-weight: 600; }
.status.pending { color: var(--color-warning); }
.status.active { color: var(--color-success); }
.status.suspended, .status.cancelled { color: var(--color-danger); }

.admin-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.admin-table th, .admin-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border); }
.muted { color: var(--color-text-muted); font-size: 0.8rem; }

.table-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
.status.activated { color: var(--color-warning); }
.status.assigned { color: var(--color-success); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; margin: 1.25rem 0; }
.stat-tile {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
    border-top: 3px solid var(--color-accent); box-shadow: var(--shadow-card);
    padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.stat-tile .stat-label {
    font-size: 0.75rem; font-weight: 600; color: var(--color-text-soft);
    text-transform: uppercase; letter-spacing: 0.05em; order: -1;
}
.stat-tile .stat-value { font-size: 1.9rem; font-weight: 700; color: var(--color-heading); line-height: 1.15; }
/* Secondary line under a tile's headline value -- e.g. the exact date
   behind a relative "3d ago", or vice versa. Optional; tiles that don't
   need one (a plain count) just omit it. */
.stat-tile .stat-sub { font-size: 0.78rem; color: var(--color-text-muted); }

.pager { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.pager button {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px;
    padding: 0.4rem 0.9rem; cursor: pointer; font-size: 0.85rem; color: var(--color-text);
}
.pager button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Trial / plan states --- */
.status.trialexpired { color: var(--color-danger); }
.button-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
.button-row .button, .button-row button { margin: 0; }
button.secondary, a.button.secondary {
    background: var(--color-surface); color: var(--color-accent); border: 1px solid var(--color-accent);
}
.admin-app-row { margin-bottom: 0.5rem; }
.admin-app-row:last-child { margin-bottom: 0; }

/* The admin tenant list's action column -- "View details" and "Enter
   environment" each need their own line and enough width, not to compete
   for space with the rest of a already-wide table row. */
.admin-tenant-actions { white-space: nowrap; min-width: 11rem; }
.admin-tenant-actions .button { display: block; margin-bottom: 0.4rem; text-align: center; }
.admin-tenant-actions .button:last-child { margin-bottom: 0; }

/* A quieter destructive action than .button -- sits inline after an app's
   normal action buttons (Remove on /apps) rather than competing with them
   visually. The "type your org name to confirm" danger zone on
   /controlpanel is a full section, not this. */
button.danger-link {
    background: none; border: none; color: var(--color-danger); padding: 0.4rem 0;
    margin-left: 0.4rem; font-size: 0.85rem; text-decoration: underline;
    cursor: pointer;
}
button.danger-link:hover { color: var(--color-danger-hover); }

/* --- Login page --- */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100vh - 3.5rem); padding: 2rem;
}
.login-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
    padding: 2.5rem; max-width: 480px; text-align: center;
    box-shadow: var(--shadow-card);
}
.login-card h1 { margin-top: 0; color: var(--color-heading); }
.login-card .tagline { color: var(--color-text-soft); font-size: 0.95rem; margin-bottom: 1.25rem; }
.login-card .button { display: inline-block; padding: 0.65rem 1.5rem; font-size: 0.95rem; }
.login-features {
    text-align: left; list-style: none; padding: 0; margin: 0 0 1.5rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.login-features li {
    background: var(--color-surface-muted); border-radius: 6px; padding: 0.6rem 0.8rem;
    font-size: 0.85rem; color: var(--color-text);
}
.login-actions { margin-bottom: 0.5rem; }
.login-divider { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }
.login-signup-heading { font-weight: 600; color: var(--color-heading); margin-bottom: 0.35rem; }
.login-footnote { margin-top: 1.25rem; margin-bottom: 0; }

/* --- Control panel / Settings --- */
.cp-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
.cp-section h2 { margin-top: 0; font-size: 1.1rem; }
.cp-note { margin-top: 0.75rem; margin-bottom: 0; }

/* Deliberately visually separate from every other .cp-section — this is
   the one section on /controlpanel that destroys data with no way back. */
.cp-danger-zone { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.cp-danger-zone h2 { color: var(--color-danger-hover); }
button.danger {
    display: inline-block; background: var(--color-danger); color: white; border: none;
    border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer; font-size: 0.9rem;
}
button.danger:hover { background: var(--color-danger-hover); }
button.danger:disabled { background: var(--color-danger-disabled); cursor: not-allowed; }

.settings-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 32rem; }
.settings-field label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.settings-field .field-hint { margin: 0.3rem 0 0; }
.theme-options { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.theme-options label {
    display: flex; align-items: center; gap: 0.4rem; font-weight: normal;
    border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem 0.9rem;
    cursor: pointer; background: var(--color-surface);
}
.theme-options input { margin: 0; }
select, input[type="text"], input[type="number"] {
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
    border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.9rem;
}

/* --- Call Queue Insights: per-queue / per-day / per-week cards ---
   Deliberately its own class rather than reusing .stat-tile -- these carry
   several stat lines each, not one big number + one label. */
.metric-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.metric-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    padding: 1rem 1.25rem;
}
.metric-card h3 { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--color-heading); }
.metric-card .metric-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.15rem 0; }
.metric-card .metric-row .metric-label { color: var(--color-text-muted); }
.metric-card .metric-row .metric-value { font-weight: 600; }
.metric-card .metric-row .metric-value.missed { color: var(--color-danger); }