/* ================== Base ================== */
*{box-sizing:border-box}
:root{
  --sidebar-w: 280px;
  --sidebar-w-collapsed: 80px;
  --subpanel-w: 240px;            /* <<< NOVO: largura do painel lateral */
}
html,body,#app{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  background:#f4f7fc;
  color:#0f2544;
  overflow:hidden;               /* evita scroll da página: quem rola é o conteúdo */
}

/* ================== Layout ================== */
.app{
  display:block;
  min-height:100vh;
  transition: all .2s ease;
}
.app.collapsed{}

/* Sidebar fixa, com scroll próprio */
.sidebar{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--sidebar-w);
  background:linear-gradient(180deg,#3b83ff 0%,#2f73f0 55%,#2765d6 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:20;
}
.app.collapsed .sidebar{ width:var(--sidebar-w-collapsed); }

/* ========= Painel lateral de submenus (NOVO) ========= */
.subpanel{
  position:fixed;
  top:0; bottom:0;
  left:var(--sidebar-w);
  width:var(--subpanel-w);
  background:#f7faff;
  border-right:1px solid #e4ecfb;
  border-left:1px solid #e4ecfb;
  display:none;
  z-index:18; /* acima do conteúdo, abaixo da sidebar */
}
.app.subopen .subpanel{ display:flex; flex-direction:column; }
.app.collapsed .subpanel{ left:var(--sidebar-w-collapsed); }

.submenu-section-title {
  font-weight: 700;
  font-size: 13px;
  color: #0f2544;
  margin: 8px 0 4px 10px;
  opacity: 0.9;
}

.submenu-sep {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 6px 0;
}

.subpanel .subhead{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  font-weight:800; color:#1d2a44;
  border-bottom:1px solid #e6eef9; background:#ffffffcc; backdrop-filter:blur(4px);
}
.subpanel .subclose{
  width:28px;height:28px;border-radius:8px;border:1px solid #dfe6fb;background:#fff;
  cursor:pointer; font-size:18px; line-height:24px; color:#274aa6;
}
.subpanel .subclose:hover{ filter:brightness(.97); }
.slist{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.slist a{
  display:flex; align-items:center; gap:8px;
  background:#fff; color:#1e2a44; text-decoration:none;
  border:1px solid #e6ecf5; border-radius:12px; padding:10px 12px;
  transition:background .15s ease, transform .05s ease, border-color .15s ease;
}
.slist a:hover{ background:#eef4ff; border-color:#cddcff; }
.slist a .icon{ width:16px;height:16px; }

/* Ajuste do conteúdo quando o painel está aberto */
.content{
  display:flex;
  flex-direction:column;
  height:100vh;
  background:#f5f8fe;
  overflow:hidden;
  margin-left:var(--sidebar-w);
  transition:margin-left .2s ease;
}
.app.collapsed .content{ margin-left:var(--sidebar-w-collapsed); }

/* quando o painel abre, empurra o conteúdo */
.app.subopen .content{
  margin-left:calc(var(--sidebar-w) + var(--subpanel-w));
}
.app.collapsed.subopen .content{
  margin-left:calc(var(--sidebar-w-collapsed) + var(--subpanel-w));
}

/* ================== Topbar / Footer ================== */
.topbar{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; border-bottom:1px solid #e6eef9;
  background:#ffffffcc; backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:5;
}
#page-title{font-size:20px;margin:0;color:#1d2a44}

.userbar{display:flex;align-items:center;gap:10px}
.userbar .avatar{width:32px;height:32px;border-radius:50%;background:#e9efff;color:#274aa6;display:flex;align-items:center;justify-content:center;font-weight:700}
.userbar .name{font-weight:600;color:#25364f}
.userbar a{color:#2b56d8;text-decoration:none;font-weight:600}
.userbar a:hover{text-decoration:underline}

.footerbar{
  height:36px;display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding:0 16px;border-top:1px solid #e6eef9;background:#fff;color:#54708b;
  position:sticky; bottom:0; z-index:4;
}

/* ================== Views / Cards ================== */
.view-root{
  flex:1;
  padding:20px;
  overflow:auto;
  min-height:0;
}
.card{background:#fff;border:1px solid #e8eef7;border-radius:14px;box-shadow:0 8px 18px rgba(21,78,210,.06);padding:18px}
h3{margin:8px 0 12px}

/* ================== Sidebar: brand/toggle ================== */
.brand{display:flex;align-items:center;gap:10px;padding:16px 14px 10px}
.brand .logo{width:36px;height:36px;border-radius:12px;background:#fff;color:#1d53c9;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.brand .brand-name{font-weight:800}
.toggle-btn{margin-left:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.toggle-btn:hover{background:rgba(255,255,255,.28)}
.icon{width:18px;height:18px;display:block}

/* ================== Navegação ================== */
.nav{ padding:10px 12px 80px; display:flex; flex-direction:column; gap:12px; }
.nav-top{display:flex;flex-direction:column;gap:12px}
.nav-bottom{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; flex-direction:column; gap:12px; }

.nav-item{
  width:100%;
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.14);
  color:#ffffff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  padding:14px 14px;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
.nav-item:hover{background:rgba(255,255,255,.20)}
.nav-item:active{transform:scale(.995)}
.nav-item .label{font-weight:700;color:#fff}
.nav-item .caret{margin-left:auto;opacity:.92}
.nav-item .icon{flex:0 0 18px}

/* Submenus inline (mantidos para mobile) */
.submenu{margin:6px 0 6px 34px;border-left:2px dashed rgba(255,255,255,.25);padding-left:12px;display:none}
.submenu.open{display:block}
.submenu-link{display:flex;align-items:center;gap:8px;color:#eef4ff;text-decoration:none;padding:10px 8px;border-radius:10px;margin:6px 0}
.submenu-link:hover{background:rgba(255,255,255,.16)}
.submenu-link .icon{width:16px;height:16px}

/* ======= Estado recolhido (desktop) ======= */
.app.collapsed .sidebar .brand .logo,
.app.collapsed .sidebar .brand .brand-name{display:none}
.app.collapsed .nav-item{justify-content:center;padding:14px}
.app.collapsed .nav-item .label,
.app.collapsed .nav-item .caret{display:none}
.app.collapsed .submenu{display:none !important}

/* ======= Flyout (opcional) ======= */
.flyout{
  position:fixed; left:var(--sidebar-w-collapsed);
  min-width:240px; background:#2f73f0; color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:8px;
  box-shadow:0 10px 24px rgba(22,57,145,.25); z-index:30; display:none;
}
.flyout.open{display:block}
.flyout a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:10px;border-radius:10px}
.flyout a:hover{background:rgba(255,255,255,.14)}
.flyout .icon{width:16px;height:16px}

/* ================== Form / Inputs ================== */
.button{background:#1f5fe0;color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.button:hover{filter:brightness(.97)}
.button.outline{background:transparent;color:#1f5fe0;border:1px solid #b7c7f5}
.input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid #d8e1ef;border-radius:10px;background:#fff}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:#7aa6ff;box-shadow:0 0 0 3px rgba(60,120,240,.14)}

.form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form .full{grid-column:1/-1}
.label{font-size:12px;color:#435b71;margin-bottom:6px;display:block}
.actions{display:flex;gap:10px}

.form-fields{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.form > .form-fields{grid-column:1 / -1}
.form > .form-actions{grid-column:1 / -1}

.form-actions{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid #eef2f7;
}
.form-actions .button{ height:38px; line-height:38px; padding:0 16px; min-width:88px; }

.form .actions, .actions.vertical{ display:flex !important; flex-direction:row !important; height:auto !important; }

@media (max-width: 900px){
  .form{grid-template-columns:1fr}
  .form-fields{grid-template-columns:1fr}
}

/* ================== Datagrid (consulta produtos) ================== */
.datagrid{display:grid;grid-template-rows:auto;gap:10px}
.dg-row{
  display:grid; grid-template-columns: 130px 1fr 160px 90px 130px 90px 150px;
  align-items:center;
  background:#fff; border:1px solid #e6ecf5; border-radius:12px; padding:12px 10px;
}
.dg-head{background:#f3f7ff;border-color:#dfe9ff;font-weight:700;color:#0f2544}
.dg-cell{padding:4px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ================== Toast ================== */
.toast{position:fixed;right:20px;bottom:20px;background:#0f9d58;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.15);z-index:100}
.toast.err{background:#d93025}

/* ================== Mobile overlay refinado ================== */
.backdrop{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 25;
  display: none;
}
.app.mobile-open .backdrop{ display:block; }

@media (max-width: 980px){
  .content{ margin-left: 0; }           /* conteúdo não “pula” */
  .sidebar{
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 30;
  }
  .app.mobile-open .sidebar{ transform: translateX(0); }

  /* Impede o “recolher” no mobile: usamos overlay */
  .app.collapsed .sidebar{ transform: translateX(-100%); }
  .app.collapsed.mobile-open .sidebar{ transform: translateX(0); }

  /* Painel lateral não aparece no mobile (usamos submenu inline) */
  .subpanel{ display:none !important; }
  .app.subopen .content{ margin-left:0; }
}

/* Botão X (fechar) na sidebar – visível apenas em overlay mobile */
.mobile-close{
  display:none;
  margin-left:auto;
  width:36px;height:36px;
  border-radius:8px;
  border:1px solid #e5eaf0;
  background:#f8fafc;
  color:#334155;
  font-size:20px; line-height:1;
  cursor:pointer;
}
.app.mobile-open .mobile-close{ display:flex; align-items:center; justify-content:center; }

/* FAB (botão flutuante abrir menu) */
.menu-fab{
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: none;
  box-shadow: 0 10px 24px rgba(15,23,42,.25);
  background: #2f73f0; color:#fff;
  font-size: 20px;
  display: none;
  align-items: center; justify-content: center;
  z-index: 26;
}
.menu-fab:hover{ filter:brightness(.97); }
.menu-fab.hide{ display:none; }

@media (max-width: 980px){
  .menu-fab{ display:flex; }
  .app.mobile-open .menu-fab{ display:none; }
}

/* ================== Ajuste opcional mobile extra ================== */
@media (max-width: 980px){
  .sidebar.is-hidden{ transform: translateX(-100%); transition: transform .2s ease; }
}

/* ================== Ajuste visual: campo de pesquisa com ícone ================== */
.search {
  position: relative;
  min-width: 260px;
  flex: 1 1 320px;
}

.search .input {
  padding-left: 44px;  /* espaço para a lupa */
  padding-right: 36px;
  height: 38px;
  border-radius: 10px;
}

.search .sicon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #64748b;
  opacity: 0.8;
  pointer-events: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.search .input:focus + .sicon {
  color: #1d4ed8;
  opacity: 1;
}