/**
 * WStyleCustom — vacentral neobrutalism skin.
 * Token values are ported verbatim from vacentral packages/ui/src/styles/globals.css
 * (phpvms brut palette). Loads after the panel's inline color settings on purpose:
 * the brut palette owns --wstyle-primary/secondary, not the admin color pickers.
 */

:root {
    --wstyle-primary: #067ec1;
    --wstyle-primary-rgb: 6, 126, 193;
    /* secondary intentionally NOT overridden: the panel's configured value
       (inline style in the layouts) stays in effect — the vacentral burnt
       orange clashed with the dashboard's blue gradient */

    /* body stays on WStyle's Manrope (theme.css); Space Grotesk is headings-only */
    --brut-heading-font: "Space Grotesk Variable", "Manrope", system-ui, sans-serif;

    --wstyle-body-bg: oklch(0.985 0.004 95);
    --wstyle-surface-bg: #ffffff;
    --wstyle-body-color: oklch(0.15 0.01 65);
    --wstyle-heading-color: oklch(0.15 0.01 65);
    --wstyle-muted-color: oklch(0.38 0.02 65);
    --wstyle-border-color: oklch(0.15 0.01 65);
    --wstyle-radius: 0;

    /* chrome stays dark (header/hero/sidebar are .chrome-dark consumers with
       dark-bg logos and photo overlays), but neutral near-black per vacentral's
       dark surface scale — not WStyle's blue-tinted glass */
    --wstyle-chrome-bg: oklch(0.145 0 0);
    --wstyle-chrome-bg-deep: oklch(0.1 0 0);
    --wstyle-chrome-color: oklch(0.985 0 0);
    --wstyle-chrome-muted: oklch(0.75 0 0);
    --wstyle-chrome-border: oklch(1 0 0 / 15%);

    --brut-muted-bg: oklch(0.94 0.018 90);
    --brut-accent: oklch(0.72 0.2 20);
    --brut-destructive: oklch(0.61 0.24 28);
    --brut-ring: oklch(0.56 0.23 264);
    --brut-primary-hover: color-mix(in oklch, var(--wstyle-primary) 88%, black);

    --brut-shadow-xs: 1px 1px 0 0 var(--wstyle-border-color);
    --brut-shadow-sm: 2px 2px 0 0 var(--wstyle-border-color);
    --brut-shadow: 3px 3px 0 0 var(--wstyle-border-color);
    --brut-shadow-md: 4px 4px 0 0 var(--wstyle-border-color);
    --brut-shadow-lg: 6px 6px 0 0 var(--wstyle-border-color);
    --brut-shadow-xl: 10px 10px 0 1px var(--wstyle-border-color);

    /* Bootstrap-level sharpening */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;
    --bs-link-color: var(--wstyle-primary);
    --bs-link-color-rgb: var(--wstyle-primary-rgb);
    --bs-link-hover-color: var(--brut-primary-hover);
}

[data-bs-theme=dark] {
    --wstyle-body-bg: oklch(0.145 0 0);
    --wstyle-surface-bg: oklch(0.205 0 0);
    --wstyle-body-color: oklch(0.985 0 0);
    --wstyle-heading-color: oklch(0.985 0 0);
    --wstyle-muted-color: oklch(0.708 0 0);
    --wstyle-border-color: oklch(1 0 0 / 10%);

    --wstyle-chrome-bg: oklch(0.205 0 0);
    --wstyle-chrome-bg-deep: oklch(0.145 0 0);
    --wstyle-chrome-color: oklch(0.985 0 0);
    --wstyle-chrome-muted: oklch(0.708 0 0);
    --wstyle-chrome-border: oklch(1 0 0 / 10%);

    --brut-muted-bg: oklch(0.269 0 0);
    --brut-destructive: oklch(0.704 0.191 22.216);
}

/* ---- Typography ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
legend {
    font-family: var(--brut-heading-font);
    letter-spacing: -0.01em;
    /* Space Grotesk tops out at wght 700; WStyle headings ask for 800, and the
       synthesized bold smears glyphs into a shadowy double-strike. Clamp it. */
    font-synthesis: none;
    font-weight: 700;
}

a {
    text-underline-offset: 3px;
}

/* ---- Browser surfaces -------------------------------------------------- */

::selection {
    background: var(--wstyle-primary);
    color: #fff;
}

input, textarea {
    caret-color: var(--wstyle-primary);
}

* {
    scrollbar-color: var(--wstyle-border-color) transparent;
}

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

/* ---- Surfaces: hard borders, hard shadows ------------------------------ */

.card,
.list-group,
.accordion-item,
.toast {
    border: 2px solid var(--wstyle-border-color);
    box-shadow: var(--brut-shadow-md);
}

.card .card,
.card .list-group {
    box-shadow: none;
}

.dropdown-menu {
    border: 2px solid var(--wstyle-border-color);
    box-shadow: var(--brut-shadow-lg);
}

.modal-content,
.offcanvas {
    border: 2px solid var(--wstyle-border-color);
    box-shadow: var(--brut-shadow-xl);
}

.alert {
    border: 2px solid var(--wstyle-border-color);
    box-shadow: var(--brut-shadow-sm);
}

.badge {
    border: 1px solid var(--wstyle-border-color);
}

.table {
    border-color: var(--wstyle-border-color);
}

.pagination .page-link {
    border: 2px solid var(--wstyle-border-color);
    margin-left: -2px;
    color: var(--wstyle-body-color);
}

.pagination .page-item.active .page-link {
    background: var(--wstyle-primary);
    border-color: var(--wstyle-border-color);
    color: #fff;
}

.nav-tabs {
    border-bottom: 2px solid var(--wstyle-border-color);
}

.nav-tabs .nav-link.active {
    border: 2px solid var(--wstyle-border-color);
    border-bottom-color: transparent;
    font-weight: 600;
}

/* ---- Forms -------------------------------------------------------------- */

.form-control,
.form-select,
.input-group-text {
    border: 2px solid var(--wstyle-border-color);
    background-color: var(--wstyle-surface-bg);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--wstyle-border-color);
    box-shadow: var(--brut-shadow-sm);
    outline: 2px solid var(--brut-ring);
    outline-offset: 1px;
}

.form-check-input {
    border: 2px solid var(--wstyle-border-color);
}

.form-check-input:checked {
    background-color: var(--wstyle-primary);
    border-color: var(--wstyle-border-color);
}

/* ---- Buttons: press-in interaction -------------------------------------- */

.btn {
    border-width: 2px;
    font-weight: 600;
    transition: transform .08s ease-out, box-shadow .08s ease-out,
                background-color .15s ease-out, color .15s ease-out;
}

.btn:not(.btn-link) {
    border-color: var(--wstyle-border-color);
    box-shadow: var(--brut-shadow-sm);
}

.btn:not(.btn-link):hover {
    transform: translate(1px, 1px);
    box-shadow: var(--brut-shadow-xs);
}

.btn:not(.btn-link):active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.btn:disabled,
.btn.disabled {
    transform: none;
    box-shadow: none;
}

.btn-primary {
    --bs-btn-bg: var(--wstyle-primary);
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--wstyle-border-color);
    --bs-btn-hover-bg: var(--brut-primary-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--wstyle-border-color);
    --bs-btn-active-bg: var(--brut-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: var(--wstyle-border-color);
    --bs-btn-disabled-bg: var(--wstyle-primary);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-border-color: var(--wstyle-border-color);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.btn-soft {
    --bs-btn-color: var(--wstyle-body-color);
    --bs-btn-bg: var(--wstyle-surface-bg);
    --bs-btn-border-color: var(--wstyle-border-color);
    --bs-btn-hover-bg: var(--brut-muted-bg);
    --bs-btn-hover-color: var(--wstyle-body-color);
    --bs-btn-hover-border-color: var(--wstyle-border-color);
    --bs-btn-active-bg: var(--brut-muted-bg);
    --bs-btn-active-color: var(--wstyle-body-color);
    --bs-btn-active-border-color: var(--wstyle-border-color);
}

.btn-danger {
    --bs-btn-bg: var(--brut-destructive);
    --bs-btn-border-color: var(--wstyle-border-color);
    --bs-btn-hover-bg: color-mix(in oklch, var(--brut-destructive) 88%, black);
    --bs-btn-hover-border-color: var(--wstyle-border-color);
}

/* ---- Service-detail segmented tabs -------------------------------------- */
/* .sd-segtabs (service-detail.css) gives only the active tab a 1px border and
   hovered tabs a background fill with NO border — in the brut system that reads
   as the border "disappearing" on hover. Give tabs a consistent hard 2px edge:
   transparent until hover/active, open at the bottom so the active tab still
   merges into the panel. Scoped with .sd-tabcard to outrank service-detail.css,
   which loads after brut.css in the page head block. */
.sd-tabcard .sd-segtabs .nav-link {
    border-block-start-width: 2px;
    border-inline-start-width: 2px;
    border-inline-end-width: 2px;
    border-block-end-width: 0;
}

.sd-tabcard .sd-segtabs .nav-link:hover,
.sd-tabcard .sd-segtabs .nav-link:focus-visible {
    border-color: var(--wstyle-border-color);
    background-color: var(--wstyle-surface-bg);
}

.sd-tabcard .sd-segtabs .nav-link.active {
    border-color: var(--wstyle-border-color);
}