/* css/style.css */
/* Versão Final Unificada */

/* --- 1. VARIÁVEIS DE COR E GLOBAIS --- */
:root {
    --cor-principal-escura: #004d40;
    /* Verde escuro/Azulado */
    --cor-principal-clara: #a5d6a7;
    /* Verde claro */
    --cor-acento: #ffca28;
    /* Amarelo/Dourado para destaque */
    --cor-fundo: #f8f9fa;
    /* Cinza muito claro padrão */
}

/* Estrutura para fixar o rodapé na parte inferior da tela */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-shrink: 0;
    flex-grow: 1;
    /* Faz o conteúdo principal ocupar o espaço disponível */
}

/* --- 2. TELA DE LOGIN --- */
.login-background {
    background: linear-gradient(135deg, var(--cor-principal-escura), #00251a);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
}

.login-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.logo-container {
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-logo {
    max-width: 150px;
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite;
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.login-card .input-group-text {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--cor-acento);
}

.login-card .form-control {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.login-card .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.login-card .form-control:focus {
    background: transparent;
    color: #fff;
    border-color: var(--cor-acento);
    box-shadow: 0 0 0 0.25rem rgba(255, 202, 40, 0.25);
}

.btn-login {
    background-color: var(--cor-acento);
    color: var(--cor-principal-escura);
    border: none;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background-color: #ffb300;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- 3. ESTILOS DAS PÁGINAS INTERNAS --- */
body:not(.login-background) {
    background-color: var(--cor-fundo);
}

/* --- NAVBAR PERSONALIZADA --- */
.navbar-custom {
    background-color: var(--cor-principal-escura) !important;
}

/* CARDS DE PRODUTO */
.card-produto {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-produto:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-produto .card-img-top {
    width: 100%;
    height: 150px;
    object-fit: contain;
    padding: 0.5rem;
    background-color: #ffffff;
}

.card-produto .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 40px;
}

.card-produto .card-text {
    font-size: 1.1rem;
    font-weight: bold;
    color: #0d6efd;
}

#carrinho-itens {
    max-height: 45vh;
    overflow-y: auto;
}

/* --- NOVA SEÇÃO: PÁGINA DE NOVO PEDIDO --- */
.carrinho-container {
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Garante que o input de valor final seja alinhado à direita */
.input-valor-final {
    text-align: right;
}

@media (min-width: 992px) {
    .carrinho-container {
        max-height: 60vh;
    }
}


.ajuste-feedback {
    font-size: 0.75rem;
    margin-top: 2px;
    height: 15px;
}

/* --- 4. DASHBOARD, GRÁFICOS E TABELAS --- */
.dashboard-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 0.75rem;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.dashboard-card .card-body {
    position: relative;
    overflow: hidden;
}

.dashboard-card .fa-icon-bg {
    position: absolute;
    top: -10px;
    right: -15px;
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.15);
    transform: rotate(-20deg);
    transition: transform 0.5s ease;
}

.dashboard-card:hover .fa-icon-bg {
    transform: rotate(-10deg) scale(1.1);
}

.card-footer a {
    transition: opacity 0.2s;
}

.card-footer a:hover {
    opacity: 0.8;
}

.table thead {
    background-color: #343a40;
    color: #ffffff;
}

.table tbody tr:hover {
    background-color: #e9ecef;
}

.badge {
    font-size: 0.85em;
    padding: 0.5em 0.7em;
    font-weight: 600;
}

/* Gráficos Analíticos */
.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
}

.chart-actions .btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
}

.drag-handle {
    cursor: move;
    color: #adb5bd;
    margin-left: 0.5rem;
    padding: 0.25rem;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: var(--cor-principal-clara);
    border: 2px dashed var(--cor-principal-escura);
}

.sortable-item {
    cursor: pointer;
}

#detalhesModal .modal-body {
    background-color: #f8f9fa;
}

#detalhesModal .table {
    margin-bottom: 0;
}

/* --- 5. MEDIA QUERIES --- */
@media (min-width: 992px) {
    #carrinho-itens {
        max-height: 60vh;
    }
}

/* Estilos para a página Análise de Clientes */
#myTab .nav-link {
    font-weight: 500;
}

#myTab .nav-link.active {
    font-weight: bold;
    color: var(--cor-principal-escura);
}

/* Modal de Detalhes de Pedido */
#pedidosModal .modal-body {
    background-color: #f8f9fa;
}

#pedidosModal .table {
    margin-bottom: 0;
}

#pedidosModal .accordion-button {
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
}

#pedidosModal .accordion-body {
    padding: 0.5rem 1rem;
}

/* === Coco & Cia V3: interface premium preservando o sistema legado === */
:root{--coco-950:#043b31;--coco-900:#064e3b;--coco-800:#0b5f49;--coco-700:#0e7458;--coco-100:#e9f5ef;--gold:#ffc629;--ink:#102a26;--muted:#637873;--surface:#fff;--line:#dbe7e2;--shadow:0 16px 42px rgba(6,78,59,.09)}
html{background:#f4f8f6}body.app-body{background:linear-gradient(180deg,#f7faf9,#eef5f2);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}.app-main{min-height:calc(100vh - 122px)}
.premium-topbar{background:linear-gradient(110deg,var(--coco-950),var(--coco-900) 62%,#075b46)!important;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.12)}.topbar-logo{width:38px;height:38px;object-fit:contain}.navbar-brand small{font-size:.68rem;font-weight:400;color:#b9d7ce}.premium-nav .nav-link{border-radius:10px;margin:0 2px;padding:.65rem .75rem!important;color:#d9eee7!important;transition:.18s}.premium-nav .nav-link:hover,.premium-nav .nav-link.active{color:#fff!important;background:rgba(255,255,255,.12)}.premium-topbar .dropdown-menu{border:0;border-radius:14px;padding:.5rem;box-shadow:0 20px 50px rgba(0,0,0,.16)}.premium-topbar .dropdown-item{border-radius:9px;padding:.6rem .75rem}.premium-topbar .dropdown-item:hover{background:#eef7f3;color:var(--coco-900)}.user-chip{display:flex!important;align-items:center;gap:.45rem}.user-dot{width:9px;height:9px;border-radius:50%;background:#5ee6a8;box-shadow:0 0 0 3px rgba(94,230,168,.15)}
.container,.container-fluid{--bs-gutter-x:1.6rem}.card,.accordion-item,.modal-content{border-color:var(--line);border-radius:16px}.card{box-shadow:0 8px 25px rgba(6,78,59,.055)}.dashboard-card{box-shadow:var(--shadow)}.btn-primary,.btn-success{--bs-btn-bg:var(--coco-800);--bs-btn-border-color:var(--coco-800);--bs-btn-hover-bg:var(--coco-900);--bs-btn-hover-border-color:var(--coco-900)}.btn-warning,.btn-login{background:var(--gold);border-color:var(--gold);color:#173e34}.form-control,.form-select{border-color:#cfe0da;border-radius:10px}.form-control:focus,.form-select:focus{border-color:#50a58a;box-shadow:0 0 0 .2rem rgba(14,116,88,.12)}.table{--bs-table-bg:transparent}.table thead{background:#edf5f2;color:var(--ink)}.table>:not(caption)>*>*{border-bottom-color:#dce9e4}.app-footer{background:#fff;border-top:1px solid var(--line);padding:1rem 0;color:#58736a;font-size:.86rem}.offline-banner{background:#fff3cd;color:#664d03;border-bottom:1px solid #ffe69c;padding:.55rem 1rem;text-align:center;font-size:.87rem}.premium-login{max-width:460px;margin:auto}.premium-login .form-control{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.24)}.premium-login .form-control:focus{background:rgba(255,255,255,.12);color:#fff}.page-hero{background:linear-gradient(135deg,#fff,#eef7f3);border:1px solid var(--line);border-radius:18px;padding:1.15rem 1.35rem;box-shadow:var(--shadow)}.metric-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:1rem;box-shadow:var(--shadow)}.kanban{display:grid;grid-template-columns:repeat(5,minmax(250px,1fr));gap:1rem;overflow-x:auto;padding-bottom:.5rem}.kanban-col{background:#edf5f2;border:1px solid #d7e8e1;border-radius:16px;padding:.75rem;min-height:280px}.kanban-card{background:#fff;border:1px solid #dbe7e2;border-radius:12px;padding:.8rem;margin-bottom:.65rem;box-shadow:0 5px 16px rgba(6,78,59,.06)}.sync-pill{font-size:.75rem;padding:.3rem .55rem;border-radius:999px;background:#e8f5ef;color:#0b6b4f}.responsive-actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media(max-width:1199.98px){.premium-topbar .navbar-collapse{padding:.75rem 0 1rem}.premium-nav .nav-link{margin:.15rem 0}.premium-topbar .dropdown-menu{box-shadow:none;background:rgba(255,255,255,.07)}.premium-topbar .dropdown-item{color:#ecfff8}.premium-topbar .dropdown-item:hover{background:rgba(255,255,255,.1);color:#fff}}
@media(max-width:767.98px){.container,.container-fluid{--bs-gutter-x:1rem}.app-main .container,.app-main .container-fluid{padding-top:.75rem!important}.page-hero{padding:1rem}.dashboard-card:hover{transform:none}.table-responsive{border-radius:12px}.login-card{padding:1.35rem}.kanban{grid-template-columns:repeat(5,82vw)}h1,h2{letter-spacing:-.02em}}


/* ===== Coco & Cia V3 final: navegação superior premium e UX comercial ===== */
:root{--coco-900:#043b30;--coco-800:#075846;--coco-700:#0b6a54;--coco-gold:#ffc72c;--surface:#fff;--line:#dfe8e4;--soft:#f3f8f6}
.app-body{min-height:100vh;background:linear-gradient(180deg,#f5f9f7 0,#eef5f2 100%);color:#10231e}.app-main{min-height:calc(100vh - 132px)}
.premium-topbar{background:linear-gradient(100deg,var(--coco-900),var(--coco-800));box-shadow:0 8px 28px rgba(3,56,44,.18);min-height:72px}.topbar-logo{width:42px;height:42px;object-fit:contain}.navbar-brand small{font-size:.68rem;opacity:.7;font-weight:400}.premium-nav .nav-link{border-radius:12px;padding:.65rem .8rem!important;margin:.15rem;color:rgba(255,255,255,.82)!important;font-weight:500}.premium-nav .nav-link:hover,.premium-nav .nav-link.active,.premium-nav .show>.nav-link{background:rgba(255,255,255,.13);color:#fff!important}.premium-topbar .dropdown-menu{border:0;border-radius:14px;padding:.55rem;box-shadow:0 18px 45px rgba(0,0,0,.16)}.premium-topbar .dropdown-item{border-radius:9px;padding:.58rem .7rem}.premium-topbar .dropdown-item:hover{background:#edf8f3;color:var(--coco-800)}.user-chip{white-space:nowrap}.user-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#7ee2b8;margin-right:.45rem}
.page-hero{background:linear-gradient(120deg,#fff,#f2faf6);border:1px solid var(--line);border-radius:20px;padding:1.2rem 1.35rem;box-shadow:0 12px 34px rgba(5,67,52,.06)}.premium-card,.card{border-color:var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(5,67,52,.055)}.app-footer{border-top:1px solid var(--line);background:#fff}.offline-banner{background:#fff3cd;color:#664d03;text-align:center;padding:.55rem 1rem;font-size:.9rem;border-bottom:1px solid #ffe69c}
.client-picker{position:relative}.client-results{position:absolute;z-index:1050;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 18px 35px rgba(0,0,0,.14);max-height:330px;overflow:auto}.client-result{display:flex;flex-direction:column;width:100%;text-align:left;border:0;border-bottom:1px solid #eef2f0;background:#fff;padding:.75rem 1rem}.client-result:hover{background:#eef8f4}.client-result small{color:#687b74}.selected-client{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding:.65rem .85rem;border-radius:12px;background:#eaf7f1;color:#064e3b}.selected-client span{color:#557169;font-size:.87rem}.product-grid-scroll{max-height:72vh;overflow:auto;padding:4px}.premium-product-card{overflow:hidden}.premium-product-card .card-img-top{height:150px;object-fit:contain;background:#fff}.order-summary-sticky{top:92px}.suggestion-card{background:linear-gradient(120deg,#f7fff9,#eff9f4);box-shadow:inset 0 0 0 1px #d8eee4}.suggestion-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem;border:1px solid #dceae4;border-radius:12px;background:#fff}.ai-note{border-left:4px solid var(--coco-700);padding:.75rem 1rem;background:#fff;border-radius:0 10px 10px 0}.route-client-list{max-height:58vh;overflow:auto}.route-client{display:flex;gap:.65rem;align-items:flex-start;padding:.7rem;border-bottom:1px solid #edf1ef;cursor:pointer}.route-client:hover{background:#f4faf7}.route-client input{margin-top:.3rem}
.kanban{display:grid;grid-template-columns:repeat(6,minmax(260px,1fr));gap:1rem;overflow-x:auto;padding-bottom:1rem}.kanban-col{background:#eef5f2;border-radius:16px;padding:.8rem;min-height:420px}.kanban-card{background:#fff;border:1px solid #dce8e3;border-radius:14px;padding:.9rem;margin-bottom:.7rem;box-shadow:0 5px 15px rgba(0,0,0,.04)}
@media(max-width:1199.98px){.premium-topbar .navbar-collapse{padding:.8rem 0 1rem}.premium-nav .nav-link{margin:.15rem 0}.order-summary-sticky{position:static!important}.product-grid-scroll{max-height:none}.navbar-nav .dropdown-menu{background:rgba(255,255,255,.98)}}
@media(max-width:767.98px){.premium-topbar{min-height:62px}.topbar-logo{width:36px;height:36px}.page-hero{border-radius:15px;padding:1rem}.container-fluid.py-4{padding-top:1rem!important}.card{border-radius:15px}.responsive-actions{display:flex;flex-wrap:wrap;gap:.45rem}.product-grid-scroll{overflow:visible}.app-main{min-height:calc(100vh - 116px)}}