body {
    background: #f4f8fb !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Botão "Conecte com o Claude" */
.btn-conectar-claude {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #FDFBF7;
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn-conectar-claude:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.14);
    color: #1a1a1a;
}
.btn-conectar-claude svg {
    flex-shrink: 0;
}

/* Modal "Conecte com o Claude" — sobrescreve o header azul global do app.css,
   que aplica background:#252ED9 !important em .modal-header pra todo modal do portal */
#modalConectarClaude .modal-header {
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 22px 28px 18px !important;
}
#modalConectarClaude .modal-title {
    color: #1a1a1a !important;
    font-size: 1.15rem !important;
}
#modalConectarClaude .btn-close {
    filter: none !important;
    opacity: 0.5 !important;
}
#modalConectarClaude .btn-close:hover {
    opacity: 0.8 !important;
}
#modalConectarClaude .modal-content {
    border-radius: 16px !important;
}

/* Modal "Conecte com o Claude" — passo a passo animado */
.mcp-modal-body {
    padding: 24px 28px 8px;
}
.mcp-intro {
    color: #555;
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 22px;
}
.mcp-timeline {
    position: relative;
    padding-left: 4px;
}
.mcp-timeline-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #D97757;
    margin: 0 0 14px 40px;
}
.mcp-timeline-label-test {
    margin-top: 26px;
}
.mcp-timeline-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D97757;
}
.mcp-step {
    position: relative;
    display: flex;
    gap: 16px;
    padding-left: 0;
    padding-bottom: 22px;
    opacity: 0;
    transform: translateY(10px);
}
.mcp-step:last-child {
    padding-bottom: 4px;
}
.mcp-step::before {
    /* trilho conectando os passos */
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: -4px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(217, 119, 87, 0.35), rgba(217, 119, 87, 0.08));
}
.mcp-step:last-child::before,
.mcp-timeline-label-test + .mcp-step::before {
    display: none;
}
.mcp-step-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #D97757;
    color: #D97757;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    z-index: 1;
}
.mcp-step-content {
    flex: 1;
    padding-top: 4px;
}
.mcp-step-title {
    font-size: 0.94rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
}
.mcp-step-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* Animação de entrada, disparada via JS toda vez que o modal abre */
.mcp-timeline.mcp-animate .mcp-step {
    animation: mcpStepIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mcp-timeline.mcp-animate .mcp-step:nth-child(2)  { animation-delay: 0.05s; }
.mcp-timeline.mcp-animate .mcp-step:nth-child(3)  { animation-delay: 0.11s; }
.mcp-timeline.mcp-animate .mcp-step:nth-child(4)  { animation-delay: 0.17s; }
.mcp-timeline.mcp-animate .mcp-step:nth-child(5)  { animation-delay: 0.23s; }
.mcp-timeline.mcp-animate .mcp-step:nth-child(7)  { animation-delay: 0.29s; }
.mcp-timeline.mcp-animate .mcp-step:nth-child(8)  { animation-delay: 0.35s; }
.mcp-timeline.mcp-animate .mcp-step:nth-child(9)  { animation-delay: 0.41s; }

@keyframes mcpStepIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#main-wrapper {
    background: linear-gradient(135deg, #f4f8fb 0%, #ffffff 48%, #eef7fc 100%) !important;
    min-height: 100vh;
}

.left-sidebar {
    width: 255px !important;
    height: calc(100vh - 28px) !important;
    top: 14px !important;
    left: 14px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 18px 45px rgba(37,46,217,.10) !important;
    border: 1px solid rgba(80,181,223,.18) !important;
    overflow: hidden !important;
}

.left-sidebar .banner {
    padding: 24px 18px 16px !important;
}

.left-sidebar .banner img {
    height: 86px !important;
    object-fit: contain !important;
}

.left-sidebar .sidebar-menu {
    padding: 10px 14px !important;
    line-height: normal !important;
}

.left-sidebar .sidebar-menu .sidebar-link {
    flex-direction: row !important;
    border-left: 0 !important;
    border-radius: 16px !important;
    padding: 13px 16px !important;
    font-weight: 600 !important;
    color: #556777 !important;
}

.left-sidebar .sidebar-menu .sidebar-item.active .sidebar-link {
    background: rgba(0,158,251,.10) !important;
    color: #006fe6 !important;
    box-shadow: inset 0 0 0 1px rgba(0,158,251,.18) !important;
}

.left-sidebar .sidebar-menu .sidebar-item:hover .sidebar-link {
    background: rgba(0,158,251,.07) !important;
    color: #009EFB !important;
}

.topbar {
    left: 285px !important;
    top: 14px !important;
    width: calc(100% - 305px) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 14px 38px rgba(37,46,217,.08) !important;
    border: 1px solid rgba(80,181,223,.14) !important;
}

#main-wrapper .topbar {
    width: calc(100% - 305px) !important;
}

.topbar .top-navbar {
    min-height: 62px !important;
    padding: 0 22px !important;
}

.topbar .navbar-nav.ms-auto {
    color: #334155 !important;
    font-weight: 600 !important;
}

.topbar .navbar .nav-link {
    color: #252ED9 !important;
}

#main-wrapper .page-wrapper {
    margin-left: 285px !important;
    padding-top: 108px !important;
}

.page-wrapper > .container-fluid {
    padding: 0 34px 34px !important;
    max-width: 1480px !important;
}

.card,
.table-responsive {
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(80,181,223,.12) !important;
    box-shadow: 0 16px 42px rgba(37,46,217,.07) !important;
}

.table thead th {
    background: #eef6fb !important;
    color: #31506a !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.table tbody td {
    border-color: #edf2f7 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.table tbody tr:hover {
    background: #f7fbfe !important;
}

.btn {
    border-radius: 14px !important;
    font-weight: 600 !important;
}

.btn-primary,
.btn-info {
    background: linear-gradient(135deg, #50B5DF, #252ED9) !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(37,46,217,.18) !important;
}

.form-control,
.form-select {
    border-radius: 14px !important;
}

/* força topbar moderno */
body #main-wrapper header.topbar,
body #main-wrapper .topbar {
    left: 285px !important;
    top: 14px !important;
    width: calc(100% - 305px) !important;
    background: rgba(255,255,255,.94) !important;
    background-image: none !important;
    border-radius: 22px !important;
    border: 1px solid rgba(80,181,223,.16) !important;
    box-shadow: 0 14px 38px rgba(37,46,217,.08) !important;
}

body #main-wrapper .topbar .navbar-nav,
body #main-wrapper .topbar .navbar-nav *,
body #main-wrapper .topbar .nav-link {
    color: #252ED9 !important;
}

/* melhora área da tabela */
.page-wrapper {
    background: transparent !important;
}

.table-responsive,
.dataTables_wrapper {
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 16px 42px rgba(37,46,217,.07) !important;
}

/* tira cara quadrada da tabela */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table.dataTable thead th {
    padding: 16px 18px !important;
}

table.dataTable tbody td {
    padding: 18px !important;
}

/* status como pill */
td:has(.text-warning),
.text-warning {
    color: #ff6b00 !important;
}

/* FIX modal exportar relatório */
.modal {
  z-index: 1065 !important;
}

.modal-backdrop {
  z-index: 1060 !important;
}

.modal-dialog {
  z-index: 1070 !important;
}

#modalExportarRelatorio {
  display: none;
}

#modalExportarRelatorio.show {
  display: block !important;
}

/* FIX Toast (SweetAlert2) ficando atrás dos modais */
.swal2-container {
  z-index: 100010 !important;
}

/* FIX selects/dropdowns dentro de modais */
.select2-container,
.select2-dropdown,
.select2-container--open {
  z-index: 100002 !important;
}

.modal select,
.modal .select2-container {
  pointer-events: auto !important;
}

/* Campo Cliente OS - form-floating com Select2 */
.form-floating .select2-container {
  width: 100% !important;
}

/* Garante que o label fique visível acima do Select2 e sempre no estado "flutuando" (topo) */
.form-floating > .form-select[style*="display: none"] ~ label,
.form-floating > .select2-container ~ label {
  z-index: 100003 !important;
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}