/* =========================================================
   JR Gestão — portal.css (LIMPO + CONSOLIDADO)
   - Header + Sidebar no estilo "iPhone-style"
   - Sidebar com espaçamento MÍNIMO real (Home / módulos / filhos)
   - Dropdown do header por CLIQUE (classe .open)
========================================================= */

/* ===========================
   RESET BÁSICO
=========================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  height:100%;
  font-family: 'Inter','Segoe UI',system-ui,sans-serif;
  background:#f4f6f8;
  color:#1f2937;
  line-height: normal;
}

/* ===========================
   VARIÁVEIS (PADRÃO JR)
=========================== */
:root{
  --jr-green:#1f7a4f;
  --jr-green-dark:#155c3a;
  --jr-green-soft:#e6f4ec;

  --sidebar-bg: linear-gradient(180deg, #1f7a4f, #145c3a);
  --sidebar-text:#eaf7f0;

  --card-bg:#ffffff;

  --text-muted:#6b7280;
  --text-strong:#111827;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.06);
  --shadow-hover:0 15px 40px rgba(0,0,0,.10);

  --radius-md:14px;
  --radius-lg:20px;

  --transition: all .25s ease;

  /* ✅ CONTROLE FINO DO ESPAÇO DO MENU */
  --sb-item-gap: 2px; /* <--- diminui aqui (1px se quiser colado) */
}

/* ===========================
   LAYOUT PRINCIPAL
=========================== */
.portal-layout{
  display:flex;
  min-height:100vh;
  width:100%;
}

/* ===========================
   SIDEBAR (base)
=========================== */
.sidebar{
  width:260px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display:flex;
  flex-direction:column;
  padding: 8px 8px 16px;
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/* ===========================
   MAIN CONTENT
=========================== */
.main-content{
  flex:1;
  padding: 0 40px 32px;
  overflow-y:auto;
}

/* =========================================================
   HEADER
========================================================= */
.portal-header{
  position: sticky;
  top: 10px;
  z-index: 50;

  margin: 12px;
  padding: 14px 16px;

  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 50px rgba(0,0,0,.08);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.header-left h1{
  margin:0;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-strong);
}

.page-subtitle{
  display:block;
  margin-top: 6px;
  opacity:.75;
  font-size: 13px;
  color: var(--text-muted);
}

.breadcrumb{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(17,24,39,.70);
}
.breadcrumb a{
  text-decoration:none;
  color: inherit;
  border-bottom: 1px dashed rgba(17,24,39,.25);
}
.breadcrumb .separator{ opacity:.45; }
.breadcrumb .current{ font-weight: 900; }

.header-right{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.header-context{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  font-weight: 850;
  font-size: 12px;
  white-space: nowrap;
  color: rgba(17,24,39,.75);
}
.header-context .ctx-loja,
.header-context .ctx-setor{
  color: rgba(17,24,39,.85);
}
.header-context .ctx-sep{ opacity:.55; }

.header-user{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);

  cursor: pointer;
  user-select:none;
}

.header-avatar{
  width: 38px;
  height: 38px;
  border-radius: 14px;

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

  font-weight: 950;
  color: #fff;

  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, rgba(25,135,84,.98), rgba(31,122,79,.75));
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.header-username{
  font-weight: 900;
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(17,24,39,.85);
}

.header-user i.fa-chevron-down{
  font-size: 12px;
  opacity: .6;
}

.header-user-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 210px;

  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display:none;
  z-index: 1000;
}
.header-user.open .header-user-menu{ display:block; }

.header-user-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(17,24,39,.85);
  font-weight: 850;
}
.header-user-menu a:hover{ background: rgba(0,0,0,.04); }

/* =========================================================
   SIDEBAR “glass”
========================================================= */
.sidebar-logo,
.sidebar-user,
.sidebar-nav,
.sidebar-signature{
  margin: 10px;
}

/* logo card */
.sidebar-logo{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  padding: 12px;
  display:flex;
  justify-content:center;
}
.sidebar-logo img{ max-width: 160px; height:auto; }

/* user card */
.sidebar-user{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  padding: 12px;
  text-align:center;
}
.sidebar-welcome{
  display:block;
  font-size: 12px;
  opacity:.78;
  margin-bottom: 4px;
  color: rgba(255,255,255,.85);
}
.sidebar-username{
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255,255,255,.95);
}

/* nav card */
.sidebar-nav{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  box-shadow: 0 16px 50px rgba(0,0,0,.10);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  padding: 10px;

  /* ✅ sem gap aqui */
  display:block;
}

/* ✅ wrapper neutro (não cria espaçamento extra) */
.sidebar-group{
  display:block;
  margin:0;
  padding:0;
}

/* ✅ Espaçamento unificado entre TODOS os itens */
.sidebar-item,
.sidebar-parent{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 5px 10px;             /* ✅ mais compacto */
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);

  text-decoration:none;
  color: rgba(255,255,255,.98);

  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .01em;
  line-height: 1.0;

  transition: .12s ease;

  /* ✅ AQUI é onde o espaço acontece (pequeno e controlado) */
  margin-bottom: var(--sb-item-gap);
}

/* último item do nav sem margem */
.sidebar-nav > :last-child .sidebar-item,
.sidebar-nav > :last-child.sidebar-item{
  margin-bottom: 0;
}

/* hover */
.sidebar-item:hover,
.sidebar-parent:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
}

/* ícone */
.sidebar-item i:first-child,
.sidebar-parent i:first-child{
  width: 28px;
  height: 28px;
  border-radius: 11px;

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

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.98);

  flex: 0 0 auto;
}

.sidebar-item span,
.sidebar-parent span{
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.20);
}

/* seta */
.sidebar-parent .arrow{
  opacity:.65;
  font-size: 12px;
}

/* ✅ filhos: sem buraco quando fechado */
.sidebar-children{
  margin: 0;
  padding-left: 0;
  border-left: none;

  overflow:hidden;
  transition: max-height .25s ease;
  max-height: 0;
}

.sidebar-children.collapsed{
  max-height: 0;
  margin: 0 !important;
  padding-left: 0 !important;
  border-left: none !important;
}

/* ✅ aberto: recuo mínimo + sem “vão” */
.sidebar-children:not(.collapsed){
  margin-top: 1px;               /* ✅ quase nada */
  margin-left: 10px;
  padding-left: 8px;
  border-left: 1px dashed rgba(255,255,255,.22);
  max-height: 1200px;
}

.toggle-children{ cursor: pointer; user-select:none; }
.toggle-children.open .arrow{ transform: rotate(180deg); }

/* assinatura */
.sidebar-signature{
  margin-top: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);

  padding: 12px;
  font-size: 12px;
  opacity: .85;
  text-align:center;
  color: rgba(255,255,255,.90);
}

/* ===========================
   GRID E CARDS (portal)
=========================== */
.portal-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.portal-card{
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.portal-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.portal-card-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--jr-green-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}
.portal-card-icon i{
  font-size: 26px;
  color: var(--jr-green);
}
.portal-card h3{
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
}
.portal-card p{
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ===========================
   BOTÃO PADRÃO
=========================== */
.btn-primary{
  margin-top:auto;
  background: var(--jr-green);
  color:#fff;
  border:none;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor:pointer;
  transition: var(--transition);
  text-align:center;
}
.btn-primary:hover{ background: var(--jr-green-dark); }

/* ===========================
   RESPONSIVO
=========================== */
@media (max-width: 1024px){
  .sidebar{ width: 220px; }
  .main-content{ padding: 0 24px 24px; }
}

@media (max-width: 768px){
  .portal-layout{ flex-direction: column; }

  .sidebar{
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
  }

  .sidebar-logo,
  .sidebar-user,
  .sidebar-signature{ display:none; }

  .sidebar-nav{
    display:flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    margin: 10px;
    min-width: max-content;
  }

  .sidebar-item,
  .sidebar-parent{
    min-width: 180px;
    margin-bottom: 0;
  }

  .sidebar-children{ display:none; }
}