/*
 * Fullspeed UI foundation
 * -----------------------
 * This file owns shared palette tokens and component appearance.
 * Feature stylesheets should own layout, sizing and feature-specific behavior.
 * New UI should compose these fs-ui-* primitives instead of hardcoding light/dark colours.
 */
:root {
    color-scheme: light;
    --fs-font-sans: Arial, Helvetica, sans-serif;
    --fs-bg: #eef2f6;
    --fs-panel: #ffffff;
    --fs-panel-raised: #ffffff;
    --fs-panel-soft: #f7f9fc;
    --fs-control: #ffffff;
    --fs-hover: #f0f3f7;
    --fs-selected: #e7eefc;
    --fs-selected-border: rgba(29, 78, 216, 0.34);
    --fs-border: rgba(15, 23, 42, 0.12);
    --fs-border-strong: rgba(15, 23, 42, 0.22);
    --fs-text: #111827;
    --fs-muted: #64748b;
    --fs-primary: #1d4ed8;
    --fs-primary-soft: rgba(29, 78, 216, 0.10);
    --fs-brand: #b82530;
    --fs-brand-text: #ffffff;
    --fs-brand-gradient: radial-gradient(ellipse at 100% 0%, #ce3535 0%, #b82530 58%, #991f2a 100%);
    --fs-brand-page-glow: rgba(205, 43, 53, 0.13);
    --fs-brand-hero-glow: rgba(205, 43, 53, 0.14);
    --fs-danger: #b91c1c;
    --fs-warning: #b45309;
    --fs-success: #047857;
    --fs-info-bg: #eff6ff;
    --fs-info-border: #bfdbfe;
    --fs-info-text: #1e3a8a;
    --fs-overlay: rgba(0, 0, 0, 0.45);
    --fs-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
    --fs-shadow-control: 0 4px 10px rgba(15, 23, 42, 0.08);
    --fs-radius: 16px;
    --fs-radius-sm: 11px;
}

:root[data-map-theme="dark"] {
    color-scheme: dark;
    --fs-bg: #111111;
    --fs-panel: #1c1c1c;
    --fs-panel-raised: #242424;
    --fs-panel-soft: #262626;
    --fs-control: #222222;
    --fs-hover: #2e2e2e;
    --fs-selected: #354154;
    --fs-selected-border: rgba(147, 185, 255, 0.58);
    --fs-border: rgba(255, 255, 255, 0.14);
    --fs-border-strong: rgba(255, 255, 255, 0.27);
    --fs-text: #f1f5f9;
    --fs-muted: #aeb8c7;
    --fs-primary: #93b9ff;
    --fs-primary-soft: rgba(96, 165, 250, 0.17);
    --fs-brand-page-glow: rgba(205, 43, 53, 0.20);
    --fs-brand-hero-glow: rgba(205, 43, 53, 0.25);
    --fs-danger: #fca5a5;
    --fs-warning: #facc6b;
    --fs-success: #86efac;
    --fs-info-bg: #202e42;
    --fs-info-border: #425f88;
    --fs-info-text: #dce9ff;
    --fs-overlay: rgba(0, 0, 0, 0.72);
    --fs-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
    --fs-shadow-control: 0 5px 12px rgba(0, 0, 0, 0.28);
}

/* Opt-in branded page, header and actions; feature CSS retains their layout. */
.fs-ui-page {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(ellipse at 88% 0%, var(--fs-brand-page-glow), transparent 48rem), var(--fs-bg);
    color: var(--fs-text);
    font-family: var(--fs-font-sans);
}

.fs-ui-hero {
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-radius);
    background: radial-gradient(ellipse at 100% 0%, var(--fs-brand-hero-glow), transparent 75%), var(--fs-panel);
    color: var(--fs-text);
    box-shadow: var(--fs-shadow-control);
}

.fs-ui-overlay { background: var(--fs-overlay); }

.fs-ui-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--fs-border);
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--fs-panel-raised);
    color: var(--fs-text);
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.fs-ui-button:hover:not(:disabled) {
    background: var(--fs-hover);
    box-shadow: var(--fs-shadow-control);
}

.fs-ui-button:active:not(:disabled) { transform: scale(.98); }
.fs-ui-button:disabled { opacity: .55; cursor: not-allowed; }

.fs-ui-button--primary,
.fs-ui-button--primary:hover:not(:disabled) {
    border-color: transparent;
    background: var(--fs-brand-gradient);
    color: var(--fs-brand-text);
}

.fs-ui-button--danger,
.fs-ui-button--danger:hover:not(:disabled) {
    color: var(--fs-danger);
}

.fs-ui-button:focus-visible,
.fs-ui-editable[contenteditable="true"]:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
}

.fs-ui-editable { color: var(--fs-text); overflow-wrap: anywhere; }
.fs-ui-editable[contenteditable="true"] { cursor: text; }
.fs-ui-editable[contenteditable="true"]:focus { background: var(--fs-selected); }
.fs-ui-editable[contenteditable="false"] { cursor: default; }

.fs-ui-surface {
    border: 1px solid var(--fs-border);
    background: var(--fs-panel);
    color: var(--fs-text);
}

.fs-ui-surface-soft {
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-radius-sm);
    background: var(--fs-panel-soft);
    color: var(--fs-text);
}

input.fs-ui-control,
select.fs-ui-control,
textarea.fs-ui-control {
    border: 1px solid var(--fs-border);
    border-radius: 10px;
    outline: 0;
    background: var(--fs-control);
    color: var(--fs-text);
    font: inherit;
}

input.fs-ui-control::placeholder,
textarea.fs-ui-control::placeholder {
    color: var(--fs-muted);
    opacity: 1;
}

input.fs-ui-control:focus,
select.fs-ui-control:focus,
textarea.fs-ui-control:focus {
    border-color: var(--fs-selected-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-primary) 14%, transparent);
}

.fs-ui-field > label {
    color: var(--fs-text);
}

.fs-ui-list-button {
    border: 1px solid var(--fs-border);
    border-radius: 10px;
    background: var(--fs-panel-raised);
    color: var(--fs-text);
    cursor: pointer;
    transition:
        transform 240ms cubic-bezier(0.2, 0.85, 0.2, 1),
        border-color 180ms ease-out,
        background 180ms ease-out,
        color 180ms ease-out,
        box-shadow 180ms ease-out;
}

.fs-ui-list-button:hover,
.fs-ui-list-button:focus-visible,
.fs-ui-list-button.is-active,
.fs-ui-list-button[aria-selected="true"] {
    outline: none;
    border-color: var(--fs-selected-border);
    background: var(--fs-selected);
    color: var(--fs-text);
    box-shadow: var(--fs-shadow-control);
    transform: scale(1.01);
}

.fs-ui-secondary {
    color: var(--fs-muted);
}

.fs-ui-notice {
    border: 1px solid var(--fs-border);
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.fs-ui-notice--info {
    border-color: var(--fs-info-border);
    background: var(--fs-info-bg);
    color: var(--fs-info-text);
}

.fs-ui-tabs,
.fs-ui-segmented,
.fs-ui-toolbar-strip {
    border: 1px solid var(--fs-border);
    background: var(--fs-panel-soft);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fs-text) 5%, transparent);
}

.fs-ui-tab {
    border-color: transparent;
    background: transparent;
    color: var(--fs-muted);
}

.fs-ui-tab:hover,
.fs-ui-tab:focus-visible {
    color: var(--fs-text);
    outline: none;
}

.fs-ui-tab[aria-selected="true"] {
    background: var(--fs-selected);
    color: var(--fs-text);
    box-shadow: var(--fs-shadow-control);
}

:root[data-map-theme] .fs-ui-pill {
    border-color: var(--fs-border);
    background: var(--fs-control);
    color: var(--fs-text);
}

.fs-ui-segmented-label,
.fs-ui-segmented-option,
.fs-ui-kicker {
    color: var(--fs-muted);
}

.fs-ui-segmented-option {
    border-color: transparent;
    background: transparent;
}

.fs-ui-segmented-option:hover,
.fs-ui-segmented-option[aria-pressed="true"] {
    background: var(--fs-selected);
    color: var(--fs-primary);
    box-shadow: var(--fs-shadow-control);
}

.fs-ui-pill-action {
    border: 1px dashed var(--fs-selected-border);
    background: var(--fs-panel-soft);
    color: var(--fs-primary);
}

.fs-ui-pill-action:hover,
.fs-ui-pill-action:focus-visible,
.fs-ui-pill-action[aria-expanded="true"] {
    outline: none;
    border-color: var(--fs-primary);
    background: var(--fs-selected);
    color: var(--fs-text);
}

.fs-ui-icon-button {
    border: 1px solid var(--fs-border);
    border-radius: 8px;
    background: var(--fs-control);
    color: var(--fs-primary);
}

.fs-ui-icon-button:hover:not(:disabled),
.fs-ui-icon-button:focus-visible:not(:disabled) {
    outline: none;
    border-color: var(--fs-selected-border);
}

.fs-ui-tag {
    border: 1px solid color-mix(in srgb, var(--fs-tag-color, var(--ops-tag-color, #64748b)) 38%, var(--fs-border));
    background: color-mix(in srgb, var(--fs-tag-color, var(--ops-tag-color, #64748b)) 12%, var(--fs-panel));
    color: var(--fs-text);
}

:root[data-map-theme="dark"] .fs-ui-tag {
    border-color: color-mix(in srgb, var(--fs-tag-color, var(--ops-tag-color, #94a3b8)) 62%, #94a3b8);
    background: color-mix(in srgb, var(--fs-tag-color, var(--ops-tag-color, #94a3b8)) 30%, var(--fs-panel));
    color: #f8fafc;
}

.fs-ui-check-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid var(--fs-border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--fs-control);
    color: var(--fs-text);
    transition:
        border-color 180ms ease-out,
        background 180ms ease-out,
        box-shadow 180ms ease-out;
}

.fs-ui-check-card:hover {
    background: var(--fs-hover);
}

.fs-ui-check-card:focus-within {
    border-color: var(--fs-selected-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-primary) 14%, transparent);
}

.fs-ui-check-card input[type="checkbox"] {
    accent-color: var(--fs-primary);
}

.fs-ui-check-card > span {
    color: var(--fs-text);
}

input.fs-ui-control[readonly],
input.fs-ui-control:disabled,
select.fs-ui-control:disabled,
textarea.fs-ui-control:disabled {
    background: var(--fs-panel-soft);
    color: var(--fs-muted);
}

.fs-ui-data-header {
    border: 1px solid transparent;
    border-bottom-color: var(--fs-border);
    background: color-mix(in srgb, var(--fs-panel-soft) 92%, transparent);
    color: var(--fs-text);
}

.fs-ui-data-header-cell {
    border: 1px solid var(--fs-border);
    border-radius: 8px;
    background: var(--fs-panel-raised);
    color: var(--fs-muted);
}

.fs-ui-data-row {
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-radius-sm);
    background: var(--fs-panel-raised);
    color: var(--fs-text);
}

.fs-ui-data-cell {
    color: var(--fs-text);
}

.fs-ui-pill--empty {
    border-style: dashed;
    border-color: var(--fs-border-strong);
    background: var(--fs-panel-soft);
    color: var(--fs-muted);
}

.fs-ui-data-row:hover {
    border-color: var(--fs-selected-border);
    background: var(--fs-hover);
    box-shadow: var(--fs-shadow-control);
}

.fs-ui-data-row:focus,
.fs-ui-data-row:focus-visible {
    outline: none;
    border-color: var(--fs-selected-border);
    background: var(--fs-selected);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-primary) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .fs-ui-list-button,
    .fs-ui-button {
        transition-duration: 1ms;
    }
}