/* =============================================================
   global.css — Base mobile-first do Pit Stop Inteligente
   Reset moderno + acessibilidade + utilitários compartilhados
   ============================================================= */

/* ---------- Reset moderno ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-page);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--transition-base), color var(--transition-base);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

ul,
ol {
    list-style: none;
}

/* ---------- Acessibilidade (WCAG) ---------- */

/* Foco visível em todos os elementos interativos (WCAG 2.4.7) */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Conteúdo apenas para leitores de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-link: primeiro elemento focável da página, leva ao conteúdo */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: var(--font-weight-semibold);
    z-index: var(--z-toast);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Respeita usuários que pedem menos animação (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Tipografia base ---------- */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

p {
    line-height: var(--line-height-base);
}

small {
    font-size: var(--font-size-sm);
}

code,
pre {
    font-family: var(--font-mono);
    font-size: 0.95em;
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* Layout principal "sidebar + conteúdo" usado pela maioria das telas
   (Clientes, Preços, Atualização de dados, etc.).

   `flex-direction: row` é o padrão em QUALQUER tamanho de tela. Em
   mobile (≤ 900 px) o Web Component <oficina-sidebar> assume
   `position: fixed` e zera sua largura (ver oficina-sidebar.js,
   bloco :host(.is-mobile)), de modo que ele sai do fluxo e o
   .main-content ocupa a tela inteira automaticamente — não precisa
   alternar entre row/column via media query.

   Esta era a causa do bug "sidebar empilhada em cima do conteúdo" em
   larguras intermediárias (entre o ponto em que a sidebar deixa de
   ser drawer e o ponto em que o container virava row): bastava o
   container já estar em row desde o início. */
.main-container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    min-width: 0;            /* impede que filhos largos empurrem layout */
    padding: var(--space-4);
    overflow-y: auto;
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-6);
    }

    .main-content {
        padding: var(--space-6);
    }
}

/* ---------- Cards ---------- */
.card,
.tab-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
    .card,
    .tab-card {
        padding: var(--space-6);
        margin-bottom: var(--space-6);
    }
}

.tab-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
    .tab-card-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.tab-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    /* Áreas de toque ergonômicas (WCAG 2.5.5: mínimo 44x44px) */
    min-height: 44px;
    user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: #fff;
}
.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-secondary-hover);
}

.btn-success {
    background-color: var(--color-success);
    color: #fff;
}
.btn-danger {
    background-color: var(--color-danger);
    color: #fff;
}

.btn-outline,
.btn-outline-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-medium);
}
.btn-outline:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    min-height: 36px;
}

/* ---------- Tabelas ---------- */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
    th,
    td {
        padding: var(--space-4);
        font-size: var(--font-size-base);
    }
}

th {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    background-color: var(--bg-muted);
}

/* ---------- Formulários ---------- */
.form-group {
    margin-bottom: var(--space-4);
}

label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--text-primary);
    background-color: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    outline: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    /* iOS: evita zoom indesejado em input com font-size < 16px */
    min-height: 44px;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.form-control:disabled {
    background-color: var(--bg-muted);
    cursor: not-allowed;
}

.form-control[aria-invalid="true"] {
    border-color: var(--color-danger);
}

.form-control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.form-control-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    min-height: 36px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

/* Mensagem de erro próxima ao input */
.error-msg {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    min-height: 1em;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

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

/* ---------- Grid utilitário ---------- */
.grid-col-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .grid-col-2 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-6);
    }
}

/* ---------- Animações ---------- */
.fade-in {
    animation: fadeIn var(--transition-slow) ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Utilitários ---------- */
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }

.d-none         { display: none !important; }
.d-flex         { display: flex; }
.flex-1         { flex: 1; }
.gap-2          { gap: var(--space-2); }
.gap-4          { gap: var(--space-4); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }

/* Scroll smooth respeitando reduced motion (já tratado acima) */