/* ==========================================================
   ERP OFICINA — VISUAL V4
   Refinamento global de MODAIS + FILTROS.
   Somente apresentação. Não altera regras, dados ou APIs.
   Depende do visual-v3.css e é carregado depois dele.
   ========================================================== */

/* ---------- tokens locais ---------- */
#app-view {
    --v4-blue-soft: rgba(49,130,246,.10);
    --v4-blue-border: rgba(73,145,255,.24);
    --v4-green-soft: rgba(36,201,138,.10);
    --v4-amber-soft: rgba(243,168,31,.11);
    --v4-red-soft: rgba(255,98,108,.10);
    --v4-modal-radius: 22px;
    --v4-control-radius: 11px;
    --v4-section-radius: 14px;
}

/* ==========================================================
   MODAIS — padrão global
   ========================================================== */
#app-view .modal-backdrop {
    padding: 26px !important;
    background: rgba(2, 8, 18, .68) !important;
    backdrop-filter: blur(9px) saturate(.92) !important;
    -webkit-backdrop-filter: blur(9px) saturate(.92) !important;
    animation: v4BackdropIn .16s ease-out both;
}

html[data-theme="light"] #app-view .modal-backdrop {
    background: rgba(15, 23, 42, .38) !important;
}

#app-view .modal-backdrop.nested {
    background: rgba(2, 8, 18, .48) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

#app-view .modal,
#app-view .modal-card,
#app-view .modal-content {
    position: relative;
    overflow: auto;
    border: 1px solid var(--v3-border) !important;
    border-radius: var(--v4-modal-radius) !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(49,130,246,.055), transparent 27%),
        var(--v3-card) !important;
    color: var(--v3-text-2) !important;
    box-shadow:
        0 36px 110px rgba(0,0,0,.46),
        0 0 0 1px rgba(255,255,255,.018) inset !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(125,145,170,.38) transparent;
    animation: v4ModalIn .18s cubic-bezier(.2,.72,.25,1) both;
}

html[data-theme="light"] #app-view .modal,
html[data-theme="light"] #app-view .modal-card,
html[data-theme="light"] #app-view .modal-content {
    background:
        radial-gradient(circle at 92% 0%, rgba(49,130,246,.045), transparent 27%),
        #ffffff !important;
    box-shadow:
        0 32px 90px rgba(15,23,42,.20),
        0 0 0 1px rgba(255,255,255,.65) inset !important;
}

#app-view .modal::-webkit-scrollbar,
#app-view .modal-card::-webkit-scrollbar,
#app-view .modal-content::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

#app-view .modal::-webkit-scrollbar-thumb,
#app-view .modal-card::-webkit-scrollbar-thumb,
#app-view .modal-content::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(125,145,170,.34);
    background-clip: padding-box;
}

#app-view .modal-header {
    position: sticky !important;
    top: 0;
    z-index: 12 !important;
    min-height: 84px;
    padding: 18px 20px 16px !important;
    border-bottom: 1px solid var(--v3-border) !important;
    background: color-mix(in srgb, var(--v3-card) 92%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

#app-view .modal-header::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(49,130,246,.50), rgba(49,130,246,0));
    pointer-events: none;
}

#app-view .modal-header > div:first-child {
    min-width: 0;
}

#app-view .modal-header .eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: #5d9cff !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
}

#app-view .modal-header h2,
#app-view .modal-header h3 {
    margin: 0 !important;
    color: var(--v3-text) !important;
    font-size: 18px !important;
    line-height: 1.22;
    letter-spacing: -.025em;
}

#app-view .modal-header p {
    max-width: 720px;
    margin: 5px 0 0 !important;
    color: var(--v3-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.45;
}

#app-view .modal-close {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--v3-border) !important;
    border-radius: 11px !important;
    background: var(--v3-card-2) !important;
    color: var(--v3-muted) !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.06);
    transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

#app-view .modal-close:hover {
    transform: translateY(-1px);
    border-color: var(--v4-blue-border) !important;
    background: var(--v4-blue-soft) !important;
    color: #5d9cff !important;
}

#app-view .modal-body {
    padding: 20px !important;
}

/* formulários dentro de qualquer modal */
#app-view .modal .form-grid,
#app-view .modal-card .form-grid,
#app-view .modal-content .form-grid {
    gap: 14px !important;
}

#app-view .modal .field > span,
#app-view .modal .field > label,
#app-view .modal-card .field > span,
#app-view .modal-card .field > label,
#app-view .modal-content .field > span,
#app-view .modal-content .field > label {
    display: block;
    margin-bottom: 6px;
    color: var(--v3-text-2) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}

#app-view .modal input:not([type="checkbox"]):not([type="radio"]),
#app-view .modal select,
#app-view .modal textarea,
#app-view .modal-card input:not([type="checkbox"]):not([type="radio"]),
#app-view .modal-card select,
#app-view .modal-card textarea,
#app-view .modal-content input:not([type="checkbox"]):not([type="radio"]),
#app-view .modal-content select,
#app-view .modal-content textarea {
    min-height: 43px;
    border: 1px solid var(--v3-border) !important;
    border-radius: var(--v4-control-radius) !important;
    background: var(--v3-input) !important;
    color: var(--v3-text) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#app-view .modal textarea,
#app-view .modal-card textarea,
#app-view .modal-content textarea {
    min-height: 88px;
}

#app-view .modal input:focus,
#app-view .modal select:focus,
#app-view .modal textarea:focus,
#app-view .modal-card input:focus,
#app-view .modal-card select:focus,
#app-view .modal-card textarea:focus,
#app-view .modal-content input:focus,
#app-view .modal-content select:focus,
#app-view .modal-content textarea:focus {
    outline: none !important;
    border-color: rgba(73,145,255,.58) !important;
    box-shadow: 0 0 0 3px rgba(49,130,246,.10) !important;
}

/* rodapé e ações de qualquer janela */
#app-view .modal-actions,
#app-view .modal-footer,
#app-view .os-flow-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px !important;
    margin-top: 20px;
    padding: 14px 20px !important;
    border-top: 1px solid var(--v3-border) !important;
    background: color-mix(in srgb, var(--v3-card) 94%, transparent) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

#app-view .modal-body > .modal-actions {
    margin: 20px -20px -20px !important;
}

#app-view .os-flow-actions {
    margin: 18px -20px -20px !important;
}

/* botões mais consistentes */
#app-view .action-button,
#app-view .secondary-button,
#app-view .row-action,
#app-view .mini-action {
    border-radius: 10px !important;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}

#app-view .action-button:not(.secondary):not(.danger) {
    background: linear-gradient(145deg, #3488ff, #216fdc) !important;
    box-shadow: 0 8px 20px rgba(33,111,220,.18);
}

#app-view .action-button:not(.secondary):not(.danger):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(33,111,220,.25);
}

#app-view .action-button.secondary,
#app-view .secondary-button,
#app-view .row-action,
#app-view .mini-action {
    border: 1px solid var(--v3-border) !important;
    background: var(--v3-card-2) !important;
    color: var(--v3-text-2) !important;
    box-shadow: none;
}

#app-view .action-button.secondary:hover,
#app-view .secondary-button:hover,
#app-view .row-action:hover,
#app-view .mini-action:hover {
    transform: translateY(-1px);
    border-color: var(--v4-blue-border) !important;
    background: var(--v4-blue-soft) !important;
    color: #66a1ff !important;
}

#app-view .action-button.danger,
#app-view .mini-action.danger {
    border: 1px solid rgba(255,98,108,.22) !important;
    background: var(--v4-red-soft) !important;
    color: #ff828b !important;
}

html[data-theme="light"] #app-view .action-button.danger,
html[data-theme="light"] #app-view .mini-action.danger {
    color: #be123c !important;
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
}

/* ==========================================================
   DETALHES DE OS E CARDS INTERNOS
   ========================================================== */
#app-view .os-detail-modal {
    width: min(1020px, 100%) !important;
}

#app-view .compact-modal {
    width: min(590px, 100%) !important;
}

#app-view .profile-modal {
    width: min(940px, 100%) !important;
}

#app-view .audit-entity-modal {
    width: min(680px, 100%) !important;
}

#app-view .os-detail-grid {
    gap: 12px !important;
    margin-bottom: 16px !important;
}

#app-view .os-summary-card,
#app-view .os-total-card,
#app-view .os-item,
#app-view .finance-summary,
#app-view .profile-card,
#app-view .audit-info-card {
    border: 1px solid var(--v3-border) !important;
    border-radius: var(--v4-section-radius) !important;
    background: var(--v3-card-2) !important;
    color: var(--v3-text-2) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.055);
}

html[data-theme="light"] #app-view .os-summary-card,
html[data-theme="light"] #app-view .os-total-card,
html[data-theme="light"] #app-view .os-item,
html[data-theme="light"] #app-view .finance-summary,
html[data-theme="light"] #app-view .profile-card,
html[data-theme="light"] #app-view .audit-info-card {
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}

#app-view .os-summary-card,
#app-view .os-total-card {
    padding: 15px !important;
}

#app-view .os-total-card {
    position: relative;
    overflow: hidden;
}

#app-view .os-total-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    right: -30px;
    top: -42px;
    border-radius: 999px;
    background: rgba(49,130,246,.08);
    pointer-events: none;
}

#app-view .os-detail-section {
    margin-top: 17px !important;
    padding-top: 17px !important;
    border-top: 1px solid var(--v3-border) !important;
}

#app-view .os-section-header {
    margin-bottom: 11px !important;
}

#app-view .os-section-header h4 {
    color: var(--v3-text) !important;
    font-size: 13px !important;
    letter-spacing: -.01em;
}

#app-view .os-section-header span {
    color: var(--v3-muted) !important;
}

#app-view .os-item {
    padding: 12px 13px !important;
}

#app-view .os-item:hover {
    border-color: rgba(73,145,255,.26) !important;
    background: color-mix(in srgb, var(--v3-card-2) 92%, #3182f6 8%) !important;
}

#app-view .os-item-main strong,
#app-view .finance-summary strong,
#app-view .os-summary-top strong,
#app-view .os-total-card strong {
    color: var(--v3-text) !important;
}

#app-view .os-item-main span,
#app-view .os-item-main small,
#app-view .finance-summary span,
#app-view .os-summary-top span,
#app-view .os-total-card span,
#app-view .os-description span {
    color: var(--v3-muted) !important;
}

#app-view .os-description {
    border-top-color: var(--v3-border) !important;
}

#app-view .os-description p {
    color: var(--v3-text-2) !important;
}

#app-view .os-empty-items {
    border: 1px dashed var(--v3-border) !important;
    background: var(--v3-card-2) !important;
    color: var(--v3-muted) !important;
}

/* status mais refinados */
#app-view .os-status,
#app-view .status-badge,
#app-view .audit-module,
#app-view .self-badge {
    border: 1px solid var(--v3-border);
    border-radius: 999px !important;
    letter-spacing: .035em;
}

#app-view .os-status.success,
#app-view .status-badge:not(.inactive) {
    border-color: rgba(36,201,138,.20) !important;
    background: var(--v4-green-soft) !important;
    color: #55dca7 !important;
}

#app-view .os-status.warning {
    border-color: rgba(243,168,31,.22) !important;
    background: var(--v4-amber-soft) !important;
    color: #ffc15a !important;
}

#app-view .os-status.info {
    border-color: var(--v4-blue-border) !important;
    background: var(--v4-blue-soft) !important;
    color: #6aa6ff !important;
}

#app-view .os-status.muted,
#app-view .status-badge.inactive {
    background: var(--v3-card-soft) !important;
    color: var(--v3-muted) !important;
}

html[data-theme="light"] #app-view .os-status.success,
html[data-theme="light"] #app-view .status-badge:not(.inactive) {
    color: #15803d !important;
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
}

html[data-theme="light"] #app-view .os-status.warning {
    color: #b45309 !important;
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

html[data-theme="light"] #app-view .os-status.info {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

/* ==========================================================
   FILTROS, BUSCAS E BARRAS DE FERRAMENTAS
   ========================================================== */
#app-view .module-toolbar,
#app-view .finance-caixa-filter,
#app-view .reports-filter {
    position: relative;
    padding: 12px !important;
    border: 1px solid var(--v3-border) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, var(--v3-card), var(--v3-card-2)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.055) !important;
}

html[data-theme="light"] #app-view .module-toolbar,
html[data-theme="light"] #app-view .finance-caixa-filter,
html[data-theme="light"] #app-view .reports-filter {
    box-shadow: 0 8px 24px rgba(15,23,42,.045) !important;
}

#app-view .module-toolbar {
    margin-bottom: 16px !important;
}

#app-view .module-toolbar-left {
    gap: 9px !important;
    flex-wrap: wrap;
}

#app-view .search-box {
    min-width: 230px;
}

#app-view .search-box input,
#app-view .toolbar-select,
#app-view .finance-caixa-filter input,
#app-view .finance-caixa-filter select,
#app-view .reports-filter input,
#app-view .reports-filter select {
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid var(--v3-border) !important;
    border-radius: var(--v4-control-radius) !important;
    background: var(--v3-input) !important;
    color: var(--v3-text) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
}

#app-view .search-box input {
    padding-left: 39px !important;
}

#app-view .search-box::before {
    color: var(--v3-muted) !important;
    opacity: .88;
}

#app-view .search-box input:focus,
#app-view .toolbar-select:focus,
#app-view .finance-caixa-filter input:focus,
#app-view .finance-caixa-filter select:focus,
#app-view .reports-filter input:focus,
#app-view .reports-filter select:focus {
    outline: none !important;
    border-color: rgba(73,145,255,.58) !important;
    box-shadow: 0 0 0 3px rgba(49,130,246,.10) !important;
}

#app-view .finance-caixa-filter .field,
#app-view .reports-filter .field {
    margin: 0 !important;
}

#app-view .finance-caixa-filter .field > span,
#app-view .finance-caixa-filter .field > label,
#app-view .reports-filter .field > span,
#app-view .reports-filter .field > label {
    display: block;
    margin-bottom: 6px;
    color: var(--v3-muted) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

#app-view .reports-period-label {
    padding: 7px 10px;
    border: 1px solid var(--v3-border);
    border-radius: 9px;
    background: var(--v3-card-2);
    color: var(--v3-muted) !important;
    font-size: 10px !important;
}

/* abas segmentadas */
#app-view .finance-tabs,
#app-view .reports-tabs {
    gap: 4px !important;
    padding: 4px !important;
    border: 1px solid var(--v3-border) !important;
    border-radius: 12px !important;
    background: var(--v3-card-2) !important;
    box-shadow: none !important;
}

#app-view .finance-tab,
#app-view .reports-tab {
    min-height: 36px;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    color: var(--v3-muted) !important;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

#app-view .finance-tab:hover,
#app-view .reports-tab:hover {
    color: var(--v3-text-2) !important;
    background: var(--v3-hover) !important;
}

#app-view .finance-tab.active,
#app-view .reports-tab.active {
    background: rgba(49,130,246,.13) !important;
    color: #6aa6ff !important;
    box-shadow: inset 0 0 0 1px rgba(73,145,255,.18) !important;
}

html[data-theme="light"] #app-view .finance-tab.active,
html[data-theme="light"] #app-view .reports-tab.active {
    background: #eef5ff !important;
    color: #2368c4 !important;
    box-shadow: inset 0 0 0 1px #cfe0ff !important;
}

/* ==========================================================
   TABELAS EM CONTEXTO DE FILTRO / LISTAGEM
   ========================================================== */
#app-view .data-panel,
#app-view .report-table-wrap {
    border-radius: 15px !important;
    overflow: hidden;
}

#app-view .data-table th,
#app-view .report-table th {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 9px !important;
    letter-spacing: .055em !important;
}

#app-view .data-table td,
#app-view .report-table td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

#app-view .row-actions {
    gap: 5px !important;
}

/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */
@media (max-width: 760px) {
    #app-view .modal-backdrop {
        padding: 10px !important;
        place-items: end center;
    }

    #app-view .modal,
    #app-view .modal-card,
    #app-view .modal-content {
        width: 100% !important;
        max-height: 94vh !important;
        border-radius: 18px 18px 14px 14px !important;
    }

    #app-view .modal-header {
        min-height: 76px;
        padding: 15px 15px 13px !important;
    }

    #app-view .modal-header::after {
        left: 15px;
        right: 15px;
    }

    #app-view .modal-body {
        padding: 15px !important;
    }

    #app-view .modal-body > .modal-actions,
    #app-view .os-flow-actions {
        margin-left: -15px !important;
        margin-right: -15px !important;
        margin-bottom: -15px !important;
        padding: 12px 15px !important;
    }

    #app-view .modal-actions .action-button,
    #app-view .os-flow-actions .action-button {
        flex: 1 1 150px;
    }

    #app-view .module-toolbar,
    #app-view .finance-caixa-filter,
    #app-view .reports-filter {
        padding: 10px !important;
    }

    #app-view .module-toolbar-left,
    #app-view .reports-actions {
        width: 100%;
    }

    #app-view .search-box,
    #app-view .toolbar-select {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@keyframes v4BackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes v4ModalIn {
    from { opacity: 0; transform: translateY(7px) scale(.994); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #app-view .modal-backdrop,
    #app-view .modal,
    #app-view .modal-card,
    #app-view .modal-content {
        animation: none !important;
    }
}