h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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;
}

/* ===== Precipice Callcenter ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: #0f1115; color: #e6e8ec; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 220px; background: #171a21; padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.4rem;
    border-right: 1px solid #262a33;
}
.sidebar .brand { font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; color: #4fd1c5; }
.sidebar a { color: #c3c7cf; text-decoration: none; padding: 0.5rem 0.6rem; border-radius: 6px; }
.sidebar a:hover { background: #22262f; color: #fff; }
.content { flex: 1; padding: 1.5rem 2rem; max-width: 1400px; }

h1 { color: #fff; }
h2 { color: #c3c7cf; font-size: 1rem; margin-top: 1.5rem; text-transform: uppercase; letter-spacing: 0.04em; }

.empty-state { color: #7d828c; }
.muted { color: #7d828c; font-size: 0.85rem; }

.call-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.call-card { background: #171a21; border: 1px solid #262a33; border-radius: 10px; padding: 1rem; }
.call-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.call-state { padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.call-state.ringing { background: #4a3b1a; color: #ffcf6b; }
.call-state.up { background: #1a4a2a; color: #6bff9c; }
.call-duration { font-family: monospace; color: #7d828c; }
.call-numbers { display: flex; flex-direction: column; margin-bottom: 0.6rem; }
.call-numbers strong { color: #fff; }
.call-numbers span { color: #9aa0ab; font-size: 0.9rem; }

.crm-pop { background: #11141a; border-radius: 6px; padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; font-size: 0.85rem; }
.crm-pop.crm-unknown { color: #ffcf6b; }
.crm-pop.crm-loading { color: #7d828c; }
.crm-notes { margin: 0.3rem 0 0 1rem; padding: 0; font-size: 0.8rem; color: #9aa0ab; }

.live-transcript { background: #11141a; border-radius: 6px; padding: 0.5rem 0.6rem; margin-bottom: 0.6rem; font-size: 0.82rem; max-height: 100px; overflow-y: auto; color: #c3c7cf; }

.call-actions { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.btn-copilot, .btn-copilot-stop, .btn-approve, .btn-reject, .btn-save-draft, .btn-save {
    border: none; border-radius: 6px; padding: 0.45rem 0.8rem; cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.btn-copilot { background: #2c5fd6; color: #fff; }
.btn-copilot.active { background: #1a4a2a; color: #6bff9c; }
.btn-copilot-stop { background: #3a3f4a; color: #c3c7cf; }
.btn-approve { background: #1a7a3a; color: #fff; }
.btn-reject { background: #7a1a1a; color: #fff; }
.btn-save-draft, .btn-save { background: #3a3f4a; color: #e6e8ec; }

.copilot-suggestions .suggestion { background: #11141a; border-left: 3px solid #2c5fd6; padding: 0.5rem 0.7rem; margin-top: 0.4rem; font-size: 0.85rem; border-radius: 4px; }

.draft-card { background: #171a21; border: 1px solid #262a33; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.draft-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.draft-content { width: 100%; background: #11141a; color: #e6e8ec; border: 1px solid #262a33; border-radius: 6px; padding: 0.6rem; font-family: inherit; }
.draft-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.status-message { margin-top: 0.5rem; font-size: 0.85rem; color: #ffcf6b; }
.transcript { background: #11141a; padding: 0.6rem; border-radius: 6px; white-space: pre-wrap; font-size: 0.82rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: #171a21; border: 1px solid #262a33; border-radius: 10px; padding: 1rem; text-align: center; }
.stat-value { font-size: 1.8rem; font-weight: 700; color: #4fd1c5; }
.stat-label { font-size: 0.8rem; color: #9aa0ab; margin-top: 0.3rem; }

.calls-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.calls-table th, .calls-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #262a33; }
.calls-table th { color: #7d828c; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; }

.form-row { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.8rem; max-width: 500px; }
.form-row label { font-size: 0.85rem; color: #9aa0ab; }
.form-row input, .form-row select { background: #11141a; color: #e6e8ec; border: 1px solid #262a33; border-radius: 6px; padding: 0.5rem; }
.saved-indicator { margin-left: 0.8rem; color: #6bff9c; }