/*
 * GALACTIC ERP — App shell
 * Builds on design-system.css (link it first). Pure CSS, no JavaScript.
 */

body.dir-rtl { direction: rtl; text-align: right; }
body.dir-ltr { direction: ltr; text-align: left; }

.brand { color: var(--text); }

/* ---- Content shells used by a couple of standalone pages (home / offline) ---- */
.hero-shell, .auth-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--sp-5);
}
.hero-shell h1, .auth-shell h1 {
  margin: 0 0 var(--sp-2);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--text);
}
.lead { color: var(--text-muted); max-width: 42rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.sync-message { min-height: 1.4em; color: var(--success); margin-top: var(--sp-4); font-weight: 600; }

.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.info-grid article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-xs);
}
.info-grid h2 { margin-top: 0; font-size: var(--fs-md); color: var(--text); }
.info-grid p { color: var(--text-muted); margin-bottom: 0; }

.auth-form { display: grid; gap: var(--sp-4); max-width: 360px; margin-top: var(--sp-4); }
.auth-form label { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cta-row .btn, .cta-row .btn-secondary { width: 100%; }
}