/* =============================================================================
   ERP MsX — BASE
   Reset, tipografia, shell da aplicação (sidebar + topbar + conteúdo).
   Depende de tokens.css.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Barra de rolagem discreta, no tom do tema */
* { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-interactive); background-clip: content-box; }

/* Só para leitor de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Link de pulo — primeiro tabulável da página */
.skip-link {
  position: absolute; top: var(--space-2); left: var(--space-2);
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3);
  background: var(--action-primary); color: var(--text-on-accent);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); text-decoration: none; }

/* =============================================================================
   SHELL — grade de três zonas
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  /* --faixa-h é definida pelo JS quando a faixa de aviso de modo local existe. */
  height: calc(100vh - var(--faixa-h, 0px));
  --sidebar-w: 236px;
}
.app[data-sidebar="collapsed"] { --sidebar-w: 56px; }

/* -------- Sidebar ------------------------------------------------------- */

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-base);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* A zona da marca é SEMPRE escura, nos dois temas.
   O wordmark MsX é cinza metálico claro com o X em gradiente magenta: foi
   desenhado para fundo escuro. Sobre a sidebar branca do tema claro o "Ms"
   praticamente desaparece. Escurecer o PNG por filtro resolveria a leitura,
   mas enlameia o magenta — e o gradiente é a marca. Manter a faixa escura
   preserva o logo exatamente como ele é. */
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-3);
  background: #181f26;
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.sidebar__brand .sidebar__brand-text { color: #b3a8bd; }
.sidebar__logo { height: 20px; width: auto; flex: none; }
.sidebar__brand-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  white-space: nowrap;
}
.app[data-sidebar="collapsed"] .sidebar__brand-text { display: none; }

.sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

.sidebar__section {
  margin-top: var(--space-4);
  padding: 0 var(--space-2) var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.sidebar__section:first-child { margin-top: 0; }
.app[data-sidebar="collapsed"] .sidebar__section {
  overflow: hidden; text-indent: -999px; padding-top: var(--space-3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5, 10px);
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-instant) var(--ease-out),
              color var(--duration-instant) var(--ease-out);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.nav-item[aria-current="page"] {
  background: var(--surface-selected);
  color: var(--accent);
  font-weight: var(--weight-medium);
}
.nav-item__icon { flex: none; width: 16px; height: 16px; }
.nav-item__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.nav-item__badge {
  flex: none;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: grid; place-items: center;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--accent-surface);
  color: var(--accent);
  border-radius: var(--radius-pill);
}
.nav-item--soon { opacity: 0.55; cursor: default; }
.nav-item--soon:hover { background: transparent; color: var(--text-secondary); }
.app[data-sidebar="collapsed"] .nav-item__label,
.app[data-sidebar="collapsed"] .nav-item__badge { display: none; }
.app[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: 0; }

.sidebar__footer {
  flex: none;
  padding: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* -------- Topbar -------------------------------------------------------- */

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-4);
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar__toggle {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.topbar__toggle:hover { background: var(--surface-hover); color: var(--text-primary); }

.topbar__crumb {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.topbar__crumb strong { color: var(--text-primary); font-weight: var(--weight-medium); }

.topbar__spacer { flex: 1 1 auto; }

.topbar__search {
  position: relative;
  flex: 0 1 300px;
}
.topbar__search input { padding-left: 30px; padding-right: 46px; }
.topbar__search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.topbar__search kbd {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  pointer-events: none;
}

/* -------- Conteúdo ------------------------------------------------------ */

.main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface-sunken);
}

.screen { padding: var(--space-5) var(--space-6) var(--space-10); }

.screen__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.screen__title-group { flex: 1 1 260px; min-width: 0; }
.screen__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);   /* Torus tem face única — nunca pedir bold */
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.screen__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.screen__actions { display: flex; gap: var(--space-2); flex: none; flex-wrap: wrap; }

/* =============================================================================
   LOGIN — superfície de marca
   ========================================================================== */

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: var(--space-6);
  background: var(--surface-sunken);
}
@media (min-width: 900px) {
  .login { grid-template-columns: 1.05fr 1fr; }
}

.login__brand {
  display: none;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-brand);
  background: var(--brand-gradient);
  padding: var(--space-12);
  color: #fff;
}
@media (min-width: 900px) { .login__brand { display: grid; align-content: center; } }

.login__brand-logo { height: 40px; width: auto; margin-bottom: var(--space-8); }
/* Texto sobre o gradiente só em corpo grande: o pior ponto (magenta) dá 3,76:1
   com branco, e o limiar de texto grande é 3:1. */
.login__brand-title {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
}
.login__brand-text {
  margin-top: var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  max-width: 34ch;
}

/* Mesma razão da faixa da sidebar: no tema claro o painel de login é branco e
   o wordmark sumiria. Aqui o logo ganha uma pastilha escura própria. */
:root[data-theme="light"] .login__logo,
.login__logo {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: #181f26;
  box-sizing: content-box;
}

.login__panel {
  width: 100%;
  max-width: 380px;
  padding: var(--space-8);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.login__logo { height: 26px; width: auto; margin-bottom: var(--space-6); }
.login__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
}
.login__hint { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-tertiary); }
.login__form { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.login__demo {
  margin-top: var(--space-5);
  padding: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
}
.login__demo code {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* =============================================================================
   RESPONSIVO — a sidebar virá gaveta no estreito
   ========================================================================== */

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: 236px;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-overlay);
  }
  .app[data-drawer="open"] .sidebar { transform: translateX(0); }
  .app[data-drawer="open"]::after {
    content: ""; position: fixed; inset: 0;
    background: rgb(0 0 0 / 0.5);
    z-index: calc(var(--z-drawer) - 1);
  }
  .app[data-sidebar="collapsed"] .sidebar__brand-text,
  .app[data-sidebar="collapsed"] .nav-item__label,
  .app[data-sidebar="collapsed"] .nav-item__badge { display: revert; }
  .app[data-sidebar="collapsed"] .nav-item { justify-content: flex-start; padding: 0 var(--space-2); }
  .app[data-sidebar="collapsed"] .sidebar__section { text-indent: 0; }
  .screen { padding: var(--space-4) var(--space-4) var(--space-10); }
  .topbar { padding: 0 var(--space-3); }
  .topbar__search { flex-basis: 160px; }
  .topbar__crumb { display: none; }
}

/* Alvo de toque de 44px onde há ponteiro grosso (WCAG 2.5.5) */
@media (pointer: coarse) {
  .nav-item { height: var(--touch-target-min); }
  .btn { min-height: var(--touch-target-min); }
}