/* Shared dark theme: colors, base elements, buttons, and the toast.
   Used by the FSM pages and the support pages (Ticket, Tech Call, Scope).
   Page stylesheets load after this one and only add their own layout. */

:root {
    --bg: #121212;
    --surface: #1e1e1e;
    --surface-raised: #272727;
    --border: #3a3a3a;
    --text: #ececec;
    --muted: #a3a3a3;
    --accent: #ffd700;
    --accent-text: #1a1a1a;
    --danger: #ff6b6b;
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: 20px;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

h1,
h2,
h3 {
    margin: 0;
}

.muted {
    color: var(--muted);
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.badge {
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

/* ---------- Buttons ---------- */

.primary-btn {
    padding: 8px 14px;
    background: var(--accent);
    border: 0;
    border-radius: 6px;
    color: var(--accent-text);
    font-weight: 600;
}

.primary-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.ghost-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.ghost-btn:hover:not(:disabled) {
    border-color: var(--accent);
}

a.ghost-btn {
    color: inherit;
    text-decoration: none;
}

.icon-btn {
    flex: none;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    line-height: 1;
}

.icon-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* ---------- Toast (shown by showToast in fsmDom.js) ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 20;
    padding: 10px 16px;
    background: var(--surface-raised);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 0.2s, transform 0.2s;
}

.toast-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast-error {
    border-color: var(--danger);
}