/* =========================================================
   GERABOI v6.1 — Compatibility & Design System Patch
   Load AFTER legacy/global CSS and BEFORE module CSS.
   ========================================================= */

:root {
    --gb-green: #123f36;
    --gb-green-deep: #092b25;
    --gb-green-soft: #eaf4ef;
    --gb-orange: #f15a24;
    --gb-orange-hover: #d94d1c;
    --gb-orange-soft: #fff1ea;
    --gb-bg: #f5f6f3;
    --gb-surface: #ffffff;
    --gb-text: #142d28;
    --gb-muted: #6d7c76;
    --gb-border: #e1e8e4;
    --gb-border-hover: #c9d8d1;
    --gb-focus: #77988b;
    --gb-danger: #c94b45;
    --gb-radius-sm: 8px;
    --gb-radius-md: 12px;
    --gb-radius-lg: 18px;
    --gb-shadow-sm: 0 3px 12px rgba(9, 43, 37, .05);
    --gb-shadow-md: 0 10px 28px rgba(9, 43, 37, .09);

    /* aliases for gradual migration of legacy CSS */
    --primary-color: var(--gb-green);
    --accent-dark: var(--gb-green-deep);
    --color-default: var(--gb-text);
    --text-dark: var(--gb-text);
    --text-muted: var(--gb-muted);
}

/* Stable, accessible focus without forcing a module-specific layout. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(241, 90, 36, .18);
    outline-offset: 2px;
}

/* Prevent common Bootstrap/grid overflow in app screens. */
.gb-page,
.gb4-page,
.dashboard-content,
.gb-form-surface,
.gb-field,
.table-responsive {
    min-width: 0;
}

/* Shared form appbar. Module CSS may refine dimensions. */
.gb-form-appbar {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}

.gb-form-appbar__copy {
    min-width: 0;
    flex: 1 1 auto;
}

/* Explicitly defeat the old page-header space-between rule when both classes coexist. */
.gb-page-header.gb-form-appbar {
    justify-content: flex-start;
}

/* Progressive enhancement for form completion indicators. */
.gb-form-progress {
    width: 100%;
}

/* Bootstrap validation inherits the GeraBoi palette. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--gb-danger);
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
}