/* ==========================================================================
   Camada visual Panitech
   --------------------------------------------------------------------------
   Carregada automaticamente pelo Perfex quando o arquivo existe:
     - admin      -> helpers/assets_helper.php (depois de app-css)
     - cliente    -> helpers/themes_helper.php
     - login      -> views/authentication/includes/head.php
     - formularios externos -> helpers/template_helper.php

   Nao substitui o CSS do core: e uma camada por cima, so com componentes.
   Por carregar por ultimo, vence empates de especificidade sem !important.
   ========================================================================== */

:root {
    /* superficies */
    --pt-bg: #f6f7f9;
    --pt-surface: #ffffff;
    --pt-surface-muted: #fafbfc;

    /* bordas */
    --pt-border: #e7e9ee;
    --pt-border-strong: #d6dae2;

    /* texto */
    --pt-text: #10151f;
    --pt-text-muted: #6b7280;
    --pt-text-subtle: #98a1af;

    /* marca */
    --pt-primary: #2563eb;
    --pt-primary-hover: #1d4ed8;
    --pt-primary-soft: #eff4ff;
    --pt-dark: #1f2937;
    --pt-dark-hover: #111827;

    /* estados */
    --pt-success: #16a34a;
    --pt-warning: #d97706;
    --pt-danger: #dc2626;
    --pt-info: #0891b2;

    /* raios */
    --pt-radius-sm: 6px;
    --pt-radius: 10px;
    --pt-radius-lg: 14px;

    /* profundidade: sombras curtas, sem o "drop shadow" pesado do padrao */
    --pt-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --pt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --pt-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 6px 16px -4px rgba(16, 24, 40, 0.10);
    --pt-shadow-lg: 0 8px 24px -6px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.05);

    --pt-ring: 0 0 0 3px rgba(37, 99, 235, 0.16);
    --pt-transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1. Base e tipografia
   -------------------------------------------------------------------------- */

body {
    background: var(--pt-bg);
    color: var(--pt-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.014em;
    color: var(--pt-text);
}

h1, .h1 { font-weight: 600; }
h2, .h2 { font-weight: 600; }
h3, .h3 { font-weight: 600; }
h4, .h4 { font-weight: 600; }

.text-muted,
.text-info-muted {
    color: var(--pt-text-muted);
}

hr {
    border-top-color: var(--pt-border);
}

a {
    transition: color var(--pt-transition);
}

/* foco visivel e consistente em vez do outline padrao do navegador */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--pt-ring);
    border-radius: var(--pt-radius-sm);
}

/* --------------------------------------------------------------------------
   2. Cards / paineis
   Padrao do core: borda cinza + sombra media. Fica pesado quando ha muitos
   cards na tela. Aqui: borda mais clara, raio maior, sombra curta.
   -------------------------------------------------------------------------- */

.panel_s,
.panel {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-sm);
    transition: box-shadow var(--pt-transition), border-color var(--pt-transition);
}

.panel_s > .panel-body,
.panel > .panel-body {
    border-radius: inherit;
    padding: 22px 24px;
}

.panel-heading {
    border-bottom: 1px solid var(--pt-border);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--pt-surface-muted);
    padding: 14px 24px;
    font-weight: 600;
}

.panel-footer {
    border-top: 1px solid var(--pt-border);
    background: var(--pt-surface-muted);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* cards clicaveis (dashboard, kanban) ganham leve elevacao no hover */
.panel_s.tw-cursor-pointer:hover,
.kan-ban-body .panel_s:hover,
a > .panel_s:hover {
    box-shadow: var(--pt-shadow-md);
    border-color: var(--pt-border-strong);
}

/* widgets do dashboard */
.dashboard-widget .panel_s,
#dashboard .panel_s {
    border-radius: var(--pt-radius-lg);
}

/* --------------------------------------------------------------------------
   3. Botoes
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--pt-radius);
    font-weight: 500;
    letter-spacing: -0.006em;
    padding: 7px 14px;
    transition: background-color var(--pt-transition), border-color var(--pt-transition),
                box-shadow var(--pt-transition), transform var(--pt-transition), color var(--pt-transition);
}

.btn:active {
    transform: translateY(0.5px);
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--pt-ring);
}

.btn-lg { border-radius: var(--pt-radius); padding: 11px 20px; }
.btn-sm { border-radius: var(--pt-radius-sm); padding: 5px 11px; }
.btn-xs { border-radius: var(--pt-radius-sm); padding: 3px 8px; }

.btn-primary {
    background-color: var(--pt-dark);
    border-color: var(--pt-dark);
    box-shadow: var(--pt-shadow-xs);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pt-dark-hover);
    border-color: var(--pt-dark-hover);
}

.btn-info {
    background-color: var(--pt-primary);
    border-color: var(--pt-primary);
    box-shadow: var(--pt-shadow-xs);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--pt-primary-hover);
    border-color: var(--pt-primary-hover);
}

.btn-default {
    background-color: var(--pt-surface);
    border-color: var(--pt-border-strong);
    color: #374151;
    box-shadow: var(--pt-shadow-xs);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--pt-surface-muted);
    border-color: #c3c9d4;
    color: var(--pt-text);
}

.btn-success {
    background-color: var(--pt-success);
    border-color: var(--pt-success);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #15803d;
    border-color: #15803d;
}

.btn-danger {
    background-color: var(--pt-danger);
    border-color: var(--pt-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #b91c1c;
    border-color: #b91c1c;
}

.btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --------------------------------------------------------------------------
   4. Formularios
   -------------------------------------------------------------------------- */

.form-control,
.bootstrap-select > .dropdown-toggle,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--pt-radius);
    border-color: var(--pt-border-strong);
    box-shadow: none;
    transition: border-color var(--pt-transition), box-shadow var(--pt-transition);
}

.form-control:focus,
.bootstrap-select.open > .dropdown-toggle,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--pt-primary);
    box-shadow: var(--pt-ring);
}

.form-control::placeholder {
    color: var(--pt-text-subtle);
}

.form-control[disabled],
.form-control[readonly] {
    background-color: var(--pt-surface-muted);
}

.control-label,
label {
    font-weight: 500;
    color: #374151;
}

.input-group-addon {
    border-color: var(--pt-border-strong);
    background-color: var(--pt-surface-muted);
    border-radius: var(--pt-radius);
}

.has-error .form-control {
    border-color: var(--pt-danger);
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

/* checkbox / radio do tema */
.checkbox label::before,
.radio label::before {
    border-radius: var(--pt-radius-sm);
    border-color: var(--pt-border-strong);
    transition: background-color var(--pt-transition), border-color var(--pt-transition);
}

.radio label::before {
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   5. Tabelas
   Cabecalho vira "eyebrow": menor, maiusculo, discreto. Linhas com hover.
   -------------------------------------------------------------------------- */

.table > thead > tr > th {
    border-bottom: 1px solid var(--pt-border);
    border-top: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pt-text-muted);
    padding: 12px 14px;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-top: 1px solid #f0f2f5;
    padding: 13px 14px;
    vertical-align: middle;
}

.table > tbody > tr:first-child > td {
    border-top: 0;
}

.table-hover > tbody > tr:hover,
.table > tbody > tr:hover {
    background-color: var(--pt-surface-muted);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fcfcfd;
}

.table > tfoot > tr > td,
.table > tfoot > tr > th {
    border-top: 1px solid var(--pt-border);
    font-weight: 600;
}

/* paginacao e controles do datatables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--pt-radius-sm);
    border-color: transparent;
    transition: background-color var(--pt-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--pt-surface-muted);
    border-color: var(--pt-border);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pt-primary-soft);
    border-color: transparent;
    color: var(--pt-primary);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Status, labels e badges
   Fundo tingido + texto forte, no lugar do bloco de cor cheia.
   -------------------------------------------------------------------------- */

.label,
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.01em;
    padding: 4px 10px;
    display: inline-block;
    line-height: 1.45;
}

.label-success  { background-color: #e8f6ed; color: #15803d; }
.label-danger   { background-color: #fdeaea; color: #b91c1c; }
.label-warning  { background-color: #fdf3e3; color: #b45309; }
.label-info     { background-color: var(--pt-primary-soft); color: var(--pt-primary-hover); }
.label-primary  { background-color: #eef1f6; color: #334155; }
.label-default  { background-color: #f1f3f6; color: #4b5563; }

/* --------------------------------------------------------------------------
   7. Navegacao lateral e topo (admin)
   -------------------------------------------------------------------------- */

#header {
    box-shadow: var(--pt-shadow-xs);
}

#side-menu > li > a,
#setup-menu > li > a {
    border-radius: var(--pt-radius);
    margin: 1px 8px;
    letter-spacing: -0.006em;
    transition: background-color var(--pt-transition), color var(--pt-transition);
}

#side-menu > li > .nav-second-level,
#setup-menu > li > .nav-second-level {
    margin: 0 8px 4px;
    border-radius: var(--pt-radius);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Abas, dropdowns, modais e alertas
   -------------------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--pt-border);
}

.nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--pt-text-muted);
    font-weight: 500;
    padding: 10px 16px;
    transition: color var(--pt-transition), border-color var(--pt-transition);
}

.nav-tabs > li > a:hover {
    background: transparent;
    border-bottom-color: var(--pt-border-strong);
    color: var(--pt-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: 0;
    border-bottom: 2px solid var(--pt-primary);
    color: var(--pt-primary);
    font-weight: 600;
    background: transparent;
}

.dropdown-menu {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-lg);
    padding: 6px;
}

.dropdown-menu > li > a {
    border-radius: var(--pt-radius-sm);
    padding: 8px 12px;
    transition: background-color var(--pt-transition);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--pt-surface-muted);
}

.dropdown-menu .divider {
    background-color: var(--pt-border);
    margin: 6px 4px;
}

.modal-content {
    border: 0;
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--pt-border);
    padding: 18px 24px;
}

.modal-title {
    font-weight: 600;
    letter-spacing: -0.014em;
}

.modal-body {
    padding: 22px 24px;
}

.modal-footer {
    border-top: 1px solid var(--pt-border);
    padding: 16px 24px;
    background: var(--pt-surface-muted);
    border-bottom-left-radius: var(--pt-radius-lg);
    border-bottom-right-radius: var(--pt-radius-lg);
}

.modal-backdrop.in {
    opacity: 0.42;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--pt-radius);
    padding: 13px 16px;
}

.alert-success { background-color: #e8f6ed; border-color: #cbead8; color: #14532d; }
.alert-danger  { background-color: #fdeaea; border-color: #f6cfcf; color: #7f1d1d; }
.alert-warning { background-color: #fdf3e3; border-color: #f3e0bd; color: #78350f; }
.alert-info    { background-color: var(--pt-primary-soft); border-color: #d3e1fd; color: #1e3a8a; }

.tooltip-inner {
    border-radius: var(--pt-radius-sm);
    padding: 6px 10px;
    font-size: 12.5px;
}

.popover {
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-lg);
}

.well {
    background-color: var(--pt-surface-muted);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    box-shadow: none;
}

.progress {
    border-radius: 999px;
    box-shadow: none;
    background-color: #eef0f4;
    height: 8px;
}

.progress-bar {
    border-radius: 999px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   9. Tela da fatura no admin (preview, itens, totais)
   -------------------------------------------------------------------------- */

.invoice.accounting-template .panel-body,
.estimate.accounting-template .panel-body {
    padding: 26px 28px;
}

/* bloco de totais: alinhado, com o total final destacado */
#invoice-totals td,
.invoice-preview-totals td,
.total-row td {
    padding: 9px 12px;
    border: 0;
}

#invoice-totals tr:last-child td,
.invoice-preview-totals tr:last-child td {
    border-top: 1px solid var(--pt-border);
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-text);
    padding-top: 14px;
}

/* barra de acoes fixa do preview */
.preview-top-wrapper .top,
.preview-sticky-header {
    border-radius: var(--pt-radius-lg);
}

.preview-sticky-header {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--pt-shadow-md);
    border: 1px solid var(--pt-border);
}

/* linha de itens da fatura */
.invoice-items-table > tbody > tr > td,
.table.items > tbody > tr > td {
    vertical-align: top;
}

.table.items > thead > tr > th {
    background: var(--pt-surface-muted);
}

/* historico de envio / log de whatsapp */
.invoice-send-log,
#invoice_send_history .table > tbody > tr > td {
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   10. Fatura vista pelo cliente (tema perfex) e portal
   -------------------------------------------------------------------------- */

.invoice-html-logo img,
.estimate-html-logo img {
    max-height: 64px;
    width: auto;
}

.invoice-html-number,
.estimate-html-number {
    letter-spacing: -0.02em;
}

.invoice-html-status .label {
    font-size: 12px;
    padding: 5px 12px;
}

/* enderecos de emitente/destinatario com respiro */
.transaction-html-info-col-left address,
.transaction-html-info-col-right address {
    line-height: 1.65;
    margin-bottom: 0;
}

/* botao de pagar em destaque */
.invoice-html-pay-now-top,
.pay-now-top {
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.24), 0 6px 16px -6px rgba(22, 163, 74, 0.45);
}

/* area do cliente: cards e menu com o mesmo vocabulario do admin */
.customers-area .panel_s,
.clients-area .panel_s {
    border-radius: var(--pt-radius-lg);
}

.customers-area .navbar,
.clients-navigation {
    box-shadow: var(--pt-shadow-xs);
    border-bottom: 1px solid var(--pt-border);
}

/* --------------------------------------------------------------------------
   11. Login
   -------------------------------------------------------------------------- */

.login .panel_s,
#login .panel_s {
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-lg);
    border-color: var(--pt-border);
}

/* --------------------------------------------------------------------------
   12. Ajustes finos e responsivo
   -------------------------------------------------------------------------- */

/* barra de rolagem discreta (navegadores webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d3d8e0;
    border: 2px solid var(--pt-bg);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b9c0cb;
}

/* selecao de texto na cor da marca */
::selection {
    background: rgba(37, 99, 235, 0.16);
}

@media (max-width: 768px) {
    .panel_s > .panel-body,
    .panel > .panel-body {
        padding: 18px 16px;
    }

    .invoice.accounting-template .panel-body,
    .estimate.accounting-template .panel-body {
        padding: 18px 16px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 11px 10px;
    }

    .modal-body,
    .modal-header,
    .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* impressao: sem sombra, sem fundo cinza */
@media print {
    body {
        background: #fff;
    }

    .panel_s,
    .panel {
        border: 0;
        box-shadow: none;
    }
}