/* ==========================================================================
   X Tecnologia — paleta de marca (extraída da logo: azul índigo + chumbo)
   ========================================================================== */
:root {
    --x-navy: #2c2c6e;
    --x-navy-dark: #201f52;
    --x-navy-darker: #16153a;
    --x-navy-light: #4d4ea0;
    --x-navy-soft: #eeeefa;
    --x-navy-soft-2: #e2e2f5;
    --x-gray: #333333;
    --x-gray-soft: #f4f5fa;
    --x-border: #e3e4ee;

    --x-success: #157a5e;
    --x-success-soft: #e3f5ee;
    --x-danger: #c22a3e;
    --x-danger-soft: #fbe6e9;
    --x-warning: #a56a00;
    --x-warning-soft: #fdf1dc;
    --x-info: #1f6fa8;
    --x-info-soft: #e4f1fb;
    --x-secondary: #55597a;
    --x-secondary-soft: #ececf3;

    --x-radius: 0.65rem;
    --x-radius-sm: 0.5rem;
    --x-radius-lg: 0.9rem;
    --x-shadow: 0 1px 2px rgba(22, 21, 58, 0.06), 0 4px 14px rgba(22, 21, 58, 0.05);
    --x-shadow-hover: 0 6px 20px rgba(22, 21, 58, 0.10);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
    background-color: var(--x-gray-soft);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #24243a;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--x-navy-darker);
    letter-spacing: -0.01em;
}

a {
    color: var(--x-navy);
}
a:hover {
    color: var(--x-navy-dark);
}

::selection {
    background: var(--x-navy-soft-2);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.app-navbar {
    background: linear-gradient(135deg, var(--x-navy) 0%, var(--x-navy-darker) 130%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.app-brand {
    display: inline-flex;
    align-items: center;
}

.app-brand-logo {
    height: 2.1rem;
    width: auto;
    display: block;
}

.app-navbar .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500;
    border-radius: var(--x-radius-sm);
    padding: 0.45rem 0.75rem !important;
    transition: background-color .15s ease, color .15s ease;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.10);
}
.app-navbar .dropdown-menu {
    border: none;
    border-radius: var(--x-radius);
    box-shadow: var(--x-shadow-hover);
    padding: 0.4rem;
    margin-top: 0.5rem;
}
.app-navbar .dropdown-item {
    border-radius: var(--x-radius-sm);
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: #2a2a45;
}
.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
    background-color: var(--x-navy-soft);
    color: var(--x-navy);
}
.app-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}
.app-navbar .text-light-emphasis {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
    border-radius: var(--x-radius-sm);
    font-weight: 600;
    padding: 0.48rem 1.05rem;
    letter-spacing: 0.01em;
    transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active {
    transform: translateY(1px);
}
.btn-sm {
    border-radius: var(--x-radius-sm);
    padding: 0.32rem 0.7rem;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--x-navy);
    border-color: var(--x-navy);
    color: #fff;
    box-shadow: 0 2px 6px rgba(44, 44, 110, 0.28);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--x-navy-dark);
    border-color: var(--x-navy-dark);
    color: #fff;
    box-shadow: 0 4px 12px rgba(44, 44, 110, 0.35);
}
.btn-check:checked + .btn-primary,
.btn-primary:active {
    background-color: var(--x-navy-darker) !important;
    border-color: var(--x-navy-darker) !important;
}

.btn-outline-primary {
    color: var(--x-navy);
    border-color: var(--x-navy);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--x-navy);
    border-color: var(--x-navy);
    color: #fff;
}

.btn-secondary {
    background-color: var(--x-secondary);
    border-color: var(--x-secondary);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #43465f;
    border-color: #43465f;
}

.btn-outline-secondary {
    color: var(--x-secondary);
    border-color: #c7c9dd;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background-color: var(--x-secondary);
    border-color: var(--x-secondary);
    color: #fff;
}

.btn-success {
    background-color: var(--x-success);
    border-color: var(--x-success);
    box-shadow: 0 2px 6px rgba(21, 122, 94, 0.25);
}
.btn-success:hover, .btn-success:focus {
    background-color: #106249;
    border-color: #106249;
}

.btn-outline-success {
    color: var(--x-success);
    border-color: var(--x-success);
}
.btn-outline-success:hover, .btn-outline-success:focus {
    background-color: var(--x-success);
    border-color: var(--x-success);
}

.btn-danger {
    background-color: var(--x-danger);
    border-color: var(--x-danger);
    box-shadow: 0 2px 6px rgba(194, 42, 62, 0.25);
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #9e2231;
    border-color: #9e2231;
}

.btn-outline-danger {
    color: var(--x-danger);
    border-color: var(--x-danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--x-danger);
    border-color: var(--x-danger);
}

/* ==========================================================================
   Formulários
   ========================================================================== */
.form-control, .form-select {
    border-radius: var(--x-radius-sm);
    border: 1.5px solid var(--x-border);
    padding: 0.5rem 0.85rem;
    font-size: 0.94rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--x-navy-light);
    box-shadow: 0 0 0 0.2rem rgba(44, 44, 110, 0.15);
}
.form-control::placeholder {
    color: #a3a5bd;
}
.form-control[readonly] {
    background-color: var(--x-gray-soft);
}
.form-label {
    font-weight: 600;
    font-size: 0.86rem;
    color: #4a4b6a;
    margin-bottom: 0.35rem;
}
.form-check-input {
    border-radius: 0.3rem;
    border: 1.5px solid #c7c9dd;
}
.form-check-input:checked {
    background-color: var(--x-navy);
    border-color: var(--x-navy);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(44, 44, 110, 0.15);
}
.input-group-text {
    border-radius: var(--x-radius-sm);
    background-color: var(--x-gray-soft);
    border: 1.5px solid var(--x-border);
}
.form-text {
    font-size: 0.8rem;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius-lg);
    box-shadow: var(--x-shadow);
}
.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--x-border);
    border-radius: var(--x-radius-lg) var(--x-radius-lg) 0 0 !important;
    font-weight: 700;
    color: var(--x-navy-darker);
    padding: 0.85rem 1.15rem;
}
.card-footer {
    background-color: var(--x-gray-soft);
    border-top: 1px solid var(--x-border);
    border-radius: 0 0 var(--x-radius-lg) var(--x-radius-lg) !important;
}
.card-body {
    padding: 1.15rem;
}

.card-metric {
    border-left: 4px solid var(--x-navy);
    transition: box-shadow .15s ease, transform .1s ease;
}
.card-metric:hover {
    box-shadow: var(--x-shadow-hover);
}
.card-metric.border-success { border-left-color: var(--x-success) !important; }
.card-metric.border-danger { border-left-color: var(--x-danger) !important; }
.card-metric .display-6 {
    font-weight: 700;
    color: var(--x-navy-darker);
}

/* ==========================================================================
   Tabelas
   ========================================================================== */
.table {
    --bs-table-hover-bg: var(--x-navy-soft);
}
.table td, .table th {
    vertical-align: middle;
    padding: 0.75rem 0.9rem;
}
.table thead.table-light th,
.table > :not(caption) > * > th {
    background-color: var(--x-gray-soft);
    color: #4a4b6a;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--x-border);
}
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--x-navy-soft);
}

/* Tabela de itens do orçamento tem muitas colunas numéricas lado a lado — padding padrão
   (0.75rem 0.9rem) não cabe todas nas larguras percentuais definidas no <th>, empurrando
   "Total" pra fora da área visível. Reduzido só aqui, não afeta as outras tabelas do sistema. */
#tabela-itens td, #tabela-itens th {
    padding: 0.5rem 0.4rem;
}
#tabela-itens td .form-control,
#tabela-itens td .form-select {
    font-size: 0.85rem;
}

/* ==========================================================================
   Badges (estilo "soft")
   ========================================================================== */
.badge {
    font-weight: 600;
    font-size: 0.74rem;
    padding: 0.4em 0.7em;
    border-radius: 0.4rem;
    letter-spacing: 0.02em;
}
.text-bg-success { color: var(--x-success) !important; background-color: var(--x-success-soft) !important; }
.text-bg-danger { color: var(--x-danger) !important; background-color: var(--x-danger-soft) !important; }
.text-bg-warning { color: var(--x-warning) !important; background-color: var(--x-warning-soft) !important; }
.text-bg-info { color: var(--x-info) !important; background-color: var(--x-info-soft) !important; }
.text-bg-secondary { color: var(--x-secondary) !important; background-color: var(--x-secondary-soft) !important; }
.text-bg-primary { color: var(--x-navy) !important; background-color: var(--x-navy-soft) !important; }
.text-bg-dark { color: #fff !important; background-color: var(--x-navy-darker) !important; }

/* ==========================================================================
   Status do orçamento — cores bem distintas entre si, para reconhecer o
   andamento (rascunho -> enviado -> aprovado/reprovado -> faturado/cancelado)
   de relance, sem precisar ler o texto.
   ========================================================================== */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 700;
    font-size: 0.76rem;
    padding: 0.38em 0.75em 0.38em 0.6em;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.status-pill::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.status-pill--rascunho { color: #5a5f78; background-color: #e7e8f1; }
.status-pill--enviado { color: #175fce; background-color: #dbe9ff; }
.status-pill--aprovado { color: #7a2cc7; background-color: #ede1fa; }
.status-pill--reprovado { color: #c22a3e; background-color: #fbe1e4; }
.status-pill--faturado { color: #0f8a56; background-color: #d9f5e6; }
.status-pill--cancelado { color: #fff; background-color: #33364a; }
.status-pill--cancelado::before { background: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   Alertas
   ========================================================================== */
.alert {
    border: none;
    border-left: 4px solid transparent;
    border-radius: var(--x-radius-sm);
    font-weight: 500;
}
.alert-success { background-color: var(--x-success-soft); color: var(--x-success); border-left-color: var(--x-success); }
.alert-danger { background-color: var(--x-danger-soft); color: var(--x-danger); border-left-color: var(--x-danger); }
.alert-info { background-color: var(--x-info-soft); color: var(--x-info); border-left-color: var(--x-info); }
.alert-warning { background-color: var(--x-warning-soft); color: var(--x-warning); border-left-color: var(--x-warning); }

/* ==========================================================================
   Modais
   ========================================================================== */
.modal-content {
    border: none;
    border-radius: var(--x-radius-lg);
    box-shadow: 0 20px 50px rgba(22, 21, 58, 0.25);
}
.modal-header {
    border-bottom: 1px solid var(--x-border);
    padding: 1.1rem 1.4rem;
}
.modal-header .modal-title {
    font-weight: 700;
    color: var(--x-navy-darker);
}
.modal-body { padding: 1.4rem; }
.modal-footer {
    border-top: 1px solid var(--x-border);
    padding: 1rem 1.4rem;
}

/* ==========================================================================
   Login
   ========================================================================== */
body.app-login-page {
    background: radial-gradient(circle at top left, #35357e 0%, var(--x-navy-darker) 55%, #0f0e2c 100%);
    min-height: 100vh;
}
.app-login-wrap .card {
    border-radius: var(--x-radius-lg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.app-login-wrap .card-body { padding: 2.5rem 2.25rem; }
.app-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-login-logo-img {
    height: 3.2rem;
    width: auto;
}

/* ==========================================================================
   Diversos
   ========================================================================== */
.item-row .btn-remove-item {
    white-space: nowrap;
}

.list-group-item {
    border-color: var(--x-border);
}
.list-group-item-action:hover {
    background-color: var(--x-navy-soft);
}

footer {
    color: #8688a3 !important;
    font-weight: 500;
}

@media print {
    .no-print {
        display: none !important;
    }
}

/* TomSelect com dropdownParent:'body' (ver initSelectsBuscaveis em layout/header.php) anexa
   o dropdown direto no <body>, fora do modal — sem isso, ele herdava o z-index padrão da
   biblioteca (1000), menor que o do modal do Bootstrap 5 (.modal = 1055, .modal-backdrop =
   1050), e ficava aberto mas invisível atrás do modal (bug real: dropdown de conta bancária
   no "Dar baixa" de Contas a Receber/Pagar não aparecia). Value acima de qualquer z-index do
   Bootstrap (toast, o mais alto, é 1090) pra nunca mais ficar atrás de nada. */
.ts-dropdown {
    z-index: 1100;
}