/* ==========================================================
   MÓDULO DE APOIO COMERCIAL – SHELL (tema claro Temelio)
   ========================================================== */
:root{
  --bg-app:#f7f8fa; --bg-surface:#ffffff; --bg-hover:#f1f3f7;
  --bg-active:#eaf1ff; --bg-muted:#f4f6fa;
  --text-primary:#1f2937; --text-secondary:#55627a; --text-muted:#8b96a8;
  --border:#e5e8ef; --border-soft:#eef0f5; --border-strong:#d7dbe5;
  --accent:#2f6bff; --accent-hover:#1f56e6; --accent-soft:#e8efff;
  --orange:#ff7a1a; --orange-soft:#fff1e6;
  --red:#ef4444; --green:#10b981; --purple:#7c5cff;
  --radius-lg:12px; --radius:10px; --radius-sm:6px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 4px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow:0 6px 20px rgba(16,24,40,.08);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg-app);color:var(--text-primary);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ───────── Layout global ───────── */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;transition:grid-template-columns .22s ease}
.app.sb-collapsed{grid-template-columns:64px 1fr}
.sidebar{background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow:hidden}
.sidebar-head{padding:14px 14px 10px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-soft);min-height:64px}
.brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit;overflow:hidden}
.brand-logo{max-width:100%;max-height:38px;width:auto;height:auto;object-fit:contain;flex-shrink:0;display:block}
.sb-toggle{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border);cursor:pointer;flex-shrink:0;transition:.15s}
.sb-toggle:hover{background:var(--bg-hover);color:var(--accent);border-color:var(--accent-soft)}
.sb-toggle .ico-expand{display:none}
.sb-collapsed .sb-toggle .ico-collapse{display:none}
.sb-collapsed .sb-toggle .ico-expand{display:inline}

.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 16px;scrollbar-width:thin}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.nav-section{margin-top:10px}
.nav-section-title{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-size:10.5px;font-weight:700;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;user-select:none}
.nav-section-title svg{transition:transform .15s}
.nav-section.collapsed .nav-section-title svg{transform:rotate(-90deg)}
.nav-section.collapsed .nav-list{display:none}
.nav-list{display:flex;flex-direction:column;gap:1px}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.12s;position:relative;white-space:nowrap}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:var(--bg-active);color:var(--accent);font-weight:600}
.nav-item.active .nav-item-icon{color:var(--accent)}
.nav-item-icon{color:var(--text-muted);flex-shrink:0;display:flex}
.nav-item-label{flex:1;overflow:hidden;text-overflow:ellipsis}

.sidebar-foot{padding:10px 14px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ───────── Sidebar recolhida ───────── */
.sb-collapsed .brand{justify-content:center}
.sb-collapsed .brand-logo{max-height:34px;max-width:38px}
.sb-collapsed .sidebar-head{padding:14px 8px 10px;flex-direction:column;gap:8px}
.sb-collapsed .nav-item-label{display:none}
.sb-collapsed .nav-section-title{justify-content:center;padding:8px 0;font-size:0}
.sb-collapsed .nav-section-title svg{display:none}
.sb-collapsed .nav-section-title::before{content:"";display:block;height:1px;background:var(--border-soft);width:60%}
.sb-collapsed .nav-item{justify-content:center;padding:10px}
.sb-collapsed .sidebar-foot{display:none}

/* ───────── Conteúdo principal ───────── */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;gap:14px;min-height:56px;flex-wrap:wrap}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);font-weight:500}
.breadcrumb a{color:var(--text-secondary);transition:.15s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .crumb-current{color:var(--text-primary);font-weight:600}
.breadcrumb-back{width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);transition:.15s}
.breadcrumb-back:hover{background:var(--bg-hover);color:var(--text-primary)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);border:1px solid transparent;transition:.15s}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.icon-btn.bordered{border-color:var(--border)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;transition:.15s;border:1px solid transparent;white-space:nowrap}
.btn-ghost{background:var(--bg-surface);border-color:var(--border);color:var(--text-primary)}
.btn-ghost:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-danger{background:#fff;border-color:#fca5a5;color:var(--red)}
.btn-danger:hover{background:#fef2f2}

/* ───────── Meta bar (linha de metadados do form) ───────── */
.metabar{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.meta-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.meta-value{font-size:13px;color:var(--text-primary);font-weight:500;display:flex;align-items:center;gap:6px}
.meta-avatar{width:20px;height:20px;border-radius:50%;background:#cfd4e0;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--accent-soft);color:var(--accent);border:1px solid transparent}
.chip-green{background:#e7f6ef;color:#047857}
.chip-orange{background:var(--orange-soft);color:var(--orange)}
.chip-gray{background:var(--bg-muted);color:var(--text-secondary)}

/* ───────── Conteúdo (área que rola) ───────── */
.content{flex:1;padding:22px 24px 40px;min-width:0;overflow-x:auto}

/* ───────── Toast ───────── */
.toast{position:fixed;bottom:22px;right:22px;z-index:9999;background:#1f2937;color:#fff;border-radius:10px;padding:12px 16px;font-size:13px;box-shadow:var(--shadow);transform:translateY(80px);opacity:0;transition:.25s;display:flex;align-items:center;gap:9px;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{background:#065f46}
.toast.error{background:#991b1b}

/* ───────── Util ───────── */
.hidden{display:none !important}