/* =====================================================
   LAYOUT INTERNO: APP SHELL, SIDEBAR E ÁREA PRINCIPAL
===================================================== */
.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar) 1fr;
  min-height:100vh;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  transition:grid-template-columns .25s ease;
}

.app-shell.sidebar-collapsed{
  grid-template-columns:var(--sidebar-collapsed) 1fr;
}

.sidebar{
  background:transparent;
  color:#0f172a;
  font-size:14px;
  line-height:1.2;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:fixed;
  top:0;
  left:0;
  z-index:90;
  width:var(--sidebar);
  height:100vh;
  overflow:hidden;
}

.app-shell.sidebar-collapsed .sidebar{
  width:var(--sidebar-collapsed);
}

.sidebar-shell{
  background:#ffffff;
  border-right:1px solid #e9eef4;
  border-radius:0;
  font-size:var(--font-sidebar);
  padding:16px 12px 14px;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  overflow:hidden;
  box-shadow:none;
}

.sidebar-shell::before{
  content:"";
  position:absolute;
  left:0;
  top:120px;
  width:3px;
  height:36px;
  border-radius:0;
  background:var(--primary);
  opacity:0;
  transition:.2s ease;
  pointer-events:none;
}

.sidebar-header{
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
  padding:4px 8px 2px;
}

.sidebar-brand{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  box-shadow:none;
}

.sidebar-brand-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

.sidebar-brand-logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.sidebar-brand img{
  width:183px;
  max-width:183px;
  height:auto;
  object-fit:contain;
  filter:none;
}

.brand-sub{
  display:none;
}

.sidebar-toggle{
  width:38px;
  height:38px;
  border:none;
  border-radius:10px;
  background:#f8fafc;
  color:#334155;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex:0 0 auto;
  transition:.2s ease;
  box-shadow:none;
  border:none;
}

.sidebar-toggle:hover{
  background:#f1f5f9;
  transform:translateY(-1px);
}

.user-box{
  display:none;
}

.sidebar-nav-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sidebar-nav-scroll::-webkit-scrollbar{
  width:3px;
}
.sidebar-nav-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar-thumb{
  background:#e2e8f0;
  border-radius:3px;
}

.side-section-title{
  color:#94a3b8;
  font-size:var(--font-menu-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.11em;
  padding:8px 12px 0;
  position:relative;
  z-index:1;
}

.side-section-title-footer{
  margin-top:0;
}

.side-nav{
  display:grid;
  gap:2px;
  position:relative;
  z-index:1;
  padding:0 4px;
}

.side-link{
  padding:8px 12px;
  border-radius:10px;
  color:#526171;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  transition:.22s ease;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  width:100%;
  position:relative;
  overflow:hidden;
  font-weight:600;
}

.side-link .side-icon{
  width:18px;
  text-align:center;
  flex:0 0 18px;
  font-size:14px;
  color:#7c8b97;
}

.side-link .side-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.side-link .side-icon-linkedin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:4px;
  background:#e8f1fb;
  color:#2563eb;
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
}

.side-link:hover{
  background:#f6faf9;
  color:#1e293b;
  transform:none;
}

.side-link.active{
  background:rgba(15,118,110,.08);
  color:#0f172a;
  box-shadow:none;
  transform:none;
  font-weight:700;
}

.side-link.active .side-icon{
  color:var(--primary);
}

.side-link.active .side-icon-linkedin{
  background:#dbeafe;
  color:#0f766e;
}

.side-link.active::before{
  display:none;
}

.submenu-wrap{
  display:grid;
  gap:6px;
}

.submenu-toggle{
  padding:12px 14px;
  border-radius:10px;
  color:#526171;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  transition:.22s ease;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  position:relative;
  overflow:hidden;
  font-weight:500;
  width:100%;
}

.submenu-wrap.open .submenu-toggle{
  background:#f6faf9;
  color:#0f172a;
  box-shadow:none;
  font-weight:700;
}

.submenu-wrap.open .submenu-toggle .side-icon{
  color:var(--primary);
}

.submenu-toggle .side-icon{
  width:20px;
  text-align:center;
  flex:0 0 20px;
  font-size:15px;
  color:#7c8b97;
}

.submenu-toggle .side-text{
  white-space:nowrap;
  flex:1;
}

.submenu-toggle .chevron{
  font-size:12px;
  color:#94a3b8;
  transition:transform .2s ease;
}

.submenu-toggle:hover{
  background:#f6faf9;
  color:#1e293b;
  transform:none;
}

.submenu-wrap.open .submenu-toggle .chevron{
  transform:rotate(180deg);
}

.submenu-links{
  display:none;
  gap:6px;
  padding:2px 0 0 34px;
  position:relative;
}

.submenu-wrap.open .submenu-links{
  display:grid;
}

.submenu-links::before{
  content:"";
  position:absolute;
  left:14px;
  top:2px;
  bottom:6px;
  width:1px;
  background:#e6edf3;
}

.submenu-link{
  padding:10px 12px;
  border-radius:10px;
  color:#526171;
  background:transparent;
  border:none;
  cursor:pointer;
  text-align:left;
  transition:.22s ease;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  font-weight:500;
}

.submenu-link .side-icon{
  width:18px;
  text-align:center;
  flex:0 0 18px;
  font-size:13px;
  color:#94a3b8;
}

.submenu-link:hover{
  background:#f6faf9;
  color:#1e293b;
  transform:none;
}

.submenu-link.active{
  background:rgba(15,118,110,.08);
  color:#0f172a;
  box-shadow:none;
  font-weight:700;
}

.side-footer{
  display:grid;
  gap:10px;
  position:relative;
  z-index:1;
  padding:0 4px;
}

.logout-btn{
  background:#ffffff;
  color:#334155;
  border:none;
  border-radius:10px;
  padding:11px 12px;
  font-weight:700;
  cursor:pointer;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:none;
}

.user-profile-logout{
  width:100%;
  justify-content:flex-start;
  min-height:28px;
  padding:5px 9px;
  border:1px solid var(--line);
  background:#f8fafc;
  color:#334155;
  box-shadow:none;
  font-size:11px;
  border-radius:10px;
}

.logout-btn:hover{
  background:#f6faf9;
}

/* =====================================================
   USER PROFILE CARD NO RODAPÉ DA SIDEBAR
===================================================== */
.user-profile-card{
  margin-top:auto;
  border-top:1px solid #edf2f6;
  padding-top:10px;
  display:grid;
  gap:8px;
}

.user-profile-actions{
  display:none;
}

.user-profile-card.open .user-profile-actions{
  display:block;
}

.user-profile-actions .user-profile-logout{
  width:100%;
}

.user-profile-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:transparent;
  border:none;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  transition:.2s ease;
  text-align:left;
}

.user-profile-toggle:hover{
  background:#f5f8fb;
}

.user-profile-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 36px;
  background:#e2e8f0;
  border:2px solid #e8eef4;
}

.user-profile-avatar-placeholder{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#10b981);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  flex:0 0 36px;
  user-select:none;
}

.user-profile-info{
  flex:1;
  min-width:0;
  overflow:hidden;
}

.user-profile-name{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
}

.user-profile-role{
  font-size:11px;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}

.user-profile-chevron{
  font-size:12px;
  color:#94a3b8;
  transition:transform .2s ease;
  flex:0 0 auto;
}

.user-profile-card.open .user-profile-chevron{
  transform:rotate(180deg);
}

.user-profile-dropdown{
  display:none;
  padding:4px 6px 4px;
}

.user-profile-card.open .user-profile-dropdown{
  display:block;
}

/* Collapsed sidebar: oculta texto e mostra só o avatar */
.app-shell.sidebar-collapsed .user-profile-info,
.app-shell.sidebar-collapsed .user-profile-chevron,
.app-shell.sidebar-collapsed .user-profile-dropdown,
.app-shell.sidebar-collapsed .user-profile-actions,
.app-shell.sidebar-collapsed .user-profile-logout{
  display:none;
}

.app-shell.sidebar-collapsed .user-profile-toggle{
  justify-content:center;
  padding:6px;
}

.app-shell.sidebar-collapsed .user-profile-card{
  padding-top:8px;
}

.main{
  grid-column:2;
  padding:18px 22px;
  display:grid;
  gap:14px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
  background:#f4f7f8;
}

.page-shell{
  background:transparent;
  border:none;
  border-radius:0;
  padding:8px 0 0;
  box-shadow:none;
  backdrop-filter:none;
  min-height:calc(100vh - 36px);
  display:grid;
  gap:14px;
}

.topbar{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:var(--shadow-card);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.topbar h1{
  margin:0;
  font-size:var(--font-page-title);
  letter-spacing:-.04em;
  line-height:1.05;
}
.topbar p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:var(--font-page-subtitle);
  line-height:1.5;
}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

.notification-center{
  position:fixed;
  top:18px;
  right:18px;
  z-index:80;
}

.notification-bell{
  width:44px;
  height:44px;
  border:1px solid #d9e6ee;
  border-radius:14px;
  background:#ffffff;
  color:#0f172a;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(15,23,42,.12);
  position:relative;
}

.notification-bell:hover{
  background:#f8fbfd;
}

.notification-bell-icon{
  font-size:18px;
  line-height:1;
}

.notification-bell-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#be123c;
  color:#ffffff;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 3px #ffffff;
}

.notification-panel{
  position:absolute;
  top:52px;
  right:0;
  width:min(360px, calc(100vw - 28px));
  background:#ffffff;
  border:1px solid #dbe6ef;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  overflow:hidden;
}

.notification-panel-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-bottom:1px solid #e7eef5;
  background:linear-gradient(180deg, #ffffff, #f8fbfd);
}

.notification-panel-head strong{
  display:block;
  font-size:14px;
}

.notification-panel-head span{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:12px;
}

.notification-clear{
  border:none;
  background:#eef8f5;
  color:#0f766e;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  align-self:flex-start;
}

.notification-list{
  display:grid;
  gap:0;
  max-height:360px;
  overflow:auto;
}

.notification-item{
  border:none;
  border-bottom:1px solid #edf2f7;
  background:#ffffff;
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:13px 14px;
  text-align:left;
  cursor:pointer;
}

.notification-item:hover{
  background:#f8fbfd;
}

.notification-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#2563eb;
}

.notification-item.tone-danger .notification-dot{background:#be123c}
.notification-item.tone-warning .notification-dot{background:#d97706}
.notification-item.tone-info .notification-dot{background:#0f766e}

.notification-copy{
  display:grid;
  gap:3px;
  min-width:0;
}

.notification-copy strong{
  color:#0f172a;
  font-size:13px;
}

.notification-copy small{
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}

.notification-action{
  color:#0f766e;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.notification-empty{
  padding:20px;
  color:#64748b;
  font-size:13px;
  text-align:center;
}

.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:14px;
  align-items:start;
  min-width:0;
}

.app-page.hidden{
  display:none !important;
}

/* =====================================================
   WIDGETS DE APOIO: MENU DE AÇÕES E CALENDÁRIO
===================================================== */
.calendar-card{
  display:grid;
  gap:12px;
}

.calendar-box{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#fff;
}

.calendar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-weight:700;
  font-size:12px;
  color:#334155;
}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
  text-align:center;
  font-size:11px;
}

.calendar-grid div{
  padding:7px 0;
  border-radius:10px;
  color:#475569;
}

.calendar-grid .day{
  font-weight:700;
  color:#64748b;
  font-size:10px;
  text-transform:uppercase;
}

.calendar-grid .active{
  background:var(--primary-strong);
  color:#0f172a;
  font-weight:700;
}

.app-shell.sidebar-collapsed .sidebar-shell{
  padding-inline:10px;
}

.app-shell.sidebar-collapsed .sidebar-nav-scroll{
  overflow-y:auto;
  overflow-x:hidden;
}

.app-shell.sidebar-collapsed .sidebar-header{
  padding-inline:2px;
}

.app-shell.sidebar-collapsed .side-section-title,
.app-shell.sidebar-collapsed .side-link .side-text,
.app-shell.sidebar-collapsed .submenu-toggle .side-text,
.app-shell.sidebar-collapsed .submenu-toggle .chevron,
.app-shell.sidebar-collapsed .submenu-links,
.app-shell.sidebar-collapsed .logout-btn .logout-text{
  display:none;
}

.app-shell.sidebar-collapsed .sidebar-brand-top{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  gap:8px;
}

.app-shell.sidebar-collapsed .sidebar-brand{
  align-items:center;
}

.app-shell.sidebar-collapsed .sidebar-brand-logo{
  justify-content:center;
  width:100%;
  overflow:hidden;
}

.app-shell.sidebar-collapsed .sidebar-brand img{
  width:36px;
  max-width:36px;
}

.app-shell.sidebar-collapsed .side-nav,
.app-shell.sidebar-collapsed .side-footer{
  padding-inline:0;
}

.app-shell.sidebar-collapsed .side-link,
.app-shell.sidebar-collapsed .submenu-toggle{
  justify-content:center;
  padding-inline:8px;
  min-height:46px;
  border-radius:12px;
}

.app-shell.sidebar-collapsed .side-link .side-icon,
.app-shell.sidebar-collapsed .submenu-toggle .side-icon{
  width:auto;
  font-size:17px;
}

.app-shell.sidebar-collapsed .logout-btn{
  padding:10px 8px;
  min-height:42px;
}

.app-shell.sidebar-collapsed .side-section-title-footer{
  margin-top:auto;
}

.sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  z-index:999;
}

.sidebar-overlay.show{display:block}

.mobile-topbar{
  display:none;
  align-items:center;
  gap:12px;
  background:#ffffff;
  color:#fff;
  padding:10px 14px;
  position:sticky;top:0;z-index:998;
  box-shadow:var(--shadow-card);
  border-bottom:1px solid var(--line);
}

.hamburger{
  background:none;border:none;
  color:#0f172a;cursor:pointer;
  font-size:22px;padding:2px;
  line-height:1;
}

@media (max-width:720px){
  .main{
    padding:12px;
  }

  .page-shell{
    padding:6px 0 0;
    border-radius:0;
    min-height:calc(100vh - 24px);
  }

  .topbar{
    padding:12px 58px 12px 14px;
    border-radius:16px;
  }

  .topbar h1{
    font-size:18px;
  }

  .top-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }

  .top-actions .btn:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:480px){
  .main{
    padding:10px;
  }

  .page-shell{
    padding:4px 0 0;
    gap:10px;
    border-radius:0;
  }

  .topbar{
    padding:10px 58px 10px 12px;
    gap:10px;
  }

  .topbar p{
    font-size:11px;
    line-height:1.4;
  }

  .top-actions{
    grid-template-columns:1fr;
  }

  .top-actions .btn:last-child{
    grid-column:auto;
  }

  .mobile-topbar{
    padding:10px 12px;
  }

  .mobile-brand span{
    font-size:13px;
  }
}

.mobile-brand{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:15px;
}

.mobile-brand img{
  height:42px;width:auto;
  filter:none;
}

#proposalPage,
#proposalSection,
#listPage,
#proposalForm,
.form-grid,
.catalog-bar,
.proposal-list-head,
.top-actions{
  min-width:0;
}

/* =====================================================
   RESPONSIVIDADE DE LAYOUT
===================================================== */
@media (max-width:1380px){
  :root{--sidebar:228px}
  .content-grid{grid-template-columns:1fr 270px}
}

@media (max-width:1540px){
  :root{--sidebar:220px}

  .main{
    padding:14px 16px;
    gap:12px;
  }

  .page-shell{
    gap:12px;
    min-width:0;
  }

  .topbar{
    padding:12px 64px 12px 14px;
    gap:10px;
  }

  .topbar h1{
    font-size:19px;
  }

  .top-actions{
    gap:7px;
    min-width:0;
  }

  .top-actions .btn{
    padding-inline:12px;
    min-height:36px;
    font-size:12px;
  }

  .sidebar-shell{
    padding:14px 10px 12px;
  }

  .sidebar-brand img{
    width:112px;
    max-width:112px;
  }

  .side-link{
    padding:8px 10px;
    gap:9px;
    font-size:13px;
  }

  .notification-center{
    top:14px;
    right:14px;
  }
}

@media (max-width:1280px){
  :root{--sidebar:204px}

  .main{
    padding:12px 14px;
  }

  .sidebar-brand img{
    width:104px;
    max-width:104px;
  }

  .side-link,
  .submenu-toggle{
    padding-inline:9px;
  }

  .content-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:1180px){
  :root{--sidebar:196px}
  .content-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:960px){
  .app-shell,
  .app-shell.sidebar-collapsed{
    grid-template-columns:1fr;
  }

  .main{
    grid-column:1;
  }

  .sidebar{
    position:fixed;
    top:0;left:0;
    width:248px;
    height:100vh;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:4px 0 30px rgba(0,0,0,.25);
  }

  .sidebar.open{transform:translateX(0)}
  .mobile-topbar{display:flex}
  .main{padding:12px}
  .page-shell{border-radius:20px;padding:12px;min-height:auto}
}

@media (max-width:640px){
  .topbar{flex-direction:column;align-items:flex-start}
  .top-actions{width:100%}
  .top-actions .btn{flex:1 1 100%}
  .mobile-topbar{padding:8px 12px}
}

/* =====================================================
   SIDEBAR PREMIUM CONECTA
   Estilo global para todas as páginas atuais e futuras
===================================================== */
.app-shell{
  grid-template-columns:var(--sidebar) minmax(0,1fr);
}

.app-shell.sidebar-collapsed{
  grid-template-columns:var(--sidebar-collapsed) minmax(0,1fr);
}

.sidebar{
  width:var(--sidebar);
  padding:18px 0 18px 18px;
  background:transparent;
}

.app-shell.sidebar-collapsed .sidebar{
  width:var(--sidebar-collapsed);
}

.sidebar-shell{
  height:calc(100vh - 36px);
  padding:20px 18px 18px;
  border:1px solid rgba(216,228,238,.96);
  border-radius:22px;
  background:rgba(255,255,255,.985);
  box-shadow:0 20px 60px rgba(15,23,42,.07);
  gap:20px;
}

.sidebar-shell::before{
  display:none;
}

.sidebar-header{
  padding:0 4px 20px;
  border-bottom:1px solid #e6edf3;
}

.sidebar-brand-top{
  gap:16px;
}

.sidebar-toggle{
  width:50px;
  height:50px;
  border:1px solid #dfe8f1;
  border-radius:16px;
  background:#fff;
  color:#31435c;
  box-shadow:0 12px 26px rgba(15,23,42,.07);
  font-size:0;
}

.sidebar-toggle::before{
  content:"";
  width:20px;
  height:14px;
  background:
    linear-gradient(#31435c,#31435c) 0 0/100% 2px no-repeat,
    linear-gradient(#31435c,#31435c) 0 6px/100% 2px no-repeat,
    linear-gradient(#31435c,#31435c) 0 12px/100% 2px no-repeat;
  border-radius:4px;
}

.sidebar-toggle:hover{
  background:#f8fafc;
  border-color:#d6e1ea;
  transform:translateY(-1px);
}

.sidebar-brand-logo{
  flex:1;
  overflow:hidden;
}

.sidebar-brand img{
  width:252px;
  max-width:252px;
}

.sidebar-nav-scroll{
  gap:14px;
  padding-right:2px;
}

.side-section-title{
  padding:2px 12px 10px;
  color:#7f94b1;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
}

.side-nav,
.side-footer{
  gap:8px;
  padding:0;
}

.side-link,
.submenu-toggle{
  min-height:58px;
  padding:14px 16px;
  border-radius:18px;
  color:#465974;
  font-size:16px;
  font-weight:650;
  gap:14px;
}

.side-link:hover,
.submenu-toggle:hover{
  background:#f6faf8;
  color:#18324c;
}

.side-link.active,
.submenu-toggle.active,
.submenu-wrap.open .submenu-toggle{
  background:linear-gradient(90deg, rgba(232,248,240,.99), rgba(247,252,249,.96));
  color:#047857;
  box-shadow:inset 4px 0 0 #16a34a, 0 10px 24px rgba(15,118,110,.06);
  font-weight:800;
}

.side-link .side-icon,
.submenu-toggle .side-icon,
.submenu-link .side-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-grid;
  place-items:center;
  color:#40536f;
}

.side-link.active .side-icon,
.submenu-toggle.active .side-icon,
.submenu-wrap.open .submenu-toggle .side-icon,
.submenu-link.active .side-icon{
  color:#16a34a;
}

.side-icon svg{
  width:25px;
  height:25px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sidebar-linkedin-mark{
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  border:2px solid currentColor;
  border-radius:7px;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.submenu-toggle .side-text,
.side-link .side-text{
  flex:1;
  letter-spacing:-.01em;
}

.submenu-toggle .chevron{
  width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  color:#72839d;
}

.submenu-toggle .chevron svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.submenu-wrap.open .submenu-toggle .chevron{
  transform:rotate(180deg);
}

.submenu-links{
  gap:8px;
  padding:10px 0 6px 50px;
}

.submenu-links::before{
  left:24px;
  top:6px;
  bottom:8px;
  width:1px;
  background:#dce6ef;
}

.submenu-link{
  min-height:52px;
  padding:13px 14px;
  border-radius:18px;
  color:#465974;
  font-size:15px;
  font-weight:650;
  gap:12px;
  position:relative;
}

.submenu-link:hover,
.submenu-link.active{
  background:linear-gradient(90deg, rgba(232,248,240,.98), rgba(248,252,250,.94));
  color:#047857;
  font-weight:800;
}

.submenu-link.active::before{
  content:"";
  position:absolute;
  left:-32px;
  top:50%;
  width:13px;
  height:13px;
  border-radius:999px;
  background:#16a34a;
  box-shadow:0 0 0 4px #fff;
  transform:translateY(-50%);
}

.side-section-title-footer{
  padding-top:16px;
  border-top:1px solid #e6edf3;
}

.side-footer{
  margin-top:auto;
}

.user-profile-card{
  margin-top:16px;
  padding:12px;
  border:1px solid #e3ebf3;
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 38px rgba(15,23,42,.07);
  display:grid;
  gap:8px;
}

.user-profile-toggle{
  gap:12px;
  border-radius:16px;
  padding:8px;
  position:relative;
}

.user-profile-toggle:hover{
  background:#f8fafc;
}

.user-profile-avatar,
.user-profile-avatar-placeholder{
  width:52px;
  height:52px;
  flex-basis:52px;
  border:1px solid #dfe8f1;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.user-profile-toggle::after{
  content:"";
  position:absolute;
  left:48px;
  bottom:10px;
  width:13px;
  height:13px;
  border:3px solid #fff;
  border-radius:999px;
  background:#16a34a;
}

.user-profile-avatar-placeholder{
  background:linear-gradient(135deg,#0f766e,#16a34a);
}

.user-profile-name{
  font-size:16px;
  font-weight:900;
  color:#111c30;
}

.user-profile-role{
  font-size:13px;
  color:#60718d;
  margin-top:4px;
}

.user-profile-chevron{
  color:#31435c;
}

.logout-btn{
  border:1px solid #e3ebf3;
  border-radius:12px;
}

.app-shell.sidebar-collapsed .sidebar{
  padding:18px 0 18px 18px;
}

.app-shell.sidebar-collapsed .sidebar-shell{
  padding:20px 12px 18px;
  align-items:stretch;
}

.app-shell.sidebar-collapsed .sidebar-header{
  width:100%;
  padding:0 0 20px;
}

.app-shell.sidebar-collapsed .sidebar-brand-top{
  flex-direction:row;
  justify-content:space-between;
  gap:8px;
}

.app-shell.sidebar-collapsed .sidebar-brand-logo{
  width:44px;
  height:50px;
  flex:none;
  justify-content:flex-start;
}

.app-shell.sidebar-collapsed .sidebar-brand img{
  width:168px;
  max-width:none;
}

.app-shell.sidebar-collapsed .side-section-title{
  display:block;
  width:100%;
  height:1px;
  padding:0;
  margin:12px 0;
  background:#e6edf3;
  color:transparent;
  overflow:hidden;
}

.app-shell.sidebar-collapsed .side-link,
.app-shell.sidebar-collapsed .submenu-toggle{
  width:100%;
  min-height:64px;
  padding:0;
  border-radius:20px;
}

.app-shell.sidebar-collapsed .side-link .side-icon,
.app-shell.sidebar-collapsed .submenu-toggle .side-icon{
  width:30px;
  height:30px;
}

.app-shell.sidebar-collapsed .side-link.active,
.app-shell.sidebar-collapsed .submenu-toggle.active,
.app-shell.sidebar-collapsed .submenu-wrap.open .submenu-toggle{
  box-shadow:inset 4px 0 0 #16a34a, 0 10px 24px rgba(15,118,110,.06);
}

.app-shell.sidebar-collapsed .user-profile-card{
  width:100%;
  padding:6px;
  border:none;
  box-shadow:none;
  background:transparent;
}

.app-shell.sidebar-collapsed .user-profile-toggle::after{
  left:calc(50% + 11px);
  bottom:8px;
}

.app-shell.sidebar-collapsed .user-profile-avatar,
.app-shell.sidebar-collapsed .user-profile-avatar-placeholder{
  width:48px;
  height:48px;
  flex-basis:48px;
}

@media (max-width:1540px){
  :root{--sidebar:286px}

  .sidebar-brand img,
  .app-shell.sidebar-collapsed .sidebar-brand img{
    width:219px;
  }

  .side-link,
  .submenu-toggle{
    font-size:15px;
    min-height:52px;
  }
}

@media (max-width:1280px){
  :root{--sidebar:270px}

  .sidebar{
    padding-left:10px;
  }

  .sidebar-shell{
    padding-inline:14px;
  }
}

@media (max-width:960px){
  :root{--sidebar:292px}

  .sidebar{
    width:min(292px,86vw);
    padding:10px;
    transform:translateX(-110%);
  }

  .sidebar-shell{
    height:calc(100vh - 20px);
  }

  .sidebar.open{
    transform:translateX(0);
  }
}

/* =====================================================
   DUAL NAV SHELL: MINI RAIL + SIDEBAR + TOPBAR
===================================================== */
body[data-app-view="dashboard"],
body[data-app-view="settings"],
body[data-app-view="prospect"]{
  background:#f4f7f8;
}

.app-shell{
  grid-template-columns:calc(var(--rail) + var(--sidebar)) minmax(0,1fr);
  background:#f4f7f8;
}

.app-shell.sidebar-collapsed{
  grid-template-columns:var(--rail) minmax(0,1fr);
}

.mini-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:94;
  width:var(--rail);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:18px 10px;
  border-right:1px solid #dfe8ea;
  background:#ffffff;
  box-shadow:8px 0 26px rgba(15,23,42,.04);
}

.mini-rail-top,
.mini-rail-links,
.mini-rail-footer{
  width:100%;
  display:grid;
  justify-items:center;
  gap:10px;
}

.mini-rail-links{
  margin-top:14px;
}

.mini-rail-footer{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid #e3eaed;
}

.mini-rail-brand,
.mini-rail-toggle,
.mini-rail-button{
  border:none;
  cursor:pointer;
}

.mini-rail-brand{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #d9e5e7;
  border-radius:16px;
  background:#f7fbfb url("../assets/icone-conecta-menu.png") center/34px 34px no-repeat;
  box-shadow:0 12px 26px rgba(15,23,42,.07);
}

.mini-rail-toggle{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid #dfe8ea;
  background:#ffffff;
  color:#0f766e;
  box-shadow:0 10px 18px rgba(15,23,42,.05);
}

.mini-rail-toggle svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:rotate(90deg);
  transition:transform .2s ease;
}

.app-shell.sidebar-collapsed .mini-rail-toggle svg{
  transform:rotate(-90deg);
}

.mini-rail-button{
  width:56px;
  min-height:58px;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:5px;
  border-radius:16px;
  color:#3b5260;
  background:transparent;
  font-size:10px;
  line-height:1.1;
  font-weight:800;
  transition:.2s ease;
}

.mini-rail-button span:not(.side-icon){
  max-width:50px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mini-rail-button .side-icon{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
}

.mini-rail-button .side-icon svg{
  width:22px;
  height:22px;
}

.mini-rail-button:hover,
.mini-rail-button.active{
  background:#e7f7f4;
  color:#087a73;
}

.mini-rail-button.active{
  box-shadow:inset 0 0 0 1px rgba(13,148,136,.12);
}

.mini-rail-logout .side-icon svg{
  transform:rotate(135deg);
}

.sidebar{
  left:var(--rail);
  width:var(--sidebar);
  padding:0;
  z-index:92;
  background:transparent;
  transition:width .25s ease, transform .25s ease;
}

.app-shell.sidebar-collapsed .sidebar{
  width:0;
  transform:translateX(calc(-1 * var(--sidebar)));
}

.sidebar-shell{
  height:100vh;
  gap:16px;
  padding:20px 16px 18px;
  border:none;
  border-radius:0;
  background:
    radial-gradient(circle at top right, rgba(29,177,164,.22), transparent 33%),
    linear-gradient(180deg, #063c43 0%, #073641 46%, #062d36 100%);
  box-shadow:18px 0 44px rgba(3,32,37,.16);
}

.sidebar-header{
  min-height:76px;
  padding:0 0 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.sidebar-brand-top{
  gap:10px;
}

.sidebar-toggle{
  width:38px;
  height:38px;
  border-color:rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(255,255,255,.10);
  color:#d7fffb;
  box-shadow:none;
}

.sidebar-toggle::before{
  width:17px;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 6px/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 12px/100% 2px no-repeat;
}

.sidebar-toggle:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.16);
}

.sidebar-brand-logo{
  padding:9px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.96);
}

.sidebar-brand img{
  width:138px;
  max-width:138px;
}

.sidebar-nav-scroll{
  gap:10px;
  padding-right:0;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
}

.side-section-title{
  padding:4px 8px 8px;
  color:rgba(210,242,240,.62);
  font-size:10px;
}

.side-link,
.submenu-toggle{
  min-height:46px;
  gap:11px;
  padding:11px 12px;
  border-radius:12px;
  color:#d5e9e8;
  font-size:13px;
  font-weight:750;
}

.side-link:hover,
.submenu-toggle:hover{
  color:#ffffff;
  background:rgba(255,255,255,.10);
}

.side-link.active,
.submenu-toggle.active,
.submenu-wrap.open .submenu-toggle{
  color:#ffffff;
  background:linear-gradient(90deg, rgba(24,177,166,.88), rgba(21,139,144,.75));
  box-shadow:0 12px 24px rgba(2,28,33,.20);
}

.side-link .side-icon,
.submenu-toggle .side-icon,
.submenu-link .side-icon{
  width:24px;
  height:24px;
  flex-basis:24px;
  color:#d4efee;
}

.side-link.active .side-icon,
.submenu-toggle.active .side-icon,
.submenu-wrap.open .submenu-toggle .side-icon,
.submenu-link.active .side-icon{
  color:#ffffff;
}

.side-icon svg{
  width:21px;
  height:21px;
}

.submenu-toggle .chevron{
  color:rgba(224,249,247,.72);
}

.submenu-links{
  gap:4px;
  padding:4px 0 4px 36px;
}

.submenu-links::before{
  left:15px;
  top:0;
  bottom:6px;
  background:rgba(229,251,249,.28);
}

.submenu-link{
  min-height:36px;
  padding:8px 10px;
  border-radius:10px;
  color:rgba(222,241,240,.78);
  font-size:12px;
}

.submenu-link:hover,
.submenu-link.active{
  color:#ffffff;
  background:rgba(255,255,255,.10);
}

.submenu-link.active::before{
  left:-25px;
  width:9px;
  height:9px;
  box-shadow:0 0 0 3px #073b43;
  background:#4de0cc;
}

.side-section-title-footer{
  border-top-color:rgba(255,255,255,.12);
}

.side-footer{
  gap:8px;
}

.user-profile-card{
  margin-top:10px;
  padding:9px;
  border-color:rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(255,255,255,.09);
  box-shadow:none;
  display:grid;
  gap:8px;
}

.user-profile-toggle{
  gap:9px;
  padding:6px;
  border-radius:12px;
}

.user-profile-toggle:hover{
  background:rgba(255,255,255,.10);
}

.user-profile-avatar,
.user-profile-avatar-placeholder{
  width:40px;
  height:40px;
  flex-basis:40px;
  border-color:rgba(255,255,255,.24);
  box-shadow:none;
}

.user-profile-toggle::after{
  left:36px;
  bottom:7px;
  width:11px;
  height:11px;
  border-width:2px;
  border-color:#063741;
}

.user-profile-name{
  color:#ffffff;
  font-size:13px;
}

.user-profile-role{
  color:rgba(223,243,241,.72);
  font-size:11px;
}

.user-profile-chevron{
  color:rgba(231,249,248,.76);
}

.logout-btn{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.11);
  color:#ffffff;
}

.logout-btn:hover{
  background:rgba(255,255,255,.18);
}

.nav-search-hidden{
  display:none !important;
}

.main{
  grid-column:2;
  gap:0;
  min-height:100vh;
  padding:0 22px 22px;
  background:#f4f7f8;
}

.app-topbar{
  position:sticky;
  top:0;
  z-index:72;
  min-height:76px;
  margin:0 -22px 18px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--line);
  border-left:none;
  border-right:none;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}

.app-topbar-context,
.app-topbar-tools{
  display:flex;
  align-items:center;
  min-width:0;
  gap:14px;
}

.app-topbar-context{
  flex:1;
}

.app-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  color:#81909b;
  font-size:12px;
  font-weight:800;
}

.app-breadcrumb strong{
  color:#15252f;
}

.app-topbar-search{
  width:min(360px, 38vw);
  height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f7fafb;
  color:#5b737e;
}

.app-topbar-search .side-icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
}

.app-topbar-search .side-icon svg{
  width:18px;
  height:18px;
}

.app-topbar-search input{
  min-height:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#182a34;
  font-size:13px;
}

.app-topbar-search input:focus{
  box-shadow:none;
}

.app-topbar-action{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  border-radius:12px;
  padding:0 13px;
  color:#ffffff;
  background:#0f8e85;
  cursor:pointer;
  font-weight:850;
  box-shadow:0 12px 26px rgba(15,142,133,.18);
}

.app-topbar-action:hover{
  background:#0b7b74;
}

.app-topbar-action .side-icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
}

.app-topbar-action .side-icon svg{
  width:18px;
  height:18px;
}

.app-topbar-notifications{
  min-height:42px;
  display:flex;
  align-items:center;
}

.app-topbar .notification-center{
  position:relative;
  inset:auto;
  z-index:1;
}

.app-topbar .notification-bell{
  width:40px;
  height:40px;
  border-radius:12px;
  box-shadow:none;
}

.app-topbar-profile{
  min-width:170px;
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 10px 5px 6px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#ffffff;
}

.app-topbar-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  border-radius:999px;
  background:linear-gradient(135deg,#0f766e,#14b8a6);
  color:#ffffff;
  font-size:12px;
  font-weight:900;
}

.app-topbar-profile-copy{
  min-width:0;
  display:grid;
  line-height:1.15;
}

.app-topbar-profile-copy strong,
.app-topbar-profile-copy small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-topbar-profile-copy strong{
  color:#15252f;
  font-size:13px;
}

.app-topbar-profile-copy small{
  color:#72838d;
  font-size:11px;
}

.page-shell{
  min-height:calc(100vh - 118px);
  padding:0;
  gap:16px;
}

.page-shell > .topbar{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:var(--shadow-card);
  background:#ffffff;
}

.page-shell > .topbar h1{
  font-size:var(--font-page-title);
}

.notification-panel{
  top:50px;
}

.app-shell.sidebar-collapsed .sidebar-shell{
  padding:20px 16px 18px;
}

.app-shell.sidebar-collapsed .sidebar-header,
.app-shell.sidebar-collapsed .sidebar-nav-scroll,
.app-shell.sidebar-collapsed .side-section-title-footer,
.app-shell.sidebar-collapsed .side-footer{
  opacity:0;
  pointer-events:none;
}

@media (max-width:1280px){
  :root{
    --rail:70px;
    --sidebar:236px;
  }

  .app-topbar-profile{
    min-width:148px;
  }

  .app-topbar-search{
    width:min(280px,32vw);
  }
}

@media (max-width:960px){
  :root{
    --rail:0px;
    --sidebar:292px;
  }

  .app-shell,
  .app-shell.sidebar-collapsed{
    grid-template-columns:minmax(0,1fr);
  }

  .mini-sidebar{
    display:none;
  }

  .sidebar,
  .app-shell.sidebar-collapsed .sidebar{
    left:0;
    width:min(var(--sidebar),88vw);
    padding:10px;
    z-index:1000;
    transform:translateX(-110%);
  }

  .sidebar-shell{
    height:calc(100vh - 20px);
    border-radius:20px;
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .main{
    grid-column:1;
    padding:0 12px 14px;
  }

  .app-topbar{
    position:relative;
    margin:0 -12px 14px;
    padding:12px;
    flex-direction:column;
    align-items:stretch;
  }

  .app-topbar-context,
  .app-topbar-tools{
    justify-content:space-between;
    flex-wrap:wrap;
  }

  .app-topbar-search{
    width:100%;
    order:2;
  }

  .app-topbar-action{
    flex:1;
    justify-content:center;
  }
}

@media (max-width:640px){
  .app-topbar-tools{
    gap:8px;
  }

  .app-topbar-action span:last-child,
  .app-topbar-profile-copy small{
    display:none;
  }

  .app-topbar-action{
    width:42px;
    flex:0 0 42px;
    padding:0;
  }

  .app-topbar-profile{
    min-width:0;
    flex:1;
  }

  .page-shell > .topbar{
    padding:14px;
  }

  .page-shell > .topbar h1{
    font-size:20px;
  }
}

/* =====================================================
   UNTITLED-STYLE NAVIGATION: ICON RAIL + WHITE MENU
===================================================== */
:root{
  --rail:72px;
  --sidebar:276px;
}

.app-shell{
  background:#eef0f4;
}

.mini-sidebar{
  gap:10px;
  padding:18px 10px 16px;
  border-right:1px solid #e2e5eb;
  background:#fbfbfc;
  box-shadow:none;
}

.mini-rail-top,
.mini-rail-links,
.mini-rail-footer{
  gap:8px;
}

.mini-rail-links{
  margin-top:12px;
}

.mini-rail-footer{
  padding-top:12px;
  border-top:1px solid #e6e8ed;
}

.mini-rail-brand{
  width:42px;
  height:42px;
  border:none;
  border-radius:12px;
  background:transparent url("../assets/icone-conecta-menu.png") center/34px 34px no-repeat;
  box-shadow:none;
}

.mini-rail-toggle{
  width:36px;
  height:36px;
  border:1px solid #e1e4e9;
  border-radius:10px;
  color:#101827;
  background:#ffffff;
  box-shadow:none;
}

.mini-rail-button{
  width:42px;
  min-height:42px;
  border-radius:10px;
  color:#121a27;
  font-size:0;
  gap:0;
}

.mini-rail-button span:not(.side-icon){
  display:none;
}

.mini-rail-button .side-icon,
.mini-rail-button .side-icon svg{
  width:20px;
  height:20px;
}

.mini-rail-button:hover{
  color:#0f172a;
  background:#f0f2f6;
}

.mini-rail-button.active{
  color:#ffffff;
  background:#111b2a;
  box-shadow:none;
}

.mini-rail-logout .side-icon svg{
  transform:rotate(135deg);
}

.sidebar{
  background:#ffffff;
  border-right:1px solid #e2e5eb;
  box-shadow:none;
}

.sidebar-shell{
  gap:12px;
  padding:18px 14px 14px;
  border:none;
  background:#ffffff;
  box-shadow:none;
}

.sidebar-header{
  min-height:54px;
  padding:0 4px 14px;
  border-bottom:1px solid #edf0f4;
}

.sidebar-brand-top{
  min-height:40px;
  align-items:center;
}

.sidebar-brand-logo{
  display:none;
}

.sidebar-toggle{
  width:36px;
  height:36px;
  border:1px solid #e1e4e9;
  border-radius:10px;
  background:#ffffff;
  color:#111827;
  box-shadow:none;
}

.sidebar-toggle:hover{
  border-color:#d8dde5;
  color:#111827;
  background:#f6f7f9;
}

.sidebar-toggle::before{
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 6px/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 12px/100% 2px no-repeat;
}

.sidebar-nav-scroll{
  gap:8px;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb{
  background:#d8dde5;
}

.side-section-title{
  padding:4px 6px 6px;
  color:#6b7280;
  font-size:10px;
  letter-spacing:.08em;
}

.side-nav,
.side-footer{
  gap:2px;
  padding:0;
}

.side-link,
.submenu-toggle{
  min-height:36px;
  gap:10px;
  padding:8px 9px;
  border-radius:5px;
  color:#111827;
  background:transparent;
  font-size:13px;
  font-weight:650;
}

.side-link:hover,
.submenu-toggle:hover{
  color:#111827;
  background:#f3f4f7;
}

.side-link.active,
.submenu-toggle.active,
.submenu-wrap.open .submenu-toggle{
  color:#111827;
  background:#f2f3f6;
  box-shadow:none;
}

.side-link .side-icon,
.submenu-toggle .side-icon,
.submenu-link .side-icon{
  width:19px;
  height:19px;
  flex-basis:19px;
  color:#111827;
}

.side-link.active .side-icon,
.submenu-toggle.active .side-icon,
.submenu-wrap.open .submenu-toggle .side-icon,
.submenu-link.active .side-icon{
  color:#111827;
}

.side-icon svg{
  width:18px;
  height:18px;
  stroke-width:1.9;
}

.submenu-toggle .chevron{
  color:#5f6875;
}

.submenu-links{
  gap:2px;
  padding:4px 0 4px 24px;
}

.submenu-links::before{
  left:11px;
  top:3px;
  bottom:4px;
  background:#e0e3e8;
}

.submenu-link{
  min-height:34px;
  gap:8px;
  padding:7px 9px;
  border-radius:5px;
  color:#28303d;
  font-size:13px;
  font-weight:550;
}

.submenu-link:hover,
.submenu-link.active{
  color:#111827;
  background:#f3f4f7;
  font-weight:650;
}

.submenu-link.active::before{
  left:-16px;
  width:6px;
  height:6px;
  background:#111827;
  box-shadow:0 0 0 4px #ffffff;
}

.side-section-title-footer{
  padding-top:10px;
  border-top:1px solid #edf0f4;
}

.user-profile-card{
  margin-top:10px;
  padding:8px 0 0;
  border-top:1px solid #edf0f4;
  border-right:none;
  border-bottom:none;
  border-left:none;
  border-radius:0;
  background:transparent;
  display:grid;
  gap:8px;
}

.user-profile-toggle{
  gap:9px;
  padding:7px;
  border-radius:8px;
}

.user-profile-toggle:hover{
  background:#f3f4f7;
}

.user-profile-avatar,
.user-profile-avatar-placeholder{
  width:34px;
  height:34px;
  flex-basis:34px;
  border-color:#ffffff;
  box-shadow:0 0 0 1px #dfe3ea;
}

.user-profile-toggle::after{
  left:31px;
  bottom:6px;
  border-color:#ffffff;
}

.user-profile-name{
  color:#111827;
  font-size:12px;
}

.user-profile-role,
.user-profile-chevron{
  color:#667085;
}

.logout-btn{
  border:none;
  color:#111827;
  background:#ffffff;
}

.logout-btn:hover{
  background:#f3f4f7;
}

.user-profile-card .user-profile-logout{
  min-height:28px;
  padding:5px 9px;
  border:1px solid var(--line);
  background:#f8fafc;
  color:#334155;
  font-size:11px;
  border-radius:10px;
  box-shadow:none;
}

.main{
  background:#f4f5f7;
}

.app-topbar{
  display:none;
}

@media (max-width:1280px){
  :root{
    --rail:68px;
    --sidebar:252px;
  }
}

@media (max-width:960px){
  :root{
    --rail:0px;
    --sidebar:292px;
  }

  .sidebar{
    border-right:none;
    background:transparent;
  }

  .sidebar-shell{
    border:1px solid #e2e5eb;
    border-radius:18px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DUAL SIDEBAR — Menu duplo (categoria esquerda + setor direito)
═══════════════════════════════════════════════════════════════ */
:root{
  --dual-left:218px;
  --dual-mini:62px;
  --dual-sector:248px;
}

/* Ocultar sidebars legadas quando dual mode ativo */
.app-shell.dual-mode #sidebar,
.app-shell.dual-mode #miniSidebar{
  display:none !important;
}

/* ── SIDEBAR ESQUERDA (categorias) ── */
#dualSidebarLeft{
  position:fixed;
  top:0;
  left:0;
  width:var(--dual-left);
  height:100vh;
  background:#ffffff;
  border-right:1px solid #e9eef4;
  z-index:90;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:width .25s ease;
}
#dualSidebarLeft.mini{
  width:var(--dual-mini);
}

.dual-left-shell{
  display:flex;
  flex-direction:column;
  height:100%;
  width:var(--dual-left);
  padding:14px 10px;
  gap:4px;
  overflow:hidden;
}
#dualSidebarLeft.mini .dual-left-shell{
  width:var(--dual-mini);
}

/* Header com logo */
.dual-left-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  align-items:center;
  padding:2px 4px 10px;
  border-bottom:1px solid #e9eef4;
  margin-bottom:4px;
  flex-shrink:0;
  gap:8px;
}
.dual-left-logo{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow:hidden;
}
.dual-left-logo-full{
  display:block;
  width:100%;
  height:39px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
  transition:opacity .22s ease, width .22s ease, max-width .22s ease;
  min-width:0;
}
.dual-left-logo-mark{
  display:block;
  width:0;
  height:34px;
  max-width:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0;
  transition:opacity .22s ease, width .22s ease, max-width .22s ease;
  flex-shrink:0;
}
#dualSidebarLeft.mini .dual-left-logo-full{
  opacity:0;
  width:0;
  max-width:0;
}
#dualSidebarLeft.mini .dual-left-logo-mark{
  width:51px;
  max-width:51px;
  opacity:1;
}
#dualSidebarLeft.mini .dual-left-header{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-inline:0;
  gap:8px;
}
#dualSidebarLeft.mini .dual-left-logo{
  justify-content:center;
  width:100%;
}
.dual-toggle-btn{
  width:28px;
  height:28px;
  border-radius:7px;
  border:1px solid var(--line);
  background:#f8fafc;
  color:#64748b;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:.2s ease;
  font-size:13px;
}
#dualSidebarLeft.mini .dual-toggle-btn{
  display:flex !important;
}
.dual-toggle-btn:hover{
  background:#f1f5f9;
  color:var(--text);
}

/* Título de seção */
.dual-section-title{
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#94a3b8;
  padding:6px 10px 2px;
  white-space:nowrap;
  transition:opacity .22s ease;
  flex-shrink:0;
}
#dualSidebarLeft.mini .dual-section-title{
  opacity:0;
}

/* Scroll area */
.dual-nav-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dual-nav-scroll::-webkit-scrollbar{width:3px}
.dual-nav-scroll::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px}

/* Botão de categoria */
.dual-cat-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
  color:#64748b;
  font-size:13px;
  font-weight:500;
  background:none;
  border:none;
  text-align:left;
  width:100%;
  white-space:nowrap;
  position:relative;
  transition:background .22s ease, color .22s ease;
}
.dual-cat-btn:hover{
  background:#f8fafc;
  color:#334155;
}
.dual-cat-btn.active{
  background:#f8fafc;
  color:#0f172a;
  font-weight:700;
}
.dual-cat-btn.active .dual-cat-icon{
  color:var(--primary);
}
.dual-cat-icon{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:#7c8b97;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dual-cat-icon svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}
.dual-cat-label{
  font-size:13px;
  transition:opacity .22s ease;
  overflow:hidden;
  flex:1;
}
#dualSidebarLeft.mini .dual-cat-label{
  opacity:0;
  width:0;
  flex:0;
}
/* Tooltip mini */
#dualSidebarLeft.mini .dual-cat-btn:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  background:#1e293b;
  color:#f1f5f9;
  padding:5px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  pointer-events:none;
  z-index:300;
}

.dual-nav-divider{
  height:1px;
  background:var(--line);
  margin:6px 10px;
  transition:margin .22s ease;
}
#dualSidebarLeft.mini .dual-nav-divider{
  margin:6px 4px;
}

/* User card rodapé */
.dual-left-footer{
  border-top:1px solid #e9eef4;
  padding-top:8px;
  margin-top:4px;
  flex-shrink:0;
  position:relative;
}
.dual-user-actions{
  display:none;
  padding:0 0 6px;
}
.dual-left-footer.open .dual-user-actions{
  display:block;
}
.dual-user-logout{
  width:100%;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  text-align:left;
}
.dual-user-logout:hover{
  background:#f1f5f9;
}
.dual-user-logout .side-icon{
  width:16px;
  height:16px;
}
.dual-user-btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:none;
  border:none;
  border-radius:10px;
  padding:7px 8px;
  cursor:pointer;
  transition:background .2s ease;
  text-align:left;
}
.dual-user-btn:hover{
  background:#f1f5f9;
}
.dual-user-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#10b981);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.dual-user-avatar img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.dual-user-avatar span{
  position:relative;
  z-index:1;
}
.dual-user-info{
  min-width:0;
  transition:opacity .22s ease;
  overflow:hidden;
}
#dualSidebarLeft.mini .dual-user-info{
  opacity:0;
  width:0;
}
#dualSidebarLeft.mini .dual-user-actions{
  position:fixed;
  left:calc(var(--dual-mini) + 8px);
  bottom:10px;
  width:152px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 14px 30px rgba(15,23,42,.14);
}
.dual-user-name{
  font-size:12px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
}
.dual-user-role{
  font-size:10px;
  color:var(--muted);
}

/* ── SIDEBAR DIREITA (setor) ── */
#dualSidebarSector{
  position:fixed;
  top:0;
  left:var(--dual-left);
  width:0;
  height:100vh;
  background:#ffffff;
  border-right:1px solid #e9eef4;
  z-index:85;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:width .25s ease, left .25s ease;
}
#dualSidebarSector.open{
  width:var(--dual-sector);
}

/* Header do setor */
.sector-ph{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.sector-ph-icon{
  color:var(--primary);
  display:flex;
  align-items:center;
}
.sector-ph-icon svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}
.sector-ph-title{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  flex:1;
  white-space:nowrap;
}
.sector-ph-close{
  width:26px;
  height:26px;
  border-radius:7px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
  flex-shrink:0;
  font-size:14px;
}
.sector-ph-close:hover{
  background:#f8fafc;
  color:var(--text);
}

/* Corpo do setor */
.sector-body{
  flex:1;
  overflow-y:auto;
  padding:8px 0;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:var(--dual-sector);
}
.sector-body::-webkit-scrollbar{width:3px}
.sector-body::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px}

.sector-group-lbl{
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#94a3b8;
  padding:8px 14px 4px;
  white-space:nowrap;
}
.sector-items-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:0 10px;
  position:relative;
}
.sector-items-wrap.has-line::before{
  content:"";
  position:absolute;
  left:12px;
  top:2px;
  bottom:4px;
  width:1px;
  background:#e6edf3;
}

/* Botão de item do setor */
.sector-nav-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
  color:#64748b;
  font-size:13px;
  font-weight:500;
  background:none;
  border:none;
  text-align:left;
  width:100%;
  white-space:nowrap;
  transition:background .22s ease, color .22s ease;
}
.sector-nav-btn:hover{
  background:#f8fafc;
  color:#334155;
}
.sector-nav-btn.active{
  background:#f8fafc;
  color:#0f172a;
  font-weight:700;
}
.sector-nav-btn.active .snb-icon{
  color:var(--primary);
}
.snb-icon{
  width:16px;
  flex-shrink:0;
  color:#94a3b8;
  display:flex;
  align-items:center;
}
.snb-icon svg{
  width:15px;
  height:15px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}
.snb-label{flex:1}

/* Itens "Em breve" no setor */
.sector-nav-btn.soon{
  opacity:.55;
  cursor:default;
  pointer-events:none;
}
.sector-nav-btn.soon:hover{
  background:none;
  color:#64748b;
}
.snb-soon-badge{
  font-size:9px;
  font-weight:600;
  color:var(--primary);
  background:#f0fdf9;
  border:1px solid #a7f3d0;
  border-radius:4px;
  padding:1px 5px;
  white-space:nowrap;
  flex-shrink:0;
}

@media (max-width:960px){
  #dualSidebarLeft,
  #dualSidebarSector{
    display:none !important;
  }
  .app-shell.dual-mode #sidebar,
  .app-shell.dual-mode #miniSidebar{
    display:flex !important;
  }
}

.sidebar-toggle.sidebar-toggle-footer{
  width:100%;
  min-height:40px;
  height:40px;
  margin:2px 0 4px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #dfe8f1;
  color:#4b5563;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
}

.sidebar-toggle.sidebar-toggle-footer::before{
  content:none;
}

.sidebar-toggle.sidebar-toggle-footer:hover{
  background:#eef4f8;
  border-color:#cfdbe7;
}

.app-shell.sidebar-collapsed .sidebar-toggle.sidebar-toggle-footer{
  width:42px;
  min-height:42px;
  height:42px;
  margin:2px auto 4px;
  align-self:center;
}

.sidebar-brand-top #sidebarToggleButton{
  display:none !important;
}


/* =====================================================
   PRODUCAO
===================================================== */
.production-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.production-page.hidden{
  display:none;
}

.production-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, 420px);
  gap:18px;
  align-items:center;
}

.production-hero h2{
  margin:6px 0 8px;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.05;
  letter-spacing:0;
}

.production-hero p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  max-width:680px;
}

.production-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.production-metric{
  min-width:0;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.72);
}

.production-metric small{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.production-metric strong{
  display:block;
  margin-top:6px;
  font-size:24px;
  line-height:1;
}

.production-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, .72fr);
  gap:14px;
}

.production-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.production-actions .btn{
  min-height:38px;
}

@media (max-width:980px){
  .production-hero,
  .production-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:620px){
  .production-metrics{
    grid-template-columns:1fr;
  }

  .production-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}


.production-grid-wide{
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
}

.production-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ── PRODUZIDOS: grupos por cliente ─────────────────── */
.produced-client-group{
  border:1px solid var(--border,#e5e7eb);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:12px;
  background:var(--bg-card,#fff);
}

.produced-group-available{
  border-left:4px solid var(--color-warning,#f59e0b);
}

.produced-group-collected{
  border-left:4px solid var(--color-success,#10b981);
  opacity:.85;
}

.produced-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  background:var(--bg-subtle,#f9fafb);
  flex-wrap:wrap;
}

.produced-group-title{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.produced-group-name{
  font-size:.95rem;
  font-weight:600;
  color:var(--text-primary,#111827);
}

.produced-group-doc{
  font-size:.78rem;
  color:var(--text-muted,#6b7280);
}

.produced-group-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.produced-status-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 12px;
  border-radius:20px;
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;
}

.produced-status-badge.produced-status-available{
  background:#fef3c7;
  color:#92400e;
}

.produced-status-badge.produced-status-collected{
  background:#d1fae5;
  color:#065f46;
}

.produced-status-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:12px;
  font-size:.72rem;
  font-weight:600;
}

.produced-status-pill.produced-status-available{
  background:#fef3c7;
  color:#92400e;
}

.produced-status-pill.produced-status-collected{
  background:#d1fae5;
  color:#065f46;
}

.produced-collected-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  padding:8px 18px 10px;
  font-size:.8rem;
  color:var(--text-muted,#6b7280);
  border-bottom:1px solid var(--border,#e5e7eb);
  background:var(--bg-subtle,#f9fafb);
}

.produced-collected-info strong{
  color:var(--text-primary,#111827);
}

.produced-reprint-btn{
  margin-left:auto;
  font-size:.75rem;
  padding:4px 12px;
  height:30px;
  white-space:nowrap;
}

.produced-orders-table-wrap{
  overflow-x:auto;
}

.produced-orders-table{
  margin:0;
  border-radius:0;
}

.produced-row-collected td{
  opacity:.6;
  text-decoration-color:var(--color-success,#10b981);
}

.collection-modal-client{
  font-size:.85rem;
  color:var(--text-muted,#6b7280);
  margin:-4px 0 16px;
  font-weight:500;
}

.produced-product-label{
  font-size:.72rem;
  color:var(--text-muted,#6b7280);
  font-weight:400;
  display:block;
  margin-top:2px;
}

/* ── BARRA DE FILTROS DE PRODUÇÃO ─────────────────────── */
.production-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 0 14px;
  border-bottom:1px solid var(--border,#e5e7eb);
  margin-bottom:12px;
}

.production-filter-input{
  flex:1 1 160px;
  min-width:130px;
  max-width:220px;
  height:34px;
  padding:0 10px;
  border:1px solid var(--border,#d1d5db);
  border-radius:6px;
  font-size:.82rem;
  background:var(--bg-card,#fff);
  color:var(--text-primary,#111827);
  outline:none;
  transition:border-color .15s;
}

.production-filter-input:focus{
  border-color:var(--color-primary,#006d55);
}

.production-filter-input[type="date"]{
  max-width:160px;
  color:var(--text-secondary,#374151);
}

.production-filter-clear{
  height:34px;
  padding:0 14px;
  border:1px solid var(--border,#d1d5db);
  border-radius:6px;
  font-size:.8rem;
  font-weight:500;
  background:var(--bg-subtle,#f3f4f6);
  color:var(--text-muted,#6b7280);
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, color .15s;
}

.production-filter-clear:hover{
  background:var(--color-danger-soft,#fee2e2);
  color:var(--color-danger,#dc2626);
  border-color:var(--color-danger,#dc2626);
}

.production-filter-count{
  font-size:.78rem;
  color:var(--text-muted,#6b7280);
  font-weight:500;
  align-self:center;
  white-space:nowrap;
}

@media(max-width:680px){
  .production-filter-input{ max-width:100%; flex:1 1 100%; }
  .production-filter-clear{ width:100%; }
}

/* ── REIMPRESSÃO ─────────────────────────────────────── */
.production-reprint-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.reprint-op-search{
  display:flex;
  gap:8px;
  align-items:stretch;
}

.reprint-op-search .search-input{
  flex:1;
}

.reprint-op-search .btn{
  white-space:nowrap;
  flex-shrink:0;
}

.reprint-op-preview{
  border:1px solid var(--color-success,#10b981);
  border-radius:8px;
  padding:12px 16px;
  background:#f0fdf4;
}

.reprint-op-preview .production-detail-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.reprint-op-not-found{
  padding:10px 14px;
  border-radius:8px;
  background:#fef2f2;
  border:1px solid #fca5a5;
  color:#b91c1c;
  font-size:.85rem;
  font-weight:500;
}

@media(max-width:680px){
  .reprint-op-preview .production-detail-grid{ grid-template-columns:1fr 1fr; }
}

.production-acquisition-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:4px;
}

.production-acquisition-form.hidden{
  display:none;
}

.production-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.production-form-grid .field,
.production-acquisition-form .field{
  min-width:0;
}

.production-acquisition-form input[type="file"]{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  color:var(--text);
  padding:8px 10px;
  font-size:12px;
  min-height:38px;
}

.production-accessory-panel{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#f8fafc;
}

.production-accessory-panel.hidden{
  display:none;
}

.production-accessory-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}

.production-accessory-head strong{
  font-size:14px;
}

.production-accessory-head span{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  text-align:right;
}

.production-accessory-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.production-accessory-option{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font-size:13px;
}

.production-accessory-option input{
  width:16px;
  height:16px;
  accent-color:var(--primary);
}


.production-multi-select{
  min-height:132px;
}

.production-layout-items-panel{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:#f8fafc;
}

.production-layout-item-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.production-layout-item-option{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-height:52px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font-size:13px;
}

.production-layout-item-option input{
  width:16px;
  height:16px;
  margin-top:2px;
  accent-color:var(--primary);
}

.production-layout-item-option span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.production-layout-item-option small{
  color:var(--muted);
  font-size:12px;
}

.production-acquisition-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:48px;
  padding:12px;
  border-radius:12px;
  background:#eef7f6;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
}

.production-acquisition-summary span{
  color:var(--muted);
}

.production-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.production-report-filters{
  display:grid;
  grid-template-columns:minmax(240px, 420px);
  gap:12px;
  margin-bottom:14px;
}

.production-report-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.production-report-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.production-report-table th:nth-child(1){width:16%;}
.production-report-table th:nth-child(2){width:28%;}
.production-report-table th:nth-child(3){width:12%;}
.production-report-table th:nth-child(4){width:14%;}
.production-report-table th:nth-child(5){width:16%;}
.production-report-table th:nth-child(6){width:14%;}

.production-report-table th,
.production-report-table td{
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  font-size:13px;
  line-height:1.4;
}

.production-report-table th{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:#f8fafc;
  word-break:normal;
}

.production-report-table tr:last-child td{
  border-bottom:none;
}

.production-report-table td{
  color:var(--text);
  word-break:break-word;
}

.production-detail-box{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.production-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.production-detail-grid .full{
  grid-column:1 / -1;
}

.production-detail-grid small{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:4px;
}

.production-detail-grid strong{
  display:block;
  color:var(--text);
  font-size:13px;
  line-height:1.35;
}

.production-order-board{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.production-order-column{
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
  padding:10px;
}

.production-order-column-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.production-order-column-head strong{
  font-size:13px;
}

.production-order-column-head span,
.production-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.production-order-card-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.production-order-card{
  display:flex;
  flex-direction:column;
  gap:7px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#fff;
}

.production-order-card p{
  margin:0;
  font-size:13px;
  line-height:1.35;
}

.production-order-card small{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.production-order-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}

.production-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(15,23,42,.58);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.production-order-modal{
  width:min(1120px, 100vw - 20px);
  max-height:88vh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:18px 18px 0 0;
  background:#fff;
  box-shadow:0 -18px 40px rgba(15,23,42,.18);
  padding:16px;
}

.production-order-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
}

.production-order-modal-head h2{
  margin:0;
  font-size:20px;
  line-height:1.2;
}

.production-order-modal-head h2 span{
  display:inline-flex;
  margin-left:6px;
  font-size:12px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:3px 6px;
}

.production-order-modal-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

.production-modal-section{
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  margin-bottom:10px;
  background:#fff;
}

.production-modal-section h3{
  margin:0 0 12px;
  font-size:15px;
}

.production-records-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.production-record-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.production-record-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.production-record-card-title{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.production-record-card strong{
  font-size:14px;
}

.production-record-card span,
.production-record-card small{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.production-record-card p{
  margin:8px 0 4px;
  font-size:13px;
}

@media (max-width:760px){
  .production-form-grid,
  .production-accessory-options,
  .production-layout-item-options,
  .production-report-filters,
  .production-detail-grid,
  .production-order-board{
    grid-template-columns:1fr;
  }

  .production-report-table,
  .production-report-table thead,
  .production-report-table tbody,
  .production-report-table tr,
  .production-report-table th,
  .production-report-table td{
    display:block;
  }

  .production-report-table thead{
    display:none;
  }

  .production-report-table tr{
    border-bottom:1px solid var(--line);
    padding:8px 0;
  }

  .production-report-table tr:last-child{
    border-bottom:none;
  }

  .production-report-table td{
    border-bottom:none;
    display:grid;
    grid-template-columns:110px minmax(0, 1fr);
    gap:10px;
    padding:7px 12px;
  }

  .production-report-table td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  .production-accessory-head,
  .production-record-card-head{
    flex-direction:column;
  }

  .production-accessory-head span{
    text-align:left;
  }
}


.production-textarea{
  min-height:104px;
  resize:vertical;
}

.production-file-preview{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.production-file-preview.hidden{
  display:none;
}

.production-file-preview img{
  width:96px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line);
  background:#f8fafc;
}

.production-file-preview span{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.production-layout-record-card > img{
  width:100%;
  max-height:150px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  margin-bottom:10px;
  background:#f8fafc;
}

/* ── MODAL REGISTRAR COLETA (PCM) ─────────────────────── */
.pcm-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.pcm-overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.pcm-dialog{
  position:relative;
  z-index:1;
  background:var(--card,#fff);
  border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
  width:100%;
  max-width:420px;
  padding:32px 28px 24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  animation:pcmSlideIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pcmSlideIn{
  from{ opacity:0; transform:scale(.92) translateY(12px); }
  to  { opacity:1; transform:scale(1)   translateY(0);    }
}

.pcm-icon-wrap{
  width:52px;
  height:52px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--primary,#006d55) 0%, #00a87d 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex-shrink:0;
}
.pcm-icon-wrap svg{
  width:26px;
  height:26px;
}

.pcm-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.pcm-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text,#0f172a);
  margin:0;
  line-height:1.3;
}
.pcm-close{
  width:32px;
  height:32px;
  border:none;
  border-radius:8px;
  background:var(--bg-soft,#f1f5f9);
  color:var(--muted,#64748b);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.pcm-close:hover{
  background:var(--line,#e2e8f0);
  color:var(--text,#0f172a);
}
.pcm-close svg{ width:16px; height:16px; }

.pcm-client-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
  border:1px solid #a7f3d0;
  border-radius:100px;
  padding:5px 14px;
  font-size:.82rem;
  font-weight:600;
  color:#065f46;
  width:fit-content;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pcm-fields{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pcm-field-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pcm-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--muted,#64748b);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pcm-label svg{
  width:13px;
  height:13px;
  flex-shrink:0;
}
.pcm-input{
  width:100%;
  box-sizing:border-box;
  height:44px;
  padding:0 14px;
  border:1.5px solid var(--line,#e2e8f0);
  border-radius:10px;
  font-size:.92rem;
  color:var(--text,#0f172a);
  background:var(--bg-soft,#f8fafc);
  outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.pcm-input::placeholder{ color:var(--muted,#94a3b8); }
.pcm-input:focus{
  border-color:var(--primary,#006d55);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,109,85,.12);
}

.pcm-error{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fef2f2;
  border:1px solid #fca5a5;
  border-radius:8px;
  padding:10px 12px;
  font-size:.82rem;
  color:#b91c1c;
  font-weight:500;
}

.pcm-actions{
  display:flex;
  gap:10px;
  padding-top:4px;
}
.pcm-btn-cancel{
  flex:1;
  height:44px;
  border:1.5px solid var(--line,#e2e8f0);
  border-radius:10px;
  background:transparent;
  color:var(--muted,#64748b);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.pcm-btn-cancel:hover{
  background:var(--bg-soft,#f1f5f9);
  border-color:var(--muted,#94a3b8);
  color:var(--text,#0f172a);
}
.pcm-btn-confirm{
  flex:2;
  height:44px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg, var(--primary,#006d55) 0%, #00a87d 100%);
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  box-shadow:0 4px 12px rgba(0,109,85,.28);
  transition:opacity .15s, box-shadow .15s, transform .1s;
}
.pcm-btn-confirm svg{ width:16px; height:16px; }
.pcm-btn-confirm:hover{
  opacity:.92;
  box-shadow:0 6px 18px rgba(0,109,85,.35);
  transform:translateY(-1px);
}
.pcm-btn-confirm:active{ transform:translateY(0); }

@media(max-width:480px){
  .pcm-dialog{
    padding:24px 18px 20px;
    border-radius:16px;
    max-width:100%;
  }
  .pcm-actions{ flex-direction:column; }
  .pcm-btn-cancel, .pcm-btn-confirm{ flex:unset; width:100%; }
}

/* ── RELATÓRIO DE SALDOS ─────────────────────────────── */
.saldos-table-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:4px;
}

/* Bloco por cliente */
.saldo-client-block{
  border:1px solid var(--line,#e2e8f0);
  border-radius:14px;
  overflow:hidden;
  background:var(--card,#fff);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

/* Cabeçalho do bloco */
.saldo-client-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 20px;
  background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);
  border-bottom:1px solid var(--line,#e2e8f0);
}
.saldo-client-info{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.saldo-client-avatar{
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--primary,#006d55) 0%,#00a87d 100%);
  color:#fff;
  font-weight:800;
  font-size:.88rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  letter-spacing:-.5px;
}
.saldo-client-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.saldo-client-name{
  font-weight:700;
  font-size:.92rem;
  color:var(--text,#0f172a);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.saldo-client-count{
  font-size:.72rem;
  color:var(--muted,#64748b);
  font-weight:500;
}

/* Linha de itens: layout em cards lado a lado */
.saldo-items-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.saldo-item-row{
  display:grid;
  grid-template-columns:1fr 100px 110px 130px;
  align-items:center;
  gap:0;
  padding:12px 20px;
  border-top:1px solid var(--line,#f1f5f9);
  transition:background .12s;
}
.saldo-item-row:hover{
  background:var(--bg-soft,#f8fafc);
}
.saldo-items-header{
  display:grid;
  grid-template-columns:1fr 100px 110px 130px;
  align-items:center;
  gap:0;
  padding:7px 20px;
  background:var(--bg-soft,#f8fafc);
  border-top:1px solid var(--line,#e2e8f0);
}
.saldo-col-label{
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#94a3b8);
}
.saldo-col-label.right{ text-align:right; }

/* Célula produto */
.saldo-product-name{
  font-size:.87rem;
  font-weight:500;
  color:var(--text,#0f172a);
  line-height:1.35;
}

/* Células numéricas */
.saldo-num-cell{
  text-align:right;
  font-size:.87rem;
  font-variant-numeric:tabular-nums;
  color:var(--muted,#475569);
  font-weight:500;
}

/* Badge saldo */
.saldo-badge-wrap{
  display:flex;
  justify-content:flex-end;
}
.saldo-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:8px;
  padding:4px 12px;
  font-size:.83rem;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:-.01em;
}
.saldo-badge-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  flex-shrink:0;
}
.saldo-badge.saldo-ok{
  background:#dcfce7;
  color:#15803d;
}
.saldo-badge.saldo-ok .saldo-badge-dot{ background:#15803d; }
.saldo-badge.saldo-zero{
  background:#fef9c3;
  color:#a16207;
}
.saldo-badge.saldo-zero .saldo-badge-dot{ background:#ca8a04; }
.saldo-badge.saldo-neg{
  background:#fee2e2;
  color:#b91c1c;
}
.saldo-badge.saldo-neg .saldo-badge-dot{ background:#dc2626; }

/* Métricas de saldo na hero — grid 2×2 */
#saldosMetrics{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

@media(max-width:640px){
  .saldo-items-header{ display:none; }
  .saldo-item-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:14px 16px;
  }
  .saldo-num-cell{ text-align:left; }
  .saldo-num-cell::before{
    content:attr(data-label) " ";
    font-size:.7rem;
    color:var(--muted,#94a3b8);
    font-weight:600;
    text-transform:uppercase;
    display:inline;
  }
  .saldo-badge-wrap{ justify-content:flex-start; }
  .saldo-client-header{ flex-wrap:wrap; }
  #saldosMetrics{ grid-template-columns:1fr 1fr; }
}