/* Regras compartilhadas, carregadas após os estilos específicos de cada tela. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; overflow-wrap: break-word; }
img, video, canvas { max-width: 100%; }
input, select, textarea { max-width: 100%; min-width: 0; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: auto; flex: 0 0 auto; }
textarea { resize: vertical; }
form, main, section, .card, .pedido-card, .tab-content,
.dashboard-grid > *, .grid-produtos > *, .form-grid > * { min-width: 0; }
.card > *, .pedido-card > * { min-width: 0; }
button, .btn, .btn-voltar, .btn-logout, .tab-btn { touch-action: manipulation; }
.responsive-table-scroll {
    display: block; width: 100%; max-width: 100%; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.responsive-table-scroll:focus-visible { outline: 3px solid #e59232; outline-offset: 2px; }
.responsive-table-scroll table { width: 100%; }
.modal-overlay, .modal-notification-overlay, .modal-loading-overlay {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    height: 100%; height: 100dvh;
}
.modal-box, .modal-notification-box, .modal-loading-box {
    min-width: 0; max-width: min(700px, calc(100vw - 16px));
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
}
.modal-header { gap: 12px; }
.modal-box > *, .modal-notification-box > * { min-width: 0; max-width: 100%; }
.modal-header h3 { min-width: 0; overflow-wrap: anywhere; }
.close-modal { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

@media screen and (max-width: 1024px) {
    .container { max-width: calc(100% - 24px); }
    .dashboard-grid, .grid-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tabs { max-width: 100%; flex-wrap: wrap; }
    .tab-btn { white-space: normal; overflow-wrap: anywhere; }
    .search-bar { flex-wrap: wrap; }
    .search-bar > * { min-width: 0 !important; }
    .production-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
    .sidebar { max-width: 100vw; max-height: 100dvh; }
}

@media screen and (max-width: 600px) {
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .container { width: calc(100% - 16px); max-width: 100%; margin: 12px auto 24px; }
    header { flex-wrap: wrap; gap: 12px; padding: 12px; }
    header h1, header h2 { max-width: 100%; font-size: clamp(1.15rem, 5vw, 1.5rem); overflow-wrap: anywhere; }
    header > div { max-width: 100%; flex-wrap: wrap; gap: 8px !important; }
    header a { white-space: normal; }
    .dashboard-grid, .grid-produtos, .form-grid, .production-grid, .dashboard-stats,
    .resumo-grid, .rotas-layout, .deposito-insumos-grid { grid-template-columns: minmax(0, 1fr) !important; }
    /* Formulários e resumos antigos também têm colunas definidas no HTML. */
    [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
    .full-width { grid-column: 1 / -1; }
    .card, .pedido-card { max-width: 100%; padding: 16px; }
    .card h3, .pedido-card h3 { white-space: normal !important; overflow-wrap: anywhere; }
    .card .numero { font-size: clamp(1.4rem, 7vw, 2.25rem); overflow-wrap: anywhere; }
    form { max-width: 100%; padding: 12px; }
    form[style*="display:flex"], form[style*="display: flex"] { flex-wrap: wrap; }
    form [style*="min-width"] { min-width: 0 !important; max-width: 100%; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; min-height: 44px; }
    input[type="date"] { width: 100%; }
    label { overflow-wrap: anywhere; }
    button, .btn, .tab-btn, .btn-voltar, .btn-logout, .btn-phone { min-height: 44px; }
    .btn-phone { min-width: 44px; }
    .btn { white-space: normal; overflow-wrap: anywhere; text-align: center; }
    .actions, .action-row, .mochila-actions, .modal-buttons, .selection-buttons { flex-wrap: wrap; gap: 8px; }
    .actions > *, .modal-buttons > * { min-width: 0; max-width: 100%; }
    .actions > form { flex: 1 1 100% !important; }
    .action-row > .btn { flex: 1 1 100px !important; }
    .modal-buttons > button, .modal-buttons > .btn { flex: 1 1 140px; }
    .tabs:not(.order-tabs) { display: flex; flex-wrap: wrap; }
    .tabs:not(.order-tabs) .tab-btn { flex: 1 1 135px; margin: 0; }
    body .order-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .selection-buttons { display: flex; }
    .selection-buttons button { flex: 1 1 110px; }
    .modal-box, .modal-notification-box, .modal-loading-box { width: 100%; padding: 16px; border-radius: 14px; }
    .modal-box form { padding: 0; }
    .responsive-table-scroll table { min-width: 480px; }
    .responsive-table-scroll th, .responsive-table-scroll td { padding: 10px; }
    .responsive-table-scroll .btn { min-width: 80px; }
    .sidebar { width: 100%; }
    .fab-cart { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
    .login-shell { min-height: 100vh; min-height: 100dvh; }
    .login-brand h1 { font-size: clamp(1.8rem, 9vw, 2.45rem); }
    .login-brand, .login-container { min-width: 0; padding: 20px; }
    /* Relatórios usam folhas largas para impressão; no celular rola só a tabela. */
    body.responsive-report { padding: 12px; }
    .responsive-report .header { flex-wrap: wrap; gap: 12px; }
    .responsive-report .summary { display: grid; grid-template-columns: minmax(0, 1fr); }

    /* Mantém os filtros próximos ao layout do computador, em duas colunas. */
    .search-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        flex-direction: initial !important;
        width: 100%;
        gap: 10px !important;
        padding: 12px !important;
    }
    .search-bar > div { width: auto; min-width: 0 !important; max-width: 100%; }
    .search-bar > div:has(input[type="text"]),
    .search-bar > div:has(input[type="search"]),
    .search-bar > input[type="search"],
    .search-bar > input[type="text"] { grid-column: 1 / -1; }
    .search-bar > select { grid-column: 1 / -1; }
    .search-bar input:not([type="checkbox"]):not([type="radio"]),
    .search-bar select { width: 100%; max-width: none; }
    .search-bar > div:last-child {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }
    .search-bar > div:last-child > button,
    .search-bar > div:last-child > .btn { flex: 0 1 auto; min-width: 96px; }

    /* Filtros administrativos: datas lado a lado e botões em uma linha própria. */
    .filter-form, #entregues > form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        gap: 10px !important;
        padding: 12px !important;
    }
    .filter-form > div, #entregues > form > div {
        width: auto;
        min-width: 0 !important;
        max-width: 100%;
    }
    .filter-form > div:last-child,
    #entregues > form > div:last-child {
        grid-column: 1 / -1;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px !important;
    }
    .filter-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    #entregues > form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .filter-form select, #entregues > form select { width: 100% !important; }
    .filter-form > div:last-child > button,
    .filter-form > div:last-child > .btn,
    #entregues > form > div:last-child > button,
    #entregues > form > div:last-child > .btn { flex: 0 1 auto; min-width: 96px; }
    #tralhas_admin .filter-form > div:first-of-type { grid-column: 1 / -1; }
}

@media screen and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
    /* Mesmo layout de filtros em telas touch, inclusive iPhone deitado e iPad. */
    .search-bar, .filter-form, #entregues > form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        flex-direction: initial !important;
        width: 100%;
        gap: 10px !important;
    }
    .search-bar > div, .filter-form > div, #entregues > form > div {
        width: auto;
        min-width: 0 !important;
        max-width: 100%;
    }
    .search-bar > div:has(input[type="text"]),
    .search-bar > div:has(input[type="search"]),
    .search-bar > input[type="search"], .search-bar > input[type="text"],
    .search-bar > select { grid-column: 1 / -1; }
    .search-bar input:not([type="checkbox"]):not([type="radio"]),
    .search-bar select,
    .filter-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .filter-form select { width: 100%; max-width: none; }
    .search-bar > div:last-child, .filter-form > div:last-child,
    #entregues > form > div:last-child {
        grid-column: 1 / -1;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px !important;
    }
    .search-bar > div:last-child > button, .search-bar > div:last-child > .btn,
    .filter-form > div:last-child > button, .filter-form > div:last-child > .btn,
    #entregues > form > div:last-child > button, #entregues > form > div:last-child > .btn {
        flex: 0 1 auto;
        min-width: 96px;
    }
    #tralhas_admin .filter-form > div:first-of-type { grid-column: 1 / -1; }
    /* Reduz camadas gráficas caras no Safari de iPhone/iPad. */
    header, form, .card, .pedido-card, .table-container, .modal-box,
    .modal-notification-box, .modal-loading-box, .sidebar,
    .modal-overlay, .modal-notification-overlay, .modal-loading-overlay {
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .card, .pedido-card {
        transition: none !important;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .12)) !important;
    }
    .card:hover, .pedido-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .12));
    }
}
@media screen and (max-height: 500px) and (orientation: landscape) {
    .modal-overlay, .modal-notification-overlay, .modal-loading-overlay { align-items: flex-start; }
    .modal-box, .modal-notification-box { margin: 0 auto; }
    header { position: relative; }
}
@media print {
    .responsive-table-scroll { overflow: visible; max-height: none; }
    .responsive-table-scroll table { min-width: 0; }
}