/* payrollmanager client — base/reset + app shell. Consumes tokens.css. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--pm-font);
  font-size: var(--pm-fs-md);
  line-height: 1.5;
  color: var(--pm-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139, 124, 246, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(45, 212, 191, 0.08), transparent 55%),
    var(--pm-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--pm-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 var(--pm-sp-3); font-weight: 600; }
h1 { font-size: var(--pm-fs-2xl); }
h2 { font-size: var(--pm-fs-xl); }
p { margin: 0 0 var(--pm-sp-3); color: var(--pm-text-muted); }

/* App shell: sidebar + header + content */
.pm-app { display: grid; grid-template-columns: var(--pm-sidebar-w) 1fr; min-height: 100vh; }
.pm-main { display: flex; flex-direction: column; min-width: 0; }
.pm-header {
  height: var(--pm-header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pm-sp-5);
  border-bottom: 1px solid var(--pm-border);
  background: var(--pm-bg-elev);
}
.pm-content { flex: 1; padding: var(--pm-sp-5); overflow: auto; }

/* Centered auth layout (login) */
.pm-center { min-height: 100vh; display: grid; place-items: center; padding: var(--pm-sp-5); }

.pm-brand { display: flex; align-items: center; gap: var(--pm-sp-2); font-weight: 700; letter-spacing: .2px; }
.pm-brand-dot { width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pm-accent), var(--pm-violet)); box-shadow: 0 0 12px var(--pm-accent-soft); }

.pm-muted { color: var(--pm-text-muted); }
.pm-faint { color: var(--pm-text-faint); }
.pm-row { display: flex; gap: var(--pm-sp-3); align-items: center; }
.pm-spread { display: flex; justify-content: space-between; align-items: center; gap: var(--pm-sp-3); }
.pm-stack > * + * { margin-top: var(--pm-sp-3); }
.pm-grid { display: grid; gap: var(--pm-sp-4); }
.pm-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pm-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px) {
  .pm-app { grid-template-columns: 1fr; }
  .pm-grid.cols-2, .pm-grid.cols-3 { grid-template-columns: 1fr; }
}