/*
 * ControlQuality — global UI foundation.
 * Tokens + page shell + reusable cq-* components. Modules adopt the components gradually;
 * nothing here is applied to legacy pages unless they use the cq-* classes.
 */

:root {
    --cq-brand: #132a5d;
    --cq-link: #1e4f91;
    --cq-text: #172033;
    --cq-muted: #5d687a;
    --cq-border: #d9e1ec;
    --cq-border-strong: #94a3b8;
    --cq-surface: #ffffff;
    --cq-surface-alt: #f8fafc;
    --cq-success: #17663a;
    --cq-success-bg: #dcfce7;
    --cq-warning: #9a3412;
    --cq-warning-bg: #ffedd5;
    --cq-danger: #b42318;
    --cq-danger-bg: #fee4e2;
    --cq-info: #1e4f91;
    --cq-info-bg: #e7f0ff;
    --cq-neutral: #334155;
    --cq-neutral-bg: #e2e8f0;
    --cq-focus: #f0b429;

    --cq-space-1: .25rem;
    --cq-space-2: .5rem;
    --cq-space-3: .75rem;
    --cq-space-4: 1rem;
    --cq-space-5: 1.5rem;
    --cq-space-6: 2rem;
    --cq-space-7: 3rem;

    --cq-radius-sm: .5rem;
    --cq-radius: .8rem;
    --cq-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    --cq-shadow-hover: 0 8px 20px rgba(15, 23, 42, .12);
    --cq-page-width: 1180px;
    --cq-page-width-wide: 1440px;
    --cq-touch-target: 44px;
}

/* ---------- Shell ---------- */

body {
    /* Legacy: kept from the former navbar styles so older pages keep their current horizontal behavior. */
    overflow-x: hidden;
}

.cq-skip-link {
    position: absolute;
    top: var(--cq-space-2);
    left: var(--cq-space-2);
    z-index: 1100;
    padding: var(--cq-space-2) var(--cq-space-4);
    border-radius: var(--cq-radius-sm);
    background: var(--cq-surface);
    color: var(--cq-link);
    font-weight: 600;
}

/* The navigation shell (sidebar + topbar) lives in shell.css (UX-SHELL-1). */

.cq-main {
    display: block;
    padding: var(--cq-space-4) var(--cq-space-3);
}

.cq-main:focus {
    outline: none;
}

.cq-messages {
    padding: var(--cq-space-4) var(--cq-space-3) 0;
}

.cq-messages .alert {
    max-width: var(--cq-page-width);
    margin: 0 auto var(--cq-space-2);
}

/* C2: the way back to the initial configuration, on screens opened from it */
.cq-setup-return {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cq-space-2);
    align-items: center;
    justify-content: space-between;
    max-width: var(--cq-page-width);
    margin: var(--cq-space-3) auto 0;
    padding: var(--cq-space-2) var(--cq-space-3);
    border: 1px solid var(--cq-border, #d0d5dd);
    border-radius: 8px;
    background: var(--cq-neutral-bg, #f2f4f7);
    font-size: .9rem;
}

.cq-setup-return a { font-weight: 600; }

@media (max-width: 1240px) { .cq-setup-return { margin-left: var(--cq-space-3); margin-right: var(--cq-space-3); } }

/* ---------- Focus ---------- */

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

/* ---------- Tailwind preflight neutralization (legacy) ----------
 * Tailwind 2 removes borders/padding from unstyled form controls (e.g. {{ form.field }}).
 * Element-level specificity: ties with the preflight (and wins by coming later), while any
 * class rule — Bootstrap, Tailwind utilities, module CSS — still overrides it. */

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"])),
select,
textarea {
    border: 1px solid var(--cq-border-strong);
    border-radius: .375rem;
    padding: .375rem .5rem;
    background-color: var(--cq-surface);
    color: var(--cq-text);
    font: inherit;
}

/* ---------- Layout ---------- */

.cq-page {
    max-width: var(--cq-page-width);
    margin: 0 auto;
    color: var(--cq-text);
}

.cq-page--wide {
    max-width: var(--cq-page-width-wide);
}

.cq-page-header {
    margin: var(--cq-space-5) 0;
}

.cq-page-header h1 {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    margin: 0;
    font-weight: 700;
}

.cq-page-header p {
    color: var(--cq-muted);
    margin: var(--cq-space-2) 0 0;
}

.cq-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: var(--cq-space-4);
    color: var(--cq-muted);
    font-size: .92rem;
}

.cq-breadcrumb a {
    color: var(--cq-link);
    text-decoration: none;
}

.cq-breadcrumb a:hover {
    text-decoration: underline;
}

.cq-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cq-space-4);
    margin: 1.25rem 0;
}

/* ---------- Surfaces ---------- */

.cq-panel {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--cq-border);
    border-radius: var(--cq-radius);
    background: var(--cq-surface);
    box-shadow: var(--cq-shadow);
}

.cq-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--cq-space-4);
}

.cq-card {
    display: block;
    padding: 1.35rem;
    border: 1px solid var(--cq-border);
    border-radius: var(--cq-radius);
    background: var(--cq-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--cq-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

a.cq-card:hover,
a.cq-card:focus {
    color: inherit;
    transform: translateY(-2px);
    border-color: #6b91c4;
    box-shadow: var(--cq-shadow-hover);
}

.cq-card__icon {
    color: #315d9b;
    font-size: 1.4rem;
}

.cq-card__title {
    margin: .8rem 0 .3rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.cq-card__description {
    margin: 0;
    color: var(--cq-muted);
}

.cq-metric {
    padding: var(--cq-space-3);
    border: 1px solid var(--cq-neutral-bg);
    border-radius: var(--cq-radius-sm);
    background: var(--cq-surface-alt);
}

.cq-metric strong {
    display: block;
    font-size: 1.15rem;
}

.cq-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--cq-muted);
}

.cq-empty h2 {
    color: var(--cq-text);
    font-size: 1.2rem;
}

/* ---------- Tables / lists ---------- */

.cq-table {
    margin: 0;
}

.cq-table th {
    color: #475569;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.cq-table td {
    vertical-align: middle;
}

/* Row headers (<th scope="row">) read as data, not as column labels. */
.cq-table tbody th {
    color: var(--cq-text);
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    vertical-align: middle;
}

.cq-mobile-list {
    display: none;
}

/* ---------- Badges ---------- */

.cq-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}

.cq-badge--success { color: var(--cq-success); background: var(--cq-success-bg); }
.cq-badge--warning { color: var(--cq-warning); background: var(--cq-warning-bg); }
.cq-badge--danger { color: var(--cq-danger); background: var(--cq-danger-bg); }
.cq-badge--info { color: var(--cq-info); background: var(--cq-info-bg); }
.cq-badge--neutral { color: var(--cq-neutral); background: var(--cq-neutral-bg); }

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

.cq-form-section {
    margin: 0 0 var(--cq-space-5);
    padding: 0 0 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--cq-neutral-bg);
}

.cq-form-section:last-of-type {
    border-bottom: 0;
}

.cq-form-section legend {
    font-size: 1.05rem;
    font-weight: 700;
}

.cq-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cq-space-4);
}

.cq-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
}

/*
 * Filter / inline form row. The cells of one visual line (fields and the action) share three row tracks —
 * label, control, message — through CSS subgrid, so:
 *   - every control of the line starts at the same height, whatever the label length;
 *   - a help text or an error under one control grows only the message track and never moves another control;
 *   - the action (.cq-filter-row__actions) sits on the control track, aligned with the inputs, not with the cell.
 * Cell contract (any direct child): a label (or .cq-field__label), one control (input, select, textarea,
 * .input-group or a .cq-field__control wrapper) and, optionally, one message block after it (help or error).
 * A note about the whole row goes after the row, in .cq-filter-note. Columns wrap by width (auto-fit), so
 * narrow screens stack the cells without horizontal scroll. Tune the column width with --cq-filter-min;
 * .cq-filter-row--inline (short search: one field + buttons) uses wider columns and natural-width buttons.
 */
.cq-filter-row {
    --cq-filter-min: 11rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cq-filter-min)), 1fr));
    grid-auto-rows: auto auto auto;
    column-gap: var(--cq-space-3);
    row-gap: var(--cq-space-1);
    align-items: start;
}

.cq-filter-row > * {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    min-width: 0;
    margin: 0;
    padding-bottom: var(--cq-space-2);
}

.cq-filter-row > :is([hidden], input[type="hidden"]) {
    display: none;
}

.cq-filter-row > * > * {
    grid-row: 3;
    min-width: 0;
    margin: 0;
}

.cq-filter-row > * > :is(label, .form-label, .cq-field__label) {
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-weight: 600;
}

.cq-filter-row > * > :is(input:not([type="hidden"]), select, textarea, .input-group, .cq-field__control) {
    grid-row: 2;
    width: 100%;
    min-height: var(--cq-touch-target);
}

.cq-filter-row :is(.cq-field__help, .form-text) {
    color: var(--cq-muted);
    font-size: .88rem;
}

.cq-filter-row > .cq-filter-row__actions {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--cq-space-2);
}

.cq-filter-row > .cq-filter-row__actions > * {
    grid-row: 2;
    min-height: var(--cq-touch-target);
}

.cq-filter-row > .cq-filter-row__actions > :is(.btn, .form-check, .form-check-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cq-space-2);
}

.cq-filter-row > .cq-filter-row__actions > :is(.form-check, .form-check-label) .form-check-input {
    margin: 0;
}

.cq-filter-row--inline {
    --cq-filter-min: 14rem;
}

/* In a toolbar (a flex row that shrinks its items), the filter row keeps room for two columns. */
.cq-toolbar > .cq-filter-row {
    flex: 1 1 30rem;
    max-width: 48rem;
}

.cq-filter-row--inline > .cq-filter-row__actions {
    grid-auto-columns: max-content;
    justify-content: start;
}

.cq-filter-note {
    margin: var(--cq-space-1) 0 0;
    color: var(--cq-muted);
    font-size: .88rem;
}

/* Without subgrid (older browsers): top-aligned cells; the action keeps a label-sized offset. */
@supports not (grid-template-rows: subgrid) {
    .cq-filter-row { grid-auto-rows: auto; row-gap: var(--cq-space-3); }
    .cq-filter-row > * { grid-row: auto; grid-template-rows: none; gap: var(--cq-space-1); padding-bottom: 0; }
    .cq-filter-row > * > *,
    .cq-filter-row > * > :is(label, .form-label, .cq-field__label),
    .cq-filter-row > * > :is(input:not([type="hidden"]), select, textarea, .input-group, .cq-field__control),
    .cq-filter-row > .cq-filter-row__actions > * { grid-row: auto; }
    .cq-filter-row > .cq-filter-row__actions { padding-top: calc(1.5em + var(--cq-space-1)); }
}

/* ---------- Form grid (PRD-071) ----------
 * Fields of a form laid out side by side. Like .cq-filter-row it shares its tracks through CSS subgrid, but it is for
 * data entry, not filtering: five tracks per cell (label, control, up to three messages), so
 *   - the controls of a line start at the same height whatever the length of each label (a long label that wraps grows
 *     only the label track, and the one-line labels sit on its bottom edge, against their control);
 *   - help text and errors grow only their own tracks and never move another control.
 * Cell contract (a direct child: div, label, fieldset or p): a label (label, .form-label, .cq-field__label, or the
 * first span of a wrapping label.au-field), one control (input, select, textarea, .input-group, .cq-field__control
 * or the .dtp__row of the document-type picker) and, after it, messages in document order. A cell with the picker keeps
 * its own wrapper (.dtp): it is flattened (display: contents) so its label and row take part in the tracks. Add
 * .cq-form-grid__wide to span the whole line. The column width is --cq-form-min (14rem); --cq-form-cols replaces the
 * whole column list. Columns wrap by width, so narrow screens stack the cells without horizontal scroll.
 * The selectors carry an element name to win against the per-module field classes (.dws-field, .au-field) whatever
 * the order of the stylesheets. */
.cq-form-grid {
    --cq-form-min: 14rem;
    display: grid;
    grid-template-columns: var(--cq-form-cols, repeat(auto-fit, minmax(min(100%, var(--cq-form-min)), 1fr)));
    grid-auto-rows: auto auto auto auto auto;
    column-gap: var(--cq-space-4);
    row-gap: 0;
    align-items: start;
}

:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
    margin: 0;
    padding-bottom: var(--cq-space-3);
}

:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group)[hidden],
:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > input[type="hidden"] {
    display: none;
}

.cq-form-grid > .cq-form-grid__wide {
    grid-column: 1 / -1;
}

/* a wrapper that only groups fields (e.g. two colour pickers) hands its cells to the grid */
.cq-form-grid > .cq-form-grid__group {
    display: contents;
}

:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > .dtp {
    display: contents;
}

:is(:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group), :is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > .dtp) > * {
    grid-row: auto;
    min-width: 0;
    margin: var(--cq-space-1) 0 0;
}

:is(:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group), :is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > .dtp)
    > :is(label, .form-label, .cq-field__label, legend, .au-field > span:first-child) {
    grid-row: 1;
    align-self: end;
    margin: 0;
}

:is(:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group), :is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > .dtp)
    > :is(input:not([type="hidden"]), select, textarea, .input-group, .cq-field__control, .dtp__row) {
    grid-row: 2;
    width: 100%;
    min-height: var(--cq-touch-target);
    margin: var(--cq-space-1) 0 0;
}

:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > .dtp > .dtp__row {
    width: 100%;
}

/* Without subgrid (older browsers): top-aligned cells stacked in their own flow. */
@supports not (grid-template-rows: subgrid) {
    .cq-form-grid { grid-auto-rows: auto; row-gap: var(--cq-space-3); }
    :is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) { grid-row: auto; grid-template-rows: none; gap: var(--cq-space-1); padding-bottom: 0; }
    :is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > .dtp { display: grid; gap: var(--cq-space-1); }
    :is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > *,
    :is(:is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group), :is(.cq-form-grid, .cq-form-grid__group) > :is(div, label, fieldset, p):not(.cq-form-grid__group) > .dtp) > * { grid-row: auto; margin: 0; }
}

.cq-error-summary {
    border-left: 4px solid var(--cq-danger);
}

/* ---------- Confirm dialog ---------- */

.cq-dialog {
    width: min(28rem, calc(100vw - 2rem));
    padding: var(--cq-space-5);
    border: 1px solid var(--cq-border);
    border-radius: var(--cq-radius);
    color: var(--cq-text);
    box-shadow: var(--cq-shadow-hover);
}

.cq-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}

.cq-dialog__title {
    margin: 0 0 var(--cq-space-2);
    font-size: 1.2rem;
    font-weight: 700;
}

.cq-dialog__message {
    margin: 0 0 var(--cq-space-5);
    color: var(--cq-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 767.98px) {
    .cq-toolbar { align-items: stretch; }
    .cq-toolbar .btn,
    .cq-form-actions .btn,
    .cq-dialog .btn { min-height: var(--cq-touch-target); }
    .cq-table-wrap { display: none; }
    .cq-mobile-list { display: grid; gap: var(--cq-space-3); }
    .cq-form-grid { grid-template-columns: 1fr; }
    .cq-panel { padding: var(--cq-space-4); }
}

/* ---------- W2D: report building blocks ---------- */

/*
 * KPI cards (templates/includes/kpi.html). A grid that keeps 4 → 2 → 1 per row without a 3 + 1 orphan; the value is
 * the only large text; the state is always written (color reinforces it, never replaces it).
 */
.cq-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); /* two per row on a 375px phone */
    gap: var(--cq-space-3);
    margin: 0 0 var(--cq-space-4);
}

.cq-kpi {
    --cq-kpi-tone: var(--cq-border-strong);
    min-width: 0;
    padding: var(--cq-space-3) var(--cq-space-4);
    border: 1px solid var(--cq-border);
    border-left: 3px solid var(--cq-kpi-tone);
    border-radius: var(--cq-radius-sm);
    background: var(--cq-surface);
}

.cq-kpi > p { margin: 0; }
.cq-kpi--ok { --cq-kpi-tone: var(--cq-success); }
.cq-kpi--attention { --cq-kpi-tone: var(--cq-warning); }
.cq-kpi--critical { --cq-kpi-tone: var(--cq-danger); }
.cq-kpi--info { --cq-kpi-tone: var(--cq-info); }

.cq-kpi__label {
    color: var(--cq-muted);
    font-size: .85rem;
    font-weight: 600;
}

.cq-kpi__value {
    color: var(--cq-text);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.cq-kpi__unit { color: var(--cq-muted); font-size: .9rem; font-weight: 600; }
.cq-kpi__delta, .cq-kpi__state, .cq-kpi__context { font-size: .82rem; color: var(--cq-muted); }
.cq-kpi__delta--good { color: var(--cq-success); font-weight: 600; }
.cq-kpi__delta--bad { color: var(--cq-danger); font-weight: 600; }
.cq-kpi__state { color: var(--cq-text); font-weight: 600; }

.cq-kpi__help {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--cq-border-strong);
    border-radius: 50%;
    color: var(--cq-muted);
    font-size: .7rem;
    cursor: help;
}

.cq-kpi__help:focus-visible { outline: 3px solid var(--cq-focus); outline-offset: 2px; }

/* Numbers in report tables: right-aligned, same digit width. */
.cq-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Active filters summary ("3 filtros ativos · Limpar filtros"). */
.cq-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cq-space-1) var(--cq-space-3);
    align-items: center;
    margin: var(--cq-space-2) 0 0;
    color: var(--cq-muted);
    font-size: .9rem;
}

.cq-active-filters strong { color: var(--cq-text); }

@media print {
    .cq-kpi { break-inside: avoid; border-color: #999; }
    .cq-kpi__help { display: none; }
}