/* ==========================================================================
   home.css — FD Platform launcher. Self-contained (no shared toolkit yet);
   clean, theme-aware. Will move to packages/ui when that's extracted.
   ========================================================================== */
:root {
  --bg: #f6f7f9; --surface: #ffffff; --line: #e4e7ec; --text: #1a1d23;
  --soft: #667085; --faint: #98a2b3; --accent: #1f9d57; --accent-ink: #ffffff;
  --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --surface:#1c1f25; --line:#2a2f38; --text:#e7eaee;
    --soft:#98a2b3; --faint:#6b7480; --accent:#2fb56a; --shadow:0 1px 3px rgba(0,0,0,.4); }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Roboto, system-ui, sans-serif; background: var(--bg); color: var(--text); }
.loading { padding: 3rem; text-align: center; color: var(--soft); }

.wrap { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }
.who { display: flex; align-items: center; gap: .75rem; }
.email { font-size: .85rem; color: var(--soft); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .9rem; padding: .5rem .9rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.ghost:hover { background: var(--bg); }
.btn.ms { width: 100%; background: var(--surface); border-color: var(--line); color: var(--text); padding: .65rem; }
.btn.ms:hover { border-color: var(--faint); }

/* login card */
.login { max-width: 22rem; margin: 4rem auto 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 2rem; text-align: center; }
.login .brand { font-size: 1.4rem; margin-bottom: .25rem; }
.login .sub { margin: 0 0 1.25rem; color: var(--faint); font-size: .9rem; }
.err { min-height: 1em; margin-top: .75rem; color: #d92d20; font-size: .85rem; }
.linkbtn { display: block; margin: .6rem auto 0; background: none; border: none; color: var(--soft);
  font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--text); }
.pwform { display: grid; gap: .5rem; margin-top: .75rem; text-align: left; }
.input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; }
.input:focus { outline: none; border-color: var(--accent); }
.btn.accent { width: 100%; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.accent:hover { filter: brightness(.96); }

/* app grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.tile { position: relative; display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile__icon { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.tile__icon svg { width: 1.4rem; height: 1.4rem; }
.tile__name { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.tile__desc { font-size: .85rem; color: var(--soft); margin-top: .15rem; }
.tile__role { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; background: var(--bg); color: var(--soft); border: 1px solid var(--line); }
.tile--soon { opacity: .62; }
.tile__soon { position: absolute; top: .6rem; right: .7rem; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--faint); }
.empty { color: var(--soft); text-align: center; padding: 3rem; }

/* admin console */
.admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.admin-sub { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; }
.admin-defrow { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.admin-def { display: grid; gap: .3rem; }
.admin-def > span { font-size: .8rem; color: var(--soft); }
.admin-def select { font: inherit; font-size: .9rem; padding: .4rem .55rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--text); }
.admin-note { font-size: .85rem; color: var(--soft); margin: 0 0 1rem; }
.admin-card .admin-scroll { border: 1px solid var(--line); border-radius: 10px; }
.admin-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--surface); }
.admin-table th, .admin-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.admin-table thead th { font-weight: 600; color: var(--soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .tc { text-align: center; }
.admin-name { font-weight: 500; }
.admin-email { font-size: .78rem; color: var(--faint); }
.admin-table select { font: inherit; font-size: .85rem; padding: .25rem .4rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--text); }
.admin-table select:disabled { opacity: .4; cursor: not-allowed; }

/* toast */
.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  background: var(--text); color: var(--bg); padding: .5rem .9rem; border-radius: 8px; font-size: .85rem;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--bad { background: #d92d20; color: #fff; }