/* ============================================================================
 * ERP Gestão Deluz — DELUZ SHELL (Repaginação 2026)
 * ============================================================================
 * Camada de design que:
 *   1. Re-tonaliza o verde da marca para o "verde VIVO da faixa" (#2ebf24)
 *      — sobrescreve --brand-* e --brand-ui. Carrega DEPOIS de temas.css.
 *   2. Define a CASCA lateral: .app-shell (grid colapsável) + .sidebar verde
 *      + .topbar + .tabbar (abas internas via iframe).
 *
 * Compatível com o sistema de temas (claro/escuro) existente:
 *   - A SIDEBAR é SEMPRE verde (identidade da marca), como a navbar era navy.
 *   - topbar / tabbar / área de trabalho usam os tokens semânticos do tema
 *     (--bg-*, --text-*, --border-*) → adaptam ao claro/escuro.
 *
 * Este arquivo é carregado por ÚLTIMO (precedência) tanto no shell.html
 * quanto no base.html (camada interna das abas).
 * ========================================================================== */


/* ============================================================================
 * 1. RE-TOM DO VERDE — paleta "faixa" vívida (substitui o emerald)
 * ========================================================================== */
:root {
  /* Paleta de marca = verde VIVO da faixa central do logo */
  --brand-50:  #eefce0;
  --brand-100: #d8f8b6;
  --brand-200: #bdf184;
  --brand-300: #99e84b;   /* lima vivo */
  --brand-400: #5fd42f;
  --brand-500: #2ebf24;   /* primária */
  --brand-600: #23a31b;   /* ações / botões */
  --brand-700: #1d8517;
  --brand-800: #196e15;
  --brand-900: #135310;
}

/* Tokens de UI (botões, links, foco) — modo claro.
   Mesma especificidade dos seletores de temas.css, carregado depois → vence. */
:root,
:root[data-bs-theme="light"],
html[data-bs-theme="light"] {
  --brand-ui:            #2ebf24;
  --brand-ui-hover:      #23a31b;
  --brand-ui-soft:       #eefce0;
  --brand-ui-soft-text:  #1d8517;
  --border-focus:        #2ebf24;
  --shadow-focus:        0 0 0 3px rgba(46, 191, 36, 0.20);
  --text-link:           #1d8517;
  --selection-bg:        #cdf3a7;
  --selection-text:      #14400d;
}

/* Tokens de UI — modo escuro (verde mais brilhante para contraste no ink). */
html[data-bs-theme="dark"] {
  --brand-ui:            #5fd42f;
  --brand-ui-hover:      #99e84b;
  --brand-ui-soft:       rgba(95, 212, 47, 0.14);
  --brand-ui-soft-text:  #bdf184;
  --border-focus:        #5fd42f;
  --shadow-focus:        0 0 0 3px rgba(95, 212, 47, 0.28);
  --text-link:           #99e84b;
  --color-primary-text:  #bdf184;
  --color-primary-soft:  rgba(95, 212, 47, 0.14);
}


/* ============================================================================
 * 2. TOKENS DA SIDEBAR (sempre verde) + dimensões
 * ========================================================================== */
:root {
  /* Sidebar — verde vivo profundo (gradiente como a faixa) — modo claro */
  --side-bg:          #15792a;
  --side-bg-2:        #23a637;
  --side-line:        #38b544;
  --side-text:        #eefae9;
  --side-text-strong: #ffffff;
  --side-muted:       #c4e7ba;
  --side-active:      rgba(95, 212, 47, 0.32);
  --side-active-2:    rgba(95, 212, 47, 0.08);
  --side-accent:      #5fd42f;

  --side-w:           264px;
  --side-w-collapsed: 76px;
  --topbar-h:         60px;
  --tabbar-h:         46px;

  /* Forma do "cartão flutuante" (redesign arredondado 2026-06-15) */
  --side-gap:         12px;   /* margem entre o cartão e as bordas da tela  */
  --side-radius:      20px;   /* raio do cartão (expandido)                 */
  --side-radius-col:  18px;   /* raio levemente menor no trilho de 76px     */
  --side-shadow:
      0 1px 2px  rgba(16, 40, 22, .10),
      0 8px 24px rgba(16, 40, 22, .14),
      0 24px 48px rgba(16, 40, 22, .10);
  --side-hairline:    inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* No escuro, a sidebar fica um tom mais profunda para harmonizar com o ink-bg */
html[data-bs-theme="dark"] {
  --side-bg:          #0e5a1d;
  --side-bg-2:        #16802a;
  --side-line:        #248233;
  --side-text:        #ddf3d3;
  --side-text-strong: #f5ffee;
  --side-muted:       #97c98c;

  /* sombra preta NEUTRA p/ não "brilhar" verde sobre o ink #0b1220 */
  --side-shadow:
      0 2px 6px  rgba(0, 0, 0, .45),
      0 14px 34px rgba(0, 0, 0, .50);
  --side-hairline:    inset 0 0 0 1px rgba(255, 255, 255, .05);
}


/* ============================================================================
 * 3. APP SHELL (grid colapsável)
 * ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: auto 1fr;   /* a 1ª coluna acompanha a largura da sidebar */
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* Canvas atrás do cartão flutuante: surface (branco no claro / superfície no escuro),
     pra a margem ao redor da sidebar casar com a topbar e não revelar o slate do app. */
  background: var(--bg-surface);
}
/* backdrop só existe como overlay no mobile — fora do grid no desktop */
.deluz-backdrop { display: none; }


/* ============================================================================
 * 4. SIDEBAR (sempre verde)
 * ========================================================================== */
.deluz-sidebar {
  background: linear-gradient(180deg, var(--side-bg-2), var(--side-bg));
  color: var(--side-text);
  display: flex;
  flex-direction: column;
  width: var(--side-w);
  margin: var(--side-gap);                       /* descola das bordas → flutua      */
  box-sizing: border-box;
  align-self: stretch;
  height: calc(100vh - 2 * var(--side-gap));     /* altura do cartão flutuante       */
  border: 0;                                     /* mata a border-right quadrada     */
  border-radius: var(--side-radius);             /* cantos arredondados nos 4 lados  */
  box-shadow: var(--side-shadow), var(--side-hairline);  /* elevação no lugar da borda */
  overflow: hidden;                              /* clipa filhos ao raio (expandido) */
  transition: width .22s cubic-bezier(.4, 0, .2, 1);
}
.nav-collapsed .deluz-sidebar { width: var(--side-w-collapsed); border-radius: var(--side-radius-col); }
.deluz-sidebar .sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 14px; min-height: var(--topbar-h);
  text-decoration: none;
}
.deluz-sidebar .sidebar-brand .logo {
  width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto;
  background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .20);
}
.deluz-sidebar .sidebar-brand .logo img { width: 31px; height: 31px; object-fit: contain; display: block; }
.deluz-sidebar .sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.deluz-sidebar .sidebar-brand .brand-text b { color: var(--side-text-strong); font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.deluz-sidebar .sidebar-brand .brand-text span { color: var(--side-muted); font-size: 11px; }

.deluz-sidebar .sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 18px;
  scrollbar-width: thin;                                 /* Firefox: fino, sem canto quadrado */
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.deluz-sidebar .sidebar-nav::-webkit-scrollbar { width: 8px; }
.deluz-sidebar .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.deluz-sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; min-height: 40px; }

.deluz-sidebar .nav-group-label {
  color: var(--side-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; padding: 16px 12px 6px; white-space: nowrap; overflow: hidden;
}
.deluz-sidebar .nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px; color: var(--side-text);
  cursor: pointer; margin-bottom: 2px; position: relative;
  transition: background .15s, color .15s; white-space: nowrap; text-decoration: none;
  border: 0; background: transparent; width: 100%; text-align: left; font: inherit;
}
.deluz-sidebar .nav-item i { font-size: 18.5px; width: 24px; text-align: center; flex: 0 0 auto; }
.deluz-sidebar .nav-item .label { font-size: 15px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.deluz-sidebar .nav-item .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--side-accent); flex: 0 0 auto; }
.deluz-sidebar .nav-item:hover { background: rgba(255, 255, 255, .06); color: var(--side-text-strong); }
.deluz-sidebar .nav-item.active { background: linear-gradient(90deg, var(--side-active), var(--side-active-2)); color: #fff; }
.deluz-sidebar .nav-item.active::before {
  content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 999px; background: var(--side-accent);   /* pílula encostada por dentro */
}
.deluz-sidebar .sidebar-foot { padding: 10px 12px 14px; border-top: 1px solid var(--side-line); margin: 0 4px; }

/* ---- Accordion de módulos (grupos colapsáveis) ---- */
.deluz-sidebar .nav-section { margin-top: 2px; }
.deluz-sidebar .nav-section__toggle {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--side-muted); font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; padding: 14px 12px 6px; transition: color .15s; border-radius: 8px;
}
.deluz-sidebar .nav-section__toggle:hover { color: var(--side-text-strong); }
.deluz-sidebar .nav-section__ico { font-size: 15px; width: 22px; text-align: center; flex: 0 0 auto; opacity: .95; }
.deluz-sidebar .nav-section__label { flex: 1; }
.deluz-sidebar .nav-section__chev { font-size: 11px; transition: transform .2s ease; opacity: .85; flex: 0 0 auto; }
.deluz-sidebar .nav-section.open > .nav-section__toggle .nav-section__chev { transform: rotate(180deg); }
.deluz-sidebar .nav-section__items {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .24s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  /* Hierarquia: filhos recuados sob uma linha-guia vertical (rail) */
  margin: 2px 0 8px 18px; padding-left: 9px;
  border-left: 2px solid rgba(255, 255, 255, .16);
  display: flex; flex-direction: column; gap: 1px;
}
.deluz-sidebar .nav-section.open > .nav-section__items { max-height: 1400px; opacity: 1; }
/* Itens DENTRO de um módulo: menores/mais leves que os títulos → leem como filhos */
.deluz-sidebar .nav-section__items .nav-item { padding: 7px 11px; font-size: 14px; font-weight: 500; }
.deluz-sidebar .nav-section__items .nav-item i { font-size: 16px; width: 21px; opacity: .92; }
.deluz-sidebar .nav-section__items .nav-item.active { font-weight: 600; }
.deluz-sidebar .nav-section__items .nav-item.active i { opacity: 1; }
/* módulo com o tab ativo dentro / aberto: realça o header como "pai" */
.deluz-sidebar .nav-section.has-active > .nav-section__toggle,
.deluz-sidebar .nav-section.open > .nav-section__toggle { color: var(--side-text-strong); }
/* separação leve entre módulos */
.deluz-sidebar .nav-section + .nav-section { border-top: 1px solid rgba(255, 255, 255, .07); margin-top: 4px; }

/* No modo recolhido (icon-rail): some os headers, mostra todos os itens como ícones */
.nav-collapsed .deluz-sidebar .nav-section__toggle { display: none; }
.nav-collapsed .deluz-sidebar .nav-section__items { max-height: none !important; opacity: 1 !important; overflow: visible; }
/* Recolhido: desfaz a linha-guia/recuo (volta a ser icon-rail centralizado) */
.nav-collapsed .deluz-sidebar .nav-section__items { margin: 0; padding-left: 0; border-left: 0; gap: 2px; }
.nav-collapsed .deluz-sidebar .nav-section__items .nav-item { padding: 11px; font-size: inherit; }
.nav-collapsed .deluz-sidebar .nav-section + .nav-section { border-top: 0; margin-top: 0; }

/* Colapsado: só ícones */
.nav-collapsed .deluz-sidebar .sidebar-brand .brand-text,
.nav-collapsed .deluz-sidebar .nav-item .label,
.nav-collapsed .deluz-sidebar .nav-item .badge-dot,
.nav-collapsed .deluz-sidebar .nav-group-label { display: none; }
.nav-collapsed .deluz-sidebar .nav-item { justify-content: center; padding: 11px; }
.nav-collapsed .deluz-sidebar .nav-item.active::before { left: 4px; }
.nav-collapsed .deluz-sidebar .sidebar-brand { justify-content: center; padding: 16px 0 14px; }
/* Tooltip simples no modo colapsado */
.nav-collapsed .deluz-sidebar .nav-item .label {
  display: block; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ink-900, #0f1b16); color: #fff; padding: 5px 10px; border-radius: 7px;
  font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 1090;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: opacity .12s;
}
.nav-collapsed .deluz-sidebar .nav-item:hover .label { opacity: 1; }


/* ============================================================================
 * 5. MAIN + TOPBAR (usa tokens do tema → adapta claro/escuro)
 * ========================================================================== */
.deluz-main { display: flex; flex-direction: column; min-width: 0; background: var(--bg-app); overflow: hidden; }

.deluz-topbar {
  height: var(--topbar-h); flex: 0 0 auto; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 12px; padding: 0 18px;
}
.deluz-topbar .icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg-surface); color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center; font-size: 17px; transition: .15s; flex: 0 0 auto;
}
.deluz-topbar .icon-btn:hover { background: var(--bg-hover); color: var(--text-strong); border-color: var(--text-faint); }
.deluz-topbar .icon-btn.has-dot { position: relative; }
.deluz-topbar .icon-btn.has-dot::after { content: ''; position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--sem-danger-text, #dc2626); border: 2px solid var(--bg-surface); }

.deluz-topbar .topbar-search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 9px;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 8px 16px; color: var(--text-muted);
}
.deluz-topbar .topbar-search input { border: 0; background: transparent; outline: 0; flex: 1; font-size: 13.5px; color: var(--text-base); }
.deluz-topbar .topbar-spacer { flex: 1; }

.deluz-topbar .user-chip {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px;
  border-radius: 999px; cursor: pointer; transition: .15s; border: 0; background: transparent;
}
.deluz-topbar .user-chip:hover { background: var(--bg-hover); }
.deluz-topbar .user-chip .who { line-height: 1.15; text-align: left; }
.deluz-topbar .user-chip .who b { font-size: 13px; color: var(--text-strong); display: block; }
.deluz-topbar .user-chip .who span { font-size: 11px; color: var(--text-muted); }
.deluz-topbar .avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: 0 0 auto;
}


/* ============================================================================
 * 6. TABBAR (abas internas via iframe)
 * ========================================================================== */
.deluz-tabbar {
  flex: 0 0 auto; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 6px; padding: 0 12px; height: var(--tabbar-h); overflow-x: auto;
}
.deluz-tabbar::-webkit-scrollbar { height: 0; }
.deluz-tabbar .tab {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px 10px 0 0;
  color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; border-bottom: 0; position: relative; top: 1px; transition: .12s;
}
.deluz-tabbar .tab i.lead { font-size: 15px; }
.deluz-tabbar .tab:hover { background: var(--bg-hover); color: var(--text-strong); }
.deluz-tabbar .tab.active { background: var(--bg-app); color: var(--brand-ui-soft-text); border-color: var(--border-subtle); font-weight: 600; }
.deluz-tabbar .tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-ui); }
.deluz-tabbar .tab .x { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 12px; opacity: .55; }
.deluz-tabbar .tab .x:hover { background: var(--bg-hover); opacity: 1; }

.deluz-frames { flex: 1; min-height: 0; position: relative; }
.deluz-frames iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; background: var(--bg-app); }
.deluz-frames iframe.active { display: block; }
.deluz-frames .frames-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); font-size: 14px; }


/* ============================================================================
 * 7. RESPONSIVO — sidebar vira overlay no mobile/tablet
 * ========================================================================== */
@media (max-width: 992px) {
  .app-shell,
  .app-shell.nav-collapsed { grid-template-columns: 1fr; }
  .deluz-sidebar {
    position: fixed; z-index: 1085; top: 0; bottom: 0; left: 0; width: var(--side-w);
    margin: 0; height: 100%;                          /* gaveta de altura cheia, sem float */
    overflow: hidden;
    border-radius: 0 var(--side-radius) var(--side-radius) 0;   /* só o canto interno (direito) */
    transform: translateX(-100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  }
  /* mesmo se a classe nav-collapsed sobrar de uma sessão desktop: gaveta cheia, canto só à direita */
  .nav-collapsed .deluz-sidebar { border-radius: 0 var(--side-radius) var(--side-radius) 0; }
  .app-shell.nav-open .deluz-sidebar { transform: translateX(0); }
  .app-shell.nav-open .deluz-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1080; background: rgba(0, 0, 0, .45);
  }
  /* no mobile o colapso de ícones não se aplica — sempre largura cheia ao abrir */
  .app-shell.nav-collapsed .deluz-sidebar { width: var(--side-w); }
  .nav-collapsed .deluz-sidebar .sidebar-brand .brand-text,
  .nav-collapsed .deluz-sidebar .nav-item .label,
  .nav-collapsed .deluz-sidebar .nav-group-label { display: revert; }
  .nav-collapsed .deluz-sidebar .nav-item { justify-content: flex-start; padding: 9px 12px; }
}