/* ConfTech · shell da aplicação: menu lateral (desktop), gaveta (celular), conteúdo */

.skip-link {
  position: fixed; left: var(--sp-3); top: var(--sp-3); z-index: var(--z-toast);
  transform: translateY(-200%);
  background: rgb(var(--surface)); color: rgb(var(--text));
  border: 1px solid rgb(var(--border-strong)); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4); font-weight: 500;
}
.skip-link:focus { transform: none; text-decoration: none; }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Barra superior: só no celular/tablet */
.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h); padding: 0 var(--sp-4);
  padding-top: env(safe-area-inset-top);
  background: rgb(var(--nav-bg)); color: rgb(var(--nav-text-strong));
}
.topbar .brand { color: inherit; }
.topbar-btn {
  display: inline-grid; place-items: center;
  width: var(--touch); height: var(--touch); margin-left: -.5rem;
  background: transparent; border: 0; border-radius: var(--r-md); color: inherit;
}
.topbar-btn:hover { background: rgb(var(--nav-hover)); }
.topbar-btn:focus-visible { outline-color: rgb(var(--nav-accent)); }

/* Marca */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.brand-logo { display: block; flex: none; height: 2.25rem; width: auto; max-width: 9.5rem; object-fit: contain; padding: .25rem .5rem; background: rgb(var(--logo-plate)); border-radius: var(--r-md); }
.brand.has-logo .brand-text { display: none; }  /* o logo do cliente já traz o nome */
.auth-box .brand-logo { height: 3rem; max-width: 12rem; }
.brand-text { display: grid; line-height: 1.1; min-width: 0; }
.brand-name { font-weight: 600; font-size: var(--text-lg); letter-spacing: -.01em; }
.brand-sub { font-size: var(--text-xs); color: rgb(var(--nav-muted)); letter-spacing: .02em; }

/* Menu lateral */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer);
  width: min(19rem, 86vw);
  display: flex; flex-direction: column;
  background: rgb(var(--nav-bg)); color: rgb(var(--nav-text));
  transform: translateX(-100%); visibility: hidden;
  transition: transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.sidebar.is-open {
  transform: none; visibility: visible;
  transition: transform var(--t-base) var(--ease), visibility 0s;
  box-shadow: var(--shadow-float);
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.sidebar-close { display: inline-grid; place-items: center; width: var(--touch); height: var(--touch); margin-right: -.5rem; background: transparent; border: 0; border-radius: var(--r-md); color: rgb(var(--nav-text)); }
.sidebar-close:hover { background: rgb(var(--nav-hover)); color: rgb(var(--nav-text-strong)); }
.sidebar .brand { color: rgb(var(--nav-text-strong)); }
.sidebar :focus-visible { outline-color: rgb(var(--nav-accent)); }

.sidebar-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--sp-3) var(--sp-4); scrollbar-width: thin; scrollbar-color: rgb(var(--nav-border)) transparent; }
.nav-group + .nav-group { margin-top: var(--sp-5); }
.nav-label {
  margin: 0 0 var(--sp-1); padding: 0 var(--sp-3);
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: rgb(var(--nav-muted));
}
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch); padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: rgb(var(--nav-text)); font-weight: 500; text-decoration: none;
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.nav-link:hover { background: rgb(var(--nav-hover)); color: rgb(var(--nav-text-strong)); text-decoration: none; }
.nav-link[aria-current="page"] { background: rgb(var(--nav-active-bg)); color: rgb(var(--nav-text-strong)); }
.nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: -.75rem; top: .5rem; bottom: .5rem; width: 3px;
  border-radius: 0 3px 3px 0; background: rgb(var(--nav-accent));
}
.nav-link .icon { opacity: .85; }
.nav-link[aria-current="page"] .icon { opacity: 1; color: rgb(var(--nav-accent)); }

/* Rodapé do menu: conta (abre o diálogo) e sair */
.sidebar-foot { border-top: 1px solid rgb(var(--nav-border)); padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.account {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0; width: 100%; padding: var(--sp-2);
  background: transparent; border: 0; border-radius: var(--r-md); text-align: left; color: inherit;
}
button.account:hover { background: rgb(var(--nav-hover)); }
.account > .icon { flex: none; color: rgb(var(--nav-muted)); }
.avatar {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(var(--nav-accent) / .18); color: rgb(var(--nav-accent));
  font-weight: 600; font-size: var(--text-sm); letter-spacing: .02em;
}
.account-name { color: rgb(var(--nav-text-strong)); font-weight: 500; line-height: 1.2; }
.account-meta { font-size: var(--text-xs); color: rgb(var(--nav-muted)); }
.account-text { min-width: 0; flex: 1; }
.account-text > span { display: block; }
.sidebar-tools { display: flex; gap: var(--sp-2); }
.sidebar-tool {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 2.25rem; padding: 0 var(--sp-3);
  background: transparent; border: 1px solid rgb(var(--nav-border)); border-radius: var(--r-md);
  color: rgb(var(--nav-text)); font-size: var(--text-sm); font-weight: 500; text-decoration: none;
}
.sidebar-tool:hover { background: rgb(var(--nav-hover)); color: rgb(var(--nav-text-strong)); text-decoration: none; }
.sidebar-tool form { display: contents; }

.backdrop {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: rgb(var(--overlay)); opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) linear, visibility 0s linear var(--t-base);
}
.backdrop.is-visible { opacity: 1; visibility: visible; transition: opacity var(--t-base) linear, visibility 0s; }
body.is-locked { overflow: hidden; }

/* Conteúdo */
.main { flex: 1; width: 100%; max-width: var(--page-w); margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-10); }
.main-wide { max-width: none; }

/* Desktop: menu fixo */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: 1fr; }
  .topbar, .sidebar-close, .backdrop { display: none; }
  .sidebar {
    position: sticky; top: 0; height: 100vh; height: 100dvh; grid-row: 1;
    width: auto; transform: none; visibility: visible; box-shadow: none; transition: none;
  }
  .main { padding: var(--sp-8) var(--sp-8) var(--sp-12); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .main { padding: var(--sp-6) var(--sp-6) var(--sp-10); }
}

/* Páginas sem menu (login, cadastro, redefinição) */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; }
.auth-aside { display: none; }
.auth-main { display: grid; align-content: center; justify-items: center; padding: var(--sp-6) var(--sp-4); }
.auth-box { width: 100%; max-width: 25rem; display: grid; gap: var(--sp-6); }
.auth-box .brand-name { font-size: var(--text-xl); }
.auth-box .brand-sub { color: rgb(var(--text-3)); }
.auth-head h1 { font-size: var(--text-2xl); }
.auth-head p { color: rgb(var(--text-2)); margin-top: var(--sp-1); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .auth-aside {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-8);
    padding: var(--sp-10); background: rgb(var(--nav-bg)); color: rgb(var(--nav-text));
    position: relative; overflow: hidden;
  }
  .auth-aside .brand { color: rgb(var(--nav-text-strong)); }
  .auth-lede { font-size: var(--text-3xl); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: rgb(var(--nav-text-strong)); max-width: 17ch; }
  .auth-points { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-3); color: rgb(var(--nav-text)); }
  .auth-points li { display: flex; gap: var(--sp-3); align-items: baseline; }
  .auth-points .mono { color: rgb(var(--nav-accent)); font-size: var(--text-sm); }
  .auth-main { padding: var(--sp-10); }
}

/* Marca: duas camadas de cor (principal e acento) */
.brand-mark .m-main { fill: currentColor; }
.auth-box .brand-mark { color: rgb(var(--link)); }
.brand-mark .m-dim { opacity: .55; }
.brand-mark .m-accent { fill: rgb(var(--brand-accent, var(--accent-600))); }
.sidebar, .topbar, .auth-aside { --brand-accent: var(--nav-accent); }