/* ==========================================================
   Kroche Manager - Estilos globais complementares
   (a maior parte da paleta e do tema já vive em base.html;
   este arquivo cobre responsividade, scrollbar e detalhes finos)
   ========================================================== */

:root {
    --marrom-principal: #6B4E3D;
    --marrom-escuro: #4E3629;
    --creme-suave: #F3E7D6;
    --fundo-claro: #FAF6F0;
}

/* Scrollbar customizada (Chrome/Edge/Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--fundo-claro);
}

::-webkit-scrollbar-thumb {
    background: #d8c7b6;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--marrom-principal);
}

/* Cards: leve elevação ao passar o mouse, para dar sensação de interatividade */
.card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 6px 18px rgba(78, 54, 41, 0.06);
}

/* Badges de status usados em encomendas */
.badge.bg-secondary {
    background-color: var(--marrom-principal) !important;
}

/* Foco visível para acessibilidade (teclado) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--marrom-principal);
    outline-offset: 2px;
}

/* Empty states (mensagens de "nenhum item cadastrado") */
.text-center.text-muted.py-4 {
    font-size: 14px;
}

/* ==========================================================
   RESPONSIVO — a sidebar do base.html é fixa em 260px;
   em telas estreitas ela vira uma barra superior colapsada
   ========================================================== */
@media (max-width: 768px) {
    .sidebar {
        position: relative;
        width: 100% !important;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 12px;
    }

    .sidebar .logo {
        width: 100%;
        padding: 8px 12px;
    }

    .sidebar ul {
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
        width: 100%;
    }

    .sidebar ul li {
        flex: 1 1 auto;
    }

    .sidebar ul li a {
        padding: 8px 12px;
        font-size: 14px;
        text-align: center;
    }

    .sidebar ul li.mt-auto {
        margin-top: 0 !important;
    }

    main.conteudo {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px !important;
    }
}/* Ajustes modernos das telas de autenticação */
.auth-card{background:transparent;box-shadow:none;padding:0;max-width:380px}.auth-card h1{text-align:left}.auth-card p.subtitulo{text-align:left}.auth-wrapper{padding:0}.coluna-form{background:#fffaf5}.form-control{background:#fff}.btn-marrom{width:100%}@media(max-width:900px){.coluna-cenario{min-height:170px!important}.coluna-form{min-height:auto!important;padding:2rem 1.5rem!important}.auth-container{margin:auto}.cena-conteudo{display:none!important}}

/* ==========================================================
   LOGIN / AUTENTICAÇÃO — layout recuperado e independente
   ========================================================== */
body:has(.coluna-form){margin:0;min-height:100vh;font-family:Karla,Arial,sans-serif;background:#f8f1e8;color:#4e3629;display:grid;grid-template-columns:44% 56%;overflow-x:hidden}
.coluna-form{min-height:100vh;background:#f8f1e8;display:flex;flex-direction:column;padding:42px 7vw 42px 7vw;box-sizing:border-box}
.marca-topo{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:22px;font-weight:700;color:#4e3629}
.auth-container{width:100%;max-width:430px;margin:auto}
.auth-card{width:100%;box-sizing:border-box;background:transparent;padding:0;box-shadow:none}
.auth-card h1{font-family:Georgia,serif;font-size:40px;line-height:1.08;margin:0 0 10px;color:#4e3629;text-align:left}
.auth-card .subtitulo{margin:0 0 30px;color:#81756c;font-size:16px;text-align:left}
.form-label{display:block;margin:0 0 7px;font-size:14px;font-weight:700;color:#5b4639}
.form-control{display:block;width:100%;box-sizing:border-box;border:1px solid #d9c9b8;border-radius:8px;background:#fff;padding:13px 14px;margin:0 0 18px;color:#4e3629;font-size:15px;outline:none}
.form-control:focus{border-color:#6b4e3d;box-shadow:0 0 0 3px rgba(107,78,61,.12)}
.btn-marrom{display:block;width:100%;border:0;border-radius:8px;background:#6b4e3d;color:#fff;padding:13px 16px;font-weight:700;font-size:15px;cursor:pointer;transition:.2s}
.btn-marrom:hover{background:#4e3629}
.btn-marrom:disabled{opacity:.65;cursor:wait}
.auth-links{text-align:center;margin-top:24px;color:#81756c;font-size:14px;line-height:1.35}
.auth-links a{color:#6b4e3d;font-weight:700;text-decoration:none}
.auth-links a:hover{text-decoration:underline}
.alerta{display:none;padding:11px 13px;margin-bottom:16px;border-radius:8px;background:#fdecea;color:#a33a2b;font-size:14px}
.coluna-cenario{position:relative;min-height:100vh;background:linear-gradient(145deg,#4e3629 0%,#34231d 58%,#211714 100%);overflow:hidden;display:flex;align-items:center;padding:8vw;box-sizing:border-box;color:#fff}
.coluna-cenario .brilho{position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(214,166,102,.12);filter:blur(20px);right:-180px;top:-140px}
.cena-conteudo{position:relative;z-index:2;max-width:570px}
.eyebrow{display:inline-block;color:#e4bd7a;text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:700;margin-bottom:20px}
.cena-conteudo h2{font-family:Georgia,serif;font-size:clamp(38px,4vw,62px);line-height:1.05;margin:0 0 22px;font-weight:700}
.cena-conteudo p{font-size:18px;line-height:1.65;color:rgba(255,255,255,.78);max-width:510px;margin:0}
.novelo{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 28%,#a8613f 0%,#6b3a2c 58%,#3f2016 100%);box-shadow:0 20px 45px rgba(0,0,0,.28);opacity:.75}
.novelo:after{content:"";position:absolute;inset:14%;border:2px solid rgba(255,255,255,.08);border-radius:50%}
.n1{width:120px;height:120px;right:12%;top:12%}.n2{width:70px;height:70px;right:30%;bottom:13%}.n3{width:48px;height:48px;right:8%;bottom:28%}.n4{width:32px;height:32px;left:9%;bottom:10%}
@media(max-width:900px){body:has(.coluna-form){display:flex;flex-direction:column;overflow:auto}.coluna-cenario{order:-1;min-height:210px;height:210px;padding:28px 24px;align-items:flex-end}.cena-conteudo{max-width:100%}.cena-conteudo h2{font-size:28px;margin-bottom:0}.cena-conteudo p,.eyebrow{display:none}.coluna-form{min-height:calc(100vh - 210px);padding:25px 24px 35px}.marca-topo{font-size:19px}.auth-container{max-width:520px}.auth-card h1{font-size:32px}}
@media(max-width:520px){.coluna-cenario{min-height:150px;height:150px}.coluna-form{min-height:calc(100vh - 150px);padding:22px 18px 30px}.auth-card h1{font-size:29px}.form-control{margin-bottom:14px}.n1{width:75px;height:75px;right:8%;top:10%}.n2{width:45px;height:45px;right:28%;bottom:10%}}
/* Recuperação de senha: tela centralizada e responsiva */
body.auth-simple{min-height:100vh;margin:0;background:linear-gradient(135deg,#f8f1e8,#efe2d3);display:grid;place-items:center;padding:24px;font-family:Karla,Arial,sans-serif;color:#4e3629}.auth-simple .auth-card{width:min(100%,460px);background:#fff;border:1px solid #e1d3c3;border-radius:18px;padding:38px;box-shadow:0 20px 60px rgba(78,54,41,.14)}.auth-simple .auth-logo{display:flex;align-items:center;gap:9px;font-family:Georgia,serif;font-weight:700;font-size:20px;margin-bottom:30px}.auth-simple .auth-logo span:first-child{font-size:26px}.auth-simple h1{font-family:Georgia,serif;font-size:32px;margin:0 0 9px;text-align:left}.auth-simple .subtitulo{text-align:left;margin:0 0 25px;color:#81756c}.auth-simple .auth-links{text-align:center;margin-top:22px}.auth-simple .alerta.sucesso{display:block;background:#eaf5e7;color:#3e6a38}.auth-simple .alerta.info{display:block;background:#eee7df;color:#5e5047}.auth-simple .alerta.erro{display:block;background:#fdecea;color:#a33a2b}.auth-simple .back-home{display:inline-flex;margin-top:4px;color:#6b4e3d;text-decoration:none;font-size:13px;font-weight:700}.dark-auth{background:#161210!important;color:#fff!important}.dark-auth .auth-card{background:#251d1a;border-color:#3b2d27}.dark-auth .auth-simple,.dark-auth .form-label{color:#fff}.dark-auth .form-control{background:#382b26;color:#fff;border-color:#4b3930}.dark-auth .subtitulo,.dark-auth .auth-links{color:#b9aaa0}.dark-auth .auth-links a,.dark-auth .back-home{color:#e0b574}@media(max-width:520px){.auth-simple{padding:14px}.auth-simple .auth-card{padding:28px 22px}.auth-simple h1{font-size:28px}}

/* Recuperação de senha - centralização e responsividade */
body.auth-simple{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--fundo-claro,#FAF6F0)}
body.auth-simple .auth-card{width:min(460px,100%);margin:0 auto;box-sizing:border-box}
@media(max-width:520px){body.auth-simple{padding:16px}body.auth-simple .auth-card{padding:24px 20px}}