:root { --ink:#162e35; --muted:#6b7e83; --accent:#087f79; --paper:#f4f7f7; }
h1:focus { outline:none; }
.public-content { max-width:1120px; min-height:100vh; margin:0 auto; padding:44px 24px; }
@media(max-width:800px) { .public-content { padding:28px 18px; } }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-shell { display:flex; height:100vh; height:100dvh; overflow:hidden; }
.sidebar { width:240px; flex-shrink:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:32px 22px; background:#12373c; color:#eaf6f4; display:flex; flex-direction:column; }
.sidebar > * { flex-shrink:0; }
.brand { color:white; text-decoration:none; font-size:25px; font-weight:650; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:52px; }
.brand:hover { color:white; } .brand-mark { background:#7ee0c1; color:#12373c; width:36px; height:36px; text-align:center; border-radius:10px; }
.brand-sub { font-size:10px; letter-spacing:3px; color:#8bb4b5; width:100%; padding-left:46px; margin-top:-12px; }
.nav-caption { color:#8ab0b2; font-size:9px; letter-spacing:1.8px; margin:0 10px 18px; }
.sidebar nav { display:flex; flex-direction:column; gap:6px; }
.sidebar nav a { padding:12px 14px; border-radius:8px; color:#c7dddd; font-size:14px; text-decoration:none; }
.sidebar nav a.active,.sidebar nav a:hover { color:white; background:#285055; }
.sidebar-footer { margin-top:auto; padding-top:50px; color:#8bb4b5; font-size:12px; line-height:1.8; }
.workspace { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; overflow:hidden; } .topbar { flex-shrink:0; height:78px; background:white; border-bottom:1px solid #e4eaea; display:flex; justify-content:space-between; align-items:center; padding:0 40px; color:var(--muted); font-size:13px; }
.user-pill { color:var(--ink); background:var(--paper); border-radius:16px; padding:6px 12px; }
.content-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.content { width:100%; max-width:1400px; margin:0 auto; padding:44px 40px; } .eyebrow { font-size:10px; letter-spacing:2px; color:var(--accent); font-weight:700; margin-bottom:12px; }
h1 { font-size:30px; font-weight:650; letter-spacing:-.8px; margin-bottom:14px; } h2 { font-size:19px; font-weight:600; margin-bottom:24px; }
.lead { font-size:16px; } .panel { background:white; border:1px solid #e0e8e7; border-radius:14px; padding:28px; box-shadow:0 4px 12px #122e3503; }
.accent-panel { background:#e8f3ee; border-color:#d1e7dc; } .auth-panel { max-width:440px; margin:6vh auto; padding:36px; }
.btn { border-radius:8px; padding:9px 17px; } .btn-sm { padding:5px 10px; } .form-control,.form-select { border-color:#d9e3e1; border-radius:7px; min-height:42px; }
.form-control:focus,.form-select:focus { border-color:#087f79; box-shadow:0 0 0 3px #087f7920; } .form-label { font-size:13px; font-weight:550; }
.form-text { font-size:12px; line-height:1.6; } .step { display:inline-block; background:#e8f3ee; color:var(--accent); border-radius:50%; width:30px; height:30px; text-align:center; padding-top:5px; font-size:15px; margin-right:8px; }
.setup-submit { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; font-size:13px; }
.page-footer { flex-shrink:0; padding:10px 40px 25px; font-size:11px; color:#84979a; } .record-list { display:grid; gap:12px; } .record-card { background:white; border:1px solid #e0e8e7; padding:18px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.record-card h3 { font-size:16px; margin-bottom:5px; } .record-card small { color:var(--muted); overflow-wrap:anywhere; }
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:24px; } .toolbar input { max-width:360px; } .validation-message,.validation-errors { color:#b02a37; }
.loading-screen { margin:20vh auto; text-align:center; color:var(--ink); } .loading-screen strong { font-size:28px; } #blazor-error-ui { display:none; position:fixed; bottom:0; width:100%; padding:15px; background:#fff3cd; z-index:1000; }
.audit-list { font-size:13px; } dt { font-size:12px; color:var(--muted); font-weight:500; } dd { margin:5px 0 18px; }
@media(max-width:800px) { .app-shell { flex-direction:column; } .sidebar { width:auto; max-height:35dvh; padding:18px; } .brand { margin-bottom:18px; font-size:20px; } .brand-sub,.sidebar-footer,.nav-caption { display:none; } .sidebar nav { flex-direction:row; overflow-x:auto; } .sidebar nav a { white-space:nowrap; padding:8px 12px; } .topbar { height:60px; padding:0 20px; } .content { padding:28px 18px; } h1 { font-size:25px; } .panel { padding:22px; } .setup-submit { align-items:stretch; flex-direction:column; } .record-card { align-items:flex-start; } .toolbar { flex-wrap:wrap; } .auth-panel { margin:20px auto; } }

/* Shared action roles: apply, open, cancel, auxiliary, and Bootstrap danger variants. */
.btn-primary { --bs-btn-color:#fff; --bs-btn-bg:#087f79; --bs-btn-border-color:#087f79; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#066b66; --bs-btn-hover-border-color:#066b66; --bs-btn-active-color:#fff; --bs-btn-active-bg:#065f5b; --bs-btn-active-border-color:#065f5b; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#087f79; --bs-btn-disabled-border-color:#087f79; --bs-btn-focus-shadow-rgb:8,127,121; }
.btn-outline-primary { --bs-btn-color:#087f79; --bs-btn-border-color:#087f79; --bs-btn-hover-color:#065f5b; --bs-btn-hover-bg:#e8f3ee; --bs-btn-hover-border-color:#066b66; --bs-btn-active-color:#065f5b; --bs-btn-active-bg:#d1e7dc; --bs-btn-active-border-color:#065f5b; --bs-btn-disabled-color:#087f79; --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:#087f79; --bs-btn-focus-shadow-rgb:8,127,121; }
.btn-light { --bs-btn-color:#44565c; --bs-btn-bg:#edf0f1; --bs-btn-border-color:#edf0f1; --bs-btn-hover-color:#263a40; --bs-btn-hover-bg:#dfe5e7; --bs-btn-hover-border-color:#dfe5e7; --bs-btn-active-color:#263a40; --bs-btn-active-bg:#d2dbde; --bs-btn-active-border-color:#d2dbde; --bs-btn-disabled-color:#44565c; --bs-btn-disabled-bg:#edf0f1; --bs-btn-disabled-border-color:#edf0f1; --bs-btn-focus-shadow-rgb:107,126,131; }
.btn-outline-secondary { --bs-btn-color:#52666c; --bs-btn-border-color:#7b8b90; --bs-btn-hover-color:#263a40; --bs-btn-hover-bg:#edf0f1; --bs-btn-hover-border-color:#52666c; --bs-btn-active-color:#263a40; --bs-btn-active-bg:#dfe5e7; --bs-btn-active-border-color:#52666c; --bs-btn-disabled-color:#52666c; --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:#7b8b90; --bs-btn-focus-shadow-rgb:107,126,131; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; }
.section-nav { --bs-nav-link-color:var(--accent); --bs-nav-link-hover-color:#065f5b; --bs-nav-tabs-link-active-color:var(--ink); --bs-nav-tabs-link-active-bg:#fff; gap:4px; }
.section-nav .nav-link.active { font-weight:600; }
.section-nav .nav-link:focus-visible { outline:3px solid #087f7980; outline-offset:2px; }
@media(max-width:800px) { .record-card { flex-wrap:wrap; } }

.editor-dialog { border:1px solid #d9e3e1; border-radius:14px; padding:0; width:min(680px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 48px); color:var(--ink); background:white; box-shadow:0 18px 70px #12373c40; }
.editor-dialog[open] { display:flex; flex-direction:column; }
.editor-dialog::backdrop { background:#12373c80; }
.editor-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid #e0e8e7; flex-shrink:0; }
.editor-dialog-header h2 { margin:0; font-size:21px; }
.editor-dialog-header h2:focus { outline:none; }
.editor-dialog-content { display:flex; flex-direction:column; min-height:0; }
.editor-dialog-content[hidden] { display:none; }
.editor-dialog-body { padding:24px; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
.editor-dialog-footer { display:flex; flex-wrap:wrap; gap:10px; padding:16px 24px; border-top:1px solid #e0e8e7; background:white; flex-shrink:0; }
@media(max-width:575px) { .editor-dialog { width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; } .editor-dialog-content { flex:1; } .editor-dialog-body { flex:1; padding:20px; } .editor-dialog-header,.editor-dialog-footer { padding:16px 20px; } }

.subscriber-connection-picker {
    flex: 0 1 42rem;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .subscriber-connection-picker {
        flex-basis: 100%;
    }
}