/* AlignedTG brand tokens — see docs/style_guide.md */
:root {
  /* color */
  --color-primary:    #ff5e14;
  --color-primary-hover: #e6520e;
  --color-secondary:  #000106;
  --color-text:       #000106;
  --color-accent:     #fff6eb;
  --color-surface:    #ffffff;
  --color-teal:       #00475b;
  --color-pale-blue:  #dde4ff;
  --color-danger:     #b80f0a;
  --color-danger-bg:  #fde6e5;
  --color-border:     #e3e5eb;
  --color-border-input: #cdcfd5;
  --color-muted:      #5b616f;

  /* type */
  --font-sans: "tt-commons-pro", "Inter", system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace,
               SFMono-Regular, Menlo, monospace;

  /* radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-1: 0 2px 8px rgba(0, 1, 6, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  min-height: 100vh;
}

code, pre, .mono { font-family: var(--font-mono); }

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.brand-logo { height: 28px; display: block; }
.brand-name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.user-menu { display: flex; align-items: center; gap: 1rem; }
.user-email { color: var(--color-muted); font-size: 0.9rem; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-input);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--color-accent); }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Layout ------------------------------------------------------------- */

.content { max-width: 1280px; margin: 0 auto; padding: 3rem 24px; }

.hero { margin-bottom: 2.5rem; }
.hero h1 {
  margin: 0 0 0.5rem;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.05;
}
.subtitle { margin: 0; color: var(--color-muted); font-size: 1.125rem; font-weight: 500; }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* --- Flash messages ------------------------------------------------------ */

.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.flash-error { background: var(--color-danger-bg); color: var(--color-danger); }
.flash-info { background: var(--color-pale-blue); color: var(--color-teal); }

/* --- App tiles ------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.tile:hover {
  background: var(--color-accent);
  box-shadow: var(--shadow-1);
}

.tile-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: var(--color-text);
  overflow: hidden;
}
.tile-icon img { width: 32px; height: 32px; }
.tile-initial { font-size: 1.4rem; font-weight: 600; color: var(--color-teal); }

.tile-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tile-name { font-weight: 600; font-size: 1.125rem; }
.tile-desc { font-size: 0.9rem; color: var(--color-muted); }

.empty { color: var(--color-muted); }
.empty code { background: var(--color-accent); padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); }

/* --- Auth pages ------------------------------------------------------------ */

.auth-wrap { display: flex; justify-content: center; padding: 3rem 24px; }

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
}
.auth-card h1 { margin: 0 0 0.5rem; font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.auth-card .auth-intro { margin: 0 0 1.5rem; color: var(--color-muted); }
.auth-card form { display: flex; flex-direction: column; gap: 1rem; }
.auth-card .btn-primary { width: 100%; margin-top: 0.25rem; }

.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field label { font-size: 0.9rem; font-weight: 500; }
.form-field input {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.form-field input.mono { font-family: var(--font-mono); }
.form-field input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.auth-links { margin-top: 1.25rem; font-size: 0.9rem; }
.auth-links a { color: var(--color-teal); }

.password-rules {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.password-rules li { margin-bottom: 0.2rem; }

/* --- Launch interstitial ---------------------------------------------------- */

.launch-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
}
.launch-card { text-align: center; color: var(--color-muted); }

/* ---- two-factor authentication ---------------------------------------- */
.auth-card-wide { max-width: 34rem; }
.mfa-steps { margin: 0 0 1.25rem 1.1rem; padding: 0; color: var(--color-muted); font-size: 0.94rem; line-height: 1.65; }
.mfa-steps li { margin-bottom: 0.3rem; }
.mfa-steps b { color: var(--color-text, #000106); }
.mfa-enrol { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
  background: #fbf6ee; border: 1px solid #ece2d3; border-radius: 12px; padding: 1.1rem; margin-bottom: 1.4rem; }
.mfa-qr { background: #fff; border: 1px solid #ece2d3; border-radius: 10px; padding: 8px; line-height: 0; }
.mfa-qr svg { width: 168px; height: 168px; display: block; }
.mfa-manual { flex: 1; min-width: 190px; }
.mfa-manual-label { margin: 0 0 0.45rem; font-size: 0.85rem; color: var(--color-muted); }
.mfa-secret { display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.95rem;
  letter-spacing: 0.08em; background: #fff; border: 1px dashed #d8ccb8; border-radius: 8px;
  padding: 0.6rem 0.7rem; margin-bottom: 0.6rem; word-break: break-all; }
.btn-copy { font-size: 0.82rem; padding: 0.35rem 0.8rem; }
.mfa-hint { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--color-muted); }
.mfa-code-input { font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; letter-spacing: 0.4em; text-align: center; }
.mfa-foot { margin: 1rem 0 0; font-size: 0.82rem; color: var(--color-muted); }
.mfa-status { padding: 0.7rem 0.9rem; border-radius: 9px; font-size: 0.92rem; margin-bottom: 1rem; }
.mfa-status.mfa-on { background: #e2f2e7; color: #1c7a43; }
.mfa-status.mfa-off { background: #fdf0e6; color: #a4531a; }

/* ---- admin console ------------------------------------------------------ */
.admin-hero { margin-bottom: 1rem; }
.admin-tabs { display: flex; gap: 0.4rem; margin-top: 1rem; }
.admin-tab { padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.9rem; text-decoration: none;
  color: var(--color-muted); border: 1px solid transparent; }
.admin-tab:hover { background: #f4ece0; }
.admin-tab.is-active { background: #fff; border-color: #e6dbc9; color: #000106; font-weight: 600; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; }
.stat { background: #fff; border: 1px solid #ece2d3; border-radius: 11px; padding: 0.8rem 1rem; }
.stat-k { display: block; font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.35rem; }
.stat-v { font-size: 1.5rem; font-weight: 600; }
.stat-good { color: #1c7a43; } .stat-warn { color: #b3391c; }
.panel { background: #fff; border: 1px solid #ece2d3; border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.2rem; overflow-x: auto; }
.panel-title { font-size: 1rem; margin: 0 0 0.8rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 500; padding: 0.5rem 0.55rem; border-bottom: 1px solid #ece2d3; white-space: nowrap; }
.admin-table td { padding: 0.6rem 0.55rem; border-bottom: 1px solid #f6f0e6; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.chip { display: inline-block; font-size: 0.7rem; padding: 0.12rem 0.5rem; border-radius: 20px; background: #efe9dd; color: #6f665a; margin-right: 0.25rem; }
.chip-ok { background: #e2f2e7; color: #1c7a43; } .chip-warn { background: #fdf0e6; color: #a4531a; }
.chip-off { background: #fde5dc; color: #b3391c; } .chip-wait { background: #DDE4FF; color: #2b3b8f; }
.chip-admin { background: #000106; color: #FFF6EB; } .chip-app { background: #f4ece0; color: #4a4238; font-family: "IBM Plex Mono", monospace; }
.row-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.row-actions form { display: inline; }
.btn-xs { font-size: 0.74rem; padding: 0.25rem 0.55rem; }
.btn-danger { color: #b3391c; border-color: #f0cabd; }
.btn-danger:hover { background: #fde5dc; }
.mono { font-family: "IBM Plex Mono", monospace; } .small { font-size: 0.78rem; } .muted { color: var(--color-muted); }
.matrix-col { text-align: center; } .matrix-cell { text-align: center; }
.toggle { width: 26px; height: 26px; border-radius: 7px; border: 1px solid #ddd2be; background: #fbf6ee;
  cursor: pointer; font-size: 0.85rem; line-height: 1; color: #1c7a43; }
.toggle.on { background: #e2f2e7; border-color: #b6dcc4; }
.toggle.on.admin { background: #000106; color: #FFF6EB; border-color: #000106; }
.toggle:hover { border-color: #FF5E14; }
.invite-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.invite-form input[type=email] { flex: 0 0 240px; }
.invite-apps { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.check { font-size: 0.84rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: 0.3rem; }

/* Microsoft SSO button + divider */
.btn-ms {
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: #fff; color: #1b1b1b; border: 1px solid #cfcfcf;
  padding: 0.65rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none;
  margin-bottom: 0.25rem;
}
.btn-ms:hover { background: #f3f3f3; }
.auth-or { display: flex; align-items: center; gap: 0.75rem; color: var(--color-muted);
  font-size: 0.82rem; margin: 1rem 0 0.25rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border, #e2e2e2); }