/** Escola 360 - garantias compartilhadas de acessibilidade e responsividade. */

html {
    background: var(--color-background);
    color: var(--color-text-primary);
    overflow-x: hidden;
}

body {
    min-width: 0;
    color: var(--color-text-primary);
    background: var(--color-background);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-normal);
}

.skip-link {
    position: fixed;
    top: var(--spacing-2);
    left: var(--spacing-2);
    z-index: var(--z-toast);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--border-radius-default);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

main,
.app,
.app__main,
.content,
.page-content,
.page-container,
.content__body {
    min-width: 0;
    max-width: 100%;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
    outline: 3px solid var(--color-ring) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--color-primary-100) !important;
}

:where(button, input, select, textarea, .btn, [role="button"]) {
    font: inherit;
}

:where(button, .btn, .action-btn, .modal-close, [role="button"]) {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

:where(button, .btn, [role="button"]):not(:disabled) {
    cursor: pointer;
}

:where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

:where(input, select, textarea, .form-control, .filter-select) {
    min-height: 44px;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border-color: var(--color-border-default);
}

:where(input, textarea)::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

:where(.card, .table-card, .modal, .modal-content, .stat-card) {
    color: var(--color-text-primary);
}

:where(.text-muted, .text-secondary, .subtitle, .helper-text, .form-hint) {
    color: var(--color-text-secondary) !important;
}

:where(.status.active, .status.approved, .badge.success, .badge--success, .result-label--approved) {
    color: var(--color-success) !important;
    background: var(--color-success-light) !important;
}

:where(.status.pending, .status.vacation, .badge.warning, .badge--warning, .result-label--recovery) {
    color: var(--color-warning) !important;
    background: var(--color-warning-light) !important;
}

:where(.status.inactive, .status.failed, .badge.danger, .badge--danger, .result-label--failed) {
    color: var(--color-danger) !important;
    background: var(--color-danger-light) !important;
}

.result-label--pending {
    color: var(--color-text-secondary) !important;
    background: var(--color-surface-subtle) !important;
}

.table-card,
.table-container,
.table-responsive,
[class*="table-wrapper"] {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

table {
    border-color: var(--color-border-light);
}

th {
    color: var(--color-text-primary);
}

td {
    color: var(--color-text-primary);
}

.empty-state,
.error-state,
.loading-state {
    display: flex;
    min-height: 180px;
    padding: var(--spacing-6);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    text-align: center;
}

.empty-state > i,
.error-state > i,
.loading-state > i {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
}

.empty-state > strong,
.error-state > strong,
.loading-state > strong {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.skeleton {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    background: var(--color-surface-subtle) !important;
    border-radius: var(--border-radius-default);
}

.skeleton::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, transparent, var(--color-primary-100), transparent);
    animation: e360-skeleton 1.2s ease-in-out infinite;
}

@keyframes e360-skeleton {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@media (max-width: 767px) {
    body {
        font-size: var(--font-size-base);
    }

    :where(.content, .page-content, .content__body, .main-content) {
        padding-inline: var(--spacing-4) !important;
    }

    :where(.content__header, .page-header, .filters, .toolbar, .content__actions, .header-actions) {
        max-width: 100%;
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }

    :where(.filters, .filter-grid, .form-row) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(.filters > *, .content__actions > *, .header-actions > *) {
        max-width: 100%;
    }

    .modal,
    .modal-content {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }
}

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

@media print {
    .skeleton::after {
        display: none !important;
    }
}