/* =========================================================
   Pico variable overrides — tuned toward the Brutalism
   “Business / Marketing” dashboard reference.

   NOTE: This file ONLY changes the variables you listed.
   No additional styling rules are introduced.
   ========================================================= */

/* ---------- Base scale + layout rhythm ---------- */
:root,
:host {
    /* Typography */
    --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --pico-font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, var(--pico-font-family-emoji);
    --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
    --pico-font-family: var(--pico-font-family-sans-serif);

    --pico-line-height: 1.4;
    --pico-font-weight: 400;

    /* Base size smaller (dashboard-like) */
    --pico-font-size: 87.5%;

    --pico-text-underline-offset: 0.12rem;

    /* Shape + borders */
    --pico-border-radius: 0.375rem;
    /* slightly rounder like reference */
    --pico-border-width: 0.0625rem;
    /* keep ~1px */
    --pico-outline-width: 0.125rem;

    /* Motion */
    --pico-transition: 0.16s ease-in-out;

    /* Spacing (tighter grid / cards) */
    --pico-spacing: 0.875rem;
    --pico-typography-spacing-vertical: 0.75rem;

    --pico-block-spacing-vertical: var(--pico-spacing);
    --pico-block-spacing-horizontal: var(--pico-spacing);
    --pico-grid-column-gap: var(--pico-spacing);
    --pico-grid-row-gap: var(--pico-spacing);

    --pico-form-element-spacing-vertical: 0.625rem;
    --pico-form-element-spacing-horizontal: 0.875rem;

    /* Groups */
    --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
    --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);

    /* Modal */
    --pico-modal-overlay-backdrop-filter: blur(0.25rem);

    /* Nav spacing (compact like reference) */
    --pico-nav-element-spacing-vertical: 0.75rem;
    --pico-nav-element-spacing-horizontal: 0.5rem;
    --pico-nav-link-spacing-vertical: 0.45rem;
    --pico-nav-link-spacing-horizontal: 0.6rem;

    --pico-nav-breadcrumb-divider: ">";
}

/* Keep responsive scaling subtle (don’t balloon typography) */
@media (min-width: 576px) {

    :root,
    :host {
        --pico-font-size: 90%;
    }
}

@media (min-width: 768px) {

    :root,
    :host {
        --pico-font-size: 92.5%;
    }
}

@media (min-width: 1024px) {

    :root,
    :host {
        --pico-font-size: 95%;
    }
}

@media (min-width: 1280px) {

    :root,
    :host {
        --pico-font-size: 97.5%;
    }
}

@media (min-width: 1536px) {

    :root,
    :host {
        --pico-font-size: 100%;
    }
}

/* Links: keep underline behaviour, but don’t change selector rules */
a {
    --pico-text-decoration: underline;
}

a.secondary,
a.contrast {
    --pico-text-decoration: underline;
}

small {
    --pico-font-size: 0.85em;
}

/* Headings: smaller + dashboard-y */
h1,
h2,
h3,
h4,
h5,
h6 {
    --pico-font-weight: 700;
}

h1 {
    --pico-font-size: 1.5rem;
    --pico-line-height: 1.15;
    --pico-typography-spacing-top: 1.75rem;
}

h2 {
    --pico-font-size: 1.25rem;
    --pico-line-height: 1.18;
    --pico-typography-spacing-top: 1.5rem;
}

h3 {
    --pico-font-size: 1.125rem;
    --pico-line-height: 1.22;
    --pico-typography-spacing-top: 1.25rem;
}

h4 {
    --pico-font-size: 1rem;
    --pico-line-height: 1.25;
    --pico-typography-spacing-top: 1.1rem;
}

h5 {
    --pico-font-size: 0.95rem;
    --pico-line-height: 1.3;
    --pico-typography-spacing-top: 1rem;
}

h6 {
    --pico-font-size: 0.9rem;
    --pico-line-height: 1.3;
    --pico-typography-spacing-top: 0.9rem;
}

/* Table header weight/borders: less chunky */
thead th,
thead td,
tfoot th,
tfoot td {
    --pico-font-weight: 600;
    --pico-border-width: 0.125rem;
}

pre,
code,
kbd,
samp {
    --pico-font-family: var(--pico-font-family-monospace);
}

kbd {
    --pico-font-weight: bolder;
}

input:not([type=submit],
    [type=button],
    [type=reset],
    [type=checkbox],
    [type=radio],
    [type=file]),
:where(select, textarea) {
    --pico-outline-width: 0.0625rem;
}

[type=search] {
    --pico-border-radius: 5rem;
}

[type=checkbox],
[type=radio] {
    --pico-border-width: 0.125rem;
}

[type=checkbox][role=switch] {
    --pico-border-width: 0.1875rem;
}

details.dropdown summary:not([role=button]) {
    --pico-outline-width: 0.0625rem;
}

nav details.dropdown summary:focus-visible {
    --pico-outline-width: 0.125rem;
}

[role=search] {
    --pico-border-radius: 5rem;
}

[role=search]:has(button.secondary:focus,
    [type=submit].secondary:focus,
    [type=button].secondary:focus,
    [role=button].secondary:focus),
[role=group]:has(button.secondary:focus,
    [type=submit].secondary:focus,
    [type=button].secondary:focus,
    [role=button].secondary:focus) {
    --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}

[role=search]:has(button.contrast:focus,
    [type=submit].contrast:focus,
    [type=button].contrast:focus,
    [role=button].contrast:focus),
[role=group]:has(button.contrast:focus,
    [type=submit].contrast:focus,
    [type=button].contrast:focus,
    [role=button].contrast:focus) {
    --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
}

[role=search] button,
[role=search] [type=submit],
[role=search] [type=button],
[role=search] [role=button],
[role=group] button,
[role=group] [type=submit],
[role=group] [type=button],
[role=group] [role=button] {
    --pico-form-element-spacing-horizontal: 1.75rem;
}

details summary[role=button]:not(.outline)::after {
    filter: brightness(0) invert(1);
}

[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
    filter: brightness(0) invert(1);
}

/* ---------- Colour system (Light) ---------- */
[data-theme=light],
:root:not([data-theme=dark]),
:host(:not([data-theme=dark])) {
    color-scheme: light;

    /* Backgrounds (reference has light-grey app bg + white cards) */
    --pico-background-color: #f2f2f2;
    --pico-color: #111111;

    --pico-text-selection-color: rgba(134, 196, 64, 0.22);

    --pico-muted-color: #6b7280;

    /* Borders are “ink” in the reference */
    --pico-muted-border-color: #111111;

    /* Primary: ink (buttons/borders feel black-first) */
    --pico-primary: #111111;
    --pico-primary-background: #cfe2ff;
    --pico-primary-border: #111111;
    --pico-primary-underline: rgba(17, 17, 17, 0.4);

    --pico-primary-hover: #111111;
    --pico-primary-hover-background: #bcd6ff;
    --pico-primary-hover-border: #111111;
    --pico-primary-hover-underline: rgba(0, 0, 0, 0.55);

    --pico-primary-focus: rgba(17, 17, 17, 0.18);
    --pico-primary-inverse: #111111;
    /* black text on pastel */

    /* Secondary: lime accent (for “active” states like selected range pill) */
    --pico-secondary: #111111;
    --pico-secondary-background: #fff3a6;
    --pico-secondary-border: #111111;

    --pico-secondary-underline: rgba(134, 196, 64, 0.45);

    --pico-secondary-hover: #111111;
    --pico-secondary-hover-background: #ffe986;
    --pico-secondary-hover-border: #111111;
    --pico-secondary-hover-underline: rgba(120, 183, 55, 0.55);

    --pico-secondary-focus: rgba(17, 17, 17, 0.18);
    --pico-secondary-inverse: #111111;

    /* Contrast: also ink */
    --pico-contrast: #111111;
    --pico-contrast-background: #ffffff;
    --pico-contrast-border: #111111;
    --pico-contrast-underline: rgba(17, 17, 17, 0.4);

    --pico-contrast-hover: #111111;
    --pico-contrast-hover-background: #f4f4f4;
    --pico-contrast-hover-border: #111111;
    --pico-contrast-hover-underline: rgba(0, 0, 0, 0.55);

    --pico-contrast-focus: rgba(17, 17, 17, 0.18);
    --pico-contrast-inverse: #111111;

    /* Brutal shadow language (offset) */
    --pico-box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
    --pico-card-box-shadow: var(--pico-box-shadow);

    /* Heading colours: mostly ink */
    --pico-h1-color: #111111;
    --pico-h2-color: #111111;
    --pico-h3-color: #111111;
    --pico-h4-color: #111111;
    --pico-h5-color: #111111;
    --pico-h6-color: #111111;

    /* Mark */
    --pico-mark-background-color: #fff3a6;
    --pico-mark-color: #111111;

    /* Success / danger */
    --pico-ins-color: #63b12f;
    --pico-del-color: #e23b3b;

    --pico-blockquote-border-color: #111111;
    --pico-blockquote-footer-color: var(--pico-muted-color);

    /* Buttons inherit brutal shadow by default */
    --pico-button-box-shadow: none;
    --pico-button-hover-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85);

    /* Tables: ink borders */
    --pico-table-border-color: #111111;
    --pico-table-row-stripped-background-color: transparent;
    ;

    /* Code */
    --pico-code-background-color: #f6f6f6;
    --pico-code-color: #111111;
    --pico-code-kbd-background-color: #111111;
    --pico-code-kbd-color: #ffffff;

    /* Form elements: white surface + ink border */
    --pico-form-element-background-color: #ffffff;
    --pico-form-element-selected-background-color: #ededed;
    --pico-form-element-border-color: #111111;
    --pico-form-element-color: #111111;
    --pico-form-element-placeholder-color: rgba(17, 17, 17, 0.5);
    --pico-form-element-active-background-color: #ffffff;
    --pico-form-element-active-border-color: #111111;
    --pico-form-element-focus-color: rgba(17, 17, 17, 0.18);

    --pico-form-element-disabled-opacity: 0.55;

    --pico-form-element-invalid-border-color: #e23b3b;
    --pico-form-element-invalid-active-border-color: #e23b3b;
    --pico-form-element-invalid-focus-color: rgba(226, 59, 59, 0.22);

    --pico-form-element-valid-border-color: #86c440;
    --pico-form-element-valid-active-border-color: #86c440;
    --pico-form-element-valid-focus-color: rgba(134, 196, 64, 0.22);

    /* Switches */
    --pico-switch-background-color: #d1d5db;
    --pico-switch-checked-background-color: #86c440;
    --pico-switch-color: #ffffff;
    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    /* Range */
    --pico-range-border-color: #111111;
    --pico-range-active-border-color: #111111;
    --pico-range-thumb-border-color: #ffffff;
    --pico-range-thumb-color: #111111;
    --pico-range-thumb-active-color: #86c440;

    /* Accordion */
    --pico-accordion-border-color: #111111;
    --pico-accordion-active-summary-color: #111111;
    --pico-accordion-close-summary-color: #111111;
    --pico-accordion-open-summary-color: var(--pico-muted-color);

    /* Cards: white surface + ink border */
    --pico-card-background-color: #ffffff;
    --pico-card-border-color: #111111;
    --pico-card-sectioning-background-color: #ffffff;

    /* Dropdown */
    --pico-dropdown-background-color: #ffffff;
    --pico-dropdown-border-color: #111111;
    --pico-dropdown-box-shadow: var(--pico-box-shadow);
    --pico-dropdown-color: #111111;
    --pico-dropdown-hover-background-color: rgba(17, 17, 17, 0.04);

    --pico-loading-spinner-opacity: 0.5;

    /* Modal overlay */
    --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.14);

    /* Progress: lime */
    --pico-progress-background-color: rgba(17, 17, 17, 0.12);
    --pico-progress-color: #86c440;

    /* Tooltip */
    --pico-tooltip-background-color: #111111;
    --pico-tooltip-color: #ffffff;

    /* Keep icons as-is (no variable changes needed here) */
}

/* Keep this existing light focus override aligned */
[data-theme=light] input:is([type=submit],
    [type=button],
    [type=reset],
    [type=checkbox],
    [type=radio],
    [type=file]),
:root:not([data-theme=dark]) input:is([type=submit],
    [type=button],
    [type=reset],
    [type=checkbox],
    [type=radio],
    [type=file]),
:host(:not([data-theme=dark])) input:is([type=submit],
    [type=button],
    [type=reset],
    [type=checkbox],
    [type=radio],
    [type=file]) {
    --pico-form-element-focus-color: var(--pico-primary-focus);
}

/* (Dark theme variables left unchanged in this pass, since your reference is light.) */

progress,
[type=checkbox],
[type=radio],
[type=range] {
    accent-color: var(--pico-primary);
}

article {
    position: relative;

    /* Card surface */
    background: var(--pico-card-background-color);
    padding: var(--pico-spacing);

    /* Full, visible border */
    border: var(--pico-border-width) solid var(--pico-card-border-color);
    border-radius: var(--pico-border-radius);

    /* IMPORTANT: no shadow by default */
    box-shadow: none;

    /* Smooth interaction */
    transition:
        transform var(--pico-transition),
        box-shadow var(--pico-transition);
}

article:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
}


/* The <dialog> itself is the overlay container (no shadow) */
dialog {
    box-shadow: none;
    border: 0;
    padding: 0;
}

/* The <article> inside <dialog> is the modal surface */
dialog>article {
    border: var(--pico-border-width) solid var(--pico-card-border-color);
    border-radius: var(--pico-border-radius);

    /* Always-elevated modal */
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.85);

    /* No hover motion */
    transform: none;
    transition: none;
}

/* Explicitly prevent hover lift/shadow changes in modals */
dialog>article:hover {
    transform: none;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.85);
}


/* Inputs: flat by default */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
textarea {
    box-shadow: none;
    transition:
        box-shadow var(--pico-transition),
        transform var(--pico-transition);
}

/* Inputs: subtle brutal shadow on focus */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):focus,
select:focus,
textarea:focus,
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------
   Buttons: icons/pseudo-elements inherit text colour
   Works for inline SVGs + icon fonts + ::before/::after
-------------------------------------------------------- */

:where(button, a[role="button"], [role="button"], input[type="submit"], input[type="button"], input[type="reset"]) {
    color: inherit;
    /* keep Pico’s computed colour */
}

/* Pseudo-elements (including ones used for dropdown chevrons/spinners) */
:where(button, a[role="button"], [role="button"], input[type="submit"], input[type="button"], input[type="reset"])::before,
:where(button, a[role="button"], [role="button"], input[type="submit"], input[type="button"], input[type="reset"])::after {
    color: currentColor;
    border-color: currentColor;
}

/* Inline SVG icons inside buttons */
:where(button, a[role="button"], [role="button"]) :where(svg, svg *) {
    fill: currentColor;
    stroke: currentColor;
}

/* Icon fonts / inline elements */
:where(button, a[role="button"], [role="button"]) :where(i, span, em, strong) {
    color: currentColor;
}

/* If you use masked icons on pseudo-elements, this makes them tintable */
:where(button, a[role="button"], [role="button"])::before,
:where(button, a[role="button"], [role="button"])::after {
    background-color: currentColor;
}


button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

button svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

a svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}


/* Table container: full outline like screenshot */
table {
    border: 1px solid #111111;
    border-collapse: separate;
    /* allows consistent outer border */
    border-spacing: 0;
    background: #ffffff;
}

/* Header row: light grey fill + strong bottom rule */
thead th,
thead td {
    background: #e6e6e6;
    border-bottom: 1px solid #111111;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 0.9em;
}

/* Body cells: only horizontal rules (clean grid) */
tbody td,
tbody th {
    background: #ffffff;
    border-bottom: 1px solid #111111;
}

/* Remove last bottom border so outer border reads clean */
tbody tr:last-child td,
tbody tr:last-child th {
    border-bottom: 0;
}

/* Cell padding (dashboard-like spacing) */
th,
td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

/* Optional: keep checkbox + icon columns visually centred */
td:first-child,
th:first-child,
td:last-child,
th:last-child {
    text-align: center;
    white-space: nowrap;
}

/* Remove margins from form fields inside table cells */
td :is(input,
    select,
    textarea,
    button,
    fieldset,
    label) {
    margin: 0 !important;
}