/* =========================================================
   PDX PRO - TEMA GLOBAL DO SISTEMA
   Arquivo: css/pdx-theme.css

   Objetivo:
   - Aplicar a paleta oficial PDX Pro
   - Escurecer o fundo geral das telas
   - Clarear os blocos azuis internos dos itens
   - Reduzir excesso de branco
   - Melhorar contraste, leitura e aparência visual
========================================================= */

/* =========================================================
   PALETA OFICIAL PDX PRO
========================================================= */
:root {
    --pdx-primary: #04101F;
    --pdx-secondary: #0E5EB7;
    --pdx-accent: #1EA7FF;
    --pdx-light: #F4F8FD;
    --pdx-white: #FFFFFF;
    --pdx-text: #1B1B1B;
    --pdx-muted: #64748B;
    --pdx-border: #D6E3F1;

    --pdx-success: #16A34A;
    --pdx-warning: #D97706;
    --pdx-danger: #DC2626;

    --pdx-shadow-sm: 0 8px 24px rgba(4, 16, 31, 0.08);
    --pdx-shadow-md: 0 14px 36px rgba(4, 16, 31, 0.14);
    --pdx-shadow-lg: 0 22px 60px rgba(4, 16, 31, 0.22);

    --pdx-radius-sm: 10px;
    --pdx-radius-md: 12px;
    --pdx-radius-lg: 18px;
}

/* =========================================================
   BASE GLOBAL
========================================================= */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", "Figtree", Arial, sans-serif !important;
    color: var(--pdx-text) !important;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(30, 167, 255, 0.10), transparent 25%),
        radial-gradient(circle at top right, rgba(14, 94, 183, 0.16), transparent 30%),
        linear-gradient(135deg, #061427 0%, #0A2344 55%, #0E3D73 100%) !important;
}

/* Fundo principal do sistema */
.min-h-screen.bg-gray-100,
.bg-gray-100 {
    background:
        radial-gradient(circle at top left, rgba(30, 167, 255, 0.10), transparent 24%),
        radial-gradient(circle at top right, rgba(14, 94, 183, 0.16), transparent 30%),
        linear-gradient(135deg, #061427 0%, #0A2344 55%, #0E3D73 100%) !important;
}

/* =========================================================
   MENU / NAVEGAÇÃO
========================================================= */
nav.bg-white,
nav.border-b {
    background: rgba(4, 16, 31, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(4, 16, 31, 0.26) !important;
}

nav .text-gray-500,
nav .text-gray-600,
nav .text-gray-700,
nav .text-gray-800,
nav .text-gray-900,
nav a,
nav button {
    color: rgba(255, 255, 255, 0.84) !important;
}

nav a:hover,
nav button:hover {
    color: #FFFFFF !important;
}

nav .border-indigo-400,
nav .border-blue-400,
nav .border-gray-300 {
    border-color: var(--pdx-accent) !important;
}

nav svg {
    color: #FFFFFF !important;
}

nav .hover\:bg-gray-100:hover,
nav .focus\:bg-gray-100:focus {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* =========================================================
   CABEÇALHO DAS PÁGINAS
========================================================= */
header.bg-white,
header.shadow {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(214, 227, 241, 0.90) !important;
    box-shadow: var(--pdx-shadow-sm) !important;
}

header.bg-white h1,
header.bg-white h2,
header.bg-white h3,
header.shadow h1,
header.shadow h2,
header.shadow h3 {
    color: var(--pdx-primary) !important;
    font-weight: 800 !important;
}

/* =========================================================
   ÁREA PRINCIPAL / CONTAINERS
========================================================= */
main {
    position: relative;
}

.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl {
    width: min(100% - 28px, 1280px);
}

main > .py-12,
main > .py-8,
main > .py-6 {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
}

/* =========================================================
   CARDS / BLOCOS PRINCIPAIS
========================================================= */
.bg-white,
div.bg-white,
.overflow-hidden.bg-white,
.bg-white.overflow-hidden {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 251, 255, 0.97) 100%) !important;
}

.overflow-hidden.bg-white,
.bg-white.overflow-hidden,
div.bg-white.shadow-sm,
div.bg-white.shadow,
div.bg-white.shadow-md,
div.bg-white.shadow-lg {
    border: 1px solid rgba(214, 227, 241, 0.92) !important;
    border-radius: var(--pdx-radius-lg) !important;
    box-shadow: var(--pdx-shadow-md) !important;
}

.bg-gray-50 {
    background: rgba(244, 248, 253, 0.92) !important;
}

.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg {
    box-shadow: var(--pdx-shadow-sm) !important;
}

.rounded-md,
.rounded-lg,
.sm\:rounded-lg,
.rounded-xl,
.rounded-2xl {
    border-radius: var(--pdx-radius-md) !important;
}

/* =========================================================
   TIPOGRAFIA
========================================================= */
.text-gray-900 {
    color: var(--pdx-text) !important;
}

.text-gray-800 {
    color: var(--pdx-primary) !important;
}

.text-gray-700 {
    color: #334155 !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--pdx-muted) !important;
}

.text-blue-600,
.text-indigo-600 {
    color: var(--pdx-secondary) !important;
}

h1,
h2,
h3,
h4 {
    color: var(--pdx-primary) !important;
    letter-spacing: -0.02em;
}

/* =========================================================
   FORMULÁRIOS
========================================================= */
label,
.font-medium.text-sm.text-gray-700 {
    color: var(--pdx-primary) !important;
    font-weight: 700 !important;
}

input,
select,
textarea {
    background: #FFFFFF !important;
    color: var(--pdx-text) !important;
    border: 1px solid var(--pdx-border) !important;
    border-radius: var(--pdx-radius-md) !important;
    min-height: 42px;
}

textarea {
    min-height: 110px;
}

input::placeholder,
textarea::placeholder {
    color: #94A3B8 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--pdx-accent) !important;
    box-shadow: 0 0 0 3px rgba(30, 167, 255, 0.18) !important;
    outline: none !important;
}

input[type="checkbox"],
input[type="radio"] {
    min-height: auto;
    accent-color: var(--pdx-secondary);
}

/* =========================================================
   BOTÕES
========================================================= */
button,
a.inline-flex,
button.inline-flex {
    transition: all 0.2s ease !important;
}

.bg-gray-800,
.bg-indigo-600,
.bg-blue-600,
button[type="submit"].bg-gray-800,
button[type="submit"].bg-indigo-600,
button[type="submit"].bg-blue-600 {
    background: var(--pdx-secondary) !important;
    color: #FFFFFF !important;
    border-color: var(--pdx-secondary) !important;
    box-shadow: 0 12px 28px rgba(14, 94, 183, 0.22) !important;
}

.bg-gray-800:hover,
.bg-indigo-600:hover,
.bg-blue-600:hover,
.hover\:bg-gray-700:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-blue-700:hover {
    background: var(--pdx-accent) !important;
    border-color: var(--pdx-accent) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.border-gray-300 {
    border-color: var(--pdx-border) !important;
}

.hover\:bg-gray-50:hover {
    background-color: rgba(30, 167, 255, 0.08) !important;
}

a.text-blue-600,
a.text-indigo-600,
a.underline {
    color: var(--pdx-secondary) !important;
    font-weight: 700;
}

a.text-blue-600:hover,
a.text-indigo-600:hover,
a.underline:hover {
    color: var(--pdx-accent) !important;
}

/* =========================================================
   TABELAS
========================================================= */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

thead,
table thead,
table thead.bg-gray-50 {
    background: linear-gradient(135deg, var(--pdx-primary) 0%, #0A2F5A 100%) !important;
}

thead th,
table thead th,
th {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em;
}

tbody tr {
    background: #FFFFFF !important;
    transition: background 0.2s ease;
}

tbody tr:nth-child(even) {
    background: #F7FAFE !important;
}

tbody tr:hover {
    background: rgba(30, 167, 255, 0.08) !important;
}

td,
th,
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--pdx-border) !important;
}

/* =========================================================
   BLOCOS DINÂMICOS DE PRODUTOS E SERVIÇOS
   AJUSTE PEDIDO:
   - clarear o azul interno
   - manter boa leitura
========================================================= */
.js-product-item,
.js-service-item,
.js-product-item.bg-gray-50,
.js-service-item.bg-gray-50 {
    background: linear-gradient(135deg, #0E5EB7 0%, #1B74D1 55%, #2A8BE8 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(4, 16, 31, 0.18) !important;
}

/* Labels mais legíveis e centralizados */
.js-product-item label,
.js-service-item label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

/* Campos centralizados */
.js-product-item input,
.js-product-item select,
.js-service-item input,
.js-service-item select {
    text-align: center !important;
    min-height: 44px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.90) !important;
    border-radius: 12px !important;
    color: var(--pdx-text) !important;
}

/* Placeholder centralizado */
.js-product-item input::placeholder,
.js-service-item input::placeholder {
    text-align: center !important;
}

/* Observações com alinhamento natural */
.js-product-notes,
.js-service-notes {
    text-align: left !important;
}

/* Total com mais destaque */
.js-product-total,
.js-service-total {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0.25rem !important;
    color: #FFFFFF !important;
    font-weight: 900 !important;
    background: rgba(4, 16, 31, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 12px !important;
}

/* Botão remover */
.js-product-item .js-remove-item,
.js-service-item .js-remove-item {
    min-height: 44px !important;
    background: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: var(--pdx-primary) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
}

.js-product-item .js-remove-item:hover,
.js-service-item .js-remove-item:hover {
    background: var(--pdx-primary) !important;
    border-color: var(--pdx-primary) !important;
    color: #FFFFFF !important;
}

/* Botões adicionar produto/serviço */
#add_product_item,
#add_service_item {
    background: #FFFFFF !important;
    color: var(--pdx-secondary) !important;
    border: 1px solid #BFD9F5 !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(14, 94, 183, 0.12) !important;
    font-weight: 700 !important;
}

#add_product_item:hover,
#add_service_item:hover {
    background: var(--pdx-secondary) !important;
    color: #FFFFFF !important;
    border-color: var(--pdx-secondary) !important;
}

/* =========================================================
   ALERTAS / BADGES
========================================================= */
.pdx-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(30, 167, 255, 0.12);
    color: var(--pdx-secondary);
    font-size: 12px;
    font-weight: 700;
}

.bg-green-100 {
    background-color: rgba(22, 163, 74, 0.12) !important;
}

.text-green-800 {
    color: #166534 !important;
}

.bg-yellow-100,
.bg-amber-50 {
    background-color: rgba(217, 119, 6, 0.14) !important;
}

.text-yellow-800,
.text-amber-800 {
    color: #92400E !important;
}

.bg-red-100,
.bg-red-50 {
    background-color: rgba(220, 38, 38, 0.12) !important;
}

.text-red-800 {
    color: #991B1B !important;
}

.bg-blue-100 {
    background-color: rgba(30, 167, 255, 0.12) !important;
}

.text-blue-800 {
    color: var(--pdx-secondary) !important;
}

/* =========================================================
   DROPDOWNS
========================================================= */
.absolute .bg-white,
[role="menu"].bg-white {
    border: 1px solid var(--pdx-border) !important;
    border-radius: var(--pdx-radius-md) !important;
    box-shadow: var(--pdx-shadow-lg) !important;
}

[role="menu"] a {
    color: var(--pdx-text) !important;
}

[role="menu"] a:hover {
    background: var(--pdx-light) !important;
    color: var(--pdx-secondary) !important;
}

/* =========================================================
   RESPONSIVIDADE
========================================================= */
@media (max-width: 767px) {
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl {
        width: min(100% - 20px, 1280px);
    }

    main > .py-12,
    main > .py-8,
    main > .py-6 {
        padding-top: 22px !important;
        padding-bottom: 34px !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .js-product-item,
    .js-service-item {
        padding: 18px !important;
    }

    .js-product-item input,
    .js-product-item select,
    .js-service-item input,
    .js-service-item select,
    .js-product-total,
    .js-service-total {
        min-height: 48px !important;
    }
}

/* =========================================================
   CORREÇÃO — DROPDOWN DO USUÁRIO / PERFIL / SAIR
   Objetivo:
   - Fazer os links Perfil e Sair aparecerem corretamente
   - Manter o menu principal escuro
   - Corrigir contraste do dropdown claro
========================================================= */

/* Caixa do dropdown do usuário */
nav [role="menu"],
nav [role="menu"].bg-white,
nav .absolute .bg-white {
    background: #FFFFFF !important;
    border: 1px solid var(--pdx-border) !important;
    border-radius: var(--pdx-radius-md) !important;
    box-shadow: var(--pdx-shadow-lg) !important;
    overflow: hidden !important;
}

/* Links internos do dropdown: Perfil e Sair */
nav [role="menu"] a,
nav [role="menu"] button,
nav .absolute .bg-white a,
nav .absolute .bg-white button {
    color: var(--pdx-primary) !important;
    background: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Hover dos links Perfil e Sair */
nav [role="menu"] a:hover,
nav [role="menu"] button:hover,
nav .absolute .bg-white a:hover,
nav .absolute .bg-white button:hover {
    color: var(--pdx-secondary) !important;
    background: var(--pdx-light) !important;
}

/* Textos do bloco mobile do usuário */
nav .pt-4.pb-1.border-t .text-gray-800,
nav .pt-4.pb-1.border-t .text-gray-500 {
    color: #FFFFFF !important;
}

/* Links Perfil e Sair no menu mobile */
nav .pt-4.pb-1.border-t a {
    color: rgba(255, 255, 255, 0.88) !important;
}

nav .pt-4.pb-1.border-t a:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
}