/* Page skin for the server-dashboard pages (settings + data), on the shared tokens.
   Two jobs, both scoped to .app-canvas so the public/account layouts are untouched:
   1. Re-point the legacy variables dashboard.css and base.css still read (--box, --branding, ...) at
      tokens.css, so every page rule inherits dark/light and the one violet accent.
   2. Give the page vocabulary the templates use (config-section, config-input, .button, data-table,
      metric-tile, modal-card, ...) the component library's shapes: pill buttons, rounded surfaces,
      token focus rings. The class names stay because page JS and PercyUnsaved hook onto them. */

.app-canvas {
    --font-display: var(--app-font);
    --foreground: var(--text);
    --background: var(--app-bg);
    --header: var(--surface-1);
    --branding: var(--accent);
    --branding-bright: var(--accent-hover);
    --box: var(--surface-1);
    --box-shade: var(--surface-2);
    --box-border: var(--line);
    --box-border-light: var(--text-faint);
    --form-input-background: var(--surface-1);
    --form-input-border: var(--line);
    --form-input-focus-border: var(--accent);
    --link-text: var(--accent-hover);
    --nav-link: var(--text-muted);
    --nav-link-hover: var(--text);
    --button-text: var(--text);
    --default-button-rgb: 35, 35, 39;
    --primary-button-rgb: 131, 81, 237;
    --danger-button-rgb: 185, 28, 28;
    --success-text: #4ade80;
    --error-text: #f87171;
    --warning-text: #fbbf24;
    --info-text: #8aa4ff;
    --success-bg: color-mix(in srgb, var(--success-text) 12%, var(--surface-1));
    --success-border: color-mix(in srgb, var(--success-text) 35%, transparent);
    --error-bg: color-mix(in srgb, var(--error-text) 12%, var(--surface-1));
    --error-border: color-mix(in srgb, var(--error-text) 35%, transparent);
    --warning-bg: color-mix(in srgb, var(--warning-text) 12%, var(--surface-1));
    --warning-border: color-mix(in srgb, var(--warning-text) 35%, transparent);
    --info-bg: color-mix(in srgb, var(--info-text) 12%, var(--surface-1));
    --info-border: color-mix(in srgb, var(--info-text) 35%, transparent);
}
[data-theme="light"] .app-canvas {
    --default-button-rgb: 230, 230, 227;
    --primary-button-rgb: 110, 65, 204;
    --link-text: var(--accent);
    --success-text: #15803d;
    --error-text: #b91c1c;
    --warning-text: #a16207;
    --info-text: #1d4ed8;
}

.app-canvas input, .app-canvas select, .app-canvas textarea, .app-canvas button { font-family: inherit; }

/* ── Cards: a settings section is a .card ─────────────────────────────── */
.app-canvas .config-section {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    transition: border-color var(--dur-base);
}
.app-canvas .config-section:hover { border-color: color-mix(in srgb, var(--text) 16%, var(--line)); }
.app-canvas .config-section h2 {
    font-size: 16px; font-weight: 700; letter-spacing: -0.02em; text-transform: none;
    color: var(--text); margin-bottom: var(--space-4);
}
.app-canvas .config-section h2::before { content: none; }
.app-canvas .section-header { flex-wrap: wrap; gap: var(--space-3); }
.app-canvas .section-header h2 { margin-bottom: 0; }
.app-canvas .config-section-description { font-size: 13px; margin-top: calc(-1 * var(--space-3)); }
.app-canvas .subsection-title { font-size: 11px; letter-spacing: 0.08em; color: var(--text-faint); }
.app-canvas .config-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.app-canvas .config-description { font-size: 12px; color: var(--text-faint); }
.app-canvas .config-actions { border-top-color: var(--line); }

.app-canvas .config-toggle,
.app-canvas .config-field,
.app-canvas .toggle-stack {
    border-radius: var(--radius-md);
    border-color: var(--line);
    background: var(--surface-2);
}
.app-canvas .toggle-stack > .config-toggle { background: transparent; }
.app-canvas .toggle-stack > .config-toggle + .config-toggle { border-top-color: var(--line); }

/* Switch: the .toggle component's track, drawn on the existing checkbox. */
.app-canvas .config-toggle input[type="checkbox"] {
    width: 40px; height: 24px; background: var(--surface-3); border: 1px solid var(--line);
}
.app-canvas .config-toggle input[type="checkbox"]::after {
    top: 2px; left: 2px; width: 18px; height: 18px; background: var(--text-muted);
}
.app-canvas .config-toggle input[type="checkbox"]:checked { background: var(--accent); border-color: transparent; }
.app-canvas .config-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); background: var(--accent-contrast); }
.app-canvas .config-toggle input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ── Fields ───────────────────────────────────────────────────────────── */
.app-canvas .config-input,
.app-canvas .config-select,
.app-canvas .app-input {
    min-height: 40px; border-width: 1px; border-radius: var(--radius-sm);
    background: var(--surface-1); border-color: var(--line); font-size: 14px;
}
.app-canvas .config-input:hover,
.app-canvas .config-select:hover { background: var(--surface-1); border-color: color-mix(in srgb, var(--text) 24%, var(--line)); }
.app-canvas .config-input:focus,
.app-canvas .config-select:focus {
    background: var(--surface-1); border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.app-canvas select.config-select option { background: var(--surface-2); color: var(--text); }
.app-canvas textarea.config-input { min-height: 88px; }

/* ── Buttons: .button is the .btn pill ────────────────────────────────── */
.app-canvas .button {
    min-height: 40px; padding: 0 var(--space-4); gap: var(--space-2);
    border-radius: var(--radius-pill); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text); font-weight: 700;
    transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast), opacity var(--dur-base);
}
.app-canvas .button:not(.outline) { background-color: var(--surface-2); }
.app-canvas .button:hover:not(:disabled) { background-color: var(--surface-3); border-color: color-mix(in srgb, var(--text) 22%, transparent); opacity: 1; }
.app-canvas .button:active:not(:disabled) { transform: scale(0.97); }
.app-canvas .button:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.app-canvas .button.small { min-height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.app-canvas .button.outline,
.app-canvas .button.outline:not(.primary):not(.danger) { background: none; border: 1px solid var(--line); color: var(--text); }
.app-canvas .button.outline:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.app-canvas .button.primary:not(.outline) { background: var(--accent); border-color: transparent; color: var(--accent-contrast); }
.app-canvas .button.primary:not(.outline):hover:not(:disabled) { background: var(--accent-hover); border-color: transparent; opacity: 1; }
.app-canvas .button.primary.outline { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: none; }
.app-canvas .button.primary.outline:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.app-canvas .button.danger:not(.outline),
.app-canvas .button.danger.outline {
    background: color-mix(in srgb, var(--error-text) 14%, transparent);
    border-color: color-mix(in srgb, var(--error-text) 35%, transparent); color: var(--error-text);
}
.app-canvas .button.danger:not(.outline):hover:not(:disabled),
.app-canvas .button.danger.outline:hover:not(:disabled) { background: color-mix(in srgb, var(--error-text) 24%, transparent); color: var(--error-text); opacity: 1; }
.app-canvas .button:disabled { opacity: 0.45; }

/* ── Callouts, tabs, badges ───────────────────────────────────────────── */
.app-canvas .dash-pageinfo {
    border-radius: var(--radius-lg); border: 1px solid var(--line); border-left-width: 1px;
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
}
.app-canvas .dash-pageinfo-icon { color: var(--accent); }
.app-canvas .dash-pageinfo-body { font-size: 13px; }
.app-canvas .dash-pageinfo-tips li::before { color: var(--accent); }

.app-canvas .config-tabs {
    display: flex; width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto;
    gap: 2px; padding: 3px; margin-bottom: var(--space-5);
    border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-1);
}
.app-canvas .config-tabs button[role="tab"] {
    min-height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill);
    font-size: 14px; font-weight: 700;
}
.app-canvas .config-tabs button[role="tab"]:hover { color: var(--text); }
.app-canvas .config-tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
.app-canvas .config-tabs button[role="tab"]:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.app-canvas .badge,
.app-canvas .pill {
    border-radius: var(--radius-pill); padding: 2px 10px; font-size: 11px; font-weight: 700;
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.app-canvas .badge-muted, .app-canvas .pill.pending, .app-canvas .pill.unknown { background: var(--surface-2); color: var(--text-muted); }
.app-canvas .badge-success, .app-canvas .pill.active, .app-canvas .pill.running, .app-canvas .pill.up { background: color-mix(in srgb, var(--success-text) 16%, transparent); color: var(--success-text); }
.app-canvas .badge-danger, .app-canvas .pill.ended, .app-canvas .pill.stopped, .app-canvas .pill.down { background: color-mix(in srgb, var(--error-text) 16%, transparent); color: var(--error-text); }
.app-canvas .badge-info { background: color-mix(in srgb, var(--info-text) 16%, transparent); color: var(--info-text); }

/* ── Tables: .data-table is the .table component ──────────────────────── */
.app-canvas .data-table-wrap {
    border-radius: var(--radius-lg); border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
}
.app-canvas .data-table { font-variant-numeric: tabular-nums; font-size: 14px; }
.app-canvas .data-table th {
    position: sticky; top: 0; padding: 10px var(--space-3); font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; color: var(--text-muted); background: var(--surface-3);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, var(--line));
}
.app-canvas .data-table td { padding: 10px var(--space-3); border-bottom: 1px solid var(--line); }
.app-canvas .data-table tr:last-child td { border-bottom: 0; }
.app-canvas .data-table tbody tr:hover { background: var(--surface-2); }
.app-canvas .empty-state { padding: var(--space-7) var(--space-4); }
.app-canvas .empty-state h3 { font-size: 15px; font-weight: 700; color: var(--text-muted); }
.app-canvas .empty-row { color: var(--text-faint); }

/* ── Metric tiles ─────────────────────────────────────────────────────── */
.app-canvas .metric-tile {
    padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
}
/* Values shrink with the tile (container units) and only wrap as a last resort — never
   truncated, since a cut-off number is a wrong number. */
.app-canvas .metric-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.app-canvas .metric-tile { min-width: 0; container-type: inline-size; }
.app-canvas .metric-tile::before { background: var(--accent); }
.app-canvas .metric-tile:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--text) 18%, var(--line)); }
.app-canvas .tile-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-faint); }
.app-canvas .tile-value {
    color: var(--text); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    font-size: clamp(1.05rem, 15cqi, 1.75rem); line-height: 1.15;
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.app-canvas .tile-label { overflow-wrap: anywhere; }
.app-canvas .tile-value-small { font-size: 0.75rem; }
.app-canvas .tile-sub { color: var(--text-muted); }

/* ── Modals ───────────────────────────────────────────────────────────── */
.app-canvas .modal-overlay { background: rgba(0, 0, 0, 0.55); }
.app-canvas .modal-card {
    padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-pop);
}
.app-canvas .modal-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.app-canvas .modal-actions { margin-top: var(--space-5); gap: var(--space-2); }

/* ── Feedback: unsaved banner floats like a toast; legacy action toasts ── */
.app-canvas .unsaved-banner {
    left: 50%; right: auto; bottom: var(--space-4); width: min(640px, calc(100vw - 2 * var(--space-4)));
    justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2);
    box-shadow: var(--shadow-pop); transform: translate(-50%, 24px);
}
.app-canvas .unsaved-banner.visible { transform: translate(-50%, 0); }
.app-canvas .unsaved-banner-text { color: var(--text); font-size: 14px; font-weight: 600; }
body:has(.unsaved-banner.visible) { --toast-bottom: 88px; }
@media (max-width: 640px) { .app-canvas .unsaved-banner { flex-wrap: wrap; } }

.app-canvas .toast {
    bottom: var(--toast-bottom, var(--space-4)); right: var(--space-4); z-index: 9990; border-radius: var(--radius-md);
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
    font-size: 13px; font-weight: 600; box-shadow: var(--shadow-pop);
}
.app-canvas .toast-action { border-radius: var(--radius-pill); border-color: var(--line); }
.app-canvas .toast-action:hover { background: var(--surface-3); }

/* Focus rings on page-level interactive bits that had none. */
.app-canvas .config-input:focus-visible, .app-canvas .config-select:focus-visible { outline: none; }
.app-canvas summary:focus-visible, .app-canvas .quick-check:focus-within { outline: none; box-shadow: var(--ring-focus); }

/* ── Member-detail stat tiles: fill the row, no trailing gap, long role names wrap ── */
.app-canvas .config-section .user-stats-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 0; }
.app-canvas .user-stats-grid .tile-value { font-size: 1.5rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }

/* Bare fieldsets used only to disable a group of controls draw no frame. */
.app-canvas fieldset.notif-settings-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.md-body a.button { text-decoration: none; }

/* ON/OFF pill on webhooks and autoresponders (markup/JS toggle .active). */
.app-canvas .toggle-btn { min-width: 48px; padding: 3px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.app-canvas .toggle-btn.active { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-hover); }
.app-canvas .toggle-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }