/* Enterprise redesign visual QA polish.
 * Presentation-only fixes for consistency, accessibility and responsive behavior.
 */

/* Keep dense operational content readable without clipping. */
.content > *,
.panel,
.card,
.workspace-card,
.table-wrapper,
.form-grid,
.filter-grid {
    min-width: 0;
}

p, li, dd, td, th, label, .message, .workspace-card, .panel, .card {
    overflow-wrap: anywhere;
}

/* Strong, consistent keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Prevent nested controls from becoming visually oversized. */
.button-row,
.panel__header,
.card__header,
.topbar__actions,
.project-header {
    align-items: center;
}

.button-row .button,
.panel__header .button,
.card__header .button {
    width: auto;
}

/* Tables: stable row density, sticky headers for long operational lists. */
.table-wrapper {
    max-width: 100%;
    scrollbar-gutter: stable;
}

.table-wrapper table {
    min-width: 720px;
}

.table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-wrapper td,
.table-wrapper th {
    vertical-align: middle;
}

.table-wrapper td .button,
.table-wrapper td button {
    min-height: 34px;
    padding-block: 6px;
}

/* Forms: clearer grouping and predictable multi-column behavior. */
.form-grid,
.filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.form-grid > .button-row,
.form-grid > fieldset,
.form-grid > .form-actions {
    grid-column: 1 / -1;
}

fieldset {
    min-width: 0;
    border-color: var(--border-default);
    border-radius: var(--radius-card);
}

legend {
    padding-inline: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    min-height: 18px;
    accent-color: var(--brand-primary);
}

/* Messages and validation states. */
.errorlist {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--danger);
    font-size: 12px;
}

[aria-invalid="true"] {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent) !important;
}

/* Dark mode: remove bright legacy surfaces that can leak through page-specific CSS. */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .workspace-card,
:root[data-theme="dark"] .table-wrapper,
:root[data-theme="dark"] .detail-grid > div,
:root[data-theme="dark"] .filter-grid,
:root[data-theme="dark"] fieldset {
    color: var(--text-primary);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* Management and dashboard pages: normalize remaining hard-coded legacy typography. */
.management-dashboard,
.management-dashboard--executive,
.project-cockpit,
.planning-control {
    color: var(--text-primary);
}

.management-dashboard h1,
.management-dashboard h2,
.management-dashboard h3,
.management-dashboard strong,
.management-dashboard .executive-score > strong,
.management-dashboard .executive-week__primary strong,
.management-dashboard .executive-distribution-item strong {
    color: var(--text-primary);
}

.management-dashboard .executive-hero,
.management-dashboard .executive-score,
.management-dashboard .executive-week__primary > div,
.management-dashboard .executive-distribution-item,
.management-dashboard .executive-attention .ui2-attention-item {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

/* Keep active navigation unmistakable in both themes. */
.nav-item.is-active,
.nav-item.is-active:hover {
    background: var(--brand-primary);
    color: #fff;
}

/* Small screens: reduce topbar crowding and avoid horizontal page scroll. */
@media (max-width: 900px) {
    .content {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .topbar__identity {
        flex: 1 1 220px;
    }

    .topbar__actions {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .panel__header,
    .card__header,
    .project-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .table-wrapper table {
        min-width: 640px;
    }
}

@media (max-width: 640px) {
    .content {
        padding: 14px;
    }

    .page-title {
        font-size: 21px;
    }

    .topbar__actions .button {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .panel,
    .card {
        padding: 16px;
    }

    .form-grid,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .button-row {
        width: 100%;
    }

    .button-row .button,
    .form-actions .button {
        flex: 1 1 auto;
    }

    dialog,
    .modal,
    .dialog {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}