:root {
    color-scheme: light;
    --color-bg: #f4f7fc;
    --color-surface: #ffffff;
    --color-border: #e1e7f0;
    --color-text: #1a2233;
    --color-text-muted: #667085;
    --color-navy: #101a30;
    --color-blue: #2f6fed;
    --color-blue-dark: #2456bf;
    --color-blue-tint: #eaf1ff;
    --status-good: #0d9488;
    --status-good-bg: #e3f5f3;
    --status-good-text: #0f6d61;
    --status-warning: #ca8a04;
    --status-warning-bg: #fdf3d9;
    --status-warning-text: #8a6004;
    --status-bad: #dc2626;
    --status-bad-bg: #fce8e8;
    --status-bad-text: #a61b1b;
    --status-bad-dark: #b91c1c;
    --status-unknown: #c7cedb;
    --status-unknown-bg: #f1f2f5;
    --color-disabled-bg: #c7d3e6;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 26, 48, 0.06), 0 1px 6px rgba(16, 26, 48, 0.04);
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0b1220;
    --color-surface: #141b2d;
    --color-border: #232c42;
    --color-text: #e8ecf5;
    --color-text-muted: #8b93a7;
    --color-blue-tint: #1b2740;
    --status-warning: #b8860b;
    --status-good-bg: #123832;
    --status-good-text: #5eead4;
    --status-warning-bg: #3a2c0a;
    --status-warning-text: #fbbf24;
    --status-bad-bg: #3a1414;
    --status-bad-text: #f87171;
    --status-unknown-bg: #232c42;
    --color-disabled-bg: #2a3350;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 6px rgba(0, 0, 0, 0.3);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top bar */

.topbar {
    background: var(--color-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: block;
}

.brand-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.2px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 28px;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* Compound selector for the same reason as .topnav-dropdown-trigger below —
   a flat .topbar-user-trigger rule is only as specific as .menu-trigger, so
   whichever is declared later in the file wins ties. Also unified to the
   same flat topnav-link look as Manage, rather than the old pill/background
   treatment, so the two dropdown triggers read as one consistent style. */
.topbar-user .topbar-user-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-family: var(--font-body);
    padding: 8px 0;
    border-radius: 0;
    cursor: pointer;
}

.topbar-user .topbar-user-trigger:hover {
    background: none;
    color: rgba(255, 255, 255, 0.85);
}

.topbar-user-caret {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.topbar-user-dropdown {
    min-width: 150px;
}

.topnav-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
}

.topnav-link:hover {
    color: rgba(255, 255, 255, 0.85);
}

.topnav-link.active {
    color: #ffffff;
    border-bottom-color: var(--color-blue);
}

.topnav-dropdown {
    display: flex;
    align-items: center;
}

/* Compound selector so this reliably beats the generic .menu-trigger rule
   (further down the file) regardless of source order — .menu-trigger alone
   was winning ties on font-size/color since both are single-class selectors
   of equal specificity. */
.topnav-dropdown .topnav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-family: var(--font-body);
    padding: 8px 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.topnav-dropdown .topnav-dropdown-trigger:hover {
    background: none;
    color: rgba(255, 255, 255, 0.85);
}

.topnav-dropdown .topnav-dropdown-trigger.active {
    color: #ffffff;
    border-bottom-color: var(--color-blue);
}

.topnav-dropdown-caret {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

/* Page */

.page {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}

.app-footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 32px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
}

.app-footer a {
    color: var(--color-text-muted);
    text-decoration: underline;
}

.app-footer a:hover {
    color: var(--color-blue);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-header h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
}

.page-subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Buttons */

/* .btn-primary/.btn-secondary/.btn-danger are also used on <a> tags in a
   few places (not just <button>) — text-decoration: none keeps those from
   picking up the browser's default link underline. */
.btn-primary,
.btn-secondary,
.btn-danger {
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: var(--color-blue);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--color-blue-dark);
}

.btn-primary:disabled {
    background: var(--color-disabled-bg);
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.role-assign-apply-btn {
    margin-left: 8px;
    padding: 6px 12px;
    font-size: 13px;
}

.btn-secondary:hover {
    background: var(--color-bg);
}

.btn-danger {
    background: var(--status-bad);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-danger:hover {
    background: var(--status-bad-dark);
}

/* Target table */

.target-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.target-table th,
.target-table td {
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
}

.truncate-cell {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.target-table th {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.target-table tbody tr {
    border-top: 1px solid var(--color-border);
}

.target-table tbody tr:hover {
    background: var(--color-bg);
}

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.status-active {
    background: var(--status-good-bg);
    color: var(--status-good-text);
}

.status-down {
    background: var(--status-bad-bg);
    color: var(--status-bad-text);
}

.status-warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.status-muted {
    color: var(--color-text-muted);
    font-size: 13px;
}

.status-paused {
    background: var(--status-unknown-bg);
    color: var(--color-text-muted);
}

/* Monitor list (Dashboard) */

.monitor-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.monitor-list-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.monitor-list-header .monitor-name,
.monitor-list-header .monitor-status,
.monitor-list-header .monitor-uptime {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.monitor-heartbeat-label {
    flex: 1 1 auto;
    text-align: right;
}

.monitor-row {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 20px;
}

.monitor-name {
    flex: 0 0 220px;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monitor-status {
    flex: 0 0 140px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-good {
    background: var(--status-good);
}

.status-dot-bad {
    background: var(--status-bad);
}

.status-dot-warning {
    background: var(--status-warning);
}

.status-dot-unknown {
    background: var(--status-unknown);
}

.status-text-good {
    color: var(--status-good-text);
}

.status-text-bad {
    color: var(--status-bad-text);
}

.status-text-warning {
    color: var(--status-warning-text);
}

.stale-badge {
    display: inline-block;
    padding: 1px 8px;
    border: 1px dashed var(--color-text-muted);
    border-radius: 999px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.monitor-uptime {
    flex: 0 0 90px;
    font-size: 13px;
}

.monitor-uptime-value {
    font-weight: 600;
    color: var(--color-text);
}

.monitor-uptime-window {
    color: var(--color-text-muted);
    font-size: 12px;
    margin-left: 2px;
}

.monitor-heartbeat {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 28px;
}

.monitor-sparkline {
    width: 150px;
    height: 28px;
    overflow: visible;
}

.sparkline-line {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline-dot {
    stroke: var(--color-surface);
    stroke-width: 1;
}

.sparkline-hit {
    fill: transparent;
}

.dot-good {
    fill: var(--status-good);
}

.dot-warning {
    fill: var(--status-warning);
}

.dot-bad {
    fill: var(--status-bad);
}

.chart-tooltip {
    position: fixed;
    z-index: 300;
    background: var(--color-navy);
    color: #ffffff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: var(--shadow);
    pointer-events: none;
    white-space: nowrap;
}

/* History page */

.history-row {
    cursor: pointer;
}

.expand-cell {
    width: 32px;
}

.caret-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.caret-btn .caret {
    display: inline-block;
    transition: transform 0.15s ease;
}

.caret-btn.expanded .caret {
    transform: rotate(90deg);
}

.history-detail-row:hover {
    background: none;
}

.history-detail-row td {
    background: var(--color-bg);
    padding: 20px;
}

.mtr-run-timestamp {
    margin: 0 0 10px;
    font-size: 13px;
}

.history-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.history-detail-table th,
.history-detail-table td {
    padding: 8px 12px;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px solid var(--color-border);
}

.history-detail-table th {
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
}

.history-detail-actions {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.admin-user-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    font-size: 13px;
}

.admin-user-detail-label {
    display: block;
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
}

.admin-user-detail-mfa {
    margin-top: 24px;
}

.mtr-hop-table th,
.mtr-hop-table td {
    white-space: nowrap;
}

.mtr-run-row {
    cursor: pointer;
}

.mtr-run-row:hover {
    background: var(--color-border);
}

.link-btn {
    background: none;
    border: none;
    color: var(--color-blue);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.link-btn:hover {
    text-decoration: underline;
}

.link-btn:disabled {
    color: var(--color-text-muted);
    cursor: default;
    pointer-events: none;
}

.link-btn:disabled:hover {
    text-decoration: none;
}

/* Local/UTC time toggle */

.time-toggle {
    display: flex;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px;
    flex-shrink: 0;
}

.time-toggle-btn {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    border-radius: 999px;
    cursor: pointer;
}

.time-toggle-btn.active {
    background: var(--color-blue);
    color: #ffffff;
}

/* Row actions (kebab menu) */

.row-actions {
    position: relative;
    width: 40px;
}

.menu-trigger {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.menu-trigger:hover {
    background: var(--color-border);
}

.menu-dropdown {
    display: none;
    position: fixed;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 130px;
    z-index: 200;
    overflow: hidden;
}

.menu-dropdown.open {
    display: block;
}

.menu-dropdown form {
    margin: 0;
}

.menu-item {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
}

.menu-item:hover {
    background: var(--color-bg);
}

.menu-item-danger {
    color: var(--status-bad);
}

.menu-item-danger:hover {
    background: var(--status-bad-bg);
}

/* Modal */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 26, 48, 0.45);
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    width: 100%;
    max-width: 380px;
}

.modal h2 {
    margin: 0 0 20px;
    font-size: 18px;
}

.modal-small {
    max-width: 320px;
}

.modal-body-text {
    margin: -12px 0 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
}

.form-group input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-blue);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* Empty state */

.empty-state {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 64px 24px;
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--color-blue-tint);
}

.empty-state-action {
    display: inline-block;
    margin-top: 16px;
    text-decoration: none;
}

.empty-state h2 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--color-text);
}

.empty-state p {
    margin: 0;
    font-size: 14px;
}

/* Settings page */

.settings-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px 28px;
    /* No max-width here — every page shares .app-main's 1100px cap (see
    base layout rules) rather than each section picking its own width. */
}

/* Sibling combinator (not a margin on the base class) so this only adds
   space *between* stacked boxes, not between the page header and the first
   one — supersedes the old ad-hoc .admin-users-section margin-top hack. */
.settings-section + .settings-section {
    margin-top: 24px;
}

.settings-section h2 {
    margin: 0 0 20px;
    font-size: 16px;
}

.admin-subsection {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.admin-subsection h3,
.admin-subsection-heading {
    margin: 0 0 6px;
    font-size: 14px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
    cursor: pointer;
}

.settings-row:first-of-type {
    border-top: none;
}

.settings-row-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}

.settings-row-hint {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Color scheme radios */

.radio-check {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    cursor: pointer;
    flex-shrink: 0;
}

.radio-check:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.radio-check:checked {
    border-color: var(--color-blue);
    background: var(--color-blue) radial-gradient(circle, #ffffff 0 4px, transparent 5px);
}

.settings-custom-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 8px 28px;
    padding: 14px 0 0;
}

.settings-apply-btn {
    align-self: flex-start;
    margin-top: 4px;
}

.settings-custom-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-muted);
}

.settings-custom-field input[type="color"] {
    width: 40px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px;
    background: var(--color-surface);
    cursor: pointer;
}

/* Auth pages (login / signup) */

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: var(--color-bg);
    font-family: var(--font-body);
}

.auth-page {
    width: 100%;
    padding: 24px;
}

.auth-card {
    max-width: 380px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.auth-brand-name {
    color: var(--color-text);
    font-weight: 600;
    font-size: 16px;
}

.auth-title {
    margin: 0 0 4px;
    font-size: 20px;
    text-align: center;
    color: var(--color-text);
}

.auth-subtitle {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

.auth-error {
    background: var(--status-bad-bg);
    color: var(--status-bad);
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.field-error {
    color: var(--status-bad);
    font-size: 12px;
    margin-top: 6px;
}

.form-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pill-toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
}

.pill-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pill-toggle-track {
    position: relative;
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--color-border);
    transition: background-color 0.15s ease;
}

.pill-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.pill-toggle input:checked + .pill-toggle-track {
    background: var(--color-blue);
}

.pill-toggle input:checked + .pill-toggle-track .pill-toggle-knob {
    transform: translateX(18px);
}

.pill-toggle input:focus-visible + .pill-toggle-track {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.settings-success {
    background: var(--status-good-bg);
    color: var(--status-good);
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.settings-password-form .form-group {
    max-width: 320px;
}

.auth-form .form-group {
    margin-bottom: 16px;
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
}

.auth-footnote {
    margin: 24px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

.auth-footnote a {
    color: var(--color-blue);
    text-decoration: none;
}

.auth-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* QR codes need reliable black-on-white contrast to scan — always a white
   card here regardless of site theme, the same way every real-world app
   shows a QR code even in dark mode. Padding keeps the "quiet zone" around
   the code, which scanners rely on to find its edges. */
.mfa-qr {
    max-width: 220px;
    margin: 16px 0;
    background: #ffffff;
    padding: 16px;
    border-radius: var(--radius);
}

.mfa-qr svg {
    width: 100%;
    height: auto;
    display: block;
}

.mfa-qr svg path {
    fill: #000000;
}

.mfa-manual-entry {
    margin-top: 24px;
}

.mfa-secret-code {
    display: block;
    width: fit-content;
    margin-top: 8px;
    word-break: break-all;
}

.mfa-backup-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.mfa-backup-codes-grid code {
    text-align: center;
}

.mfa-backup-codes-actions {
    margin-top: 24px;
}

.mfa-forget-all-form {
    margin-top: 24px;
}

/* .monitor-list has no bottom margin of its own, so the second (group)
   section on Dashboard needs explicit top spacing here rather than relying
   on .page-header's own margin-bottom, which only affects what's below it. */
.dashboard-group-header {
    margin-top: 24px;
}

.auth-footnote a:hover {
    text-decoration: underline;
}

/* Admin page */

.admin-users-section {
    margin-top: 24px;
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.admin-section-header h2 {
    margin: 0;
}

#targets-tab-toggle {
    margin-bottom: 24px;
}

.targets-tab-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.group-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.group-chip-remove-form {
    display: inline;
}

.table-scroll {
    overflow-x: auto;
}

.policy-role-select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
}

.role-active-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.role-perm-categories {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.role-perm-category-heading {
    margin: 0 0 10px;
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
}

.role-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 20px;
}

.role-perm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.role-perm-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.role-detail-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

/* Read-only permission indicator — not a real form control, so it's never
   focusable or clickable. Darker than the editable checkbox's blue to read
   as "set, but locked" rather than "here's a control you can use." */
.perm-lock {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    vertical-align: middle;
}

.perm-lock-on {
    background: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}

.roles-matrix-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.add-role-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-role-form input {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    width: 180px;
}

.table-scroll .target-table th,
.table-scroll .target-table td {
    white-space: nowrap;
}

.access-codes-table {
    margin-top: 24px;
}

.access-codes-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}

.admin-code-value {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text);
}