/*
======================================================
CAMINHO: static/css/
ARQUIVO: base.css

DESCRIÇÃO:
CSS global do sistema Jaworski v3.

RESPONSABILIDADES:
- Definir identidade visual global
- Padronizar layout, formulários e botões
- Estilos reutilizáveis entre telas
- Estilos específicos de importação (visual)

IMPACTO:
- Afeta todas as telas (visual)
- Nenhuma regra de negócio
======================================================
*/

:root {
    --jw-primary:#0f3d2e;
    --jw-secondary:#1f7a5a;
    --jw-bg:#f4f6f8;
    --jw-card:#ffffff;
    --jw-text:#1f2937;
    --jw-muted:#6b7280;
    --jw-border:#d1d5db;
    --jw-radius:10px;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--jw-bg);
    color:var(--jw-text);
}

/* =======================
   LAYOUT GLOBAL
======================= */
.layout {
    display:flex;
    min-height:100vh;
}

.sidebar {
    width:240px;
    background:var(--jw-primary);
    color:#fff;
    padding:20px 16px;
    display:flex;
    flex-direction:column;
}

.sidebar h2 {
    font-size:18px;
    margin-bottom:30px;
}

.menu {
    flex:1;
}

.menu a {
    display:block;
    color:#e5f5ef;
    text-decoration:none;
    padding:10px 12px;
    border-radius:6px;
    margin-bottom:6px;
}

.menu a:hover {
    background:var(--jw-secondary);
}

/* =======================
   SUBMENU
======================= */
.menu-group-title {
    display:block;
    color:#e5f5ef;
    padding:10px 12px;
    border-radius:6px;
    font-weight:600;
}

.menu-group-title:hover {
    background:var(--jw-secondary);
}

.submenu {
    margin:2px 0 8px 10px;
    border-left:2px solid rgba(255,255,255,0.15);
    padding-left:10px;
}

.submenu a {
    font-size:14px;
    padding:8px 12px;
    color:#d9f5ec;
}

/* Alinhamento do submenu quando a sidebar está recolhida */
.sidebar.collapsed .submenu {
    margin:0;
    border-left:none;
    padding-left:0;
}

.sidebar.collapsed .submenu a {
    justify-content:center;
    width:100%;
    padding:10px 0;
}

/* =======================
   SIDEBAR FOOTER
======================= */
.sidebar-footer {
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.15);
}

.sidebar-user {
    font-size:13px;
    color:#d1fae5;
    padding:0 12px 10px;
    line-height:1.4;
}

.sidebar-user strong {
    display:block;
    font-weight:600;
    color:#ecfeff;
}

.logout-link {
    display:block;
    color:#fecaca;
    text-decoration:none;
    padding:10px 12px;
    border-radius:6px;
    font-weight:600;
}

.logout-link:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

/* =======================
   CONTENT
======================= */
.content {
    flex:1;
    padding:30px 40px;
}

/* =======================
   CARDS
======================= */
.card,
.card-full {
    background:var(--jw-card);
    padding:24px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.card {
    max-width:1200px;
    margin:0 auto;
}

.card-full {
    width:100%;
}

/* =======================
   FORMULÁRIOS
======================= */
.form-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:16px;
}

.form-group {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.col-3 { grid-column:span 3; }
.col-4 { grid-column:span 4; }
.col-5 { grid-column:span 5; }
.col-2 { grid-column:span 2; }
.col-6 { grid-column:span 6; }
.col-12 { grid-column:span 12; }

input,
select {
    height:38px;
    padding:8px 10px;
    border-radius:6px;
    border:1px solid var(--jw-border);
}

.form-check-inline {
    display:flex;
    align-items:center;
    gap:10px;
    height:38px;
}

.form-check-inline input[type="checkbox"] {
    width:18px;
    height:18px;
}

/* =======================
   BOTÕES
======================= */
button {
    height:40px;
    padding:0 22px;
    border-radius:8px;
    background:var(--jw-secondary);
    color:#fff;
    border:none;
    cursor:pointer;
    font-weight:600;
}

.btn-primary {
    background:var(--jw-primary);
}

.btn-danger {
    background:#dc2626;
}

.btn-secondary {
    background:#e5e7eb;
    color:#111827;
    border:1px solid #d1d5db;
}

/* ======================================================
   PADRONIZAÇÃO <a class="btn-danger">
====================================================== */
a.btn-danger {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:0 22px;
    border-radius:8px;
    font-weight:600;
    color:#fff;
    text-decoration:none;
    background:#dc2626;
}

a.btn-danger:hover {
    background:#b91c1c;
    color:#fff;
}

/* =======================
   ÍCONES
======================= */
.icon-action,
.icon-action:visited,
.icon-action:hover,
.icon-action:active {
    text-decoration:none !important;
    background:transparent !important;
}

/* =======================
   IMPORTAÇÃO (VISUAL)
======================= */
.import-card {
    max-width:1000px;
    margin:0 auto;
}

.import-alert {
    background:#fff7ed;
    border:1px solid #fed7aa;
    color:#9a3412;
    padding:12px 16px;
    border-radius:8px;
    margin:16px 0 24px;
    font-size:14px;
}

.import-form {
    margin-top:20px;
}

.input-readonly {
    background:#f3f4f6;
    color:#374151;
    font-weight:600;
}

.file-box input[type="file"] {
    padding:10px;
    background:#f9fafb;
}

.file-hint {
    font-size:12px;
    color:var(--jw-muted);
}

.btn-lg {
    height:44px;
    padding:0 28px;
    font-size:15px;
}

/* =======================
   DOWNLOAD MODELO EXCEL
   (Previsto / Realizado)
======================= */
.import-model-download {
    margin-top:10px;
}

.excel-download {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:var(--jw-primary);
    font-weight:600;
}

.excel-download img {
    width:36px;
    height:36px;
}

.excel-download:hover {
    opacity:0.85;
}

/* =======================
   TÍTULO DE IMPORTAÇÃO
======================= */
.import-title {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.import-title-icon {
    width:34px;
    height:34px;
}

/* =======================
   TÍTULO IMPORTAÇÃO
======================= */
.import-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.import-title-download img {
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.import-title-download:hover {
    opacity: 0.85;
}

/* ======================================================
   PADRÃO GLOBAL — BOTÃO CANCELAR
====================================================== */

a.btn-cancel,
button.btn-cancel {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:40px;
    padding:0 22px;
    border-radius:8px;

    background:#dc2626;
    color:#ffffff;

    font-weight:600;
    text-decoration:none;
    border:none;
    cursor:pointer;
}

a.btn-cancel:hover,
button.btn-cancel:hover {
    background:#b91c1c;
    color:#ffffff;
    text-decoration:none;
}

/* =======================
   FORMULÁRIOS — PADRÃO GLOBAL (ADIÇÃO)
======================= */
input,
select,
textarea {
    width:100%;
    min-height:40px;
    padding:8px 12px;
    border-radius:var(--jw-radius);
    border:1px solid var(--jw-border);
    font-size:14px;
    font-family:inherit;
    color:var(--jw-text);
    background:#fff;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
    min-height:90px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline:none;
    border-color:var(--jw-primary);
    box-shadow:0 0 0 2px rgba(15,61,46,0.15);
}
/* =======================
   TÍTULO DE SEÇÃO (FORM)
======================= */
.section-title {
    margin: 28px 0 16px;
    padding-bottom: 6px;

    font-size: 15px;
    font-weight: 700;
    color: var(--jw-primary);

    border-bottom: 2px solid rgba(15, 61, 46, 0.15);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* =======================
   FORM — AJUSTES VISUAIS
======================= */
.form-actions {
    display:flex;
    gap:12px;
    margin-top:24px;
    align-items:center;
}

.form-actions button,
.form-actions a.btn-danger,
.form-actions a.btn-cancel {
    min-width:140px;
    justify-content:center;
}

.form-actions.spaced {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

/* Centralização reutilizável */
.center {
    display: flex;
    justify-content: center;
}

/* =======================
   LOGO PREVIEW
======================= */
.logo-preview-box {
    width: 140px;
    height: 140px;
    border: 1px dashed var(--jw-border);
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fafafa;
    overflow: hidden;
}

.logo-preview-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* ======================================================
   PÁGINAS SEM SIDEBAR (EX: HOME)
====================================================== */
body.no-sidebar .sidebar {
    display: none;
}

body.no-sidebar .content {
    margin-left: 0;
    width: 100%;
}