/* Tenant surface: sign-in, onboarding and the workspace at /app.

   This file carries ONLY tenant-specific layout. Every colour, radius, shadow
   and typeface comes from the shared design tokens in styles.css, which
   tenant.html loads first. Do not redefine :root here - a second palette is
   what made this surface diverge from the engineering studio and the platform
   console in the first place.

   Everything below therefore themes correctly in both light and dark, because
   styles.css swaps the token values on body.dark. */

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  /* Subtle brand wash built from the accent tint, so it holds in both themes. */
  background:
    radial-gradient(circle at 15% 10%, var(--accent2) 0, transparent 45%),
    var(--bg);
}

/* ---------- Brand bar ---------- */

.brand-bar {
  height: 68px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
  letter-spacing: .01em;
}

.brand img {
  width: 38px;
  height: 38px;
}

/* Theme control sits outside #sessionControls so it stays available before
   sign-in, when the session block is hidden. */
.brand-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.session-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  font-size: .9rem;
}

.brand-actions #theme {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 9px;
  line-height: 1;
}

.brand-actions #theme:hover {
  color: var(--text);
  background: var(--panel2);
}

.session-controls button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 9px;
}

.session-controls button:hover {
  color: var(--text);
  background: var(--panel2);
}

/* ---------- Sign-in / onboarding ---------- */

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 8vw;
  align-items: center;
  min-height: calc(100vh - 68px);
  padding: clamp(32px, 7vw, 96px);
}

.auth-copy {
  max-width: 720px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
}

.auth-copy h1 {
  font-size: clamp(2.5rem, 6vw, 5.6rem);
  line-height: .98;
  margin: .25em 0;
  color: var(--text);
}

.auth-copy p:last-child {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 580px;
}

.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.auth-card h2 {
  margin-top: 0;
  font-size: 1.7rem;
}

.auth-card label {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  color: var(--muted);
  font-size: .9rem;
}

.auth-card input,
.auth-card select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 13px;
  outline: none;
}

.auth-card input:focus,
.auth-card select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent2);
}

/* Submit controls carry the shared .primary class from styles.css; only the
   full-width sign-in sizing is tenant-specific. */
.auth-card button[type="submit"] {
  width: 100%;
  padding: 13px;
  font-size: 1rem;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 0;
}

.auth-links a {
  color: var(--accent);
}

.hint,
.notice {
  color: var(--muted);
  font-size: .88rem;
}

.notice {
  padding: 12px;
  border-radius: 9px;
  background: var(--accent2);
  border: 1px solid var(--line);
  color: var(--text);
  margin-bottom: 16px;
}

.notice.error {
  background: var(--panel2);
  border-color: var(--bad);
  color: var(--bad);
}

.tenant-choice {
  margin-top: 10px !important;
  background: var(--panel2) !important;
  color: var(--text) !important;
}

/* ---------- Workspace ---------- */

.workspace {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 68px);
}

.workspace aside {
  border-right: 1px solid var(--line);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace aside h2 {
  font-size: .85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 0 12px;
}

.workspace button,
.workspace a {
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
}

.workspace button.active,
.workspace button:hover,
.workspace a:hover {
  background: var(--accent2);
  color: var(--text);
}

.workspace article {
  padding: 40px;
  max-width: 1100px;
}

.workspace h1 {
  font-size: 2.2rem;
  margin-top: 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.card,
.workspace table {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
}

.card strong {
  display: block;
  font-size: 1.6rem;
  margin-top: 8px;
}

.workspace table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  padding: 0;
  overflow: hidden;
}

.workspace th,
.workspace td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}

.workspace th {
  color: var(--muted);
}

@media (max-width: 800px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-copy {
    display: none;
  }

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

  .workspace aside {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    overflow: auto;
  }

  .workspace aside h2 {
    display: none;
  }

  .workspace article {
    padding: 24px;
  }

  .session-controls span {
    display: none;
  }
}