@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-latin-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --ap-workspace-font: var(--ap-theme-font-sans, "Inter", "Segoe UI", system-ui, sans-serif);
    --ap-workspace-canvas: var(--color-base-100, #fff);
    --ap-workspace-surface: var(--color-base-100, #fff);
    --ap-workspace-subtle: var(--color-base-200, #f5f8fa);
    --ap-workspace-line: var(--color-base-300, #e1e8ee);
    --ap-workspace-control-line: color-mix(in srgb, var(--ap-workspace-ink) 60%, var(--ap-workspace-canvas));
    --ap-workspace-ink: var(--color-base-content, #344763);
    --ap-workspace-muted: color-mix(in srgb, var(--ap-workspace-ink) 76%, var(--ap-workspace-canvas));
    --ap-workspace-hover: color-mix(in srgb, var(--ap-workspace-ink) 7%, var(--ap-workspace-canvas));
    --ap-workspace-accent: var(--color-primary, #296d79);
    --ap-workspace-on-accent: var(--color-primary-content, #fff);
    --ap-workspace-radius: 8px;
    --ap-workspace-title-size: 24px;
    --ap-workspace-header-height: 56px;
    --ap-page-gutter: 24px;
}

body.ap-workspace {
    background: var(--ap-workspace-canvas);
    color: var(--ap-workspace-ink);
    font-family: var(--ap-workspace-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    hyphens: none;
}

.ap-workspace :where(button, input, select, textarea) {
    font-family: inherit;
}

.ap-workspace :where(h1, h2, h3, h4) {
    font-weight: 500;
    letter-spacing: -0.015em;
}

.ap-workspace :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ap-workspace-accent);
    outline-offset: 3px;
}

.ap-workspace :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--color-error);
}

.ap-workspace :where(input, select, textarea)[aria-invalid="true"]:focus-visible {
    outline-color: var(--color-error);
}

.ap-workspace :is(.btn, input[type="submit"]):not(:where(
    .ap-workspace-rail *, #sidebar *, .ap-workspace-navbar *,
    .flatpickr-calendar *, .fc *, .ql-toolbar *,
    .tab, [role="tab"], input[type="checkbox"], input[type="radio"]
)) {
    --ap-action-fill: transparent;
    --ap-action-ink: var(--ap-workspace-ink);
    --ap-action-border: var(--ap-workspace-line);
    min-height: 36px;
    height: auto;
    max-width: 100%;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--ap-action-border);
    border-radius: var(--ap-workspace-radius);
    background: var(--ap-action-fill);
    color: var(--ap-action-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    text-decoration: none;
    white-space: normal;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    transition: background-color 120ms ease, border-color 120ms ease;

    &.btn:is(.btn-primary, .btn-neutral),
    &:is(input[type="submit"]) {
        --ap-action-fill: var(--ap-workspace-ink);
        --ap-action-ink: var(--ap-workspace-canvas);
        --ap-action-border: var(--ap-workspace-ink);
    }

    &.btn:is(.btn-secondary, .btn-accent) {
        --ap-action-fill: var(--ap-workspace-subtle);
        --ap-action-ink: var(--ap-workspace-ink);
        --ap-action-border: var(--ap-workspace-line);
    }

    &.btn.btn-error {
        --ap-action-fill: var(--color-error);
        --ap-action-ink: var(--color-error-content);
        --ap-action-border: var(--color-error);
    }

    &.btn.btn-success {
        --ap-action-fill: var(--color-success);
        --ap-action-ink: var(--color-success-content);
        --ap-action-border: var(--color-success);
    }

    &.btn.btn-warning {
        --ap-action-fill: var(--color-warning);
        --ap-action-ink: var(--color-warning-content);
        --ap-action-border: var(--color-warning);
    }

    &.btn.btn-info {
        --ap-action-fill: var(--color-info);
        --ap-action-ink: var(--color-info-content);
        --ap-action-border: var(--color-info);
    }

    &.btn:is(.btn-outline, .btn-ghost, .btn-link) {
        --ap-action-fill: transparent;
        --ap-action-ink: var(--ap-workspace-ink);
        --ap-action-border: var(--ap-workspace-line);
    }

    &.btn:is(.btn-ghost, .btn-link) {
        --ap-action-border: transparent;
    }

    &.btn.btn-error:is(.btn-outline, .btn-ghost, .btn-link) {
        --ap-action-ink: var(--color-error);
        --ap-action-border: color-mix(in srgb, var(--color-error) 40%, transparent);
    }

    &.btn:is(.btn-circle, .btn-square) {
        width: 36px;
        height: 36px;
        padding: 0;
        flex-shrink: 0;
    }

    &.btn.btn-xs {
        min-height: 28px;
        padding: 3px 8px;
        font-size: 12px;
    }

    &.btn:not(:is(:disabled, [disabled], [aria-disabled="true"], .btn-disabled)):hover {
        background: color-mix(in srgb, var(--ap-action-fill, transparent) 92%, var(--ap-workspace-ink) 8%);
        box-shadow: none;
        transform: none;
    }

    &.btn:is(.btn-active, [aria-pressed="true"]):is(.btn-outline, .btn-ghost) {
        background: var(--ap-workspace-hover);
        border-color: var(--ap-workspace-muted);
    }

    &.btn:is(:disabled, [disabled], [aria-disabled="true"], .btn-disabled) {
        opacity: .5;
        cursor: not-allowed;
    }

    @media (max-width: 760px) {
        min-height: 42px;
        &.btn:is(.btn-circle, .btn-square) { width: 42px; height: 42px; }
    }
}

.ap-workspace :where(.input, .select, .textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], input[type="search"],
    input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
    select, textarea):not(:where(.flatpickr-calendar *, .ql-toolbar *)) {
    min-height: 38px;
    max-width: 100%;
    border: 1px solid var(--ap-workspace-control-line);
    border-radius: var(--ap-workspace-radius);
    background-color: var(--ap-workspace-surface);
    color: var(--ap-workspace-ink);
    font-size: 14px;
    box-shadow: none;
}

.ap-workspace :where(.input, .select, .textarea, input, select, textarea):disabled {
    background-color: var(--ap-workspace-subtle);
    color: var(--ap-workspace-muted);
    cursor: not-allowed;
}

.ap-workspace :where(input, textarea)[readonly] {
    background-color: var(--ap-workspace-subtle);
}

.ap-workspace :where(.input, .select, .textarea, input, select, textarea)::placeholder {
    color: var(--ap-workspace-muted);
    opacity: 1;
}

.ap-workspace :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--ap-workspace-accent);
}

.ap-workspace :where(.label-text, label.font-bold, label.font-semibold) {
    font-size: 13px;
    font-weight: 500;
}

.ap-workspace .badge:not(.ap-navbar-indicator-dot) {
    min-height: 22px;
    height: auto;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    text-transform: none;
    letter-spacing: normal;
}

.ap-workspace .alert {
    border-radius: var(--ap-workspace-radius);
    box-shadow: none;
    font-size: 13px;
}

.ap-workspace .toast-card {
    border: 1px solid var(--ap-workspace-line);
    border-radius: var(--ap-workspace-radius);
}

.ap-workspace .ap-auth-shell {
    background: var(--ap-workspace-canvas);
}

.ap-workspace .login-card,
.ap-workspace .ap-auth-page > div > .card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ap-workspace .ap-auth-content {
    padding: 24px 8px;
}

.ap-workspace .ap-auth-page > div {
    max-width: 480px;
}

.ap-workspace .ap-auth-page .card-title {
    font-size: var(--ap-workspace-title-size);
}

.ap-workspace .account-action-dock > div > div {
    border-radius: 0;
    border-width: 1px 0 0;
    box-shadow: none;
}

@media (max-width: 760px) {
    :root { --ap-page-gutter: 14px; --ap-workspace-title-size: 21px; }
    .ap-workspace :where(.input, .select, .textarea, input, select, textarea):not([type="hidden"]) {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-workspace :is(.btn, .card, .drawer-side, [data-sticky-hero]) {
        transition: none;
        scroll-behavior: auto;
    }
}

@media (forced-colors: active) {
    .ap-workspace :is(.btn, .input, .select, .textarea, .badge, .alert) { border: 1px solid CanvasText; }
    .ap-workspace :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}

@media print {
    body.ap-workspace { color: #000; background: #fff; font-size: 10pt; }
    .ap-workspace .account-action-dock { display: none; }
}

/* Schematic tools share action colours and states, with compact drawing controls. */
.ap-workspace .railway-schematic :is(.btn, input[type="submit"]) {
    min-height: 32px;
    padding: 5px 8px;
    gap: 6px;
    font-family: var(--ap-workspace-font);
    white-space: nowrap;
}

.ap-workspace .railway-schematic .btn:focus-visible {
    outline: 2px solid var(--ap-workspace-accent);
    outline-offset: 3px;
}